@mordn/chat-widget 0.8.1 → 0.10.1

package/dist/index.js

@@ -48,6 +48,7 @@ __export(src_exports, {
   ToolHeader: () => ToolHeader,
   ToolInput: () => ToolInput,
   ToolOutput: () => ToolOutput,
+  clearChatStorage: () => clearChatStorage,
   default: () => ChatWidget_default,
   fontOptions: () => fontOptions,
   useChatStorageKey: () => useChatStorageKey,
@@ -592,14 +593,32 @@ var PromptInputBody = ({
   className,
   ...props
 }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn(className, "flex flex-col"), ...props });
+var TEXTAREA_MIN_HEIGHT = 28;
+var TEXTAREA_MAX_HEIGHT = 192;
 var PromptInputTextarea = import_react2.default.forwardRef(({
   onChange,
   onKeyDown: externalOnKeyDown,
   className,
   placeholder = "What would you like to know?",
+  value,
   ...props
 }, ref) => {
   const attachments = usePromptInputAttachments();
+  const innerRef = (0, import_react2.useRef)(null);
+  const setRefs = (node) => {
+    innerRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const resize = () => {
+    const el = innerRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    const next = Math.min(el.scrollHeight, TEXTAREA_MAX_HEIGHT);
+    el.style.height = `${Math.max(next, TEXTAREA_MIN_HEIGHT)}px`;
+    el.style.overflowY = el.scrollHeight > TEXTAREA_MAX_HEIGHT ? "auto" : "hidden";
+  };
+  (0, import_react2.useLayoutEffect)(resize, [value]);
   const handleKeyDown = (e) => {
     externalOnKeyDown?.(e);
     if (e.defaultPrevented) return;
@@ -639,17 +658,19 @@ var PromptInputTextarea = import_react2.default.forwardRef(({
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Textarea,
     {
-      ref,
+      ref: setRefs,
+      rows: 1,
+      value,
       className: cn(
-        "w-full resize-none rounded-none border-none p-3 shadow-none outline-none ring-0",
-        "field-sizing-content",
-        "max-h-48 min-h-16",
+        "w-full resize-none rounded-none border-none px-3 py-2.5 shadow-none outline-none ring-0",
         "focus-visible:ring-0 focus-visible:shadow-none focus:ring-0 focus:shadow-none",
         className
       ),
+      style: { minHeight: TEXTAREA_MIN_HEIGHT, maxHeight: TEXTAREA_MAX_HEIGHT, overflowY: "hidden" },
       name: "message",
       onChange: (e) => {
         onChange?.(e);
+        resize();
       },
       onKeyDown: handleKeyDown,
       onPaste: handlePaste,
@@ -659,30 +680,6 @@ var PromptInputTextarea = import_react2.default.forwardRef(({
   );
 });
 PromptInputTextarea.displayName = "PromptInputTextarea";
-var PromptInputToolbar = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-  "div",
-  {
-    className: cn("flex items-center justify-between p-1", className),
-    ...props
-  }
-);
-var PromptInputTools = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-  "div",
-  {
-    className: cn(
-      "flex items-center gap-1",
-      "[&_button:first-child]:rounded-bl-xl",
-      className
-    ),
-    ...props
-  }
-);
 var PromptInputButton = ({
   variant = "ghost",
   className,
@@ -1923,24 +1920,38 @@ function StarterMessageItem({
 var import_react10 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var ChatStorageContext = (0, import_react10.createContext)({
-  storageKeyPrefix: ""
+  storageKeyPrefix: null
 });
 function ChatStorageProvider({
   children,
-  userId
+  userId,
+  agentId
 }) {
-  const storageKeyPrefix = userId || "";
+  const storageKeyPrefix = userId && agentId ? `${encodeURIComponent(agentId)}|${encodeURIComponent(userId)}` : null;
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChatStorageContext.Provider, { value: { storageKeyPrefix }, children });
 }
 function useChatStorageKey() {
   return (0, import_react10.useContext)(ChatStorageContext);
 }
+function clearChatStorage(opts) {
+  if (typeof window === "undefined" || !window.localStorage) return;
+  const scopedPrefix = opts?.agentId && opts?.userId ? `chat-${encodeURIComponent(opts.agentId)}|${encodeURIComponent(opts.userId)}-` : null;
+  const toRemove = [];
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (!key) continue;
+    if (scopedPrefix ? key.startsWith(scopedPrefix) : key.startsWith("chat-")) {
+      toRemove.push(key);
+    }
+  }
+  toRemove.forEach((key) => localStorage.removeItem(key));
+}
 
 // src/components/interface.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function ChatInterface({ id, initialMessages, config, onClose, headerActions } = {}) {
   const { storageKeyPrefix } = useChatStorageKey();
-  const storageKey = (key) => storageKeyPrefix ? `chat-${storageKeyPrefix}-${key}` : `chat-${key}`;
+  const storageKey = (key) => storageKeyPrefix ? `chat-${storageKeyPrefix}-${key}` : null;
   const themeMode = config?.theme?.mode || "light";
   const [input, setInput] = (0, import_react11.useState)("");
   const inputRef = (0, import_react11.useRef)(null);
@@ -1972,9 +1983,12 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
   const { messages, sendMessage, status, setMessages, stop, regenerate, error, clearError } = (0, import_react13.useChat)({
     id: activeTabId || "temp-id",
     transport: new import_ai.DefaultChatTransport({
-      api: "/api/chat",
+      api: `${config?.apiBase ?? "/api/chat"}`,
       headers: {
-        "X-User-Id": config?.userId || ""
+        "X-User-Id": config?.userId || "",
+        // Extra headers the host injects (e.g. the dashboard playground sends
+        // its unsaved draft model/system-prompt for an owner-authed preview).
+        ...config?.extraHeaders ?? {}
       }
     }),
     // Throttle UI updates to 200ms to prevent hanging during streaming
@@ -1998,7 +2012,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
             formData.append("file", fileObj);
             formData.append("conversationId", activeTabId || "default");
             formData.append("userId", config?.userId || "demo-user");
-            const uploadResponse = await fetch("/api/chat/upload", {
+            const uploadResponse = await fetch(`${config?.apiBase ?? "/api/chat"}/upload`, {
               method: "POST",
               body: formData
             });
@@ -2062,8 +2076,11 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       PromptInputButton,
       {
         variant: "ghost",
+        size: "icon",
+        className: "size-9 rounded-full text-muted-foreground",
+        "aria-label": "Attach files",
         onClick: () => attachments.openFileDialog(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.PlusIcon, { className: "size-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.PaperclipIcon, { className: "size-4 -rotate-45" })
       }
     );
   };
@@ -2073,7 +2090,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       return;
     }
     try {
-      const response = await fetch(`/api/chat/history/${conversationId}?userId=${config.userId}`);
+      const response = await fetch(`${config?.apiBase ?? "/api/chat"}/history/${conversationId}?userId=${config.userId}`);
       if (response.ok) {
         const data = await response.json();
         const loadedMessages = data.messages || [];
@@ -2132,10 +2149,20 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
   const startNewConversation = (0, import_react11.useCallback)(() => {
     createNewTab();
   }, [createNewTab]);
+  const prevPrefixRef = (0, import_react11.useRef)(storageKeyPrefix);
   (0, import_react11.useEffect)(() => {
-    return () => {
-    };
-  }, []);
+    const prev = prevPrefixRef.current;
+    if (prev && prev !== storageKeyPrefix) {
+      const stalePrefix = `chat-${prev}-`;
+      const toRemove = [];
+      for (let i = 0; i < localStorage.length; i++) {
+        const k = localStorage.key(i);
+        if (k && k.startsWith(stalePrefix)) toRemove.push(k);
+      }
+      toRemove.forEach((k) => localStorage.removeItem(k));
+    }
+    prevPrefixRef.current = storageKeyPrefix;
+  }, [storageKeyPrefix]);
   const switchToTab = async (tabId) => {
     const targetTab = tabs.find((tab) => tab.id === tabId);
     if (!targetTab) return;
@@ -2166,11 +2193,13 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
     } else {
       setTabs(filteredTabs);
     }
-    if (filteredTabs.length > 0) {
-      localStorage.setItem(storageKey("tabs"), JSON.stringify(filteredTabs));
+    const tabsKey = storageKey("tabs");
+    if (filteredTabs.length > 0 && tabsKey) {
+      localStorage.setItem(tabsKey, JSON.stringify(filteredTabs));
       if (tabId === activeTabId) {
         const newActiveTab = filteredTabs[0];
-        localStorage.setItem(storageKey("active-tab-id"), newActiveTab.id);
+        const activeKey = storageKey("active-tab-id");
+        if (activeKey) localStorage.setItem(activeKey, newActiveTab.id);
       }
     }
   };
@@ -2181,7 +2210,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
     }
     setLoadingHistory(true);
     try {
-      const response = await fetch(`/api/chat/history?userId=${config.userId}`);
+      const response = await fetch(`${config?.apiBase ?? "/api/chat"}/history?userId=${config.userId}`);
       if (response.ok) {
         const data = await response.json();
         setConversations(data.conversations || []);
@@ -2210,29 +2239,38 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
   (0, import_react11.useEffect)(() => {
     if (tabs.length > 0) {
       const timeoutId = setTimeout(() => {
-        localStorage.setItem(storageKey("tabs"), JSON.stringify(tabs));
-        localStorage.setItem(storageKey("active-tab-id"), activeTabId);
+        const tabsKey = storageKey("tabs");
+        const activeKey = storageKey("active-tab-id");
+        if (tabsKey) localStorage.setItem(tabsKey, JSON.stringify(tabs));
+        if (activeKey) localStorage.setItem(activeKey, activeTabId);
       }, 500);
       return () => clearTimeout(timeoutId);
     }
-  }, [tabs, activeTabId, storageKey]);
+  }, [tabs, activeTabId, storageKeyPrefix]);
   (0, import_react11.useEffect)(() => {
     if (hasInitialized.current) return;
+    const startCleanTab = () => {
+      const initialTabId = `chat-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+      setTabs([{ id: initialTabId, title: "New Chat", isActive: true }]);
+      setActiveTabId(initialTabId);
+      setInitialTabCreated(true);
+      setIsInitializing(false);
+    };
+    if (!storageKeyPrefix) {
+      if (!initialTabCreated && tabs.length === 0) startCleanTab();
+      return;
+    }
     const loadInitialTabs = () => {
-      const savedTabs = localStorage.getItem(storageKey("tabs"));
-      const savedActiveTabId = localStorage.getItem(storageKey("active-tab-id"));
+      const savedTabs = localStorage.getItem(`chat-${storageKeyPrefix}-tabs`);
+      const savedActiveTabId = localStorage.getItem(`chat-${storageKeyPrefix}-active-tab-id`);
       if (savedTabs && savedTabs !== "[]") {
         const parsedTabs = JSON.parse(savedTabs);
         setTabs(parsedTabs);
         const activeId = savedActiveTabId || parsedTabs[0]?.id;
         setActiveTabId(activeId);
         setInitialTabCreated(true);
-      } else if (!initialTabCreated && tabs.length === 0) {
-        const initialTabId = `chat-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        setTabs([{ id: initialTabId, title: "New Chat", isActive: true }]);
-        setActiveTabId(initialTabId);
-        setInitialTabCreated(true);
-        setIsInitializing(false);
+      } else if (tabs.length === 0) {
+        startCleanTab();
       }
     };
     try {
@@ -2242,11 +2280,12 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       setIsInitializing(false);
     }
     hasInitialized.current = true;
-  }, []);
+  }, [storageKeyPrefix]);
   const hasLoadedInitialMessages = (0, import_react11.useRef)(false);
   (0, import_react11.useEffect)(() => {
     if (hasLoadedInitialMessages.current) return;
     if (!config?.userId) return;
+    if (!storageKeyPrefix) return;
     if (!activeTabId) return;
     (async () => {
       try {
@@ -2256,7 +2295,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
         setIsInitializing(false);
       }
     })();
-  }, [config?.userId, activeTabId]);
+  }, [config?.userId, activeTabId, storageKeyPrefix]);
   (0, import_react11.useEffect)(() => {
     if (isInitializing) return;
     if (activeTabId && tabs.length > 0 && activeTabId !== lastSyncedTabId.current) {
@@ -2713,7 +2752,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
             }
           ),
           inputPlugins.panel,
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             PromptInput,
             {
               onSubmit: handleSubmit,
@@ -2734,31 +2773,31 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                   setUploadError("Too many files attached.");
                 }
               },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(PromptInputBody, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PromptInputAttachment, { data: attachment }) }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(PromptInputBody, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PromptInputAttachment, { data: attachment }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-end gap-1.5 px-2 py-2", children: [
+                  config?.features?.fileUpload === true && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AttachButton, {}),
                   /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     PromptInputTextarea,
                     {
                       ref: inputRef,
                       onChange: (e) => setInput(e.target.value),
                       onKeyDown: inputPlugins.onKeyDown,
-                      value: input
+                      value: input,
+                      className: "min-h-0 flex-1 px-1 py-1.5 leading-7"
                     }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(PromptInputToolbar, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PromptInputTools, { children: config?.features?.fileUpload === true && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AttachButton, {}) }),
+                  ),
                   /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     PromptInputSubmit,
                     {
+                      className: "size-9 rounded-full p-0 [&_svg]:size-4",
                       disabled: status === "streaming" || status === "submitted" ? false : !input,
                       status,
                       onStop: stop
                     }
                   )
                 ] })
-              ]
+              ] })
             }
           )
         ] })
@@ -2809,6 +2848,10 @@ function toHslTripletIfHex(value) {
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function ChatWidget({
   userId,
+  agentId,
+  apiBase,
+  extraHeaders,
+  widgetId,
   conversationId,
   initialMessages,
   className,
@@ -2826,6 +2869,7 @@ function ChatWidget({
   inputPlugins,
   toolRenderers
 }) {
+  const effectiveAgentId = agentId ?? widgetId;
   const layout = display?.layout || "popup";
   const isControlled = open !== void 0;
   const showToggleButton = !isControlled && display?.showToggleButton !== false;
@@ -2894,6 +2938,8 @@ function ChatWidget({
   }, [isResizing]);
   const config = (0, import_react14.useMemo)(() => ({
     userId,
+    apiBase: apiBase ?? "/api/chat",
+    extraHeaders,
     model,
     systemPrompt,
     temperature,
@@ -2902,11 +2948,11 @@ function ChatWidget({
     starterPrompts,
     inputPlugins,
     toolRenderers
-  }), [userId, model, systemPrompt, temperature, theme, features, starterPrompts, inputPlugins, toolRenderers]);
+  }), [userId, apiBase, extraHeaders, model, systemPrompt, temperature, theme, features, starterPrompts, inputPlugins, toolRenderers]);
   const togglePosition = display?.toggleButtonPosition || { bottom: "24px", right: "24px" };
   const themeClass = theme?.mode === "dark" ? "dark" : "";
   if (layout === "inline") {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChatStorageProvider, { userId, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChatStorageProvider, { userId, agentId: effectiveAgentId, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
         ref: containerRef,
@@ -2926,7 +2972,7 @@ function ChatWidget({
     ) });
   }
   if (layout === "page") {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChatStorageProvider, { userId, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChatStorageProvider, { userId, agentId: effectiveAgentId, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
         ref: containerRef,
@@ -2945,7 +2991,7 @@ function ChatWidget({
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ChatStorageProvider, { userId, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ChatStorageProvider, { userId, agentId: effectiveAgentId, children: [
     showToggleButton && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "button",
       {
@@ -3042,7 +3088,6 @@ var MODELS = [
     value: "google/gemini-2.5-pro"
   }
 ];
-var DEFAULT_MODEL = MODELS[0].value;
 
 // src/hooks/use-chat-theme.ts
 function hexToHSL(hex) {
@@ -3107,13 +3152,13 @@ var defaultConversationStarters = [
   { text: "What features does this product offer?", enabled: true },
   { text: "Tell me about your capabilities", enabled: true }
 ];
-var defaultModel = DEFAULT_MODEL;
+var defaultModel = MODELS[0].value;
 var defaultSystemPrompt = "You are a helpful AI assistant.";
 var defaultTemperature = 0.7;
 var defaultThemeMode = "light";
 function useChatTheme() {
   const { storageKeyPrefix } = useChatStorageKey();
-  const keyPrefix = storageKeyPrefix ? `chat-${storageKeyPrefix}-` : "chat-";
+  const keyPrefix = storageKeyPrefix ? `chat-${storageKeyPrefix}-` : null;
   const [theme, setTheme] = (0, import_react15.useState)(defaultTheme);
   const [conversationStarters, setConversationStarters] = (0, import_react15.useState)(defaultConversationStarters);
   const [model, setModel] = (0, import_react15.useState)(defaultModel);
@@ -3121,6 +3166,7 @@ function useChatTheme() {
   const [temperature, setTemperature] = (0, import_react15.useState)(defaultTemperature);
   const [themeMode, setThemeMode] = (0, import_react15.useState)(defaultThemeMode);
   (0, import_react15.useEffect)(() => {
+    if (!keyPrefix) return;
     const savedTheme = localStorage.getItem(`${keyPrefix}theme`);
     if (savedTheme) {
       try {
@@ -3209,7 +3255,7 @@ function useChatTheme() {
     };
   }, [keyPrefix]);
   (0, import_react15.useEffect)(() => {
-    localStorage.setItem(`${keyPrefix}theme`, JSON.stringify(theme));
+    if (keyPrefix) localStorage.setItem(`${keyPrefix}theme`, JSON.stringify(theme));
     const root = document.documentElement;
     if (themeMode === "light") {
       root.style.setProperty("--chat-primary", hexToHSL(theme.lightPrimary));
@@ -3225,23 +3271,23 @@ function useChatTheme() {
     window.dispatchEvent(new CustomEvent("chat-theme-change", { detail: theme }));
   }, [theme, themeMode, keyPrefix]);
   (0, import_react15.useEffect)(() => {
-    localStorage.setItem(`${keyPrefix}conversation-starters`, JSON.stringify(conversationStarters));
+    if (keyPrefix) localStorage.setItem(`${keyPrefix}conversation-starters`, JSON.stringify(conversationStarters));
     window.dispatchEvent(new CustomEvent("chat-starters-change", { detail: conversationStarters }));
   }, [conversationStarters, keyPrefix]);
   (0, import_react15.useEffect)(() => {
-    localStorage.setItem(`${keyPrefix}model`, model);
+    if (keyPrefix) localStorage.setItem(`${keyPrefix}model`, model);
     window.dispatchEvent(new CustomEvent("chat-model-change", { detail: model }));
   }, [model, keyPrefix]);
   (0, import_react15.useEffect)(() => {
-    localStorage.setItem(`${keyPrefix}system-prompt`, systemPrompt);
+    if (keyPrefix) localStorage.setItem(`${keyPrefix}system-prompt`, systemPrompt);
     window.dispatchEvent(new CustomEvent("chat-system-prompt-change", { detail: systemPrompt }));
   }, [systemPrompt, keyPrefix]);
   (0, import_react15.useEffect)(() => {
-    localStorage.setItem(`${keyPrefix}temperature`, temperature.toString());
+    if (keyPrefix) localStorage.setItem(`${keyPrefix}temperature`, temperature.toString());
     window.dispatchEvent(new CustomEvent("chat-temperature-change", { detail: temperature }));
   }, [temperature, keyPrefix]);
   (0, import_react15.useEffect)(() => {
-    localStorage.setItem(`${keyPrefix}theme-mode`, themeMode);
+    if (keyPrefix) localStorage.setItem(`${keyPrefix}theme-mode`, themeMode);
     window.dispatchEvent(new CustomEvent("chat-theme-mode-change", { detail: themeMode }));
   }, [themeMode, keyPrefix]);
   const updateColor = (key, value) => {
@@ -3448,6 +3494,7 @@ function DialogDescription({
   ToolHeader,
   ToolInput,
   ToolOutput,
+  clearChatStorage,
   fontOptions,
   useChatStorageKey,
   useChatTheme