feat: Simple Image / Text AttachmentAdapters (#782)

.changeset/pink-avocados-relax.md

@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": patch
+---
+
+feat: SimpleImageAttachmentAdapter

.changeset/shaggy-cars-punch.md

@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": patch
+---
+
+feat: SimpleTextAttachmentAdapter

.changeset/tall-waves-cheer.md

@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": patch
+---
+
+feat: ComposedAttachmentAdapter

packages/react/src/runtimes/attachment/SimpleImageAttachmentAdapter.ts

@@ -0,0 +1,46 @@
+import {
+  ComposerAttachment,
+  MessageAttachment,
+} from "../../context/stores/Attachment";
+import { AttachmentAdapter } from "./AttachmentAdapter";
+
+export class SimpleImageAttachmentAdapter implements AttachmentAdapter {
+  public accept = "image/*";
+
+  public async add(state: { file: File }): Promise<ComposerAttachment> {
+    return {
+      id: state.file.name,
+      type: "image",
+      name: state.file.name,
+      file: state.file,
+    };
+  }
+
+  public async send(
+    attachment: ComposerAttachment,
+  ): Promise<MessageAttachment> {
+    return {
+      ...attachment,
+      content: [
+        {
+          type: "image",
+          image: await getFileDataURL(attachment.file),
+        },
+      ],
+    };
+  }
+
+  public async remove() {
+    // noop
+  }
+}
+
+const getFileDataURL = (file: File) =>
+  new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = (error) => reject(error);
+
+    reader.readAsDataURL(file);
+  });

packages/react/src/runtimes/attachment/SimpleTextAttachmentAdapter.ts

@@ -0,0 +1,47 @@
+import {
+  ComposerAttachment,
+  MessageAttachment,
+} from "../../context/stores/Attachment";
+import { AttachmentAdapter } from "./AttachmentAdapter";
+
+export class SimpleTextAttachmentAdapter implements AttachmentAdapter {
+  public accept =
+    "text/plain,text/html,text/markdown,text/csv,text/xml,text/json,text/css";
+
+  public async add(state: { file: File }): Promise<ComposerAttachment> {
+    return {
+      id: state.file.name,
+      type: "document",
+      name: state.file.name,
+      file: state.file,
+    };
+  }
+
+  public async send(
+    attachment: ComposerAttachment,
+  ): Promise<MessageAttachment> {
+    return {
+      ...attachment,
+      content: [
+        {
+          type: "text",
+          text: `<attachment name=${attachment.name}>\n${await getFileText(attachment.file)}\n</attachment>`,
+        },
+      ],
+    };
+  }
+
+  public async remove() {
+    // noop
+  }
+}
+
+const getFileText = (file: File) =>
+  new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = (error) => reject(error);
+
+    reader.readAsText(file);
+  });

packages/react/src/runtimes/attachment/index.ts

@@ -1 +1,4 @@
 export type { AttachmentAdapter } from "./AttachmentAdapter";
+export { SimpleImageAttachmentAdapter } from "./SimpleImageAttachmentAdapter";
+export { SimpleTextAttachmentAdapter } from "./SimpleTextAttachmentAdapter";
+export { ComposedAttachmentAdapter } from "./ComposedAttachmentAdapter";