@mordn/chat-widget 0.6.2 → 0.7.1

package/dist/index.js

@@ -43,6 +43,11 @@ __export(src_exports, {
   Input: () => Input,
   StarterMessageItem: () => StarterMessageItem,
   StarterMessages: () => StarterMessages,
+  Tool: () => Tool,
+  ToolContent: () => ToolContent,
+  ToolHeader: () => ToolHeader,
+  ToolInput: () => ToolInput,
+  ToolOutput: () => ToolOutput,
   default: () => ChatWidget_default,
   fontOptions: () => fontOptions,
   useChatStorageKey: () => useChatStorageKey,
@@ -51,7 +56,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/ChatWidget.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/ui/button.tsx
 var import_react_slot = require("@radix-ui/react-slot");
@@ -259,13 +264,22 @@ function PromptInputAttachment({
   ...props
 }) {
   const attachments = usePromptInputAttachments();
+  const isImage = data.mediaType?.startsWith("image/") && !!data.url;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "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__ */ (0, import_jsx_runtime8.jsx)(
+        isImage ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "img",
           {
             alt: data.filename || "attachment",
@@ -274,7 +288,7 @@ function PromptInputAttachment({
             src: data.url,
             width: 56
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex size-full items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.PaperclipIcon, { className: "size-4" }) }),
+        ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NonImageChip, { data }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Button,
           {
@@ -292,6 +306,34 @@ function PromptInputAttachment({
     data.id
   );
 }
+function NonImageChip({ data }) {
+  const { Icon: Icon2, label } = describeFile(data);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex size-full items-center gap-2 px-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { className: "size-5 flex-shrink-0 text-muted-foreground" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "min-w-0 flex flex-col leading-tight", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[12px] font-medium truncate", children: data.filename || "attachment" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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: import_lucide_react4.FileTextIcon, label: "PDF" };
+  if (mt.includes("spreadsheet") || mt.includes("excel") || ext === "xlsx" || ext === "xls" || ext === "csv" || ext === "tsv") {
+    return { Icon: import_lucide_react4.FileSpreadsheetIcon, label: ext.toUpperCase() || "Spreadsheet" };
+  }
+  if (mt.includes("presentation") || mt.includes("powerpoint") || ext === "pptx" || ext === "ppt") {
+    return { Icon: import_lucide_react4.PresentationIcon, label: ext.toUpperCase() || "Slides" };
+  }
+  if (mt.includes("wordprocessing") || mt.includes("msword") || ext === "docx" || ext === "doc") {
+    return { Icon: import_lucide_react4.FileTextIcon, label: ext.toUpperCase() || "Doc" };
+  }
+  if (mt.startsWith("text/") || ext === "txt" || ext === "md" || ext === "json") {
+    return { Icon: import_lucide_react4.FileTextIcon, label: ext.toUpperCase() || "Text" };
+  }
+  return { Icon: import_lucide_react4.FileIcon, label: ext.toUpperCase() || "File" };
+}
 function PromptInputAttachments({
   className,
   children,
@@ -356,10 +398,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]
   );
@@ -661,6 +711,8 @@ var PromptInputSubmit = ({
   variant = "default",
   size = "icon",
   status,
+  onStop,
+  onClick,
   children,
   ...props
 }) => {
@@ -672,13 +724,22 @@ var PromptInputSubmit = ({
   } else if (status === "error") {
     Icon2 = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.XIcon, { className: "size-4" });
   }
+  const isStopping = status === "streaming" && !!onStop;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     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
     }
@@ -688,55 +749,75 @@ var PromptInputSubmit = ({
 // src/components/message-attachments.tsx
 var import_lucide_react5 = require("lucide-react");
 var import_jsx_runtime9 = require("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: import_lucide_react5.FileTextIcon, label: "PDF" };
+  if (mt.includes("spreadsheet") || mt.includes("excel") || ext === "xlsx" || ext === "xls" || ext === "csv" || ext === "tsv") {
+    return { Icon: import_lucide_react5.FileSpreadsheetIcon, label: ext.toUpperCase() || "Spreadsheet" };
+  }
+  if (mt.includes("presentation") || mt.includes("powerpoint") || ext === "pptx" || ext === "ppt") {
+    return { Icon: import_lucide_react5.PresentationIcon, label: ext.toUpperCase() || "Slides" };
+  }
+  if (mt.includes("wordprocessing") || mt.includes("msword") || ext === "docx" || ext === "doc") {
+    return { Icon: import_lucide_react5.FileTextIcon, label: ext.toUpperCase() || "Doc" };
+  }
+  if (mt.startsWith("text/") || ext === "txt" || ext === "md" || ext === "json") {
+    return { Icon: import_lucide_react5.FileTextIcon, label: ext.toUpperCase() || "Text" };
+  }
+  return { Icon: import_lucide_react5.FileIcon, 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__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("flex flex-wrap gap-2", className), children: attachments.map((attachment, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    "div",
-    {
-      className: "group relative h-14 w-14 rounded-lg",
-      children: attachment.mediaType.startsWith("image/") ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("flex flex-wrap gap-2", className), children: attachments.map((attachment, index) => {
+    const isImage = attachment.mediaType.startsWith("image/");
+    if (isImage) {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "group relative h-14 w-14 rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "img",
         {
           src: attachment.url,
           alt: attachment.filename,
           className: "size-full rounded-lg object-cover cursor-pointer hover:opacity-80 transition-opacity",
-          onClick: () => handleAttachmentClick(attachment)
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        "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__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react5.PaperclipIcon, { className: "size-4" })
+          onClick: () => openAttachment(attachment)
         }
-      )
-    },
-    index
-  )) });
+      ) }, index);
+    }
+    const { Icon: Icon2, label } = describeFile2(attachment);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "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__ */ (0, import_jsx_runtime9.jsx)(Icon2, { className: "size-5 flex-shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "min-w-0 flex flex-col leading-tight", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[12px] font-medium truncate", children: attachment.filename }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[10px] text-muted-foreground uppercase tracking-wide", children: label })
+          ] })
+        ]
+      },
+      index
+    );
+  }) });
 }
 
 // src/components/input-plugin-popover.tsx
@@ -750,6 +831,7 @@ function useInputPlugins({ textareaRef, value, setValue, plugins }) {
   const [loading, setLoading] = (0, import_react3.useState)(false);
   const debounceRef = (0, import_react3.useRef)(null);
   const requestIdRef = (0, import_react3.useRef)(0);
+  const sessionValidatedRef = (0, import_react3.useRef)(false);
   const pluginsByTrigger = (0, import_react3.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     for (const p of plugins ?? []) {
@@ -766,9 +848,14 @@ function useInputPlugins({ textareaRef, value, setValue, plugins }) {
     return value.slice(active.triggerIndex + 1, cursor);
   }, [active, value, textareaRef]);
   (0, import_react3.useEffect)(() => {
-    if (!active) return;
-    const ta = textareaRef.current;
-    if (!ta) return;
+    if (!active) {
+      sessionValidatedRef.current = false;
+      return;
+    }
+    if (value[active.triggerIndex] === active.plugin.trigger) {
+      sessionValidatedRef.current = true;
+    }
+    if (!sessionValidatedRef.current) return;
     if (value[active.triggerIndex] !== active.plugin.trigger) {
       setActive(null);
       return;
@@ -776,7 +863,7 @@ function useInputPlugins({ textareaRef, value, setValue, plugins }) {
     if (/\s/.test(query)) {
       setActive(null);
     }
-  }, [active, value, query, textareaRef]);
+  }, [active, value, query]);
   (0, import_react3.useEffect)(() => {
     if (!active) {
       setItems([]);
@@ -784,13 +871,20 @@ function useInputPlugins({ textareaRef, value, setValue, plugins }) {
       return;
     }
     if (debounceRef.current) clearTimeout(debounceRef.current);
-    setLoading(true);
     const reqId = ++requestIdRef.current;
+    const result = active.plugin.fetch(query);
+    if (Array.isArray(result)) {
+      setItems(result);
+      setHighlight(0);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
     debounceRef.current = setTimeout(async () => {
       try {
-        const result = await active.plugin.fetch(query);
+        const items2 = await result;
         if (reqId !== requestIdRef.current) return;
-        setItems(result);
+        setItems(items2);
         setHighlight(0);
       } catch (err) {
         console.error("[input-plugin] fetch failed:", err);
@@ -871,14 +965,8 @@ function useInputPlugins({ textareaRef, value, setValue, plugins }) {
     },
     [active, items, highlight, selectItem, close, pluginsByTrigger, value]
   );
-  (0, import_react3.useEffect)(() => {
-    if (!active) return;
-    if (value[active.triggerIndex] !== active.plugin.trigger) {
-      close();
-    }
-  }, [value, active, close]);
-  const popover = active && (loading || items.length > 0 || active.plugin.emptyText) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    PluginPopover,
+  const panel = active ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    PluginPanel,
     {
       plugin: active.plugin,
       items,
@@ -888,65 +976,271 @@ function useInputPlugins({ textareaRef, value, setValue, plugins }) {
       onSelect: selectItem
     }
   ) : null;
-  return { onKeyDown, popover, isOpen: !!active };
+  return { onKeyDown, panel, isOpen: !!active };
 }
-function PluginPopover({ plugin, items, loading, highlight, onHover, onSelect }) {
+function PluginPanel({ plugin, items, loading, highlight, onHover, onSelect }) {
+  const viewportRef = (0, import_react3.useRef)(null);
+  const itemRefs = (0, import_react3.useRef)([]);
+  (0, import_react3.useEffect)(() => {
+    const btn = itemRefs.current[highlight];
+    const viewport = viewportRef.current;
+    if (!btn || !viewport) return;
+    const btnRect = btn.getBoundingClientRect();
+    const viewRect = viewport.getBoundingClientRect();
+    if (btnRect.top < viewRect.top) {
+      viewport.scrollTop -= viewRect.top - btnRect.top;
+    } else if (btnRect.bottom > viewRect.bottom) {
+      viewport.scrollTop += btnRect.bottom - viewRect.bottom;
+    }
+  }, [highlight]);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       role: "listbox",
-      className: cn(
-        "absolute bottom-full left-0 right-0 mb-2 z-30",
-        "rounded-md border border-border bg-popover text-popover-foreground shadow-md",
-        "max-h-64 overflow-y-auto"
-      ),
+      className: "rounded-t-xl bg-[hsl(var(--chat-background))] overflow-hidden mx-auto",
       onMouseDown: (e) => e.preventDefault(),
+      style: {
+        width: "96%",
+        borderTop: "1px solid var(--chat-divider)",
+        borderLeft: "1px solid var(--chat-divider)",
+        borderRight: "1px solid var(--chat-divider)",
+        // Pull down 1px so our bottom edge overlaps the form's top
+        // border, removing the visible seam between the two surfaces.
+        marginBottom: -1
+      },
+      children: [
+        plugin.heading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            className: "px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wide",
+            style: {
+              color: "hsl(var(--chat-text)/0.5)",
+              borderBottom: "1px solid var(--chat-divider)"
+            },
+            children: plugin.heading
+          }
+        ),
+        loading && items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            className: "px-3 py-2 text-[13px]",
+            style: { color: "hsl(var(--chat-text)/0.5)" },
+            children: "Loading\u2026"
+          }
+        ),
+        !loading && items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            className: "px-3 py-2 text-[13px]",
+            style: { color: "hsl(var(--chat-text)/0.5)" },
+            children: plugin.emptyText ?? "No results"
+          }
+        ),
+        items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            ref: viewportRef,
+            className: "max-h-[200px] overflow-y-auto",
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "py-1", children: items.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                "button",
+                {
+                  ref: (el) => {
+                    itemRefs.current[idx] = el;
+                  },
+                  type: "button",
+                  role: "option",
+                  "aria-selected": idx === highlight,
+                  onMouseEnter: () => onHover(idx),
+                  onClick: () => onSelect(item),
+                  className: cn(
+                    "w-full text-left px-3 py-2",
+                    "flex items-center justify-between gap-3",
+                    "transition-colors duration-150 ease-out",
+                    "cursor-pointer"
+                  ),
+                  style: {
+                    backgroundColor: idx === highlight ? "hsl(var(--chat-text)/0.06)" : "transparent"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      "span",
+                      {
+                        className: "text-[13px] truncate",
+                        style: { color: "hsl(var(--chat-text)/0.85)" },
+                        children: item.label
+                      }
+                    ),
+                    item.sublabel && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      "span",
+                      {
+                        className: "text-[11px] flex-shrink-0",
+                        style: { color: "hsl(var(--chat-text)/0.4)" },
+                        children: item.sublabel
+                      }
+                    )
+                  ]
+                }
+              ),
+              idx < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "div",
+                {
+                  className: "h-px mx-3",
+                  style: { backgroundColor: "var(--chat-divider)" }
+                }
+              )
+            ] }, item.id)) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/chat-error-banner.tsx
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function ChatErrorBanner({
+  error,
+  canRetry = true,
+  onRetry,
+  onDismiss
+}) {
+  if (!error) return null;
+  const friendly = friendlyErrorMessage(error);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "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: [
-        plugin.heading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground border-b border-border", children: plugin.heading }),
-        loading && items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: "Loading\u2026" }),
-        !loading && items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: plugin.emptyText ?? "No results" }),
-        items.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_lucide_react6.AlertTriangleIcon,
+          {
+            className: "size-4 mt-0.5 flex-shrink-0",
+            style: { color: "hsl(var(--chat-text)/0.6)" }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { color: "hsl(var(--chat-text)/0.85)" }, children: friendly }) }),
+        canRetry && onRetry && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "button",
           {
             type: "button",
-            role: "option",
-            "aria-selected": idx === highlight,
-            onMouseEnter: () => onHover(idx),
-            onClick: () => onSelect(item),
-            className: cn(
-              "w-full text-left px-3 py-2 text-sm transition-colors",
-              "flex flex-col gap-0.5",
-              idx === highlight ? "bg-accent text-accent-foreground" : "hover:bg-muted"
-            ),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-medium leading-tight", children: item.label }),
-              item.sublabel && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[11px] text-muted-foreground leading-tight", children: item.sublabel })
-            ]
-          },
-          item.id
-        ))
+            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__ */ (0, import_jsx_runtime11.jsx)(
+          "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__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react6.XIcon, { 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
+var import_react4 = require("react");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function MessageActions({
+  text,
+  onRegenerate,
+  regenerateDisabled,
+  className
+}) {
+  const [copied, setCopied] = (0, import_react4.useState)(false);
+  const handleCopy = async () => {
+    if (!text) return;
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "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__ */ (0, import_jsx_runtime12.jsx)(ActionButton, { onClick: handleCopy, ariaLabel: "Copy message", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.CheckIcon, { className: "size-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.CopyIcon, { className: "size-3.5" }) }),
+        onRegenerate && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          ActionButton,
+          {
+            onClick: onRegenerate,
+            disabled: regenerateDisabled,
+            ariaLabel: "Regenerate response",
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.RotateCcwIcon, { className: "size-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+function ActionButton({ onClick, disabled, ariaLabel, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "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
-var import_react10 = require("react");
-var import_lucide_react10 = require("lucide-react");
 var import_react11 = require("react");
-var import_react12 = require("@ai-sdk/react");
+var import_lucide_react12 = require("lucide-react");
+var import_react12 = require("react");
+var import_react13 = require("@ai-sdk/react");
 var import_ai = require("ai");
 
 // src/components/response.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_streamdown = require("streamdown");
 
 // src/hooks/use-code-scroll.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 function useCodeBlockAutoScroll(isStreaming) {
-  const observerRef = (0, import_react4.useRef)(null);
-  const containerRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const observerRef = (0, import_react5.useRef)(null);
+  const containerRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     if (!isStreaming || !containerRef.current) {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -976,11 +1270,11 @@ function useCodeBlockAutoScroll(isStreaming) {
 }
 
 // src/components/response.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Response = (0, import_react5.memo)(
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Response = (0, import_react6.memo)(
   ({ className, isStreaming = false, ...props }) => {
     const containerRef = useCodeBlockAutoScroll(isStreaming);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       import_streamdown.Streamdown,
       {
         className: cn(
@@ -997,16 +1291,16 @@ Response.displayName = "Response";
 
 // src/ui/collapsible.tsx
 var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function Collapsible({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
 }
 function CollapsibleTrigger2({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     CollapsiblePrimitive.CollapsibleTrigger,
     {
       "data-slot": "collapsible-trigger",
@@ -1017,7 +1311,7 @@ function CollapsibleTrigger2({
 function CollapsibleContent2({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     CollapsiblePrimitive.CollapsibleContent,
     {
       "data-slot": "collapsible-content",
@@ -1027,9 +1321,9 @@ function CollapsibleContent2({
 }
 
 // src/components/sources.tsx
-var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Sources = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Sources = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   Collapsible,
   {
     className: cn("not-prose mb-4 text-primary text-xs", className),
@@ -1041,25 +1335,25 @@ var SourcesTrigger = ({
   count,
   children,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   CollapsibleTrigger2,
   {
     className: cn("flex items-center gap-2", className),
     ...props,
-    children: children ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { className: "font-medium", children: [
+    children: children ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "font-medium", children: [
         "Used ",
         count,
         " sources"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.ChevronDownIcon, { className: "h-4 w-4" })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.ChevronDownIcon, { className: "h-4 w-4" })
     ] })
   }
 );
 var SourcesContent = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   CollapsibleContent2,
   {
     className: cn(
@@ -1070,7 +1364,7 @@ var SourcesContent = ({
     ...props
   }
 );
-var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   "a",
   {
     className: "flex items-center gap-2",
@@ -1078,21 +1372,21 @@ var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ (0, import
     rel: "noreferrer",
     target: "_blank",
     ...props,
-    children: children ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.BookIcon, { className: "h-4 w-4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "block font-medium", children: title })
+    children: children ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.BookIcon, { className: "h-4 w-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "block font-medium", children: title })
     ] })
   }
 );
 
 // src/components/reasoning.tsx
 var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
-var import_lucide_react7 = require("lucide-react");
-var import_react6 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var ReasoningContext = (0, import_react6.createContext)(null);
+var import_lucide_react9 = require("lucide-react");
+var import_react7 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var ReasoningContext = (0, import_react7.createContext)(null);
 var useReasoning = () => {
-  const context = (0, import_react6.useContext)(ReasoningContext);
+  const context = (0, import_react7.useContext)(ReasoningContext);
   if (!context) {
     throw new Error("Reasoning components must be used within Reasoning");
   }
@@ -1100,7 +1394,7 @@ var useReasoning = () => {
 };
 var AUTO_CLOSE_DELAY = 1e3;
 var MS_IN_S = 1e3;
-var Reasoning = (0, import_react6.memo)(
+var Reasoning = (0, import_react7.memo)(
   ({
     className,
     isStreaming = false,
@@ -1120,9 +1414,9 @@ var Reasoning = (0, import_react6.memo)(
       prop: durationProp,
       defaultProp: void 0
     });
-    const [hasAutoClosed, setHasAutoClosed] = (0, import_react6.useState)(false);
-    const [startTime, setStartTime] = (0, import_react6.useState)(null);
-    (0, import_react6.useEffect)(() => {
+    const [hasAutoClosed, setHasAutoClosed] = (0, import_react7.useState)(false);
+    const [startTime, setStartTime] = (0, import_react7.useState)(null);
+    (0, import_react7.useEffect)(() => {
       if (isStreaming) {
         if (startTime === null) {
           setStartTime(Date.now());
@@ -1132,7 +1426,7 @@ var Reasoning = (0, import_react6.memo)(
         setStartTime(null);
       }
     }, [isStreaming, startTime, setDuration]);
-    (0, import_react6.useEffect)(() => {
+    (0, import_react7.useEffect)(() => {
       if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed && durationProp !== void 0) {
         const timer = setTimeout(() => {
           setIsOpen(false);
@@ -1144,11 +1438,11 @@ var Reasoning = (0, import_react6.memo)(
     const handleOpenChange = (newOpen) => {
       setIsOpen(newOpen);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       ReasoningContext.Provider,
       {
         value: { isStreaming, isOpen, setIsOpen, duration },
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           Collapsible,
           {
             className: cn("not-prose", className),
@@ -1164,24 +1458,24 @@ var Reasoning = (0, import_react6.memo)(
 );
 var getThinkingMessage = (isStreaming, duration) => {
   if (isStreaming) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: "Thinking..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: "Thinking..." });
   }
   if (duration === void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: "Thought process" });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: "Thought process" });
   }
   if (duration === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: "Thought process" });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: "Thought process" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
     "Thought for ",
     duration,
     " seconds"
   ] });
 };
-var ReasoningTrigger = (0, import_react6.memo)(
+var ReasoningTrigger = (0, import_react7.memo)(
   ({ className, children, ...props }) => {
     const { isStreaming, isOpen, duration } = useReasoning();
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       CollapsibleTrigger2,
       {
         className: cn(
@@ -1189,11 +1483,11 @@ var ReasoningTrigger = (0, import_react6.memo)(
           className
         ),
         ...props,
-        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.BrainIcon, { className: "size-4 flex-shrink-0" }),
+        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.BrainIcon, { className: "size-4 flex-shrink-0" }),
           getThinkingMessage(isStreaming, duration),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            import_lucide_react7.ChevronDownIcon,
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            import_lucide_react9.ChevronDownIcon,
             {
               className: cn(
                 "size-4 flex-shrink-0 transition-transform ml-1",
@@ -1206,8 +1500,8 @@ var ReasoningTrigger = (0, import_react6.memo)(
     );
   }
 );
-var ReasoningContent = (0, import_react6.memo)(
-  ({ className, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+var ReasoningContent = (0, import_react7.memo)(
+  ({ className, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     CollapsibleContent2,
     {
       className: cn(
@@ -1216,7 +1510,7 @@ var ReasoningContent = (0, import_react6.memo)(
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Response, { className: "grid gap-2", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Response, { className: "grid gap-2", children })
     }
   )
 );
@@ -1225,8 +1519,8 @@ ReasoningTrigger.displayName = "ReasoningTrigger";
 ReasoningContent.displayName = "ReasoningContent";
 
 // src/components/loader.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
   "svg",
   {
     height: size,
@@ -1235,10 +1529,10 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx
     viewBox: "0 0 16 16",
     width: size,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("title", { children: "Loader" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { clipPath: "url(#clip0_2393_1490)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("title", { children: "Loader" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("g", { clipPath: "url(#clip0_2393_1490)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "path",
           {
             d: "M8 16V12",
@@ -1247,7 +1541,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "path",
           {
             d: "M3.29773 1.52783L5.64887 4.7639",
@@ -1256,7 +1550,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "path",
           {
             d: "M12.7023 1.52783L10.3511 4.7639",
@@ -1265,7 +1559,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "path",
           {
             d: "M12.7023 14.472L10.3511 11.236",
@@ -1274,7 +1568,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "path",
           {
             d: "M3.29773 14.472L5.64887 11.236",
@@ -1283,7 +1577,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "path",
           {
             d: "M15.6085 5.52783L11.8043 6.7639",
@@ -1292,7 +1586,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "path",
           {
             d: "M0.391602 10.472L4.19583 9.23598",
@@ -1301,7 +1595,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "path",
           {
             d: "M15.6085 10.4722L11.8043 9.2361",
@@ -1310,7 +1604,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "path",
           {
             d: "M0.391602 5.52783L4.19583 6.7639",
@@ -1320,11 +1614,11 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("clipPath", { id: "clip0_2393_1490", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { fill: "white", height: "16", width: "16" }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("clipPath", { id: "clip0_2393_1490", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { fill: "white", height: "16", width: "16" }) }) })
     ]
   }
 );
-var Loader = ({ className, size = 16, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+var Loader = ({ className, size = 16, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   "div",
   {
     className: cn(
@@ -1332,14 +1626,14 @@ var Loader = ({ className, size = 16, ...props }) => /* @__PURE__ */ (0, import_
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(LoaderIcon, { size })
+    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LoaderIcon, { size })
   }
 );
 
 // src/ui/badge.tsx
 var import_react_slot2 = require("@radix-ui/react-slot");
 var import_class_variance_authority3 = require("class-variance-authority");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority3.cva)(
   "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",
   {
@@ -1363,7 +1657,7 @@ function Badge({
   ...props
 }) {
   const Comp = asChild ? import_react_slot2.Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     Comp,
     {
       "data-slot": "badge",
@@ -1374,16 +1668,16 @@ function Badge({
 }
 
 // src/components/tool.tsx
-var import_lucide_react9 = require("lucide-react");
-var import_react8 = require("react");
+var import_lucide_react11 = require("lucide-react");
+var import_react9 = require("react");
 
 // src/components/code-block.tsx
-var import_lucide_react8 = require("lucide-react");
-var import_react7 = require("react");
+var import_lucide_react10 = require("lucide-react");
+var import_react8 = require("react");
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
 var import_prism = require("react-syntax-highlighter/dist/esm/styles/prism");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var CodeBlockContext = (0, import_react7.createContext)({
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var CodeBlockContext = (0, import_react8.createContext)({
   code: ""
 });
 var CodeBlock = ({
@@ -1393,7 +1687,7 @@ var CodeBlock = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CodeBlockContext.Provider, { value: { code }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CodeBlockContext.Provider, { value: { code }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   "div",
   {
     className: cn(
@@ -1401,8 +1695,8 @@ var CodeBlock = ({
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative max-h-96 overflow-y-auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative max-h-96 overflow-y-auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         import_react_syntax_highlighter.Prism,
         {
           className: "overflow-hidden dark:hidden",
@@ -1428,7 +1722,7 @@ var CodeBlock = ({
           children: code
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         import_react_syntax_highlighter.Prism,
         {
           className: "hidden overflow-hidden dark:block",
@@ -1454,36 +1748,42 @@ var CodeBlock = ({
           children: code
         }
       ),
-      children && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "absolute top-2 right-2 flex items-center gap-2", children })
+      children && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "absolute top-2 right-2 flex items-center gap-2", children })
     ] })
   }
 ) });
 
 // src/components/tool.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var Tool = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Tool = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   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__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.CircleIcon, { className: "size-4" }),
+  "input-available": /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.ClockIcon, { className: "size-4 animate-pulse" }),
+  "output-available": /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.CheckCircleIcon, { className: "size-4 text-green-600" }),
+  "output-error": /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.XCircleIcon, { className: "size-4 text-red-600" }),
+  "approval-requested": /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.ClockIcon, { className: "size-4 text-amber-600" }),
+  "approval-responded": /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.CheckCircleIcon, { className: "size-4 text-amber-600" }),
+  "output-denied": /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.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__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react9.CircleIcon, { className: "size-4" }),
-    "input-available": /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react9.ClockIcon, { className: "size-4 animate-pulse" }),
-    "output-available": /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react9.CheckCircleIcon, { className: "size-4 text-green-600" }),
-    "output-error": /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react9.XCircleIcon, { className: "size-4 text-red-600" })
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Badge, { className: "gap-1.5 rounded-full text-xs", variant: "secondary", children: [
-    icons[status],
-    labels[status]
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Badge, { className: "gap-1.5 rounded-full text-xs", variant: "secondary", children: [
+    STATUS_ICONS[status],
+    STATUS_LABELS[status]
   ] });
 };
 var ToolHeader = ({
@@ -1493,7 +1793,7 @@ var ToolHeader = ({
   toolName,
   state,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
   CollapsibleTrigger2,
   {
     className: cn(
@@ -1502,16 +1802,16 @@ var ToolHeader = ({
     ),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react9.WrenchIcon, { className: "size-4 text-muted-foreground" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "font-medium text-sm", children: title ?? toolName ?? type.split("-").slice(1).join("-") }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.WrenchIcon, { className: "size-4 text-muted-foreground" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "font-medium text-sm", children: title ?? toolName ?? type.split("-").slice(1).join("-") }),
         getStatusBadge(state)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react9.ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
     ]
   }
 );
-var ToolContent = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var ToolContent = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   CollapsibleContent2,
   {
     className: cn(
@@ -1521,9 +1821,9 @@ var ToolContent = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_ru
     ...props
   }
 );
-var ToolInput = ({ className, input, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("space-y-2 overflow-hidden p-2", className), ...props, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Parameters" }),
-  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CodeBlock, { code: JSON.stringify(input, null, 2), language: "json" }) })
+var ToolInput = ({ className, input, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("space-y-2 overflow-hidden p-2", className), ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Parameters" }),
+  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CodeBlock, { code: JSON.stringify(input, null, 2), language: "json" }) })
 ] });
 var ToolOutput = ({
   className,
@@ -1534,15 +1834,15 @@ var ToolOutput = ({
   if (!(output || errorText)) {
     return null;
   }
-  let Output = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: output });
-  if (typeof output === "object" && !(0, import_react8.isValidElement)(output)) {
-    Output = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CodeBlock, { code: JSON.stringify(output, null, 2), language: "json" });
+  let Output = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: output });
+  if (typeof output === "object" && !(0, import_react9.isValidElement)(output)) {
+    Output = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CodeBlock, { code: JSON.stringify(output, null, 2), language: "json" });
   } else if (typeof output === "string") {
-    Output = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CodeBlock, { code: output, language: "json" });
+    Output = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CodeBlock, { code: output, language: "json" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("space-y-2 p-2", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: errorText ? "Error" : "Result" }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("space-y-2 p-2", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: errorText ? "Error" : "Result" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         className: cn(
@@ -1550,7 +1850,7 @@ var ToolOutput = ({
           errorText ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground"
         ),
         children: [
-          errorText && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: errorText }),
+          errorText && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: errorText }),
           Output
         ]
       }
@@ -1559,7 +1859,7 @@ var ToolOutput = ({
 };
 
 // src/components/suggestion2.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function StarterMessages({
   className,
   prompts,
@@ -1567,7 +1867,7 @@ function StarterMessages({
   ...props
 }) {
   if (prompts.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       className: cn(
@@ -1575,8 +1875,8 @@ function StarterMessages({
         className
       ),
       ...props,
-      children: prompts.map((prompt, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      children: prompts.map((prompt, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           StarterMessageItem,
           {
             prompt,
@@ -1586,7 +1886,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__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-px mx-3", style: { backgroundColor: "var(--chat-divider)" } })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "h-px mx-3", style: { backgroundColor: "var(--chat-divider)" } })
       ] }, index))
     }
   );
@@ -1597,7 +1897,7 @@ function StarterMessageItem({
   onClick,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "button",
     {
       type: "button",
@@ -1612,17 +1912,17 @@ function StarterMessageItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[13px] text-[hsl(var(--chat-text)/0.7)]", children: prompt.title }),
-        prompt.subtitle && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "block text-[11px] text-[hsl(var(--chat-text)/0.4)] mt-0.5", children: prompt.subtitle })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-[13px] text-[hsl(var(--chat-text)/0.7)]", children: prompt.title }),
+        prompt.subtitle && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "block text-[11px] text-[hsl(var(--chat-text)/0.4)] mt-0.5", children: prompt.subtitle })
       ]
     }
   );
 }
 
 // src/contexts/chat-storage-context.tsx
-var import_react9 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var ChatStorageContext = (0, import_react9.createContext)({
+var import_react10 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var ChatStorageContext = (0, import_react10.createContext)({
   storageKeyPrefix: ""
 });
 function ChatStorageProvider({
@@ -1630,46 +1930,46 @@ function ChatStorageProvider({
   userId
 }) {
   const storageKeyPrefix = userId || "";
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChatStorageContext.Provider, { value: { storageKeyPrefix }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChatStorageContext.Provider, { value: { storageKeyPrefix }, children });
 }
 function useChatStorageKey() {
-  return (0, import_react9.useContext)(ChatStorageContext);
+  return (0, import_react10.useContext)(ChatStorageContext);
 }
 
 // src/components/interface.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("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] = (0, import_react10.useState)("");
-  const inputRef = (0, import_react10.useRef)(null);
+  const [input, setInput] = (0, import_react11.useState)("");
+  const inputRef = (0, import_react11.useRef)(null);
   const inputPlugins = useInputPlugins({
     textareaRef: inputRef,
     value: input,
     setValue: setInput,
     plugins: config?.inputPlugins
   });
-  const [showHistory, setShowHistory] = (0, import_react10.useState)(false);
-  const [conversations, setConversations] = (0, import_react10.useState)([]);
-  const [loadingHistory, setLoadingHistory] = (0, import_react10.useState)(false);
-  const [historyLoaded, setHistoryLoaded] = (0, import_react10.useState)(false);
-  const [searchQuery, setSearchQuery] = (0, import_react10.useState)("");
-  const [uploadError, setUploadError] = (0, import_react10.useState)(null);
-  (0, import_react10.useEffect)(() => {
+  const [showHistory, setShowHistory] = (0, import_react11.useState)(false);
+  const [conversations, setConversations] = (0, import_react11.useState)([]);
+  const [loadingHistory, setLoadingHistory] = (0, import_react11.useState)(false);
+  const [historyLoaded, setHistoryLoaded] = (0, import_react11.useState)(false);
+  const [searchQuery, setSearchQuery] = (0, import_react11.useState)("");
+  const [uploadError, setUploadError] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => {
     if (uploadError) {
       const timeoutId = setTimeout(() => setUploadError(null), 5e3);
       return () => clearTimeout(timeoutId);
     }
   }, [uploadError]);
-  const [tabs, setTabs] = (0, import_react10.useState)([]);
-  const [activeTabId, setActiveTabId] = (0, import_react10.useState)("");
-  const [initialTabCreated, setInitialTabCreated] = (0, import_react10.useState)(false);
-  const [isInitializing, setIsInitializing] = (0, import_react10.useState)(true);
-  const [isLoadingMessages, setIsLoadingMessages] = (0, import_react10.useState)(false);
-  const lastSyncedTabId = (0, import_react10.useRef)("");
-  const hasInitialized = (0, import_react10.useRef)(false);
-  const { messages, sendMessage, status, setMessages } = (0, import_react12.useChat)({
+  const [tabs, setTabs] = (0, import_react11.useState)([]);
+  const [activeTabId, setActiveTabId] = (0, import_react11.useState)("");
+  const [initialTabCreated, setInitialTabCreated] = (0, import_react11.useState)(false);
+  const [isInitializing, setIsInitializing] = (0, import_react11.useState)(true);
+  const [isLoadingMessages, setIsLoadingMessages] = (0, import_react11.useState)(false);
+  const lastSyncedTabId = (0, import_react11.useRef)("");
+  const hasInitialized = (0, import_react11.useRef)(false);
+  const { messages, sendMessage, status, setMessages, stop, regenerate, error, clearError } = (0, import_react13.useChat)({
     id: activeTabId || "temp-id",
     transport: new import_ai.DefaultChatTransport({
       api: "/api/chat",
@@ -1716,8 +2016,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;
           }
         });
@@ -1734,10 +2034,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;
       }
     }
@@ -1758,12 +2058,12 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
   };
   const AttachButton = () => {
     const attachments = usePromptInputAttachments();
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       PromptInputButton,
       {
         variant: "ghost",
         onClick: () => attachments.openFileDialog(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.PlusIcon, { className: "size-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.PlusIcon, { className: "size-4" })
       }
     );
   };
@@ -1786,8 +2086,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 = () => {
@@ -1802,7 +2102,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
     }
     return newTabId;
   };
-  const createNewTab = (0, import_react10.useCallback)(() => {
+  const createNewTab = (0, import_react11.useCallback)(() => {
     if (!initialTabCreated) {
       console.warn("Cannot create new tab while initializing");
       return;
@@ -1829,10 +2129,10 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
     setMessages([]);
     setInput("");
   }, [initialTabCreated]);
-  const startNewConversation = (0, import_react10.useCallback)(() => {
+  const startNewConversation = (0, import_react11.useCallback)(() => {
     createNewTab();
   }, [createNewTab]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     return () => {
     };
   }, []);
@@ -1891,23 +2191,23 @@ 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);
     }
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (showHistory && !historyLoaded && config?.userId) {
       fetchConversations();
     }
   }, [showHistory, historyLoaded, config?.userId]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!historyLoaded && config?.userId) {
       fetchConversations();
     }
   }, [historyLoaded, config?.userId]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (tabs.length > 0) {
       const timeoutId = setTimeout(() => {
         localStorage.setItem(storageKey("tabs"), JSON.stringify(tabs));
@@ -1916,7 +2216,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       return () => clearTimeout(timeoutId);
     }
   }, [tabs, activeTabId, storageKey]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (hasInitialized.current) return;
     const loadInitialTabs = () => {
       const savedTabs = localStorage.getItem(storageKey("tabs"));
@@ -1943,8 +2243,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
     }
     hasInitialized.current = true;
   }, []);
-  const hasLoadedInitialMessages = (0, import_react10.useRef)(false);
-  (0, import_react10.useEffect)(() => {
+  const hasLoadedInitialMessages = (0, import_react11.useRef)(false);
+  (0, import_react11.useEffect)(() => {
     if (hasLoadedInitialMessages.current) return;
     if (!config?.userId) return;
     if (!activeTabId) return;
@@ -1957,14 +2257,14 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       }
     })();
   }, [config?.userId, activeTabId]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (isInitializing) return;
     if (activeTabId && tabs.length > 0 && activeTabId !== lastSyncedTabId.current) {
       lastSyncedTabId.current = activeTabId;
       setInput("");
     }
   }, [activeTabId, isInitializing, tabs.length]);
-  const groupedConversations = (0, import_react10.useMemo)(() => {
+  const groupedConversations = (0, import_react11.useMemo)(() => {
     const filtered = conversations.filter(
       (conv) => searchQuery === "" || conv.title.toLowerCase().includes(searchQuery.toLowerCase())
     );
@@ -2025,22 +2325,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__ */ (0, import_jsx_runtime21.jsxs)("div", { className: index > 0 ? "mt-6" : "", children: [
-      message.role === "assistant" && sourceParts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Sources, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SourcesTrigger, { count: sourceParts.length }),
-        sourceParts.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SourcesContent, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    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__ */ (0, import_jsx_runtime23.jsxs)("div", { className: index > 0 ? "mt-6" : "", children: [
+      message.role === "assistant" && sourceParts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Sources, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SourcesTrigger, { count: sourceParts.length }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SourcesContent, { children: sourceParts.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           Source,
           {
             href: part.url,
             title: part.url
           },
-          `${message.id}-${i}`
-        ) }, `${message.id}-${i}`))
+          `${message.id}-source-${i}`
+        )) })
       ] }),
-      fileParts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn(
+      fileParts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn(
         "flex mb-1",
         message.role === "user" ? "justify-end" : "justify-start"
-      ), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      ), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         MessageAttachments,
         {
           attachments: fileParts.map((part) => ({
@@ -2051,14 +2356,14 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
           }))
         }
       ) }),
-      message.parts ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "space-y-2", children: message.parts.map((part, i) => {
+      message.parts ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime21.jsx)(import_react11.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Message, { from: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Response, { isStreaming: isTextStreaming, children: part.text }) }) }) }, `${message.id}-${i}`);
+            return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Message, { from: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(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__ */ (0, import_jsx_runtime21.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
               Reasoning,
               {
                 className: "w-full",
@@ -2066,8 +2371,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                 defaultOpen: false,
                 open: isCurrentlyStreaming ? true : void 0,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ReasoningTrigger, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ReasoningContent, { children: part.text })
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ReasoningTrigger, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ReasoningContent, { children: part.text })
                 ]
               },
               `${message.id}-${i}`
@@ -2075,8 +2380,24 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
           default:
             if (part.type.startsWith("tool-") || part.type === "dynamic-tool") {
               const toolPart = part;
-              return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Tool, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              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__ */ (0, import_jsx_runtime23.jsx)(import_react12.Fragment, { children: rendered }, `${message.id}-${i}`);
+                }
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Tool, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   ToolHeader,
                   {
                     type: part.type,
@@ -2084,9 +2405,9 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                     state: toolPart.state
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ToolContent, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolInput, { input: toolPart.input }),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolOutput, { output: toolPart.output, errorText: toolPart.errorText })
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(ToolContent, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ToolInput, { input: toolPart.input }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ToolOutput, { output: toolPart.output, errorText: toolPart.errorText })
                 ] })
               ] }, `${message.id}-${i}`);
             }
@@ -2094,7 +2415,14 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
         }
       }) }) : (
         /* Handle standard AI SDK messages with content or text property */
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react11.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Message, { from: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Response, { children: message.content || message.text }) }) }) }, `${message.id}-content`)
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Message, { from: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Response, { children: message.content || message.text }) }) }) }, `${message.id}-content`)
+      ),
+      showActions && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        MessageActions,
+        {
+          text: messageText,
+          onRegenerate: showRegenerate && regenerate ? () => regenerate() : void 0
+        }
       )
     ] }, message.id);
   });
@@ -2122,12 +2450,12 @@ 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 = (0, import_react10.useRef)(null);
-  (0, import_react10.useEffect)(() => {
+  const dropdownRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setShowHistory(false);
@@ -2140,7 +2468,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [showHistory]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       className: cn(
@@ -2148,11 +2476,11 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
         themeMode === "dark" && "dark"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 border-b backdrop-blur-sm relative z-20", style: {
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("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__ */ (0, import_jsx_runtime21.jsx)("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__ */ (0, import_jsx_runtime21.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime23.jsxs)(
             "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",
@@ -2175,8 +2503,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                 switchToTab(tab.id);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate max-w-28 text-[13px] font-medium transition-colors", children: tab.title }),
-                tabs.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate max-w-28 text-[13px] font-medium transition-colors", children: tab.title }),
+                tabs.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "button",
                   {
                     onClick: (e) => {
@@ -2195,15 +2523,15 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                       e.currentTarget.style.opacity = tab.isActive ? "0.6" : "0";
                       e.currentTarget.style.backgroundColor = "transparent";
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.XIcon, { className: "h-3 w-3", strokeWidth: 2.5 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.XIcon, { className: "h-3 w-3", strokeWidth: 2.5 })
                   }
                 )
               ]
             },
             tab.id
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "button",
               {
                 onClick: createNewTab,
@@ -2220,11 +2548,11 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                   e.currentTarget.style.backgroundColor = "transparent";
                 },
                 title: "New Chat",
-                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.PlusIcon, { className: "h-4 w-4", strokeWidth: 2 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.PlusIcon, { className: "h-4 w-4", strokeWidth: 2 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 "button",
                 {
                   onClick: () => setShowHistory(!showHistory),
@@ -2246,17 +2574,17 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                     }
                   },
                   title: "Chat History",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.HistoryIcon, { className: "h-4 w-4", strokeWidth: 2 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.HistoryIcon, { className: "h-4 w-4", strokeWidth: 2 })
                 }
               ),
-              showHistory && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("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__ */ (0, import_jsx_runtime23.jsxs)("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__ */ (0, import_jsx_runtime21.jsx)("div", { className: "p-2.5 border-b", style: {
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "p-2.5 border-b", style: {
                   borderColor: "var(--chat-divider)",
                   backgroundColor: "var(--chat-overlay)"
-                }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "input",
                   {
                     type: "text",
@@ -2271,25 +2599,25 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                     }
                   }
                 ) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "max-h-[300px] overflow-y-auto ai-assistant-scrollbar", children: loadingHistory ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-[13px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Loading..." }) }) : conversations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "max-h-[300px] overflow-y-auto ai-assistant-scrollbar", children: loadingHistory ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-[13px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Loading..." }) }) : conversations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
                     backgroundColor: "hsl(var(--chat-surface))"
-                  }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.MessageSquareIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Conversations" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-[12px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Start a new chat to begin" })
-                ] }) : groupedConversations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
+                  }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.MessageSquareIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Conversations" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[12px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Start a new chat to begin" })
+                ] }) : groupedConversations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
                     backgroundColor: "hsl(var(--chat-surface))"
-                  }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.SearchIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Results" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-[12px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Try a different search" })
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "py-0.5", children: groupedConversations.map(([groupName, groupConversations]) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "mb-0.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "px-2.5 py-1 sticky top-0 backdrop-blur-sm z-10", style: {
+                  }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.SearchIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Results" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[12px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Try a different search" })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "py-0.5", children: groupedConversations.map(([groupName, groupConversations]) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "mb-0.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-2.5 py-1 sticky top-0 backdrop-blur-sm z-10", style: {
                     backgroundColor: "var(--chat-header-bg-strong)"
-                  }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "text-[10px] font-semibold uppercase tracking-wide", style: { color: "hsl(var(--chat-text-muted))" }, children: groupName }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "px-1 space-y-0.5", children: groupConversations.map((conversation) => {
+                  }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "text-[10px] font-semibold uppercase tracking-wide", style: { color: "hsl(var(--chat-text-muted))" }, children: groupName }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-1 space-y-0.5", children: groupConversations.map((conversation) => {
                     const isActiveConversation = activeTabId === conversation.id;
-                    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                       "button",
                       {
                         className: "w-full px-2 py-1 rounded-md transition-all duration-150 text-left group relative",
@@ -2307,13 +2635,13 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                           }
                         },
                         onClick: () => handleSelectConversation(conversation.id, conversation.title),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-[12px] line-clamp-1 transition-colors leading-tight", style: {
+                        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime21.jsx)(
-                            import_lucide_react10.ChevronRightIcon,
+                          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                            import_lucide_react12.ChevronRightIcon,
                             {
                               className: "h-3 w-3 transition-all duration-150 flex-shrink-0",
                               style: {
@@ -2332,7 +2660,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
               ] })
             ] }),
             headerActions,
-            onClose && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            onClose && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "button",
               {
                 onClick: onClose,
@@ -2349,21 +2677,21 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                   e.currentTarget.style.backgroundColor = "transparent";
                 },
                 title: "Close Chat",
-                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.XIcon, { className: "h-4 w-4", strokeWidth: 2 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.XIcon, { className: "h-4 w-4", strokeWidth: 2 })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Conversation, { className: "flex-1 max-w-full ai-assistant-scrollbar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ConversationContent, { className: "max-w-[96%] mx-auto py-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Conversation, { className: "flex-1 max-w-full ai-assistant-scrollbar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(ConversationContent, { className: "max-w-[96%] mx-auto py-6", children: [
             renderMessages(),
-            status === "submitted" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mt-6", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Message, { from: "assistant", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader, { size: 16 }) }) }) })
+            status === "submitted" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-6", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Message, { from: "assistant", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Loader, { size: 16 }) }) }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ConversationScrollButton, {})
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ConversationScrollButton, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "px-5 pb-5", children: [
-          uploadError && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center justify-center py-8", role: "status", "aria-label": "Loading conversation", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "px-5 pb-5", children: [
+          uploadError && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-center py-8", role: "status", "aria-label": "Loading conversation", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime23.jsx)(
             StarterMessages,
             {
               prompts: config.starterPrompts,
@@ -2372,27 +2700,67 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(PromptInput, { onSubmit: handleSubmit, globalDrop: true, multiple: true, accept: "image/*", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(PromptInputBody, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PromptInputAttachment, { data: attachment }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                  PromptInputTextarea,
-                  {
-                    ref: inputRef,
-                    onChange: (e) => setInput(e.target.value),
-                    onKeyDown: inputPlugins.onKeyDown,
-                    value: input
-                  }
-                ),
-                inputPlugins.popover
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(PromptInputToolbar, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PromptInputTools, { children: config?.features?.fileUpload === true && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AttachButton, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PromptInputSubmit, { disabled: !input, status })
-            ] })
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            ChatErrorBanner,
+            {
+              error: error ?? null,
+              canRetry: messages.some((m) => m.role === "user"),
+              onRetry: () => {
+                clearError?.();
+                regenerate?.();
+              },
+              onDismiss: clearError
+            }
+          ),
+          inputPlugins.panel,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            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.");
+                }
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(PromptInputBody, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PromptInputAttachment, { data: attachment }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    PromptInputTextarea,
+                    {
+                      ref: inputRef,
+                      onChange: (e) => setInput(e.target.value),
+                      onKeyDown: inputPlugins.onKeyDown,
+                      value: input
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(PromptInputToolbar, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PromptInputTools, { children: config?.features?.fileUpload === true && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AttachButton, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    PromptInputSubmit,
+                    {
+                      disabled: status === "streaming" || status === "submitted" ? false : !input,
+                      status,
+                      onStop: stop
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
         ] })
       ]
     }
@@ -2400,7 +2768,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
 }
 
 // src/ChatWidget.tsx
-var import_lucide_react11 = require("lucide-react");
+var import_lucide_react13 = require("lucide-react");
 
 // src/utils/color.ts
 function toHslTripletIfHex(value) {
@@ -2438,7 +2806,7 @@ function toHslTripletIfHex(value) {
 }
 
 // src/ChatWidget.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function ChatWidget({
   userId,
   conversationId,
@@ -2455,14 +2823,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] = (0, import_react13.useState)(
+  const [internalIsOpen, setInternalIsOpen] = (0, import_react14.useState)(
     layout !== "popup" ? true : display?.defaultOpen || false
   );
   const isOpen = isControlled ? open : internalIsOpen;
@@ -2473,9 +2842,9 @@ function ChatWidget({
       setInternalIsOpen(next);
     }
   };
-  const [isResizing, setIsResizing] = (0, import_react13.useState)(false);
-  const containerRef = (0, import_react13.useRef)(null);
-  const customStyles = (0, import_react13.useMemo)(() => {
+  const [isResizing, setIsResizing] = (0, import_react14.useState)(false);
+  const containerRef = (0, import_react14.useRef)(null);
+  const customStyles = (0, import_react14.useMemo)(() => {
     const styles = {};
     if (display?.width) {
       styles["--chat-widget-width"] = display.width;
@@ -2494,14 +2863,14 @@ function ChatWidget({
     }
     return styles;
   }, [display?.width, theme?.primaryColor, theme?.backgroundColor, theme?.textColor, theme?.tokens]);
-  const handleMouseDown = (0, import_react13.useCallback)((e) => {
+  const handleMouseDown = (0, import_react14.useCallback)((e) => {
     if (!resizable) return;
     e.preventDefault();
     setIsResizing(true);
     document.body.style.cursor = "ew-resize";
     document.body.style.userSelect = "none";
   }, [resizable]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!isResizing) return;
     const handleMouseMove = (e) => {
       if (!containerRef.current) return;
@@ -2523,7 +2892,7 @@ function ChatWidget({
       document.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isResizing]);
-  const config = (0, import_react13.useMemo)(() => ({
+  const config = (0, import_react14.useMemo)(() => ({
     userId,
     model,
     systemPrompt,
@@ -2531,18 +2900,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__ */ (0, import_jsx_runtime22.jsx)(ChatStorageProvider, { userId, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChatStorageProvider, { userId, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
         ref: containerRef,
         className: `chat-widget-container chat-widget-inline chat-widget-content ${themeClass} ${className || ""}`,
         style: customStyles,
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           ChatInterface,
           {
             id: conversationId,
@@ -2556,13 +2926,13 @@ function ChatWidget({
     ) });
   }
   if (layout === "page") {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChatStorageProvider, { userId, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChatStorageProvider, { userId, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
         ref: containerRef,
         className: `chat-widget-container chat-widget-page chat-widget-content ${themeClass} ${className || ""}`,
         style: customStyles,
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           ChatInterface,
           {
             id: conversationId,
@@ -2575,18 +2945,18 @@ function ChatWidget({
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ChatStorageProvider, { userId, children: [
-    showToggleButton && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ChatStorageProvider, { userId, children: [
+    showToggleButton && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "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__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react11.MessageCircle, { className: "h-6 w-6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.MessageCircle, { className: "h-6 w-6" })
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "div",
       {
         ref: containerRef,
@@ -2595,7 +2965,7 @@ function ChatWidget({
         "data-resizing": isResizing,
         style: customStyles,
         children: [
-          resizable && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          resizable && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "div",
             {
               onMouseDown: handleMouseDown,
@@ -2603,7 +2973,7 @@ function ChatWidget({
               "aria-label": "Resize chat widget"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-full h-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-full h-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             ChatInterface,
             {
               id: conversationId,
@@ -2624,7 +2994,7 @@ function ChatWidget({
 var ChatWidget_default = ChatWidget;
 
 // src/hooks/use-chat-theme.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/utils/models.ts
 var MODELS = [
@@ -2744,13 +3114,13 @@ var defaultThemeMode = "light";
 function useChatTheme() {
   const { storageKeyPrefix } = useChatStorageKey();
   const keyPrefix = storageKeyPrefix ? `chat-${storageKeyPrefix}-` : "chat-";
-  const [theme, setTheme] = (0, import_react14.useState)(defaultTheme);
-  const [conversationStarters, setConversationStarters] = (0, import_react14.useState)(defaultConversationStarters);
-  const [model, setModel] = (0, import_react14.useState)(defaultModel);
-  const [systemPrompt, setSystemPrompt] = (0, import_react14.useState)(defaultSystemPrompt);
-  const [temperature, setTemperature] = (0, import_react14.useState)(defaultTemperature);
-  const [themeMode, setThemeMode] = (0, import_react14.useState)(defaultThemeMode);
-  (0, import_react14.useEffect)(() => {
+  const [theme, setTheme] = (0, import_react15.useState)(defaultTheme);
+  const [conversationStarters, setConversationStarters] = (0, import_react15.useState)(defaultConversationStarters);
+  const [model, setModel] = (0, import_react15.useState)(defaultModel);
+  const [systemPrompt, setSystemPrompt] = (0, import_react15.useState)(defaultSystemPrompt);
+  const [temperature, setTemperature] = (0, import_react15.useState)(defaultTemperature);
+  const [themeMode, setThemeMode] = (0, import_react15.useState)(defaultThemeMode);
+  (0, import_react15.useEffect)(() => {
     const savedTheme = localStorage.getItem(`${keyPrefix}theme`);
     if (savedTheme) {
       try {
@@ -2838,7 +3208,7 @@ function useChatTheme() {
       window.removeEventListener("chat-theme-mode-change", handleThemeModeChange);
     };
   }, [keyPrefix]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     localStorage.setItem(`${keyPrefix}theme`, JSON.stringify(theme));
     const root = document.documentElement;
     if (themeMode === "light") {
@@ -2854,23 +3224,23 @@ function useChatTheme() {
     root.style.setProperty("--chat-font-size", `${theme.fontSize}px`);
     window.dispatchEvent(new CustomEvent("chat-theme-change", { detail: theme }));
   }, [theme, themeMode, keyPrefix]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     localStorage.setItem(`${keyPrefix}conversation-starters`, JSON.stringify(conversationStarters));
     window.dispatchEvent(new CustomEvent("chat-starters-change", { detail: conversationStarters }));
   }, [conversationStarters, keyPrefix]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     localStorage.setItem(`${keyPrefix}model`, model);
     window.dispatchEvent(new CustomEvent("chat-model-change", { detail: model }));
   }, [model, keyPrefix]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     localStorage.setItem(`${keyPrefix}system-prompt`, systemPrompt);
     window.dispatchEvent(new CustomEvent("chat-system-prompt-change", { detail: systemPrompt }));
   }, [systemPrompt, keyPrefix]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     localStorage.setItem(`${keyPrefix}temperature`, temperature.toString());
     window.dispatchEvent(new CustomEvent("chat-temperature-change", { detail: temperature }));
   }, [temperature, keyPrefix]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     localStorage.setItem(`${keyPrefix}theme-mode`, themeMode);
     window.dispatchEvent(new CustomEvent("chat-theme-mode-change", { detail: themeMode }));
   }, [themeMode, keyPrefix]);
@@ -2940,10 +3310,10 @@ function useChatTheme() {
 
 // src/ui/input.tsx
 var React3 = __toESM(require("react"));
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Input = React3.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "input",
       {
         type,
@@ -2961,23 +3331,23 @@ Input.displayName = "Input";
 
 // src/ui/dialog.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
-var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -2995,9 +3365,9 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
@@ -3008,14 +3378,14 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             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__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.XIcon, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.XIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -3025,7 +3395,7 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       "data-slot": "dialog-header",
@@ -3038,7 +3408,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -3051,7 +3421,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -3073,6 +3443,11 @@ function DialogDescription({
   Input,
   StarterMessageItem,
   StarterMessages,
+  Tool,
+  ToolContent,
+  ToolHeader,
+  ToolInput,
+  ToolOutput,
   fontOptions,
   useChatStorageKey,
   useChatTheme