@mordn/chat-widget 0.2.1 → 0.4.0

package/dist/index.d.mts

@@ -57,6 +57,23 @@ interface ChatWidgetConfig {
      * Users can click these to quickly start a conversation
      */
     starterPrompts?: StarterPrompt[];
+    /**
+     * Called when the user dismisses the widget. The widget renders its own
+     * close X inside the header (correctly stacked) when this is provided —
+     * works in all layouts (popup, inline, page).
+     *
+     * In `popup` layout the widget also auto-closes its own panel; in
+     * `inline` and `page` layouts the consumer owns the close behaviour
+     * (e.g. setting their open state, navigating away).
+     */
+    onClose?: () => 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
+     * action that belongs in the widget's chrome — avoids absolute-positioning
+     * overlays from the outside that fight the widget's own z-index.
+     */
+    headerActions?: ReactNode;
 }
 interface StarterPrompt {
     /**
@@ -120,11 +137,35 @@ interface FeatureConfig {
  * - full: 100% - fills entire screen
  */
 type ChatWidgetSize = 'compact' | 'default' | 'large' | 'full';
+
+/**
+ * Layout shape the widget renders in.
+ *
+ * - `popup`  : floating side panel, opened by a toggle button (default).
+ *              Best for ambient assistance available across pages.
+ * - `inline` : renders in place inside the parent element. No toggle button,
+ *              no fixed positioning, fills its container. Best for dashboard
+ *              cards or dedicated chat sections of a page.
+ * - `page`   : full-viewport layout with a conversation list sidebar on the
+ *              left and the active chat on the right. Best for a dedicated
+ *              chat route (e.g. `/chat`).
+ *
+ * The `popup` value is the historical default and remains backward compatible.
+ */
+type ChatWidgetLayout = 'popup' | 'inline' | 'page';
 interface DisplayConfig {
+    /**
+     * How the widget renders.
+     * Default: `'popup'` (backward compatible).
+     */
+    layout?: ChatWidgetLayout;
     /**
      * Preset size for the widget (recommended)
      * Uses clamp() for responsive sizing with min/max bounds
      * Default: 'default'
+     *
+     * Note: `size` only applies in `popup` layout. `inline` and `page` layouts
+     * fill their container regardless.
      */
     size?: ChatWidgetSize;
     /**
@@ -170,7 +211,7 @@ interface ChatWidgetProps extends ChatWidgetConfig {
      */
     widgetId?: string;
 }
-declare function ChatWidget({ userId, conversationId, initialMessages, className, model, systemPrompt, temperature, theme, features, display, starterPrompts, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
+declare function ChatWidget({ userId, conversationId, initialMessages, className, model, systemPrompt, temperature, theme, features, display, starterPrompts, onClose, headerActions, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface ChatTheme {
     lightPrimary: string;

package/dist/index.d.ts

@@ -57,6 +57,23 @@ interface ChatWidgetConfig {
      * Users can click these to quickly start a conversation
      */
     starterPrompts?: StarterPrompt[];
+    /**
+     * Called when the user dismisses the widget. The widget renders its own
+     * close X inside the header (correctly stacked) when this is provided —
+     * works in all layouts (popup, inline, page).
+     *
+     * In `popup` layout the widget also auto-closes its own panel; in
+     * `inline` and `page` layouts the consumer owns the close behaviour
+     * (e.g. setting their open state, navigating away).
+     */
+    onClose?: () => 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
+     * action that belongs in the widget's chrome — avoids absolute-positioning
+     * overlays from the outside that fight the widget's own z-index.
+     */
+    headerActions?: ReactNode;
 }
 interface StarterPrompt {
     /**
@@ -120,11 +137,35 @@ interface FeatureConfig {
  * - full: 100% - fills entire screen
  */
 type ChatWidgetSize = 'compact' | 'default' | 'large' | 'full';
+
+/**
+ * Layout shape the widget renders in.
+ *
+ * - `popup`  : floating side panel, opened by a toggle button (default).
+ *              Best for ambient assistance available across pages.
+ * - `inline` : renders in place inside the parent element. No toggle button,
+ *              no fixed positioning, fills its container. Best for dashboard
+ *              cards or dedicated chat sections of a page.
+ * - `page`   : full-viewport layout with a conversation list sidebar on the
+ *              left and the active chat on the right. Best for a dedicated
+ *              chat route (e.g. `/chat`).
+ *
+ * The `popup` value is the historical default and remains backward compatible.
+ */
+type ChatWidgetLayout = 'popup' | 'inline' | 'page';
 interface DisplayConfig {
+    /**
+     * How the widget renders.
+     * Default: `'popup'` (backward compatible).
+     */
+    layout?: ChatWidgetLayout;
     /**
      * Preset size for the widget (recommended)
      * Uses clamp() for responsive sizing with min/max bounds
      * Default: 'default'
+     *
+     * Note: `size` only applies in `popup` layout. `inline` and `page` layouts
+     * fill their container regardless.
      */
     size?: ChatWidgetSize;
     /**
@@ -170,7 +211,7 @@ interface ChatWidgetProps extends ChatWidgetConfig {
      */
     widgetId?: string;
 }
-declare function ChatWidget({ userId, conversationId, initialMessages, className, model, systemPrompt, temperature, theme, features, display, starterPrompts, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
+declare function ChatWidget({ userId, conversationId, initialMessages, className, model, systemPrompt, temperature, theme, features, display, starterPrompts, onClose, headerActions, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface ChatTheme {
     lightPrimary: string;

package/dist/index.js

@@ -1431,7 +1431,7 @@ function useChatStorageKey() {
 
 // src/components/interface.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-function ChatInterface({ id, initialMessages, config, onClose } = {}) {
+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";
@@ -2102,6 +2102,7 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                 ] }, groupName)) }) })
               ] })
             ] }),
+            headerActions,
             onClose && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "button",
               {
@@ -2215,12 +2216,17 @@ function ChatWidget({
   theme,
   features,
   display,
-  starterPrompts
+  starterPrompts,
+  onClose,
+  headerActions
 }) {
+  const layout = display?.layout || "popup";
   const showToggleButton = display?.showToggleButton !== false;
-  const resizable = display?.resizable !== false;
+  const resizable = layout === "popup" && display?.resizable !== false;
   const size = display?.size || "default";
-  const [isOpen, setIsOpen] = (0, import_react12.useState)(display?.defaultOpen || false);
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(
+    layout !== "popup" ? true : display?.defaultOpen || false
+  );
   const [isResizing, setIsResizing] = (0, import_react12.useState)(false);
   const containerRef = (0, import_react12.useRef)(null);
   const customStyles = (0, import_react12.useMemo)(() => {
@@ -2281,6 +2287,47 @@ function ChatWidget({
     starterPrompts
   }), [userId, model, systemPrompt, temperature, theme, features, starterPrompts]);
   const togglePosition = display?.toggleButtonPosition || { bottom: "24px", right: "24px" };
+  const themeClass = theme?.mode === "dark" ? "dark" : "";
+  if (layout === "inline") {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChatStorageProvider, { userId, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "div",
+      {
+        ref: containerRef,
+        className: `chat-widget-container chat-widget-inline chat-widget-content ${themeClass} ${className || ""}`,
+        style: customStyles,
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          ChatInterface,
+          {
+            id: conversationId,
+            initialMessages,
+            config,
+            onClose,
+            headerActions
+          }
+        )
+      }
+    ) });
+  }
+  if (layout === "page") {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChatStorageProvider, { userId, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "div",
+      {
+        ref: containerRef,
+        className: `chat-widget-container chat-widget-page chat-widget-content ${themeClass} ${className || ""}`,
+        style: customStyles,
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          ChatInterface,
+          {
+            id: conversationId,
+            initialMessages,
+            config,
+            onClose,
+            headerActions
+          }
+        )
+      }
+    ) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ChatStorageProvider, { userId, children: [
     showToggleButton && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "button",
@@ -2296,7 +2343,7 @@ function ChatWidget({
       "div",
       {
         ref: containerRef,
-        className: `chat-widget-container chat-widget-popup chat-widget-content ${theme?.mode === "dark" ? "dark" : ""} ${className || ""}`,
+        className: `chat-widget-container chat-widget-popup chat-widget-content ${themeClass} ${className || ""}`,
         "data-size": size,
         "data-resizing": isResizing,
         style: customStyles,
@@ -2315,7 +2362,11 @@ function ChatWidget({
               id: conversationId,
               initialMessages,
               config,
-              onClose: () => setIsOpen(false)
+              onClose: () => {
+                setIsOpen(false);
+                onClose?.();
+              },
+              headerActions
             }
           ) })
         ]