@mordn/chat-widget 0.9.0 → 0.10.1

package/dist/index.mjs

@@ -560,14 +560,32 @@ var PromptInputBody = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsx8("div", { className: cn(className, "flex flex-col"), ...props });
+var TEXTAREA_MIN_HEIGHT = 28;
+var TEXTAREA_MAX_HEIGHT = 192;
 var PromptInputTextarea = React2.forwardRef(({
   onChange,
   onKeyDown: externalOnKeyDown,
   className,
   placeholder = "What would you like to know?",
+  value,
   ...props
 }, ref) => {
   const attachments = usePromptInputAttachments();
+  const innerRef = 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";
+  };
+  useLayoutEffect(resize, [value]);
   const handleKeyDown = (e) => {
     externalOnKeyDown?.(e);
     if (e.defaultPrevented) return;
@@ -607,17 +625,19 @@ var PromptInputTextarea = React2.forwardRef(({
   return /* @__PURE__ */ jsx8(
     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,
@@ -627,30 +647,6 @@ var PromptInputTextarea = React2.forwardRef(({
   );
 });
 PromptInputTextarea.displayName = "PromptInputTextarea";
-var PromptInputToolbar = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx8(
-  "div",
-  {
-    className: cn("flex items-center justify-between p-1", className),
-    ...props
-  }
-);
-var PromptInputTools = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx8(
-  "div",
-  {
-    className: cn(
-      "flex items-center gap-1",
-      "[&_button:first-child]:rounded-bl-xl",
-      className
-    ),
-    ...props
-  }
-);
 var PromptInputButton = ({
   variant = "ghost",
   className,
@@ -1199,7 +1195,7 @@ function ActionButton({ onClick, disabled, ariaLabel, children }) {
 
 // src/components/interface.tsx
 import { useState as useState6, useEffect as useEffect5, useRef as useRef4, useMemo as useMemo3, useCallback as useCallback4 } from "react";
-import { HistoryIcon, MessageSquareIcon, SearchIcon, ChevronRightIcon as ChevronRightIcon2, PlusIcon as PlusIcon2, XIcon as XIcon3 } from "lucide-react";
+import { HistoryIcon, MessageSquareIcon, SearchIcon, ChevronRightIcon as ChevronRightIcon2, PaperclipIcon as PaperclipIcon2, PlusIcon as PlusIcon2, XIcon as XIcon3 } from "lucide-react";
 import { Fragment as Fragment5 } from "react";
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
@@ -1906,24 +1902,38 @@ function StarterMessageItem({
 import { createContext as createContext4, useContext as useContext4 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var ChatStorageContext = createContext4({
-  storageKeyPrefix: ""
+  storageKeyPrefix: null
 });
 function ChatStorageProvider({
   children,
-  userId
+  userId,
+  agentId
 }) {
-  const storageKeyPrefix = userId || "";
+  const storageKeyPrefix = userId && agentId ? `${encodeURIComponent(agentId)}|${encodeURIComponent(userId)}` : null;
   return /* @__PURE__ */ jsx22(ChatStorageContext.Provider, { value: { storageKeyPrefix }, children });
 }
 function useChatStorageKey() {
   return useContext4(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
 import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function ChatInterface({ id, initialMessages, config, onClose, headerActions } = {}) {
   const { storageKeyPrefix } = useChatStorageKey();
-  const storageKey = (key) => storageKeyPrefix ? `chat-${storageKeyPrefix}-${key}` : `chat-${key}`;
+  const storageKey = (key) => storageKeyPrefix ? `chat-${storageKeyPrefix}-${key}` : null;
   const themeMode = config?.theme?.mode || "light";
   const [input, setInput] = useState6("");
   const inputRef = useRef4(null);
@@ -1955,9 +1965,12 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
   const { messages, sendMessage, status, setMessages, stop, regenerate, error, clearError } = useChat({
     id: activeTabId || "temp-id",
     transport: new 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
@@ -1981,7 +1994,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
             });
@@ -2045,8 +2058,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__ */ jsx23(PlusIcon2, { className: "size-4" })
+        children: /* @__PURE__ */ jsx23(PaperclipIcon2, { className: "size-4 -rotate-45" })
       }
     );
   };
@@ -2056,7 +2072,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 || [];
@@ -2115,10 +2131,20 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
   const startNewConversation = useCallback4(() => {
     createNewTab();
   }, [createNewTab]);
+  const prevPrefixRef = useRef4(storageKeyPrefix);
   useEffect5(() => {
-    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;
@@ -2149,11 +2175,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);
       }
     }
   };
@@ -2164,7 +2192,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 || []);
@@ -2193,29 +2221,38 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
   useEffect5(() => {
     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]);
   useEffect5(() => {
     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 {
@@ -2225,11 +2262,12 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       setIsInitializing(false);
     }
     hasInitialized.current = true;
-  }, []);
+  }, [storageKeyPrefix]);
   const hasLoadedInitialMessages = useRef4(false);
   useEffect5(() => {
     if (hasLoadedInitialMessages.current) return;
     if (!config?.userId) return;
+    if (!storageKeyPrefix) return;
     if (!activeTabId) return;
     (async () => {
       try {
@@ -2239,7 +2277,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
         setIsInitializing(false);
       }
     })();
-  }, [config?.userId, activeTabId]);
+  }, [config?.userId, activeTabId, storageKeyPrefix]);
   useEffect5(() => {
     if (isInitializing) return;
     if (activeTabId && tabs.length > 0 && activeTabId !== lastSyncedTabId.current) {
@@ -2696,7 +2734,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
             }
           ),
           inputPlugins.panel,
-          /* @__PURE__ */ jsxs16(
+          /* @__PURE__ */ jsx23(
             PromptInput,
             {
               onSubmit: handleSubmit,
@@ -2717,31 +2755,31 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                   setUploadError("Too many files attached.");
                 }
               },
-              children: [
-                /* @__PURE__ */ jsxs16(PromptInputBody, { children: [
-                  /* @__PURE__ */ jsx23(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ jsx23(PromptInputAttachment, { data: attachment }) }),
+              children: /* @__PURE__ */ jsxs16(PromptInputBody, { children: [
+                /* @__PURE__ */ jsx23(PromptInputAttachments, { children: (attachment) => /* @__PURE__ */ jsx23(PromptInputAttachment, { data: attachment }) }),
+                /* @__PURE__ */ jsxs16("div", { className: "flex items-end gap-1.5 px-2 py-2", children: [
+                  config?.features?.fileUpload === true && /* @__PURE__ */ jsx23(AttachButton, {}),
                   /* @__PURE__ */ jsx23(
                     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__ */ jsxs16(PromptInputToolbar, { children: [
-                  /* @__PURE__ */ jsx23(PromptInputTools, { children: config?.features?.fileUpload === true && /* @__PURE__ */ jsx23(AttachButton, {}) }),
+                  ),
                   /* @__PURE__ */ jsx23(
                     PromptInputSubmit,
                     {
+                      className: "size-9 rounded-full p-0 [&_svg]:size-4",
                       disabled: status === "streaming" || status === "submitted" ? false : !input,
                       status,
                       onStop: stop
                     }
                   )
                 ] })
-              ]
+              ] })
             }
           )
         ] })
@@ -2792,6 +2830,10 @@ function toHslTripletIfHex(value) {
 import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function ChatWidget({
   userId,
+  agentId,
+  apiBase,
+  extraHeaders,
+  widgetId,
   conversationId,
   initialMessages,
   className,
@@ -2809,6 +2851,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;
@@ -2877,6 +2920,8 @@ function ChatWidget({
   }, [isResizing]);
   const config = useMemo4(() => ({
     userId,
+    apiBase: apiBase ?? "/api/chat",
+    extraHeaders,
     model,
     systemPrompt,
     temperature,
@@ -2885,11 +2930,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__ */ jsx24(ChatStorageProvider, { userId, children: /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx24(ChatStorageProvider, { userId, agentId: effectiveAgentId, children: /* @__PURE__ */ jsx24(
       "div",
       {
         ref: containerRef,
@@ -2909,7 +2954,7 @@ function ChatWidget({
     ) });
   }
   if (layout === "page") {
-    return /* @__PURE__ */ jsx24(ChatStorageProvider, { userId, children: /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx24(ChatStorageProvider, { userId, agentId: effectiveAgentId, children: /* @__PURE__ */ jsx24(
       "div",
       {
         ref: containerRef,
@@ -2928,7 +2973,7 @@ function ChatWidget({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs17(ChatStorageProvider, { userId, children: [
+  return /* @__PURE__ */ jsxs17(ChatStorageProvider, { userId, agentId: effectiveAgentId, children: [
     showToggleButton && !isOpen && /* @__PURE__ */ jsx24(
       "button",
       {
@@ -3025,7 +3070,6 @@ var MODELS = [
     value: "google/gemini-2.5-pro"
   }
 ];
-var DEFAULT_MODEL = MODELS[0].value;
 
 // src/hooks/use-chat-theme.ts
 function hexToHSL(hex) {
@@ -3090,13 +3134,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] = useState8(defaultTheme);
   const [conversationStarters, setConversationStarters] = useState8(defaultConversationStarters);
   const [model, setModel] = useState8(defaultModel);
@@ -3104,6 +3148,7 @@ function useChatTheme() {
   const [temperature, setTemperature] = useState8(defaultTemperature);
   const [themeMode, setThemeMode] = useState8(defaultThemeMode);
   useEffect7(() => {
+    if (!keyPrefix) return;
     const savedTheme = localStorage.getItem(`${keyPrefix}theme`);
     if (savedTheme) {
       try {
@@ -3192,7 +3237,7 @@ function useChatTheme() {
     };
   }, [keyPrefix]);
   useEffect7(() => {
-    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));
@@ -3208,23 +3253,23 @@ function useChatTheme() {
     window.dispatchEvent(new CustomEvent("chat-theme-change", { detail: theme }));
   }, [theme, themeMode, keyPrefix]);
   useEffect7(() => {
-    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]);
   useEffect7(() => {
-    localStorage.setItem(`${keyPrefix}model`, model);
+    if (keyPrefix) localStorage.setItem(`${keyPrefix}model`, model);
     window.dispatchEvent(new CustomEvent("chat-model-change", { detail: model }));
   }, [model, keyPrefix]);
   useEffect7(() => {
-    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]);
   useEffect7(() => {
-    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]);
   useEffect7(() => {
-    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) => {
@@ -3430,6 +3475,7 @@ export {
   ToolHeader,
   ToolInput,
   ToolOutput,
+  clearChatStorage,
   ChatWidget_default as default,
   fontOptions,
   useChatStorageKey,