@eshal-bot/chat-widget 0.1.0

package/dist/chat-widget.umd.js

@@ -0,0 +1,923 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('react/jsx-runtime')) :
+  typeof define === 'function' && define.amd ? define(['react', 'react/jsx-runtime'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ChatWidget = factory(global.React, global.jsxRuntime));
+})(this, (function (react, jsxRuntime) { 'use strict';
+
+  function _defineProperty(e, r, t) {
+    return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+      value: t,
+      enumerable: !0,
+      configurable: !0,
+      writable: !0
+    }) : e[r] = t, e;
+  }
+  function ownKeys(e, r) {
+    var t = Object.keys(e);
+    if (Object.getOwnPropertySymbols) {
+      var o = Object.getOwnPropertySymbols(e);
+      r && (o = o.filter(function (r) {
+        return Object.getOwnPropertyDescriptor(e, r).enumerable;
+      })), t.push.apply(t, o);
+    }
+    return t;
+  }
+  function _objectSpread2(e) {
+    for (var r = 1; r < arguments.length; r++) {
+      var t = null != arguments[r] ? arguments[r] : {};
+      r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+        _defineProperty(e, r, t[r]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+        Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+      });
+    }
+    return e;
+  }
+  function _toPrimitive(t, r) {
+    if ("object" != typeof t || !t) return t;
+    var e = t[Symbol.toPrimitive];
+    if (void 0 !== e) {
+      var i = e.call(t, r || "default");
+      if ("object" != typeof i) return i;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return ("string" === r ? String : Number)(t);
+  }
+  function _toPropertyKey(t) {
+    var i = _toPrimitive(t, "string");
+    return "symbol" == typeof i ? i : i + "";
+  }
+
+  /**
+   * Stream a support reply via Server-Sent Events
+   * Expects backend to emit JSON SSE events like:
+   * {"type":"processing_start", ...} | {"type":"text_chunk","content":"..."} | {"type":"complete", ...}
+   * Falls back to raw text if not JSON.
+   */
+  const streamSupportReply = async _ref => {
+    let {
+      apiBaseUrl,
+      query,
+      organizationId,
+      apiKey,
+      headers = {},
+      onProcessingStart,
+      onProcessingEnd,
+      onTextChunk,
+      onDone,
+      onError
+    } = _ref;
+    if (!apiBaseUrl) {
+      throw new Error("apiBaseUrl is required");
+    }
+    const controller = new AbortController();
+    const url = "".concat(apiBaseUrl.replace(/\/$/, ""), "/api/v1/widget/chat");
+    try {
+      const response = await fetch(url, {
+        method: "POST",
+        headers: _objectSpread2(_objectSpread2({
+          "Content-Type": "application/json",
+          "x-eshal-org": organizationId
+        }, apiKey && {
+          Authorization: "Bearer ".concat(apiKey)
+        }), headers),
+        body: JSON.stringify({
+          message: query
+        }),
+        signal: controller.signal,
+        credentials: "include"
+      });
+      if (!response.ok) {
+        throw new Error("HTTP error! status: ".concat(response.status));
+      }
+
+      // Expect text/event-stream but some servers omit header while still streaming
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      const pump = async () => {
+        while (true) {
+          const {
+            value,
+            done
+          } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, {
+            stream: true
+          });
+
+          // Parse SSE lines
+          let lineEnd;
+          while ((lineEnd = buffer.indexOf("\n")) !== -1) {
+            const line = buffer.slice(0, lineEnd).trim();
+            buffer = buffer.slice(lineEnd + 1);
+            if (!line) continue;
+            if (line.startsWith("data:")) {
+              const raw = line.slice(5).trim();
+              if (raw === "[DONE]") {
+                if (onDone) onDone();
+                controller.abort();
+                return;
+              }
+              try {
+                const evt = JSON.parse(raw);
+                if (evt && evt.type === "processing_start") {
+                  if (onProcessingStart) onProcessingStart(evt);
+                } else if (evt && evt.type === "processing_end") {
+                  if (onProcessingEnd) onProcessingEnd(evt);
+                } else if (evt && evt.type === "text_chunk" && typeof evt.content === "string") {
+                  if (onTextChunk) onTextChunk(evt.content, evt);
+                } else if (evt && evt.type === "complete") {
+                  if (onDone) onDone(evt);
+                } else {
+                  if (onTextChunk) onTextChunk(raw);
+                }
+              } catch (_) {
+                // Only treat as text chunk if it's not a known control message
+                if (raw !== "processing_end" && raw !== "processing_start") {
+                  if (onTextChunk) onTextChunk(raw);
+                }
+              }
+            }
+          }
+        }
+        // Flush remaining buffer (non-SSE servers may just stream text)
+        if (buffer && onTextChunk) onTextChunk(buffer);
+        if (onDone) onDone();
+      };
+      pump().catch(err => {
+        if (onError) onError(err);
+      });
+      return controller;
+    } catch (error) {
+      if (onError) onError(error);
+      throw error;
+    }
+  };
+
+  const useChatState = _ref => {
+    let {
+      welcomeMessage,
+      companyLogo,
+      quickQuestions,
+      apiBaseUrl,
+      organizationId,
+      autoOpen,
+      openDelay,
+      darkMode
+    } = _ref;
+    const [isOpen, setIsOpen] = react.useState(autoOpen);
+    const [isMinimized, setIsMinimized] = react.useState(false);
+    const [isDark, setIsDark] = react.useState(darkMode);
+    const [messages, setMessages] = react.useState([{
+      id: 1,
+      text: welcomeMessage,
+      sender: "bot",
+      timestamp: new Date(),
+      avatar: null
+    }]);
+    const [inputValue, setInputValue] = react.useState("");
+    const [isTyping, setIsTyping] = react.useState(false);
+    const widgetRef = react.useRef(null);
+
+    // Auto open with delay
+    react.useEffect(() => {
+      if (autoOpen && openDelay > 0) {
+        const timer = setTimeout(() => setIsOpen(true), openDelay);
+        return () => clearTimeout(timer);
+      }
+    }, [autoOpen, openDelay]);
+
+    // Sync dark mode prop
+    react.useEffect(() => {
+      setIsDark(darkMode);
+    }, [darkMode]);
+    const handleSend = async () => {
+      if (!inputValue.trim()) return;
+      const newMessage = {
+        id: messages.length + 1,
+        text: inputValue,
+        sender: "user",
+        timestamp: new Date()
+      };
+      setMessages([...messages, newMessage]);
+      const messageText = inputValue;
+      setInputValue("");
+      setIsTyping(true);
+      try {
+        // Create placeholder bot message for streaming
+        const botMessageId = messages.length + 2;
+        setMessages(prev => [...prev, {
+          id: botMessageId,
+          text: "",
+          sender: "bot",
+          timestamp: new Date(),
+          avatar: null
+        }]);
+        await streamSupportReply({
+          apiBaseUrl,
+          organizationId,
+          query: messageText,
+          onProcessingStart: () => {
+            setIsTyping(true);
+          },
+          onProcessingEnd: () => {
+            setIsTyping(true);
+          },
+          onTextChunk: chunk => {
+            if (isTyping) {
+              setIsTyping(false);
+            }
+            ;
+            setMessages(prev => prev.map(m => m.id === botMessageId ? _objectSpread2(_objectSpread2({}, m), {}, {
+              text: (m.text || "") + chunk
+            }) : m));
+          },
+          onDone: () => {
+            setIsTyping(false);
+          },
+          onError: error => {
+            console.error("SSE error:", error);
+            setIsTyping(false);
+            setMessages(prev => prev.map(m => m.id === botMessageId ? _objectSpread2(_objectSpread2({}, m), {}, {
+              text: "Sorry, I'm having trouble connecting right now. Please try again."
+            }) : m));
+          }
+        });
+      } catch (error) {
+        setIsTyping(false);
+        console.error("Error:", error);
+      }
+    };
+    const toggleChat = () => {
+      setIsOpen(!isOpen);
+      setIsMinimized(false);
+    };
+    const toggleTheme = () => {
+      setIsDark(!isDark);
+    };
+    const toggleMinimize = () => {
+      setIsMinimized(!isMinimized);
+    };
+    const closeChat = () => {
+      setIsOpen(false);
+    };
+    const handleQuickQuestion = question => {
+      setInputValue(question);
+      handleSend();
+    };
+    return {
+      // State
+      isOpen,
+      isMinimized,
+      isDark,
+      messages,
+      inputValue,
+      isTyping,
+      widgetRef,
+      quickQuestions,
+      // Actions
+      setInputValue,
+      handleSend,
+      handleQuickQuestion,
+      toggleChat,
+      toggleTheme,
+      toggleMinimize,
+      closeChat
+    };
+  };
+
+  /**
+   * @license lucide-react v0.303.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+
+  var defaultAttributes = {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  };
+
+  /**
+   * @license lucide-react v0.303.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+
+
+  const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().trim();
+  const createLucideIcon = (iconName, iconNode) => {
+    const Component = react.forwardRef(
+      ({ color = "currentColor", size = 24, strokeWidth = 2, absoluteStrokeWidth, className = "", children, ...rest }, ref) => react.createElement(
+        "svg",
+        {
+          ref,
+          ...defaultAttributes,
+          width: size,
+          height: size,
+          stroke: color,
+          strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+          className: ["lucide", `lucide-${toKebabCase(iconName)}`, className].join(" "),
+          ...rest
+        },
+        [
+          ...iconNode.map(([tag, attrs]) => react.createElement(tag, attrs)),
+          ...Array.isArray(children) ? children : [children]
+        ]
+      )
+    );
+    Component.displayName = `${iconName}`;
+    return Component;
+  };
+
+  /**
+   * @license lucide-react v0.303.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+
+
+  const Bot = createLucideIcon("Bot", [
+    ["path", { d: "M12 8V4H8", key: "hb8ula" }],
+    ["rect", { width: "16", height: "12", x: "4", y: "8", rx: "2", key: "enze0r" }],
+    ["path", { d: "M2 14h2", key: "vft8re" }],
+    ["path", { d: "M20 14h2", key: "4cs60a" }],
+    ["path", { d: "M15 13v2", key: "1xurst" }],
+    ["path", { d: "M9 13v2", key: "rq6x2g" }]
+  ]);
+
+  /**
+   * @license lucide-react v0.303.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+
+
+  const MessageCircle = createLucideIcon("MessageCircle", [
+    ["path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z", key: "vv11sd" }]
+  ]);
+
+  /**
+   * @license lucide-react v0.303.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+
+
+  const Minimize2 = createLucideIcon("Minimize2", [
+    ["polyline", { points: "4 14 10 14 10 20", key: "11kfnr" }],
+    ["polyline", { points: "20 10 14 10 14 4", key: "rlmsce" }],
+    ["line", { x1: "14", x2: "21", y1: "10", y2: "3", key: "o5lafz" }],
+    ["line", { x1: "3", x2: "10", y1: "21", y2: "14", key: "1atl0r" }]
+  ]);
+
+  /**
+   * @license lucide-react v0.303.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+
+
+  const Moon = createLucideIcon("Moon", [
+    ["path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z", key: "a7tn18" }]
+  ]);
+
+  /**
+   * @license lucide-react v0.303.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+
+
+  const Send = createLucideIcon("Send", [
+    ["path", { d: "m22 2-7 20-4-9-9-4Z", key: "1q3vgg" }],
+    ["path", { d: "M22 2 11 13", key: "nzbqef" }]
+  ]);
+
+  /**
+   * @license lucide-react v0.303.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+
+
+  const Sun = createLucideIcon("Sun", [
+    ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
+    ["path", { d: "M12 2v2", key: "tus03m" }],
+    ["path", { d: "M12 20v2", key: "1lh1kg" }],
+    ["path", { d: "m4.93 4.93 1.41 1.41", key: "149t6j" }],
+    ["path", { d: "m17.66 17.66 1.41 1.41", key: "ptbguv" }],
+    ["path", { d: "M2 12h2", key: "1t8f8n" }],
+    ["path", { d: "M20 12h2", key: "1q8mjw" }],
+    ["path", { d: "m6.34 17.66-1.41 1.41", key: "1m8zz5" }],
+    ["path", { d: "m19.07 4.93-1.41 1.41", key: "1shlcs" }]
+  ]);
+
+  /**
+   * @license lucide-react v0.303.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+
+
+  const User = createLucideIcon("User", [
+    ["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", key: "975kel" }],
+    ["circle", { cx: "12", cy: "7", r: "4", key: "17ys0d" }]
+  ]);
+
+  /**
+   * @license lucide-react v0.303.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+
+
+  const X = createLucideIcon("X", [
+    ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+    ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+  ]);
+
+  const ChatHeader = _ref => {
+    let {
+      companyName,
+      companyLogo,
+      primaryColor,
+      isDark,
+      onToggleTheme,
+      onMinimize,
+      onClose
+    } = _ref;
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "text-white px-5 py-4 flex items-center justify-between relative overflow-hidden",
+      style: {
+        background: "linear-gradient(135deg, ".concat(primaryColor, " 0%, ").concat(primaryColor, "dd 100%)")
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "absolute inset-0 bg-gradient-to-br from-white/10 to-transparent pointer-events-none"
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-3 relative z-10",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "relative",
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "w-11 h-11 rounded-xl flex items-center justify-center ".concat(companyLogo ? "bg-transparent" : "bg-white/20 backdrop-blur-sm"),
+            children: companyLogo ? /*#__PURE__*/jsxRuntime.jsx("img", {
+              src: companyLogo,
+              alt: "Logo",
+              className: "w-6 h-6 object-cover rounded"
+            }) : /*#__PURE__*/jsxRuntime.jsx(MessageCircle, {
+              className: "w-6 h-6"
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-green-400 rounded-full border-2 border-white"
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          children: [/*#__PURE__*/jsxRuntime.jsx("h3", {
+            className: "font-semibold text-[15px] leading-tight",
+            children: companyName
+          }), /*#__PURE__*/jsxRuntime.jsxs("p", {
+            className: "text-xs text-white/90 flex items-center gap-1.5 mt-0.5",
+            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse"
+            }), "Typically replies instantly"]
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-1 relative z-10",
+        children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+          onClick: onToggleTheme,
+          className: "hover:bg-white/20 p-2 rounded-lg transition-all duration-200",
+          "aria-label": "Toggle theme",
+          children: isDark ? /*#__PURE__*/jsxRuntime.jsx(Sun, {
+            className: "w-4 h-4"
+          }) : /*#__PURE__*/jsxRuntime.jsx(Moon, {
+            className: "w-4 h-4"
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("button", {
+          onClick: onMinimize,
+          className: "hover:bg-white/20 p-2 rounded-lg transition-all duration-200",
+          "aria-label": "Minimize",
+          children: /*#__PURE__*/jsxRuntime.jsx(Minimize2, {
+            className: "w-4 h-4"
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("button", {
+          onClick: onClose,
+          className: "hover:bg-white/20 p-2 rounded-lg transition-all duration-200",
+          "aria-label": "Close",
+          children: /*#__PURE__*/jsxRuntime.jsx(X, {
+            className: "w-4 h-4"
+          })
+        })]
+      })]
+    });
+  };
+
+  const MessageBubble = _ref => {
+    let {
+      message,
+      isDark,
+      primaryColor,
+      isTyping,
+      companyLogo
+    } = _ref;
+    const isUser = message.sender === "user";
+    const isBot = message.sender === "bot";
+    const isTypingMessage = isBot && isTyping && (!message.text || message.text.length === 0);
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex gap-3 ".concat(isUser ? "flex-row-reverse" : "flex-row", " animate-in"),
+      children: [isBot && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-shrink-0 mt-1",
+        children: message.avatar ? /*#__PURE__*/jsxRuntime.jsx("img", {
+          src: message.avatar,
+          alt: "Bot",
+          className: "w-8 h-8 rounded-full object-cover"
+        }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "w-8 h-8 rounded-full flex items-center justify-center ".concat(isDark ? "bg-gray-700" : "bg-gray-200"),
+          children: /*#__PURE__*/jsxRuntime.jsx(Bot, {
+            className: "w-4 h-4",
+            style: {
+              color: primaryColor
+            }
+          })
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col ".concat(isUser ? "items-end" : "items-start", " max-w-[75%]"),
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "rounded-2xl px-4 py-2.5 ".concat(isUser ? "text-white shadow-lg" : "".concat(isDark ? "bg-gray-800 text-gray-100 border-gray-700" : "bg-white text-gray-800 border-gray-200", " shadow-sm border"), " ").concat(isUser ? "rounded-tr-sm" : "rounded-tl-sm"),
+          style: isUser ? {
+            background: "linear-gradient(135deg, ".concat(primaryColor, " 0%, ").concat(primaryColor, "dd 100%)")
+          } : {},
+          children: isTypingMessage ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex gap-1.5",
+            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "w-2 h-2 rounded-full bg-gray-400 animate-bounce",
+              style: {
+                animationDelay: "0ms"
+              }
+            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "w-2 h-2 rounded-full bg-gray-400 animate-bounce",
+              style: {
+                animationDelay: "150ms"
+              }
+            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "w-2 h-2 rounded-full bg-gray-400 animate-bounce",
+              style: {
+                animationDelay: "300ms"
+              }
+            })]
+          }) : /*#__PURE__*/jsxRuntime.jsx("p", {
+            className: "text-[14px] leading-relaxed whitespace-pre-wrap break-words ".concat(isUser ? "text-white" : isDark ? "text-gray-100" : "text-gray-800"),
+            children: message.text
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("p", {
+          className: "text-[11px] mt-1.5 px-1 ".concat(isDark ? "text-gray-500" : "text-gray-400"),
+          children: message.timestamp.toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit"
+          })
+        })]
+      }), isUser && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-shrink-0 mt-1",
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "w-8 h-8 rounded-full flex items-center justify-center ".concat(isDark ? "bg-gray-700" : "bg-gray-200"),
+          children: /*#__PURE__*/jsxRuntime.jsx(User, {
+            className: "w-4 h-4 text-gray-500"
+          })
+        })
+      })]
+    });
+  };
+
+  const MessageList = _ref => {
+    let {
+      messages,
+      isDark,
+      primaryColor,
+      isTyping,
+      companyLogo
+    } = _ref;
+    const messagesEndRef = react.useRef(null);
+    const scrollToBottom = () => {
+      var _messagesEndRef$curre;
+      (_messagesEndRef$curre = messagesEndRef.current) === null || _messagesEndRef$curre === void 0 || _messagesEndRef$curre.scrollIntoView({
+        behavior: "smooth"
+      });
+    };
+    react.useEffect(() => {
+      scrollToBottom();
+    }, [messages, isTyping]);
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "chat-messages flex-1 overflow-y-auto px-5 py-4 space-y-4 ".concat(isDark ? "bg-gray-900" : "bg-gradient-to-b from-gray-50/50 to-white", " break-words"),
+      children: [messages.map(message => /*#__PURE__*/jsxRuntime.jsx(MessageBubble, {
+        message: message,
+        isDark: isDark,
+        primaryColor: primaryColor,
+        isTyping: isTyping,
+        companyLogo: companyLogo
+      }, message.id)), /*#__PURE__*/jsxRuntime.jsx("div", {
+        ref: messagesEndRef
+      })]
+    });
+  };
+
+  const ChatInput = _ref => {
+    let {
+      inputValue,
+      setInputValue,
+      onSend,
+      isDark,
+      primaryColor,
+      isOpen,
+      isMinimized
+    } = _ref;
+    const inputRef = react.useRef(null);
+    react.useEffect(() => {
+      if (isOpen && !isMinimized) {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+      }
+    }, [isOpen, isMinimized]);
+    const handleKeyPress = e => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        onSend();
+      }
+    };
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "px-5 py-4 border-t ".concat(isDark ? "border-gray-700 bg-gray-900" : "border-gray-200 bg-white"),
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex gap-2.5 items-end",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex-1 flex items-center min-h-[48px] ".concat(isDark ? "bg-gray-800" : "bg-gray-50", " rounded-2xl border transition-all duration-200"),
+          style: {
+            borderColor: inputValue ? primaryColor : isDark ? "#374151" : "#e5e7eb",
+            borderWidth: inputValue ? "2px" : "1px"
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx("textarea", {
+            id: "chat-widget-input",
+            ref: inputRef,
+            value: inputValue,
+            onChange: e => setInputValue(e.target.value),
+            onKeyDown: handleKeyPress,
+            placeholder: "Type your message...",
+            rows: "1",
+            className: "w-full px-4 py-0 bg-transparent rounded-xl leading-normal ".concat(isDark ? "text-gray-100" : "text-gray-900", " placeholder-gray-400 text-[14px] resize-none outline-none"),
+            style: {
+              maxHeight: "120px"
+            }
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("button", {
+          onClick: onSend,
+          disabled: !inputValue.trim(),
+          className: "h-12 w-12 p-0 rounded-xl transition-all duration-200 flex items-center justify-center shadow-lg disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none ".concat(inputValue.trim() ? "scale-100" : "scale-95"),
+          style: {
+            backgroundColor: inputValue.trim() ? primaryColor : isDark ? "#374151" : "#e5e7eb",
+            color: inputValue.trim() ? "white" : "#9ca3af"
+          },
+          "aria-label": "Send message",
+          children: /*#__PURE__*/jsxRuntime.jsx(Send, {
+            className: "w-5 h-5"
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("p", {
+        className: "text-[11px] mt-2 px-1 ".concat(isDark ? "text-gray-600" : "text-gray-400", " flex items-center gap-1"),
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "w-1 h-1 rounded-full bg-green-500"
+        }), "We're online now"]
+      })]
+    });
+  };
+
+  const QuickQuestions = _ref => {
+    let {
+      questions = [],
+      isDark,
+      primaryColor,
+      onQuestionClick,
+      isTyping = false
+    } = _ref;
+    // Don't render if no questions or if typing/streaming
+    if (!questions.length || isTyping) {
+      return null;
+    }
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "px-4 py-3 border-t border-gray-200 dark:border-gray-700",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "text-xs text-gray-500 dark:text-gray-400 mb-2 font-medium",
+        children: "Quick questions:"
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex gap-2 overflow-x-auto scrollbar-hide pb-1",
+        children: questions.map((question, index) => /*#__PURE__*/jsxRuntime.jsx("button", {
+          onClick: () => onQuestionClick(question),
+          className: "text-xs px-4 py-2 rounded-lg border-2 font-medium transition-all duration-200 hover:scale-105 active:scale-95 whitespace-nowrap flex-shrink-0 shadow-sm",
+          style: {
+            backgroundColor: isDark ? "rgba(59, 130, 246, 0.15)" : "rgba(59, 130, 246, 0.08)",
+            borderColor: isDark ? "rgba(59, 130, 246, 0.4)" : "rgba(59, 130, 246, 0.3)",
+            color: isDark ? "rgba(147, 197, 253, 0.95)" : "rgba(30, 64, 175, 0.9)"
+          },
+          onMouseEnter: e => {
+            e.target.style.backgroundColor = isDark ? "rgba(59, 130, 246, 0.25)" : "rgba(59, 130, 246, 0.15)";
+            e.target.style.borderColor = isDark ? "rgba(59, 130, 246, 0.6)" : "rgba(59, 130, 246, 0.5)";
+          },
+          onMouseLeave: e => {
+            e.target.style.backgroundColor = isDark ? "rgba(59, 130, 246, 0.15)" : "rgba(59, 130, 246, 0.08)";
+            e.target.style.borderColor = isDark ? "rgba(59, 130, 246, 0.4)" : "rgba(59, 130, 246, 0.3)";
+          },
+          children: question
+        }, index))
+      })]
+    });
+  };
+
+  const ChatWindow = _ref => {
+    let {
+      isOpen,
+      isMinimized,
+      isDark,
+      primaryColor,
+      companyName,
+      companyLogo,
+      messages,
+      isTyping,
+      inputValue,
+      setInputValue,
+      onSend,
+      onToggleTheme,
+      onMinimize,
+      onClose,
+      quickQuestions,
+      onQuickQuestion
+    } = _ref;
+    if (!isOpen) return null;
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "mb-4 ".concat(isDark ? "bg-gray-900 border-gray-700" : "bg-white border-gray-200", " rounded-2xl shadow-2xl border transition-all duration-300 ").concat(isMinimized ? "w-80 h-16" : "w-[380px] h-[650px]", " flex flex-col overflow-hidden"),
+      children: [/*#__PURE__*/jsxRuntime.jsx(ChatHeader, {
+        companyName: companyName,
+        companyLogo: companyLogo,
+        primaryColor: primaryColor,
+        isDark: isDark,
+        onToggleTheme: onToggleTheme,
+        onMinimize: onMinimize,
+        onClose: onClose
+      }), !isMinimized && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(MessageList, {
+          messages: messages,
+          isDark: isDark,
+          primaryColor: primaryColor,
+          isTyping: isTyping,
+          companyLogo: companyLogo
+        }), /*#__PURE__*/jsxRuntime.jsx(QuickQuestions, {
+          questions: quickQuestions,
+          isDark: isDark,
+          primaryColor: primaryColor,
+          onQuestionClick: onQuickQuestion,
+          isTyping: isTyping
+        }), /*#__PURE__*/jsxRuntime.jsx(ChatInput, {
+          inputValue: inputValue,
+          setInputValue: setInputValue,
+          onSend: onSend,
+          isDark: isDark,
+          primaryColor: primaryColor,
+          isOpen: isOpen,
+          isMinimized: isMinimized
+        })]
+      })]
+    });
+  };
+
+  const ToggleButton = _ref => {
+    let {
+      isOpen,
+      isDark,
+      primaryColor,
+      onToggle
+    } = _ref;
+    return /*#__PURE__*/jsxRuntime.jsxs("button", {
+      onClick: onToggle,
+      className: "group relative w-16 h-16 rounded-full shadow-2xl transition-all duration-300 flex items-center justify-center text-white overflow-hidden ".concat(isOpen ? "rotate-0 scale-100" : "hover:scale-110"),
+      style: {
+        background: isOpen ? isDark ? "#1f2937" : "#374151" : "linear-gradient(135deg, ".concat(primaryColor, " 0%, ").concat(primaryColor, "dd 100%)"),
+        boxShadow: isOpen ? "0 10px 30px rgba(0,0,0,0.3)" : "0 10px 30px ".concat(primaryColor, "40")
+      },
+      "aria-label": isOpen ? "Close chat" : "Open chat",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "absolute inset-0 rounded-full bg-white/20 scale-0 group-hover:scale-100 transition-transform duration-500"
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "relative z-10 transition-transform duration-300",
+        children: isOpen ? /*#__PURE__*/jsxRuntime.jsx(X, {
+          className: "w-7 h-7"
+        }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(MessageCircle, {
+            className: "w-7 h-7"
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center text-[10px] font-bold border-2 border-white animate-pulse",
+            children: "1"
+          })]
+        })
+      })]
+    });
+  };
+
+  const ChatWidget = _ref => {
+    let {
+      darkMode = false,
+      primaryColor = "#2563eb",
+      position = "bottom-right",
+      companyName = "Support Team",
+      companyLogo = null,
+      welcomeMessage = "Hi! How can we help?",
+      quickQuestions = [],
+      apiBaseUrl,
+      organizationId,
+      autoOpen = false,
+      openDelay = 0,
+      locale = "en",
+      className = ""
+    } = _ref;
+    const {
+      isOpen,
+      isMinimized,
+      isDark,
+      messages,
+      inputValue,
+      isTyping,
+      widgetRef,
+      setInputValue,
+      handleSend,
+      handleQuickQuestion,
+      toggleChat,
+      toggleTheme,
+      toggleMinimize,
+      closeChat
+    } = useChatState({
+      welcomeMessage,
+      companyLogo,
+      quickQuestions,
+      apiBaseUrl,
+      organizationId,
+      autoOpen,
+      openDelay,
+      darkMode
+    });
+
+    // Set CSS variables for theming
+    react.useEffect(() => {
+      if (widgetRef.current) {
+        widgetRef.current.style.setProperty("--cw-primary", primaryColor);
+      }
+    }, [primaryColor, widgetRef]);
+    const positionClasses = {
+      "bottom-right": "bottom-5 right-5",
+      "bottom-left": "bottom-5 left-5",
+      "top-right": "top-5 right-5",
+      "top-left": "top-5 left-5"
+    };
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      ref: widgetRef,
+      className: "chat-widget-root fixed flex flex-col items-end z-[999999] ".concat(isDark ? "dark" : "", " ").concat(className, " ").concat(positionClasses[position] || positionClasses["bottom-right"]),
+      children: [/*#__PURE__*/jsxRuntime.jsx(ChatWindow, {
+        isOpen: isOpen,
+        isMinimized: isMinimized,
+        isDark: isDark,
+        primaryColor: primaryColor,
+        companyName: companyName,
+        companyLogo: companyLogo,
+        messages: messages,
+        isTyping: isTyping,
+        inputValue: inputValue,
+        setInputValue: setInputValue,
+        onSend: handleSend,
+        onToggleTheme: toggleTheme,
+        onMinimize: toggleMinimize,
+        onClose: closeChat,
+        quickQuestions: quickQuestions,
+        onQuickQuestion: handleQuickQuestion
+      }), /*#__PURE__*/jsxRuntime.jsx(ToggleButton, {
+        isOpen: isOpen,
+        isDark: isDark,
+        primaryColor: primaryColor,
+        onToggle: toggleChat
+      })]
+    });
+  };
+
+  return ChatWidget;
+
+}));
+//# sourceMappingURL=chat-widget.umd.js.map