@blockspark/chat-widget 1.0.20 → 1.0.22

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React, { useState, useEffect, useCallback, useRef } from "react";
-import { c as createChatService, l as linkifyText, a as createDialogflowSession, C as ChatResolvedError, s as sendDialogflowMessage } from "./sanitize-Cm1kskSD.js";
+import { c as createChatService, l as linkifyText, a as createDialogflowSession, C as ChatResolvedError, s as sendDialogflowMessage } from "./sanitize-Q7JIm8H8.js";
 import require$$0 from "react-dom";
 const MODE_STORAGE_KEY = "chartsconnectect_chat_mode";
 const CHAT_ID_STORAGE_KEY = "chartsconnect_chat_id";
@@ -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([]);
@@ -88,25 +90,20 @@ function ChatWidget$1({
   const [wsConnected, setWsConnected] = useState(false);
   const [agentTyping, setAgentTyping] = useState(false);
   const [currentAgent, setCurrentAgent] = useState({ name: "Agent" });
-  const [collectingUserInfo, setCollectingUserInfo] = useState(false);
   const [chatResolved, setChatResolved] = useState(false);
   const [isStartingNewChat, setIsStartingNewChat] = useState(false);
   const [agentAccepted, setAgentAccepted] = useState(false);
-  const [userInfoStep, setUserInfoStep] = useState(null);
-  const [collectedUserName, setCollectedUserName] = useState("");
-  const [collectedUserEmail, setCollectedUserEmail] = useState("");
-  const [collectedUserMobile, setCollectedUserMobile] = useState("");
-  const collectedUserNameRef = useRef("");
   const messagesEndRef = 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 || typeof process !== "undefined" && process.env?.REACT_APP_BACKEND_BASE_URL;
+    return backendBaseUrl || "https://chartconnect.blockspark.in";
   };
   const getBackendWsUrl = () => {
-    return backendWsUrl || typeof process !== "undefined" && process.env?.REACT_APP_BACKEND_WS_URL;
+    return backendWsUrl || "wss://chartconnect.blockspark.in";
   };
   const chatServiceRef = useRef(
     createChatService({
@@ -140,22 +137,18 @@ 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([]);
-        setCollectingUserInfo(false);
-        setUserInfoStep(null);
-        setCollectedUserName("");
-        setCollectedUserEmail("");
-        setCollectedUserMobile("");
-        collectedUserNameRef.current = "";
         if (createSessionRef.current) {
           createSessionRef.current().catch(console.error);
         }
@@ -168,14 +161,8 @@ function ChatWidget$1({
     if (isStartingNewChat) return;
     setIsStartingNewChat(true);
     try {
-      const customerName = collectedUserNameRef.current || collectedUserName || null;
-      const customerEmail = collectedUserEmail || null;
-      const customerMobile = collectedUserMobile || null;
       const newSession = await chatServiceRef.current.startSupportChat(
-        sessionId || null,
-        customerName,
-        customerEmail,
-        customerMobile
+        sessionId || null
       );
       switchToHumanMode();
       setChatId(newSession.chat_id);
@@ -187,7 +174,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()
@@ -197,9 +184,6 @@ function ChatWidget$1({
       setIsStartingNewChat(false);
     }
   }, [
-    collectedUserEmail,
-    collectedUserMobile,
-    collectedUserName,
     debug,
     isStartingNewChat,
     sessionId,
@@ -222,12 +206,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) {
@@ -236,7 +229,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()
@@ -257,7 +250,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())
@@ -325,7 +318,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()
@@ -357,7 +350,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()
@@ -413,7 +406,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)
@@ -434,7 +427,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()
@@ -461,17 +454,14 @@ function ChatWidget$1({
       historyLoadedRef.current = null;
     }
   }, [currentMode, chatId, supportSessionId, loadMessageHistory, messages.length]);
-  const handleHandoff = async (customerName, customerEmail, customerMobile) => {
+  const handleHandoff = async (webhookChatId, webhookSessionId) => {
     try {
       setIsConnectingToAgent(true);
       const dialogflowSessionId = sessionId;
-      const session = await chatServiceRef.current.ensureChatInitialized(
+      const session = webhookChatId && webhookSessionId ? { chat_id: webhookChatId, session_id: webhookSessionId } : await chatServiceRef.current.ensureChatInitialized(
         chatId,
         supportSessionId,
-        dialogflowSessionId || null,
-        customerName || null,
-        customerEmail || null,
-        customerMobile || null
+        dialogflowSessionId || null
       );
       if (!session || !session.chat_id) {
         throw new Error("Failed to initialize chat session");
@@ -485,76 +475,64 @@ function ChatWidget$1({
           console.log("✅ Chat initialized:", { chatId: currentChatId, sessionId: currentSupportSessionId });
         }
       }
-      try {
-        await chatServiceRef.current.requestHandoff(
-          currentChatId,
-          currentSupportSessionId,
-          "Customer requested human agent",
-          dialogflowSessionId || null,
-          customerName || null,
-          customerEmail || null,
-          customerMobile || null
-        );
-        if (debug) {
-          console.log("✅ Handoff requested successfully");
-        }
-      } catch (handoffError) {
-        if (handoffError.message?.includes("Invalid chat_id") || handoffError.message?.includes("Chat not found") || handoffError.message?.includes("unauthorized") || handoffError.message?.includes("400") || handoffError.message?.includes("401") || handoffError.message?.includes("404") || handoffError.message?.includes("expired")) {
-          if (debug) {
-            console.log("⚠️ Chat expired or not found. Re-initializing chat...");
-          }
-          setChatId(null);
-          setSupportSessionId(null);
-          const newSession = await chatServiceRef.current.startSupportChat(
-            dialogflowSessionId || null,
-            customerName || null,
-            customerEmail || null,
-            customerMobile || null
-          );
-          if (!newSession || !newSession.chat_id) {
-            throw new Error("Failed to re-initialize chat session");
-          }
-          const newChatId = newSession.chat_id;
-          const newSessionId = newSession.session_id;
-          setChatId(newChatId);
-          setSupportSessionId(newSessionId);
+      if (!webhookChatId) {
+        try {
           await chatServiceRef.current.requestHandoff(
-            newChatId,
-            newSessionId,
+            currentChatId,
+            currentSupportSessionId,
             "Customer requested human agent",
-            dialogflowSessionId || null,
-            customerName || null,
-            customerEmail || null,
-            customerMobile || null
+            dialogflowSessionId || null
           );
           if (debug) {
-            console.log("✅ Handoff requested successfully after retry");
+            console.log("✅ Handoff requested successfully");
           }
-          const newSessionKey = `${newChatId}-${newSessionId}`;
-          if (historyLoadedRef.current !== newSessionKey) {
-            historyLoadedRef.current = newSessionKey;
-            await loadMessageHistory(true);
+        } catch (handoffError) {
+          if (handoffError.message?.includes("Invalid chat_id") || handoffError.message?.includes("Chat not found") || handoffError.message?.includes("unauthorized") || handoffError.message?.includes("400") || handoffError.message?.includes("401") || handoffError.message?.includes("404") || handoffError.message?.includes("expired")) {
+            if (debug) {
+              console.log("⚠️ Chat expired or not found. Re-initializing chat...");
+            }
+            setChatId(null);
+            setSupportSessionId(null);
+            const newSession = await chatServiceRef.current.startSupportChat(
+              dialogflowSessionId || null
+            );
+            if (!newSession || !newSession.chat_id) {
+              throw new Error("Failed to re-initialize chat session");
+            }
+            const newChatId = newSession.chat_id;
+            const newSessionId = newSession.session_id;
+            setChatId(newChatId);
+            setSupportSessionId(newSessionId);
+            await chatServiceRef.current.requestHandoff(
+              newChatId,
+              newSessionId,
+              "Customer requested human agent",
+              dialogflowSessionId || null
+            );
+            if (debug) {
+              console.log("✅ Handoff requested successfully after retry");
+            }
+            const newSessionKey = `${newChatId}-${newSessionId}`;
+            if (historyLoadedRef.current !== newSessionKey) {
+              historyLoadedRef.current = newSessionKey;
+              await loadMessageHistory(true);
+            }
+          } else {
+            throw handoffError;
           }
-        } else {
-          throw handoffError;
         }
+      } else if (debug) {
+        console.log("✅ Using webhook-created chat, skipping requestHandoff");
       }
       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()
@@ -586,7 +564,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(),
@@ -610,7 +588,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()
@@ -623,98 +601,22 @@ function ChatWidget$1({
     }
   };
   createSessionRef.current = createSession;
+  const sendingRef = useRef(false);
   const sendMessage = async (text, displayText, skipUserMessage = false) => {
-    if (!text.trim()) return;
-    if (collectingUserInfo) {
-      if (userInfoStep === "name") {
-        const name = text.trim();
-        setCollectedUserName(name);
-        collectedUserNameRef.current = name;
-        setUserInfoStep("email");
-        const userMessage = {
-          id: Date.now().toString(),
-          text: name,
-          sender: "user",
-          timestamp: /* @__PURE__ */ new Date()
-        };
-        setMessages((prev) => [...prev, userMessage]);
-        const emailPrompt = {
-          id: (Date.now() + 1).toString(),
-          text: "Thank you! Now please provide your email address:",
-          sender: "bot",
-          timestamp: /* @__PURE__ */ new Date()
-        };
-        setMessages((prev) => [...prev, emailPrompt]);
-        setInputValue("");
-        return;
-      } else if (userInfoStep === "email") {
-        const email = text.trim();
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        if (!emailRegex.test(email)) {
-          const invalidEmailMessage = {
-            id: (Date.now() + 1).toString(),
-            text: "Please provide a valid email address:",
-            sender: "bot",
-            timestamp: /* @__PURE__ */ new Date()
-          };
-          setMessages((prev) => [...prev, invalidEmailMessage]);
-          setInputValue("");
-          return;
-        }
-        setCollectedUserEmail(email);
-        setUserInfoStep("mobile");
-        const userMessage = {
-          id: Date.now().toString(),
-          text: email,
-          sender: "user",
-          timestamp: /* @__PURE__ */ new Date()
-        };
-        setMessages((prev) => [...prev, userMessage]);
-        const mobilePrompt = {
-          id: (Date.now() + 1).toString(),
-          text: "Thank you! Now please provide your mobile number:",
-          sender: "bot",
-          timestamp: /* @__PURE__ */ new Date()
-        };
-        setMessages((prev) => [...prev, mobilePrompt]);
-        setInputValue("");
-        return;
-      } else if (userInfoStep === "mobile") {
-        const mobile = text.trim();
-        const mobileRegex = /^[\+]?[(]?[0-9]{1,4}[)]?[-\s\.]?[(]?[0-9]{1,4}[)]?[-\s\.]?[0-9]{1,9}$/;
-        if (!mobileRegex.test(mobile) || mobile.length < 10) {
-          const invalidMobileMessage = {
-            id: (Date.now() + 1).toString(),
-            text: "Please provide a valid mobile number (e.g., +1234567890):",
-            sender: "bot",
-            timestamp: /* @__PURE__ */ new Date()
-          };
-          setMessages((prev) => [...prev, invalidMobileMessage]);
-          setInputValue("");
-          return;
-        }
-        setCollectedUserMobile(mobile);
-        const userMessage = {
-          id: Date.now().toString(),
-          text: mobile,
-          sender: "user",
-          timestamp: /* @__PURE__ */ new Date()
-        };
-        setMessages((prev) => [...prev, userMessage]);
-        const userName = collectedUserNameRef.current;
-        const userEmail = collectedUserEmail;
-        setCollectingUserInfo(false);
-        setUserInfoStep(null);
-        collectedUserNameRef.current = "";
-        await handleHandoff(userName, userEmail, mobile);
-        setInputValue("");
-        return;
-      }
+    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()
@@ -724,7 +626,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()
@@ -757,10 +659,7 @@ function ChatWidget$1({
           setSupportSessionId(null);
           try {
             const newSession = await chatServiceRef.current.startSupportChat(
-              sessionId || null,
-              null,
-              null,
-              null
+              sessionId || null
             );
             setChatId(newSession.chat_id);
             setSupportSessionId(newSession.session_id);
@@ -784,7 +683,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()
@@ -793,7 +692,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()
@@ -811,7 +710,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()
@@ -822,7 +721,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()
@@ -833,7 +732,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()
@@ -854,36 +753,29 @@ function ChatWidget$1({
         console.log("Handoff detected:", data.handoff);
       }
       if (data.handoff === true) {
-        const botMessage2 = {
-          id: (Date.now() + 1).toString(),
+        if (data.response || data.richContent) {
+          const botMessage = {
+            id: uid("msg"),
+            text: data.response,
+            sender: "bot",
+            timestamp: new Date(data.timestamp || Date.now()),
+            richContent: data.richContent
+          };
+          setMessages((prev) => [...prev, botMessage]);
+        }
+        await handleHandoff(data.chat_id, data.support_session_id);
+        return;
+      }
+      if (data.response || data.richContent) {
+        const botMessage = {
+          id: uid("msg"),
           text: data.response,
           sender: "bot",
           timestamp: new Date(data.timestamp || Date.now()),
           richContent: data.richContent
         };
-        setMessages((prev) => [...prev, botMessage2]);
-        setCollectingUserInfo(true);
-        setUserInfoStep("name");
-        setCollectedUserName("");
-        setCollectedUserEmail("");
-        collectedUserNameRef.current = "";
-        const namePrompt = {
-          id: (Date.now() + 2).toString(),
-          text: "To connect you with a human agent, I'll need some information. Please provide your name:",
-          sender: "bot",
-          timestamp: /* @__PURE__ */ new Date()
-        };
-        setMessages((prev) => [...prev, namePrompt]);
-        return;
+        setMessages((prev) => [...prev, botMessage]);
       }
-      const botMessage = {
-        id: (Date.now() + 1).toString(),
-        text: data.response,
-        sender: "bot",
-        timestamp: new Date(data.timestamp || Date.now()),
-        richContent: data.richContent
-      };
-      setMessages((prev) => [...prev, botMessage]);
     } catch (error) {
       console.error("Error sending message:", error);
       if (debug) {
@@ -895,7 +787,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()
@@ -1074,7 +966,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()
@@ -1101,7 +993,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()
@@ -1134,22 +1026,16 @@ 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: [