@mordn/chat-widget 0.7.0 → 0.8.0

package/dist/index.mjs

@@ -2,7 +2,7 @@
 "use client";
 
 // src/ChatWidget.tsx
-import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef5, useState as useState7 } from "react";
 
 // src/ui/button.tsx
 import { Slot } from "@radix-ui/react-slot";
@@ -191,10 +191,13 @@ Textarea.displayName = "Textarea";
 
 // src/components/prompt-input.tsx
 import {
+  FileIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
   ImageIcon,
   Loader2Icon,
-  PaperclipIcon,
   PlusIcon,
+  PresentationIcon,
   SendIcon,
   SquareIcon,
   XIcon
@@ -229,13 +232,22 @@ function PromptInputAttachment({
   ...props
 }) {
   const attachments = usePromptInputAttachments();
+  const isImage = data.mediaType?.startsWith("image/") && !!data.url;
   return /* @__PURE__ */ jsxs5(
     "div",
     {
-      className: cn("group relative h-14 w-14 rounded-lg border", className),
+      className: cn(
+        "group relative rounded-lg border",
+        // Images keep the square thumbnail. Other files use a wider
+        // pill-shaped chip showing icon + filename — without it,
+        // non-image attachments rendered as identical paperclip
+        // squares with no way to tell them apart.
+        isImage ? "h-14 w-14" : "h-14 max-w-[200px]",
+        className
+      ),
       ...props,
       children: [
-        data.mediaType?.startsWith("image/") && data.url ? /* @__PURE__ */ jsx8(
+        isImage ? /* @__PURE__ */ jsx8(
           "img",
           {
             alt: data.filename || "attachment",
@@ -244,7 +256,7 @@ function PromptInputAttachment({
             src: data.url,
             width: 56
           }
-        ) : /* @__PURE__ */ jsx8("div", { className: "flex size-full items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx8(PaperclipIcon, { className: "size-4" }) }),
+        ) : /* @__PURE__ */ jsx8(NonImageChip, { data }),
         /* @__PURE__ */ jsx8(
           Button,
           {
@@ -262,6 +274,34 @@ function PromptInputAttachment({
     data.id
   );
 }
+function NonImageChip({ data }) {
+  const { Icon: Icon2, label } = describeFile(data);
+  return /* @__PURE__ */ jsxs5("div", { className: "flex size-full items-center gap-2 px-2.5", children: [
+    /* @__PURE__ */ jsx8(Icon2, { className: "size-5 flex-shrink-0 text-muted-foreground" }),
+    /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex flex-col leading-tight", children: [
+      /* @__PURE__ */ jsx8("span", { className: "text-[12px] font-medium truncate", children: data.filename || "attachment" }),
+      /* @__PURE__ */ jsx8("span", { className: "text-[10px] text-muted-foreground uppercase tracking-wide", children: label })
+    ] })
+  ] });
+}
+function describeFile(data) {
+  const mt = (data.mediaType || "").toLowerCase();
+  const ext = (data.filename || "").toLowerCase().split(".").pop() || "";
+  if (mt === "application/pdf" || ext === "pdf") return { Icon: FileTextIcon, label: "PDF" };
+  if (mt.includes("spreadsheet") || mt.includes("excel") || ext === "xlsx" || ext === "xls" || ext === "csv" || ext === "tsv") {
+    return { Icon: FileSpreadsheetIcon, label: ext.toUpperCase() || "Spreadsheet" };
+  }
+  if (mt.includes("presentation") || mt.includes("powerpoint") || ext === "pptx" || ext === "ppt") {
+    return { Icon: PresentationIcon, label: ext.toUpperCase() || "Slides" };
+  }
+  if (mt.includes("wordprocessing") || mt.includes("msword") || ext === "docx" || ext === "doc") {
+    return { Icon: FileTextIcon, label: ext.toUpperCase() || "Doc" };
+  }
+  if (mt.startsWith("text/") || ext === "txt" || ext === "md" || ext === "json") {
+    return { Icon: FileTextIcon, label: ext.toUpperCase() || "Text" };
+  }
+  return { Icon: FileIcon, label: ext.toUpperCase() || "File" };
+}
 function PromptInputAttachments({
   className,
   children,
@@ -326,10 +366,18 @@ var PromptInput = ({
       if (!accept || accept.trim() === "") {
         return true;
       }
-      if (accept.includes("image/*")) {
-        return f.type.startsWith("image/");
-      }
-      return true;
+      const tokens = accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
+      const fileType = (f.type || "").toLowerCase();
+      const fileName = f.name.toLowerCase();
+      return tokens.some((token) => {
+        if (token === "*/*") return true;
+        if (token.startsWith(".")) return fileName.endsWith(token);
+        if (token.endsWith("/*")) {
+          const prefix = token.slice(0, -1);
+          return fileType.startsWith(prefix);
+        }
+        return fileType === token;
+      });
     },
     [accept]
   );
@@ -631,6 +679,8 @@ var PromptInputSubmit = ({
   variant = "default",
   size = "icon",
   status,
+  onStop,
+  onClick,
   children,
   ...props
 }) => {
@@ -642,13 +692,22 @@ var PromptInputSubmit = ({
   } else if (status === "error") {
     Icon2 = /* @__PURE__ */ jsx8(XIcon, { className: "size-4" });
   }
+  const isStopping = status === "streaming" && !!onStop;
   return /* @__PURE__ */ jsx8(
     Button,
     {
       className: cn("gap-1.5 rounded-lg", className),
       size,
-      type: "submit",
+      type: isStopping ? "button" : "submit",
       variant,
+      onClick: (e) => {
+        if (isStopping) {
+          e.preventDefault();
+          onStop();
+        }
+        onClick?.(e);
+      },
+      "aria-label": isStopping ? "Stop generating" : void 0,
       ...props,
       children: children ?? Icon2
     }
@@ -656,62 +715,87 @@ var PromptInputSubmit = ({
 };
 
 // src/components/message-attachments.tsx
-import { PaperclipIcon as PaperclipIcon2 } from "lucide-react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import {
+  FileIcon as FileIcon2,
+  FileSpreadsheetIcon as FileSpreadsheetIcon2,
+  FileTextIcon as FileTextIcon2,
+  PresentationIcon as PresentationIcon2
+} from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function openAttachment(attachment) {
+  if (attachment.url.startsWith("data:")) {
+    const w = window.open("", "_blank");
+    if (w) {
+      w.document.write(
+        `<html><head><title>${attachment.filename}</title></head><body style="margin:0;padding:20px;background:#f5f5f5;display:flex;justify-content:center;align-items:center;min-height:100vh;"><img src="${attachment.url}" alt="${attachment.filename}" style="max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);" /></body></html>`
+      );
+      w.document.close();
+    }
+    return;
+  }
+  window.open(attachment.url, "_blank");
+}
+function describeFile2(att) {
+  const mt = (att.mediaType || "").toLowerCase();
+  const ext = (att.filename || "").toLowerCase().split(".").pop() || "";
+  if (mt === "application/pdf" || ext === "pdf") return { Icon: FileTextIcon2, label: "PDF" };
+  if (mt.includes("spreadsheet") || mt.includes("excel") || ext === "xlsx" || ext === "xls" || ext === "csv" || ext === "tsv") {
+    return { Icon: FileSpreadsheetIcon2, label: ext.toUpperCase() || "Spreadsheet" };
+  }
+  if (mt.includes("presentation") || mt.includes("powerpoint") || ext === "pptx" || ext === "ppt") {
+    return { Icon: PresentationIcon2, label: ext.toUpperCase() || "Slides" };
+  }
+  if (mt.includes("wordprocessing") || mt.includes("msword") || ext === "docx" || ext === "doc") {
+    return { Icon: FileTextIcon2, label: ext.toUpperCase() || "Doc" };
+  }
+  if (mt.startsWith("text/") || ext === "txt" || ext === "md" || ext === "json") {
+    return { Icon: FileTextIcon2, label: ext.toUpperCase() || "Text" };
+  }
+  return { Icon: FileIcon2, label: ext.toUpperCase() || "File" };
+}
 function MessageAttachments({ attachments, className }) {
   if (!attachments || attachments.length === 0) {
     return null;
   }
-  const handleAttachmentClick = (attachment) => {
-    if (attachment.url.startsWith("data:")) {
-      const newWindow = window.open("", "_blank");
-      if (newWindow) {
-        newWindow.document.write(`
-          <html>
-            <head><title>${attachment.filename}</title></head>
-            <body style="margin:0; padding:20px; background:#f5f5f5; display:flex; justify-content:center; align-items:center; min-height:100vh;">
-              <img src="${attachment.url}" alt="${attachment.filename}" style="max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.15);" />
-            </body>
-          </html>
-        `);
-        newWindow.document.close();
-      }
-    } else if (attachment.url.startsWith("blob:")) {
-      window.open(attachment.url, "_blank");
-    } else if (attachment.url.startsWith("http")) {
-      window.open(attachment.url, "_blank");
-    } else {
-      window.open(attachment.url, "_blank");
-    }
-  };
-  return /* @__PURE__ */ jsx9("div", { className: cn("flex flex-wrap gap-2", className), children: attachments.map((attachment, index) => /* @__PURE__ */ jsx9(
-    "div",
-    {
-      className: "group relative h-14 w-14 rounded-lg",
-      children: attachment.mediaType.startsWith("image/") ? /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx9("div", { className: cn("flex flex-wrap gap-2", className), children: attachments.map((attachment, index) => {
+    const isImage = attachment.mediaType.startsWith("image/");
+    if (isImage) {
+      return /* @__PURE__ */ jsx9("div", { className: "group relative h-14 w-14 rounded-lg", children: /* @__PURE__ */ jsx9(
         "img",
         {
           src: attachment.url,
           alt: attachment.filename,
           className: "size-full rounded-lg object-cover cursor-pointer hover:opacity-80 transition-opacity",
-          onClick: () => handleAttachmentClick(attachment)
+          onClick: () => openAttachment(attachment)
         }
-      ) : /* @__PURE__ */ jsx9(
-        "div",
-        {
-          className: "flex size-full items-center justify-center text-muted-foreground cursor-pointer hover:bg-secondary/50 rounded-lg transition-colors",
-          onClick: () => handleAttachmentClick(attachment),
-          children: /* @__PURE__ */ jsx9(PaperclipIcon2, { className: "size-4" })
-        }
-      )
-    },
-    index
-  )) });
+      ) }, index);
+    }
+    const { Icon: Icon2, label } = describeFile2(attachment);
+    return /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        type: "button",
+        onClick: () => openAttachment(attachment),
+        className: cn(
+          "group flex items-center gap-2 px-2.5 h-14 rounded-lg border max-w-[220px]",
+          "hover:bg-[hsl(var(--chat-text)/0.04)] transition-colors text-left cursor-pointer"
+        ),
+        children: [
+          /* @__PURE__ */ jsx9(Icon2, { className: "size-5 flex-shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsxs6("div", { className: "min-w-0 flex flex-col leading-tight", children: [
+            /* @__PURE__ */ jsx9("span", { className: "text-[12px] font-medium truncate", children: attachment.filename }),
+            /* @__PURE__ */ jsx9("span", { className: "text-[10px] text-muted-foreground uppercase tracking-wide", children: label })
+          ] })
+        ]
+      },
+      index
+    );
+  }) });
 }
 
 // src/components/input-plugin-popover.tsx
 import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var FETCH_DEBOUNCE_MS = 120;
 function useInputPlugins({ textareaRef, value, setValue, plugins }) {
   const [active, setActive] = useState2(null);
@@ -882,7 +966,7 @@ function PluginPanel({ plugin, items, loading, highlight, onHover, onSelect }) {
       viewport.scrollTop += btnRect.bottom - viewRect.bottom;
     }
   }, [highlight]);
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       role: "listbox",
@@ -930,8 +1014,8 @@ function PluginPanel({ plugin, items, loading, highlight, onHover, onSelect }) {
           {
             ref: viewportRef,
             className: "max-h-[200px] overflow-y-auto",
-            children: /* @__PURE__ */ jsx10("div", { className: "py-1", children: items.map((item, idx) => /* @__PURE__ */ jsxs6("div", { children: [
-              /* @__PURE__ */ jsxs6(
+            children: /* @__PURE__ */ jsx10("div", { className: "py-1", children: items.map((item, idx) => /* @__PURE__ */ jsxs7("div", { children: [
+              /* @__PURE__ */ jsxs7(
                 "button",
                 {
                   ref: (el) => {
@@ -986,9 +1070,136 @@ function PluginPanel({ plugin, items, loading, highlight, onHover, onSelect }) {
   );
 }
 
+// src/components/chat-error-banner.tsx
+import { AlertTriangleIcon, XIcon as XIcon2 } from "lucide-react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function ChatErrorBanner({
+  error,
+  canRetry = true,
+  onRetry,
+  onDismiss
+}) {
+  if (!error) return null;
+  const friendly = friendlyErrorMessage(error);
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      role: "alert",
+      className: "flex items-start gap-2 px-3 py-2 mb-2 rounded-lg text-[13px]",
+      style: {
+        backgroundColor: "hsl(var(--chat-text)/0.04)",
+        border: "1px solid var(--chat-divider)"
+      },
+      title: error.message,
+      children: [
+        /* @__PURE__ */ jsx11(
+          AlertTriangleIcon,
+          {
+            className: "size-4 mt-0.5 flex-shrink-0",
+            style: { color: "hsl(var(--chat-text)/0.6)" }
+          }
+        ),
+        /* @__PURE__ */ jsx11("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx11("span", { style: { color: "hsl(var(--chat-text)/0.85)" }, children: friendly }) }),
+        canRetry && onRetry && /* @__PURE__ */ jsx11(
+          "button",
+          {
+            type: "button",
+            onClick: onRetry,
+            className: "text-[12px] font-medium underline-offset-2 hover:underline",
+            style: { color: "hsl(var(--chat-text)/0.85)" },
+            children: "Try again"
+          }
+        ),
+        onDismiss && /* @__PURE__ */ jsx11(
+          "button",
+          {
+            type: "button",
+            onClick: onDismiss,
+            "aria-label": "Dismiss",
+            className: "flex-shrink-0 -mr-1 -mt-0.5 p-1 rounded hover:bg-[hsl(var(--chat-text)/0.06)] transition-colors",
+            style: { color: "hsl(var(--chat-text)/0.5)" },
+            children: /* @__PURE__ */ jsx11(XIcon2, { className: "size-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+function friendlyErrorMessage(error) {
+  const raw = error.message ?? "";
+  if (/abort/i.test(raw)) return "Stopped.";
+  if (/network|fetch|disconnect|ECONN/i.test(raw)) {
+    return "Connection issue. Check your network and try again.";
+  }
+  if (/rate.?limit|429/i.test(raw)) {
+    return "You're sending messages too fast. Wait a moment and try again.";
+  }
+  if (/timeout/i.test(raw)) return "The response took too long.";
+  return "Something went wrong while generating the response.";
+}
+
+// src/components/message-actions.tsx
+import { useState as useState3 } from "react";
+import { CheckIcon as CheckIcon3, CopyIcon, RotateCcwIcon } from "lucide-react";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function MessageActions({
+  text,
+  onRegenerate,
+  regenerateDisabled,
+  className
+}) {
+  const [copied, setCopied] = useState3(false);
+  const handleCopy = async () => {
+    if (!text) return;
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1 mt-1.5 -ml-1.5",
+        // Pulled left a touch so the icons line up with the message
+        // text edge instead of its padding box.
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx12(ActionButton, { onClick: handleCopy, ariaLabel: "Copy message", children: copied ? /* @__PURE__ */ jsx12(CheckIcon3, { className: "size-3.5" }) : /* @__PURE__ */ jsx12(CopyIcon, { className: "size-3.5" }) }),
+        onRegenerate && /* @__PURE__ */ jsx12(
+          ActionButton,
+          {
+            onClick: onRegenerate,
+            disabled: regenerateDisabled,
+            ariaLabel: "Regenerate response",
+            children: /* @__PURE__ */ jsx12(RotateCcwIcon, { className: "size-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+function ActionButton({ onClick, disabled, ariaLabel, children }) {
+  return /* @__PURE__ */ jsx12(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      "aria-label": ariaLabel,
+      className: "p-1.5 rounded-md transition-colors hover:bg-[hsl(var(--chat-text)/0.06)] disabled:opacity-40 disabled:cursor-not-allowed",
+      style: { color: "hsl(var(--chat-text)/0.55)" },
+      children
+    }
+  );
+}
+
 // src/components/interface.tsx
-import { useState as useState5, useEffect as useEffect5, useRef as useRef4, useMemo as useMemo3, useCallback as useCallback4 } from "react";
-import { HistoryIcon, MessageSquareIcon, SearchIcon, ChevronRightIcon as ChevronRightIcon2, PlusIcon as PlusIcon2, XIcon as XIcon2 } from "lucide-react";
+import { useState as useState6, useEffect as useEffect5, useRef as useRef4, useMemo as useMemo3, useCallback as useCallback4 } from "react";
+import { HistoryIcon, MessageSquareIcon, SearchIcon, ChevronRightIcon as ChevronRightIcon2, PlusIcon as PlusIcon2, XIcon as XIcon3 } from "lucide-react";
 import { Fragment as Fragment5 } from "react";
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
@@ -1032,11 +1243,11 @@ function useCodeBlockAutoScroll(isStreaming) {
 }
 
 // src/components/response.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var Response = memo(
   ({ className, isStreaming = false, ...props }) => {
     const containerRef = useCodeBlockAutoScroll(isStreaming);
-    return /* @__PURE__ */ jsx11("div", { ref: containerRef, children: /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx13("div", { ref: containerRef, children: /* @__PURE__ */ jsx13(
       Streamdown,
       {
         className: cn(
@@ -1053,16 +1264,16 @@ Response.displayName = "Response";
 
 // src/ui/collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function Collapsible({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+  return /* @__PURE__ */ jsx14(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
 }
 function CollapsibleTrigger2({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     CollapsiblePrimitive.CollapsibleTrigger,
     {
       "data-slot": "collapsible-trigger",
@@ -1073,7 +1284,7 @@ function CollapsibleTrigger2({
 function CollapsibleContent2({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     CollapsiblePrimitive.CollapsibleContent,
     {
       "data-slot": "collapsible-content",
@@ -1084,8 +1295,8 @@ function CollapsibleContent2({
 
 // src/components/sources.tsx
 import { BookIcon, ChevronDownIcon as ChevronDownIcon2 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-var Sources = ({ className, ...props }) => /* @__PURE__ */ jsx13(
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var Sources = ({ className, ...props }) => /* @__PURE__ */ jsx15(
   Collapsible,
   {
     className: cn("not-prose mb-4 text-primary text-xs", className),
@@ -1097,25 +1308,25 @@ var SourcesTrigger = ({
   count,
   children,
   ...props
-}) => /* @__PURE__ */ jsx13(
+}) => /* @__PURE__ */ jsx15(
   CollapsibleTrigger2,
   {
     className: cn("flex items-center gap-2", className),
     ...props,
-    children: children ?? /* @__PURE__ */ jsxs7(Fragment3, { children: [
-      /* @__PURE__ */ jsxs7("p", { className: "font-medium", children: [
+    children: children ?? /* @__PURE__ */ jsxs10(Fragment3, { children: [
+      /* @__PURE__ */ jsxs10("p", { className: "font-medium", children: [
         "Used ",
         count,
         " sources"
       ] }),
-      /* @__PURE__ */ jsx13(ChevronDownIcon2, { className: "h-4 w-4" })
+      /* @__PURE__ */ jsx15(ChevronDownIcon2, { className: "h-4 w-4" })
     ] })
   }
 );
 var SourcesContent = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx13(
+}) => /* @__PURE__ */ jsx15(
   CollapsibleContent2,
   {
     className: cn(
@@ -1126,7 +1337,7 @@ var SourcesContent = ({
     ...props
   }
 );
-var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ jsx13(
+var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ jsx15(
   "a",
   {
     className: "flex items-center gap-2",
@@ -1134,9 +1345,9 @@ var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ jsx13(
     rel: "noreferrer",
     target: "_blank",
     ...props,
-    children: children ?? /* @__PURE__ */ jsxs7(Fragment3, { children: [
-      /* @__PURE__ */ jsx13(BookIcon, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsx13("span", { className: "block font-medium", children: title })
+    children: children ?? /* @__PURE__ */ jsxs10(Fragment3, { children: [
+      /* @__PURE__ */ jsx15(BookIcon, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx15("span", { className: "block font-medium", children: title })
     ] })
   }
 );
@@ -1144,8 +1355,8 @@ var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ jsx13(
 // src/components/reasoning.tsx
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { BrainIcon, ChevronDownIcon as ChevronDownIcon3 } from "lucide-react";
-import { createContext as createContext2, memo as memo2, useContext as useContext2, useEffect as useEffect4, useState as useState3 } from "react";
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { createContext as createContext2, memo as memo2, useContext as useContext2, useEffect as useEffect4, useState as useState4 } from "react";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var ReasoningContext = createContext2(null);
 var useReasoning = () => {
   const context = useContext2(ReasoningContext);
@@ -1176,8 +1387,8 @@ var Reasoning = memo2(
       prop: durationProp,
       defaultProp: void 0
     });
-    const [hasAutoClosed, setHasAutoClosed] = useState3(false);
-    const [startTime, setStartTime] = useState3(null);
+    const [hasAutoClosed, setHasAutoClosed] = useState4(false);
+    const [startTime, setStartTime] = useState4(null);
     useEffect4(() => {
       if (isStreaming) {
         if (startTime === null) {
@@ -1200,11 +1411,11 @@ var Reasoning = memo2(
     const handleOpenChange = (newOpen) => {
       setIsOpen(newOpen);
     };
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx16(
       ReasoningContext.Provider,
       {
         value: { isStreaming, isOpen, setIsOpen, duration },
-        children: /* @__PURE__ */ jsx14(
+        children: /* @__PURE__ */ jsx16(
           Collapsible,
           {
             className: cn("not-prose", className),
@@ -1220,15 +1431,15 @@ var Reasoning = memo2(
 );
 var getThinkingMessage = (isStreaming, duration) => {
   if (isStreaming) {
-    return /* @__PURE__ */ jsx14(Fragment4, { children: "Thinking..." });
+    return /* @__PURE__ */ jsx16(Fragment4, { children: "Thinking..." });
   }
   if (duration === void 0) {
-    return /* @__PURE__ */ jsx14(Fragment4, { children: "Thought process" });
+    return /* @__PURE__ */ jsx16(Fragment4, { children: "Thought process" });
   }
   if (duration === 0) {
-    return /* @__PURE__ */ jsx14(Fragment4, { children: "Thought process" });
+    return /* @__PURE__ */ jsx16(Fragment4, { children: "Thought process" });
   }
-  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
     "Thought for ",
     duration,
     " seconds"
@@ -1237,7 +1448,7 @@ var getThinkingMessage = (isStreaming, duration) => {
 var ReasoningTrigger = memo2(
   ({ className, children, ...props }) => {
     const { isStreaming, isOpen, duration } = useReasoning();
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx16(
       CollapsibleTrigger2,
       {
         className: cn(
@@ -1245,10 +1456,10 @@ var ReasoningTrigger = memo2(
           className
         ),
         ...props,
-        children: children ?? /* @__PURE__ */ jsxs8(Fragment4, { children: [
-          /* @__PURE__ */ jsx14(BrainIcon, { className: "size-4 flex-shrink-0" }),
+        children: children ?? /* @__PURE__ */ jsxs11(Fragment4, { children: [
+          /* @__PURE__ */ jsx16(BrainIcon, { className: "size-4 flex-shrink-0" }),
           getThinkingMessage(isStreaming, duration),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx16(
             ChevronDownIcon3,
             {
               className: cn(
@@ -1263,7 +1474,7 @@ var ReasoningTrigger = memo2(
   }
 );
 var ReasoningContent = memo2(
-  ({ className, children, ...props }) => /* @__PURE__ */ jsx14(
+  ({ className, children, ...props }) => /* @__PURE__ */ jsx16(
     CollapsibleContent2,
     {
       className: cn(
@@ -1272,7 +1483,7 @@ var ReasoningContent = memo2(
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx14(Response, { className: "grid gap-2", children })
+      children: /* @__PURE__ */ jsx16(Response, { className: "grid gap-2", children })
     }
   )
 );
@@ -1281,8 +1492,8 @@ ReasoningTrigger.displayName = "ReasoningTrigger";
 ReasoningContent.displayName = "ReasoningContent";
 
 // src/components/loader.tsx
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
-var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs9(
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs12(
   "svg",
   {
     height: size,
@@ -1291,10 +1502,10 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs9(
     viewBox: "0 0 16 16",
     width: size,
     children: [
-      /* @__PURE__ */ jsx15("title", { children: "Loader" }),
-      /* @__PURE__ */ jsxs9("g", { clipPath: "url(#clip0_2393_1490)", children: [
-        /* @__PURE__ */ jsx15("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx17("title", { children: "Loader" }),
+      /* @__PURE__ */ jsxs12("g", { clipPath: "url(#clip0_2393_1490)", children: [
+        /* @__PURE__ */ jsx17("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx17(
           "path",
           {
             d: "M8 16V12",
@@ -1303,7 +1514,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs9(
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx17(
           "path",
           {
             d: "M3.29773 1.52783L5.64887 4.7639",
@@ -1312,7 +1523,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs9(
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx17(
           "path",
           {
             d: "M12.7023 1.52783L10.3511 4.7639",
@@ -1321,7 +1532,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs9(
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx17(
           "path",
           {
             d: "M12.7023 14.472L10.3511 11.236",
@@ -1330,7 +1541,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs9(
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx17(
           "path",
           {
             d: "M3.29773 14.472L5.64887 11.236",
@@ -1339,7 +1550,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs9(
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx17(
           "path",
           {
             d: "M15.6085 5.52783L11.8043 6.7639",
@@ -1348,7 +1559,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs9(
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx17(
           "path",
           {
             d: "M0.391602 10.472L4.19583 9.23598",
@@ -1357,7 +1568,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs9(
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx17(
           "path",
           {
             d: "M15.6085 10.4722L11.8043 9.2361",
@@ -1366,7 +1577,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs9(
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx17(
           "path",
           {
             d: "M0.391602 5.52783L4.19583 6.7639",
@@ -1376,11 +1587,11 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs9(
           }
         )
       ] }),
-      /* @__PURE__ */ jsx15("defs", { children: /* @__PURE__ */ jsx15("clipPath", { id: "clip0_2393_1490", children: /* @__PURE__ */ jsx15("rect", { fill: "white", height: "16", width: "16" }) }) })
+      /* @__PURE__ */ jsx17("defs", { children: /* @__PURE__ */ jsx17("clipPath", { id: "clip0_2393_1490", children: /* @__PURE__ */ jsx17("rect", { fill: "white", height: "16", width: "16" }) }) })
     ]
   }
 );
-var Loader = ({ className, size = 16, ...props }) => /* @__PURE__ */ jsx15(
+var Loader = ({ className, size = 16, ...props }) => /* @__PURE__ */ jsx17(
   "div",
   {
     className: cn(
@@ -1388,14 +1599,14 @@ var Loader = ({ className, size = 16, ...props }) => /* @__PURE__ */ jsx15(
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx15(LoaderIcon, { size })
+    children: /* @__PURE__ */ jsx17(LoaderIcon, { size })
   }
 );
 
 // src/ui/badge.tsx
 import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var badgeVariants = cva3(
   "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -1419,7 +1630,7 @@ function Badge({
   ...props
 }) {
   const Comp = asChild ? Slot2 : "span";
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18(
     Comp,
     {
       "data-slot": "badge",
@@ -1441,14 +1652,14 @@ import {
 import { isValidElement } from "react";
 
 // src/components/code-block.tsx
-import { CheckIcon as CheckIcon3, CopyIcon } from "lucide-react";
-import { createContext as createContext3, useContext as useContext3, useState as useState4 } from "react";
+import { CheckIcon as CheckIcon4, CopyIcon as CopyIcon2 } from "lucide-react";
+import { createContext as createContext3, useContext as useContext3, useState as useState5 } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import {
   oneDark,
   oneLight
 } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var CodeBlockContext = createContext3({
   code: ""
 });
@@ -1459,7 +1670,7 @@ var CodeBlock = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ jsx17(CodeBlockContext.Provider, { value: { code }, children: /* @__PURE__ */ jsx17(
+}) => /* @__PURE__ */ jsx19(CodeBlockContext.Provider, { value: { code }, children: /* @__PURE__ */ jsx19(
   "div",
   {
     className: cn(
@@ -1467,8 +1678,8 @@ var CodeBlock = ({
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsxs10("div", { className: "relative max-h-96 overflow-y-auto", children: [
-      /* @__PURE__ */ jsx17(
+    children: /* @__PURE__ */ jsxs13("div", { className: "relative max-h-96 overflow-y-auto", children: [
+      /* @__PURE__ */ jsx19(
         SyntaxHighlighter,
         {
           className: "overflow-hidden dark:hidden",
@@ -1494,7 +1705,7 @@ var CodeBlock = ({
           children: code
         }
       ),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx19(
         SyntaxHighlighter,
         {
           className: "hidden overflow-hidden dark:block",
@@ -1520,36 +1731,42 @@ var CodeBlock = ({
           children: code
         }
       ),
-      children && /* @__PURE__ */ jsx17("div", { className: "absolute top-2 right-2 flex items-center gap-2", children })
+      children && /* @__PURE__ */ jsx19("div", { className: "absolute top-2 right-2 flex items-center gap-2", children })
     ] })
   }
 ) });
 
 // src/components/tool.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var Tool = ({ className, ...props }) => /* @__PURE__ */ jsx18(
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+var Tool = ({ className, ...props }) => /* @__PURE__ */ jsx20(
   Collapsible,
   {
     className: cn("not-prose w-full rounded-md border border-[var(--chat-divider)]", className),
     ...props
   }
 );
+var STATUS_LABELS = {
+  "input-streaming": "Pending",
+  "input-available": "Running",
+  "output-available": "Completed",
+  "output-error": "Error",
+  "approval-requested": "Awaiting approval",
+  "approval-responded": "Approved",
+  "output-denied": "Denied"
+};
+var STATUS_ICONS = {
+  "input-streaming": /* @__PURE__ */ jsx20(CircleIcon2, { className: "size-4" }),
+  "input-available": /* @__PURE__ */ jsx20(ClockIcon, { className: "size-4 animate-pulse" }),
+  "output-available": /* @__PURE__ */ jsx20(CheckCircleIcon, { className: "size-4 text-green-600" }),
+  "output-error": /* @__PURE__ */ jsx20(XCircleIcon, { className: "size-4 text-red-600" }),
+  "approval-requested": /* @__PURE__ */ jsx20(ClockIcon, { className: "size-4 text-amber-600" }),
+  "approval-responded": /* @__PURE__ */ jsx20(CheckCircleIcon, { className: "size-4 text-amber-600" }),
+  "output-denied": /* @__PURE__ */ jsx20(XCircleIcon, { className: "size-4 text-muted-foreground" })
+};
 var getStatusBadge = (status) => {
-  const labels = {
-    "input-streaming": "Pending",
-    "input-available": "Running",
-    "output-available": "Completed",
-    "output-error": "Error"
-  };
-  const icons = {
-    "input-streaming": /* @__PURE__ */ jsx18(CircleIcon2, { className: "size-4" }),
-    "input-available": /* @__PURE__ */ jsx18(ClockIcon, { className: "size-4 animate-pulse" }),
-    "output-available": /* @__PURE__ */ jsx18(CheckCircleIcon, { className: "size-4 text-green-600" }),
-    "output-error": /* @__PURE__ */ jsx18(XCircleIcon, { className: "size-4 text-red-600" })
-  };
-  return /* @__PURE__ */ jsxs11(Badge, { className: "gap-1.5 rounded-full text-xs", variant: "secondary", children: [
-    icons[status],
-    labels[status]
+  return /* @__PURE__ */ jsxs14(Badge, { className: "gap-1.5 rounded-full text-xs", variant: "secondary", children: [
+    STATUS_ICONS[status],
+    STATUS_LABELS[status]
   ] });
 };
 var ToolHeader = ({
@@ -1559,7 +1776,7 @@ var ToolHeader = ({
   toolName,
   state,
   ...props
-}) => /* @__PURE__ */ jsxs11(
+}) => /* @__PURE__ */ jsxs14(
   CollapsibleTrigger2,
   {
     className: cn(
@@ -1568,16 +1785,16 @@ var ToolHeader = ({
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx18(WrenchIcon, { className: "size-4 text-muted-foreground" }),
-        /* @__PURE__ */ jsx18("span", { className: "font-medium text-sm", children: title ?? toolName ?? type.split("-").slice(1).join("-") }),
+      /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx20(WrenchIcon, { className: "size-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx20("span", { className: "font-medium text-sm", children: title ?? toolName ?? type.split("-").slice(1).join("-") }),
         getStatusBadge(state)
       ] }),
-      /* @__PURE__ */ jsx18(ChevronDownIcon4, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+      /* @__PURE__ */ jsx20(ChevronDownIcon4, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
     ]
   }
 );
-var ToolContent = ({ className, ...props }) => /* @__PURE__ */ jsx18(
+var ToolContent = ({ className, ...props }) => /* @__PURE__ */ jsx20(
   CollapsibleContent2,
   {
     className: cn(
@@ -1587,9 +1804,9 @@ var ToolContent = ({ className, ...props }) => /* @__PURE__ */ jsx18(
     ...props
   }
 );
-var ToolInput = ({ className, input, ...props }) => /* @__PURE__ */ jsxs11("div", { className: cn("space-y-2 overflow-hidden p-2", className), ...props, children: [
-  /* @__PURE__ */ jsx18("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Parameters" }),
-  /* @__PURE__ */ jsx18("div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ jsx18(CodeBlock, { code: JSON.stringify(input, null, 2), language: "json" }) })
+var ToolInput = ({ className, input, ...props }) => /* @__PURE__ */ jsxs14("div", { className: cn("space-y-2 overflow-hidden p-2", className), ...props, children: [
+  /* @__PURE__ */ jsx20("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Parameters" }),
+  /* @__PURE__ */ jsx20("div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ jsx20(CodeBlock, { code: JSON.stringify(input, null, 2), language: "json" }) })
 ] });
 var ToolOutput = ({
   className,
@@ -1600,15 +1817,15 @@ var ToolOutput = ({
   if (!(output || errorText)) {
     return null;
   }
-  let Output = /* @__PURE__ */ jsx18("div", { children: output });
+  let Output = /* @__PURE__ */ jsx20("div", { children: output });
   if (typeof output === "object" && !isValidElement(output)) {
-    Output = /* @__PURE__ */ jsx18(CodeBlock, { code: JSON.stringify(output, null, 2), language: "json" });
+    Output = /* @__PURE__ */ jsx20(CodeBlock, { code: JSON.stringify(output, null, 2), language: "json" });
   } else if (typeof output === "string") {
-    Output = /* @__PURE__ */ jsx18(CodeBlock, { code: output, language: "json" });
+    Output = /* @__PURE__ */ jsx20(CodeBlock, { code: output, language: "json" });
   }
-  return /* @__PURE__ */ jsxs11("div", { className: cn("space-y-2 p-2", className), ...props, children: [
-    /* @__PURE__ */ jsx18("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: errorText ? "Error" : "Result" }),
-    /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs14("div", { className: cn("space-y-2 p-2", className), ...props, children: [
+    /* @__PURE__ */ jsx20("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: errorText ? "Error" : "Result" }),
+    /* @__PURE__ */ jsxs14(
       "div",
       {
         className: cn(
@@ -1616,7 +1833,7 @@ var ToolOutput = ({
           errorText ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground"
         ),
         children: [
-          errorText && /* @__PURE__ */ jsx18("div", { children: errorText }),
+          errorText && /* @__PURE__ */ jsx20("div", { children: errorText }),
           Output
         ]
       }
@@ -1625,7 +1842,7 @@ var ToolOutput = ({
 };
 
 // src/components/suggestion2.tsx
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 function StarterMessages({
   className,
   prompts,
@@ -1633,7 +1850,7 @@ function StarterMessages({
   ...props
 }) {
   if (prompts.length === 0) return null;
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       className: cn(
@@ -1641,8 +1858,8 @@ function StarterMessages({
         className
       ),
       ...props,
-      children: prompts.map((prompt, index) => /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsx19(
+      children: prompts.map((prompt, index) => /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsx21(
           StarterMessageItem,
           {
             prompt,
@@ -1652,7 +1869,7 @@ function StarterMessages({
         index < prompts.length - 1 && // 1px-tall element used as a divider — same --chat-divider token
         // every other separator in the widget uses, so consumers only
         // need to override one variable to recolour all of them.
-        /* @__PURE__ */ jsx19("div", { className: "h-px mx-3", style: { backgroundColor: "var(--chat-divider)" } })
+        /* @__PURE__ */ jsx21("div", { className: "h-px mx-3", style: { backgroundColor: "var(--chat-divider)" } })
       ] }, index))
     }
   );
@@ -1663,7 +1880,7 @@ function StarterMessageItem({
   onClick,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs15(
     "button",
     {
       type: "button",
@@ -1678,8 +1895,8 @@ function StarterMessageItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx19("span", { className: "text-[13px] text-[hsl(var(--chat-text)/0.7)]", children: prompt.title }),
-        prompt.subtitle && /* @__PURE__ */ jsx19("span", { className: "block text-[11px] text-[hsl(var(--chat-text)/0.4)] mt-0.5", children: prompt.subtitle })
+        /* @__PURE__ */ jsx21("span", { className: "text-[13px] text-[hsl(var(--chat-text)/0.7)]", children: prompt.title }),
+        prompt.subtitle && /* @__PURE__ */ jsx21("span", { className: "block text-[11px] text-[hsl(var(--chat-text)/0.4)] mt-0.5", children: prompt.subtitle })
       ]
     }
   );
@@ -1687,7 +1904,7 @@ function StarterMessageItem({
 
 // src/contexts/chat-storage-context.tsx
 import { createContext as createContext4, useContext as useContext4 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var ChatStorageContext = createContext4({
   storageKeyPrefix: ""
 });
@@ -1696,19 +1913,19 @@ function ChatStorageProvider({
   userId
 }) {
   const storageKeyPrefix = userId || "";
-  return /* @__PURE__ */ jsx20(ChatStorageContext.Provider, { value: { storageKeyPrefix }, children });
+  return /* @__PURE__ */ jsx22(ChatStorageContext.Provider, { value: { storageKeyPrefix }, children });
 }
 function useChatStorageKey() {
   return useContext4(ChatStorageContext);
 }
 
 // src/components/interface.tsx
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function ChatInterface({ id, initialMessages, config, onClose, headerActions } = {}) {
   const { storageKeyPrefix } = useChatStorageKey();
   const storageKey = (key) => storageKeyPrefix ? `chat-${storageKeyPrefix}-${key}` : `chat-${key}`;
   const themeMode = config?.theme?.mode || "light";
-  const [input, setInput] = useState5("");
+  const [input, setInput] = useState6("");
   const inputRef = useRef4(null);
   const inputPlugins = useInputPlugins({
     textareaRef: inputRef,
@@ -1716,26 +1933,26 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
     setValue: setInput,
     plugins: config?.inputPlugins
   });
-  const [showHistory, setShowHistory] = useState5(false);
-  const [conversations, setConversations] = useState5([]);
-  const [loadingHistory, setLoadingHistory] = useState5(false);
-  const [historyLoaded, setHistoryLoaded] = useState5(false);
-  const [searchQuery, setSearchQuery] = useState5("");
-  const [uploadError, setUploadError] = useState5(null);
+  const [showHistory, setShowHistory] = useState6(false);
+  const [conversations, setConversations] = useState6([]);
+  const [loadingHistory, setLoadingHistory] = useState6(false);
+  const [historyLoaded, setHistoryLoaded] = useState6(false);
+  const [searchQuery, setSearchQuery] = useState6("");
+  const [uploadError, setUploadError] = useState6(null);
   useEffect5(() => {
     if (uploadError) {
       const timeoutId = setTimeout(() => setUploadError(null), 5e3);
       return () => clearTimeout(timeoutId);
     }
   }, [uploadError]);
-  const [tabs, setTabs] = useState5([]);
-  const [activeTabId, setActiveTabId] = useState5("");
-  const [initialTabCreated, setInitialTabCreated] = useState5(false);
-  const [isInitializing, setIsInitializing] = useState5(true);
-  const [isLoadingMessages, setIsLoadingMessages] = useState5(false);
+  const [tabs, setTabs] = useState6([]);
+  const [activeTabId, setActiveTabId] = useState6("");
+  const [initialTabCreated, setInitialTabCreated] = useState6(false);
+  const [isInitializing, setIsInitializing] = useState6(true);
+  const [isLoadingMessages, setIsLoadingMessages] = useState6(false);
   const lastSyncedTabId = useRef4("");
   const hasInitialized = useRef4(false);
-  const { messages, sendMessage, status, setMessages } = useChat({
+  const { messages, sendMessage, status, setMessages, stop, regenerate, error, clearError } = useChat({
     id: activeTabId || "temp-id",
     transport: new DefaultChatTransport({
       api: "/api/chat",
@@ -1782,8 +1999,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
               mediaType: uploadResult.mediaType,
               size: uploadResult.size
             };
-          } catch (error) {
-            console.error(`Error uploading ${file.filename}:`, error);
+          } catch (error2) {
+            console.error(`Error uploading ${file.filename}:`, error2);
             return null;
           }
         });
@@ -1800,10 +2017,10 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
           setUploadError(warnMsg);
           console.warn(warnMsg);
         }
-      } catch (error) {
+      } catch (error2) {
         const errorMsg = "Error uploading files. Please try again.";
         setUploadError(errorMsg);
-        console.error("Error in file upload process:", error);
+        console.error("Error in file upload process:", error2);
         return;
       }
     }
@@ -1824,12 +2041,12 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
   };
   const AttachButton = () => {
     const attachments = usePromptInputAttachments();
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx23(
       PromptInputButton,
       {
         variant: "ghost",
         onClick: () => attachments.openFileDialog(),
-        children: /* @__PURE__ */ jsx21(PlusIcon2, { className: "size-4" })
+        children: /* @__PURE__ */ jsx23(PlusIcon2, { className: "size-4" })
       }
     );
   };
@@ -1852,8 +2069,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       } else {
         console.error("Error loading messages:", response.status, response.statusText);
       }
-    } catch (error) {
-      console.error("Error loading conversation:", error);
+    } catch (error2) {
+      console.error("Error loading conversation:", error2);
     }
   };
   const generateUniqueTabId = () => {
@@ -1957,8 +2174,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
         const errorText = await response.text();
         console.error("[ChatInterface] Error response:", errorText);
       }
-    } catch (error) {
-      console.error("[ChatInterface] Error fetching chat history:", error);
+    } catch (error2) {
+      console.error("[ChatInterface] Error fetching chat history:", error2);
     } finally {
       setLoadingHistory(false);
     }
@@ -2091,22 +2308,27 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
   const renderMessages = () => messages.map((message, index) => {
     const sourceParts = message.parts?.filter((part) => part.type === "source-url") || [];
     const fileParts = message.parts?.filter((part) => part.type === "file") || [];
-    return /* @__PURE__ */ jsxs13("div", { className: index > 0 ? "mt-6" : "", children: [
-      message.role === "assistant" && sourceParts.length > 0 && /* @__PURE__ */ jsxs13(Sources, { children: [
-        /* @__PURE__ */ jsx21(SourcesTrigger, { count: sourceParts.length }),
-        sourceParts.map((part, i) => /* @__PURE__ */ jsx21(SourcesContent, { children: /* @__PURE__ */ jsx21(
+    const isLastMessage = index === messages.length - 1;
+    const isStreamingThisMessage = isLastMessage && message.role === "assistant" && status !== "ready";
+    const showActions = message.role === "assistant" && !isStreamingThisMessage;
+    const showRegenerate = showActions && isLastMessage && status === "ready";
+    const messageText = showActions ? (message.parts ?? []).filter((p) => p.type === "text").map((p) => p.text).join("\n\n") : "";
+    return /* @__PURE__ */ jsxs16("div", { className: index > 0 ? "mt-6" : "", children: [
+      message.role === "assistant" && sourceParts.length > 0 && /* @__PURE__ */ jsxs16(Sources, { children: [
+        /* @__PURE__ */ jsx23(SourcesTrigger, { count: sourceParts.length }),
+        /* @__PURE__ */ jsx23(SourcesContent, { children: sourceParts.map((part, i) => /* @__PURE__ */ jsx23(
           Source,
           {
             href: part.url,
             title: part.url
           },
-          `${message.id}-${i}`
-        ) }, `${message.id}-${i}`))
+          `${message.id}-source-${i}`
+        )) })
       ] }),
-      fileParts.length > 0 && /* @__PURE__ */ jsx21("div", { className: cn(
+      fileParts.length > 0 && /* @__PURE__ */ jsx23("div", { className: cn(
         "flex mb-1",
         message.role === "user" ? "justify-end" : "justify-start"
-      ), children: /* @__PURE__ */ jsx21(
+      ), children: /* @__PURE__ */ jsx23(
         MessageAttachments,
         {
           attachments: fileParts.map((part) => ({
@@ -2117,14 +2339,14 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
           }))
         }
       ) }),
-      message.parts ? /* @__PURE__ */ jsx21("div", { className: "space-y-2", children: message.parts.map((part, i) => {
+      message.parts ? /* @__PURE__ */ jsx23("div", { className: "space-y-2", children: message.parts.map((part, i) => {
         switch (part.type) {
           case "text":
             const isTextStreaming = status === "streaming" && i === message.parts.length - 1 && message.id === messages.at(-1)?.id;
-            return /* @__PURE__ */ jsx21(Fragment5, { children: /* @__PURE__ */ jsx21(Message, { from: message.role, children: /* @__PURE__ */ jsx21(MessageContent, { children: /* @__PURE__ */ jsx21(Response, { isStreaming: isTextStreaming, children: part.text }) }) }) }, `${message.id}-${i}`);
+            return /* @__PURE__ */ jsx23(Fragment5, { children: /* @__PURE__ */ jsx23(Message, { from: message.role, children: /* @__PURE__ */ jsx23(MessageContent, { children: /* @__PURE__ */ jsx23(Response, { isStreaming: isTextStreaming, children: part.text }) }) }) }, `${message.id}-${i}`);
           case "reasoning":
             const isCurrentlyStreaming = status === "streaming" && i === message.parts.length - 1 && message.id === messages.at(-1)?.id;
-            return /* @__PURE__ */ jsxs13(
+            return /* @__PURE__ */ jsxs16(
               Reasoning,
               {
                 className: "w-full",
@@ -2132,8 +2354,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                 defaultOpen: false,
                 open: isCurrentlyStreaming ? true : void 0,
                 children: [
-                  /* @__PURE__ */ jsx21(ReasoningTrigger, {}),
-                  /* @__PURE__ */ jsx21(ReasoningContent, { children: part.text })
+                  /* @__PURE__ */ jsx23(ReasoningTrigger, {}),
+                  /* @__PURE__ */ jsx23(ReasoningContent, { children: part.text })
                 ]
               },
               `${message.id}-${i}`
@@ -2141,8 +2363,24 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
           default:
             if (part.type.startsWith("tool-") || part.type === "dynamic-tool") {
               const toolPart = part;
-              return /* @__PURE__ */ jsxs13(Tool, { children: [
-                /* @__PURE__ */ jsx21(
+              const resolvedToolName = toolPart.toolName ?? (part.type.startsWith("tool-") ? part.type.slice(5) : "");
+              const customRenderer = config?.toolRenderers?.[resolvedToolName];
+              if (customRenderer) {
+                const rendered = customRenderer({
+                  type: part.type,
+                  toolName: resolvedToolName,
+                  toolCallId: toolPart.toolCallId,
+                  state: toolPart.state,
+                  input: toolPart.input,
+                  output: toolPart.output,
+                  errorText: toolPart.errorText
+                });
+                if (rendered !== null && rendered !== void 0) {
+                  return /* @__PURE__ */ jsx23(Fragment5, { children: rendered }, `${message.id}-${i}`);
+                }
+              }
+              return /* @__PURE__ */ jsxs16(Tool, { children: [
+                /* @__PURE__ */ jsx23(
                   ToolHeader,
                   {
                     type: part.type,
@@ -2150,9 +2388,9 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                     state: toolPart.state
                   }
                 ),
-                /* @__PURE__ */ jsxs13(ToolContent, { children: [
-                  /* @__PURE__ */ jsx21(ToolInput, { input: toolPart.input }),
-                  /* @__PURE__ */ jsx21(ToolOutput, { output: toolPart.output, errorText: toolPart.errorText })
+                /* @__PURE__ */ jsxs16(ToolContent, { children: [
+                  /* @__PURE__ */ jsx23(ToolInput, { input: toolPart.input }),
+                  /* @__PURE__ */ jsx23(ToolOutput, { output: toolPart.output, errorText: toolPart.errorText })
                 ] })
               ] }, `${message.id}-${i}`);
             }
@@ -2160,7 +2398,14 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
         }
       }) }) : (
         /* Handle standard AI SDK messages with content or text property */
-        /* @__PURE__ */ jsx21(Fragment5, { children: /* @__PURE__ */ jsx21(Message, { from: message.role, children: /* @__PURE__ */ jsx21(MessageContent, { children: /* @__PURE__ */ jsx21(Response, { children: message.content || message.text }) }) }) }, `${message.id}-content`)
+        /* @__PURE__ */ jsx23(Fragment5, { children: /* @__PURE__ */ jsx23(Message, { from: message.role, children: /* @__PURE__ */ jsx23(MessageContent, { children: /* @__PURE__ */ jsx23(Response, { children: message.content || message.text }) }) }) }, `${message.id}-content`)
+      ),
+      showActions && /* @__PURE__ */ jsx23(
+        MessageActions,
+        {
+          text: messageText,
+          onRegenerate: showRegenerate && regenerate ? () => regenerate() : void 0
+        }
       )
     ] }, message.id);
   });
@@ -2188,8 +2433,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       setActiveTabId(selectedConversationId);
       await loadConversation(selectedConversationId);
       setShowHistory(false);
-    } catch (error) {
-      console.error("Error loading conversation:", error);
+    } catch (error2) {
+      console.error("Error loading conversation:", error2);
     }
   };
   const dropdownRef = useRef4(null);
@@ -2206,7 +2451,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [showHistory]);
-  return /* @__PURE__ */ jsx21("div", { className: cn("w-full h-full flex flex-col bg-white dark:bg-gray-900 overflow-hidden ring-1 ring-black/[0.02] dark:ring-white/[0.03]", themeMode === "dark" && "dark"), children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx23("div", { className: cn("w-full h-full flex flex-col bg-white dark:bg-gray-900 overflow-hidden ring-1 ring-black/[0.02] dark:ring-white/[0.03]", themeMode === "dark" && "dark"), children: /* @__PURE__ */ jsxs16(
     "div",
     {
       className: cn(
@@ -2214,11 +2459,11 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
         themeMode === "dark" && "dark"
       ),
       children: [
-        /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 px-3 py-2 border-b backdrop-blur-sm relative z-20", style: {
+        /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2 px-3 py-2 border-b backdrop-blur-sm relative z-20", style: {
           borderColor: "var(--chat-divider)",
           backgroundColor: "var(--chat-header-bg)"
         }, children: [
-          /* @__PURE__ */ jsx21("div", { className: "flex items-center gap-1 flex-1 min-w-0 overflow-x-auto scrollbar-hide py-0.5 scroll-smooth", children: tabs.map((tab, index) => /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsx23("div", { className: "flex items-center gap-1 flex-1 min-w-0 overflow-x-auto scrollbar-hide py-0.5 scroll-smooth", children: tabs.map((tab, index) => /* @__PURE__ */ jsxs16(
             "div",
             {
               className: "relative flex items-center gap-1.5 px-3 py-1.5 rounded-lg cursor-pointer transition-all duration-150 group flex-shrink-0 min-w-0",
@@ -2241,8 +2486,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                 switchToTab(tab.id);
               },
               children: [
-                /* @__PURE__ */ jsx21("span", { className: "truncate max-w-28 text-[13px] font-medium transition-colors", children: tab.title }),
-                tabs.length > 1 && /* @__PURE__ */ jsx21(
+                /* @__PURE__ */ jsx23("span", { className: "truncate max-w-28 text-[13px] font-medium transition-colors", children: tab.title }),
+                tabs.length > 1 && /* @__PURE__ */ jsx23(
                   "button",
                   {
                     onClick: (e) => {
@@ -2261,15 +2506,15 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                       e.currentTarget.style.opacity = tab.isActive ? "0.6" : "0";
                       e.currentTarget.style.backgroundColor = "transparent";
                     },
-                    children: /* @__PURE__ */ jsx21(XIcon2, { className: "h-3 w-3", strokeWidth: 2.5 })
+                    children: /* @__PURE__ */ jsx23(XIcon3, { className: "h-3 w-3", strokeWidth: 2.5 })
                   }
                 )
               ]
             },
             tab.id
           )) }),
-          /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
-            /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+            /* @__PURE__ */ jsx23(
               "button",
               {
                 onClick: createNewTab,
@@ -2286,11 +2531,11 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                   e.currentTarget.style.backgroundColor = "transparent";
                 },
                 title: "New Chat",
-                children: /* @__PURE__ */ jsx21(PlusIcon2, { className: "h-4 w-4", strokeWidth: 2 })
+                children: /* @__PURE__ */ jsx23(PlusIcon2, { className: "h-4 w-4", strokeWidth: 2 })
               }
             ),
-            /* @__PURE__ */ jsxs13("div", { className: "relative", ref: dropdownRef, children: [
-              /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsxs16("div", { className: "relative", ref: dropdownRef, children: [
+              /* @__PURE__ */ jsx23(
                 "button",
                 {
                   onClick: () => setShowHistory(!showHistory),
@@ -2312,17 +2557,17 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                     }
                   },
                   title: "Chat History",
-                  children: /* @__PURE__ */ jsx21(HistoryIcon, { className: "h-4 w-4", strokeWidth: 2 })
+                  children: /* @__PURE__ */ jsx23(HistoryIcon, { className: "h-4 w-4", strokeWidth: 2 })
                 }
               ),
-              showHistory && /* @__PURE__ */ jsxs13("div", { className: "absolute right-0 top-full mt-1.5 w-72 rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.08)] dark:shadow-[0_4px_24px_rgba(0,0,0,0.3)] z-50 animate-in fade-in slide-in-from-top-1 duration-150 overflow-hidden", style: {
+              showHistory && /* @__PURE__ */ jsxs16("div", { className: "absolute right-0 top-full mt-1.5 w-72 rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.08)] dark:shadow-[0_4px_24px_rgba(0,0,0,0.3)] z-50 animate-in fade-in slide-in-from-top-1 duration-150 overflow-hidden", style: {
                 backgroundColor: "hsl(var(--chat-background))",
                 border: `1px solid ${"var(--chat-divider)"}`
               }, children: [
-                /* @__PURE__ */ jsx21("div", { className: "p-2.5 border-b", style: {
+                /* @__PURE__ */ jsx23("div", { className: "p-2.5 border-b", style: {
                   borderColor: "var(--chat-divider)",
                   backgroundColor: "var(--chat-overlay)"
-                }, children: /* @__PURE__ */ jsx21("div", { className: "relative", children: /* @__PURE__ */ jsx21(
+                }, children: /* @__PURE__ */ jsx23("div", { className: "relative", children: /* @__PURE__ */ jsx23(
                   "input",
                   {
                     type: "text",
@@ -2337,25 +2582,25 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                     }
                   }
                 ) }) }),
-                /* @__PURE__ */ jsx21("div", { className: "max-h-[300px] overflow-y-auto ai-assistant-scrollbar", children: loadingHistory ? /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx21("div", { className: "text-[13px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Loading..." }) }) : conversations.length === 0 ? /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
-                  /* @__PURE__ */ jsx21("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
+                /* @__PURE__ */ jsx23("div", { className: "max-h-[300px] overflow-y-auto ai-assistant-scrollbar", children: loadingHistory ? /* @__PURE__ */ jsx23("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx23("div", { className: "text-[13px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Loading..." }) }) : conversations.length === 0 ? /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+                  /* @__PURE__ */ jsx23("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
                     backgroundColor: "hsl(var(--chat-surface))"
-                  }, children: /* @__PURE__ */ jsx21(MessageSquareIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
-                  /* @__PURE__ */ jsx21("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Conversations" }),
-                  /* @__PURE__ */ jsx21("p", { className: "text-[12px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Start a new chat to begin" })
-                ] }) : groupedConversations.length === 0 ? /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
-                  /* @__PURE__ */ jsx21("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
+                  }, children: /* @__PURE__ */ jsx23(MessageSquareIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
+                  /* @__PURE__ */ jsx23("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Conversations" }),
+                  /* @__PURE__ */ jsx23("p", { className: "text-[12px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Start a new chat to begin" })
+                ] }) : groupedConversations.length === 0 ? /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+                  /* @__PURE__ */ jsx23("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
                     backgroundColor: "hsl(var(--chat-surface))"
-                  }, children: /* @__PURE__ */ jsx21(SearchIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
-                  /* @__PURE__ */ jsx21("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Results" }),
-                  /* @__PURE__ */ jsx21("p", { className: "text-[12px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Try a different search" })
-                ] }) : /* @__PURE__ */ jsx21("div", { className: "py-0.5", children: groupedConversations.map(([groupName, groupConversations]) => /* @__PURE__ */ jsxs13("div", { className: "mb-0.5", children: [
-                  /* @__PURE__ */ jsx21("div", { className: "px-2.5 py-1 sticky top-0 backdrop-blur-sm z-10", style: {
+                  }, children: /* @__PURE__ */ jsx23(SearchIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
+                  /* @__PURE__ */ jsx23("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Results" }),
+                  /* @__PURE__ */ jsx23("p", { className: "text-[12px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Try a different search" })
+                ] }) : /* @__PURE__ */ jsx23("div", { className: "py-0.5", children: groupedConversations.map(([groupName, groupConversations]) => /* @__PURE__ */ jsxs16("div", { className: "mb-0.5", children: [
+                  /* @__PURE__ */ jsx23("div", { className: "px-2.5 py-1 sticky top-0 backdrop-blur-sm z-10", style: {
                     backgroundColor: "var(--chat-header-bg-strong)"
-                  }, children: /* @__PURE__ */ jsx21("h3", { className: "text-[10px] font-semibold uppercase tracking-wide", style: { color: "hsl(var(--chat-text-muted))" }, children: groupName }) }),
-                  /* @__PURE__ */ jsx21("div", { className: "px-1 space-y-0.5", children: groupConversations.map((conversation) => {
+                  }, children: /* @__PURE__ */ jsx23("h3", { className: "text-[10px] font-semibold uppercase tracking-wide", style: { color: "hsl(var(--chat-text-muted))" }, children: groupName }) }),
+                  /* @__PURE__ */ jsx23("div", { className: "px-1 space-y-0.5", children: groupConversations.map((conversation) => {
                     const isActiveConversation = activeTabId === conversation.id;
-                    return /* @__PURE__ */ jsx21(
+                    return /* @__PURE__ */ jsx23(
                       "button",
                       {
                         className: "w-full px-2 py-1 rounded-md transition-all duration-150 text-left group relative",
@@ -2373,12 +2618,12 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                           }
                         },
                         onClick: () => handleSelectConversation(conversation.id, conversation.title),
-                        children: /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1.5", children: [
-                          /* @__PURE__ */ jsx21("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx21("p", { className: "text-[12px] line-clamp-1 transition-colors leading-tight", style: {
+                        children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1.5", children: [
+                          /* @__PURE__ */ jsx23("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx23("p", { className: "text-[12px] line-clamp-1 transition-colors leading-tight", style: {
                             fontWeight: isActiveConversation ? 500 : 400,
                             color: isActiveConversation ? "hsl(var(--chat-text))" : "hsl(var(--chat-text-strong))"
                           }, children: conversation.title }) }),
-                          /* @__PURE__ */ jsx21(
+                          /* @__PURE__ */ jsx23(
                             ChevronRightIcon2,
                             {
                               className: "h-3 w-3 transition-all duration-150 flex-shrink-0",
@@ -2398,7 +2643,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
               ] })
             ] }),
             headerActions,
-            onClose && /* @__PURE__ */ jsx21(
+            onClose && /* @__PURE__ */ jsx23(
               "button",
               {
                 onClick: onClose,
@@ -2415,21 +2660,21 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                   e.currentTarget.style.backgroundColor = "transparent";
                 },
                 title: "Close Chat",
-                children: /* @__PURE__ */ jsx21(XIcon2, { className: "h-4 w-4", strokeWidth: 2 })
+                children: /* @__PURE__ */ jsx23(XIcon3, { className: "h-4 w-4", strokeWidth: 2 })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs13(Conversation, { className: "flex-1 max-w-full ai-assistant-scrollbar", children: [
-          /* @__PURE__ */ jsxs13(ConversationContent, { className: "max-w-[96%] mx-auto py-6", children: [
+        /* @__PURE__ */ jsxs16(Conversation, { className: "flex-1 max-w-full ai-assistant-scrollbar", children: [
+          /* @__PURE__ */ jsxs16(ConversationContent, { className: "max-w-[96%] mx-auto py-6", children: [
             renderMessages(),
-            status === "submitted" && /* @__PURE__ */ jsx21("div", { className: "mt-6", children: /* @__PURE__ */ jsx21(Message, { from: "assistant", children: /* @__PURE__ */ jsx21(MessageContent, { children: /* @__PURE__ */ jsx21(Loader, { size: 16 }) }) }) })
+            status === "submitted" && /* @__PURE__ */ jsx23("div", { className: "mt-6", children: /* @__PURE__ */ jsx23(Message, { from: "assistant", children: /* @__PURE__ */ jsx23(MessageContent, { children: /* @__PURE__ */ jsx23(Loader, { size: 16 }) }) }) })
           ] }),
-          /* @__PURE__ */ jsx21(ConversationScrollButton, {})
+          /* @__PURE__ */ jsx23(ConversationScrollButton, {})
         ] }),
-        /* @__PURE__ */ jsxs13("div", { className: "px-5 pb-5", children: [
-          uploadError && /* @__PURE__ */ jsx21("div", { className: "mb-3 px-4 py-3 bg-red-50 dark:bg-red-900/20 border border-red-200/60 dark:border-red-800/60 rounded-2xl text-sm text-red-700 dark:text-red-400 shadow-sm", children: uploadError }),
-          isInitializing || isLoadingMessages ? /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center py-8", role: "status", "aria-label": "Loading conversation", children: /* @__PURE__ */ jsx21("div", { className: "h-4 w-4 rounded-full border-2 border-current border-t-transparent animate-spin", style: { color: "hsl(var(--chat-text-muted))" } }) }) : messages.length === 0 && status !== "submitted" && config?.starterPrompts && /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsxs16("div", { className: "px-5 pb-5", children: [
+          uploadError && /* @__PURE__ */ jsx23("div", { className: "mb-3 px-4 py-3 bg-red-50 dark:bg-red-900/20 border border-red-200/60 dark:border-red-800/60 rounded-2xl text-sm text-red-700 dark:text-red-400 shadow-sm", children: uploadError }),
+          isInitializing || isLoadingMessages ? /* @__PURE__ */ jsx23("div", { className: "flex items-center justify-center py-8", role: "status", "aria-label": "Loading conversation", children: /* @__PURE__ */ jsx23("div", { className: "h-4 w-4 rounded-full border-2 border-current border-t-transparent animate-spin", style: { color: "hsl(var(--chat-text-muted))" } }) }) : messages.length === 0 && status !== "submitted" && config?.starterPrompts && /* @__PURE__ */ jsx23(
             StarterMessages,
             {
               prompts: config.starterPrompts,
@@ -2438,25 +2683,67 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
               }
             }
           ),
+          /* @__PURE__ */ jsx23(
+            ChatErrorBanner,
+            {
+              error: error ?? null,
+              canRetry: messages.some((m) => m.role === "user"),
+              onRetry: () => {
+                clearError?.();
+                regenerate?.();
+              },
+              onDismiss: clearError
+            }
+          ),
           inputPlugins.panel,
-          /* @__PURE__ */ jsxs13(PromptInput, { onSubmit: handleSubmit, globalDrop: true, multiple: true, accept: "image/*", children: [
-            /* @__PURE__ */ jsxs13(PromptInputBody, { children: [
-              /* @__PURE__ */ jsx21(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ jsx21(PromptInputAttachment, { data: attachment }) }),
-              /* @__PURE__ */ jsx21(
-                PromptInputTextarea,
-                {
-                  ref: inputRef,
-                  onChange: (e) => setInput(e.target.value),
-                  onKeyDown: inputPlugins.onKeyDown,
-                  value: input
+          /* @__PURE__ */ jsxs16(
+            PromptInput,
+            {
+              onSubmit: handleSubmit,
+              globalDrop: true,
+              multiple: true,
+              accept: config?.features?.fileUploadAccept ?? "image/*",
+              maxFileSize: config?.features?.fileUploadMaxBytes,
+              onError: (err) => {
+                if (err.code === "max_file_size") {
+                  setUploadError(
+                    config?.features?.fileUploadMaxBytes ? `File too large (max ${Math.floor(
+                      config.features.fileUploadMaxBytes / 1024 / 1024
+                    )} MB).` : "File too large."
+                  );
+                } else if (err.code === "accept") {
+                  setUploadError("That file type is not supported.");
+                } else if (err.code === "max_files") {
+                  setUploadError("Too many files attached.");
                 }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs13(PromptInputToolbar, { children: [
-              /* @__PURE__ */ jsx21(PromptInputTools, { children: config?.features?.fileUpload === true && /* @__PURE__ */ jsx21(AttachButton, {}) }),
-              /* @__PURE__ */ jsx21(PromptInputSubmit, { disabled: !input, status })
-            ] })
-          ] })
+              },
+              children: [
+                /* @__PURE__ */ jsxs16(PromptInputBody, { children: [
+                  /* @__PURE__ */ jsx23(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ jsx23(PromptInputAttachment, { data: attachment }) }),
+                  /* @__PURE__ */ jsx23(
+                    PromptInputTextarea,
+                    {
+                      ref: inputRef,
+                      onChange: (e) => setInput(e.target.value),
+                      onKeyDown: inputPlugins.onKeyDown,
+                      value: input
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs16(PromptInputToolbar, { children: [
+                  /* @__PURE__ */ jsx23(PromptInputTools, { children: config?.features?.fileUpload === true && /* @__PURE__ */ jsx23(AttachButton, {}) }),
+                  /* @__PURE__ */ jsx23(
+                    PromptInputSubmit,
+                    {
+                      disabled: status === "streaming" || status === "submitted" ? false : !input,
+                      status,
+                      onStop: stop
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
         ] })
       ]
     }
@@ -2502,7 +2789,7 @@ function toHslTripletIfHex(value) {
 }
 
 // src/ChatWidget.tsx
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function ChatWidget({
   userId,
   conversationId,
@@ -2519,14 +2806,15 @@ function ChatWidget({
   headerActions,
   open,
   onOpenChange,
-  inputPlugins
+  inputPlugins,
+  toolRenderers
 }) {
   const layout = display?.layout || "popup";
   const isControlled = open !== void 0;
   const showToggleButton = !isControlled && display?.showToggleButton !== false;
   const resizable = layout === "popup" && display?.resizable !== false;
   const size = display?.size || "default";
-  const [internalIsOpen, setInternalIsOpen] = useState6(
+  const [internalIsOpen, setInternalIsOpen] = useState7(
     layout !== "popup" ? true : display?.defaultOpen || false
   );
   const isOpen = isControlled ? open : internalIsOpen;
@@ -2537,7 +2825,7 @@ function ChatWidget({
       setInternalIsOpen(next);
     }
   };
-  const [isResizing, setIsResizing] = useState6(false);
+  const [isResizing, setIsResizing] = useState7(false);
   const containerRef = useRef5(null);
   const customStyles = useMemo4(() => {
     const styles = {};
@@ -2595,18 +2883,19 @@ function ChatWidget({
     theme,
     features,
     starterPrompts,
-    inputPlugins
-  }), [userId, model, systemPrompt, temperature, theme, features, starterPrompts, inputPlugins]);
+    inputPlugins,
+    toolRenderers
+  }), [userId, model, systemPrompt, temperature, theme, features, starterPrompts, inputPlugins, toolRenderers]);
   const togglePosition = display?.toggleButtonPosition || { bottom: "24px", right: "24px" };
   const themeClass = theme?.mode === "dark" ? "dark" : "";
   if (layout === "inline") {
-    return /* @__PURE__ */ jsx22(ChatStorageProvider, { userId, children: /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx24(ChatStorageProvider, { userId, children: /* @__PURE__ */ jsx24(
       "div",
       {
         ref: containerRef,
         className: `chat-widget-container chat-widget-inline chat-widget-content ${themeClass} ${className || ""}`,
         style: customStyles,
-        children: /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsx24(
           ChatInterface,
           {
             id: conversationId,
@@ -2620,13 +2909,13 @@ function ChatWidget({
     ) });
   }
   if (layout === "page") {
-    return /* @__PURE__ */ jsx22(ChatStorageProvider, { userId, children: /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx24(ChatStorageProvider, { userId, children: /* @__PURE__ */ jsx24(
       "div",
       {
         ref: containerRef,
         className: `chat-widget-container chat-widget-page chat-widget-content ${themeClass} ${className || ""}`,
         style: customStyles,
-        children: /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsx24(
           ChatInterface,
           {
             id: conversationId,
@@ -2639,18 +2928,18 @@ function ChatWidget({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs14(ChatStorageProvider, { userId, children: [
-    showToggleButton && !isOpen && /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs17(ChatStorageProvider, { userId, children: [
+    showToggleButton && !isOpen && /* @__PURE__ */ jsx24(
       "button",
       {
         onClick: () => setIsOpen(true),
         className: "fixed z-50 rounded-full bg-primary text-primary-foreground shadow-lg hover:opacity-90 transition-all p-4",
         style: togglePosition,
         "aria-label": "Open chat",
-        children: /* @__PURE__ */ jsx22(MessageCircle, { className: "h-6 w-6" })
+        children: /* @__PURE__ */ jsx24(MessageCircle, { className: "h-6 w-6" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs14(
+    isOpen && /* @__PURE__ */ jsxs17(
       "div",
       {
         ref: containerRef,
@@ -2659,7 +2948,7 @@ function ChatWidget({
         "data-resizing": isResizing,
         style: customStyles,
         children: [
-          resizable && /* @__PURE__ */ jsx22(
+          resizable && /* @__PURE__ */ jsx24(
             "div",
             {
               onMouseDown: handleMouseDown,
@@ -2667,7 +2956,7 @@ function ChatWidget({
               "aria-label": "Resize chat widget"
             }
           ),
-          /* @__PURE__ */ jsx22("div", { className: "w-full h-full overflow-hidden", children: /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx24("div", { className: "w-full h-full overflow-hidden", children: /* @__PURE__ */ jsx24(
             ChatInterface,
             {
               id: conversationId,
@@ -2688,7 +2977,7 @@ function ChatWidget({
 var ChatWidget_default = ChatWidget;
 
 // src/hooks/use-chat-theme.ts
-import { useState as useState7, useEffect as useEffect7 } from "react";
+import { useState as useState8, useEffect as useEffect7 } from "react";
 
 // src/utils/models.ts
 var MODELS = [
@@ -2808,12 +3097,12 @@ var defaultThemeMode = "light";
 function useChatTheme() {
   const { storageKeyPrefix } = useChatStorageKey();
   const keyPrefix = storageKeyPrefix ? `chat-${storageKeyPrefix}-` : "chat-";
-  const [theme, setTheme] = useState7(defaultTheme);
-  const [conversationStarters, setConversationStarters] = useState7(defaultConversationStarters);
-  const [model, setModel] = useState7(defaultModel);
-  const [systemPrompt, setSystemPrompt] = useState7(defaultSystemPrompt);
-  const [temperature, setTemperature] = useState7(defaultTemperature);
-  const [themeMode, setThemeMode] = useState7(defaultThemeMode);
+  const [theme, setTheme] = useState8(defaultTheme);
+  const [conversationStarters, setConversationStarters] = useState8(defaultConversationStarters);
+  const [model, setModel] = useState8(defaultModel);
+  const [systemPrompt, setSystemPrompt] = useState8(defaultSystemPrompt);
+  const [temperature, setTemperature] = useState8(defaultTemperature);
+  const [themeMode, setThemeMode] = useState8(defaultThemeMode);
   useEffect7(() => {
     const savedTheme = localStorage.getItem(`${keyPrefix}theme`);
     if (savedTheme) {
@@ -3004,10 +3293,10 @@ function useChatTheme() {
 
 // src/ui/input.tsx
 import * as React3 from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var Input = React3.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx25(
       "input",
       {
         type,
@@ -3025,23 +3314,23 @@ Input.displayName = "Input";
 
 // src/ui/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { XIcon as XIcon3 } from "lucide-react";
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { XIcon as XIcon4 } from "lucide-react";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx26(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx26(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -3059,9 +3348,9 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs15(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx24(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs18(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx26(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs18(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
@@ -3072,14 +3361,14 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsxs15(
+          showCloseButton && /* @__PURE__ */ jsxs18(
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
               className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
-                /* @__PURE__ */ jsx24(XIcon3, {}),
-                /* @__PURE__ */ jsx24("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx26(XIcon4, {}),
+                /* @__PURE__ */ jsx26("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -3089,7 +3378,7 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       "data-slot": "dialog-header",
@@ -3102,7 +3391,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -3115,7 +3404,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -3136,6 +3425,11 @@ export {
   Input,
   StarterMessageItem,
   StarterMessages,
+  Tool,
+  ToolContent,
+  ToolHeader,
+  ToolInput,
+  ToolOutput,
   ChatWidget_default as default,
   fontOptions,
   useChatStorageKey,