@xcelsior/ui-chat 2.0.2 → 2.0.4

package/dist/index.mjs

@@ -11,6 +11,7 @@ function useWebSocket(config, externalWebSocket) {
   const reconnectTimeoutRef = useRef(null);
   const reconnectAttemptsRef = useRef(0);
   const messageHandlerRef = useRef(null);
+  const abortedRef = useRef(false);
   const maxReconnectAttempts = 5;
   const reconnectDelay = 3e3;
   const isUsingExternalWs = !!externalWebSocket;
@@ -43,6 +44,7 @@ function useWebSocket(config, externalWebSocket) {
     };
   }, []);
   const connect = useCallback(() => {
+    if (abortedRef.current) return;
     console.log("connecting to WebSocket...", config.currentUser, config.conversationId);
     try {
       if (wsRef.current) {
@@ -62,6 +64,10 @@ function useWebSocket(config, externalWebSocket) {
       }
       const ws = new WebSocket(url.toString());
       ws.onopen = () => {
+        if (abortedRef.current) {
+          ws.close(1e3, "Effect cleaned up");
+          return;
+        }
         console.log("WebSocket connected");
         setIsConnected(true);
         setError(null);
@@ -69,12 +75,14 @@ function useWebSocket(config, externalWebSocket) {
         config.onConnectionChange?.(true);
       };
       ws.onerror = (event) => {
+        if (abortedRef.current) return;
         console.error("WebSocket error:", event);
         const err = new Error("WebSocket connection error");
         setError(err);
         config.onError?.(err);
       };
       ws.onclose = (event) => {
+        if (abortedRef.current) return;
         console.log("WebSocket closed:", event.code, event.reason);
         setIsConnected(false);
         config.onConnectionChange?.(false);
@@ -123,6 +131,7 @@ function useWebSocket(config, externalWebSocket) {
   );
   const reconnect = useCallback(() => {
     reconnectAttemptsRef.current = 0;
+    abortedRef.current = false;
     connect();
   }, [connect]);
   useEffect(() => {
@@ -132,8 +141,10 @@ function useWebSocket(config, externalWebSocket) {
       const cleanup = subscribeToMessage(externalWebSocket);
       return cleanup;
     }
+    abortedRef.current = false;
     connect();
     return () => {
+      abortedRef.current = true;
       if (reconnectTimeoutRef.current) {
         clearTimeout(reconnectTimeoutRef.current);
       }
@@ -157,7 +168,7 @@ function useWebSocket(config, externalWebSocket) {
 }
 
 // src/hooks/useMessages.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
 
 // src/utils/api.ts
 import axios from "axios";
@@ -189,6 +200,7 @@ async function fetchMessages(baseUrl, params, headers) {
 }
 
 // src/hooks/useMessages.ts
+var BOT_THINKING_TIMEOUT = 45e3;
 function useMessages(websocket, config) {
   const [messages, setMessages] = useState2([]);
   const [isLoading, setIsLoading] = useState2(false);
@@ -197,6 +209,7 @@ function useMessages(websocket, config) {
   const [hasMore, setHasMore] = useState2(true);
   const [isLoadingMore, setIsLoadingMore] = useState2(false);
   const [isBotThinking, setIsBotThinking] = useState2(false);
+  const botThinkingTimerRef = useRef2(null);
   const { httpApiUrl, conversationId, headers, onError, toast } = config;
   const headersWithApiKey = useMemo(
     () => ({
@@ -247,6 +260,10 @@ function useMessages(websocket, config) {
       });
       if (newMessage.senderType === "bot" || newMessage.senderType === "system") {
         setIsBotThinking(false);
+        if (botThinkingTimerRef.current) {
+          clearTimeout(botThinkingTimerRef.current);
+          botThinkingTimerRef.current = null;
+        }
       }
       onMessageReceived?.(newMessage);
     }
@@ -260,6 +277,10 @@ function useMessages(websocket, config) {
     });
     if (message.senderType === "customer") {
       setIsBotThinking(true);
+      if (botThinkingTimerRef.current) clearTimeout(botThinkingTimerRef.current);
+      botThinkingTimerRef.current = setTimeout(() => {
+        setIsBotThinking(false);
+      }, BOT_THINKING_TIMEOUT);
     }
   }, []);
   const updateMessageStatus = useCallback2((messageId, status) => {
@@ -303,6 +324,11 @@ function useMessages(websocket, config) {
     headersWithApiKey,
     onError
   ]);
+  useEffect2(() => {
+    return () => {
+      if (botThinkingTimerRef.current) clearTimeout(botThinkingTimerRef.current);
+    };
+  }, []);
   return {
     messages,
     addMessage,
@@ -451,7 +477,7 @@ function useTypingIndicator(websocket) {
 }
 
 // src/hooks/useResizableWidget.ts
-import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
 var STORAGE_KEY = "xcelsior-chat-size";
 var EDGE_ZONE = 8;
 var CURSOR_MAP = {
@@ -519,10 +545,10 @@ function useResizableWidget({
   const [isResizing, setIsResizing] = useState5(false);
   const [isNearEdge, setIsNearEdge] = useState5(false);
   const [activeEdge, setActiveEdge] = useState5(null);
-  const sizeRef = useRef2(size);
+  const sizeRef = useRef3(size);
   sizeRef.current = size;
-  const dragRef = useRef2(null);
-  const containerRef = useRef2(null);
+  const dragRef = useRef3(null);
+  const containerRef = useRef3(null);
   const clamp = useCallback3(
     (w, h) => {
       const mxW = Math.min(maxWidth, window.innerWidth - 24);
@@ -911,7 +937,7 @@ function ChatHeader({ agent, onClose, onMinimize, theme }) {
 }
 
 // src/components/MessageList.tsx
-import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef5 } from "react";
 
 // src/components/Spinner.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -1476,7 +1502,7 @@ function MessageItem({
 }
 
 // src/components/ThinkingIndicator.tsx
-import { useEffect as useEffect5, useRef as useRef3, useState as useState6 } from "react";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState6 } from "react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var PHRASE_POOLS = {
   // ── Greetings & small talk ──
@@ -1663,7 +1689,7 @@ function ThinkingIndicator({
   const [phraseIndex, setPhraseIndex] = useState6(0);
   const [displayText, setDisplayText] = useState6("");
   const [isDeleting, setIsDeleting] = useState6(false);
-  const phrasesRef = useRef3(getShuffledPhrases(detectContext(lastUserMessage)));
+  const phrasesRef = useRef4(getShuffledPhrases(detectContext(lastUserMessage)));
   useEffect5(() => {
     phrasesRef.current = getShuffledPhrases(detectContext(lastUserMessage));
     setPhraseIndex(0);
@@ -1782,13 +1808,13 @@ function MessageList({
   onQuickAction,
   isBotThinking = false
 }) {
-  const messagesEndRef = useRef4(null);
-  const containerRef = useRef4(null);
-  const prevLengthRef = useRef4(messages.length);
-  const loadMoreTriggerRef = useRef4(null);
-  const prevScrollHeightRef = useRef4(0);
-  const hasInitialScrolledRef = useRef4(false);
-  const isUserScrollingRef = useRef4(false);
+  const messagesEndRef = useRef5(null);
+  const containerRef = useRef5(null);
+  const prevLengthRef = useRef5(messages.length);
+  const loadMoreTriggerRef = useRef5(null);
+  const prevScrollHeightRef = useRef5(0);
+  const hasInitialScrolledRef = useRef5(false);
+  const isUserScrollingRef = useRef5(false);
   const bgColor = theme?.background || "#00001a";
   const isLightTheme = (() => {
     if (!bgColor.startsWith("#")) return false;
@@ -2003,7 +2029,7 @@ function MessageList({
 }
 
 // src/components/ChatInput.tsx
-import { useEffect as useEffect7, useRef as useRef5, useState as useState7 } from "react";
+import { useEffect as useEffect7, useRef as useRef6, useState as useState7 } from "react";
 import { createPortal } from "react-dom";
 import Picker from "@emoji-mart/react";
 import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -2029,13 +2055,13 @@ function ChatInput({
   const [emojiData, setEmojiData] = useState7();
   const [emojiPickerPosition, setEmojiPickerPosition] = useState7(null);
   const [isFocused, setIsFocused] = useState7(false);
-  const textAreaRef = useRef5(null);
-  const emojiPickerRef = useRef5(null);
-  const emojiButtonRef = useRef5(null);
-  const fileInputRef = useRef5(null);
-  const typingTimeoutRef = useRef5(null);
-  const startTypingTimeoutRef = useRef5(null);
-  const isTypingRef = useRef5(false);
+  const textAreaRef = useRef6(null);
+  const emojiPickerRef = useRef6(null);
+  const emojiButtonRef = useRef6(null);
+  const fileInputRef = useRef6(null);
+  const typingTimeoutRef = useRef6(null);
+  const startTypingTimeoutRef = useRef6(null);
+  const isTypingRef = useRef6(false);
   const enableEmoji = config.enableEmoji ?? true;
   const enableFileUpload = config.enableFileUpload ?? true;
   const bgColor = config.theme?.background || "#00001a";
@@ -2578,7 +2604,6 @@ function ChatWidget({
   })();
   const positionClass = resolvedPosition === "left" ? "left-4" : "right-4";
   const containerStyle = isFullPage ? { backgroundColor: bgColor, color: textColor } : {
-    position: "relative",
     width,
     height,
     maxHeight: "calc(100vh - 100px)",
@@ -2764,7 +2789,7 @@ function ChatWidget({
 }
 
 // src/components/Chat.tsx
-import { useCallback as useCallback8, useEffect as useEffect10, useState as useState11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10, useRef as useRef8, useState as useState11 } from "react";
 
 // src/components/PreChatForm.tsx
 import { useState as useState8 } from "react";
@@ -3174,7 +3199,7 @@ function PreChatForm({
 }
 
 // src/hooks/useDraggablePosition.ts
-import { useState as useState9, useCallback as useCallback6, useRef as useRef6, useEffect as useEffect9 } from "react";
+import { useState as useState9, useCallback as useCallback6, useRef as useRef7, useEffect as useEffect9 } from "react";
 var STORAGE_KEY2 = "xcelsior-chat-position";
 function getStoredPosition() {
   try {
@@ -3194,9 +3219,9 @@ function useDraggablePosition(configPosition = "auto") {
   const resolvedDefault = configPosition === "auto" ? getStoredPosition() : configPosition;
   const [position, setPosition] = useState9(resolvedDefault);
   const [isDragging, setIsDragging] = useState9(false);
-  const dragStartX = useRef6(0);
-  const fabRef = useRef6(null);
-  const hasShownHint = useRef6(false);
+  const dragStartX = useRef7(0);
+  const fabRef = useRef7(null);
+  const hasShownHint = useRef7(false);
   const [showHint, setShowHint] = useState9(false);
   useEffect9(() => {
     try {
@@ -3295,59 +3320,36 @@ function Chat({
   const [userInfo, setUserInfo] = useState11(null);
   const [conversationId, setConversationId] = useState11("");
   const [isLoading, setIsLoading] = useState11(true);
-  const [isAnimating, setIsAnimating] = useState11(false);
-  const [showWidget, setShowWidget] = useState11(false);
   const identityMode = config.identityCollection || "progressive";
   const { position, isDragging, showHint, handlers } = useDraggablePosition(config.position);
-  const { currentState, setState: setStateRaw } = useChatWidgetState({
+  const sessionInitializedRef = useRef8(false);
+  const { currentState, setState } = useChatWidgetState({
     state,
     defaultState,
     onStateChange
   });
-  const setState = useCallback8(
-    (newState) => {
-      if (newState === "open" && currentState === "minimized") {
-        setShowWidget(true);
-        setIsAnimating(true);
-        setStateRaw(newState);
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            setIsAnimating(false);
-          });
-        });
-      } else if ((newState === "minimized" || newState === "closed") && currentState === "open") {
-        setIsAnimating(true);
-        setTimeout(() => {
-          setShowWidget(false);
-          setIsAnimating(false);
-          setStateRaw(newState);
-        }, 200);
-      } else {
-        setStateRaw(newState);
-      }
-    },
-    [currentState, setStateRaw]
-  );
-  useEffect10(() => {
-    if (currentState === "open") {
-      setShowWidget(true);
-    }
-  }, [currentState]);
+  const configConversationId = config.conversationId;
+  const configUserEmail = config.currentUser?.email;
+  const configUserName = config.currentUser?.name;
+  const configUserAvatar = config.currentUser?.avatar;
+  const configUserStatus = config.currentUser?.status;
   useEffect10(() => {
+    if (sessionInitializedRef.current) return;
     const initializeSession = () => {
       try {
-        if (config.currentUser?.email && config.currentUser?.name) {
-          const convId2 = config.conversationId || generateSessionId();
+        if (configUserEmail && configUserName) {
+          const convId2 = configConversationId || generateSessionId();
           const user = {
-            name: config.currentUser.name,
-            email: config.currentUser.email,
-            avatar: config.currentUser.avatar,
+            name: configUserName,
+            email: configUserEmail,
+            avatar: configUserAvatar,
             type: "customer",
-            status: config.currentUser.status
+            status: configUserStatus
           };
           setUserInfo(user);
           setConversationId(convId2);
           setIsLoading(false);
+          sessionInitializedRef.current = true;
           return;
         }
         const storedDataJson = localStorage.getItem(`${storageKeyPrefix}_user`);
@@ -3364,23 +3366,26 @@ function Chat({
             setUserInfo(user);
             setConversationId(storedData.conversationId);
             setIsLoading(false);
+            sessionInitializedRef.current = true;
             return;
           }
         }
-        const convId = config.conversationId || generateSessionId();
+        const convId = configConversationId || generateSessionId();
         setConversationId(convId);
         if (identityMode === "progressive" || identityMode === "none") {
           setUserInfo(null);
         }
+        sessionInitializedRef.current = true;
       } catch (error) {
         console.error("Error initializing chat session:", error);
-        setConversationId(config.conversationId || generateSessionId());
+        setConversationId(configConversationId || generateSessionId());
+        sessionInitializedRef.current = true;
       } finally {
         setIsLoading(false);
       }
     };
     initializeSession();
-  }, [config, storageKeyPrefix, identityMode]);
+  }, [configConversationId, configUserEmail, configUserName, configUserAvatar, configUserStatus, storageKeyPrefix, identityMode]);
   const handlePreChatSubmit = useCallback8(
     (name, email) => {
       const convId = conversationId || generateSessionId();
@@ -3466,16 +3471,7 @@ function Chat({
     conversationId,
     currentUser: userInfo || void 0
   };
-  const widgetAnimationStyle = showWidget && !isAnimating ? {
-    opacity: 1,
-    transform: "translateY(0) scale(1)",
-    transition: "opacity 0.25s ease-out, transform 0.25s ease-out"
-  } : {
-    opacity: 0,
-    transform: "translateY(12px) scale(0.97)",
-    transition: "opacity 0.2s ease-in, transform 0.2s ease-in"
-  };
-  return /* @__PURE__ */ jsx11("div", { style: widgetAnimationStyle, children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx11(
     ChatWidget,
     {
       config: fullConfig,
@@ -3484,7 +3480,7 @@ function Chat({
       onMinimize: () => setState("minimized"),
       resolvedPosition: position
     }
-  ) });
+  );
 }
 
 // src/components/TypingIndicator.tsx