@blockspark/chat-widget 1.0.21 → 1.0.23

package/dist/index.esm.js

@@ -77,6 +77,8 @@ function ChatWidget$1({
   backendBaseUrl,
   backendWsUrl
 }) {
+  const msgIdCounter = useRef(0);
+  const uid = (prefix = "msg") => `${prefix}-${Date.now()}-${++msgIdCounter.current}`;
   const [isOpen, setIsOpen] = useState(false);
   const [showWelcomePopup, setShowWelcomePopup] = useState(false);
   const [messages, setMessages] = useState([]);
@@ -92,9 +94,11 @@ function ChatWidget$1({
   const [isStartingNewChat, setIsStartingNewChat] = useState(false);
   const [agentAccepted, setAgentAccepted] = useState(false);
   const messagesEndRef = useRef(null);
+  const inputRef = useRef(null);
   const typingTimeoutRef = useRef(null);
   const agentTypingTimeoutRef = useRef(null);
   const creatingSessionRef = useRef(false);
+  const resolvedResetTimerRef = useRef(null);
   const createSessionRef = useRef(null);
   const getBackendBaseUrl = () => {
     return backendBaseUrl || "https://chartconnect.blockspark.in";
@@ -134,13 +138,15 @@ function ChatWidget$1({
       setSupportSessionId(null);
       setSessionId(null);
       const thankYouMessage = {
-        id: `resolved-${Date.now()}`,
+        id: uid("resolved"),
         text: "Thank you for contacting us!",
         sender: "bot",
         timestamp: /* @__PURE__ */ new Date()
       };
       setMessages((prev) => [...prev, thankYouMessage]);
-      setTimeout(() => {
+      if (resolvedResetTimerRef.current) clearTimeout(resolvedResetTimerRef.current);
+      resolvedResetTimerRef.current = setTimeout(() => {
+        resolvedResetTimerRef.current = null;
         switchToBotMode();
         setChatResolved(false);
         setMessages([]);
@@ -169,7 +175,7 @@ function ChatWidget$1({
       setMessages((prev) => [
         ...prev,
         {
-          id: `error-new-chat-${Date.now()}`,
+          id: uid("error"),
           text: debug ? `Error: ${error?.message || "Failed to start a new chat."}` : "Sorry, I couldn't start a new chat. Please try again.",
           sender: "bot",
           timestamp: /* @__PURE__ */ new Date()
@@ -201,12 +207,21 @@ function ChatWidget$1({
   useEffect(() => {
     if (!enableWelcomePopup) return;
     const timer = setTimeout(() => {
-      setShowWelcomePopup(true);
+      if (!isOpen) {
+        setShowWelcomePopup(true);
+      }
     }, welcomePopupDelay);
     return () => clearTimeout(timer);
-  }, [enableWelcomePopup, welcomePopupDelay]);
+  }, [enableWelcomePopup, welcomePopupDelay, isOpen]);
+  const scrollTimeoutRef = useRef(null);
   useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+    scrollTimeoutRef.current = setTimeout(() => {
+      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, 80);
+    return () => {
+      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+    };
   }, [messages]);
   const handleAgentChanged = useCallback((message) => {
     if (message.to_agent) {
@@ -215,7 +230,7 @@ function ChatWidget$1({
         name: message.to_agent
       });
       const systemMessage = {
-        id: `system-${Date.now()}`,
+        id: uid("system"),
         text: message.from_agent ? `Chat has been transferred from ${message.from_agent} to ${message.to_agent}` : `Chat has been transferred to ${message.to_agent}`,
         sender: "bot",
         timestamp: /* @__PURE__ */ new Date()
@@ -236,7 +251,7 @@ function ChatWidget$1({
         if (message.content) {
           if (message.sender_type === "agent" || !message.sender_type) {
             const agentMessage = {
-              id: message.id || `agent-${Date.now()}`,
+              id: message.id || uid("agent"),
               text: message.content,
               sender: "agent",
               timestamp: new Date(message.timestamp || Date.now())
@@ -304,7 +319,7 @@ function ChatWidget$1({
         setAgentAccepted(true);
         setIsConnectingToAgent(false);
         const acceptedMessage = {
-          id: message.id || `agent-accepted-${message.chat_id || Date.now()}-${Date.now()}`,
+          id: message.id || uid("agent-accepted"),
           text: "You can chat now, the agent has accepted your request.",
           sender: "bot",
           timestamp: message.timestamp ? new Date(message.timestamp) : /* @__PURE__ */ new Date()
@@ -336,7 +351,7 @@ function ChatWidget$1({
       case "error":
         console.error("WebSocket error:", message.error);
         const errorMessage = {
-          id: `error-${Date.now()}`,
+          id: uid("error"),
           text: message.error || "An error occurred. Please try again.",
           sender: "bot",
           timestamp: /* @__PURE__ */ new Date()
@@ -392,7 +407,7 @@ function ChatWidget$1({
       setIsLoading(true);
       const history = await chatServiceRef.current.loadMessageHistory(chatId, supportSessionId);
       const historyMessages = history.map((msg) => ({
-        id: msg.id || `msg-${Date.now()}-${Math.random()}`,
+        id: msg.id || uid("history"),
         text: msg.content,
         sender: msg.sender_type === "agent" ? "agent" : "user",
         timestamp: new Date(msg.timestamp)
@@ -413,7 +428,7 @@ function ChatWidget$1({
       console.error("Error loading message history:", error);
       if (debug) {
         const errorMessage = {
-          id: `error-${Date.now()}`,
+          id: uid("error"),
           text: `Failed to load chat history: ${error.message}`,
           sender: "bot",
           timestamp: /* @__PURE__ */ new Date()
@@ -513,19 +528,12 @@ function ChatWidget$1({
       switchToHumanMode();
       setChatResolved(false);
       setAgentAccepted(false);
-      const connectingMessage = {
-        id: `connecting-${Date.now()}`,
-        text: "Connecting you to a human agent...",
-        sender: "bot",
-        timestamp: /* @__PURE__ */ new Date()
-      };
-      setMessages((prev) => [...prev, connectingMessage]);
       const sessionKey = `${currentChatId}-${currentSupportSessionId}`;
       historyLoadedRef.current = sessionKey;
     } catch (error) {
       console.error("Error handling handoff:", error);
       const errorMessage = {
-        id: `error-${Date.now()}`,
+        id: uid("error"),
         text: debug ? `Handoff error: ${error.message}` : "Failed to connect to agent. Please try again.",
         sender: "bot",
         timestamp: /* @__PURE__ */ new Date()
@@ -557,7 +565,7 @@ function ChatWidget$1({
           console.log("Full session response:", data);
         }
         const welcomeMessage2 = {
-          id: `welcome-${Date.now()}`,
+          id: uid("welcome"),
           text: data.message,
           sender: "bot",
           timestamp: /* @__PURE__ */ new Date(),
@@ -581,7 +589,7 @@ function ChatWidget$1({
         });
       }
       const errorMessage = {
-        id: `error-${Date.now()}`,
+        id: uid("error"),
         text: debug ? `Error: ${error.message || "Failed to create session. Please check your Dialogflow configuration."}` : fallbackWelcomeMessage,
         sender: "bot",
         timestamp: /* @__PURE__ */ new Date()
@@ -594,12 +602,22 @@ function ChatWidget$1({
     }
   };
   createSessionRef.current = createSession;
+  const sendingRef = useRef(false);
   const sendMessage = async (text, displayText, skipUserMessage = false) => {
+    if (!text.trim() || sendingRef.current) return;
+    sendingRef.current = true;
+    try {
+      await sendMessageInner(text, displayText, skipUserMessage);
+    } finally {
+      sendingRef.current = false;
+    }
+  };
+  const sendMessageInner = async (text, displayText, skipUserMessage = false) => {
     if (!text.trim()) return;
     if (currentMode === "HUMAN") {
       if (!chatId || !supportSessionId) {
         const errorMessage = {
-          id: Date.now().toString(),
+          id: uid("msg"),
           text: "Chat session not initialized. Please try again.",
           sender: "bot",
           timestamp: /* @__PURE__ */ new Date()
@@ -609,7 +627,7 @@ function ChatWidget$1({
       }
       if (!skipUserMessage) {
         const userMessage = {
-          id: Date.now().toString(),
+          id: uid("msg"),
           text: displayText || text.trim(),
           sender: "user",
           timestamp: /* @__PURE__ */ new Date()
@@ -666,7 +684,7 @@ function ChatWidget$1({
               return;
             }
             const errorMessage = {
-              id: (Date.now() + 1).toString(),
+              id: uid("msg"),
               text: debug ? `Error: ${retryError.message || "Failed to send message."}` : "Sorry, I'm having trouble sending your message. Please try again.",
               sender: "bot",
               timestamp: /* @__PURE__ */ new Date()
@@ -675,7 +693,7 @@ function ChatWidget$1({
           }
         } else {
           const errorMessage = {
-            id: (Date.now() + 1).toString(),
+            id: uid("msg"),
             text: debug ? `Error: ${error.message || "Failed to send message to agent."}` : "Sorry, I'm having trouble sending your message. Please try again.",
             sender: "bot",
             timestamp: /* @__PURE__ */ new Date()
@@ -693,7 +711,7 @@ function ChatWidget$1({
         currentSessionId = await createSession();
         if (!currentSessionId) {
           const errorMessage = {
-            id: Date.now().toString(),
+            id: uid("msg"),
             text: debug ? "Failed to create session. Please check the console for details." : "Sorry, I'm having trouble connecting. Please try again.",
             sender: "bot",
             timestamp: /* @__PURE__ */ new Date()
@@ -704,7 +722,7 @@ function ChatWidget$1({
       } catch (error) {
         console.error("Error in createSession:", error);
         const errorMessage = {
-          id: Date.now().toString(),
+          id: uid("msg"),
           text: debug ? `Connection Error: ${error.message || "Please check your Dialogflow configuration."}` : "Sorry, I'm having trouble connecting. Please check your configuration.",
           sender: "bot",
           timestamp: /* @__PURE__ */ new Date()
@@ -715,7 +733,7 @@ function ChatWidget$1({
     }
     if (!skipUserMessage) {
       const userMessage = {
-        id: Date.now().toString(),
+        id: uid("msg"),
         text: displayText || text.trim(),
         sender: "user",
         timestamp: /* @__PURE__ */ new Date()
@@ -738,7 +756,7 @@ function ChatWidget$1({
       if (data.handoff === true) {
         if (data.response || data.richContent) {
           const botMessage = {
-            id: (Date.now() + 1).toString(),
+            id: uid("msg"),
             text: data.response,
             sender: "bot",
             timestamp: new Date(data.timestamp || Date.now()),
@@ -751,7 +769,7 @@ function ChatWidget$1({
       }
       if (data.response || data.richContent) {
         const botMessage = {
-          id: (Date.now() + 1).toString(),
+          id: uid("msg"),
           text: data.response,
           sender: "bot",
           timestamp: new Date(data.timestamp || Date.now()),
@@ -770,7 +788,7 @@ function ChatWidget$1({
         });
       }
       const errorMessage = {
-        id: (Date.now() + 1).toString(),
+        id: uid("msg"),
         text: debug ? `Error: ${error.message || "Failed to send message. Please check your Dialogflow configuration."}` : error.message?.includes("Failed to fetch") || error.message?.includes("CORS") ? "Unable to connect to Dialogflow. Please check your configuration and network." : "Sorry, I'm having trouble processing your message. Please try again.",
         sender: "bot",
         timestamp: /* @__PURE__ */ new Date()
@@ -783,6 +801,7 @@ function ChatWidget$1({
   const handleSubmit = (e) => {
     e.preventDefault();
     sendMessage(inputValue);
+    inputRef.current?.focus();
   };
   const handleInputChange = (e) => {
     const value = e.target.value;
@@ -949,7 +968,7 @@ function ChatWidget$1({
                             className: "custom-chip-button",
                             onClick: () => {
                               const userMessage = {
-                                id: Date.now().toString(),
+                                id: uid("msg"),
                                 text: chip.text,
                                 sender: "user",
                                 timestamp: /* @__PURE__ */ new Date()
@@ -976,7 +995,7 @@ function ChatWidget$1({
                             className: "custom-chip-button",
                             onClick: () => {
                               const userMessage = {
-                                id: Date.now().toString(),
+                                id: uid("msg"),
                                 text: chip.text,
                                 sender: "user",
                                 timestamp: /* @__PURE__ */ new Date()
@@ -1009,28 +1028,23 @@ function ChatWidget$1({
           /* @__PURE__ */ jsx("span", {}),
           /* @__PURE__ */ jsx("span", {})
         ] }) }),
-        isConnectingToAgent && /* @__PURE__ */ jsxs("div", { className: "custom-message custom-message-bot", children: [
-          /* @__PURE__ */ jsxs("div", { className: "custom-typing-indicator", children: [
-            /* @__PURE__ */ jsx("span", {}),
-            /* @__PURE__ */ jsx("span", {}),
-            /* @__PURE__ */ jsx("span", {})
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "custom-message-content", children: "Connecting to agent..." })
-        ] }),
-        currentMode === "HUMAN" && agentTyping && /* @__PURE__ */ jsxs("div", { className: "custom-agent-typing-indicator", children: [
-          /* @__PURE__ */ jsxs("span", { className: "custom-typing-dots", children: [
-            /* @__PURE__ */ jsx("span", {}),
-            /* @__PURE__ */ jsx("span", {}),
-            /* @__PURE__ */ jsx("span", {})
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "custom-typing-text", children: "Agent is typing..." })
-        ] }),
+        isConnectingToAgent && /* @__PURE__ */ jsx("div", { className: "custom-message custom-message-bot", children: /* @__PURE__ */ jsxs("div", { className: "custom-typing-indicator", children: [
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("span", {})
+        ] }) }),
+        currentMode === "HUMAN" && agentTyping && /* @__PURE__ */ jsx("div", { className: "custom-message custom-message-bot", children: /* @__PURE__ */ jsxs("div", { className: "custom-typing-indicator", children: [
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("span", {})
+        ] }) }),
         /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
       ] }),
       /* @__PURE__ */ jsxs("form", { className: "custom-chat-input-form", onSubmit: handleSubmit, children: [
         /* @__PURE__ */ jsx(
           "input",
           {
+            ref: inputRef,
             type: "text",
             className: "custom-chat-input",
             value: inputValue,