From 8534f4adbe50d11636712d9813866a6c10fecbce Mon Sep 17 00:00:00 2001
From: starmorph <dylan@starmorph.com>
Date: Mon, 19 May 2025 16:35:11 -0700
Subject: [PATCH] CR: ContentBlock abstraction

---
 .../thread/ContentBlocksPreview.tsx           | 32 +++++++++++++
 src/components/thread/index.tsx               | 46 ++----------------
 src/hooks/use-file-upload.tsx                 | 34 +++----------
 src/lib/multimodal-utils.ts                   | 48 +++++++++++--------
 4 files changed, 72 insertions(+), 88 deletions(-)
 create mode 100644 src/components/thread/ContentBlocksPreview.tsx

diff --git a/src/components/thread/ContentBlocksPreview.tsx b/src/components/thread/ContentBlocksPreview.tsx
new file mode 100644
index 0000000..1c1caa0
--- /dev/null
+++ b/src/components/thread/ContentBlocksPreview.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import type { Base64ContentBlock } from "@langchain/core/messages";
+import { MultimodalPreview } from "../ui/MultimodalPreview";
+
+interface ContentBlocksPreviewProps {
+  blocks: Base64ContentBlock[];
+  onRemove: (idx: number) => void;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+export const ContentBlocksPreview: React.FC<ContentBlocksPreviewProps> = ({
+  blocks,
+  onRemove,
+  size = "md",
+  className = "",
+}) => {
+  if (!blocks.length) return null;
+  return (
+    <div className={`flex flex-wrap gap-2 p-3.5 pb-0 ${className}`}>
+      {blocks.map((block, idx) => (
+        <MultimodalPreview
+          key={idx}
+          block={block}
+          removable
+          onRemove={() => onRemove(idx)}
+          size={size}
+        />
+      ))}
+    </div>
+  );
+};
diff --git a/src/components/thread/index.tsx b/src/components/thread/index.tsx
index e0fa3e0..ba69f01 100644
--- a/src/components/thread/index.tsx
+++ b/src/components/thread/index.tsx
@@ -37,10 +37,8 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "../ui/tooltip";
-import { fileToImageBlock, fileToPDFBlock } from "@/lib/multimodal-utils";
-import type { Base64ContentBlock } from "@langchain/core/messages";
-import { MultimodalPreview } from "../ui/MultimodalPreview";
 import { useFileUpload } from "@/hooks/use-file-upload";
+import { ContentBlocksPreview } from "./ContentBlocksPreview";
 
 function StickyToBottomContent(props: {
   content: ReactNode;
@@ -393,44 +391,10 @@ export function Thread() {
                     onSubmit={handleSubmit}
                     className="mx-auto grid max-w-3xl grid-rows-[1fr_auto] gap-2"
                   >
-                    {contentBlocks.filter((b) => b.type === "image").length >
-                      0 && (
-                      <div className="flex flex-wrap gap-2 p-3.5 pb-0">
-                        {contentBlocks
-                          .filter((b) => b.type === "image")
-                          .map((imageBlock, idx) => (
-                            <MultimodalPreview
-                              key={idx}
-                              block={imageBlock}
-                              removable
-                              onRemove={() => removeBlock(idx)}
-                              size="md"
-                            />
-                          ))}
-                      </div>
-                    )}
-                    {contentBlocks.filter(
-                      (b) =>
-                        b.type === "file" && b.mime_type === "application/pdf",
-                    ).length > 0 && (
-                      <div className="flex flex-wrap gap-2 p-3.5 pb-0">
-                        {contentBlocks
-                          .filter(
-                            (b) =>
-                              b.type === "file" &&
-                              b.mime_type === "application/pdf",
-                          )
-                          .map((pdfBlock, idx) => (
-                            <MultimodalPreview
-                              key={idx}
-                              block={pdfBlock}
-                              removable
-                              onRemove={() => removeBlock(idx)}
-                              size="md"
-                            />
-                          ))}
-                      </div>
-                    )}
+                    <ContentBlocksPreview
+                      blocks={contentBlocks}
+                      onRemove={removeBlock}
+                    />
                     <textarea
                       value={input}
                       onChange={(e) => setInput(e.target.value)}
diff --git a/src/hooks/use-file-upload.tsx b/src/hooks/use-file-upload.tsx
index 36d2b29..392cff3 100644
--- a/src/hooks/use-file-upload.tsx
+++ b/src/hooks/use-file-upload.tsx
@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect, ChangeEvent } from "react";
 import { toast } from "sonner";
 import type { Base64ContentBlock } from "@langchain/core/messages";
-import { fileToImageBlock, fileToPDFBlock } from "@/lib/multimodal-utils";
+import { fileToContentBlock } from "@/lib/multimodal-utils";
 
 export const SUPPORTED_IMAGE_TYPES = [
   "image/jpeg",
@@ -73,20 +73,10 @@ export function useFileUpload({
       );
     }
 
-    const imageFiles = uniqueFiles.filter((file) =>
-      SUPPORTED_IMAGE_TYPES.includes(file.type),
-    );
-    const pdfFiles = uniqueFiles.filter(
-      (file) => file.type === "application/pdf",
-    );
-
-    const imageBlocks = imageFiles.length
-      ? await Promise.all(imageFiles.map(fileToImageBlock))
+    const newBlocks = uniqueFiles.length
+      ? await Promise.all(uniqueFiles.map(fileToContentBlock))
       : [];
-    const pdfBlocks = pdfFiles.length
-      ? await Promise.all(pdfFiles.map(fileToPDFBlock))
-      : [];
-    setContentBlocks((prev) => [...prev, ...imageBlocks, ...pdfBlocks]);
+    setContentBlocks((prev) => [...prev, ...newBlocks]);
     e.target.value = "";
   };
 
@@ -130,20 +120,10 @@ export function useFileUpload({
         );
       }
 
-      const imageFiles = uniqueFiles.filter((file) =>
-        SUPPORTED_IMAGE_TYPES.includes(file.type),
-      );
-      const pdfFiles = uniqueFiles.filter(
-        (file) => file.type === "application/pdf",
-      );
-
-      const imageBlocks: Base64ContentBlock[] = imageFiles.length
-        ? await Promise.all(imageFiles.map(fileToImageBlock))
+      const newBlocks = uniqueFiles.length
+        ? await Promise.all(uniqueFiles.map(fileToContentBlock))
         : [];
-      const pdfBlocks: Base64ContentBlock[] = pdfFiles.length
-        ? await Promise.all(pdfFiles.map(fileToPDFBlock))
-        : [];
-      setContentBlocks((prev) => [...prev, ...imageBlocks, ...pdfBlocks]);
+      setContentBlocks((prev) => [...prev, ...newBlocks]);
     };
 
     const handleDragEnter = (e: DragEvent) => {
diff --git a/src/lib/multimodal-utils.ts b/src/lib/multimodal-utils.ts
index 42093c1..1ebfe44 100644
--- a/src/lib/multimodal-utils.ts
+++ b/src/lib/multimodal-utils.ts
@@ -1,30 +1,38 @@
 import type { Base64ContentBlock } from "@langchain/core/messages";
 import { toast } from "sonner";
 
-// Returns a Promise of a typed multimodal block for images
-export async function fileToImageBlock(
+// Returns a Promise of a typed multimodal block for images or PDFs
+export async function fileToContentBlock(
   file: File,
 ): Promise<Base64ContentBlock> {
-  const supportedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"];
-  if (!supportedTypes.includes(file.type)) {
-    toast.error(
-      `Unsupported image type: ${file.type}. Supported types are: ${supportedTypes.join(", ")}`,
-    );
-    return Promise.reject(new Error(`Unsupported image type: ${file.type}`));
-  }
-  const data = await fileToBase64(file);
-  return {
-    type: "image",
-    source_type: "base64",
-    mime_type: file.type,
-    data,
-    metadata: { name: file.name },
-  };
-}
+  const supportedImageTypes = [
+    "image/jpeg",
+    "image/png",
+    "image/gif",
+    "image/webp",
+  ];
+  const supportedFileTypes = [...supportedImageTypes, "application/pdf"];
+
+  if (!supportedFileTypes.includes(file.type)) {
+    toast.error(
+      `Unsupported file type: ${file.type}. Supported types are: ${supportedFileTypes.join(", ")}`,
+    );
+    return Promise.reject(new Error(`Unsupported file type: ${file.type}`));
+  }
 
-// Returns a Promise of a typed multimodal block for PDFs
-export async function fileToPDFBlock(file: File): Promise<Base64ContentBlock> {
   const data = await fileToBase64(file);
+
+  if (supportedImageTypes.includes(file.type)) {
+    return {
+      type: "image",
+      source_type: "base64",
+      mime_type: file.type,
+      data,
+      metadata: { name: file.name },
+    };
+  }
+
+  // PDF
   return {
     type: "file",
     source_type: "base64",