@mordn/chat-widget 0.5.1 → 0.6.0

package/dist/index.js

@@ -51,7 +51,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/ChatWidget.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/ui/button.tsx
 var import_react_slot = require("@radix-ui/react-slot");
@@ -238,7 +238,7 @@ function Textarea({ className, ...props }) {
 // src/components/prompt-input.tsx
 var import_lucide_react4 = require("lucide-react");
 var import_nanoid = require("nanoid");
-var import_react2 = require("react");
+var import_react2 = __toESM(require("react"));
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var AttachmentsContext = (0, import_react2.createContext)(null);
 var usePromptInputAttachments = () => {
@@ -539,14 +539,17 @@ var PromptInputBody = ({
   className,
   ...props
 }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn(className, "flex flex-col"), ...props });
-var PromptInputTextarea = ({
+var PromptInputTextarea = import_react2.default.forwardRef(({
   onChange,
+  onKeyDown: externalOnKeyDown,
   className,
   placeholder = "What would you like to know?",
   ...props
-}) => {
+}, ref) => {
   const attachments = usePromptInputAttachments();
   const handleKeyDown = (e) => {
+    externalOnKeyDown?.(e);
+    if (e.defaultPrevented) return;
     if (e.key === "Enter") {
       if (e.nativeEvent.isComposing) {
         return;
@@ -583,6 +586,7 @@ var PromptInputTextarea = ({
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Textarea,
     {
+      ref,
       className: cn(
         "w-full resize-none rounded-none border-none p-3 shadow-none outline-none ring-0",
         "field-sizing-content",
@@ -600,7 +604,8 @@ var PromptInputTextarea = ({
       ...props
     }
   );
-};
+});
+PromptInputTextarea.displayName = "PromptInputTextarea";
 var PromptInputToolbar = ({
   className,
   ...props
@@ -731,23 +736,214 @@ function MessageAttachments({ attachments, className }) {
   )) });
 }
 
+// src/components/input-plugin-popover.tsx
+var import_react3 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var FETCH_DEBOUNCE_MS = 120;
+function useInputPlugins({ textareaRef, value, setValue, plugins }) {
+  const [active, setActive] = (0, import_react3.useState)(null);
+  const [items, setItems] = (0, import_react3.useState)([]);
+  const [highlight, setHighlight] = (0, import_react3.useState)(0);
+  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const debounceRef = (0, import_react3.useRef)(null);
+  const requestIdRef = (0, import_react3.useRef)(0);
+  const pluginsByTrigger = (0, import_react3.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const p of plugins ?? []) {
+      if (p.trigger.length === 1) map.set(p.trigger, p);
+    }
+    return map;
+  }, [plugins]);
+  const query = (0, import_react3.useMemo)(() => {
+    if (!active) return "";
+    const ta = textareaRef.current;
+    if (!ta) return "";
+    const cursor = ta.selectionEnd ?? value.length;
+    if (cursor <= active.triggerIndex) return "";
+    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 (value[active.triggerIndex] !== active.plugin.trigger) {
+      setActive(null);
+      return;
+    }
+    if (/\s/.test(query)) {
+      setActive(null);
+    }
+  }, [active, value, query, textareaRef]);
+  (0, import_react3.useEffect)(() => {
+    if (!active) {
+      setItems([]);
+      setLoading(false);
+      return;
+    }
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    setLoading(true);
+    const reqId = ++requestIdRef.current;
+    debounceRef.current = setTimeout(async () => {
+      try {
+        const result = await active.plugin.fetch(query);
+        if (reqId !== requestIdRef.current) return;
+        setItems(result);
+        setHighlight(0);
+      } catch (err) {
+        console.error("[input-plugin] fetch failed:", err);
+        if (reqId !== requestIdRef.current) return;
+        setItems([]);
+      } finally {
+        if (reqId === requestIdRef.current) setLoading(false);
+      }
+    }, FETCH_DEBOUNCE_MS);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [active, query]);
+  const close = (0, import_react3.useCallback)(() => {
+    setActive(null);
+    setItems([]);
+    setHighlight(0);
+  }, []);
+  const selectItem = (0, import_react3.useCallback)(
+    (item) => {
+      if (!active) return;
+      const ta = textareaRef.current;
+      const cursor = ta?.selectionEnd ?? value.length;
+      const replacement = active.plugin.onSelect(item);
+      const before = value.slice(0, active.triggerIndex);
+      const after = value.slice(cursor);
+      const next = `${before}${replacement}${after}`;
+      setValue(next);
+      const newCursor = before.length + replacement.length;
+      setTimeout(() => {
+        const t = textareaRef.current;
+        if (!t) return;
+        t.focus();
+        try {
+          t.setSelectionRange(newCursor, newCursor);
+        } catch {
+        }
+      }, 0);
+      close();
+    },
+    [active, value, setValue, close, textareaRef]
+  );
+  const onKeyDown = (0, import_react3.useCallback)(
+    (e) => {
+      if (active) {
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setHighlight((h) => items.length === 0 ? 0 : (h + 1) % items.length);
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setHighlight((h) => items.length === 0 ? 0 : (h - 1 + items.length) % items.length);
+          return;
+        }
+        if (e.key === "Enter") {
+          if (items.length > 0) {
+            e.preventDefault();
+            selectItem(items[highlight]);
+          }
+          return;
+        }
+        if (e.key === "Escape") {
+          e.preventDefault();
+          close();
+          return;
+        }
+      }
+      if (e.key.length === 1 && pluginsByTrigger.has(e.key) && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        const ta = e.currentTarget;
+        const cursor = ta.selectionStart ?? value.length;
+        const prevChar = cursor > 0 ? value[cursor - 1] : "";
+        if (cursor === 0 || /\s/.test(prevChar)) {
+          const plugin = pluginsByTrigger.get(e.key);
+          setActive({ plugin, triggerIndex: cursor });
+        }
+      }
+    },
+    [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,
+    {
+      plugin: active.plugin,
+      items,
+      loading,
+      highlight,
+      onHover: setHighlight,
+      onSelect: selectItem
+    }
+  ) : null;
+  return { onKeyDown, popover, isOpen: !!active };
+}
+function PluginPopover({ plugin, items, loading, highlight, onHover, onSelect }) {
+  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"
+      ),
+      onMouseDown: (e) => e.preventDefault(),
+      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)(
+          "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
+        ))
+      ]
+    }
+  );
+}
+
 // src/components/interface.tsx
-var import_react9 = require("react");
-var import_lucide_react10 = require("lucide-react");
 var import_react10 = require("react");
-var import_react11 = require("@ai-sdk/react");
+var import_lucide_react10 = require("lucide-react");
+var import_react11 = require("react");
+var import_react12 = require("@ai-sdk/react");
 var import_ai = require("ai");
 
 // src/components/response.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_streamdown = require("streamdown");
 
 // src/hooks/use-code-scroll.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 function useCodeBlockAutoScroll(isStreaming) {
-  const observerRef = (0, import_react3.useRef)(null);
-  const containerRef = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
+  const observerRef = (0, import_react4.useRef)(null);
+  const containerRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
     if (!isStreaming || !containerRef.current) {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -777,11 +973,11 @@ function useCodeBlockAutoScroll(isStreaming) {
 }
 
 // src/components/response.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Response = (0, import_react4.memo)(
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Response = (0, import_react5.memo)(
   ({ className, isStreaming = false, ...props }) => {
     const containerRef = useCodeBlockAutoScroll(isStreaming);
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_streamdown.Streamdown,
       {
         className: cn(
@@ -798,16 +994,16 @@ Response.displayName = "Response";
 
 // src/ui/collapsible.tsx
 var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function Collapsible({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
 }
 function CollapsibleTrigger2({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     CollapsiblePrimitive.CollapsibleTrigger,
     {
       "data-slot": "collapsible-trigger",
@@ -818,7 +1014,7 @@ function CollapsibleTrigger2({
 function CollapsibleContent2({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     CollapsiblePrimitive.CollapsibleContent,
     {
       "data-slot": "collapsible-content",
@@ -829,8 +1025,8 @@ function CollapsibleContent2({
 
 // src/components/sources.tsx
 var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Sources = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Sources = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
   Collapsible,
   {
     className: cn("not-prose mb-4 text-primary text-xs", className),
@@ -842,25 +1038,25 @@ var SourcesTrigger = ({
   count,
   children,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
   CollapsibleTrigger2,
   {
     className: cn("flex items-center gap-2", className),
     ...props,
-    children: children ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "font-medium", children: [
+    children: children ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { className: "font-medium", children: [
         "Used ",
         count,
         " sources"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.ChevronDownIcon, { className: "h-4 w-4" })
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.ChevronDownIcon, { className: "h-4 w-4" })
     ] })
   }
 );
 var SourcesContent = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
   CollapsibleContent2,
   {
     className: cn(
@@ -871,7 +1067,7 @@ var SourcesContent = ({
     ...props
   }
 );
-var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
   "a",
   {
     className: "flex items-center gap-2",
@@ -879,9 +1075,9 @@ var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ (0, import
     rel: "noreferrer",
     target: "_blank",
     ...props,
-    children: children ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.BookIcon, { className: "h-4 w-4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "block font-medium", children: title })
+    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 })
     ] })
   }
 );
@@ -889,11 +1085,11 @@ var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ (0, import
 // 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_react5 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var ReasoningContext = (0, import_react5.createContext)(null);
+var import_react6 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ReasoningContext = (0, import_react6.createContext)(null);
 var useReasoning = () => {
-  const context = (0, import_react5.useContext)(ReasoningContext);
+  const context = (0, import_react6.useContext)(ReasoningContext);
   if (!context) {
     throw new Error("Reasoning components must be used within Reasoning");
   }
@@ -901,7 +1097,7 @@ var useReasoning = () => {
 };
 var AUTO_CLOSE_DELAY = 1e3;
 var MS_IN_S = 1e3;
-var Reasoning = (0, import_react5.memo)(
+var Reasoning = (0, import_react6.memo)(
   ({
     className,
     isStreaming = false,
@@ -921,9 +1117,9 @@ var Reasoning = (0, import_react5.memo)(
       prop: durationProp,
       defaultProp: void 0
     });
-    const [hasAutoClosed, setHasAutoClosed] = (0, import_react5.useState)(false);
-    const [startTime, setStartTime] = (0, import_react5.useState)(null);
-    (0, import_react5.useEffect)(() => {
+    const [hasAutoClosed, setHasAutoClosed] = (0, import_react6.useState)(false);
+    const [startTime, setStartTime] = (0, import_react6.useState)(null);
+    (0, import_react6.useEffect)(() => {
       if (isStreaming) {
         if (startTime === null) {
           setStartTime(Date.now());
@@ -933,7 +1129,7 @@ var Reasoning = (0, import_react5.memo)(
         setStartTime(null);
       }
     }, [isStreaming, startTime, setDuration]);
-    (0, import_react5.useEffect)(() => {
+    (0, import_react6.useEffect)(() => {
       if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed && durationProp !== void 0) {
         const timer = setTimeout(() => {
           setIsOpen(false);
@@ -945,11 +1141,11 @@ var Reasoning = (0, import_react5.memo)(
     const handleOpenChange = (newOpen) => {
       setIsOpen(newOpen);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       ReasoningContext.Provider,
       {
         value: { isStreaming, isOpen, setIsOpen, duration },
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Collapsible,
           {
             className: cn("not-prose", className),
@@ -965,24 +1161,24 @@ var Reasoning = (0, import_react5.memo)(
 );
 var getThinkingMessage = (isStreaming, duration) => {
   if (isStreaming) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: "Thinking..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: "Thinking..." });
   }
   if (duration === void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: "Thought process" });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: "Thought process" });
   }
   if (duration === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: "Thought process" });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: "Thought process" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
     "Thought for ",
     duration,
     " seconds"
   ] });
 };
-var ReasoningTrigger = (0, import_react5.memo)(
+var ReasoningTrigger = (0, import_react6.memo)(
   ({ className, children, ...props }) => {
     const { isStreaming, isOpen, duration } = useReasoning();
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       CollapsibleTrigger2,
       {
         className: cn(
@@ -990,10 +1186,10 @@ var ReasoningTrigger = (0, import_react5.memo)(
           className
         ),
         ...props,
-        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.BrainIcon, { className: "size-4 flex-shrink-0" }),
+        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" }),
           getThinkingMessage(isStreaming, duration),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             import_lucide_react7.ChevronDownIcon,
             {
               className: cn(
@@ -1007,8 +1203,8 @@ var ReasoningTrigger = (0, import_react5.memo)(
     );
   }
 );
-var ReasoningContent = (0, import_react5.memo)(
-  ({ className, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var ReasoningContent = (0, import_react6.memo)(
+  ({ className, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     CollapsibleContent2,
     {
       className: cn(
@@ -1017,7 +1213,7 @@ var ReasoningContent = (0, import_react5.memo)(
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Response, { className: "grid gap-2", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Response, { className: "grid gap-2", children })
     }
   )
 );
@@ -1026,8 +1222,8 @@ ReasoningTrigger.displayName = "ReasoningTrigger";
 ReasoningContent.displayName = "ReasoningContent";
 
 // src/components/loader.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
   "svg",
   {
     height: size,
@@ -1036,10 +1232,10 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx
     viewBox: "0 0 16 16",
     width: size,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("title", { children: "Loader" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("g", { clipPath: "url(#clip0_2393_1490)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      /* @__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)(
           "path",
           {
             d: "M8 16V12",
@@ -1048,7 +1244,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "path",
           {
             d: "M3.29773 1.52783L5.64887 4.7639",
@@ -1057,7 +1253,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "path",
           {
             d: "M12.7023 1.52783L10.3511 4.7639",
@@ -1066,7 +1262,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "path",
           {
             d: "M12.7023 14.472L10.3511 11.236",
@@ -1075,7 +1271,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "path",
           {
             d: "M3.29773 14.472L5.64887 11.236",
@@ -1084,7 +1280,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "path",
           {
             d: "M15.6085 5.52783L11.8043 6.7639",
@@ -1093,7 +1289,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "path",
           {
             d: "M0.391602 10.472L4.19583 9.23598",
@@ -1102,7 +1298,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "path",
           {
             d: "M15.6085 10.4722L11.8043 9.2361",
@@ -1111,7 +1307,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "path",
           {
             d: "M0.391602 5.52783L4.19583 6.7639",
@@ -1121,11 +1317,11 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("clipPath", { id: "clip0_2393_1490", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("rect", { fill: "white", height: "16", width: "16" }) }) })
+      /* @__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" }) }) })
     ]
   }
 );
-var Loader = ({ className, size = 16, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+var Loader = ({ className, size = 16, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   "div",
   {
     className: cn(
@@ -1133,14 +1329,14 @@ var Loader = ({ className, size = 16, ...props }) => /* @__PURE__ */ (0, import_
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LoaderIcon, { size })
+    children: /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = 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",
   {
@@ -1164,7 +1360,7 @@ function Badge({
   ...props
 }) {
   const Comp = asChild ? import_react_slot2.Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     Comp,
     {
       "data-slot": "badge",
@@ -1176,15 +1372,15 @@ function Badge({
 
 // src/components/tool.tsx
 var import_lucide_react9 = require("lucide-react");
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/code-block.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_react6 = require("react");
+var import_react7 = 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_runtime16 = require("react/jsx-runtime");
-var CodeBlockContext = (0, import_react6.createContext)({
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var CodeBlockContext = (0, import_react7.createContext)({
   code: ""
 });
 var CodeBlock = ({
@@ -1194,7 +1390,7 @@ var CodeBlock = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CodeBlockContext.Provider, { value: { code }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CodeBlockContext.Provider, { value: { code }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   "div",
   {
     className: cn(
@@ -1202,8 +1398,8 @@ var CodeBlock = ({
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative max-h-96 overflow-y-auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative max-h-96 overflow-y-auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         import_react_syntax_highlighter.Prism,
         {
           className: "overflow-hidden dark:hidden",
@@ -1229,7 +1425,7 @@ var CodeBlock = ({
           children: code
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         import_react_syntax_highlighter.Prism,
         {
           className: "hidden overflow-hidden dark:block",
@@ -1255,14 +1451,14 @@ var CodeBlock = ({
           children: code
         }
       ),
-      children && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute top-2 right-2 flex items-center gap-2", children })
+      children && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "absolute top-2 right-2 flex items-center gap-2", children })
     ] })
   }
 ) });
 
 // src/components/tool.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Tool = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Tool = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   Collapsible,
   {
     className: cn("not-prose w-full rounded-md border border-[var(--chat-divider)]", className),
@@ -1277,12 +1473,12 @@ var getStatusBadge = (status) => {
     "output-error": "Error"
   };
   const icons = {
-    "input-streaming": /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.CircleIcon, { className: "size-4" }),
-    "input-available": /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.ClockIcon, { className: "size-4 animate-pulse" }),
-    "output-available": /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.CheckCircleIcon, { className: "size-4 text-green-600" }),
-    "output-error": /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.XCircleIcon, { className: "size-4 text-red-600" })
+    "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_runtime17.jsxs)(Badge, { className: "gap-1.5 rounded-full text-xs", variant: "secondary", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Badge, { className: "gap-1.5 rounded-full text-xs", variant: "secondary", children: [
     icons[status],
     labels[status]
   ] });
@@ -1294,7 +1490,7 @@ var ToolHeader = ({
   toolName,
   state,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
   CollapsibleTrigger2,
   {
     className: cn(
@@ -1303,16 +1499,16 @@ var ToolHeader = ({
     ),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.WrenchIcon, { className: "size-4 text-muted-foreground" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "font-medium text-sm", children: title ?? toolName ?? type.split("-").slice(1).join("-") }),
+      /* @__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("-") }),
         getStatusBadge(state)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react9.ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
     ]
   }
 );
-var ToolContent = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var ToolContent = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   CollapsibleContent2,
   {
     className: cn(
@@ -1322,9 +1518,9 @@ var ToolContent = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_ru
     ...props
   }
 );
-var ToolInput = ({ className, input, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("space-y-2 overflow-hidden p-2", className), ...props, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Parameters" }),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CodeBlock, { code: JSON.stringify(input, null, 2), language: "json" }) })
+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 ToolOutput = ({
   className,
@@ -1335,15 +1531,15 @@ var ToolOutput = ({
   if (!(output || errorText)) {
     return null;
   }
-  let Output = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: output });
-  if (typeof output === "object" && !(0, import_react7.isValidElement)(output)) {
-    Output = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CodeBlock, { code: JSON.stringify(output, null, 2), language: "json" });
+  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" });
   } else if (typeof output === "string") {
-    Output = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CodeBlock, { code: output, language: "json" });
+    Output = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CodeBlock, { code: output, language: "json" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("space-y-2 p-2", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: errorText ? "Error" : "Result" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  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)(
       "div",
       {
         className: cn(
@@ -1351,7 +1547,7 @@ var ToolOutput = ({
           errorText ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground"
         ),
         children: [
-          errorText && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: errorText }),
+          errorText && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: errorText }),
           Output
         ]
       }
@@ -1360,7 +1556,7 @@ var ToolOutput = ({
 };
 
 // src/components/suggestion2.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function StarterMessages({
   className,
   prompts,
@@ -1368,7 +1564,7 @@ function StarterMessages({
   ...props
 }) {
   if (prompts.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       className: cn(
@@ -1376,8 +1572,8 @@ function StarterMessages({
         className
       ),
       ...props,
-      children: prompts.map((prompt, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      children: prompts.map((prompt, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           StarterMessageItem,
           {
             prompt,
@@ -1387,7 +1583,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_runtime18.jsx)("div", { className: "h-px mx-3", style: { backgroundColor: "var(--chat-divider)" } })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-px mx-3", style: { backgroundColor: "var(--chat-divider)" } })
       ] }, index))
     }
   );
@@ -1398,7 +1594,7 @@ function StarterMessageItem({
   onClick,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "button",
     {
       type: "button",
@@ -1413,17 +1609,17 @@ function StarterMessageItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-[13px] text-[hsl(var(--chat-text)/0.7)]", children: prompt.title }),
-        prompt.subtitle && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "block text-[11px] text-[hsl(var(--chat-text)/0.4)] mt-0.5", children: prompt.subtitle })
+        /* @__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 })
       ]
     }
   );
 }
 
 // src/contexts/chat-storage-context.tsx
-var import_react8 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var ChatStorageContext = (0, import_react8.createContext)({
+var import_react9 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var ChatStorageContext = (0, import_react9.createContext)({
   storageKeyPrefix: ""
 });
 function ChatStorageProvider({
@@ -1431,39 +1627,46 @@ function ChatStorageProvider({
   userId
 }) {
   const storageKeyPrefix = userId || "";
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatStorageContext.Provider, { value: { storageKeyPrefix }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChatStorageContext.Provider, { value: { storageKeyPrefix }, children });
 }
 function useChatStorageKey() {
-  return (0, import_react8.useContext)(ChatStorageContext);
+  return (0, import_react9.useContext)(ChatStorageContext);
 }
 
 // src/components/interface.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = 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_react9.useState)("");
-  const [showHistory, setShowHistory] = (0, import_react9.useState)(false);
-  const [conversations, setConversations] = (0, import_react9.useState)([]);
-  const [loadingHistory, setLoadingHistory] = (0, import_react9.useState)(false);
-  const [historyLoaded, setHistoryLoaded] = (0, import_react9.useState)(false);
-  const [searchQuery, setSearchQuery] = (0, import_react9.useState)("");
-  const [uploadError, setUploadError] = (0, import_react9.useState)(null);
-  (0, import_react9.useEffect)(() => {
+  const [input, setInput] = (0, import_react10.useState)("");
+  const inputRef = (0, import_react10.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)(() => {
     if (uploadError) {
       const timeoutId = setTimeout(() => setUploadError(null), 5e3);
       return () => clearTimeout(timeoutId);
     }
   }, [uploadError]);
-  const [tabs, setTabs] = (0, import_react9.useState)([]);
-  const [activeTabId, setActiveTabId] = (0, import_react9.useState)("");
-  const [initialTabCreated, setInitialTabCreated] = (0, import_react9.useState)(false);
-  const [isInitializing, setIsInitializing] = (0, import_react9.useState)(true);
-  const [isLoadingMessages, setIsLoadingMessages] = (0, import_react9.useState)(false);
-  const lastSyncedTabId = (0, import_react9.useRef)("");
-  const hasInitialized = (0, import_react9.useRef)(false);
-  const { messages, sendMessage, status, setMessages } = (0, import_react11.useChat)({
+  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)({
     id: activeTabId || "temp-id",
     transport: new import_ai.DefaultChatTransport({
       api: "/api/chat",
@@ -1552,12 +1755,12 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
   };
   const AttachButton = () => {
     const attachments = usePromptInputAttachments();
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       PromptInputButton,
       {
         variant: "ghost",
         onClick: () => attachments.openFileDialog(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.PlusIcon, { className: "size-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.PlusIcon, { className: "size-4" })
       }
     );
   };
@@ -1596,7 +1799,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
     }
     return newTabId;
   };
-  const createNewTab = (0, import_react9.useCallback)(() => {
+  const createNewTab = (0, import_react10.useCallback)(() => {
     if (!initialTabCreated) {
       console.warn("Cannot create new tab while initializing");
       return;
@@ -1623,10 +1826,10 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
     setMessages([]);
     setInput("");
   }, [initialTabCreated]);
-  const startNewConversation = (0, import_react9.useCallback)(() => {
+  const startNewConversation = (0, import_react10.useCallback)(() => {
     createNewTab();
   }, [createNewTab]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     return () => {
     };
   }, []);
@@ -1691,17 +1894,17 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       setLoadingHistory(false);
     }
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (showHistory && !historyLoaded && config?.userId) {
       fetchConversations();
     }
   }, [showHistory, historyLoaded, config?.userId]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!historyLoaded && config?.userId) {
       fetchConversations();
     }
   }, [historyLoaded, config?.userId]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (tabs.length > 0) {
       const timeoutId = setTimeout(() => {
         localStorage.setItem(storageKey("tabs"), JSON.stringify(tabs));
@@ -1710,7 +1913,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       return () => clearTimeout(timeoutId);
     }
   }, [tabs, activeTabId, storageKey]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (hasInitialized.current) return;
     const loadInitialTabs = () => {
       const savedTabs = localStorage.getItem(storageKey("tabs"));
@@ -1737,8 +1940,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
     }
     hasInitialized.current = true;
   }, []);
-  const hasLoadedInitialMessages = (0, import_react9.useRef)(false);
-  (0, import_react9.useEffect)(() => {
+  const hasLoadedInitialMessages = (0, import_react10.useRef)(false);
+  (0, import_react10.useEffect)(() => {
     if (hasLoadedInitialMessages.current) return;
     if (!config?.userId) return;
     if (!activeTabId) return;
@@ -1751,14 +1954,14 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       }
     })();
   }, [config?.userId, activeTabId]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (isInitializing) return;
     if (activeTabId && tabs.length > 0 && activeTabId !== lastSyncedTabId.current) {
       lastSyncedTabId.current = activeTabId;
       setInput("");
     }
   }, [activeTabId, isInitializing, tabs.length]);
-  const groupedConversations = (0, import_react9.useMemo)(() => {
+  const groupedConversations = (0, import_react10.useMemo)(() => {
     const filtered = conversations.filter(
       (conv) => searchQuery === "" || conv.title.toLowerCase().includes(searchQuery.toLowerCase())
     );
@@ -1819,10 +2022,10 @@ 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_runtime20.jsxs)("div", { className: index > 0 ? "mt-6" : "", children: [
-      message.role === "assistant" && sourceParts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Sources, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SourcesTrigger, { count: sourceParts.length }),
-        sourceParts.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SourcesContent, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    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)(
           Source,
           {
             href: part.url,
@@ -1831,10 +2034,10 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
           `${message.id}-${i}`
         ) }, `${message.id}-${i}`))
       ] }),
-      fileParts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn(
+      fileParts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn(
         "flex mb-1",
         message.role === "user" ? "justify-end" : "justify-start"
-      ), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      ), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         MessageAttachments,
         {
           attachments: fileParts.map((part) => ({
@@ -1845,14 +2048,14 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
           }))
         }
       ) }),
-      message.parts ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "space-y-2", children: message.parts.map((part, i) => {
+      message.parts ? /* @__PURE__ */ (0, import_jsx_runtime21.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_runtime20.jsx)(import_react10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Message, { from: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Response, { isStreaming: isTextStreaming, children: part.text }) }) }) }, `${message.id}-${i}`);
+            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}`);
           case "reasoning":
             const isCurrentlyStreaming = status === "streaming" && i === message.parts.length - 1 && message.id === messages.at(-1)?.id;
-            return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
               Reasoning,
               {
                 className: "w-full",
@@ -1860,8 +2063,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                 defaultOpen: false,
                 open: isCurrentlyStreaming ? true : void 0,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ReasoningTrigger, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ReasoningContent, { children: part.text })
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ReasoningTrigger, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ReasoningContent, { children: part.text })
                 ]
               },
               `${message.id}-${i}`
@@ -1869,8 +2072,8 @@ 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_runtime20.jsxs)(Tool, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Tool, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   ToolHeader,
                   {
                     type: part.type,
@@ -1878,9 +2081,9 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                     state: toolPart.state
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ToolContent, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolInput, { input: toolPart.input }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolOutput, { output: toolPart.output, errorText: toolPart.errorText })
+                /* @__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 })
                 ] })
               ] }, `${message.id}-${i}`);
             }
@@ -1888,7 +2091,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
         }
       }) }) : (
         /* Handle standard AI SDK messages with content or text property */
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Message, { from: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Response, { children: message.content || message.text }) }) }) }, `${message.id}-content`)
+        /* @__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`)
       )
     ] }, message.id);
   });
@@ -1920,8 +2123,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       console.error("Error loading conversation:", error);
     }
   };
-  const dropdownRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const dropdownRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setShowHistory(false);
@@ -1934,7 +2137,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [showHistory]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.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_runtime20.jsxs)(
+  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)(
     "div",
     {
       className: cn(
@@ -1942,11 +2145,11 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
         themeMode === "dark" && "dark"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.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_runtime21.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_runtime20.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_runtime20.jsxs)(
+          /* @__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)(
             "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",
@@ -1969,8 +2172,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                 switchToTab(tab.id);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate max-w-28 text-[13px] font-medium transition-colors", children: tab.title }),
-                tabs.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                /* @__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)(
                   "button",
                   {
                     onClick: (e) => {
@@ -1989,15 +2192,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_runtime20.jsx)(import_lucide_react10.XIcon, { className: "h-3 w-3", strokeWidth: 2.5 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.XIcon, { className: "h-3 w-3", strokeWidth: 2.5 })
                   }
                 )
               ]
             },
             tab.id
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 onClick: createNewTab,
@@ -2014,11 +2217,11 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                   e.currentTarget.style.backgroundColor = "transparent";
                 },
                 title: "New Chat",
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.PlusIcon, { className: "h-4 w-4", strokeWidth: 2 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.PlusIcon, { className: "h-4 w-4", strokeWidth: 2 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "button",
                 {
                   onClick: () => setShowHistory(!showHistory),
@@ -2040,17 +2243,17 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                     }
                   },
                   title: "Chat History",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.HistoryIcon, { className: "h-4 w-4", strokeWidth: 2 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.HistoryIcon, { className: "h-4 w-4", strokeWidth: 2 })
                 }
               ),
-              showHistory && /* @__PURE__ */ (0, import_jsx_runtime20.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_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: {
                 backgroundColor: "hsl(var(--chat-background))",
                 border: `1px solid ${"var(--chat-divider)"}`
               }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "p-2.5 border-b", style: {
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "p-2.5 border-b", style: {
                   borderColor: "var(--chat-divider)",
                   backgroundColor: "var(--chat-overlay)"
-                }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "input",
                   {
                     type: "text",
@@ -2065,25 +2268,25 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                     }
                   }
                 ) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "max-h-[300px] overflow-y-auto ai-assistant-scrollbar", children: loadingHistory ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-[13px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Loading..." }) }) : conversations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
+                /* @__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: {
                     backgroundColor: "hsl(var(--chat-surface))"
-                  }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.MessageSquareIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Conversations" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.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_runtime20.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
+                  }, 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: {
                     backgroundColor: "hsl(var(--chat-surface))"
-                  }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.SearchIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Results" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[12px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Try a different search" })
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "py-0.5", children: groupedConversations.map(([groupName, groupConversations]) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mb-0.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-2.5 py-1 sticky top-0 backdrop-blur-sm z-10", style: {
+                  }, 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: {
                     backgroundColor: "var(--chat-header-bg-strong)"
-                  }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "text-[10px] font-semibold uppercase tracking-wide", style: { color: "hsl(var(--chat-text-muted))" }, children: groupName }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-1 space-y-0.5", children: groupConversations.map((conversation) => {
+                  }, 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) => {
                     const isActiveConversation = activeTabId === conversation.id;
-                    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                       "button",
                       {
                         className: "w-full px-2 py-1 rounded-md transition-all duration-150 text-left group relative",
@@ -2101,12 +2304,12 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                           }
                         },
                         onClick: () => handleSelectConversation(conversation.id, conversation.title),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[12px] line-clamp-1 transition-colors leading-tight", style: {
+                        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: {
                             fontWeight: isActiveConversation ? 500 : 400,
                             color: isActiveConversation ? "hsl(var(--chat-text))" : "hsl(var(--chat-text-strong))"
                           }, children: conversation.title }) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                             import_lucide_react10.ChevronRightIcon,
                             {
                               className: "h-3 w-3 transition-all duration-150 flex-shrink-0",
@@ -2126,7 +2329,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
               ] })
             ] }),
             headerActions,
-            onClose && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            onClose && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 onClick: onClose,
@@ -2143,21 +2346,21 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                   e.currentTarget.style.backgroundColor = "transparent";
                 },
                 title: "Close Chat",
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.XIcon, { className: "h-4 w-4", strokeWidth: 2 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.XIcon, { className: "h-4 w-4", strokeWidth: 2 })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Conversation, { className: "flex-1 max-w-full ai-assistant-scrollbar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ConversationContent, { className: "max-w-[96%] mx-auto py-6", children: [
+        /* @__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: [
             renderMessages(),
-            status === "submitted" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mt-6", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Message, { from: "assistant", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Loader, { size: 16 }) }) }) })
+            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 }) }) }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ConversationScrollButton, {})
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ConversationScrollButton, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "px-5 pb-5", children: [
-          uploadError && /* @__PURE__ */ (0, import_jsx_runtime20.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_runtime20.jsx)("div", { className: "flex items-center justify-center py-8", role: "status", "aria-label": "Loading conversation", children: /* @__PURE__ */ (0, import_jsx_runtime20.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_runtime20.jsx)(
+        /* @__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)(
             StarterMessages,
             {
               prompts: config.starterPrompts,
@@ -2166,20 +2369,25 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(PromptInput, { onSubmit: handleSubmit, globalDrop: true, multiple: true, accept: "image/*", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(PromptInputBody, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PromptInputAttachment, { data: attachment }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                PromptInputTextarea,
-                {
-                  onChange: (e) => setInput(e.target.value),
-                  value: input
-                }
-              )
+          /* @__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_runtime20.jsxs)(PromptInputToolbar, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PromptInputTools, { children: config?.features?.fileUpload === true && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AttachButton, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PromptInputSubmit, { disabled: !input, status })
+            /* @__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 })
             ] })
           ] })
         ] })
@@ -2227,7 +2435,7 @@ function toHslTripletIfHex(value) {
 }
 
 // src/ChatWidget.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function ChatWidget({
   userId,
   conversationId,
@@ -2250,7 +2458,7 @@ function ChatWidget({
   const showToggleButton = !isControlled && display?.showToggleButton !== false;
   const resizable = layout === "popup" && display?.resizable !== false;
   const size = display?.size || "default";
-  const [internalIsOpen, setInternalIsOpen] = (0, import_react12.useState)(
+  const [internalIsOpen, setInternalIsOpen] = (0, import_react13.useState)(
     layout !== "popup" ? true : display?.defaultOpen || false
   );
   const isOpen = isControlled ? open : internalIsOpen;
@@ -2261,9 +2469,9 @@ function ChatWidget({
       setInternalIsOpen(next);
     }
   };
-  const [isResizing, setIsResizing] = (0, import_react12.useState)(false);
-  const containerRef = (0, import_react12.useRef)(null);
-  const customStyles = (0, import_react12.useMemo)(() => {
+  const [isResizing, setIsResizing] = (0, import_react13.useState)(false);
+  const containerRef = (0, import_react13.useRef)(null);
+  const customStyles = (0, import_react13.useMemo)(() => {
     const styles = {};
     if (display?.width) {
       styles["--chat-widget-width"] = display.width;
@@ -2282,14 +2490,14 @@ function ChatWidget({
     }
     return styles;
   }, [display?.width, theme?.primaryColor, theme?.backgroundColor, theme?.textColor, theme?.tokens]);
-  const handleMouseDown = (0, import_react12.useCallback)((e) => {
+  const handleMouseDown = (0, import_react13.useCallback)((e) => {
     if (!resizable) return;
     e.preventDefault();
     setIsResizing(true);
     document.body.style.cursor = "ew-resize";
     document.body.style.userSelect = "none";
   }, [resizable]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!isResizing) return;
     const handleMouseMove = (e) => {
       if (!containerRef.current) return;
@@ -2311,7 +2519,7 @@ function ChatWidget({
       document.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isResizing]);
-  const config = (0, import_react12.useMemo)(() => ({
+  const config = (0, import_react13.useMemo)(() => ({
     userId,
     model,
     systemPrompt,
@@ -2323,13 +2531,13 @@ function ChatWidget({
   const togglePosition = display?.toggleButtonPosition || { bottom: "24px", right: "24px" };
   const themeClass = theme?.mode === "dark" ? "dark" : "";
   if (layout === "inline") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChatStorageProvider, { userId, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChatStorageProvider, { userId, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       {
         ref: containerRef,
         className: `chat-widget-container chat-widget-inline chat-widget-content ${themeClass} ${className || ""}`,
         style: customStyles,
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           ChatInterface,
           {
             id: conversationId,
@@ -2343,13 +2551,13 @@ function ChatWidget({
     ) });
   }
   if (layout === "page") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChatStorageProvider, { userId, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChatStorageProvider, { userId, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       {
         ref: containerRef,
         className: `chat-widget-container chat-widget-page chat-widget-content ${themeClass} ${className || ""}`,
         style: customStyles,
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           ChatInterface,
           {
             id: conversationId,
@@ -2362,18 +2570,18 @@ function ChatWidget({
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ChatStorageProvider, { userId, children: [
-    showToggleButton && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ChatStorageProvider, { userId, children: [
+    showToggleButton && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime21.jsx)(import_lucide_react11.MessageCircle, { className: "h-6 w-6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react11.MessageCircle, { className: "h-6 w-6" })
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "div",
       {
         ref: containerRef,
@@ -2382,7 +2590,7 @@ function ChatWidget({
         "data-resizing": isResizing,
         style: customStyles,
         children: [
-          resizable && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          resizable && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "div",
             {
               onMouseDown: handleMouseDown,
@@ -2390,7 +2598,7 @@ function ChatWidget({
               "aria-label": "Resize chat widget"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-full h-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-full h-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             ChatInterface,
             {
               id: conversationId,
@@ -2411,7 +2619,7 @@ function ChatWidget({
 var ChatWidget_default = ChatWidget;
 
 // src/hooks/use-chat-theme.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/utils/models.ts
 var MODELS = [
@@ -2531,13 +2739,13 @@ var defaultThemeMode = "light";
 function useChatTheme() {
   const { storageKeyPrefix } = useChatStorageKey();
   const keyPrefix = storageKeyPrefix ? `chat-${storageKeyPrefix}-` : "chat-";
-  const [theme, setTheme] = (0, import_react13.useState)(defaultTheme);
-  const [conversationStarters, setConversationStarters] = (0, import_react13.useState)(defaultConversationStarters);
-  const [model, setModel] = (0, import_react13.useState)(defaultModel);
-  const [systemPrompt, setSystemPrompt] = (0, import_react13.useState)(defaultSystemPrompt);
-  const [temperature, setTemperature] = (0, import_react13.useState)(defaultTemperature);
-  const [themeMode, setThemeMode] = (0, import_react13.useState)(defaultThemeMode);
-  (0, import_react13.useEffect)(() => {
+  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 savedTheme = localStorage.getItem(`${keyPrefix}theme`);
     if (savedTheme) {
       try {
@@ -2625,7 +2833,7 @@ function useChatTheme() {
       window.removeEventListener("chat-theme-mode-change", handleThemeModeChange);
     };
   }, [keyPrefix]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     localStorage.setItem(`${keyPrefix}theme`, JSON.stringify(theme));
     const root = document.documentElement;
     if (themeMode === "light") {
@@ -2641,23 +2849,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_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     localStorage.setItem(`${keyPrefix}conversation-starters`, JSON.stringify(conversationStarters));
     window.dispatchEvent(new CustomEvent("chat-starters-change", { detail: conversationStarters }));
   }, [conversationStarters, keyPrefix]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     localStorage.setItem(`${keyPrefix}model`, model);
     window.dispatchEvent(new CustomEvent("chat-model-change", { detail: model }));
   }, [model, keyPrefix]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     localStorage.setItem(`${keyPrefix}system-prompt`, systemPrompt);
     window.dispatchEvent(new CustomEvent("chat-system-prompt-change", { detail: systemPrompt }));
   }, [systemPrompt, keyPrefix]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     localStorage.setItem(`${keyPrefix}temperature`, temperature.toString());
     window.dispatchEvent(new CustomEvent("chat-temperature-change", { detail: temperature }));
   }, [temperature, keyPrefix]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     localStorage.setItem(`${keyPrefix}theme-mode`, themeMode);
     window.dispatchEvent(new CustomEvent("chat-theme-mode-change", { detail: themeMode }));
   }, [themeMode, keyPrefix]);
@@ -2726,11 +2934,11 @@ function useChatTheme() {
 }
 
 // src/ui/input.tsx
-var React = __toESM(require("react"));
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Input = React.forwardRef(
+var React2 = __toESM(require("react"));
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Input = React2.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "input",
       {
         type,
@@ -2749,22 +2957,22 @@ 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_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -2782,9 +2990,9 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  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)(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
@@ -2795,14 +3003,14 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime23.jsx)(import_lucide_react12.XIcon, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.XIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -2812,7 +3020,7 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       "data-slot": "dialog-header",
@@ -2825,7 +3033,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -2838,7 +3046,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",