@mordn/chat-widget 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -2007,26 +2007,21 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                 /* @__PURE__ */ jsx20("div", { className: "p-2.5 border-b", style: {
                   borderColor: "var(--chat-border-soft)",
                   backgroundColor: "var(--chat-overlay)"
-                }, children: /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
-                  /* @__PURE__ */ jsx20(SearchIcon, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5", style: {
-                    color: "hsl(var(--chat-text-muted))"
-                  }, strokeWidth: 2 }),
-                  /* @__PURE__ */ jsx20(
-                    "input",
-                    {
-                      type: "text",
-                      placeholder: "Search",
-                      value: searchQuery,
-                      onChange: (e) => setSearchQuery(e.target.value),
-                      className: "w-full h-7 pl-8 pr-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)"}`,
-                        color: "hsl(var(--chat-text))"
-                      }
+                }, children: /* @__PURE__ */ jsx20("div", { className: "relative", children: /* @__PURE__ */ jsx20(
+                  "input",
+                  {
+                    type: "text",
+                    placeholder: "Search",
+                    value: searchQuery,
+                    onChange: (e) => setSearchQuery(e.target.value),
+                    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)"}`,
+                      color: "hsl(var(--chat-text))"
                     }
-                  )
-                ] }) }),
+                  }
+                ) }) }),
                 /* @__PURE__ */ jsx20("div", { className: "max-h-[300px] overflow-y-auto ai-assistant-scrollbar", children: loadingHistory ? /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx20("div", { className: "text-[13px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Loading..." }) }) : conversations.length === 0 ? /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
                   /* @__PURE__ */ jsx20("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
                     backgroundColor: "hsl(var(--chat-surface))"
@@ -2202,10 +2197,13 @@ function ChatWidget({
   display,
   starterPrompts
 }) {
+  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(() => {
@@ -2266,6 +2264,43 @@ 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
+          }
+        )
+      }
+    ) });
+  }
+  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
+          }
+        )
+      }
+    ) });
+  }
   return /* @__PURE__ */ jsxs13(ChatStorageProvider, { userId, children: [
     showToggleButton && !isOpen && /* @__PURE__ */ jsx21(
       "button",
@@ -2281,7 +2316,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,