@mordn/chat-widget 0.2.1 → 0.4.0

package/dist/index.mjs

@@ -1411,7 +1411,7 @@ function useChatStorageKey() {
 
 // src/components/interface.tsx
 import { jsx as jsx20, jsxs as jsxs12 } from "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";
@@ -2082,6 +2082,7 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                 ] }, groupName)) }) })
               ] })
             ] }),
+            headerActions,
             onClose && /* @__PURE__ */ jsx20(
               "button",
               {
@@ -2195,12 +2196,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] = useState5(display?.defaultOpen || false);
+  const [isOpen, setIsOpen] = useState5(
+    layout !== "popup" ? true : display?.defaultOpen || false
+  );
   const [isResizing, setIsResizing] = useState5(false);
   const containerRef = useRef4(null);
   const customStyles = useMemo3(() => {
@@ -2261,6 +2267,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__ */ jsx21(ChatStorageProvider, { userId, children: /* @__PURE__ */ jsx21(
+      "div",
+      {
+        ref: containerRef,
+        className: `chat-widget-container chat-widget-inline chat-widget-content ${themeClass} ${className || ""}`,
+        style: customStyles,
+        children: /* @__PURE__ */ jsx21(
+          ChatInterface,
+          {
+            id: conversationId,
+            initialMessages,
+            config,
+            onClose,
+            headerActions
+          }
+        )
+      }
+    ) });
+  }
+  if (layout === "page") {
+    return /* @__PURE__ */ jsx21(ChatStorageProvider, { userId, children: /* @__PURE__ */ jsx21(
+      "div",
+      {
+        ref: containerRef,
+        className: `chat-widget-container chat-widget-page chat-widget-content ${themeClass} ${className || ""}`,
+        style: customStyles,
+        children: /* @__PURE__ */ jsx21(
+          ChatInterface,
+          {
+            id: conversationId,
+            initialMessages,
+            config,
+            onClose,
+            headerActions
+          }
+        )
+      }
+    ) });
+  }
   return /* @__PURE__ */ jsxs13(ChatStorageProvider, { userId, children: [
     showToggleButton && !isOpen && /* @__PURE__ */ jsx21(
       "button",
@@ -2276,7 +2323,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,
@@ -2295,7 +2342,11 @@ function ChatWidget({
               id: conversationId,
               initialMessages,
               config,
-              onClose: () => setIsOpen(false)
+              onClose: () => {
+                setIsOpen(false);
+                onClose?.();
+              },
+              headerActions
             }
           ) })
         ]