@mordn/chat-widget 0.5.1 → 0.6.1

package/dist/index.mjs

@@ -2,7 +2,7 @@
 "use client";
 
 // src/ChatWidget.tsx
-import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
 
 // src/ui/button.tsx
 import { Slot } from "@radix-ui/react-slot";
@@ -197,7 +197,7 @@ import {
   XIcon
 } from "lucide-react";
 import { nanoid } from "nanoid";
-import {
+import React, {
   Children,
   createContext,
   Fragment as Fragment2,
@@ -509,14 +509,17 @@ var PromptInputBody = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsx8("div", { className: cn(className, "flex flex-col"), ...props });
-var PromptInputTextarea = ({
+var PromptInputTextarea = React.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;
@@ -553,6 +556,7 @@ var PromptInputTextarea = ({
   return /* @__PURE__ */ jsx8(
     Textarea,
     {
+      ref,
       className: cn(
         "w-full resize-none rounded-none border-none p-3 shadow-none outline-none ring-0",
         "field-sizing-content",
@@ -570,7 +574,8 @@ var PromptInputTextarea = ({
       ...props
     }
   );
-};
+});
+PromptInputTextarea.displayName = "PromptInputTextarea";
 var PromptInputToolbar = ({
   className,
   ...props
@@ -701,8 +706,199 @@ function MessageAttachments({ attachments, className }) {
   )) });
 }
 
+// src/components/input-plugin-popover.tsx
+import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var FETCH_DEBOUNCE_MS = 120;
+function useInputPlugins({ textareaRef, value, setValue, plugins }) {
+  const [active, setActive] = useState2(null);
+  const [items, setItems] = useState2([]);
+  const [highlight, setHighlight] = useState2(0);
+  const [loading, setLoading] = useState2(false);
+  const debounceRef = useRef2(null);
+  const requestIdRef = useRef2(0);
+  const pluginsByTrigger = useMemo2(() => {
+    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 = useMemo2(() => {
+    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]);
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
+    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 = useCallback3(() => {
+    setActive(null);
+    setItems([]);
+    setHighlight(0);
+  }, []);
+  const selectItem = useCallback3(
+    (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 = useCallback3(
+    (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]
+  );
+  useEffect2(() => {
+    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__ */ jsx10(
+    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__ */ jsxs6(
+    "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__ */ jsx10("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__ */ jsx10("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: "Loading\u2026" }),
+        !loading && items.length === 0 && /* @__PURE__ */ jsx10("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: plugin.emptyText ?? "No results" }),
+        items.map((item, idx) => /* @__PURE__ */ jsxs6(
+          "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__ */ jsx10("span", { className: "font-medium leading-tight", children: item.label }),
+              item.sublabel && /* @__PURE__ */ jsx10("span", { className: "text-[11px] text-muted-foreground leading-tight", children: item.sublabel })
+            ]
+          },
+          item.id
+        ))
+      ]
+    }
+  );
+}
+
 // src/components/interface.tsx
-import { useState as useState4, useEffect as useEffect4, useRef as useRef3, useMemo as useMemo2, useCallback as useCallback3 } from "react";
+import { useState as useState5, useEffect as useEffect5, useRef as useRef4, useMemo as useMemo3, useCallback as useCallback4 } from "react";
 import { HistoryIcon, MessageSquareIcon, SearchIcon, ChevronRightIcon as ChevronRightIcon2, PlusIcon as PlusIcon2, XIcon as XIcon2 } from "lucide-react";
 import { Fragment as Fragment5 } from "react";
 import { useChat } from "@ai-sdk/react";
@@ -713,11 +909,11 @@ import { memo } from "react";
 import { Streamdown } from "streamdown";
 
 // src/hooks/use-code-scroll.ts
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
 function useCodeBlockAutoScroll(isStreaming) {
-  const observerRef = useRef2(null);
-  const containerRef = useRef2(null);
-  useEffect2(() => {
+  const observerRef = useRef3(null);
+  const containerRef = useRef3(null);
+  useEffect3(() => {
     if (!isStreaming || !containerRef.current) {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -747,11 +943,11 @@ function useCodeBlockAutoScroll(isStreaming) {
 }
 
 // src/components/response.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var Response = memo(
   ({ className, isStreaming = false, ...props }) => {
     const containerRef = useCodeBlockAutoScroll(isStreaming);
-    return /* @__PURE__ */ jsx10("div", { ref: containerRef, children: /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11("div", { ref: containerRef, children: /* @__PURE__ */ jsx11(
       Streamdown,
       {
         className: cn(
@@ -768,16 +964,16 @@ Response.displayName = "Response";
 
 // src/ui/collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function Collapsible({
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+  return /* @__PURE__ */ jsx12(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
 }
 function CollapsibleTrigger2({
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     CollapsiblePrimitive.CollapsibleTrigger,
     {
       "data-slot": "collapsible-trigger",
@@ -788,7 +984,7 @@ function CollapsibleTrigger2({
 function CollapsibleContent2({
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     CollapsiblePrimitive.CollapsibleContent,
     {
       "data-slot": "collapsible-content",
@@ -799,8 +995,8 @@ function CollapsibleContent2({
 
 // src/components/sources.tsx
 import { BookIcon, ChevronDownIcon as ChevronDownIcon2 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
-var Sources = ({ className, ...props }) => /* @__PURE__ */ jsx12(
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var Sources = ({ className, ...props }) => /* @__PURE__ */ jsx13(
   Collapsible,
   {
     className: cn("not-prose mb-4 text-primary text-xs", className),
@@ -812,25 +1008,25 @@ var SourcesTrigger = ({
   count,
   children,
   ...props
-}) => /* @__PURE__ */ jsx12(
+}) => /* @__PURE__ */ jsx13(
   CollapsibleTrigger2,
   {
     className: cn("flex items-center gap-2", className),
     ...props,
-    children: children ?? /* @__PURE__ */ jsxs6(Fragment3, { children: [
-      /* @__PURE__ */ jsxs6("p", { className: "font-medium", children: [
+    children: children ?? /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      /* @__PURE__ */ jsxs7("p", { className: "font-medium", children: [
         "Used ",
         count,
         " sources"
       ] }),
-      /* @__PURE__ */ jsx12(ChevronDownIcon2, { className: "h-4 w-4" })
+      /* @__PURE__ */ jsx13(ChevronDownIcon2, { className: "h-4 w-4" })
     ] })
   }
 );
 var SourcesContent = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx12(
+}) => /* @__PURE__ */ jsx13(
   CollapsibleContent2,
   {
     className: cn(
@@ -841,7 +1037,7 @@ var SourcesContent = ({
     ...props
   }
 );
-var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ jsx12(
+var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ jsx13(
   "a",
   {
     className: "flex items-center gap-2",
@@ -849,9 +1045,9 @@ var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ jsx12(
     rel: "noreferrer",
     target: "_blank",
     ...props,
-    children: children ?? /* @__PURE__ */ jsxs6(Fragment3, { children: [
-      /* @__PURE__ */ jsx12(BookIcon, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsx12("span", { className: "block font-medium", children: title })
+    children: children ?? /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      /* @__PURE__ */ jsx13(BookIcon, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx13("span", { className: "block font-medium", children: title })
     ] })
   }
 );
@@ -859,8 +1055,8 @@ var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ jsx12(
 // src/components/reasoning.tsx
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { BrainIcon, ChevronDownIcon as ChevronDownIcon3 } from "lucide-react";
-import { createContext as createContext2, memo as memo2, useContext as useContext2, useEffect as useEffect3, useState as useState2 } from "react";
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { createContext as createContext2, memo as memo2, useContext as useContext2, useEffect as useEffect4, useState as useState3 } from "react";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var ReasoningContext = createContext2(null);
 var useReasoning = () => {
   const context = useContext2(ReasoningContext);
@@ -891,9 +1087,9 @@ var Reasoning = memo2(
       prop: durationProp,
       defaultProp: void 0
     });
-    const [hasAutoClosed, setHasAutoClosed] = useState2(false);
-    const [startTime, setStartTime] = useState2(null);
-    useEffect3(() => {
+    const [hasAutoClosed, setHasAutoClosed] = useState3(false);
+    const [startTime, setStartTime] = useState3(null);
+    useEffect4(() => {
       if (isStreaming) {
         if (startTime === null) {
           setStartTime(Date.now());
@@ -903,7 +1099,7 @@ var Reasoning = memo2(
         setStartTime(null);
       }
     }, [isStreaming, startTime, setDuration]);
-    useEffect3(() => {
+    useEffect4(() => {
       if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed && durationProp !== void 0) {
         const timer = setTimeout(() => {
           setIsOpen(false);
@@ -915,11 +1111,11 @@ var Reasoning = memo2(
     const handleOpenChange = (newOpen) => {
       setIsOpen(newOpen);
     };
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       ReasoningContext.Provider,
       {
         value: { isStreaming, isOpen, setIsOpen, duration },
-        children: /* @__PURE__ */ jsx13(
+        children: /* @__PURE__ */ jsx14(
           Collapsible,
           {
             className: cn("not-prose", className),
@@ -935,15 +1131,15 @@ var Reasoning = memo2(
 );
 var getThinkingMessage = (isStreaming, duration) => {
   if (isStreaming) {
-    return /* @__PURE__ */ jsx13(Fragment4, { children: "Thinking..." });
+    return /* @__PURE__ */ jsx14(Fragment4, { children: "Thinking..." });
   }
   if (duration === void 0) {
-    return /* @__PURE__ */ jsx13(Fragment4, { children: "Thought process" });
+    return /* @__PURE__ */ jsx14(Fragment4, { children: "Thought process" });
   }
   if (duration === 0) {
-    return /* @__PURE__ */ jsx13(Fragment4, { children: "Thought process" });
+    return /* @__PURE__ */ jsx14(Fragment4, { children: "Thought process" });
   }
-  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
     "Thought for ",
     duration,
     " seconds"
@@ -952,7 +1148,7 @@ var getThinkingMessage = (isStreaming, duration) => {
 var ReasoningTrigger = memo2(
   ({ className, children, ...props }) => {
     const { isStreaming, isOpen, duration } = useReasoning();
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       CollapsibleTrigger2,
       {
         className: cn(
@@ -960,10 +1156,10 @@ var ReasoningTrigger = memo2(
           className
         ),
         ...props,
-        children: children ?? /* @__PURE__ */ jsxs7(Fragment4, { children: [
-          /* @__PURE__ */ jsx13(BrainIcon, { className: "size-4 flex-shrink-0" }),
+        children: children ?? /* @__PURE__ */ jsxs8(Fragment4, { children: [
+          /* @__PURE__ */ jsx14(BrainIcon, { className: "size-4 flex-shrink-0" }),
           getThinkingMessage(isStreaming, duration),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             ChevronDownIcon3,
             {
               className: cn(
@@ -978,7 +1174,7 @@ var ReasoningTrigger = memo2(
   }
 );
 var ReasoningContent = memo2(
-  ({ className, children, ...props }) => /* @__PURE__ */ jsx13(
+  ({ className, children, ...props }) => /* @__PURE__ */ jsx14(
     CollapsibleContent2,
     {
       className: cn(
@@ -987,7 +1183,7 @@ var ReasoningContent = memo2(
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx13(Response, { className: "grid gap-2", children })
+      children: /* @__PURE__ */ jsx14(Response, { className: "grid gap-2", children })
     }
   )
 );
@@ -996,8 +1192,8 @@ ReasoningTrigger.displayName = "ReasoningTrigger";
 ReasoningContent.displayName = "ReasoningContent";
 
 // src/components/loader.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs8(
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs9(
   "svg",
   {
     height: size,
@@ -1006,10 +1202,10 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs8(
     viewBox: "0 0 16 16",
     width: size,
     children: [
-      /* @__PURE__ */ jsx14("title", { children: "Loader" }),
-      /* @__PURE__ */ jsxs8("g", { clipPath: "url(#clip0_2393_1490)", children: [
-        /* @__PURE__ */ jsx14("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15("title", { children: "Loader" }),
+      /* @__PURE__ */ jsxs9("g", { clipPath: "url(#clip0_2393_1490)", children: [
+        /* @__PURE__ */ jsx15("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx15(
           "path",
           {
             d: "M8 16V12",
@@ -1018,7 +1214,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs8(
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "path",
           {
             d: "M3.29773 1.52783L5.64887 4.7639",
@@ -1027,7 +1223,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs8(
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "path",
           {
             d: "M12.7023 1.52783L10.3511 4.7639",
@@ -1036,7 +1232,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs8(
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "path",
           {
             d: "M12.7023 14.472L10.3511 11.236",
@@ -1045,7 +1241,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs8(
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "path",
           {
             d: "M3.29773 14.472L5.64887 11.236",
@@ -1054,7 +1250,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs8(
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "path",
           {
             d: "M15.6085 5.52783L11.8043 6.7639",
@@ -1063,7 +1259,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs8(
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "path",
           {
             d: "M0.391602 10.472L4.19583 9.23598",
@@ -1072,7 +1268,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs8(
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "path",
           {
             d: "M15.6085 10.4722L11.8043 9.2361",
@@ -1081,7 +1277,7 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs8(
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "path",
           {
             d: "M0.391602 5.52783L4.19583 6.7639",
@@ -1091,11 +1287,11 @@ var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs8(
           }
         )
       ] }),
-      /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsx14("clipPath", { id: "clip0_2393_1490", children: /* @__PURE__ */ jsx14("rect", { fill: "white", height: "16", width: "16" }) }) })
+      /* @__PURE__ */ jsx15("defs", { children: /* @__PURE__ */ jsx15("clipPath", { id: "clip0_2393_1490", children: /* @__PURE__ */ jsx15("rect", { fill: "white", height: "16", width: "16" }) }) })
     ]
   }
 );
-var Loader = ({ className, size = 16, ...props }) => /* @__PURE__ */ jsx14(
+var Loader = ({ className, size = 16, ...props }) => /* @__PURE__ */ jsx15(
   "div",
   {
     className: cn(
@@ -1103,14 +1299,14 @@ var Loader = ({ className, size = 16, ...props }) => /* @__PURE__ */ jsx14(
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx14(LoaderIcon, { size })
+    children: /* @__PURE__ */ jsx15(LoaderIcon, { size })
   }
 );
 
 // src/ui/badge.tsx
 import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var badgeVariants = cva3(
   "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -1134,7 +1330,7 @@ function Badge({
   ...props
 }) {
   const Comp = asChild ? Slot2 : "span";
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     Comp,
     {
       "data-slot": "badge",
@@ -1157,13 +1353,13 @@ import { isValidElement } from "react";
 
 // src/components/code-block.tsx
 import { CheckIcon as CheckIcon3, CopyIcon } from "lucide-react";
-import { createContext as createContext3, useContext as useContext3, useState as useState3 } from "react";
+import { createContext as createContext3, useContext as useContext3, useState as useState4 } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import {
   oneDark,
   oneLight
 } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var CodeBlockContext = createContext3({
   code: ""
 });
@@ -1174,7 +1370,7 @@ var CodeBlock = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ jsx16(CodeBlockContext.Provider, { value: { code }, children: /* @__PURE__ */ jsx16(
+}) => /* @__PURE__ */ jsx17(CodeBlockContext.Provider, { value: { code }, children: /* @__PURE__ */ jsx17(
   "div",
   {
     className: cn(
@@ -1182,8 +1378,8 @@ var CodeBlock = ({
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsxs9("div", { className: "relative max-h-96 overflow-y-auto", children: [
-      /* @__PURE__ */ jsx16(
+    children: /* @__PURE__ */ jsxs10("div", { className: "relative max-h-96 overflow-y-auto", children: [
+      /* @__PURE__ */ jsx17(
         SyntaxHighlighter,
         {
           className: "overflow-hidden dark:hidden",
@@ -1209,7 +1405,7 @@ var CodeBlock = ({
           children: code
         }
       ),
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx17(
         SyntaxHighlighter,
         {
           className: "hidden overflow-hidden dark:block",
@@ -1235,14 +1431,14 @@ var CodeBlock = ({
           children: code
         }
       ),
-      children && /* @__PURE__ */ jsx16("div", { className: "absolute top-2 right-2 flex items-center gap-2", children })
+      children && /* @__PURE__ */ jsx17("div", { className: "absolute top-2 right-2 flex items-center gap-2", children })
     ] })
   }
 ) });
 
 // src/components/tool.tsx
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
-var Tool = ({ className, ...props }) => /* @__PURE__ */ jsx17(
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+var Tool = ({ className, ...props }) => /* @__PURE__ */ jsx18(
   Collapsible,
   {
     className: cn("not-prose w-full rounded-md border border-[var(--chat-divider)]", className),
@@ -1257,12 +1453,12 @@ var getStatusBadge = (status) => {
     "output-error": "Error"
   };
   const icons = {
-    "input-streaming": /* @__PURE__ */ jsx17(CircleIcon2, { className: "size-4" }),
-    "input-available": /* @__PURE__ */ jsx17(ClockIcon, { className: "size-4 animate-pulse" }),
-    "output-available": /* @__PURE__ */ jsx17(CheckCircleIcon, { className: "size-4 text-green-600" }),
-    "output-error": /* @__PURE__ */ jsx17(XCircleIcon, { className: "size-4 text-red-600" })
+    "input-streaming": /* @__PURE__ */ jsx18(CircleIcon2, { className: "size-4" }),
+    "input-available": /* @__PURE__ */ jsx18(ClockIcon, { className: "size-4 animate-pulse" }),
+    "output-available": /* @__PURE__ */ jsx18(CheckCircleIcon, { className: "size-4 text-green-600" }),
+    "output-error": /* @__PURE__ */ jsx18(XCircleIcon, { className: "size-4 text-red-600" })
   };
-  return /* @__PURE__ */ jsxs10(Badge, { className: "gap-1.5 rounded-full text-xs", variant: "secondary", children: [
+  return /* @__PURE__ */ jsxs11(Badge, { className: "gap-1.5 rounded-full text-xs", variant: "secondary", children: [
     icons[status],
     labels[status]
   ] });
@@ -1274,7 +1470,7 @@ var ToolHeader = ({
   toolName,
   state,
   ...props
-}) => /* @__PURE__ */ jsxs10(
+}) => /* @__PURE__ */ jsxs11(
   CollapsibleTrigger2,
   {
     className: cn(
@@ -1283,16 +1479,16 @@ var ToolHeader = ({
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx17(WrenchIcon, { className: "size-4 text-muted-foreground" }),
-        /* @__PURE__ */ jsx17("span", { className: "font-medium text-sm", children: title ?? toolName ?? type.split("-").slice(1).join("-") }),
+      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx18(WrenchIcon, { className: "size-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx18("span", { className: "font-medium text-sm", children: title ?? toolName ?? type.split("-").slice(1).join("-") }),
         getStatusBadge(state)
       ] }),
-      /* @__PURE__ */ jsx17(ChevronDownIcon4, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+      /* @__PURE__ */ jsx18(ChevronDownIcon4, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
     ]
   }
 );
-var ToolContent = ({ className, ...props }) => /* @__PURE__ */ jsx17(
+var ToolContent = ({ className, ...props }) => /* @__PURE__ */ jsx18(
   CollapsibleContent2,
   {
     className: cn(
@@ -1302,9 +1498,9 @@ var ToolContent = ({ className, ...props }) => /* @__PURE__ */ jsx17(
     ...props
   }
 );
-var ToolInput = ({ className, input, ...props }) => /* @__PURE__ */ jsxs10("div", { className: cn("space-y-2 overflow-hidden p-2", className), ...props, children: [
-  /* @__PURE__ */ jsx17("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Parameters" }),
-  /* @__PURE__ */ jsx17("div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ jsx17(CodeBlock, { code: JSON.stringify(input, null, 2), language: "json" }) })
+var ToolInput = ({ className, input, ...props }) => /* @__PURE__ */ jsxs11("div", { className: cn("space-y-2 overflow-hidden p-2", className), ...props, children: [
+  /* @__PURE__ */ jsx18("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Parameters" }),
+  /* @__PURE__ */ jsx18("div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ jsx18(CodeBlock, { code: JSON.stringify(input, null, 2), language: "json" }) })
 ] });
 var ToolOutput = ({
   className,
@@ -1315,15 +1511,15 @@ var ToolOutput = ({
   if (!(output || errorText)) {
     return null;
   }
-  let Output = /* @__PURE__ */ jsx17("div", { children: output });
+  let Output = /* @__PURE__ */ jsx18("div", { children: output });
   if (typeof output === "object" && !isValidElement(output)) {
-    Output = /* @__PURE__ */ jsx17(CodeBlock, { code: JSON.stringify(output, null, 2), language: "json" });
+    Output = /* @__PURE__ */ jsx18(CodeBlock, { code: JSON.stringify(output, null, 2), language: "json" });
   } else if (typeof output === "string") {
-    Output = /* @__PURE__ */ jsx17(CodeBlock, { code: output, language: "json" });
+    Output = /* @__PURE__ */ jsx18(CodeBlock, { code: output, language: "json" });
   }
-  return /* @__PURE__ */ jsxs10("div", { className: cn("space-y-2 p-2", className), ...props, children: [
-    /* @__PURE__ */ jsx17("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: errorText ? "Error" : "Result" }),
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11("div", { className: cn("space-y-2 p-2", className), ...props, children: [
+    /* @__PURE__ */ jsx18("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: errorText ? "Error" : "Result" }),
+    /* @__PURE__ */ jsxs11(
       "div",
       {
         className: cn(
@@ -1331,7 +1527,7 @@ var ToolOutput = ({
           errorText ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground"
         ),
         children: [
-          errorText && /* @__PURE__ */ jsx17("div", { children: errorText }),
+          errorText && /* @__PURE__ */ jsx18("div", { children: errorText }),
           Output
         ]
       }
@@ -1340,7 +1536,7 @@ var ToolOutput = ({
 };
 
 // src/components/suggestion2.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 function StarterMessages({
   className,
   prompts,
@@ -1348,7 +1544,7 @@ function StarterMessages({
   ...props
 }) {
   if (prompts.length === 0) return null;
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       className: cn(
@@ -1356,8 +1552,8 @@ function StarterMessages({
         className
       ),
       ...props,
-      children: prompts.map((prompt, index) => /* @__PURE__ */ jsxs11("div", { children: [
-        /* @__PURE__ */ jsx18(
+      children: prompts.map((prompt, index) => /* @__PURE__ */ jsxs12("div", { children: [
+        /* @__PURE__ */ jsx19(
           StarterMessageItem,
           {
             prompt,
@@ -1367,7 +1563,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__ */ jsx18("div", { className: "h-px mx-3", style: { backgroundColor: "var(--chat-divider)" } })
+        /* @__PURE__ */ jsx19("div", { className: "h-px mx-3", style: { backgroundColor: "var(--chat-divider)" } })
       ] }, index))
     }
   );
@@ -1378,7 +1574,7 @@ function StarterMessageItem({
   onClick,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "button",
     {
       type: "button",
@@ -1393,8 +1589,8 @@ function StarterMessageItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx18("span", { className: "text-[13px] text-[hsl(var(--chat-text)/0.7)]", children: prompt.title }),
-        prompt.subtitle && /* @__PURE__ */ jsx18("span", { className: "block text-[11px] text-[hsl(var(--chat-text)/0.4)] mt-0.5", children: prompt.subtitle })
+        /* @__PURE__ */ jsx19("span", { className: "text-[13px] text-[hsl(var(--chat-text)/0.7)]", children: prompt.title }),
+        prompt.subtitle && /* @__PURE__ */ jsx19("span", { className: "block text-[11px] text-[hsl(var(--chat-text)/0.4)] mt-0.5", children: prompt.subtitle })
       ]
     }
   );
@@ -1402,7 +1598,7 @@ function StarterMessageItem({
 
 // src/contexts/chat-storage-context.tsx
 import { createContext as createContext4, useContext as useContext4 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ChatStorageContext = createContext4({
   storageKeyPrefix: ""
 });
@@ -1411,38 +1607,45 @@ function ChatStorageProvider({
   userId
 }) {
   const storageKeyPrefix = userId || "";
-  return /* @__PURE__ */ jsx19(ChatStorageContext.Provider, { value: { storageKeyPrefix }, children });
+  return /* @__PURE__ */ jsx20(ChatStorageContext.Provider, { value: { storageKeyPrefix }, children });
 }
 function useChatStorageKey() {
   return useContext4(ChatStorageContext);
 }
 
 // src/components/interface.tsx
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 function ChatInterface({ id, initialMessages, config, onClose, headerActions } = {}) {
   const { storageKeyPrefix } = useChatStorageKey();
   const storageKey = (key) => storageKeyPrefix ? `chat-${storageKeyPrefix}-${key}` : `chat-${key}`;
   const themeMode = config?.theme?.mode || "light";
-  const [input, setInput] = useState4("");
-  const [showHistory, setShowHistory] = useState4(false);
-  const [conversations, setConversations] = useState4([]);
-  const [loadingHistory, setLoadingHistory] = useState4(false);
-  const [historyLoaded, setHistoryLoaded] = useState4(false);
-  const [searchQuery, setSearchQuery] = useState4("");
-  const [uploadError, setUploadError] = useState4(null);
-  useEffect4(() => {
+  const [input, setInput] = useState5("");
+  const inputRef = useRef4(null);
+  const inputPlugins = useInputPlugins({
+    textareaRef: inputRef,
+    value: input,
+    setValue: setInput,
+    plugins: config?.inputPlugins
+  });
+  const [showHistory, setShowHistory] = useState5(false);
+  const [conversations, setConversations] = useState5([]);
+  const [loadingHistory, setLoadingHistory] = useState5(false);
+  const [historyLoaded, setHistoryLoaded] = useState5(false);
+  const [searchQuery, setSearchQuery] = useState5("");
+  const [uploadError, setUploadError] = useState5(null);
+  useEffect5(() => {
     if (uploadError) {
       const timeoutId = setTimeout(() => setUploadError(null), 5e3);
       return () => clearTimeout(timeoutId);
     }
   }, [uploadError]);
-  const [tabs, setTabs] = useState4([]);
-  const [activeTabId, setActiveTabId] = useState4("");
-  const [initialTabCreated, setInitialTabCreated] = useState4(false);
-  const [isInitializing, setIsInitializing] = useState4(true);
-  const [isLoadingMessages, setIsLoadingMessages] = useState4(false);
-  const lastSyncedTabId = useRef3("");
-  const hasInitialized = useRef3(false);
+  const [tabs, setTabs] = useState5([]);
+  const [activeTabId, setActiveTabId] = useState5("");
+  const [initialTabCreated, setInitialTabCreated] = useState5(false);
+  const [isInitializing, setIsInitializing] = useState5(true);
+  const [isLoadingMessages, setIsLoadingMessages] = useState5(false);
+  const lastSyncedTabId = useRef4("");
+  const hasInitialized = useRef4(false);
   const { messages, sendMessage, status, setMessages } = useChat({
     id: activeTabId || "temp-id",
     transport: new DefaultChatTransport({
@@ -1532,12 +1735,12 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
   };
   const AttachButton = () => {
     const attachments = usePromptInputAttachments();
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx21(
       PromptInputButton,
       {
         variant: "ghost",
         onClick: () => attachments.openFileDialog(),
-        children: /* @__PURE__ */ jsx20(PlusIcon2, { className: "size-4" })
+        children: /* @__PURE__ */ jsx21(PlusIcon2, { className: "size-4" })
       }
     );
   };
@@ -1576,7 +1779,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
     }
     return newTabId;
   };
-  const createNewTab = useCallback3(() => {
+  const createNewTab = useCallback4(() => {
     if (!initialTabCreated) {
       console.warn("Cannot create new tab while initializing");
       return;
@@ -1603,10 +1806,10 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
     setMessages([]);
     setInput("");
   }, [initialTabCreated]);
-  const startNewConversation = useCallback3(() => {
+  const startNewConversation = useCallback4(() => {
     createNewTab();
   }, [createNewTab]);
-  useEffect4(() => {
+  useEffect5(() => {
     return () => {
     };
   }, []);
@@ -1671,17 +1874,17 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       setLoadingHistory(false);
     }
   };
-  useEffect4(() => {
+  useEffect5(() => {
     if (showHistory && !historyLoaded && config?.userId) {
       fetchConversations();
     }
   }, [showHistory, historyLoaded, config?.userId]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!historyLoaded && config?.userId) {
       fetchConversations();
     }
   }, [historyLoaded, config?.userId]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (tabs.length > 0) {
       const timeoutId = setTimeout(() => {
         localStorage.setItem(storageKey("tabs"), JSON.stringify(tabs));
@@ -1690,7 +1893,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       return () => clearTimeout(timeoutId);
     }
   }, [tabs, activeTabId, storageKey]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (hasInitialized.current) return;
     const loadInitialTabs = () => {
       const savedTabs = localStorage.getItem(storageKey("tabs"));
@@ -1717,8 +1920,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
     }
     hasInitialized.current = true;
   }, []);
-  const hasLoadedInitialMessages = useRef3(false);
-  useEffect4(() => {
+  const hasLoadedInitialMessages = useRef4(false);
+  useEffect5(() => {
     if (hasLoadedInitialMessages.current) return;
     if (!config?.userId) return;
     if (!activeTabId) return;
@@ -1731,14 +1934,14 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       }
     })();
   }, [config?.userId, activeTabId]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isInitializing) return;
     if (activeTabId && tabs.length > 0 && activeTabId !== lastSyncedTabId.current) {
       lastSyncedTabId.current = activeTabId;
       setInput("");
     }
   }, [activeTabId, isInitializing, tabs.length]);
-  const groupedConversations = useMemo2(() => {
+  const groupedConversations = useMemo3(() => {
     const filtered = conversations.filter(
       (conv) => searchQuery === "" || conv.title.toLowerCase().includes(searchQuery.toLowerCase())
     );
@@ -1799,10 +2002,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__ */ jsxs12("div", { className: index > 0 ? "mt-6" : "", children: [
-      message.role === "assistant" && sourceParts.length > 0 && /* @__PURE__ */ jsxs12(Sources, { children: [
-        /* @__PURE__ */ jsx20(SourcesTrigger, { count: sourceParts.length }),
-        sourceParts.map((part, i) => /* @__PURE__ */ jsx20(SourcesContent, { children: /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsxs13("div", { className: index > 0 ? "mt-6" : "", children: [
+      message.role === "assistant" && sourceParts.length > 0 && /* @__PURE__ */ jsxs13(Sources, { children: [
+        /* @__PURE__ */ jsx21(SourcesTrigger, { count: sourceParts.length }),
+        sourceParts.map((part, i) => /* @__PURE__ */ jsx21(SourcesContent, { children: /* @__PURE__ */ jsx21(
           Source,
           {
             href: part.url,
@@ -1811,10 +2014,10 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
           `${message.id}-${i}`
         ) }, `${message.id}-${i}`))
       ] }),
-      fileParts.length > 0 && /* @__PURE__ */ jsx20("div", { className: cn(
+      fileParts.length > 0 && /* @__PURE__ */ jsx21("div", { className: cn(
         "flex mb-1",
         message.role === "user" ? "justify-end" : "justify-start"
-      ), children: /* @__PURE__ */ jsx20(
+      ), children: /* @__PURE__ */ jsx21(
         MessageAttachments,
         {
           attachments: fileParts.map((part) => ({
@@ -1825,14 +2028,14 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
           }))
         }
       ) }),
-      message.parts ? /* @__PURE__ */ jsx20("div", { className: "space-y-2", children: message.parts.map((part, i) => {
+      message.parts ? /* @__PURE__ */ jsx21("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__ */ jsx20(Fragment5, { children: /* @__PURE__ */ jsx20(Message, { from: message.role, children: /* @__PURE__ */ jsx20(MessageContent, { children: /* @__PURE__ */ jsx20(Response, { isStreaming: isTextStreaming, children: part.text }) }) }) }, `${message.id}-${i}`);
+            return /* @__PURE__ */ jsx21(Fragment5, { children: /* @__PURE__ */ jsx21(Message, { from: message.role, children: /* @__PURE__ */ jsx21(MessageContent, { children: /* @__PURE__ */ jsx21(Response, { isStreaming: isTextStreaming, children: part.text }) }) }) }, `${message.id}-${i}`);
           case "reasoning":
             const isCurrentlyStreaming = status === "streaming" && i === message.parts.length - 1 && message.id === messages.at(-1)?.id;
-            return /* @__PURE__ */ jsxs12(
+            return /* @__PURE__ */ jsxs13(
               Reasoning,
               {
                 className: "w-full",
@@ -1840,8 +2043,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                 defaultOpen: false,
                 open: isCurrentlyStreaming ? true : void 0,
                 children: [
-                  /* @__PURE__ */ jsx20(ReasoningTrigger, {}),
-                  /* @__PURE__ */ jsx20(ReasoningContent, { children: part.text })
+                  /* @__PURE__ */ jsx21(ReasoningTrigger, {}),
+                  /* @__PURE__ */ jsx21(ReasoningContent, { children: part.text })
                 ]
               },
               `${message.id}-${i}`
@@ -1849,8 +2052,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
           default:
             if (part.type.startsWith("tool-") || part.type === "dynamic-tool") {
               const toolPart = part;
-              return /* @__PURE__ */ jsxs12(Tool, { children: [
-                /* @__PURE__ */ jsx20(
+              return /* @__PURE__ */ jsxs13(Tool, { children: [
+                /* @__PURE__ */ jsx21(
                   ToolHeader,
                   {
                     type: part.type,
@@ -1858,9 +2061,9 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                     state: toolPart.state
                   }
                 ),
-                /* @__PURE__ */ jsxs12(ToolContent, { children: [
-                  /* @__PURE__ */ jsx20(ToolInput, { input: toolPart.input }),
-                  /* @__PURE__ */ jsx20(ToolOutput, { output: toolPart.output, errorText: toolPart.errorText })
+                /* @__PURE__ */ jsxs13(ToolContent, { children: [
+                  /* @__PURE__ */ jsx21(ToolInput, { input: toolPart.input }),
+                  /* @__PURE__ */ jsx21(ToolOutput, { output: toolPart.output, errorText: toolPart.errorText })
                 ] })
               ] }, `${message.id}-${i}`);
             }
@@ -1868,7 +2071,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
         }
       }) }) : (
         /* Handle standard AI SDK messages with content or text property */
-        /* @__PURE__ */ jsx20(Fragment5, { children: /* @__PURE__ */ jsx20(Message, { from: message.role, children: /* @__PURE__ */ jsx20(MessageContent, { children: /* @__PURE__ */ jsx20(Response, { children: message.content || message.text }) }) }) }, `${message.id}-content`)
+        /* @__PURE__ */ jsx21(Fragment5, { children: /* @__PURE__ */ jsx21(Message, { from: message.role, children: /* @__PURE__ */ jsx21(MessageContent, { children: /* @__PURE__ */ jsx21(Response, { children: message.content || message.text }) }) }) }, `${message.id}-content`)
       )
     ] }, message.id);
   });
@@ -1900,8 +2103,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       console.error("Error loading conversation:", error);
     }
   };
-  const dropdownRef = useRef3(null);
-  useEffect4(() => {
+  const dropdownRef = useRef4(null);
+  useEffect5(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setShowHistory(false);
@@ -1914,7 +2117,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [showHistory]);
-  return /* @__PURE__ */ jsx20("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__ */ jsxs12(
+  return /* @__PURE__ */ jsx21("div", { className: cn("w-full h-full flex flex-col bg-white dark:bg-gray-900 overflow-hidden ring-1 ring-black/[0.02] dark:ring-white/[0.03]", themeMode === "dark" && "dark"), children: /* @__PURE__ */ jsxs13(
     "div",
     {
       className: cn(
@@ -1922,11 +2125,11 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
         themeMode === "dark" && "dark"
       ),
       children: [
-        /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2 px-3 py-2 border-b backdrop-blur-sm relative z-20", style: {
+        /* @__PURE__ */ jsxs13("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__ */ jsx20("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__ */ jsxs12(
+          /* @__PURE__ */ jsx21("div", { className: "flex items-center gap-1 flex-1 min-w-0 overflow-x-auto scrollbar-hide py-0.5 scroll-smooth", children: tabs.map((tab, index) => /* @__PURE__ */ jsxs13(
             "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",
@@ -1949,8 +2152,8 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                 switchToTab(tab.id);
               },
               children: [
-                /* @__PURE__ */ jsx20("span", { className: "truncate max-w-28 text-[13px] font-medium transition-colors", children: tab.title }),
-                tabs.length > 1 && /* @__PURE__ */ jsx20(
+                /* @__PURE__ */ jsx21("span", { className: "truncate max-w-28 text-[13px] font-medium transition-colors", children: tab.title }),
+                tabs.length > 1 && /* @__PURE__ */ jsx21(
                   "button",
                   {
                     onClick: (e) => {
@@ -1969,15 +2172,15 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                       e.currentTarget.style.opacity = tab.isActive ? "0.6" : "0";
                       e.currentTarget.style.backgroundColor = "transparent";
                     },
-                    children: /* @__PURE__ */ jsx20(XIcon2, { className: "h-3 w-3", strokeWidth: 2.5 })
+                    children: /* @__PURE__ */ jsx21(XIcon2, { className: "h-3 w-3", strokeWidth: 2.5 })
                   }
                 )
               ]
             },
             tab.id
           )) }),
-          /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
-            /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+            /* @__PURE__ */ jsx21(
               "button",
               {
                 onClick: createNewTab,
@@ -1994,11 +2197,11 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                   e.currentTarget.style.backgroundColor = "transparent";
                 },
                 title: "New Chat",
-                children: /* @__PURE__ */ jsx20(PlusIcon2, { className: "h-4 w-4", strokeWidth: 2 })
+                children: /* @__PURE__ */ jsx21(PlusIcon2, { className: "h-4 w-4", strokeWidth: 2 })
               }
             ),
-            /* @__PURE__ */ jsxs12("div", { className: "relative", ref: dropdownRef, children: [
-              /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsxs13("div", { className: "relative", ref: dropdownRef, children: [
+              /* @__PURE__ */ jsx21(
                 "button",
                 {
                   onClick: () => setShowHistory(!showHistory),
@@ -2020,17 +2223,17 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                     }
                   },
                   title: "Chat History",
-                  children: /* @__PURE__ */ jsx20(HistoryIcon, { className: "h-4 w-4", strokeWidth: 2 })
+                  children: /* @__PURE__ */ jsx21(HistoryIcon, { className: "h-4 w-4", strokeWidth: 2 })
                 }
               ),
-              showHistory && /* @__PURE__ */ jsxs12("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__ */ jsxs13("div", { className: "absolute right-0 top-full mt-1.5 w-72 rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.08)] dark:shadow-[0_4px_24px_rgba(0,0,0,0.3)] z-50 animate-in fade-in slide-in-from-top-1 duration-150 overflow-hidden", style: {
                 backgroundColor: "hsl(var(--chat-background))",
                 border: `1px solid ${"var(--chat-divider)"}`
               }, children: [
-                /* @__PURE__ */ jsx20("div", { className: "p-2.5 border-b", style: {
+                /* @__PURE__ */ jsx21("div", { className: "p-2.5 border-b", style: {
                   borderColor: "var(--chat-divider)",
                   backgroundColor: "var(--chat-overlay)"
-                }, children: /* @__PURE__ */ jsx20("div", { className: "relative", children: /* @__PURE__ */ jsx20(
+                }, children: /* @__PURE__ */ jsx21("div", { className: "relative", children: /* @__PURE__ */ jsx21(
                   "input",
                   {
                     type: "text",
@@ -2045,25 +2248,25 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                     }
                   }
                 ) }) }),
-                /* @__PURE__ */ jsx20("div", { className: "max-h-[300px] overflow-y-auto ai-assistant-scrollbar", children: loadingHistory ? /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx20("div", { className: "text-[13px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Loading..." }) }) : conversations.length === 0 ? /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
-                  /* @__PURE__ */ jsx20("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
+                /* @__PURE__ */ jsx21("div", { className: "max-h-[300px] overflow-y-auto ai-assistant-scrollbar", children: loadingHistory ? /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx21("div", { className: "text-[13px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Loading..." }) }) : conversations.length === 0 ? /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+                  /* @__PURE__ */ jsx21("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
                     backgroundColor: "hsl(var(--chat-surface))"
-                  }, children: /* @__PURE__ */ jsx20(MessageSquareIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
-                  /* @__PURE__ */ jsx20("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Conversations" }),
-                  /* @__PURE__ */ jsx20("p", { className: "text-[12px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Start a new chat to begin" })
-                ] }) : groupedConversations.length === 0 ? /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
-                  /* @__PURE__ */ jsx20("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
+                  }, children: /* @__PURE__ */ jsx21(MessageSquareIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
+                  /* @__PURE__ */ jsx21("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Conversations" }),
+                  /* @__PURE__ */ jsx21("p", { className: "text-[12px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Start a new chat to begin" })
+                ] }) : groupedConversations.length === 0 ? /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+                  /* @__PURE__ */ jsx21("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
                     backgroundColor: "hsl(var(--chat-surface))"
-                  }, children: /* @__PURE__ */ jsx20(SearchIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
-                  /* @__PURE__ */ jsx20("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Results" }),
-                  /* @__PURE__ */ jsx20("p", { className: "text-[12px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Try a different search" })
-                ] }) : /* @__PURE__ */ jsx20("div", { className: "py-0.5", children: groupedConversations.map(([groupName, groupConversations]) => /* @__PURE__ */ jsxs12("div", { className: "mb-0.5", children: [
-                  /* @__PURE__ */ jsx20("div", { className: "px-2.5 py-1 sticky top-0 backdrop-blur-sm z-10", style: {
+                  }, children: /* @__PURE__ */ jsx21(SearchIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
+                  /* @__PURE__ */ jsx21("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Results" }),
+                  /* @__PURE__ */ jsx21("p", { className: "text-[12px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Try a different search" })
+                ] }) : /* @__PURE__ */ jsx21("div", { className: "py-0.5", children: groupedConversations.map(([groupName, groupConversations]) => /* @__PURE__ */ jsxs13("div", { className: "mb-0.5", children: [
+                  /* @__PURE__ */ jsx21("div", { className: "px-2.5 py-1 sticky top-0 backdrop-blur-sm z-10", style: {
                     backgroundColor: "var(--chat-header-bg-strong)"
-                  }, children: /* @__PURE__ */ jsx20("h3", { className: "text-[10px] font-semibold uppercase tracking-wide", style: { color: "hsl(var(--chat-text-muted))" }, children: groupName }) }),
-                  /* @__PURE__ */ jsx20("div", { className: "px-1 space-y-0.5", children: groupConversations.map((conversation) => {
+                  }, children: /* @__PURE__ */ jsx21("h3", { className: "text-[10px] font-semibold uppercase tracking-wide", style: { color: "hsl(var(--chat-text-muted))" }, children: groupName }) }),
+                  /* @__PURE__ */ jsx21("div", { className: "px-1 space-y-0.5", children: groupConversations.map((conversation) => {
                     const isActiveConversation = activeTabId === conversation.id;
-                    return /* @__PURE__ */ jsx20(
+                    return /* @__PURE__ */ jsx21(
                       "button",
                       {
                         className: "w-full px-2 py-1 rounded-md transition-all duration-150 text-left group relative",
@@ -2081,12 +2284,12 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                           }
                         },
                         onClick: () => handleSelectConversation(conversation.id, conversation.title),
-                        children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1.5", children: [
-                          /* @__PURE__ */ jsx20("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx20("p", { className: "text-[12px] line-clamp-1 transition-colors leading-tight", style: {
+                        children: /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1.5", children: [
+                          /* @__PURE__ */ jsx21("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx21("p", { className: "text-[12px] line-clamp-1 transition-colors leading-tight", style: {
                             fontWeight: isActiveConversation ? 500 : 400,
                             color: isActiveConversation ? "hsl(var(--chat-text))" : "hsl(var(--chat-text-strong))"
                           }, children: conversation.title }) }),
-                          /* @__PURE__ */ jsx20(
+                          /* @__PURE__ */ jsx21(
                             ChevronRightIcon2,
                             {
                               className: "h-3 w-3 transition-all duration-150 flex-shrink-0",
@@ -2106,7 +2309,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
               ] })
             ] }),
             headerActions,
-            onClose && /* @__PURE__ */ jsx20(
+            onClose && /* @__PURE__ */ jsx21(
               "button",
               {
                 onClick: onClose,
@@ -2123,21 +2326,21 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                   e.currentTarget.style.backgroundColor = "transparent";
                 },
                 title: "Close Chat",
-                children: /* @__PURE__ */ jsx20(XIcon2, { className: "h-4 w-4", strokeWidth: 2 })
+                children: /* @__PURE__ */ jsx21(XIcon2, { className: "h-4 w-4", strokeWidth: 2 })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs12(Conversation, { className: "flex-1 max-w-full ai-assistant-scrollbar", children: [
-          /* @__PURE__ */ jsxs12(ConversationContent, { className: "max-w-[96%] mx-auto py-6", children: [
+        /* @__PURE__ */ jsxs13(Conversation, { className: "flex-1 max-w-full ai-assistant-scrollbar", children: [
+          /* @__PURE__ */ jsxs13(ConversationContent, { className: "max-w-[96%] mx-auto py-6", children: [
             renderMessages(),
-            status === "submitted" && /* @__PURE__ */ jsx20("div", { className: "mt-6", children: /* @__PURE__ */ jsx20(Message, { from: "assistant", children: /* @__PURE__ */ jsx20(MessageContent, { children: /* @__PURE__ */ jsx20(Loader, { size: 16 }) }) }) })
+            status === "submitted" && /* @__PURE__ */ jsx21("div", { className: "mt-6", children: /* @__PURE__ */ jsx21(Message, { from: "assistant", children: /* @__PURE__ */ jsx21(MessageContent, { children: /* @__PURE__ */ jsx21(Loader, { size: 16 }) }) }) })
           ] }),
-          /* @__PURE__ */ jsx20(ConversationScrollButton, {})
+          /* @__PURE__ */ jsx21(ConversationScrollButton, {})
         ] }),
-        /* @__PURE__ */ jsxs12("div", { className: "px-5 pb-5", children: [
-          uploadError && /* @__PURE__ */ jsx20("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__ */ jsx20("div", { className: "flex items-center justify-center py-8", role: "status", "aria-label": "Loading conversation", children: /* @__PURE__ */ jsx20("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__ */ jsx20(
+        /* @__PURE__ */ jsxs13("div", { className: "px-5 pb-5", children: [
+          uploadError && /* @__PURE__ */ jsx21("div", { className: "mb-3 px-4 py-3 bg-red-50 dark:bg-red-900/20 border border-red-200/60 dark:border-red-800/60 rounded-2xl text-sm text-red-700 dark:text-red-400 shadow-sm", children: uploadError }),
+          isInitializing || isLoadingMessages ? /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center py-8", role: "status", "aria-label": "Loading conversation", children: /* @__PURE__ */ jsx21("div", { className: "h-4 w-4 rounded-full border-2 border-current border-t-transparent animate-spin", style: { color: "hsl(var(--chat-text-muted))" } }) }) : messages.length === 0 && status !== "submitted" && config?.starterPrompts && /* @__PURE__ */ jsx21(
             StarterMessages,
             {
               prompts: config.starterPrompts,
@@ -2146,20 +2349,25 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
               }
             }
           ),
-          /* @__PURE__ */ jsxs12(PromptInput, { onSubmit: handleSubmit, globalDrop: true, multiple: true, accept: "image/*", children: [
-            /* @__PURE__ */ jsxs12(PromptInputBody, { children: [
-              /* @__PURE__ */ jsx20(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ jsx20(PromptInputAttachment, { data: attachment }) }),
-              /* @__PURE__ */ jsx20(
-                PromptInputTextarea,
-                {
-                  onChange: (e) => setInput(e.target.value),
-                  value: input
-                }
-              )
+          /* @__PURE__ */ jsxs13(PromptInput, { onSubmit: handleSubmit, globalDrop: true, multiple: true, accept: "image/*", children: [
+            /* @__PURE__ */ jsxs13(PromptInputBody, { children: [
+              /* @__PURE__ */ jsx21(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ jsx21(PromptInputAttachment, { data: attachment }) }),
+              /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx21(
+                  PromptInputTextarea,
+                  {
+                    ref: inputRef,
+                    onChange: (e) => setInput(e.target.value),
+                    onKeyDown: inputPlugins.onKeyDown,
+                    value: input
+                  }
+                ),
+                inputPlugins.popover
+              ] })
             ] }),
-            /* @__PURE__ */ jsxs12(PromptInputToolbar, { children: [
-              /* @__PURE__ */ jsx20(PromptInputTools, { children: config?.features?.fileUpload === true && /* @__PURE__ */ jsx20(AttachButton, {}) }),
-              /* @__PURE__ */ jsx20(PromptInputSubmit, { disabled: !input, status })
+            /* @__PURE__ */ jsxs13(PromptInputToolbar, { children: [
+              /* @__PURE__ */ jsx21(PromptInputTools, { children: config?.features?.fileUpload === true && /* @__PURE__ */ jsx21(AttachButton, {}) }),
+              /* @__PURE__ */ jsx21(PromptInputSubmit, { disabled: !input, status })
             ] })
           ] })
         ] })
@@ -2207,7 +2415,7 @@ function toHslTripletIfHex(value) {
 }
 
 // src/ChatWidget.tsx
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function ChatWidget({
   userId,
   conversationId,
@@ -2223,14 +2431,15 @@ function ChatWidget({
   onClose,
   headerActions,
   open,
-  onOpenChange
+  onOpenChange,
+  inputPlugins
 }) {
   const layout = display?.layout || "popup";
   const isControlled = open !== void 0;
   const showToggleButton = !isControlled && display?.showToggleButton !== false;
   const resizable = layout === "popup" && display?.resizable !== false;
   const size = display?.size || "default";
-  const [internalIsOpen, setInternalIsOpen] = useState5(
+  const [internalIsOpen, setInternalIsOpen] = useState6(
     layout !== "popup" ? true : display?.defaultOpen || false
   );
   const isOpen = isControlled ? open : internalIsOpen;
@@ -2241,9 +2450,9 @@ function ChatWidget({
       setInternalIsOpen(next);
     }
   };
-  const [isResizing, setIsResizing] = useState5(false);
-  const containerRef = useRef4(null);
-  const customStyles = useMemo3(() => {
+  const [isResizing, setIsResizing] = useState6(false);
+  const containerRef = useRef5(null);
+  const customStyles = useMemo4(() => {
     const styles = {};
     if (display?.width) {
       styles["--chat-widget-width"] = display.width;
@@ -2262,14 +2471,14 @@ function ChatWidget({
     }
     return styles;
   }, [display?.width, theme?.primaryColor, theme?.backgroundColor, theme?.textColor, theme?.tokens]);
-  const handleMouseDown = useCallback4((e) => {
+  const handleMouseDown = useCallback5((e) => {
     if (!resizable) return;
     e.preventDefault();
     setIsResizing(true);
     document.body.style.cursor = "ew-resize";
     document.body.style.userSelect = "none";
   }, [resizable]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isResizing) return;
     const handleMouseMove = (e) => {
       if (!containerRef.current) return;
@@ -2291,25 +2500,26 @@ function ChatWidget({
       document.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isResizing]);
-  const config = useMemo3(() => ({
+  const config = useMemo4(() => ({
     userId,
     model,
     systemPrompt,
     temperature,
     theme,
     features,
-    starterPrompts
-  }), [userId, model, systemPrompt, temperature, theme, features, starterPrompts]);
+    starterPrompts,
+    inputPlugins
+  }), [userId, model, systemPrompt, temperature, theme, features, starterPrompts, inputPlugins]);
   const togglePosition = display?.toggleButtonPosition || { bottom: "24px", right: "24px" };
   const themeClass = theme?.mode === "dark" ? "dark" : "";
   if (layout === "inline") {
-    return /* @__PURE__ */ jsx21(ChatStorageProvider, { userId, children: /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx22(ChatStorageProvider, { userId, children: /* @__PURE__ */ jsx22(
       "div",
       {
         ref: containerRef,
         className: `chat-widget-container chat-widget-inline chat-widget-content ${themeClass} ${className || ""}`,
         style: customStyles,
-        children: /* @__PURE__ */ jsx21(
+        children: /* @__PURE__ */ jsx22(
           ChatInterface,
           {
             id: conversationId,
@@ -2323,13 +2533,13 @@ function ChatWidget({
     ) });
   }
   if (layout === "page") {
-    return /* @__PURE__ */ jsx21(ChatStorageProvider, { userId, children: /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx22(ChatStorageProvider, { userId, children: /* @__PURE__ */ jsx22(
       "div",
       {
         ref: containerRef,
         className: `chat-widget-container chat-widget-page chat-widget-content ${themeClass} ${className || ""}`,
         style: customStyles,
-        children: /* @__PURE__ */ jsx21(
+        children: /* @__PURE__ */ jsx22(
           ChatInterface,
           {
             id: conversationId,
@@ -2342,18 +2552,18 @@ function ChatWidget({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs13(ChatStorageProvider, { userId, children: [
-    showToggleButton && !isOpen && /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs14(ChatStorageProvider, { userId, children: [
+    showToggleButton && !isOpen && /* @__PURE__ */ jsx22(
       "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__ */ jsx21(MessageCircle, { className: "h-6 w-6" })
+        children: /* @__PURE__ */ jsx22(MessageCircle, { className: "h-6 w-6" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs13(
+    isOpen && /* @__PURE__ */ jsxs14(
       "div",
       {
         ref: containerRef,
@@ -2362,7 +2572,7 @@ function ChatWidget({
         "data-resizing": isResizing,
         style: customStyles,
         children: [
-          resizable && /* @__PURE__ */ jsx21(
+          resizable && /* @__PURE__ */ jsx22(
             "div",
             {
               onMouseDown: handleMouseDown,
@@ -2370,7 +2580,7 @@ function ChatWidget({
               "aria-label": "Resize chat widget"
             }
           ),
-          /* @__PURE__ */ jsx21("div", { className: "w-full h-full overflow-hidden", children: /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22("div", { className: "w-full h-full overflow-hidden", children: /* @__PURE__ */ jsx22(
             ChatInterface,
             {
               id: conversationId,
@@ -2391,7 +2601,7 @@ function ChatWidget({
 var ChatWidget_default = ChatWidget;
 
 // src/hooks/use-chat-theme.ts
-import { useState as useState6, useEffect as useEffect6 } from "react";
+import { useState as useState7, useEffect as useEffect7 } from "react";
 
 // src/utils/models.ts
 var MODELS = [
@@ -2511,13 +2721,13 @@ var defaultThemeMode = "light";
 function useChatTheme() {
   const { storageKeyPrefix } = useChatStorageKey();
   const keyPrefix = storageKeyPrefix ? `chat-${storageKeyPrefix}-` : "chat-";
-  const [theme, setTheme] = useState6(defaultTheme);
-  const [conversationStarters, setConversationStarters] = useState6(defaultConversationStarters);
-  const [model, setModel] = useState6(defaultModel);
-  const [systemPrompt, setSystemPrompt] = useState6(defaultSystemPrompt);
-  const [temperature, setTemperature] = useState6(defaultTemperature);
-  const [themeMode, setThemeMode] = useState6(defaultThemeMode);
-  useEffect6(() => {
+  const [theme, setTheme] = useState7(defaultTheme);
+  const [conversationStarters, setConversationStarters] = useState7(defaultConversationStarters);
+  const [model, setModel] = useState7(defaultModel);
+  const [systemPrompt, setSystemPrompt] = useState7(defaultSystemPrompt);
+  const [temperature, setTemperature] = useState7(defaultTemperature);
+  const [themeMode, setThemeMode] = useState7(defaultThemeMode);
+  useEffect7(() => {
     const savedTheme = localStorage.getItem(`${keyPrefix}theme`);
     if (savedTheme) {
       try {
@@ -2605,7 +2815,7 @@ function useChatTheme() {
       window.removeEventListener("chat-theme-mode-change", handleThemeModeChange);
     };
   }, [keyPrefix]);
-  useEffect6(() => {
+  useEffect7(() => {
     localStorage.setItem(`${keyPrefix}theme`, JSON.stringify(theme));
     const root = document.documentElement;
     if (themeMode === "light") {
@@ -2621,23 +2831,23 @@ function useChatTheme() {
     root.style.setProperty("--chat-font-size", `${theme.fontSize}px`);
     window.dispatchEvent(new CustomEvent("chat-theme-change", { detail: theme }));
   }, [theme, themeMode, keyPrefix]);
-  useEffect6(() => {
+  useEffect7(() => {
     localStorage.setItem(`${keyPrefix}conversation-starters`, JSON.stringify(conversationStarters));
     window.dispatchEvent(new CustomEvent("chat-starters-change", { detail: conversationStarters }));
   }, [conversationStarters, keyPrefix]);
-  useEffect6(() => {
+  useEffect7(() => {
     localStorage.setItem(`${keyPrefix}model`, model);
     window.dispatchEvent(new CustomEvent("chat-model-change", { detail: model }));
   }, [model, keyPrefix]);
-  useEffect6(() => {
+  useEffect7(() => {
     localStorage.setItem(`${keyPrefix}system-prompt`, systemPrompt);
     window.dispatchEvent(new CustomEvent("chat-system-prompt-change", { detail: systemPrompt }));
   }, [systemPrompt, keyPrefix]);
-  useEffect6(() => {
+  useEffect7(() => {
     localStorage.setItem(`${keyPrefix}temperature`, temperature.toString());
     window.dispatchEvent(new CustomEvent("chat-temperature-change", { detail: temperature }));
   }, [temperature, keyPrefix]);
-  useEffect6(() => {
+  useEffect7(() => {
     localStorage.setItem(`${keyPrefix}theme-mode`, themeMode);
     window.dispatchEvent(new CustomEvent("chat-theme-mode-change", { detail: themeMode }));
   }, [themeMode, keyPrefix]);
@@ -2706,11 +2916,11 @@ function useChatTheme() {
 }
 
 // src/ui/input.tsx
-import * as React from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var Input = React.forwardRef(
+import * as React2 from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var Input = React2.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx23(
       "input",
       {
         type,
@@ -2729,22 +2939,22 @@ Input.displayName = "Input";
 // src/ui/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { XIcon as XIcon3 } from "lucide-react";
-import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx24(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx24(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -2762,9 +2972,9 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs14(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx23(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx24(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs15(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
@@ -2775,14 +2985,14 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsxs14(
+          showCloseButton && /* @__PURE__ */ jsxs15(
             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__ */ jsx23(XIcon3, {}),
-                /* @__PURE__ */ jsx23("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx24(XIcon3, {}),
+                /* @__PURE__ */ jsx24("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -2792,7 +3002,7 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       "data-slot": "dialog-header",
@@ -2805,7 +3015,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -2818,7 +3028,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",