@xcelsior/ui-chat 2.0.2 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xcelsior/ui-chat",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -21,7 +21,8 @@
     "storybook": "^8.6.14",
     "@tailwindcss/postcss": "^4.1.13",
     "tsup": "^8.0.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "@xcelsior/design-system": "1.0.10"
   },
   "peerDependencies": {
     "tailwindcss": "^4",

package/src/components/Chat.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { ChatWidget } from './ChatWidget';
 import { PreChatForm } from './PreChatForm';
 import { ChatBubbleIcon } from './BrandIcons';
@@ -45,73 +45,44 @@ export function Chat({
     const [userInfo, setUserInfo] = useState<IUser | null>(null);
     const [conversationId, setConversationId] = useState<string>('');
     const [isLoading, setIsLoading] = useState(true);
-    const [isAnimating, setIsAnimating] = useState(false);
-    const [showWidget, setShowWidget] = useState(false);
 
     const identityMode = config.identityCollection || 'progressive';
     const { position, isDragging, showHint, handlers } = useDraggablePosition(config.position);
+    const sessionInitializedRef = useRef(false);
 
-    const { currentState, setState: setStateRaw } = useChatWidgetState({
+    const { currentState, setState } = useChatWidgetState({
         state,
         defaultState,
         onStateChange,
     });
 
-    // Wrap setState with animation handling
-    const setState = useCallback(
-        (newState: ChatWidgetState) => {
-            if (newState === 'open' && currentState === 'minimized') {
-                // Opening: show widget immediately, trigger animation
-                setShowWidget(true);
-                setIsAnimating(true);
-                setStateRaw(newState);
-                // Let the animation class apply on next frame
-                requestAnimationFrame(() => {
-                    requestAnimationFrame(() => {
-                        setIsAnimating(false);
-                    });
-                });
-            } else if (
-                (newState === 'minimized' || newState === 'closed') &&
-                currentState === 'open'
-            ) {
-                // Closing: animate out, then change state
-                setIsAnimating(true);
-                setTimeout(() => {
-                    setShowWidget(false);
-                    setIsAnimating(false);
-                    setStateRaw(newState);
-                }, 200);
-            } else {
-                setStateRaw(newState);
-            }
-        },
-        [currentState, setStateRaw]
-    );
-
-    // Sync showWidget with state
-    useEffect(() => {
-        if (currentState === 'open') {
-            setShowWidget(true);
-        }
-    }, [currentState]);
+    // Extract primitives from config for stable dependency array
+    const configConversationId = config.conversationId;
+    const configUserEmail = config.currentUser?.email;
+    const configUserName = config.currentUser?.name;
+    const configUserAvatar = config.currentUser?.avatar;
+    const configUserStatus = config.currentUser?.status;
 
     // Initialize session
     useEffect(() => {
+        // Guard: only run once unless identity actually changes
+        if (sessionInitializedRef.current) return;
+
         const initializeSession = () => {
             try {
-                if (config.currentUser?.email && config.currentUser?.name) {
-                    const convId = config.conversationId || generateSessionId();
+                if (configUserEmail && configUserName) {
+                    const convId = configConversationId || generateSessionId();
                     const user: IUser = {
-                        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(convId);
                     setIsLoading(false);
+                    sessionInitializedRef.current = true;
                     return;
                 }
 
@@ -130,26 +101,29 @@ export 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 = useCallback(
         (name: string, email: string) => {
@@ -245,29 +219,16 @@ export function Chat({
         currentUser: userInfo || undefined,
     };
 
-    // Animation styles for open/close
-    const widgetAnimationStyle: React.CSSProperties =
-        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',
-              };
-
+    // Render ChatWidget directly — no wrapper div.
+    // A wrapper with CSS `transform` (even identity) creates a new containing block,
+    // which breaks `position: fixed` on the ChatWidget.
     return (
-        <div style={widgetAnimationStyle}>
-            <ChatWidget
-                config={fullConfig}
-                className={className}
-                onClose={() => setState('closed')}
-                onMinimize={() => setState('minimized')}
-                resolvedPosition={position}
-            />
-        </div>
+        <ChatWidget
+            config={fullConfig}
+            className={className}
+            onClose={() => setState('closed')}
+            onMinimize={() => setState('minimized')}
+            resolvedPosition={position}
+        />
     );
 }

package/src/components/ChatWidget.tsx

@@ -147,7 +147,6 @@ export function ChatWidget({
     const containerStyle: React.CSSProperties = isFullPage
         ? { backgroundColor: bgColor, color: textColor }
         : {
-              position: 'relative',
               width,
               height,
               maxHeight: 'calc(100vh - 100px)',

package/src/hooks/useMessages.ts

@@ -1,8 +1,11 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { IMessage, IChatConfig, UseMessagesReturn } from '../types';
 import type { UseWebSocketReturn } from './useWebSocket';
 import { fetchMessages } from '../utils/api';
 
+/** Max time (ms) to show the bot thinking indicator before auto-clearing */
+const BOT_THINKING_TIMEOUT = 45_000;
+
 export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig): UseMessagesReturn {
     const [messages, setMessages] = useState<IMessage[]>([]);
     const [isLoading, setIsLoading] = useState(false);
@@ -11,6 +14,7 @@ export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig):
     const [hasMore, setHasMore] = useState(true);
     const [isLoadingMore, setIsLoadingMore] = useState(false);
     const [isBotThinking, setIsBotThinking] = useState(false);
+    const botThinkingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
     // Extract stable references from config
     const { httpApiUrl, conversationId, headers, onError, toast } = config;
@@ -81,6 +85,10 @@ export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig):
             // Clear bot thinking state when bot or system message arrives
             if (newMessage.senderType === 'bot' || newMessage.senderType === 'system') {
                 setIsBotThinking(false);
+                if (botThinkingTimerRef.current) {
+                    clearTimeout(botThinkingTimerRef.current);
+                    botThinkingTimerRef.current = null;
+                }
             }
 
             // Notify parent component about new message
@@ -99,6 +107,12 @@ export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig):
         // Show bot thinking indicator immediately when customer sends a message
         if (message.senderType === 'customer') {
             setIsBotThinking(true);
+
+            // Safety timeout — clear thinking state if no bot response arrives
+            if (botThinkingTimerRef.current) clearTimeout(botThinkingTimerRef.current);
+            botThinkingTimerRef.current = setTimeout(() => {
+                setIsBotThinking(false);
+            }, BOT_THINKING_TIMEOUT);
         }
     }, []);
 
@@ -149,6 +163,13 @@ export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig):
         onError,
     ]);
 
+    // Clean up timer on unmount
+    useEffect(() => {
+        return () => {
+            if (botThinkingTimerRef.current) clearTimeout(botThinkingTimerRef.current);
+        };
+    }, []);
+
     return {
         messages,
         addMessage,

package/src/hooks/useWebSocket.ts

@@ -12,6 +12,9 @@ export 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.
  */
 export function useWebSocket(
     config: IChatConfig,
@@ -24,6 +27,7 @@ export function useWebSocket(
     const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const reconnectAttemptsRef = useRef(0);
     const messageHandlerRef = useRef<((event: MessageEvent) => void) | null>(null);
+    const abortedRef = useRef(false);
     const maxReconnectAttempts = 5;
     const reconnectDelay = 3000;
 
@@ -71,6 +75,9 @@ export function useWebSocket(
 
     // biome-ignore lint/correctness/useExhaustiveDependencies: dependencies managed manually
     const connect = useCallback(() => {
+        // Skip if the effect was already cleaned up (React Strict Mode)
+        if (abortedRef.current) return;
+
         console.log('connecting to WebSocket...', config.currentUser, config.conversationId);
         try {
             // Clean up existing connection
@@ -96,6 +103,10 @@ export function useWebSocket(
             const ws = new WebSocket(url.toString());
 
             ws.onopen = () => {
+                if (abortedRef.current) {
+                    ws.close(1000, 'Effect cleaned up');
+                    return;
+                }
                 console.log('WebSocket connected');
                 setIsConnected(true);
                 setError(null);
@@ -104,6 +115,7 @@ export function useWebSocket(
             };
 
             ws.onerror = (event) => {
+                if (abortedRef.current) return;
                 console.error('WebSocket error:', event);
                 const err = new Error('WebSocket connection error');
                 setError(err);
@@ -111,6 +123,7 @@ export function useWebSocket(
             };
 
             ws.onclose = (event) => {
+                if (abortedRef.current) return;
                 console.log('WebSocket closed:', event.code, event.reason);
                 setIsConnected(false);
                 config.onConnectionChange?.(false);
@@ -165,6 +178,7 @@ export function useWebSocket(
 
     const reconnect = useCallback(() => {
         reconnectAttemptsRef.current = 0;
+        abortedRef.current = false;
         connect();
     }, [connect]);
 
@@ -176,10 +190,13 @@ export function useWebSocket(
             return cleanup;
         }
 
+        // Reset abort flag for this effect cycle
+        abortedRef.current = false;
         connect();
 
-        // Cleanup on unmount
+        // Cleanup on unmount (or React Strict Mode re-run)
         return () => {
+            abortedRef.current = true;
             if (reconnectTimeoutRef.current) {
                 clearTimeout(reconnectTimeoutRef.current);
             }