@xcelsior/ui-chat 2.0.3 → 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.js

@@ -251,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);
@@ -259,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)(
     () => ({
@@ -309,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);
     }
@@ -322,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) => {
@@ -365,6 +375,11 @@ function useMessages(websocket, config) {
     headersWithApiKey,
     onError
   ]);
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      if (botThinkingTimerRef.current) clearTimeout(botThinkingTimerRef.current);
+    };
+  }, []);
   return {
     messages,
     addMessage,
@@ -2640,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)",
@@ -3357,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`);
@@ -3426,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();
@@ -3528,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,
@@ -3546,7 +3531,7 @@ function Chat({
       onMinimize: () => setState("minimized"),
       resolvedPosition: position
     }
-  ) });
+  );
 }
 
 // src/components/TypingIndicator.tsx