@wallavi/widget 1.5.3 → 1.6.0

package/dist/index.js

@@ -212,7 +212,7 @@ function useChat({
     });
   }, []);
   const fetchAndStream = react.useCallback(async (opts) => {
-    const { input: userInput, msgId, extraMetadata } = opts;
+    const { input: userInput, msgId, extraMetadata, attachments } = opts;
     const isPrivate = Boolean(workspaceId);
     const token = isPrivate && typeof window !== "undefined" ? await window.Clerk?.session?.getToken() : null;
     const url = isPrivate ? `${API_URL}/api/threads/${threadId}/stream` : `${API_URL}/api/chat/stream`;
@@ -227,6 +227,7 @@ function useChat({
         agentId,
         ...isPrivate ? { workspaceId, ...playgroundOverrides ? { playgroundOverrides } : {} } : { threadId },
         source,
+        ...attachments?.length ? { attachments } : {},
         ...userContext?.userName ? { userName: userContext.userName } : {},
         ...userContext?.userEmail ? { userEmail: userContext.userEmail } : {},
         userMetadata: {
@@ -247,6 +248,7 @@ function useChat({
     if (!res.body) throw new Error("No stream body");
     await consumeStream(res.body, (proto) => applyStreamEvent(proto, msgId));
   }, [agentId, workspaceId, source, threadId, userContext, playgroundOverrides, applyStreamEvent]);
+  const pendingAttachmentsRef = react.useRef([]);
   const send = react.useCallback(
     async (text) => {
       const userInput = (text ?? input).trim();
@@ -261,8 +263,10 @@ function useChat({
       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 });
+        await fetchAndStream({ input: userInput, msgId: assistantMsgId, attachments });
       } catch {
         setMessages((prev) => {
           const idx = prev.findIndex((m) => m.id === assistantMsgId);
@@ -312,8 +316,11 @@ function useChat({
       setStreaming(false);
       streamingMsgIdRef.current = null;
     },
-    [streaming, fetchAndStream]
+    [input, streaming, fetchAndStream]
   );
+  const queueAttachments = react.useCallback((payloads) => {
+    pendingAttachmentsRef.current = payloads;
+  }, []);
   const regenerate = react.useCallback(async () => {
     if (streaming) return;
     const lastUser = [...messages].reverse().find((m) => m.role === "user");
@@ -327,7 +334,176 @@ function useChat({
     });
     await send(lastText);
   }, [streaming, messages, send]);
-  return { messages, input, setInput, streaming, threadId, send, regenerate, reset, selectPickerOption };
+  return { messages, input, setInput, streaming, threadId, send, queueAttachments, regenerate, reset, selectPickerOption };
+}
+function getPreferredMimeType() {
+  if (typeof MediaRecorder === "undefined") return "";
+  const candidates = [
+    "audio/webm;codecs=opus",
+    "audio/webm",
+    "audio/ogg;codecs=opus",
+    "audio/ogg",
+    "audio/mp4"
+  ];
+  return candidates.find((t) => MediaRecorder.isTypeSupported(t)) ?? "";
+}
+function mimeTypeToExtension(mimeType) {
+  if (mimeType.includes("ogg")) return "ogg";
+  if (mimeType.includes("mp4")) return "mp4";
+  return "webm";
+}
+var DEFAULT_API_URL = process.env.NEXT_PUBLIC_API_URL ?? "https://wallavi-production.up.railway.app";
+function useVoice({ agentId, apiUrl, onTranscript, onError }) {
+  const [voiceState, setVoiceState] = react.useState("idle");
+  const recorderRef = react.useRef(null);
+  const chunksRef = react.useRef([]);
+  const streamRef = react.useRef(null);
+  const errorTimerRef = react.useRef(null);
+  const isSupported = typeof window !== "undefined" && typeof MediaRecorder !== "undefined" && !!navigator?.mediaDevices?.getUserMedia;
+  const base = apiUrl ?? DEFAULT_API_URL;
+  const transcribeBlob = react.useCallback(
+    async (blob, mimeType) => {
+      setVoiceState("transcribing");
+      try {
+        const ext = mimeTypeToExtension(mimeType);
+        const form = new FormData();
+        form.append("audio", blob, `recording.${ext}`);
+        form.append("agentId", agentId);
+        const res = await fetch(`${base}/api/chat/transcribe`, { method: "POST", body: form });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const data = await res.json();
+        if (!data.text?.trim()) throw new Error(data.error ?? "Empty transcript");
+        onTranscript(data.text.trim());
+        setVoiceState("idle");
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "Transcription failed";
+        onError?.(msg);
+        setVoiceState("error");
+        errorTimerRef.current = setTimeout(() => setVoiceState("idle"), 2500);
+      }
+    },
+    [agentId, base, onTranscript, onError]
+  );
+  const start = react.useCallback(async () => {
+    if (!isSupported || voiceState !== "idle") return;
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+      const mimeType = getPreferredMimeType();
+      const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : void 0);
+      chunksRef.current = [];
+      recorder.ondataavailable = (e) => {
+        if (e.data.size > 0) chunksRef.current.push(e.data);
+      };
+      recorder.onstop = async () => {
+        stream.getTracks().forEach((t) => t.stop());
+        const blob = new Blob(chunksRef.current, { type: mimeType || "audio/webm" });
+        if (blob.size === 0) {
+          onError?.("Recording was empty \u2014 please try again.");
+          setVoiceState("idle");
+          return;
+        }
+        await transcribeBlob(blob, mimeType || "audio/webm");
+      };
+      recorder.start(250);
+      recorderRef.current = recorder;
+      setVoiceState("recording");
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Microphone access denied";
+      onError?.(msg);
+      setVoiceState("idle");
+    }
+  }, [isSupported, voiceState, transcribeBlob, onError]);
+  const stop = react.useCallback(() => {
+    if (recorderRef.current?.state === "recording") {
+      recorderRef.current.stop();
+      recorderRef.current = null;
+    }
+  }, []);
+  react.useEffect(() => {
+    return () => {
+      if (errorTimerRef.current) clearTimeout(errorTimerRef.current);
+      if (recorderRef.current?.state === "recording") recorderRef.current.stop();
+      streamRef.current?.getTracks().forEach((t) => t.stop());
+    };
+  }, []);
+  return { voiceState, isSupported, start, stop };
+}
+var DEFAULT_API_URL2 = process.env.NEXT_PUBLIC_API_URL ?? "https://wallavi-production.up.railway.app";
+function makeId() {
+  return `att_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
+}
+function useAttachments({
+  agentId,
+  apiUrl,
+  maxFiles = 5
+}) {
+  const [attachments, setAttachments] = react.useState([]);
+  const base = apiUrl ?? DEFAULT_API_URL2;
+  const uploadOne = react.useCallback(
+    async (file, id) => {
+      const form = new FormData();
+      form.append("file", file);
+      form.append("agentId", agentId);
+      try {
+        const res = await fetch(`${base}/api/chat/upload`, { method: "POST", body: form });
+        if (!res.ok) {
+          const data = await res.json().catch(() => ({}));
+          setAttachments(
+            (prev) => prev.map(
+              (a) => a.id === id ? {
+                ...a,
+                status: "error",
+                errorMessage: data.error ?? `Upload failed (${res.status})`
+              } : a
+            )
+          );
+          return;
+        }
+        const payload = await res.json();
+        setAttachments(
+          (prev) => prev.map((a) => a.id === id ? { ...a, status: "ready", payload } : a)
+        );
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "Upload failed";
+        setAttachments(
+          (prev) => prev.map(
+            (a) => a.id === id ? { ...a, status: "error", errorMessage: msg } : a
+          )
+        );
+      }
+    },
+    [agentId, base]
+  );
+  const attach = react.useCallback(
+    (files) => {
+      const list = Array.from(files);
+      setAttachments((prev) => {
+        const remaining = maxFiles - prev.filter((a) => a.status !== "error").length;
+        if (remaining <= 0) return prev;
+        const toAdd = list.slice(0, remaining).map((f) => {
+          const id = makeId();
+          void uploadOne(f, id);
+          return {
+            id,
+            name: f.name,
+            mimeType: f.type,
+            sizeBytes: f.size,
+            status: "uploading"
+          };
+        });
+        return [...prev, ...toAdd];
+      });
+    },
+    [maxFiles, uploadOne]
+  );
+  const remove = react.useCallback((id) => {
+    setAttachments((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+  const clear = react.useCallback(() => setAttachments([]), []);
+  const isUploading = attachments.some((a) => a.status === "uploading");
+  const readyPayloads = attachments.filter((a) => a.status === "ready" && a.payload).map((a) => a.payload);
+  return { attachments, attach, remove, clear, isUploading, readyPayloads };
 }
 function DefaultIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", style: { width: 26, height: 26 }, children: [
@@ -501,83 +677,112 @@ function ReasoningBlock({ text }) {
     open && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground/80 whitespace-pre-wrap border-l-2 border-muted pl-2 leading-relaxed", children: text })
   ] });
 }
-function PickerOption({
-  opt,
-  isSelected,
-  isConsumed,
-  actionDisabled,
-  pickerId,
-  paramName,
-  onSelect
-}) {
-  const [hovered, setHovered] = react.useState(false);
-  const inactive = actionDisabled || isConsumed;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      disabled: inactive,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      onClick: () => {
-        if (!inactive) onSelect(pickerId, paramName, opt.value, opt.label);
-      },
-      style: {
-        fontSize: 13,
-        lineHeight: "1.4",
-        borderRadius: 100,
-        padding: "6px 14px",
-        border: "none",
-        backgroundColor: isSelected ? "var(--primary, #19191c)" : hovered && !inactive ? "rgba(0,0,0,0.14)" : "rgba(0,0,0,0.08)",
-        color: isSelected ? "var(--primary-foreground, #fff)" : "var(--foreground, #09090b)",
-        cursor: inactive ? "default" : "pointer",
-        opacity: isConsumed ? 0.3 : 1,
-        transition: "background-color 0.12s ease, opacity 0.12s ease",
-        fontWeight: isSelected ? 600 : 500,
-        boxShadow: "none"
-      },
-      children: opt.label
-    }
-  );
-}
 function PickerSelector({
   part,
   disabled,
   onSelect
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: 10,
-        padding: "12px 14px",
-        borderRadius: "0 14px 14px 14px",
-        backgroundColor: "var(--muted, #f4f4f5)",
-        border: "1px solid rgba(0,0,0,0.06)"
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: 11.5, color: "var(--muted-foreground, #71717a)", fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase" }, children: part.label }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 7 }, children: part.options.map((opt) => {
-          const isSelected = part.selectedValue === opt.value;
-          const isConsumed = !!part.selectedValue && !isSelected;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            PickerOption,
-            {
-              opt,
-              isSelected,
-              isConsumed,
-              actionDisabled: disabled,
-              pickerId: part.pickerId,
-              paramName: part.paramName,
-              onSelect
-            },
-            opt.value
-          );
-        }) })
-      ]
-    }
-  );
+  const count = part.options.length;
+  const mode = count <= 6 ? "pills" : count <= 20 ? "grid" : "list";
+  const [query, setQuery] = react.useState("");
+  const filtered = react.useMemo(() => {
+    if (!query.trim()) return part.options;
+    const q = query.toLowerCase();
+    return part.options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [part.options, query]);
+  const isConsumed = !!part.selectedValue;
+  const handleClick = (opt) => {
+    if (!disabled && !isConsumed) onSelect(part.pickerId, part.paramName, opt.value, opt.label);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
+    "flex flex-col gap-2.5 rounded-xl rounded-tl-none border bg-muted/60 p-3",
+    "border-border/50"
+  ), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10.5px] font-semibold uppercase tracking-widest text-muted-foreground/70 leading-none", children: part.label }),
+    mode === "list" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground/50 pointer-events-none" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          placeholder: "Search\u2026",
+          disabled: disabled || isConsumed,
+          className: "w-full rounded-lg border bg-background pl-7 pr-3 py-1.5 text-xs outline-none focus:ring-1 focus:ring-ring/40 placeholder:text-muted-foreground/40 disabled:opacity-50"
+        }
+      )
+    ] }),
+    mode === "pills" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: part.options.map((opt) => {
+      const sel = part.selectedValue === opt.value;
+      const faded = isConsumed && !sel;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          disabled: disabled || isConsumed,
+          onClick: () => handleClick(opt),
+          className: cn(
+            "inline-flex items-center gap-1 rounded-full px-3.5 py-1.5 text-[12.5px] font-medium transition-all duration-150 select-none",
+            sel ? "bg-foreground text-background shadow-sm" : faded ? "bg-background/50 text-muted-foreground opacity-35 cursor-default" : "bg-background border border-border/70 text-foreground hover:border-foreground/30 hover:bg-background cursor-pointer",
+            disabled && !isConsumed && "opacity-60 pointer-events-none"
+          ),
+          children: [
+            sel && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3 shrink-0" }),
+            opt.label
+          ]
+        },
+        opt.value
+      );
+    }) }),
+    mode === "grid" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-1.5 max-h-[168px] overflow-y-auto pr-0.5 scrollbar-thin", children: part.options.map((opt) => {
+      const sel = part.selectedValue === opt.value;
+      const faded = isConsumed && !sel;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          disabled: disabled || isConsumed,
+          onClick: () => handleClick(opt),
+          className: cn(
+            "flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[12px] font-medium text-left transition-all duration-150 select-none truncate",
+            sel ? "bg-foreground text-background" : faded ? "bg-background/40 text-muted-foreground opacity-35 cursor-default" : "bg-background border border-border/60 text-foreground hover:border-foreground/25 cursor-pointer",
+            disabled && !isConsumed && "opacity-60 pointer-events-none"
+          ),
+          children: [
+            sel ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3 shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-3 w-3 shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: opt.label })
+          ]
+        },
+        opt.value
+      );
+    }) }),
+    mode === "list" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 max-h-[180px] overflow-y-auto pr-0.5", children: [
+      filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-3 text-center text-xs text-muted-foreground/50", children: "No results" }),
+      filtered.map((opt) => {
+        const sel = part.selectedValue === opt.value;
+        const faded = isConsumed && !sel;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            disabled: disabled || isConsumed,
+            onClick: () => handleClick(opt),
+            className: cn(
+              "flex items-center gap-2 rounded-lg px-2.5 py-2 text-[12.5px] text-left transition-all duration-100 select-none",
+              sel ? "bg-foreground text-background font-medium" : faded ? "opacity-30 cursor-default" : "hover:bg-background text-foreground cursor-pointer",
+              disabled && !isConsumed && "opacity-60 pointer-events-none"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                "flex h-4 w-4 shrink-0 items-center justify-center rounded-full border text-[10px]",
+                sel ? "border-background bg-background/20" : "border-border/50"
+              ), children: sel && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-2.5 w-2.5" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: opt.label })
+            ]
+          },
+          opt.value
+        );
+      })
+    ] })
+  ] });
 }
 function MessageBubble({
   message,
@@ -706,6 +911,44 @@ function ChatMessages({
   ] });
 }
 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,
   setInput,
@@ -714,8 +957,18 @@ function ChatInput({
   placeholder,
   accentColor,
   canRegenerate = false,
-  onRegenerate
+  onRegenerate,
+  voiceState,
+  onVoiceStart,
+  onVoiceStop,
+  attachments,
+  onAttach,
+  onRemoveAttachment,
+  isUploading = false
 }) {
+  const hasVoice = onVoiceStart !== void 0;
+  const hasAttachments = onAttach !== void 0;
+  const fileInputRef = react.useRef(null);
   const textareaRef = react.useRef(null);
   react.useEffect(() => {
     if (!input && textareaRef.current) {
@@ -747,39 +1000,90 @@ function ChatInput({
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-2 rounded-2xl border bg-background px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-ring/40 transition-shadow", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "textarea",
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col rounded-2xl border bg-background shadow-sm focus-within:ring-1 focus-within:ring-ring/40 transition-shadow", children: [
+      hasAttachments && attachments && attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(AttachmentChips, { attachments, onRemove: (id) => onRemoveAttachment?.(id) }) }),
+      hasAttachments && /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
         {
-          id: "wallavi-chat-input",
-          ref: textareaRef,
-          rows: 1,
-          className: "flex-1 resize-none bg-transparent text-sm outline-none placeholder:text-muted-foreground/50 leading-relaxed max-h-32 overflow-y-auto py-0.5",
-          placeholder: placeholder ?? "Send a message\u2026",
-          value: input,
+          ref: fileInputRef,
+          type: "file",
+          multiple: true,
+          accept: ".csv,.txt,.tsv,.pdf,text/plain,text/csv,application/pdf,image/jpeg,image/png,image/webp,image/gif",
+          className: "hidden",
           onChange: (e) => {
-            setInput(e.target.value);
-            e.target.style.height = "auto";
-            e.target.style.height = `${Math.min(e.target.scrollHeight, 128)}px`;
-          },
-          onKeyDown: handleKeyDown,
-          disabled: streaming,
-          autoFocus: true
+            if (e.target.files?.length) {
+              onAttach(e.target.files);
+              e.target.value = "";
+            }
+          }
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: onSend,
-          disabled: streaming || !hasText,
-          className: cn2(
-            "h-7 w-7 shrink-0 rounded-xl flex items-center justify-center transition-all duration-200",
-            hasText || streaming ? "opacity-100 shadow-sm" : "opacity-30"
-          ),
-          style: hasText || streaming ? { backgroundColor: accentColor, color: getContrastColor(accentColor) } : { backgroundColor: "transparent", color: "currentColor" },
-          children: streaming ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-3.5 w-3.5" })
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-2 px-3 py-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            id: "wallavi-chat-input",
+            ref: textareaRef,
+            rows: 1,
+            className: "flex-1 resize-none bg-transparent text-sm outline-none placeholder:text-muted-foreground/50 leading-relaxed max-h-32 overflow-y-auto py-0.5",
+            placeholder: placeholder ?? "Send a message\u2026",
+            value: input,
+            onChange: (e) => {
+              setInput(e.target.value);
+              e.target.style.height = "auto";
+              e.target.style.height = `${Math.min(e.target.scrollHeight, 128)}px`;
+            },
+            onKeyDown: handleKeyDown,
+            disabled: streaming || voiceState === "recording" || voiceState === "transcribing",
+            autoFocus: true
+          }
+        ),
+        hasVoice && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: voiceState === "recording" ? onVoiceStop : onVoiceStart,
+            disabled: streaming || voiceState === "transcribing",
+            title: voiceState === "recording" ? "Stop recording" : "Record voice message",
+            className: cn3(
+              "h-7 w-7 shrink-0 rounded-xl flex items-center justify-center transition-all duration-200",
+              voiceState === "recording" && "animate-pulse",
+              voiceState === "error" ? "text-red-500 opacity-80" : "text-muted-foreground hover:text-foreground",
+              (streaming || voiceState === "transcribing") && "opacity-40 pointer-events-none"
+            ),
+            style: voiceState === "recording" ? { color: accentColor } : void 0,
+            children: voiceState === "transcribing" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : voiceState === "recording" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, { className: "h-3.5 w-3.5 fill-current" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        hasAttachments && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => fileInputRef.current?.click(),
+            disabled: streaming || isUploading,
+            title: "Attach file (CSV, image\u2026)",
+            className: cn3(
+              "h-7 w-7 shrink-0 rounded-xl flex items-center justify-center transition-all duration-200",
+              "text-muted-foreground hover:text-foreground",
+              (streaming || isUploading) && "opacity-40 pointer-events-none"
+            ),
+            children: isUploading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Paperclip, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: onSend,
+            disabled: streaming || !hasText || voiceState === "recording" || voiceState === "transcribing",
+            className: cn3(
+              "h-7 w-7 shrink-0 rounded-xl flex items-center justify-center transition-all duration-200",
+              hasText || streaming ? "opacity-100 shadow-sm" : "opacity-30"
+            ),
+            style: hasText || streaming ? { backgroundColor: accentColor, color: getContrastColor(accentColor) } : { backgroundColor: "transparent", color: "currentColor" },
+            children: streaming ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] })
     ] })
   ] });
 }
@@ -805,6 +1109,9 @@ function ChatWidget({
   source = "playground",
   userContext,
   playgroundOverrides,
+  enableVoice = false,
+  voiceAutoSend = false,
+  enableAttachments = false,
   className,
   onClose,
   onReset,
@@ -812,6 +1119,48 @@ function ChatWidget({
   expanded
 }) {
   const chat = useChat({ agentId, workspaceId, source, userContext, persist, onNavigate, playgroundOverrides });
+  const voice = useVoice({
+    agentId,
+    onTranscript: (text) => {
+      if (voiceAutoSend) {
+        void chat.send(text);
+      } else {
+        chat.setInput(text);
+      }
+    }
+  });
+  const attachmentHook = useAttachments({ agentId });
+  const [isDragOver, setIsDragOver] = react.useState(false);
+  const handleDragOver = react.useCallback((e) => {
+    if (!enableAttachments) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer.types.includes("Files")) setIsDragOver(true);
+  }, [enableAttachments]);
+  const handleDragLeave = react.useCallback((e) => {
+    if (!enableAttachments) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setIsDragOver(false);
+    }
+  }, [enableAttachments]);
+  const handleDrop = react.useCallback((e) => {
+    if (!enableAttachments) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+    const files = e.dataTransfer.files;
+    if (files.length > 0) attachmentHook.attach(files);
+  }, [enableAttachments, attachmentHook]);
+  const handleSend = () => {
+    const payloads = attachmentHook.readyPayloads;
+    if (payloads.length > 0) {
+      chat.queueAttachments(payloads);
+      attachmentHook.clear();
+    }
+    void chat.send();
+  };
   const canRegenerate = regenerateMessage && chat.messages.length > 0 && chat.messages.at(-1)?.role === "assistant" && !chat.streaming;
   const title = displayName || agentName;
   const headerBg = userMessageColor;
@@ -824,11 +1173,21 @@ function ChatWidget({
     "div",
     {
       className: cn(
-        "flex flex-col overflow-hidden rounded-2xl border shadow-xl bg-background h-full",
+        "flex flex-col overflow-hidden rounded-2xl border shadow-xl bg-background h-full relative",
+        isDragOver && "ring-2 ring-inset ring-primary/60",
         className
       ),
       style: { colorScheme: theme },
+      onDragOver: handleDragOver,
+      onDragEnter: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
       children: [
+        isDragOver && enableAttachments && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 z-50 flex flex-col items-center justify-center gap-2 rounded-2xl bg-background/90 backdrop-blur-sm pointer-events-none", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UploadCloud, { className: "h-8 w-8 text-primary/70" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground/70", children: "Drop files to attach" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "CSV, TXT, PDF, JPG, PNG, WebP" })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           ChatHeader,
           {
@@ -862,12 +1221,23 @@ function ChatWidget({
           {
             input: chat.input,
             setInput: chat.setInput,
-            onSend: () => chat.send(),
+            onSend: handleSend,
             streaming: chat.streaming,
             placeholder: messagePlaceholder,
             accentColor: userMessageColor,
             canRegenerate: !!canRegenerate,
-            onRegenerate: () => void chat.regenerate()
+            onRegenerate: () => void chat.regenerate(),
+            ...enableVoice && voice.isSupported ? {
+              voiceState: voice.voiceState,
+              onVoiceStart: () => void voice.start(),
+              onVoiceStop: voice.stop
+            } : {},
+            ...enableAttachments ? {
+              attachments: attachmentHook.attachments,
+              onAttach: attachmentHook.attach,
+              onRemoveAttachment: attachmentHook.remove,
+              isUploading: attachmentHook.isUploading
+            } : {}
           }
         ),
         watermark && /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "shrink-0 flex items-center justify-center gap-1.5 bg-muted/50 py-1.5 border-t", children: [
@@ -1137,4 +1507,6 @@ exports.BubbleWidget = BubbleWidget;
 exports.ChatWidget = ChatWidget;
 exports.formatToolName = formatToolName;
 exports.getContrastColor = getContrastColor;
+exports.useAttachments = useAttachments;
 exports.useChat = useChat;
+exports.useVoice = useVoice;