@aslaluroba/help-center-react 2.0.2 → 2.0.5

package/src/ui/help-center.tsx

@@ -1,26 +1,27 @@
-import React, { useState, useEffect } from 'react'
-import { HelpButton } from './help-button'
-import { FloatingMessage } from './floating-message'
-import { HelpPopup } from './help-popup'
-import { apiRequest } from '../core/api'
-import { ClientSignalRService } from '../core/SignalRService'
-import { Message, HelpScreenData, Option } from '../lib/types'
-import { configService } from '../lib/config'
-import { useLocalTranslation } from '../useLocalTranslation'
-import '../globals.css'
+import ReviewDialog from '@/ui/review-dialog';
+import React, { useEffect, useState } from 'react';
+import { apiRequest } from '../core/api';
+import { ClientSignalRService } from '../core/SignalRService';
+import { configService } from '../lib/config';
+import { useLocalTranslation } from '../useLocalTranslation';
+import '../globals.css';
+import { HelpScreenData, Message, Option, ReviewProps } from '../lib/types';
+import { FloatingMessage } from './floating-message';
+import { HelpButton } from './help-button';
+import { HelpPopup } from './help-popup';
 
 interface HelpCenterProps {
-  helpScreenId: string
-  language: string
+  helpScreenId: string;
+  language: string;
   user?: {
-    id?: string
-    name?: string
-    email?: string
-    avatar?: string
-  }
-  showArrow?: boolean
-  messageLabel?: string | null
-  showHelpScreen?: boolean
+    id?: string;
+    name?: string;
+    email?: string;
+    avatar?: string;
+  };
+  showArrow?: boolean;
+  messageLabel?: string | null;
+  showHelpScreen?: boolean;
 }
 
 export function HelpCenter({
@@ -29,95 +30,121 @@ export function HelpCenter({
   showArrow = true,
   language = 'en',
   messageLabel = null,
-  showHelpScreen = false
+  showHelpScreen = false,
 }: HelpCenterProps) {
-  const { t } = useLocalTranslation(language)
-  const [isOpen, setIsOpen] = useState(false)
-  const [showArrowAnimation, setShowArrowAnimation] = useState(showArrow)
-  const [helpScreenData, setHelpScreenData] = useState<HelpScreenData | null>(null)
-  const [status, setStatus] = useState('idle')
-  const [error, setError] = useState('')
-  const [selectedOption, setSelectedOption] = useState<Option | null>(null)
-
-  const [sessionId, setSessionId] = useState<string | null>(null)
-  const [isSignalRConnected, setIsSignalRConnected] = useState(false)
-  const [isChatClosed, setIsChatClosed] = useState(false)
-  const [messages, setMessages] = useState<Message[]>([])
-  const [needsAgent, setNeedsAgent] = useState(false)
-  const [assistantStatus, setAssistantStatus] = useState('idle')
+  const { t } = useLocalTranslation(language);
+  const [isOpen, setIsOpen] = useState(false);
+  const [showArrowAnimation, setShowArrowAnimation] = useState(showArrow);
+  const [helpScreenData, setHelpScreenData] = useState<HelpScreenData | null>(null);
+  const [status, setStatus] = useState('idle');
+  const [error, setError] = useState('');
+  const [selectedOption, setSelectedOption] = useState<Option | null>(null);
+
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [isSignalRConnected, setIsSignalRConnected] = useState(false);
+  const [isChatClosed, setIsChatClosed] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [needsAgent, setNeedsAgent] = useState(false);
+  const [assistantStatus, setAssistantStatus] = useState('idle');
+
+  const [isReviewDialogOpen, setIsReviewDialogOpen] = useState(false);
 
   const handleTogglePopup = () => {
-    setIsOpen(!isOpen)
-    setShowArrowAnimation(isOpen)
-  }
+    setIsOpen(!isOpen);
+    setShowArrowAnimation(isOpen);
+  };
 
   const handleCloseArrowAnimation = () => {
-    setShowArrowAnimation(false)
-  }
+    setShowArrowAnimation(false);
+  };
 
   const handleReceiveMessage = (message: string, senderType: number, needsAgent: boolean) => {
-    // Update agent status if needed
+    console.log('🎯 Help Center received message:', {
+      message,
+      senderType,
+      needsAgent,
+      timestamp: new Date().toISOString(),
+      currentSessionId: sessionId,
+      isSignalRConnected,
+      messagesCount: messages.length,
+    });
+
     if (needsAgent) {
-      setNeedsAgent(true)
+      console.log('🚨 Agent needed for this message');
+      setNeedsAgent(true);
     }
 
-    // Add the received message to the chat
-    setMessages((prevMessages) => [
-      ...prevMessages,
-      {
+    setMessages((prevMessages) => {
+      const newMessage = {
         id: Date.now(),
         senderType: senderType,
         messageContent: message,
         sentAt: new Date(),
-        isSeen: true
-      }
-    ])
+        isSeen: true,
+      };
+
+      console.log('✅ Adding message to state:', newMessage);
+      const updatedMessages = [...prevMessages, newMessage];
+      console.log('📊 Total messages after update:', updatedMessages.length);
+
+      return updatedMessages;
+    });
 
-    // Reset assistant status after receiving message
-    setAssistantStatus('idle')
-  }
+    setAssistantStatus('idle');
+    console.log('🔄 Assistant status set to idle');
+  };
 
-  const handleEndChat = async () => {
-    if (!sessionId || !selectedOption) return
+  const handleEndChat = async (option?: Option) => {
+    if (!sessionId || !selectedOption) return;
 
     try {
-      // Disconnect SignalR
-      await ClientSignalRService.stopConnection()
-      setIsSignalRConnected(false)
+      await ClientSignalRService.stopConnection();
+      setIsSignalRConnected(false);
 
-      // Close chat session
-      const response = await apiRequest(`Client/ClientChatSession/${sessionId}/close`, 'POST')
-      if (!response.ok) {
-        throw new Error('Failed to close chat session')
+      const response = await apiRequest(`Client/ClientChatSession/${sessionId}/close`, 'POST');
+      if (!response.ok) throw new Error('Failed to close chat session');
+
+      setIsReviewDialogOpen(true);
+      if (option) {
+        handleStartChat(option);
       }
+    } catch (error) {
+      console.error('Error ending chat:', error);
+      setError('Failed to end chat session');
+    }
+  };
+
+  const handleSendChatReview = async ({ comment, rating }: ReviewProps) => {
+    if (!sessionId) return;
+
+    const payload = { rating, comment };
 
-      setSessionId(null)
-      setIsChatClosed(true)
+    try {
+      const response = await apiRequest(`Client/ClientChatSession/${sessionId}/review`, 'POST', payload);
+      if (!response.ok) throw new Error('Failed to send chat review');
 
-      // Clear messages after a delay
-      setTimeout(() => {
-        setMessages([])
-        setSelectedOption(null)
-      }, 3000)
+      setIsReviewDialogOpen(false);
     } catch (error) {
-      console.error('Error ending chat:', error)
-      setError('Failed to end chat session')
-      // If ending chat fails, the chat is not considered closed.
-      setIsChatClosed(false)
+      console.error('Error sending chat review:', error);
+      setError('Failed to send chat review');
     }
-  }
+  };
+
+  const handleCloseChatReview = () => {
+    setIsReviewDialogOpen(false);
+  };
 
   const handleStartChat = async (option: Option) => {
-    await startNewChatSession(option)
-  }
+    await startNewChatSession(option);
+  };
 
   const startNewChatSession = async (option: Option) => {
     try {
-      setStatus('loading')
-      setError('')
-      setMessages([])
+      setStatus('loading');
+      setError('');
+      setMessages([]);
 
-      const tokenResponse = await configService.getToken()
+      const tokenResponse = await configService.getToken();
       const chatSessionCreateDto = {
         helpScreenId: helpScreenId,
         optionId: option.id,
@@ -125,19 +152,21 @@ export function HelpCenter({
           user: {
             id: user.id,
             name: user.name,
-            email: user.email
-          }
-        })
-      }
-      const response = await apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto)
+            email: user.email,
+          },
+        }),
+      };
+
+      const response = await apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto);
 
       if (!response.ok) {
-        throw new Error('Failed to create chat session')
+        throw new Error('Failed to create chat session');
       }
 
-      const createdSession = await response.json()
+      const createdSession = await response.json();
+      console.log('Created session:', createdSession);
 
-      setSessionId(createdSession.id)
+      setSessionId(createdSession.id);
 
       // Add greeting message if available
       if (option.assistant?.greeting) {
@@ -147,9 +176,9 @@ export function HelpCenter({
             senderType: 3, // AI
             messageContent: option.assistant.greeting,
             sentAt: new Date(),
-            isSeen: true
-          }
-        ])
+            isSeen: true,
+          },
+        ]);
       } else {
         // Default greeting if none provided
         setMessages([
@@ -158,33 +187,31 @@ export function HelpCenter({
             senderType: 3,
             messageContent: 'Hello! How can I assist you today?\nمرحباً! كيف يمكنني مساعدتك اليوم؟',
             sentAt: new Date(),
-            isSeen: true
-          }
-        ])
+            isSeen: true,
+          },
+        ]);
       }
 
       // Connect to SignalR
-      ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage)
+      await ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage);
 
-      setIsSignalRConnected(true)
-      setIsChatClosed(false)
-      setStatus('succeeded')
+      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')
-      // If starting chat fails, SignalR is not connected.
-      setIsSignalRConnected(false)
+      console.error('Chat start error:', error);
+      setError(error instanceof Error ? error.message : 'Failed to start chat session');
+      setStatus('failed');
     }
-  }
+  };
 
   const handleSendMessage = async (message: string) => {
-    let currentSessionId = sessionId
+    let currentSessionId = sessionId;
 
     if (message.trim() !== '') {
       try {
         // Set loading state
-        setAssistantStatus('typing')
+        setAssistantStatus('typing');
 
         // Add user message to the chat immediately
         setMessages((prevMessages) => [
@@ -194,9 +221,9 @@ export function HelpCenter({
             senderType: 1, // Customer
             messageContent: message,
             sentAt: new Date(),
-            isSeen: false
-          }
-        ])
+            isSeen: false,
+          },
+        ]);
 
         // Create a new chat session if not started yet
         if (!currentSessionId) {
@@ -206,74 +233,270 @@ export function HelpCenter({
             user: {
               id: user?.id,
               name: user?.name,
-              email: user?.email
-            }
-          }
+              email: user?.email,
+            },
+          };
 
-          const response = await apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto)
+          const response = await apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto);
 
           if (!response.ok) {
-            throw new Error('Failed to create chat session')
+            throw new Error('Failed to create chat session');
           }
 
-          const createdSession = await response.json()
-          setSessionId(createdSession.id)
-          currentSessionId = createdSession.id
+          const createdSession = await response.json();
+          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)
+          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', messageDto)
+        const messageDto = { messageContent: message };
+        const response = await apiRequest(
+          `Client/ClientChatSession/${currentSessionId}/send-message`,
+          'POST',
+          messageDto
+        );
 
         if (!response.ok) {
-          throw new Error('Failed to send message')
+          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)))
+        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')
+        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 لم يتم إرسال الرسالة. يرجى المحاولة مرة أخرى.',
+            messageContent:
+              'Failed to send the message. Please try again.\n لم يتم إرسال الرسالة. يرجى المحاولة مرة أخرى.',
             sentAt: new Date(),
-            isSeen: true
-          }
-        ])
+            isSeen: true,
+          },
+        ]);
       }
     }
-  }
+  };
+
+  // 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) {
-      setStatus('loading')
+      console.log('📊 Loading help screen data for ID:', helpScreenId);
+      setStatus('loading');
 
       apiRequest(`client/clientHelpScreen/${helpScreenId}`)
         .then((res) => res.json())
         .then((data) => {
-          setHelpScreenData(data)
-          setStatus('succeeded')
-          setError('')
+          console.log('✅ Help screen data loaded:', data);
+          setHelpScreenData(data);
+          setStatus('succeeded');
+          setError('');
         })
         .catch((err) => {
-          setError(err.message)
-          setStatus('failed')
-        })
+          console.error('❌ Failed to load help screen data:', err);
+          setError(err.message);
+          setStatus('failed');
+        });
     }
-  }, [isOpen, helpScreenId])
+  }, [isOpen, helpScreenId]);
+
+  useEffect(() => {
+    console.log('🔄 SignalR connection status', isSignalRConnected);
+  }, [isSignalRConnected]);
 
   return (
-    <div className="babylai-help-center-container mb-4">
+    <div className='babylai-help-center-container mb-4'>
       {showArrowAnimation && !isOpen && (
         <FloatingMessage onClose={handleCloseArrowAnimation} message={messageLabel || t('homeSdk.needAssistance')} />
       )}
@@ -302,6 +525,9 @@ export function HelpCenter({
           showHelpScreen={showHelpScreen}
         />
       )}
+      {isOpen && !!isReviewDialogOpen && (
+        <ReviewDialog handleSubmit={handleSendChatReview} onClose={handleCloseChatReview} />
+      )}
     </div>
-  )
+  );
 }