@wallavi/widget 1.6.0 → 1.6.1

package/dist/index.d.mts

@@ -32,6 +32,8 @@ type Message = {
     id: string;
     role: "user" | "assistant";
     parts: MessagePart[];
+    /** Files the user attached to this message — stored for display in the chat thread. */
+    attachments?: AttachmentPayload[];
 };
 interface PageContext {
     /** Current URL or path (e.g. "/dashboard/agent/abc/agent-studio") */
@@ -101,9 +103,9 @@ interface ChatWidgetConfig {
      */
     voiceAutoSend?: boolean;
     /**
-     * Show the paperclip button to attach files (CSV, TXT, images).
-     * Text files are extracted and injected as context into the pipeline.
-     * Images are accepted and stored; persistent URLs require Phase 2 storage config.
+     * Show the paperclip button and enable drag-and-drop / clipboard-paste for file attachments.
+     * Supported types: CSV, TXT, PDF (text extracted as context), JPG, PNG, WebP, GIF (stored in Vercel Blob).
+     * Default: false.
      */
     enableAttachments?: boolean;
 }
@@ -125,6 +127,8 @@ interface AttachmentPayload {
     contentType: AttachmentContentType;
     textContent?: string;
     base64?: string;
+    /** Persistent public URL — set by upload.ts when Vercel Blob is configured. */
+    url?: string;
     rowCount?: number;
     truncated?: boolean;
     sizeBytes: number;

package/dist/index.d.ts

@@ -32,6 +32,8 @@ type Message = {
     id: string;
     role: "user" | "assistant";
     parts: MessagePart[];
+    /** Files the user attached to this message — stored for display in the chat thread. */
+    attachments?: AttachmentPayload[];
 };
 interface PageContext {
     /** Current URL or path (e.g. "/dashboard/agent/abc/agent-studio") */
@@ -101,9 +103,9 @@ interface ChatWidgetConfig {
      */
     voiceAutoSend?: boolean;
     /**
-     * Show the paperclip button to attach files (CSV, TXT, images).
-     * Text files are extracted and injected as context into the pipeline.
-     * Images are accepted and stored; persistent URLs require Phase 2 storage config.
+     * Show the paperclip button and enable drag-and-drop / clipboard-paste for file attachments.
+     * Supported types: CSV, TXT, PDF (text extracted as context), JPG, PNG, WebP, GIF (stored in Vercel Blob).
+     * Default: false.
      */
     enableAttachments?: boolean;
 }
@@ -125,6 +127,8 @@ interface AttachmentPayload {
     contentType: AttachmentContentType;
     textContent?: string;
     base64?: string;
+    /** Persistent public URL — set by upload.ts when Vercel Blob is configured. */
+    url?: string;
     rowCount?: number;
     truncated?: boolean;
     sizeBytes: number;

package/dist/index.js

@@ -254,17 +254,22 @@ function useChat({
       const userInput = (text ?? input).trim();
       if (!userInput || streaming) return;
       setInput("");
+      const attachments = pendingAttachmentsRef.current.length > 0 ? [...pendingAttachmentsRef.current] : void 0;
+      pendingAttachmentsRef.current = [];
       const userMsgId = newId();
       setMessages((prev) => [
         ...prev,
-        { id: userMsgId, role: "user", parts: [{ type: "text", text: userInput }] }
+        {
+          id: userMsgId,
+          role: "user",
+          parts: [{ type: "text", text: userInput }],
+          ...attachments ? { attachments } : {}
+        }
       ]);
       setStreaming(true);
       const assistantMsgId = newId();
       streamingMsgIdRef.current = assistantMsgId;
       setMessages((prev) => [...prev, { id: assistantMsgId, role: "assistant", parts: [] }]);
-      const attachments = pendingAttachmentsRef.current.length > 0 ? [...pendingAttachmentsRef.current] : void 0;
-      pendingAttachmentsRef.current = [];
       try {
         await fetchAndStream({ input: userInput, msgId: assistantMsgId, attachments });
       } catch {
@@ -606,10 +611,112 @@ function ChatHeader({
     }
   );
 }
+var cn2 = (...inputs) => tailwindMerge.twMerge(clsx.clsx(inputs));
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function ChipLeading({ a }) {
+  if (a.status === "uploading") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3 w-3 shrink-0 animate-spin" });
+  if (a.status === "error") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-3 w-3 shrink-0" });
+  const thumbSrc = a.payload?.url ?? a.payload?.base64;
+  if (a.mimeType.startsWith("image/") && thumbSrc) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: thumbSrc,
+        alt: a.name,
+        className: "h-6 w-6 rounded object-cover shrink-0 border border-border/40"
+      }
+    );
+  }
+  if (a.mimeType.startsWith("image/")) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-6 rounded bg-muted-foreground/10 border border-border/30 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[8px] font-semibold text-muted-foreground/50", children: "IMG" }) });
+  if (a.mimeType === "application/pdf") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "h-3 w-3 shrink-0 text-red-400" });
+  if (a.mimeType.includes("csv") || a.mimeType.includes("spreadsheet") || a.name.endsWith(".csv")) {
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileSpreadsheet, { className: "h-3 w-3 shrink-0 text-emerald-500" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "h-3 w-3 shrink-0" });
+}
+function AttachmentChips({ attachments, onRemove }) {
+  if (attachments.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5 px-1 pb-1.5", children: attachments.map((a) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn2(
+        "flex items-center gap-1.5 rounded-lg border px-2 py-1 text-[11px] max-w-[200px]",
+        a.status === "error" ? "border-red-200 bg-red-50 text-red-600 dark:border-red-800 dark:bg-red-950 dark:text-red-400" : "border-border bg-muted/60 text-muted-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ChipLeading, { a }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate leading-tight", children: a.status === "error" ? a.errorMessage ?? "Upload failed" : a.name }),
+        a.status === "ready" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground/50", children: formatBytes(a.sizeBytes) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onRemove(a.id),
+            className: "shrink-0 rounded-full p-0.5 hover:bg-foreground/10 transition-colors ml-0.5",
+            title: "Remove",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-2.5 w-2.5" })
+          }
+        )
+      ]
+    },
+    a.id
+  )) });
+}
 var Avatar2 = ({ style, ...p }) => /* @__PURE__ */ jsxRuntime.jsx(AvatarPrimitive__namespace.Root, { style: { position: "relative", display: "flex", flexShrink: 0, overflow: "hidden", borderRadius: "9999px", ...style }, ...p });
 var AvatarImage2 = ({ style, ...p }) => /* @__PURE__ */ jsxRuntime.jsx(AvatarPrimitive__namespace.Image, { style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", ...style }, ...p });
 var AvatarFallback2 = ({ style, ...p }) => /* @__PURE__ */ jsxRuntime.jsx(AvatarPrimitive__namespace.Fallback, { style: { display: "flex", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", borderRadius: "9999px", ...style }, ...p });
 var ReactMarkdown = ReactMarkdownLib__default.default;
+function SentAttachments({ attachments, contrastColor }) {
+  const images = attachments.filter((a) => a.contentType === "image");
+  const files = attachments.filter((a) => a.contentType !== "image");
+  const isDark = contrastColor === "#ffffff" || contrastColor === "#fff";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
+    images.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-1.5 flex-wrap", images.length === 1 && ""), children: images.map((img) => {
+      const src = img.url ?? img.base64;
+      return src ? /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src,
+          alt: img.name,
+          className: cn(
+            "rounded-xl object-cover border",
+            images.length === 1 ? "w-full max-h-48" : "h-20 w-20",
+            isDark ? "border-white/20" : "border-black/10"
+          )
+        },
+        img.id
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "h-20 w-20 rounded-xl flex items-center justify-center text-[10px] font-medium",
+            isDark ? "bg-white/10 text-white/60" : "bg-black/10 text-black/40"
+          ),
+          children: "IMG"
+        },
+        img.id
+      );
+    }) }),
+    files.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: files.map((f) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-1 rounded-lg px-2 py-1 text-[11px]",
+          isDark ? "bg-white/15 text-white/80" : "bg-black/10 text-black/60"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[120px]", children: f.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-60 shrink-0", children: formatBytes(f.sizeBytes) })
+        ]
+      },
+      f.id
+    )) })
+  ] });
+}
 function ThinkingDots() {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
@@ -800,12 +907,15 @@ function MessageBubble({
   const pickerParts = message.parts.filter((p) => p.type === "picker");
   const contrastColor = getContrastColor(userColor);
   if (isUser) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "max-w-[78%] rounded-2xl rounded-tr-sm px-4 py-2.5 text-sm leading-relaxed",
+        className: "max-w-[78%] rounded-2xl rounded-tr-sm px-4 py-2.5 text-sm leading-relaxed flex flex-col gap-2",
         style: { backgroundColor: userColor, color: contrastColor },
-        children: textPart?.text
+        children: [
+          message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(SentAttachments, { attachments: message.attachments, contrastColor }),
+          textPart?.text && /* @__PURE__ */ jsxRuntime.jsx("span", { children: textPart.text })
+        ]
       }
     ) });
   }
@@ -910,44 +1020,6 @@ function ChatMessages({
     /* @__PURE__ */ jsxRuntime.jsx("div", { ref: bottomRef })
   ] });
 }
-var cn2 = (...inputs) => tailwindMerge.twMerge(clsx.clsx(inputs));
-function formatBytes(bytes) {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-function FileIcon({ mimeType }) {
-  if (mimeType.startsWith("image/")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ImageIcon, { className: "h-3 w-3 shrink-0" });
-  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "h-3 w-3 shrink-0" });
-}
-function AttachmentChips({ attachments, onRemove }) {
-  if (attachments.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5 px-1 pb-1.5", children: attachments.map((a) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn2(
-        "flex items-center gap-1.5 rounded-lg border px-2 py-1 text-[11px] max-w-[180px]",
-        a.status === "error" ? "border-red-200 bg-red-50 text-red-600 dark:border-red-800 dark:bg-red-950 dark:text-red-400" : "border-border bg-muted/60 text-muted-foreground"
-      ),
-      children: [
-        a.status === "uploading" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3 w-3 shrink-0 animate-spin" }) : a.status === "error" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-3 w-3 shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { mimeType: a.mimeType }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate leading-tight", children: a.status === "error" ? a.errorMessage ?? "Upload failed" : a.name }),
-        a.status === "ready" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground/60", children: formatBytes(a.sizeBytes) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => onRemove(a.id),
-            className: "shrink-0 rounded-full p-0.5 hover:bg-foreground/10 transition-colors",
-            title: "Remove attachment",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-2.5 w-2.5" })
-          }
-        )
-      ]
-    },
-    a.id
-  )) });
-}
 var cn3 = (...inputs) => tailwindMerge.twMerge(clsx.clsx(inputs));
 function ChatInput({
   input,
@@ -1034,6 +1106,18 @@ function ChatInput({
               e.target.style.height = `${Math.min(e.target.scrollHeight, 128)}px`;
             },
             onKeyDown: handleKeyDown,
+            onPaste: (e) => {
+              if (!hasAttachments || !onAttach) return;
+              const files = Array.from(e.clipboardData?.files ?? []).filter(
+                (f) => f.type.startsWith("image/")
+              );
+              if (files.length > 0) {
+                e.preventDefault();
+                const dt = new DataTransfer();
+                files.forEach((f) => dt.items.add(f));
+                onAttach(dt.files);
+              }
+            },
             disabled: streaming || voiceState === "recording" || voiceState === "transcribing",
             autoFocus: true
           }

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
-import { UploadCloud, X, RotateCcw, Loader2, Square, Mic, Paperclip, ArrowUp, AlertCircle, Zap, ChevronDown, CheckCircle2, Search, Check, ImageIcon, FileText } from 'lucide-react';
+import { UploadCloud, X, RotateCcw, Loader2, Square, Mic, Paperclip, ArrowUp, Zap, ChevronDown, CheckCircle2, AlertCircle, Search, Check, FileText, FileSpreadsheet } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -228,17 +228,22 @@ function useChat({
       const userInput = (text ?? input).trim();
       if (!userInput || streaming) return;
       setInput("");
+      const attachments = pendingAttachmentsRef.current.length > 0 ? [...pendingAttachmentsRef.current] : void 0;
+      pendingAttachmentsRef.current = [];
       const userMsgId = newId();
       setMessages((prev) => [
         ...prev,
-        { id: userMsgId, role: "user", parts: [{ type: "text", text: userInput }] }
+        {
+          id: userMsgId,
+          role: "user",
+          parts: [{ type: "text", text: userInput }],
+          ...attachments ? { attachments } : {}
+        }
       ]);
       setStreaming(true);
       const assistantMsgId = newId();
       streamingMsgIdRef.current = assistantMsgId;
       setMessages((prev) => [...prev, { id: assistantMsgId, role: "assistant", parts: [] }]);
-      const attachments = pendingAttachmentsRef.current.length > 0 ? [...pendingAttachmentsRef.current] : void 0;
-      pendingAttachmentsRef.current = [];
       try {
         await fetchAndStream({ input: userInput, msgId: assistantMsgId, attachments });
       } catch {
@@ -580,10 +585,112 @@ function ChatHeader({
     }
   );
 }
+var cn2 = (...inputs) => twMerge(clsx(inputs));
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function ChipLeading({ a }) {
+  if (a.status === "uploading") return /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 shrink-0 animate-spin" });
+  if (a.status === "error") return /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 shrink-0" });
+  const thumbSrc = a.payload?.url ?? a.payload?.base64;
+  if (a.mimeType.startsWith("image/") && thumbSrc) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: thumbSrc,
+        alt: a.name,
+        className: "h-6 w-6 rounded object-cover shrink-0 border border-border/40"
+      }
+    );
+  }
+  if (a.mimeType.startsWith("image/")) return /* @__PURE__ */ jsx("div", { className: "h-6 w-6 rounded bg-muted-foreground/10 border border-border/30 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-[8px] font-semibold text-muted-foreground/50", children: "IMG" }) });
+  if (a.mimeType === "application/pdf") return /* @__PURE__ */ jsx(FileText, { className: "h-3 w-3 shrink-0 text-red-400" });
+  if (a.mimeType.includes("csv") || a.mimeType.includes("spreadsheet") || a.name.endsWith(".csv")) {
+    return /* @__PURE__ */ jsx(FileSpreadsheet, { className: "h-3 w-3 shrink-0 text-emerald-500" });
+  }
+  return /* @__PURE__ */ jsx(FileText, { className: "h-3 w-3 shrink-0" });
+}
+function AttachmentChips({ attachments, onRemove }) {
+  if (attachments.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 px-1 pb-1.5", children: attachments.map((a) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn2(
+        "flex items-center gap-1.5 rounded-lg border px-2 py-1 text-[11px] max-w-[200px]",
+        a.status === "error" ? "border-red-200 bg-red-50 text-red-600 dark:border-red-800 dark:bg-red-950 dark:text-red-400" : "border-border bg-muted/60 text-muted-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(ChipLeading, { a }),
+        /* @__PURE__ */ jsx("span", { className: "truncate leading-tight", children: a.status === "error" ? a.errorMessage ?? "Upload failed" : a.name }),
+        a.status === "ready" && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground/50", children: formatBytes(a.sizeBytes) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onRemove(a.id),
+            className: "shrink-0 rounded-full p-0.5 hover:bg-foreground/10 transition-colors ml-0.5",
+            title: "Remove",
+            children: /* @__PURE__ */ jsx(X, { className: "h-2.5 w-2.5" })
+          }
+        )
+      ]
+    },
+    a.id
+  )) });
+}
 var Avatar2 = ({ style, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, { style: { position: "relative", display: "flex", flexShrink: 0, overflow: "hidden", borderRadius: "9999px", ...style }, ...p });
 var AvatarImage2 = ({ style, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, { style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", ...style }, ...p });
 var AvatarFallback2 = ({ style, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { style: { display: "flex", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", borderRadius: "9999px", ...style }, ...p });
 var ReactMarkdown = ReactMarkdownLib;
+function SentAttachments({ attachments, contrastColor }) {
+  const images = attachments.filter((a) => a.contentType === "image");
+  const files = attachments.filter((a) => a.contentType !== "image");
+  const isDark = contrastColor === "#ffffff" || contrastColor === "#fff";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
+    images.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex gap-1.5 flex-wrap", images.length === 1 && ""), children: images.map((img) => {
+      const src = img.url ?? img.base64;
+      return src ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: img.name,
+          className: cn(
+            "rounded-xl object-cover border",
+            images.length === 1 ? "w-full max-h-48" : "h-20 w-20",
+            isDark ? "border-white/20" : "border-black/10"
+          )
+        },
+        img.id
+      ) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "h-20 w-20 rounded-xl flex items-center justify-center text-[10px] font-medium",
+            isDark ? "bg-white/10 text-white/60" : "bg-black/10 text-black/40"
+          ),
+          children: "IMG"
+        },
+        img.id
+      );
+    }) }),
+    files.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: files.map((f) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-1 rounded-lg px-2 py-1 text-[11px]",
+          isDark ? "bg-white/15 text-white/80" : "bg-black/10 text-black/60"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate max-w-[120px]", children: f.name }),
+          /* @__PURE__ */ jsx("span", { className: "opacity-60 shrink-0", children: formatBytes(f.sizeBytes) })
+        ]
+      },
+      f.id
+    )) })
+  ] });
+}
 function ThinkingDots() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { children: `
@@ -774,12 +881,15 @@ function MessageBubble({
   const pickerParts = message.parts.filter((p) => p.type === "picker");
   const contrastColor = getContrastColor(userColor);
   if (isUser) {
-    return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "max-w-[78%] rounded-2xl rounded-tr-sm px-4 py-2.5 text-sm leading-relaxed",
+        className: "max-w-[78%] rounded-2xl rounded-tr-sm px-4 py-2.5 text-sm leading-relaxed flex flex-col gap-2",
         style: { backgroundColor: userColor, color: contrastColor },
-        children: textPart?.text
+        children: [
+          message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsx(SentAttachments, { attachments: message.attachments, contrastColor }),
+          textPart?.text && /* @__PURE__ */ jsx("span", { children: textPart.text })
+        ]
       }
     ) });
   }
@@ -884,44 +994,6 @@ function ChatMessages({
     /* @__PURE__ */ jsx("div", { ref: bottomRef })
   ] });
 }
-var cn2 = (...inputs) => twMerge(clsx(inputs));
-function formatBytes(bytes) {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-function FileIcon({ mimeType }) {
-  if (mimeType.startsWith("image/")) return /* @__PURE__ */ jsx(ImageIcon, { className: "h-3 w-3 shrink-0" });
-  return /* @__PURE__ */ jsx(FileText, { className: "h-3 w-3 shrink-0" });
-}
-function AttachmentChips({ attachments, onRemove }) {
-  if (attachments.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 px-1 pb-1.5", children: attachments.map((a) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn2(
-        "flex items-center gap-1.5 rounded-lg border px-2 py-1 text-[11px] max-w-[180px]",
-        a.status === "error" ? "border-red-200 bg-red-50 text-red-600 dark:border-red-800 dark:bg-red-950 dark:text-red-400" : "border-border bg-muted/60 text-muted-foreground"
-      ),
-      children: [
-        a.status === "uploading" ? /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 shrink-0 animate-spin" }) : a.status === "error" ? /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 shrink-0" }) : /* @__PURE__ */ jsx(FileIcon, { mimeType: a.mimeType }),
-        /* @__PURE__ */ jsx("span", { className: "truncate leading-tight", children: a.status === "error" ? a.errorMessage ?? "Upload failed" : a.name }),
-        a.status === "ready" && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground/60", children: formatBytes(a.sizeBytes) }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => onRemove(a.id),
-            className: "shrink-0 rounded-full p-0.5 hover:bg-foreground/10 transition-colors",
-            title: "Remove attachment",
-            children: /* @__PURE__ */ jsx(X, { className: "h-2.5 w-2.5" })
-          }
-        )
-      ]
-    },
-    a.id
-  )) });
-}
 var cn3 = (...inputs) => twMerge(clsx(inputs));
 function ChatInput({
   input,
@@ -1008,6 +1080,18 @@ function ChatInput({
               e.target.style.height = `${Math.min(e.target.scrollHeight, 128)}px`;
             },
             onKeyDown: handleKeyDown,
+            onPaste: (e) => {
+              if (!hasAttachments || !onAttach) return;
+              const files = Array.from(e.clipboardData?.files ?? []).filter(
+                (f) => f.type.startsWith("image/")
+              );
+              if (files.length > 0) {
+                e.preventDefault();
+                const dt = new DataTransfer();
+                files.forEach((f) => dt.items.add(f));
+                onAttach(dt.files);
+              }
+            },
             disabled: streaming || voiceState === "recording" || voiceState === "transcribing",
             autoFocus: true
           }

package/package.json

@@ -33,7 +33,7 @@
   },
   "private": false,
   "types": "./dist/index.d.ts",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "scripts": {
     "build": "tsup",
     "typecheck": "tsc --noEmit"