From 2080486419403112c2d869f520292a8bc0f4e1eb Mon Sep 17 00:00:00 2001
From: Ryan Holinshead <>
Date: Wed, 3 Jan 2024 16:34:36 -0500
Subject: [PATCH] [editor] Image Output Rendering

---
 .../src/components/MimeTypeRenderer.tsx       | 18 ++++++++++++
 .../prompt_input/attachments/Attachment.tsx   | 18 ------------
 .../attachments/AttachmentContainer.tsx       |  7 +++--
 .../prompt_outputs/PromptOutputsRenderer.tsx  | 29 +++++++++++++++++++
 4 files changed, 52 insertions(+), 20 deletions(-)
 create mode 100644 python/src/aiconfig/editor/client/src/components/MimeTypeRenderer.tsx
 delete mode 100644 python/src/aiconfig/editor/client/src/components/prompt/prompt_input/attachments/Attachment.tsx

diff --git a/python/src/aiconfig/editor/client/src/components/MimeTypeRenderer.tsx b/python/src/aiconfig/editor/client/src/components/MimeTypeRenderer.tsx
new file mode 100644
index 000000000..49220d8f3
--- /dev/null
+++ b/python/src/aiconfig/editor/client/src/components/MimeTypeRenderer.tsx
@@ -0,0 +1,18 @@
+import { memo } from "react";
+import { Image } from "@mantine/core";
+
+type Props = {
+  mimeType?: string;
+  content: string;
+};
+
+export default memo(function MimeTypeRenderer({ mimeType, content }: Props) {
+  const mimetype = (mimeType ?? "text/plain").split("/", 1)[0]; // MIME type without subtype
+  switch (mimetype) {
+    case "image":
+      // TODO: Figure out base64 encoding
+      return <Image alt="Attachment image" src={content} maw={300} />;
+    default: // "text"
+      return <span>{content}</span>;
+  }
+});
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/attachments/Attachment.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/attachments/Attachment.tsx
deleted file mode 100644
index 0aefb87fb..000000000
--- a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/attachments/Attachment.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { memo } from "react";
-import type { Attachment as InputAttachment } from "aiconfig";
-import { Image } from "@mantine/core";
-
-type Props = {
-  attachment: InputAttachment;
-};
-
-export default memo(function Attachment({ attachment }: Props) {
-  const mimetype = (attachment.mime_type ?? "text/plain").split("/", 1)[0]; // MIME type without subtype
-  switch (mimetype) {
-    case "image":
-      // TODO: Figure out base64 encoding
-      return <Image alt="Attachment image" src={attachment.data as string} />;
-    default: // "text"
-      return <span>{attachment.data as string}</span>;
-  }
-});
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/attachments/AttachmentContainer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/attachments/AttachmentContainer.tsx
index 320d91a3a..dc8ef17e4 100644
--- a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/attachments/AttachmentContainer.tsx
+++ b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/attachments/AttachmentContainer.tsx
@@ -1,10 +1,10 @@
 import { memo } from "react";
 import type { Attachment as InputAttachment, JSONObject } from "aiconfig";
 import { PromptInputObjectAttachmentsSchema } from "../../../../utils/promptUtils";
-import Attachment from "./Attachment";
 import { ActionIcon, Container, Flex, Tooltip } from "@mantine/core";
 import { IconEdit, IconTrash } from "@tabler/icons-react";
 import AttachmentMetadata from "./AttachmentMetadata";
+import MimeTypeRenderer from "../../../MimeTypeRenderer";
 
 type Props = {
   schema: PromptInputObjectAttachmentsSchema;
@@ -39,7 +39,10 @@ export default memo(function AttachmentContainer({
           </ActionIcon>
         )}
       </Flex>
-      <Attachment attachment={attachment} />
+      <MimeTypeRenderer
+        mimeType={attachment.mime_type}
+        content={attachment.data as string}
+      />
       {schema.items.properties?.metadata && (
         <AttachmentMetadata
           schema={schema.items.properties.metadata}
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputsRenderer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputsRenderer.tsx
index 536827b18..8fd44b1aa 100644
--- a/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputsRenderer.tsx
+++ b/python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputsRenderer.tsx
@@ -9,6 +9,7 @@ import { memo } from "react";
 import { TextRenderer } from "../TextRenderer";
 import JSONOutput from "./JSONOutput";
 import PromptOutputWrapper from "./PromptOutputWrapper";
+import MimeTypeRenderer from "../../MimeTypeRenderer";
 
 type Props = {
   outputs: Output[];
@@ -43,6 +44,34 @@ const ExecuteResultOutput = memo(function ExecuteResultOutput({
     Object.prototype.hasOwnProperty.call(output.data, "kind")
   ) {
     switch ((output.data as OutputDataWithValue).kind) {
+      case "file_uri":
+        return (
+          <PromptOutputWrapper
+            copyContent={(output.data as OutputDataWithValue).value as string}
+            output={output}
+            withRawJSONToggle
+          >
+            <MimeTypeRenderer
+              mimeType={output.mime_type}
+              content={(output.data as OutputDataWithValue).value as string}
+            />
+          </PromptOutputWrapper>
+        );
+      case "base64":
+        return (
+          <PromptOutputWrapper
+            copyContent={(output.data as OutputDataWithValue).value as string}
+            output={output}
+            withRawJSONToggle
+          >
+            <MimeTypeRenderer
+              mimeType={output.mime_type}
+              content={`data:${output.mime_type};base64, ${
+                (output.data as OutputDataWithValue).value as string
+              }`}
+            />
+          </PromptOutputWrapper>
+        );
       // TODO: Tool calls rendering
       default:
         return (