@aslaluroba/help-center-react 2.0.4 → 2.0.6

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,93 +30,113 @@ 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
     if (needsAgent) {
-      setNeedsAgent(true)
+      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,
+      };
+
+      const updatedMessages = [...prevMessages, newMessage];
+
+      return updatedMessages;
+    });
 
-    // Reset assistant status after receiving message
-    setAssistantStatus('idle')
-  }
+    setAssistantStatus('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);
+      setAssistantStatus('idle');
 
-      // 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');
+      setAssistantStatus('idle');
+    }
+  };
+
+  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')
+      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) => {
+    if (isSignalRConnected || sessionId) {
+      handleEndChat();
+    }
     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,
@@ -123,79 +144,82 @@ 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()
+      const createdSession = await response.json();
 
-      setSessionId(createdSession.id)
+      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
-          }
-        ])
+            isSeen: true,
+          },
+        ]);
       } else {
-        // Default greeting if none provided
         setMessages([
           {
             id: Date.now(),
             senderType: 3,
             messageContent: 'Hello! How can I assist you today?\nمرحباً! كيف يمكنني مساعدتك اليوم؟',
             sentAt: new Date(),
-            isSeen: true
-          }
-        ])
+            isSeen: true,
+          },
+        ]);
       }
 
-      // Connect to SignalR
-      await ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage)
+      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')
+      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')
+      setError(error instanceof Error ? error.message : 'Failed to start chat session');
+      setStatus('failed');
     }
-  }
+  };
 
   const handleSendMessage = async (message: string) => {
-    let currentSessionId = sessionId
+    // 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')
+        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,
@@ -203,73 +227,76 @@ 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')
-        setMessages((prevMessages) => [
-          ...prevMessages,
-          {
-            id: Date.now(),
-            senderType: 3, // System
-            messageContent: 'Failed to send the message. Please try again.\n لم يتم إرسال الرسالة. يرجى المحاولة مرة أخرى.',
-            sentAt: new Date(),
-            isSeen: true
-          }
-        ])
+        setAssistantStatus('idle');
+        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]);
       }
     }
-  }
+  };
 
   useEffect(() => {
     if (isOpen && helpScreenId) {
-      setStatus('loading')
+      setStatus('loading');
 
       apiRequest(`client/clientHelpScreen/${helpScreenId}`)
         .then((res) => res.json())
         .then((data) => {
-          setHelpScreenData(data)
-          setStatus('succeeded')
-          setError('')
+          setHelpScreenData(data);
+          setStatus('succeeded');
+          setError('');
         })
         .catch((err) => {
-          setError(err.message)
-          setStatus('failed')
-        })
+          setError(err.message);
+          setStatus('failed');
+        });
     }
-  }, [isOpen, helpScreenId])
+  }, [isOpen, helpScreenId]);
 
   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')} />
       )}
@@ -298,6 +325,9 @@ export function HelpCenter({
           showHelpScreen={showHelpScreen}
         />
       )}
+      {isOpen && !!isReviewDialogOpen && (
+        <ReviewDialog handleSubmit={handleSendChatReview} onClose={handleCloseChatReview} />
+      )}
     </div>
-  )
+  );
 }