@mordn/chat-widget 0.4.2 → 0.5.0

package/dist/index.d.mts

@@ -67,6 +67,21 @@ interface ChatWidgetConfig {
      * (e.g. setting their open state, navigating away).
      */
     onClose?: () => void;
+    /**
+     * Controlled open state for `popup` layout. When provided, the consumer
+     * owns the show/hide lifecycle and the widget will NOT render its own
+     * floating toggle button (FAB). The consumer renders whatever trigger
+     * they want and toggles `open` themselves.
+     *
+     * Leave undefined to use the widget's built-in uncontrolled behaviour
+     * (FAB appears when closed, click opens, internal state).
+     */
+    open?: boolean;
+    /**
+     * Called when the widget wants to change its open state (e.g. user
+     * clicked the close X). Required when using `open` (controlled mode).
+     */
+    onOpenChange?: (open: boolean) => void;
     /**
      * Custom buttons rendered in the widget header next to the close X.
      * Use this for "expand to full page", "settings", or any consumer-defined
@@ -211,7 +226,7 @@ interface ChatWidgetProps extends ChatWidgetConfig {
      */
     widgetId?: string;
 }
-declare function ChatWidget({ userId, conversationId, initialMessages, className, model, systemPrompt, temperature, theme, features, display, starterPrompts, onClose, headerActions, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
+declare function ChatWidget({ userId, conversationId, initialMessages, className, model, systemPrompt, temperature, theme, features, display, starterPrompts, onClose, headerActions, open, onOpenChange, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface ChatTheme {
     lightPrimary: string;

package/dist/index.d.ts

@@ -67,6 +67,21 @@ interface ChatWidgetConfig {
      * (e.g. setting their open state, navigating away).
      */
     onClose?: () => void;
+    /**
+     * Controlled open state for `popup` layout. When provided, the consumer
+     * owns the show/hide lifecycle and the widget will NOT render its own
+     * floating toggle button (FAB). The consumer renders whatever trigger
+     * they want and toggles `open` themselves.
+     *
+     * Leave undefined to use the widget's built-in uncontrolled behaviour
+     * (FAB appears when closed, click opens, internal state).
+     */
+    open?: boolean;
+    /**
+     * Called when the widget wants to change its open state (e.g. user
+     * clicked the close X). Required when using `open` (controlled mode).
+     */
+    onOpenChange?: (open: boolean) => void;
     /**
      * Custom buttons rendered in the widget header next to the close X.
      * Use this for "expand to full page", "settings", or any consumer-defined
@@ -211,7 +226,7 @@ interface ChatWidgetProps extends ChatWidgetConfig {
      */
     widgetId?: string;
 }
-declare function ChatWidget({ userId, conversationId, initialMessages, className, model, systemPrompt, temperature, theme, features, display, starterPrompts, onClose, headerActions, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
+declare function ChatWidget({ userId, conversationId, initialMessages, className, model, systemPrompt, temperature, theme, features, display, starterPrompts, onClose, headerActions, open, onOpenChange, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface ChatTheme {
     lightPrimary: string;

package/dist/index.js

@@ -520,7 +520,11 @@ var PromptInput = ({
       "form",
       {
         className: cn(
-          "w-full divide-y divide-[hsl(var(--chat-text)/0.1)] focus-within:divide-ring overflow-hidden rounded-xl border border-[hsl(var(--chat-text)/0.1)] bg-background focus-within:border-ring transition-colors",
+          // The form border + horizontal divider colour both come from
+          // the styles.src.css `.chat-widget-container form ...` rules so
+          // there's a single token (--chat-divider) controlling both.
+          // No utility classes for border colour here.
+          "w-full overflow-hidden rounded-xl bg-background transition-colors",
           "[&:focus-within]:shadow-none [&:focus]:shadow-none shadow-none",
           className
         ),
@@ -1194,7 +1198,7 @@ var CodeBlock = ({
   "div",
   {
     className: cn(
-      "relative w-full overflow-hidden rounded-lg bg-[hsl(var(--chat-text)/0.03)] border border-[hsl(var(--chat-text)/0.1)]",
+      "relative w-full overflow-hidden rounded-lg bg-[hsl(var(--chat-text)/0.03)] border border-[var(--chat-divider)]",
       className
     ),
     ...props,
@@ -1261,7 +1265,7 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
 var Tool = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   Collapsible,
   {
-    className: cn("not-prose w-full rounded-md border border-[hsl(var(--chat-text)/0.1)]", className),
+    className: cn("not-prose w-full rounded-md border border-[var(--chat-divider)]", className),
     ...props
   }
 );
@@ -1287,6 +1291,7 @@ var ToolHeader = ({
   className,
   title,
   type,
+  toolName,
   state,
   ...props
 }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
@@ -1300,7 +1305,7 @@ var ToolHeader = ({
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.WrenchIcon, { className: "size-4 text-muted-foreground" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "font-medium text-sm", children: title ?? type.split("-").slice(1).join("-") }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "font-medium text-sm", children: title ?? toolName ?? type.split("-").slice(1).join("-") }),
         getStatusBadge(state)
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
@@ -1379,7 +1384,10 @@ function StarterMessages({
             onClick: () => onPromptSelect(prompt)
           }
         ),
-        index < prompts.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "h-px bg-[hsl(var(--chat-text)/0.08)] mx-3" })
+        index < prompts.length - 1 && // 1px-tall element used as a divider — same --chat-divider token
+        // every other separator in the widget uses, so consumers only
+        // need to override one variable to recolour all of them.
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "h-px mx-3", style: { backgroundColor: "var(--chat-divider)" } })
       ] }, index))
     }
   );
@@ -1452,6 +1460,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
   const [activeTabId, setActiveTabId] = (0, import_react9.useState)("");
   const [initialTabCreated, setInitialTabCreated] = (0, import_react9.useState)(false);
   const [isInitializing, setIsInitializing] = (0, import_react9.useState)(true);
+  const [isLoadingMessages, setIsLoadingMessages] = (0, import_react9.useState)(false);
   const lastSyncedTabId = (0, import_react9.useRef)("");
   const hasInitialized = (0, import_react9.useRef)(false);
   const { messages, sendMessage, status, setMessages } = (0, import_react11.useChat)({
@@ -1631,7 +1640,12 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       }))
     );
     setActiveTabId(tabId);
-    await loadConversation(tabId);
+    setIsLoadingMessages(true);
+    try {
+      await loadConversation(tabId);
+    } finally {
+      setIsLoadingMessages(false);
+    }
   };
   const closeTab = (tabId) => {
     if (tabs.length <= 1) return;
@@ -1856,7 +1870,14 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
             if (part.type.startsWith("tool-") || part.type === "dynamic-tool") {
               const toolPart = part;
               return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Tool, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolHeader, { type: part.type, state: toolPart.state }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  ToolHeader,
+                  {
+                    type: part.type,
+                    toolName: toolPart.toolName,
+                    state: toolPart.state
+                  }
+                ),
                 /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ToolContent, { children: [
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolInput, { input: toolPart.input }),
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToolOutput, { output: toolPart.output, errorText: toolPart.errorText })
@@ -1922,7 +1943,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 border-b backdrop-blur-sm relative z-20", style: {
-          borderColor: "var(--chat-border-soft)",
+          borderColor: "var(--chat-divider)",
           backgroundColor: "var(--chat-header-bg)"
         }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center gap-1 flex-1 min-w-0 overflow-x-auto scrollbar-hide py-0.5 scroll-smooth", children: tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
@@ -2024,10 +2045,10 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
               ),
               showHistory && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "absolute right-0 top-full mt-1.5 w-72 rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.08)] dark:shadow-[0_4px_24px_rgba(0,0,0,0.3)] z-50 animate-in fade-in slide-in-from-top-1 duration-150 overflow-hidden", style: {
                 backgroundColor: "hsl(var(--chat-background))",
-                border: `1px solid ${"var(--chat-border-medium)"}`
+                border: `1px solid ${"var(--chat-divider)"}`
               }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "p-2.5 border-b", style: {
-                  borderColor: "var(--chat-border-soft)",
+                  borderColor: "var(--chat-divider)",
                   backgroundColor: "var(--chat-overlay)"
                 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   "input",
@@ -2039,7 +2060,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
                     className: "w-full h-7 px-2.5 text-[13px] rounded-lg focus:outline-none transition-all",
                     style: {
                       backgroundColor: "hsl(var(--chat-surface-deep))",
-                      border: `1px solid ${"var(--chat-border-medium)"}`,
+                      border: `1px solid ${"var(--chat-divider)"}`,
                       color: "hsl(var(--chat-text))"
                     }
                   }
@@ -2136,7 +2157,7 @@ function ChatInterface({ id, initialMessages, config, onClose, headerActions } =
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "px-5 pb-5", children: [
           uploadError && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mb-3 px-4 py-3 bg-red-50 dark:bg-red-900/20 border border-red-200/60 dark:border-red-800/60 rounded-2xl text-sm text-red-700 dark:text-red-400 shadow-sm", children: uploadError }),
-          isInitializing ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center justify-center py-8", role: "status", "aria-label": "Loading conversation", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "h-4 w-4 rounded-full border-2 border-current border-t-transparent animate-spin", style: { color: "hsl(var(--chat-text-muted))" } }) }) : messages.length === 0 && status !== "submitted" && config?.starterPrompts && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          isInitializing || isLoadingMessages ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center justify-center py-8", role: "status", "aria-label": "Loading conversation", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "h-4 w-4 rounded-full border-2 border-current border-t-transparent animate-spin", style: { color: "hsl(var(--chat-text-muted))" } }) }) : messages.length === 0 && status !== "submitted" && config?.starterPrompts && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             StarterMessages,
             {
               prompts: config.starterPrompts,
@@ -2220,15 +2241,26 @@ function ChatWidget({
   display,
   starterPrompts,
   onClose,
-  headerActions
+  headerActions,
+  open,
+  onOpenChange
 }) {
   const layout = display?.layout || "popup";
-  const showToggleButton = display?.showToggleButton !== false;
+  const isControlled = open !== void 0;
+  const showToggleButton = !isControlled && display?.showToggleButton !== false;
   const resizable = layout === "popup" && display?.resizable !== false;
   const size = display?.size || "default";
-  const [isOpen, setIsOpen] = (0, import_react12.useState)(
+  const [internalIsOpen, setInternalIsOpen] = (0, import_react12.useState)(
     layout !== "popup" ? true : display?.defaultOpen || false
   );
+  const isOpen = isControlled ? open : internalIsOpen;
+  const setIsOpen = (next) => {
+    if (isControlled) {
+      onOpenChange?.(next);
+    } else {
+      setInternalIsOpen(next);
+    }
+  };
   const [isResizing, setIsResizing] = (0, import_react12.useState)(false);
   const containerRef = (0, import_react12.useRef)(null);
   const customStyles = (0, import_react12.useMemo)(() => {