@aslaluroba/help-center-react 3.2.17 → 3.2.18

package/src/ui/help-center.tsx

@@ -1,448 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { apiRequest } from '../core/api';
-import { ClientAblyService } from '../core/AblyService';
-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';
-import { defaultLanguage } from '@/i18n';
-import { LanguageProvider } from '@/lib/LanguageContext';
-import { getPrimaryColorStyles } from '@/lib/theme-utils';
-import { useActionHandler } from '@/lib/custom-hooks/useActionHandler';
-
-interface HelpCenterProps {
-  helpScreenId: string;
-  language?: 'ar' | 'en';
-  user?: {
-    id?: string;
-    name?: string;
-    email?: string;
-    avatar?: string;
-  };
-  showArrow?: boolean;
-  messageLabel?: string | null;
-  primaryColor?: string;
-}
-
-const HelpCenterContent = ({
-  helpScreenId,
-  user,
-  showArrow = true,
-  messageLabel = null,
-  primaryColor,
-  language = defaultLanguage,
-}: HelpCenterProps) => {
-  const { t } = useLocalTranslation();
-  const [isOpen, setIsOpen] = useState(false);
-  const [isClosing, setIsClosing] = 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 [reviewSessionId, setReviewSessionId] = useState<string | null>(null);
-  const [inChatReviewSessionId, setInChatReviewSessionId] = useState<string | null>(null);
-  const [isAblyConnected, setIsAblyConnected] = 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 [isSubmittingReview, setIsSubmittingReview] = useState(false);
-  const [navigateToOptionsListAfterReview, setNavigateToOptionsListAfterReview] = useState(false);
-
-  const actionHandler = useActionHandler();
-
-  const handleTogglePopup = () => {
-    if (isOpen) {
-      setIsClosing(true);
-      setIsOpen(false);
-      setShowArrowAnimation(true);
-    } else {
-      setIsOpen(true);
-      setShowArrowAnimation(false);
-    }
-  };
-
-  const handleClosePopup = useCallback(() => {
-    setIsClosing(true);
-    setIsOpen(false);
-  }, []);
-
-  const handlePopupCloseAnimationEnd = useCallback(() => {
-    setIsClosing(false);
-  }, []);
-
-  const handleCloseArrowAnimation = () => {
-    setShowArrowAnimation(false);
-  };
-
-  const handleReceiveMessage = (
-    message: string,
-    senderType: number,
-    needsAgent: boolean,
-    attachmentUrls: string[] = [],
-    attachmentIds: string[] = []
-  ) => {
-    if (needsAgent) {
-      setNeedsAgent(true);
-    }
-
-    setMessages((prevMessages) => {
-      const newMessage: Message = {
-        id: Date.now(),
-        senderType: senderType,
-        messageContent: message,
-        sentAt: new Date(),
-        isSeen: true,
-        ...(attachmentUrls.length > 0 && { attachmentUrls }),
-        ...(attachmentIds.length > 0 && { attachmentIds }),
-      };
-
-      return [...prevMessages, newMessage];
-    });
-
-    setAssistantStatus('idle');
-  };
-
-  const handleEndChat = useCallback(
-    async (options?: { fromChatScreen?: boolean; sessionClosedByServer?: boolean }) => {
-      if (!sessionId || !selectedOption) return;
-
-      const fromChatScreen = options?.fromChatScreen === true;
-      // When Ably sends end_session (e.g. admin closed from dashboard), skip close API call
-      const sessionClosedByServer = options?.sessionClosedByServer === true;
-
-      try {
-        await ClientAblyService.stopConnection();
-        setIsAblyConnected(false);
-        setAssistantStatus('idle');
-
-        if (!sessionClosedByServer) {
-          const response = await apiRequest(`Client/ClientChatSession/${sessionId}/close`, 'POST', null, {
-            language: language,
-          });
-          if (!response.ok) throw new Error('Failed to close chat session');
-        }
-
-        setReviewSessionId(sessionId);
-        setSessionId(null);
-
-        if (fromChatScreen) {
-          setInChatReviewSessionId(sessionId);
-          setIsChatClosed(true);
-        } else {
-          setSelectedOption(null);
-          setMessages([]);
-          setIsReviewDialogOpen(true);
-        }
-      } catch (err) {
-        setError('Failed to end chat session');
-        setAssistantStatus('idle');
-        setReviewSessionId(sessionId);
-        setSessionId(null);
-        if (!fromChatScreen) {
-          setSelectedOption(null);
-        }
-      }
-    },
-    [language, selectedOption, sessionId]
-  );
-
-  const handleSendChatReview = async ({ comment, rating }: ReviewProps) => {
-    if (!reviewSessionId) return;
-
-    const payload = { rating, comment };
-    const wasInChatReview = !!inChatReviewSessionId;
-
-    setIsSubmittingReview(true);
-    try {
-      const response = await apiRequest(`Client/ClientChatSession/${reviewSessionId}/review`, 'POST', payload, {
-        language,
-      });
-      if (!response.ok) throw new Error('Failed to send chat review');
-
-      handleCloseChatReview();
-      if (wasInChatReview) {
-        setNavigateToOptionsListAfterReview(true);
-      }
-    } catch (err) {
-      setError('Failed to send chat review');
-    } finally {
-      setIsSubmittingReview(false);
-    }
-  };
-
-  const handleCloseChatReview = () => {
-    setIsReviewDialogOpen(false);
-    setReviewSessionId(null);
-    setInChatReviewSessionId(null);
-  };
-
-  const handleStartChat = async (option: Option) => {
-    setInChatReviewSessionId(null);
-    setMessages([
-      {
-        id: Date.now(),
-        senderType: 3,
-        messageContent: option?.assistant?.greeting || 'مرحباً! كيف يمكنني مساعدتك اليوم؟',
-        sentAt: new Date(),
-        isSeen: true,
-      },
-    ]);
-    setIsChatClosed(false);
-    setStatus('succeeded');
-  };
-
-  const startNewChatSession = async (option: Option): Promise<string> => {
-    try {
-      setStatus('loading');
-      setError('');
-
-      const chatSessionCreateDto = {
-        helpScreenId: helpScreenId,
-        optionId: option.id,
-        ...(user && {
-          user: {
-            id: user.id,
-            name: user.name,
-            email: user.email,
-          },
-        }),
-      };
-
-      const response = await apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto, {
-        language,
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to create chat session');
-      }
-
-      const responseData = await response.json();
-      const newSessionId = responseData.chatSession.id;
-
-      setSessionId(newSessionId);
-
-      await ClientAblyService.startConnection(
-        newSessionId,
-        responseData.ablyToken,
-        handleReceiveMessage,
-        responseData.chatSession.tenantId,
-        (actionType, messageData) => {
-          void actionHandler.handleAction(actionType, messageData);
-        }
-      );
-
-      // Verify the connection is actually active
-      if (!ClientAblyService.isConnectionActive()) {
-        throw new Error('Ably connection failed to establish properly');
-      }
-
-      setIsAblyConnected(true);
-      setIsChatClosed(false);
-      setStatus('succeeded');
-
-      return newSessionId; // Return the session ID
-    } catch (error) {
-      setError(error instanceof Error ? error.message : 'Failed to start chat session');
-      setStatus('failed');
-      throw error; // Re-throw to handle in calling function
-    }
-  };
-
-  const handleEnsureSession = async (): Promise<string> => {
-    // If we already have a session ID and connection, return it
-    // NEVER create a new session if one already exists
-    if (sessionId) {
-      return sessionId;
-    }
-
-    // Only create a new session if we don't have one and have a selected option
-    if (selectedOption) {
-      const newSessionId = await startNewChatSession(selectedOption);
-      return newSessionId;
-    }
-
-    throw new Error('No option selected');
-  };
-
-  const handleSendMessage = async (message: string, attachmentIds: string[] = []) => {
-    // Allow sending if there's text OR attachments
-    if (message.trim() !== '' || attachmentIds.length > 0) {
-      try {
-        setAssistantStatus('typing');
-
-        const userMessage: Message = {
-          id: Date.now(),
-          senderType: 1,
-          messageContent: message || '', // Use empty string if message is empty but attachments exist
-          sentAt: new Date(),
-          isSeen: false,
-          attachmentIds: attachmentIds.length > 0 ? attachmentIds : undefined,
-        };
-
-        setMessages((prevMessages) => [...prevMessages, userMessage]);
-
-        // Handle session creation if needed - only create if no session exists
-        let currentSessionId = sessionId;
-
-        // Only create a new session if we don't have one and we have a selected option
-        // This ensures session is only created once with the first message
-        if (!currentSessionId && !isAblyConnected && selectedOption) {
-          currentSessionId = await startNewChatSession(selectedOption);
-        }
-
-        if (!currentSessionId) {
-          throw new Error('No active session available');
-        }
-
-        const messageDto = {
-          messageContent: message || '', // Use empty string if message is empty but attachments exist
-          ...(attachmentIds.length > 0 && { attachmentIds }),
-        };
-
-        const response = await apiRequest(
-          `Client/ClientChatSession/${currentSessionId}/send-message`,
-          'POST',
-          messageDto,
-          { language }
-        );
-
-        if (!response.ok) {
-          throw new Error('Failed to send message');
-        }
-
-        setMessages((prevMessages) => {
-          return prevMessages.map((msg) => (msg.senderType === 1 && !msg.isSeen ? { ...msg, isSeen: true } : msg));
-        });
-      } catch (error) {
-        setAssistantStatus('idle');
-
-        const errorMessage: Message = {
-          id: Date.now(),
-          senderType: 3,
-          messageContent:
-            'Failed to send the message. Please try again.\n لم يتم إرسال الرسالة. يرجى المحاولة مرة أخرى.',
-          sentAt: new Date(),
-          isSeen: true,
-        };
-
-        setMessages((prevMessages) => [...prevMessages, errorMessage]);
-      }
-    }
-  };
-
-  // Register known action handlers for realtime messages
-  useEffect(() => {
-    // "needs_agent" → trigger handoff / needs agent UI flow
-    actionHandler.registerHandler('needs_agent', () => {
-      setNeedsAgent(true);
-    });
-
-    // "end_session" → session was closed by server (e.g. admin from dashboard); update local state only, do not call close API
-    actionHandler.registerHandler('end_session', () => {
-      void handleEndChat({ fromChatScreen: true, sessionClosedByServer: true });
-    });
-
-    return () => {
-      actionHandler.unregisterHandler('needs_agent');
-      actionHandler.unregisterHandler('end_session');
-    };
-  }, [actionHandler, handleEndChat]);
-
-  useEffect(() => {
-    if (isOpen && helpScreenId) {
-      setStatus('loading');
-
-      apiRequest(`client/clientHelpScreen/${helpScreenId}`, 'GET', null, {
-        language,
-      })
-        .then((res) => res.json())
-        .then((data) => {
-          setHelpScreenData(data);
-          setStatus('succeeded');
-          setError('');
-        })
-        .catch((err) => {
-          setError(err.message);
-          setStatus('failed');
-        });
-    }
-  }, [isOpen, helpScreenId]);
-
-  const themeStyles = getPrimaryColorStyles(primaryColor);
-
-  return (
-    <div className='babylai-theme-root babylai:mb-4' style={themeStyles}>
-      {showArrowAnimation && !isOpen && !isClosing && (
-        <FloatingMessage onClose={handleCloseArrowAnimation} message={messageLabel || t('homeSdk.needAssistance')} />
-      )}
-
-      <HelpButton onClick={handleTogglePopup} />
-
-      {(isOpen || isClosing) && (
-        <HelpPopup
-          isOpen={isOpen}
-          isClosing={isClosing}
-          onClose={handleClosePopup}
-          onCloseAnimationEnd={handlePopupCloseAnimationEnd}
-          helpScreen={helpScreenData}
-          status={status}
-          error={error}
-          user={user}
-          onStartChat={handleStartChat}
-          onSendMessage={handleSendMessage}
-          onEnsureSession={handleEnsureSession}
-          onEndChat={handleEndChat}
-          messages={messages}
-          needsAgent={needsAgent}
-          assistantStatus={assistantStatus}
-          sessionId={sessionId}
-          isChatClosed={isChatClosed}
-          selectedOption={selectedOption}
-          setSelectedOption={setSelectedOption}
-          inChatReviewSessionId={inChatReviewSessionId}
-          onInChatReviewSubmit={handleSendChatReview}
-          onInChatReviewDone={handleCloseChatReview}
-          navigateToOptionsListAfterReview={navigateToOptionsListAfterReview}
-          onNavigatedToOptionsList={() => setNavigateToOptionsListAfterReview(false)}
-          isReviewDialogOpen={isReviewDialogOpen}
-          reviewSessionId={reviewSessionId}
-          isSubmittingReview={isSubmittingReview}
-          onReviewDialogSubmit={handleSendChatReview}
-          onReviewDialogClose={handleCloseChatReview}
-        />
-      )}
-    </div>
-  );
-};
-
-// Main HelpCenter component that provides the language context
-const HelpCenter = ({
-  helpScreenId,
-  user,
-  showArrow = true,
-  language = defaultLanguage,
-  messageLabel = null,
-  primaryColor,
-}: HelpCenterProps) => {
-  return (
-    <LanguageProvider language={language}>
-      <HelpCenterContent
-        language={language}
-        helpScreenId={helpScreenId}
-        user={user}
-        showArrow={showArrow}
-        messageLabel={messageLabel}
-        primaryColor={primaryColor}
-      />
-    </LanguageProvider>
-  );
-};
-
-export default HelpCenter;