@aslaluroba/help-center-react 2.0.5 → 2.0.7

package/src/ui/help-center.tsx

@@ -59,18 +59,7 @@ export function HelpCenter({
   };
 
   const handleReceiveMessage = (message: string, senderType: number, needsAgent: boolean) => {
-    console.log('🎯 Help Center received message:', {
-      message,
-      senderType,
-      needsAgent,
-      timestamp: new Date().toISOString(),
-      currentSessionId: sessionId,
-      isSignalRConnected,
-      messagesCount: messages.length,
-    });
-
     if (needsAgent) {
-      console.log('🚨 Agent needed for this message');
       setNeedsAgent(true);
     }
 
@@ -83,15 +72,12 @@ export function HelpCenter({
         isSeen: true,
       };
 
-      console.log('✅ Adding message to state:', newMessage);
       const updatedMessages = [...prevMessages, newMessage];
-      console.log('📊 Total messages after update:', updatedMessages.length);
 
       return updatedMessages;
     });
 
     setAssistantStatus('idle');
-    console.log('🔄 Assistant status set to idle');
   };
 
   const handleEndChat = async (option?: Option) => {
@@ -100,6 +86,7 @@ export function HelpCenter({
     try {
       await ClientSignalRService.stopConnection();
       setIsSignalRConnected(false);
+      setAssistantStatus('idle');
 
       const response = await apiRequest(`Client/ClientChatSession/${sessionId}/close`, 'POST');
       if (!response.ok) throw new Error('Failed to close chat session');
@@ -111,6 +98,7 @@ export function HelpCenter({
     } catch (error) {
       console.error('Error ending chat:', error);
       setError('Failed to end chat session');
+      setAssistantStatus('idle');
     }
   };
 
@@ -139,12 +127,16 @@ export function HelpCenter({
   };
 
   const startNewChatSession = async (option: Option) => {
+    if (isSignalRConnected || sessionId) {
+      handleEndChat();
+    }
     try {
       setStatus('loading');
       setError('');
       setMessages([]);
 
       const tokenResponse = await configService.getToken();
+
       const chatSessionCreateDto = {
         helpScreenId: helpScreenId,
         optionId: option.id,
@@ -164,23 +156,20 @@ export function HelpCenter({
       }
 
       const createdSession = await response.json();
-      console.log('Created session:', createdSession);
 
       setSessionId(createdSession.id);
 
-      // Add greeting message if available
       if (option.assistant?.greeting) {
         setMessages([
           {
             id: Date.now(),
-            senderType: 3, // AI
+            senderType: 3,
             messageContent: option.assistant.greeting,
             sentAt: new Date(),
             isSeen: true,
           },
         ]);
       } else {
-        // Default greeting if none provided
         setMessages([
           {
             id: Date.now(),
@@ -192,40 +181,45 @@ export function HelpCenter({
         ]);
       }
 
-      // Connect to SignalR
       await ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage);
 
+      // Verify the connection is actually active
+      if (!ClientSignalRService.isConnectionActive()) {
+        throw new Error('SignalR connection failed to establish properly');
+      }
+
       setIsSignalRConnected(true);
       setIsChatClosed(false);
       setStatus('succeeded');
     } catch (error) {
-      console.error('Chat start error:', error);
       setError(error instanceof Error ? error.message : 'Failed to start chat session');
       setStatus('failed');
     }
   };
 
   const handleSendMessage = async (message: string) => {
+    // Only send message if SignalR is connected
+    if (!isSignalRConnected) {
+      setError('Connection lost. Please try again.');
+      return;
+    }
+
     let currentSessionId = sessionId;
 
     if (message.trim() !== '') {
       try {
-        // Set loading state
         setAssistantStatus('typing');
 
-        // Add user message to the chat immediately
-        setMessages((prevMessages) => [
-          ...prevMessages,
-          {
-            id: Date.now(),
-            senderType: 1, // Customer
-            messageContent: message,
-            sentAt: new Date(),
-            isSeen: false,
-          },
-        ]);
+        const userMessage = {
+          id: Date.now(),
+          senderType: 1,
+          messageContent: message,
+          sentAt: new Date(),
+          isSeen: false,
+        };
+
+        setMessages((prevMessages) => [...prevMessages, userMessage]);
 
-        // Create a new chat session if not started yet
         if (!currentSessionId) {
           const chatSessionCreateDto = {
             helpScreenId: helpScreenId,
@@ -247,14 +241,13 @@ export function HelpCenter({
           setSessionId(createdSession.id);
           currentSessionId = createdSession.id;
 
-          // Connect to SignalR with the new session
           const tokenResponse = await configService.getToken();
           await ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage);
           setIsSignalRConnected(true);
         }
 
-        // Send the message
         const messageDto = { messageContent: message };
+
         const response = await apiRequest(
           `Client/ClientChatSession/${currentSessionId}/send-message`,
           'POST',
@@ -265,236 +258,43 @@ export function HelpCenter({
           throw new Error('Failed to send message');
         }
 
-        // Update the sent message as seen
         setMessages((prevMessages) =>
           prevMessages.map((msg) => (msg.senderType === 1 && !msg.isSeen ? { ...msg, isSeen: true } : msg))
         );
       } catch (error) {
-        console.error('Error in message handling:', error);
         setAssistantStatus('idle');
-        setMessages((prevMessages) => [
-          ...prevMessages,
-          {
-            id: Date.now(),
-            senderType: 3, // System
-            messageContent:
-              'Failed to send the message. Please try again.\n لم يتم إرسال الرسالة. يرجى المحاولة مرة أخرى.',
-            sentAt: new Date(),
-            isSeen: true,
-          },
-        ]);
+        const errorMessage = {
+          id: Date.now(),
+          senderType: 3,
+          messageContent:
+            'Failed to send the message. Please try again.\n لم يتم إرسال الرسالة. يرجى المحاولة مرة أخرى.',
+          sentAt: new Date(),
+          isSeen: true,
+        };
+
+        setMessages((prevMessages) => [...prevMessages, errorMessage]);
       }
     }
   };
 
-  // const startNewChatSession = async (option: Option) => {
-  //   console.log('🚀 Starting new chat session with option:', option);
-
-  //   if (isSignalRConnected || sessionId) {
-  //     console.log('⚠️ Existing connection detected, ending current chat');
-  //     handleEndChat();
-  //   }
-  //   try {
-  //     setStatus('loading');
-  //     setError('');
-  //     setMessages([]);
-
-  //     console.log('🔑 Getting token for authentication...');
-  //     const tokenResponse = await configService.getToken();
-  //     console.log('✅ Token obtained successfully');
-
-  //     const chatSessionCreateDto = {
-  //       helpScreenId: helpScreenId,
-  //       optionId: option.id,
-  //       ...(user && {
-  //         user: {
-  //           id: user.id,
-  //           name: user.name,
-  //           email: user.email,
-  //         },
-  //       }),
-  //     };
-
-  //     console.log('📡 Creating chat session with data:', chatSessionCreateDto);
-  //     const response = await apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto);
-
-  //     if (!response.ok) {
-  //       throw new Error('Failed to create chat session');
-  //     }
-
-  //     const createdSession = await response.json();
-  //     console.log('✅ Chat session created:', createdSession);
-
-  //     setSessionId(createdSession.id);
-
-  //     if (option.assistant?.greeting) {
-  //       console.log('💬 Adding custom greeting:', option.assistant.greeting);
-  //       setMessages([
-  //         {
-  //           id: Date.now(),
-  //           senderType: 3,
-  //           messageContent: option.assistant.greeting,
-  //           sentAt: new Date(),
-  //           isSeen: true,
-  //         },
-  //       ]);
-  //     } else {
-  //       console.log('💬 Adding default greeting');
-  //       setMessages([
-  //         {
-  //           id: Date.now(),
-  //           senderType: 3,
-  //           messageContent: 'Hello! How can I assist you today?\nمرحباً! كيف يمكنني مساعدتك اليوم؟',
-  //           sentAt: new Date(),
-  //           isSeen: true,
-  //         },
-  //       ]);
-  //     }
-
-  //     console.log('🔌 Starting SignalR connection...');
-  //     await ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage);
-  //     console.log('✅ SignalR connection established');
-
-  //     // Verify the connection is actually active
-  //     if (!ClientSignalRService.isConnectionActive()) {
-  //       throw new Error('SignalR connection failed to establish properly');
-  //     }
-
-  //     setIsSignalRConnected(true);
-  //     setIsChatClosed(false);
-  //     setStatus('succeeded');
-
-  //     console.log('🎉 Chat session fully initialized and ready');
-  //   } catch (error) {
-  //     console.error('❌ Chat start error:', error);
-  //     setError(error instanceof Error ? error.message : 'Failed to start chat session');
-  //     setStatus('failed');
-  //   }
-  // };
-
-  // const handleSendMessage = async (message: string) => {
-  //   console.log('📤 Sending message:', message);
-  //   console.log('📊 Current state:', {
-  //     sessionId,
-  //     isSignalRConnected,
-  //     messagesCount: messages.length,
-  //     selectedOptionId: selectedOption?.id,
-  //   });
-
-  //   let currentSessionId = sessionId;
-
-  //   if (message.trim() !== '') {
-  //     try {
-  //       setAssistantStatus('typing');
-  //       console.log('⏳ Assistant status set to typing');
-
-  //       const userMessage = {
-  //         id: Date.now(),
-  //         senderType: 1,
-  //         messageContent: message,
-  //         sentAt: new Date(),
-  //         isSeen: false,
-  //       };
-
-  //       console.log('✅ Adding user message to UI:', userMessage);
-  //       setMessages((prevMessages) => [...prevMessages, userMessage]);
-
-  //       if (!currentSessionId) {
-  //         console.log('🆕 No existing session, creating new one...');
-  //         const chatSessionCreateDto = {
-  //           helpScreenId: helpScreenId,
-  //           optionId: selectedOption?.id,
-  //           user: {
-  //             id: user?.id,
-  //             name: user?.name,
-  //             email: user?.email,
-  //           },
-  //         };
-
-  //         console.log('📡 Creating new session with data:', chatSessionCreateDto);
-  //         const response = await apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto);
-
-  //         if (!response.ok) {
-  //           throw new Error('Failed to create chat session');
-  //         }
-
-  //         const createdSession = await response.json();
-  //         console.log('✅ New session created:', createdSession);
-  //         setSessionId(createdSession.id);
-  //         currentSessionId = createdSession.id;
-
-  //         console.log('🔌 Starting SignalR connection for new session...');
-  //         const tokenResponse = await configService.getToken();
-  //         await ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage);
-  //         setIsSignalRConnected(true);
-  //         console.log('✅ SignalR connection established for new session');
-  //       }
-
-  //       const messageDto = { messageContent: message };
-  //       console.log('📡 Sending message to API:', messageDto);
-  //       console.log('🎯 Target endpoint:', `Client/ClientChatSession/${currentSessionId}/send-message`);
-
-  //       const response = await apiRequest(
-  //         `Client/ClientChatSession/${currentSessionId}/send-message`,
-  //         'POST',
-  //         messageDto
-  //       );
-
-  //       if (!response.ok) {
-  //         throw new Error('Failed to send message');
-  //       }
-
-  //       console.log('✅ Message sent successfully to server');
-  //       console.log('⏳ Waiting for SignalR response...');
-
-  //       setMessages((prevMessages) =>
-  //         prevMessages.map((msg) => (msg.senderType === 1 && !msg.isSeen ? { ...msg, isSeen: true } : msg))
-  //       );
-
-  //       console.log('✅ User message marked as seen');
-  //     } catch (error) {
-  //       console.error('❌ Error in message handling:', error);
-  //       setAssistantStatus('idle');
-  //       const errorMessage = {
-  //         id: Date.now(),
-  //         senderType: 3,
-  //         messageContent:
-  //           'Failed to send the message. Please try again.\n لم يتم إرسال الرسالة. يرجى المحاولة مرة أخرى.',
-  //         sentAt: new Date(),
-  //         isSeen: true,
-  //       };
-
-  //       console.log('📨 Adding error message:', errorMessage);
-  //       setMessages((prevMessages) => [...prevMessages, errorMessage]);
-  //     }
-  //   }
-  // };
-
   useEffect(() => {
     if (isOpen && helpScreenId) {
-      console.log('📊 Loading help screen data for ID:', helpScreenId);
       setStatus('loading');
 
       apiRequest(`client/clientHelpScreen/${helpScreenId}`)
         .then((res) => res.json())
         .then((data) => {
-          console.log('✅ Help screen data loaded:', data);
           setHelpScreenData(data);
           setStatus('succeeded');
           setError('');
         })
         .catch((err) => {
-          console.error('❌ Failed to load help screen data:', err);
           setError(err.message);
           setStatus('failed');
         });
     }
   }, [isOpen, helpScreenId]);
 
-  useEffect(() => {
-    console.log('🔄 SignalR connection status', isSignalRConnected);
-  }, [isSignalRConnected]);
-
   return (
     <div className='babylai-help-center-container mb-4'>
       {showArrowAnimation && !isOpen && (

package/src/ui/help-popup.tsx

@@ -90,6 +90,7 @@ export function HelpPopup({
   selectedOption,
   setSelectedOption,
   showHelpScreen,
+  isSignalRConnected,
 }: HelpPopupProps) {
   // ALL HOOKS MUST BE CALLED FIRST - BEFORE ANY EARLY RETURNS
   const [showChat, setShowChat] = useState(false);
@@ -151,7 +152,7 @@ export function HelpPopup({
 
   const handleSendMessage = useCallback(
     (message: string) => {
-      if (message.trim()) {
+      if (message.trim() && isSignalRConnected) {
         onSendMessage(message.trim());
       }
     },
@@ -200,6 +201,7 @@ export function HelpPopup({
             messages={memoizedMessages}
             assistantStatus={assistantStatus}
             needsAgent={needsAgent}
+            isSignalRConnected={isSignalRConnected}
           />
         </>
       );