From 87bdf5be01ddf5472180dc8ba95e0674313635ea Mon Sep 17 00:00:00 2001
From: starmorph <dylan@starmorph.com>
Date: Tue, 20 May 2025 13:54:39 -0700
Subject: [PATCH] file preview styling: full width -> wrap

---
 .../thread/ContentBlocksPreview.tsx           |  2 +-
 .../{ui => thread}/MultimodalPreview.tsx      | 33 +++++++------------
 src/components/thread/messages/human.tsx      |  2 +-
 3 files changed, 14 insertions(+), 23 deletions(-)
 rename src/components/{ui => thread}/MultimodalPreview.tsx (80%)

diff --git a/src/components/thread/ContentBlocksPreview.tsx b/src/components/thread/ContentBlocksPreview.tsx
index 0ee6664..c9703f1 100644
--- a/src/components/thread/ContentBlocksPreview.tsx
+++ b/src/components/thread/ContentBlocksPreview.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import type { Base64ContentBlock } from "@langchain/core/messages";
-import { MultimodalPreview } from "../ui/MultimodalPreview";
+import { MultimodalPreview } from "./MultimodalPreview";
 import { cn } from "@/lib/utils";
 
 interface ContentBlocksPreviewProps {
diff --git a/src/components/ui/MultimodalPreview.tsx b/src/components/thread/MultimodalPreview.tsx
similarity index 80%
rename from src/components/ui/MultimodalPreview.tsx
rename to src/components/thread/MultimodalPreview.tsx
index a64ee41..0f55573 100644
--- a/src/components/ui/MultimodalPreview.tsx
+++ b/src/components/thread/MultimodalPreview.tsx
@@ -18,15 +18,6 @@ export const MultimodalPreview: React.FC<MultimodalPreviewProps> = ({
   className,
   size = "md",
 }) => {
-  // Sizing
-  const sizeMap = {
-    sm: "h-10 w-10 text-base",
-    md: "h-16 w-16 text-lg",
-    lg: "h-24 w-24 text-xl",
-  };
-  const iconSize: string =
-    typeof sizeMap[size] === "string" ? sizeMap[size] : sizeMap["md"];
-
   // Image block
   if (
     block.type === "image" &&
@@ -72,28 +63,28 @@ export const MultimodalPreview: React.FC<MultimodalPreviewProps> = ({
     return (
       <div
         className={cn(
-          "relative flex items-center gap-2 rounded-md border bg-gray-100 px-3 py-2",
+          "relative flex items-start gap-2 rounded-md border bg-gray-100 px-3 py-2",
           className,
         )}
       >
-        <File
-          className={cn(
-            "flex-shrink-0 text-teal-700",
-            size === "sm" ? "h-5 w-5" : "h-7 w-7",
-          )}
-        />
+        <div className="flex flex-shrink-0 flex-col items-start justify-start">
+          <File
+            className={cn(
+              "text-teal-700",
+              size === "sm" ? "h-5 w-5" : "h-7 w-7",
+            )}
+          />
+        </div>
         <span
-          className={cn(
-            "truncate text-sm text-gray-800",
-            size === "sm" ? "max-w-[80px]" : "max-w-[160px]",
-          )}
+          className={cn("min-w-0 flex-1 text-sm break-all text-gray-800")}
+          style={{ wordBreak: "break-all", whiteSpace: "pre-wrap" }}
         >
           {String(filename)}
         </span>
         {removable && (
           <button
             type="button"
-            className="ml-2 rounded-full bg-gray-200 p-1 text-teal-700 hover:bg-gray-300"
+            className="ml-2 self-start rounded-full bg-gray-200 p-1 text-teal-700 hover:bg-gray-300"
             onClick={onRemove}
             aria-label="Remove PDF"
           >
diff --git a/src/components/thread/messages/human.tsx b/src/components/thread/messages/human.tsx
index e95cacc..8aa019f 100644
--- a/src/components/thread/messages/human.tsx
+++ b/src/components/thread/messages/human.tsx
@@ -5,7 +5,7 @@ import { getContentString } from "../utils";
 import { cn } from "@/lib/utils";
 import { Textarea } from "@/components/ui/textarea";
 import { BranchSwitcher, CommandBar } from "./shared";
-import { MultimodalPreview } from "@/components/ui/MultimodalPreview";
+import { MultimodalPreview } from "@/components/thread/MultimodalPreview";
 import type { Base64ContentBlock } from "@langchain/core/messages";
 
 function EditableContent({