file preview styling: full width -> wrap

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 {

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
+        <div className="flex flex-shrink-0 flex-col items-start justify-start">
-          className={cn(
+          <File
-            "flex-shrink-0 text-teal-700",
+            className={cn(
-            size === "sm" ? "h-5 w-5" : "h-7 w-7",
+              "text-teal-700",
-          )}
+              size === "sm" ? "h-5 w-5" : "h-7 w-7",
-        />
+            )}
+          />
+        </div>
         <span
-          className={cn(
+          className={cn("min-w-0 flex-1 text-sm break-all text-gray-800")}
-            "truncate text-sm text-gray-800",
+          style={{ wordBreak: "break-all", whiteSpace: "pre-wrap" }}
-            size === "sm" ? "max-w-[80px]" : "max-w-[160px]",
-          )}
         >
           {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"
           >

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({