@eshal-bot/chat-widget 0.1.2 → 0.1.3

package/dist/chat-widget.js

@@ -1258,6 +1258,7 @@
   };
   const ChatHeader = _ref => {
     let {
+      conciergeName,
       companyName,
       companyLogo,
       primaryColor,
@@ -1311,7 +1312,7 @@
               fontSize: fontSize ? "calc(".concat(fontSize, " + ").concat(isMinimized ? "6px" : "10px", ")") : isMinimized ? "13px" : "15px",
               color: textColor || "#FFFFFF"
             },
-            children: companyName
+            children: conciergeName
           })
         })]
       }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
@@ -55245,7 +55246,14 @@
               } = _ref8,
               props = _objectWithoutProperties$1(_ref8, _excluded7);
             return /*#__PURE__*/jsxRuntimeExports.jsx("ul", _objectSpread2(_objectSpread2({
-              className: "list-disc pl-5 space-y-1"
+              className: "list-disc space-y-1",
+              style: {
+                listStyleType: "disc",
+                paddingInlineStart: isRtl ? undefined : "1.25rem",
+                paddingInlineEnd: isRtl ? "1.25rem" : undefined,
+                marginTop: "0.5rem",
+                marginBottom: "0.5rem"
+              }
             }, props), {}, {
               children: children
             }));
@@ -55257,7 +55265,14 @@
               } = _ref9,
               props = _objectWithoutProperties$1(_ref9, _excluded8);
             return /*#__PURE__*/jsxRuntimeExports.jsx("ol", _objectSpread2(_objectSpread2({
-              className: "list-decimal pl-5 space-y-1"
+              className: "list-decimal space-y-1",
+              style: {
+                listStyleType: "decimal",
+                paddingInlineStart: isRtl ? undefined : "1.25rem",
+                paddingInlineEnd: isRtl ? "1.25rem" : undefined,
+                marginTop: "0.5rem",
+                marginBottom: "0.5rem"
+              }
             }, props), {}, {
               children: children
             }));
@@ -55504,181 +55519,6 @@
     });
   };
 
-  const MessageList = _ref => {
-    let {
-      messages = [],
-      isDark,
-      primaryColor,
-      isLoading,
-      agentMessageBubbleColor,
-      userMessageBoxColor,
-      textColor,
-      fontFamily,
-      fontSize,
-      formatTime,
-      isRtl = false
-    } = _ref;
-    const containerRef = reactExports.useRef(null);
-    const messagesEndRef = reactExports.useRef(null);
-    const shouldAutoScrollRef = reactExports.useRef(true);
-    const autoScrollKey = reactExports.useMemo(() => messages.map(message => {
-      var _message$content$leng, _message$content;
-      return "".concat(message.id, ":").concat((_message$content$leng = (_message$content = message.content) === null || _message$content === void 0 ? void 0 : _message$content.length) !== null && _message$content$leng !== void 0 ? _message$content$leng : 0, ":").concat(message.isProcessing ? 1 : 0);
-    }).join("|"), [messages]);
-    const updateAutoScrollIntent = reactExports.useCallback(() => {
-      const container = containerRef.current;
-      if (!container) {
-        return;
-      }
-      const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
-      shouldAutoScrollRef.current = distanceFromBottom < 160;
-    }, []);
-    reactExports.useEffect(() => {
-      const container = containerRef.current;
-      if (!container) {
-        return undefined;
-      }
-      container.addEventListener("scroll", updateAutoScrollIntent, {
-        passive: true
-      });
-      updateAutoScrollIntent();
-      return () => {
-        container.removeEventListener("scroll", updateAutoScrollIntent);
-      };
-    }, [updateAutoScrollIntent]);
-    reactExports.useEffect(() => {
-      if (!shouldAutoScrollRef.current) {
-        return undefined;
-      }
-      if (typeof window === "undefined") {
-        return undefined;
-      }
-      const frame = window.requestAnimationFrame(() => {
-        var _messagesEndRef$curre;
-        (_messagesEndRef$curre = messagesEndRef.current) === null || _messagesEndRef$curre === void 0 || _messagesEndRef$curre.scrollIntoView({
-          behavior: "smooth",
-          block: "end"
-        });
-      });
-      return () => {
-        window.cancelAnimationFrame(frame);
-      };
-    }, [autoScrollKey, isLoading]);
-    return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-      ref: containerRef,
-      className: "chat-messages flex-1 overflow-y-auto px-5 py-4 space-y-4 min-h-0 ".concat(isDark ? "bg-gray-900" : "bg-gradient-to-b from-gray-50/50 to-white", " break-words"),
-      children: [messages.map(message => /*#__PURE__*/jsxRuntimeExports.jsx(MessageBubble, {
-        message: message,
-        isDark: isDark,
-        primaryColor: primaryColor,
-        agentMessageBubbleColor: agentMessageBubbleColor,
-        userMessageBoxColor: userMessageBoxColor,
-        textColor: textColor,
-        fontFamily: fontFamily,
-        fontSize: fontSize,
-        formatTime: formatTime,
-        isRtl: isRtl
-      }, message.id)), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-        ref: messagesEndRef,
-        className: "h-px"
-      })]
-    });
-  };
-
-  const ChatInput = _ref => {
-    let {
-      inputValue,
-      setInputValue,
-      onSend,
-      isDark,
-      primaryColor,
-      isOpen,
-      isMinimized,
-      isLoading,
-      placeholder,
-      textColor,
-      fontFamily,
-      fontSize,
-      isRtl = false
-    } = _ref;
-    const textareaRef = reactExports.useRef(null);
-    useGoogleFont(fontFamily);
-    reactExports.useEffect(() => {
-      if (isOpen && !isMinimized) {
-        var _textareaRef$current;
-        (_textareaRef$current = textareaRef.current) === null || _textareaRef$current === void 0 || _textareaRef$current.focus();
-      }
-    }, [isOpen, isMinimized]);
-    reactExports.useEffect(() => {
-      const textarea = textareaRef.current;
-      if (textarea) {
-        textarea.style.height = "auto";
-        textarea.style.height = "".concat(Math.min(textarea.scrollHeight, 120), "px");
-      }
-    }, [inputValue]);
-    const handleKeyPress = event => {
-      if (event.key === "Enter" && !event.shiftKey) {
-        event.preventDefault();
-        onSend();
-      }
-    };
-    const handleChange = event => {
-      setInputValue(event.target.value);
-    };
-    const isDisabled = !inputValue.trim() || isLoading;
-    const separatorColor = isDark ? "#374151" : "#e5e7eb";
-    return /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-      className: "px-5 py-4 border-t flex-shrink-0 ".concat(isDark ? "border-gray-700 bg-gray-900" : "border-gray-200 bg-white"),
-      style: {
-        borderTopColor: separatorColor,
-        borderTopWidth: "1px",
-        borderTopStyle: "solid"
-      },
-      children: /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-        className: "flex gap-2.5 items-end",
-        children: [/*#__PURE__*/jsxRuntimeExports.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__*/jsxRuntimeExports.jsx("textarea", {
-            id: "chat-widget-input",
-            ref: textareaRef,
-            value: inputValue,
-            onChange: handleChange,
-            onKeyDown: handleKeyPress,
-            placeholder: placeholder || "Type your message...",
-            rows: 1,
-            disabled: isLoading,
-            dir: isRtl ? "rtl" : "ltr",
-            className: "w-full px-4 py-0 bg-transparent rounded-xl leading-normal ".concat(isDark ? "text-gray-100" : "text-gray-900", " placeholder-gray-400 resize-none outline-none scrollbar-hide"),
-            style: {
-              maxHeight: "120px",
-              lineHeight: "48px",
-              fontFamily: fontFamily || "Inter",
-              fontSize: fontSize || "14px",
-              color: textColor || (isDark ? "#f3f4f6" : "#111827"),
-              textAlign: isRtl ? "right" : "left"
-            }
-          })
-        }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
-          onClick: onSend,
-          disabled: isDisabled,
-          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(!isDisabled ? "scale-100" : "scale-95"),
-          style: {
-            backgroundColor: !isDisabled ? primaryColor : isDark ? "#374151" : "#e5e7eb",
-            color: !isDisabled ? "white" : "#9ca3af"
-          },
-          "aria-label": "Send message",
-          children: /*#__PURE__*/jsxRuntimeExports.jsx(Send, {
-            className: "w-5 h-5"
-          })
-        })]
-      })
-    });
-  };
-
   const clamp = (value, min, max) => {
     if (Number.isNaN(value)) {
       return min;
@@ -55961,6 +55801,199 @@
     });
   };
 
+  const MessageList = _ref => {
+    let {
+      messages = [],
+      isDark,
+      primaryColor,
+      isLoading,
+      agentMessageBubbleColor,
+      userMessageBoxColor,
+      textColor,
+      fontFamily,
+      fontSize,
+      formatTime,
+      isRtl = false,
+      quickQuestions = [],
+      shouldShowQuickQuestions = false,
+      onQuickQuestion,
+      quickQuestionsLayout = "vertical"
+    } = _ref;
+    const containerRef = reactExports.useRef(null);
+    const messagesEndRef = reactExports.useRef(null);
+    const shouldAutoScrollRef = reactExports.useRef(true);
+    const autoScrollKey = reactExports.useMemo(() => messages.map(message => {
+      var _message$content$leng, _message$content;
+      return "".concat(message.id, ":").concat((_message$content$leng = (_message$content = message.content) === null || _message$content === void 0 ? void 0 : _message$content.length) !== null && _message$content$leng !== void 0 ? _message$content$leng : 0, ":").concat(message.isProcessing ? 1 : 0);
+    }).join("|"), [messages]);
+    const updateAutoScrollIntent = reactExports.useCallback(() => {
+      const container = containerRef.current;
+      if (!container) {
+        return;
+      }
+      const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+      shouldAutoScrollRef.current = distanceFromBottom < 160;
+    }, []);
+    reactExports.useEffect(() => {
+      const container = containerRef.current;
+      if (!container) {
+        return undefined;
+      }
+      container.addEventListener("scroll", updateAutoScrollIntent, {
+        passive: true
+      });
+      updateAutoScrollIntent();
+      return () => {
+        container.removeEventListener("scroll", updateAutoScrollIntent);
+      };
+    }, [updateAutoScrollIntent]);
+    reactExports.useEffect(() => {
+      if (!shouldAutoScrollRef.current) {
+        return undefined;
+      }
+      if (typeof window === "undefined") {
+        return undefined;
+      }
+      const frame = window.requestAnimationFrame(() => {
+        var _messagesEndRef$curre;
+        (_messagesEndRef$curre = messagesEndRef.current) === null || _messagesEndRef$curre === void 0 || _messagesEndRef$curre.scrollIntoView({
+          behavior: "smooth",
+          block: "end"
+        });
+      });
+      return () => {
+        window.cancelAnimationFrame(frame);
+      };
+    }, [autoScrollKey, isLoading]);
+    return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+      ref: containerRef,
+      className: "chat-messages flex-1 overflow-y-auto px-5 py-4 space-y-4 min-h-0 ".concat(isDark ? "bg-gray-900" : "bg-gradient-to-b from-gray-50/50 to-white", " break-words"),
+      children: [messages.map(message => /*#__PURE__*/jsxRuntimeExports.jsx(MessageBubble, {
+        message: message,
+        isDark: isDark,
+        primaryColor: primaryColor,
+        agentMessageBubbleColor: agentMessageBubbleColor,
+        userMessageBoxColor: userMessageBoxColor,
+        textColor: textColor,
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        formatTime: formatTime,
+        isRtl: isRtl
+      }, message.id)), shouldShowQuickQuestions && quickQuestions.length > 0 && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+        className: "pt-1",
+        children: /*#__PURE__*/jsxRuntimeExports.jsx(QuickQuestions, {
+          questions: quickQuestions,
+          isDark: isDark,
+          primaryColor: primaryColor,
+          onQuestionClick: onQuickQuestion,
+          isTyping: isLoading,
+          layout: quickQuestionsLayout,
+          fontFamily: fontFamily,
+          fontSize: fontSize,
+          textColor: textColor,
+          isRtl: isRtl
+        })
+      }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+        ref: messagesEndRef,
+        className: "h-px"
+      })]
+    });
+  };
+
+  const ChatInput = _ref => {
+    let {
+      inputValue,
+      setInputValue,
+      onSend,
+      isDark,
+      primaryColor,
+      isOpen,
+      isMinimized,
+      isLoading,
+      placeholder,
+      textColor,
+      fontFamily,
+      fontSize,
+      isRtl = false
+    } = _ref;
+    const textareaRef = reactExports.useRef(null);
+    useGoogleFont(fontFamily);
+    reactExports.useEffect(() => {
+      if (isOpen && !isMinimized) {
+        var _textareaRef$current;
+        (_textareaRef$current = textareaRef.current) === null || _textareaRef$current === void 0 || _textareaRef$current.focus();
+      }
+    }, [isOpen, isMinimized]);
+    reactExports.useEffect(() => {
+      const textarea = textareaRef.current;
+      if (textarea) {
+        textarea.style.height = "auto";
+        textarea.style.height = "".concat(Math.min(textarea.scrollHeight, 120), "px");
+      }
+    }, [inputValue]);
+    const handleKeyPress = event => {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        onSend();
+      }
+    };
+    const handleChange = event => {
+      setInputValue(event.target.value);
+    };
+    const isDisabled = !inputValue.trim() || isLoading;
+    const separatorColor = isDark ? "#374151" : "#e5e7eb";
+    return /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+      className: "px-5 py-4 border-t flex-shrink-0 ".concat(isDark ? "border-gray-700 bg-gray-900" : "border-gray-200 bg-white"),
+      style: {
+        borderTopColor: separatorColor,
+        borderTopWidth: "1px",
+        borderTopStyle: "solid"
+      },
+      children: /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+        className: "flex gap-2.5 items-end",
+        children: [/*#__PURE__*/jsxRuntimeExports.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__*/jsxRuntimeExports.jsx("textarea", {
+            id: "chat-widget-input",
+            ref: textareaRef,
+            value: inputValue,
+            onChange: handleChange,
+            onKeyDown: handleKeyPress,
+            placeholder: placeholder || "Type your message...",
+            rows: 1,
+            disabled: isLoading,
+            dir: isRtl ? "rtl" : "ltr",
+            className: "w-full px-4 py-0 bg-transparent rounded-xl leading-normal ".concat(isDark ? "text-gray-100" : "text-gray-900", " placeholder-gray-400 resize-none outline-none scrollbar-hide"),
+            style: {
+              maxHeight: "120px",
+              lineHeight: "48px",
+              fontFamily: fontFamily || "Inter",
+              fontSize: fontSize || "14px",
+              color: textColor || (isDark ? "#f3f4f6" : "#111827"),
+              textAlign: isRtl ? "right" : "left"
+            }
+          })
+        }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+          onClick: onSend,
+          disabled: isDisabled,
+          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(!isDisabled ? "scale-100" : "scale-95"),
+          style: {
+            backgroundColor: !isDisabled ? primaryColor : isDark ? "#374151" : "#e5e7eb",
+            color: !isDisabled ? "white" : "#9ca3af"
+          },
+          "aria-label": "Send message",
+          children: /*#__PURE__*/jsxRuntimeExports.jsx(Send, {
+            className: "w-5 h-5"
+          })
+        })]
+      })
+    });
+  };
+
   const DEFAULT_AGENT_BUBBLE_COLOR = "#ffffff";
   const DEFAULT_USER_MESSAGE_COLOR = "#f5f5f5";
   const DEFAULT_TEXT_COLOR = "#000000";
@@ -55989,6 +56022,7 @@
       isDark,
       primaryColor,
       textColor,
+      conciergeName,
       companyName,
       companyLogo,
       messages,
@@ -56018,8 +56052,8 @@
         return undefined;
       }
       return {
-        backgroundColor: basePrimaryColor,
-        borderColor: basePrimaryColor
+        backgroundColor: basePrimaryColor
+        // borderColor: basePrimaryColor,
       };
     }, [basePrimaryColor, isDark]);
     const resolvedAgentBubbleColor = reactExports.useMemo(() => {
@@ -56061,6 +56095,7 @@
       children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
         className: "flex-shrink-0",
         children: /*#__PURE__*/jsxRuntimeExports.jsx(ChatHeader, {
+          conciergeName: conciergeName,
           companyName: companyName,
           companyLogo: companyLogo,
           primaryColor: primaryColor,
@@ -56086,21 +56121,11 @@
           fontFamily: fontFamily,
           fontSize: fontSize,
           formatTime: formatTime,
-          isRtl: isRtlLanguage
-        }), shouldShowQuickQuestions && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-          className: "px-5 pb-4 flex-shrink-0",
-          children: /*#__PURE__*/jsxRuntimeExports.jsx(QuickQuestions, {
-            questions: quickQuestions,
-            isDark: isDark,
-            primaryColor: primaryColor,
-            onQuestionClick: onQuickQuestion !== null && onQuickQuestion !== void 0 ? onQuickQuestion : onDirectSend,
-            isTyping: isLoading,
-            layout: quickQuestionsLayout,
-            fontFamily: fontFamily,
-            fontSize: fontSize,
-            textColor: resolvedTextColor,
-            isRtl: isRtlLanguage
-          })
+          isRtl: isRtlLanguage,
+          quickQuestions: quickQuestions,
+          shouldShowQuickQuestions: shouldShowQuickQuestions,
+          onQuickQuestion: onQuickQuestion !== null && onQuickQuestion !== void 0 ? onQuickQuestion : onDirectSend,
+          quickQuestionsLayout: quickQuestionsLayout
         }), /*#__PURE__*/jsxRuntimeExports.jsx(ChatInput, {
           inputValue: inputValue,
           setInputValue: setInputValue,
@@ -56159,6 +56184,7 @@
       primaryColor = "#2563eb",
       position = "bottom-right",
       companyName = "Support Team",
+      conciergeName,
       companyLogo = null,
       welcomeMessage = "Hi! How can we help?",
       quickQuestions = [],
@@ -56232,6 +56258,7 @@
         primaryColor: primaryColor,
         textColor: textColor,
         companyName: companyName,
+        conciergeName: conciergeName,
         companyLogo: companyLogo,
         messages: messages,
         isLoading: isLoading,
@@ -56269,6 +56296,7 @@
       primaryColor: '#2563eb',
       position: 'bottom-right',
       companyName: 'Support Team',
+      conciergeName: null,
       companyLogo: null,
       welcomeMessage: 'Hi! How can we help?',
       quickQuestions: [],