@xcelsior/ui-chat 2.0.2 → 2.0.4

package/.storybook/preview.tsx

@@ -1,8 +1,9 @@
 import '@xcelsior/design-system/styles';
-import type { Preview } from '@storybook/react';
+
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ToastContainer } from '@xcelsior/design-system';
 
+import type { Preview } from '@storybook/react';
 const queryClient = new QueryClient({
     defaultOptions: {
         queries: {

package/dist/index.d.mts

@@ -310,6 +310,9 @@ interface UseWebSocketReturn {
 /**
  * Hook for WebSocket connection in chat widget.
  * Can use an external WebSocket connection (for agents) via the externalWebSocket prop.
+ *
+ * Handles React Strict Mode (dev) gracefully — tracks whether the effect has been
+ * cleaned up so that an aborted connection doesn't trigger reconnection.
  */
 declare function useWebSocket(config: IChatConfig, externalWebSocket?: WebSocket | null): UseWebSocketReturn;
 

package/dist/index.d.ts

@@ -310,6 +310,9 @@ interface UseWebSocketReturn {
 /**
  * Hook for WebSocket connection in chat widget.
  * Can use an external WebSocket connection (for agents) via the externalWebSocket prop.
+ *
+ * Handles React Strict Mode (dev) gracefully — tracks whether the effect has been
+ * cleaned up so that an aborted connection doesn't trigger reconnection.
  */
 declare function useWebSocket(config: IChatConfig, externalWebSocket?: WebSocket | null): UseWebSocketReturn;
 

package/dist/index.js

@@ -62,6 +62,7 @@ function useWebSocket(config, externalWebSocket) {
   const reconnectTimeoutRef = (0, import_react.useRef)(null);
   const reconnectAttemptsRef = (0, import_react.useRef)(0);
   const messageHandlerRef = (0, import_react.useRef)(null);
+  const abortedRef = (0, import_react.useRef)(false);
   const maxReconnectAttempts = 5;
   const reconnectDelay = 3e3;
   const isUsingExternalWs = !!externalWebSocket;
@@ -94,6 +95,7 @@ function useWebSocket(config, externalWebSocket) {
     };
   }, []);
   const connect = (0, import_react.useCallback)(() => {
+    if (abortedRef.current) return;
     console.log("connecting to WebSocket...", config.currentUser, config.conversationId);
     try {
       if (wsRef.current) {
@@ -113,6 +115,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);
@@ -120,12 +126,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);
@@ -174,6 +182,7 @@ function useWebSocket(config, externalWebSocket) {
   );
   const reconnect = (0, import_react.useCallback)(() => {
     reconnectAttemptsRef.current = 0;
+    abortedRef.current = false;
     connect();
   }, [connect]);
   (0, import_react.useEffect)(() => {
@@ -183,8 +192,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);
       }
@@ -240,6 +251,7 @@ async function fetchMessages(baseUrl, params, headers) {
 }
 
 // src/hooks/useMessages.ts
+var BOT_THINKING_TIMEOUT = 45e3;
 function useMessages(websocket, config) {
   const [messages, setMessages] = (0, import_react2.useState)([]);
   const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
@@ -248,6 +260,7 @@ function useMessages(websocket, config) {
   const [hasMore, setHasMore] = (0, import_react2.useState)(true);
   const [isLoadingMore, setIsLoadingMore] = (0, import_react2.useState)(false);
   const [isBotThinking, setIsBotThinking] = (0, import_react2.useState)(false);
+  const botThinkingTimerRef = (0, import_react2.useRef)(null);
   const { httpApiUrl, conversationId, headers, onError, toast } = config;
   const headersWithApiKey = (0, import_react2.useMemo)(
     () => ({
@@ -298,6 +311,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);
     }
@@ -311,6 +328,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 = (0, import_react2.useCallback)((messageId, status) => {
@@ -354,6 +375,11 @@ function useMessages(websocket, config) {
     headersWithApiKey,
     onError
   ]);
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      if (botThinkingTimerRef.current) clearTimeout(botThinkingTimerRef.current);
+    };
+  }, []);
   return {
     messages,
     addMessage,
@@ -2629,7 +2655,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)",
@@ -3346,59 +3371,36 @@ function Chat({
   const [userInfo, setUserInfo] = (0, import_react14.useState)(null);
   const [conversationId, setConversationId] = (0, import_react14.useState)("");
   const [isLoading, setIsLoading] = (0, import_react14.useState)(true);
-  const [isAnimating, setIsAnimating] = (0, import_react14.useState)(false);
-  const [showWidget, setShowWidget] = (0, import_react14.useState)(false);
   const identityMode = config.identityCollection || "progressive";
   const { position, isDragging, showHint, handlers } = useDraggablePosition(config.position);
-  const { currentState, setState: setStateRaw } = useChatWidgetState({
+  const sessionInitializedRef = (0, import_react14.useRef)(false);
+  const { currentState, setState } = useChatWidgetState({
     state,
     defaultState,
     onStateChange
   });
-  const setState = (0, import_react14.useCallback)(
-    (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]
-  );
-  (0, import_react14.useEffect)(() => {
-    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;
   (0, import_react14.useEffect)(() => {
+    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`);
@@ -3415,23 +3417,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 = (0, import_react14.useCallback)(
     (name, email) => {
       const convId = conversationId || generateSessionId();
@@ -3517,16 +3522,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__ */ (0, import_jsx_runtime11.jsx)("div", { style: widgetAnimationStyle, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     ChatWidget,
     {
       config: fullConfig,
@@ -3535,7 +3531,7 @@ function Chat({
       onMinimize: () => setState("minimized"),
       resolvedPosition: position
     }
-  ) });
+  );
 }
 
 // src/components/TypingIndicator.tsx