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 ;
+ default: // "text"
+ return {content};
+ }
+});
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 ;
- default: // "text"
- return {attachment.data as string};
- }
-});
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({
)}
-
+
{schema.items.properties?.metadata && (
+
+
+ );
+ case "base64":
+ return (
+
+
+
+ );
// TODO: Tool calls rendering
default:
return (