@wallavi/widget 1.6.0 → 1.6.2

package/dist/index.d.mts

@@ -21,17 +21,31 @@ type PickerPart = {
     }>;
     selectedValue?: string;
 };
+type PlanStepState = {
+    index: number;
+    description: string;
+    status: "pending" | "executing" | "success" | "failed";
+    error?: string;
+};
+type PlanPart = {
+    type: "plan";
+    planId: string;
+    goal: string;
+    steps: PlanStepState[];
+};
 type MessagePart = {
     type: "text";
     text: string;
 } | {
     type: "reasoning";
     text: string;
-} | ToolPart | PickerPart;
+} | ToolPart | PickerPart | PlanPart;
 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 +115,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 +139,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

@@ -21,17 +21,31 @@ type PickerPart = {
     }>;
     selectedValue?: string;
 };
+type PlanStepState = {
+    index: number;
+    description: string;
+    status: "pending" | "executing" | "success" | "failed";
+    error?: string;
+};
+type PlanPart = {
+    type: "plan";
+    planId: string;
+    goal: string;
+    steps: PlanStepState[];
+};
 type MessagePart = {
     type: "text";
     text: string;
 } | {
     type: "reasoning";
     text: string;
-} | ToolPart | PickerPart;
+} | ToolPart | PickerPart | PlanPart;
 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 +115,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 +139,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

@@ -205,6 +205,30 @@ function useChat({
           });
           break;
         }
+        case "plan-created": {
+          msg.parts.push({
+            type: "plan",
+            planId: proto.planId,
+            goal: proto.goal,
+            steps: proto.steps.map((s) => ({ ...s, status: "pending" }))
+          });
+          break;
+        }
+        case "plan-step-update": {
+          const pIdx = msg.parts.findIndex(
+            (p) => p.type === "plan" && p.planId === proto.planId
+          );
+          if (pIdx !== -1) {
+            const prev2 = msg.parts[pIdx];
+            msg.parts[pIdx] = {
+              ...prev2,
+              steps: prev2.steps.map(
+                (s) => s.index === proto.stepIndex ? { ...s, status: proto.status, ...proto.error ? { error: proto.error } : {} } : s
+              )
+            };
+          }
+          break;
+        }
       }
       const copy = [...prev];
       copy[idx] = msg;
@@ -254,17 +278,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 +635,166 @@ 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 PlanStepIcon({ status }) {
+  if (status === "executing") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3 w-3 animate-spin text-primary" });
+  if (status === "success") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-3 w-3 text-emerald-500" });
+  if (status === "failed") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-3 w-3 text-destructive" });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full border-2 border-muted-foreground/30" });
+}
+function PlanCard({ part }) {
+  const successCount = part.steps.filter((s) => s.status === "success").length;
+  const hasExecuting = part.steps.some((s) => s.status === "executing");
+  const allDone = successCount === part.steps.length && part.steps.length > 0;
+  const anyFailed = part.steps.some((s) => s.status === "failed");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border bg-background overflow-hidden text-xs w-full shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-muted/50 border-b", children: [
+      hasExecuting ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 shrink-0 animate-spin text-primary/80" }) : allDone ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-3.5 w-3.5 shrink-0 text-emerald-500" }) : anyFailed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-3.5 w-3.5 shrink-0 text-destructive" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Zap, { className: "h-3.5 w-3.5 shrink-0 text-primary/70" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground/80 truncate flex-1 leading-snug", children: part.goal }),
+      part.steps.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: [
+        successCount,
+        "/",
+        part.steps.length
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border/40", children: part.steps.map((step) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-start gap-2.5 px-3 py-2 transition-colors duration-200",
+          step.status === "executing" && "bg-primary/5"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(PlanStepIcon, { status: step.status }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: cn(
+                "leading-relaxed",
+                step.status === "pending" && "text-muted-foreground",
+                step.status === "executing" && "text-foreground font-medium",
+                step.status === "success" && "text-foreground/60 line-through decoration-foreground/20",
+                step.status === "failed" && "text-destructive"
+              ),
+              children: [
+                step.index + 1,
+                ". ",
+                step.description,
+                step.error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-destructive/70 text-[10px] mt-0.5 no-underline", children: step.error })
+              ]
+            }
+          )
+        ]
+      },
+      step.index
+    )) })
+  ] });
+}
 function ThinkingDots() {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
@@ -798,14 +983,18 @@ function MessageBubble({
   const reasoningPart = message.parts.find((p) => p.type === "reasoning");
   const toolParts = message.parts.filter((p) => p.type === "tool");
   const pickerParts = message.parts.filter((p) => p.type === "picker");
+  const planParts = message.parts.filter((p) => p.type === "plan");
   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 })
+        ]
       }
     ) });
   }
@@ -815,6 +1004,7 @@ function MessageBubble({
     /* @__PURE__ */ jsxRuntime.jsx(Avatar2, { style: { width: 28, height: 28, marginTop: 2, border: "1px solid rgba(0,0,0,0.08)" }, children: profilePicture ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage2, { src: profilePicture, alt: agentName }) : /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback2, { style: { fontSize: 10, fontWeight: 600, backgroundColor: "var(--primary, #19191c)", color: "var(--primary-foreground, #fff)" }, children: agentName.slice(0, 2).toUpperCase() }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5 min-w-0 max-w-[82%]", children: [
       showThinking && reasoningPart && /* @__PURE__ */ jsxRuntime.jsx(ReasoningBlock, { text: reasoningPart.text }),
+      planParts.map((p) => /* @__PURE__ */ jsxRuntime.jsx(PlanCard, { part: p }, p.planId)),
       visibleToolParts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToolCallBadge, { part: t }, t.toolCallId)),
       pickerParts.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
         PickerSelector,
@@ -910,44 +1100,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 +1186,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';
@@ -179,6 +179,30 @@ function useChat({
           });
           break;
         }
+        case "plan-created": {
+          msg.parts.push({
+            type: "plan",
+            planId: proto.planId,
+            goal: proto.goal,
+            steps: proto.steps.map((s) => ({ ...s, status: "pending" }))
+          });
+          break;
+        }
+        case "plan-step-update": {
+          const pIdx = msg.parts.findIndex(
+            (p) => p.type === "plan" && p.planId === proto.planId
+          );
+          if (pIdx !== -1) {
+            const prev2 = msg.parts[pIdx];
+            msg.parts[pIdx] = {
+              ...prev2,
+              steps: prev2.steps.map(
+                (s) => s.index === proto.stepIndex ? { ...s, status: proto.status, ...proto.error ? { error: proto.error } : {} } : s
+              )
+            };
+          }
+          break;
+        }
       }
       const copy = [...prev];
       copy[idx] = msg;
@@ -228,17 +252,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 +609,166 @@ 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 PlanStepIcon({ status }) {
+  if (status === "executing") return /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin text-primary" });
+  if (status === "success") return /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3 w-3 text-emerald-500" });
+  if (status === "failed") return /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 text-destructive" });
+  return /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full border-2 border-muted-foreground/30" });
+}
+function PlanCard({ part }) {
+  const successCount = part.steps.filter((s) => s.status === "success").length;
+  const hasExecuting = part.steps.some((s) => s.status === "executing");
+  const allDone = successCount === part.steps.length && part.steps.length > 0;
+  const anyFailed = part.steps.some((s) => s.status === "failed");
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-background overflow-hidden text-xs w-full shadow-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-muted/50 border-b", children: [
+      hasExecuting ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 shrink-0 animate-spin text-primary/80" }) : allDone ? /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3.5 w-3.5 shrink-0 text-emerald-500" }) : anyFailed ? /* @__PURE__ */ jsx(AlertCircle, { className: "h-3.5 w-3.5 shrink-0 text-destructive" }) : /* @__PURE__ */ jsx(Zap, { className: "h-3.5 w-3.5 shrink-0 text-primary/70" }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground/80 truncate flex-1 leading-snug", children: part.goal }),
+      part.steps.length > 0 && /* @__PURE__ */ jsxs("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: [
+        successCount,
+        "/",
+        part.steps.length
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/40", children: part.steps.map((step) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-start gap-2.5 px-3 py-2 transition-colors duration-200",
+          step.status === "executing" && "bg-primary/5"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mt-0.5 shrink-0", children: /* @__PURE__ */ jsx(PlanStepIcon, { status: step.status }) }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "leading-relaxed",
+                step.status === "pending" && "text-muted-foreground",
+                step.status === "executing" && "text-foreground font-medium",
+                step.status === "success" && "text-foreground/60 line-through decoration-foreground/20",
+                step.status === "failed" && "text-destructive"
+              ),
+              children: [
+                step.index + 1,
+                ". ",
+                step.description,
+                step.error && /* @__PURE__ */ jsx("span", { className: "block text-destructive/70 text-[10px] mt-0.5 no-underline", children: step.error })
+              ]
+            }
+          )
+        ]
+      },
+      step.index
+    )) })
+  ] });
+}
 function ThinkingDots() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { children: `
@@ -772,14 +957,18 @@ function MessageBubble({
   const reasoningPart = message.parts.find((p) => p.type === "reasoning");
   const toolParts = message.parts.filter((p) => p.type === "tool");
   const pickerParts = message.parts.filter((p) => p.type === "picker");
+  const planParts = message.parts.filter((p) => p.type === "plan");
   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 })
+        ]
       }
     ) });
   }
@@ -789,6 +978,7 @@ function MessageBubble({
     /* @__PURE__ */ jsx(Avatar2, { style: { width: 28, height: 28, marginTop: 2, border: "1px solid rgba(0,0,0,0.08)" }, children: profilePicture ? /* @__PURE__ */ jsx(AvatarImage2, { src: profilePicture, alt: agentName }) : /* @__PURE__ */ jsx(AvatarFallback2, { style: { fontSize: 10, fontWeight: 600, backgroundColor: "var(--primary, #19191c)", color: "var(--primary-foreground, #fff)" }, children: agentName.slice(0, 2).toUpperCase() }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 min-w-0 max-w-[82%]", children: [
       showThinking && reasoningPart && /* @__PURE__ */ jsx(ReasoningBlock, { text: reasoningPart.text }),
+      planParts.map((p) => /* @__PURE__ */ jsx(PlanCard, { part: p }, p.planId)),
       visibleToolParts.map((t) => /* @__PURE__ */ jsx(ToolCallBadge, { part: t }, t.toolCallId)),
       pickerParts.map((p) => /* @__PURE__ */ jsx(
         PickerSelector,
@@ -884,44 +1074,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 +1160,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.2",
   "scripts": {
     "build": "tsup",
     "typecheck": "tsc --noEmit"