@eshal-bot/chat-widget 0.1.0

package/dist/chat-widget.esm.js

@@ -0,0 +1,918 @@
+import { useState, useRef, useEffect, forwardRef, createElement } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+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] = useState(autoOpen);
+  const [isMinimized, setIsMinimized] = useState(false);
+  const [isDark, setIsDark] = useState(darkMode);
+  const [messages, setMessages] = useState([{
+    id: 1,
+    text: welcomeMessage,
+    sender: "bot",
+    timestamp: new Date(),
+    avatar: null
+  }]);
+  const [inputValue, setInputValue] = useState("");
+  const [isTyping, setIsTyping] = useState(false);
+  const widgetRef = useRef(null);
+
+  // Auto open with delay
+  useEffect(() => {
+    if (autoOpen && openDelay > 0) {
+      const timer = setTimeout(() => setIsOpen(true), openDelay);
+      return () => clearTimeout(timer);
+    }
+  }, [autoOpen, openDelay]);
+
+  // Sync dark mode prop
+  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 = forwardRef(
+    ({ color = "currentColor", size = 24, strokeWidth = 2, absoluteStrokeWidth, className = "", children, ...rest }, ref) => 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]) => 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__*/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__*/jsx("div", {
+      className: "absolute inset-0 bg-gradient-to-br from-white/10 to-transparent pointer-events-none"
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex items-center gap-3 relative z-10",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "relative",
+        children: [/*#__PURE__*/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__*/jsx("img", {
+            src: companyLogo,
+            alt: "Logo",
+            className: "w-6 h-6 object-cover rounded"
+          }) : /*#__PURE__*/jsx(MessageCircle, {
+            className: "w-6 h-6"
+          })
+        }), /*#__PURE__*/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__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx("h3", {
+          className: "font-semibold text-[15px] leading-tight",
+          children: companyName
+        }), /*#__PURE__*/jsxs("p", {
+          className: "text-xs text-white/90 flex items-center gap-1.5 mt-0.5",
+          children: [/*#__PURE__*/jsx("span", {
+            className: "w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse"
+          }), "Typically replies instantly"]
+        })]
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex items-center gap-1 relative z-10",
+      children: [/*#__PURE__*/jsx("button", {
+        onClick: onToggleTheme,
+        className: "hover:bg-white/20 p-2 rounded-lg transition-all duration-200",
+        "aria-label": "Toggle theme",
+        children: isDark ? /*#__PURE__*/jsx(Sun, {
+          className: "w-4 h-4"
+        }) : /*#__PURE__*/jsx(Moon, {
+          className: "w-4 h-4"
+        })
+      }), /*#__PURE__*/jsx("button", {
+        onClick: onMinimize,
+        className: "hover:bg-white/20 p-2 rounded-lg transition-all duration-200",
+        "aria-label": "Minimize",
+        children: /*#__PURE__*/jsx(Minimize2, {
+          className: "w-4 h-4"
+        })
+      }), /*#__PURE__*/jsx("button", {
+        onClick: onClose,
+        className: "hover:bg-white/20 p-2 rounded-lg transition-all duration-200",
+        "aria-label": "Close",
+        children: /*#__PURE__*/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__*/jsxs("div", {
+    className: "flex gap-3 ".concat(isUser ? "flex-row-reverse" : "flex-row", " animate-in"),
+    children: [isBot && /*#__PURE__*/jsx("div", {
+      className: "flex-shrink-0 mt-1",
+      children: message.avatar ? /*#__PURE__*/jsx("img", {
+        src: message.avatar,
+        alt: "Bot",
+        className: "w-8 h-8 rounded-full object-cover"
+      }) : /*#__PURE__*/jsx("div", {
+        className: "w-8 h-8 rounded-full flex items-center justify-center ".concat(isDark ? "bg-gray-700" : "bg-gray-200"),
+        children: /*#__PURE__*/jsx(Bot, {
+          className: "w-4 h-4",
+          style: {
+            color: primaryColor
+          }
+        })
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col ".concat(isUser ? "items-end" : "items-start", " max-w-[75%]"),
+      children: [/*#__PURE__*/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__*/jsxs("div", {
+          className: "flex gap-1.5",
+          children: [/*#__PURE__*/jsx("div", {
+            className: "w-2 h-2 rounded-full bg-gray-400 animate-bounce",
+            style: {
+              animationDelay: "0ms"
+            }
+          }), /*#__PURE__*/jsx("div", {
+            className: "w-2 h-2 rounded-full bg-gray-400 animate-bounce",
+            style: {
+              animationDelay: "150ms"
+            }
+          }), /*#__PURE__*/jsx("div", {
+            className: "w-2 h-2 rounded-full bg-gray-400 animate-bounce",
+            style: {
+              animationDelay: "300ms"
+            }
+          })]
+        }) : /*#__PURE__*/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__*/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__*/jsx("div", {
+      className: "flex-shrink-0 mt-1",
+      children: /*#__PURE__*/jsx("div", {
+        className: "w-8 h-8 rounded-full flex items-center justify-center ".concat(isDark ? "bg-gray-700" : "bg-gray-200"),
+        children: /*#__PURE__*/jsx(User, {
+          className: "w-4 h-4 text-gray-500"
+        })
+      })
+    })]
+  });
+};
+
+const MessageList = _ref => {
+  let {
+    messages,
+    isDark,
+    primaryColor,
+    isTyping,
+    companyLogo
+  } = _ref;
+  const messagesEndRef = useRef(null);
+  const scrollToBottom = () => {
+    var _messagesEndRef$curre;
+    (_messagesEndRef$curre = messagesEndRef.current) === null || _messagesEndRef$curre === void 0 || _messagesEndRef$curre.scrollIntoView({
+      behavior: "smooth"
+    });
+  };
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, isTyping]);
+  return /*#__PURE__*/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__*/jsx(MessageBubble, {
+      message: message,
+      isDark: isDark,
+      primaryColor: primaryColor,
+      isTyping: isTyping,
+      companyLogo: companyLogo
+    }, message.id)), /*#__PURE__*/jsx("div", {
+      ref: messagesEndRef
+    })]
+  });
+};
+
+const ChatInput = _ref => {
+  let {
+    inputValue,
+    setInputValue,
+    onSend,
+    isDark,
+    primaryColor,
+    isOpen,
+    isMinimized
+  } = _ref;
+  const inputRef = useRef(null);
+  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__*/jsxs("div", {
+    className: "px-5 py-4 border-t ".concat(isDark ? "border-gray-700 bg-gray-900" : "border-gray-200 bg-white"),
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex gap-2.5 items-end",
+      children: [/*#__PURE__*/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__*/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__*/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__*/jsx(Send, {
+          className: "w-5 h-5"
+        })
+      })]
+    }), /*#__PURE__*/jsxs("p", {
+      className: "text-[11px] mt-2 px-1 ".concat(isDark ? "text-gray-600" : "text-gray-400", " flex items-center gap-1"),
+      children: [/*#__PURE__*/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__*/jsxs("div", {
+    className: "px-4 py-3 border-t border-gray-200 dark:border-gray-700",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "text-xs text-gray-500 dark:text-gray-400 mb-2 font-medium",
+      children: "Quick questions:"
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex gap-2 overflow-x-auto scrollbar-hide pb-1",
+      children: questions.map((question, index) => /*#__PURE__*/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__*/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__*/jsx(ChatHeader, {
+      companyName: companyName,
+      companyLogo: companyLogo,
+      primaryColor: primaryColor,
+      isDark: isDark,
+      onToggleTheme: onToggleTheme,
+      onMinimize: onMinimize,
+      onClose: onClose
+    }), !isMinimized && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(MessageList, {
+        messages: messages,
+        isDark: isDark,
+        primaryColor: primaryColor,
+        isTyping: isTyping,
+        companyLogo: companyLogo
+      }), /*#__PURE__*/jsx(QuickQuestions, {
+        questions: quickQuestions,
+        isDark: isDark,
+        primaryColor: primaryColor,
+        onQuestionClick: onQuickQuestion,
+        isTyping: isTyping
+      }), /*#__PURE__*/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__*/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__*/jsx("div", {
+      className: "absolute inset-0 rounded-full bg-white/20 scale-0 group-hover:scale-100 transition-transform duration-500"
+    }), /*#__PURE__*/jsx("div", {
+      className: "relative z-10 transition-transform duration-300",
+      children: isOpen ? /*#__PURE__*/jsx(X, {
+        className: "w-7 h-7"
+      }) : /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(MessageCircle, {
+          className: "w-7 h-7"
+        }), /*#__PURE__*/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
+  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__*/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__*/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__*/jsx(ToggleButton, {
+      isOpen: isOpen,
+      isDark: isDark,
+      primaryColor: primaryColor,
+      onToggle: toggleChat
+    })]
+  });
+};
+
+export { ChatWidget as default };
+//# sourceMappingURL=chat-widget.esm.js.map