@aslaluroba/help-center-react 3.0.21 → 3.2.1

package/src/ui/help-center.tsx

@@ -1,16 +1,16 @@
-import ReviewDialog from "@/ui/review-dialog";
-import { 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 { getThemeStyles } from "@/lib/theme-utils";
+import ReviewDialog from '@/ui/review-dialog';
+import { 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 { getThemeStyles } from '@/lib/theme-utils';
 
 interface HelpCenterProps {
   helpScreenId: string;
@@ -43,11 +43,9 @@ const HelpCenterContent = ({
   const { t } = useLocalTranslation();
   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 [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);
@@ -56,7 +54,7 @@ const HelpCenterContent = ({
   const [isChatClosed, setIsChatClosed] = useState(false);
   const [messages, setMessages] = useState<Message[]>([]);
   const [needsAgent, setNeedsAgent] = useState(false);
-  const [assistantStatus, setAssistantStatus] = useState("idle");
+  const [assistantStatus, setAssistantStatus] = useState('idle');
   const [isReviewDialogOpen, setIsReviewDialogOpen] = useState(false);
 
   const handleTogglePopup = () => {
@@ -72,24 +70,26 @@ const HelpCenterContent = ({
     message: string,
     senderType: number,
     needsAgent: boolean,
+    attachments: string[] = []
   ) => {
     if (needsAgent) {
       setNeedsAgent(true);
     }
 
     setMessages((prevMessages) => {
-      const newMessage = {
+      const newMessage: Message = {
         id: Date.now(),
         senderType: senderType,
         messageContent: message,
         sentAt: new Date(),
         isSeen: true,
+        ...(attachments.length > 0 && { attachmentIds: attachments }),
       };
 
       return [...prevMessages, newMessage];
     });
 
-    setAssistantStatus("idle");
+    setAssistantStatus('idle');
   };
 
   const handleEndChat = async () => {
@@ -98,15 +98,12 @@ const HelpCenterContent = ({
     try {
       await ClientAblyService.stopConnection();
       setIsAblyConnected(false);
-      setAssistantStatus("idle");
+      setAssistantStatus('idle');
 
-      const response = await apiRequest(
-        `Client/ClientChatSession/${sessionId}/close`,
-        "POST",
-        null,
-        { language: language },
-      );
-      if (!response.ok) throw new Error("Failed to close chat session");
+      const response = await apiRequest(`Client/ClientChatSession/${sessionId}/close`, 'POST', null, {
+        language: language,
+      });
+      if (!response.ok) throw new Error('Failed to close chat session');
 
       // Store sessionId for review before clearing the main sessionId
       setReviewSessionId(sessionId);
@@ -118,9 +115,8 @@ const HelpCenterContent = ({
 
       setIsReviewDialogOpen(true);
     } catch (error) {
-      console.error("Error ending chat:", error);
-      setError("Failed to end chat session");
-      setAssistantStatus("idle");
+      setError('Failed to end chat session');
+      setAssistantStatus('idle');
       // Even if there's an error, clear the session state to prevent stuck state
       setReviewSessionId(sessionId);
       setSessionId(null);
@@ -134,18 +130,14 @@ const HelpCenterContent = ({
     const payload = { rating, comment };
 
     try {
-      const response = await apiRequest(
-        `Client/ClientChatSession/${reviewSessionId}/review`,
-        "POST",
-        payload,
-        { language },
-      );
-      if (!response.ok) throw new Error("Failed to send chat review");
+      const response = await apiRequest(`Client/ClientChatSession/${reviewSessionId}/review`, 'POST', payload, {
+        language,
+      });
+      if (!response.ok) throw new Error('Failed to send chat review');
 
       handleCloseChatReview();
     } catch (error) {
-      console.error("Error sending chat review:", error);
-      setError("Failed to send chat review");
+      setError('Failed to send chat review');
     }
   };
 
@@ -159,20 +151,19 @@ const HelpCenterContent = ({
       {
         id: Date.now(),
         senderType: 3,
-        messageContent:
-          option?.assistant?.greeting || "مرحباً! كيف يمكنني مساعدتك اليوم؟",
+        messageContent: option?.assistant?.greeting || 'مرحباً! كيف يمكنني مساعدتك اليوم؟',
         sentAt: new Date(),
         isSeen: true,
       },
     ]);
     setIsChatClosed(false);
-    setStatus("succeeded");
+    setStatus('succeeded');
   };
 
   const startNewChatSession = async (option: Option): Promise<string> => {
     try {
-      setStatus("loading");
-      setError("");
+      setStatus('loading');
+      setError('');
 
       const chatSessionCreateDto = {
         helpScreenId: helpScreenId,
@@ -186,15 +177,12 @@ const HelpCenterContent = ({
         }),
       };
 
-      const response = await apiRequest(
-        "Client/ClientChatSession/create-session",
-        "POST",
-        chatSessionCreateDto,
-        { language },
-      );
+      const response = await apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto, {
+        language,
+      });
 
       if (!response.ok) {
-        throw new Error("Failed to create chat session");
+        throw new Error('Failed to create chat session');
       }
 
       const responseData = await response.json();
@@ -206,39 +194,53 @@ const HelpCenterContent = ({
         newSessionId,
         responseData.ablyToken,
         handleReceiveMessage,
-        responseData.chatSession.tenantId,
+        responseData.chatSession.tenantId
       );
 
       // Verify the connection is actually active
       if (!ClientAblyService.isConnectionActive()) {
-        throw new Error("Ably connection failed to establish properly");
+        throw new Error('Ably connection failed to establish properly');
       }
 
       setIsAblyConnected(true);
       setIsChatClosed(false);
-      setStatus("succeeded");
+      setStatus('succeeded');
 
       return newSessionId; // Return the session ID
     } catch (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');
       throw error; // Re-throw to handle in calling function
     }
   };
 
-  const handleSendMessage = async (message: string) => {
-    if (message.trim() !== "") {
+  const handleEnsureSession = async (): Promise<string> => {
+    // If we already have a session ID and connection, return it
+    if (sessionId && isAblyConnected) {
+      return sessionId;
+    }
+
+    // If we have a selected option but no session, create one
+    if (selectedOption) {
+      const newSessionId = await startNewChatSession(selectedOption);
+      return newSessionId;
+    }
+
+    throw new Error('No option selected');
+  };
+
+  const handleSendMessage = async (message: string, attachmentIds: string[] = []) => {
+    if (message.trim() !== '') {
       try {
-        setAssistantStatus("typing");
+        setAssistantStatus('typing');
 
-        const userMessage = {
+        const userMessage: Message = {
           id: Date.now(),
           senderType: 1,
           messageContent: message,
           sentAt: new Date(),
           isSeen: false,
+          attachmentIds: attachmentIds.length > 0 ? attachmentIds : undefined,
         };
 
         setMessages((prevMessages) => [...prevMessages, userMessage]);
@@ -251,37 +253,36 @@ const HelpCenterContent = ({
         }
 
         if (!currentSessionId) {
-          throw new Error("No active session available");
+          throw new Error('No active session available');
         }
 
-        const messageDto = { messageContent: message };
+        const messageDto = {
+          messageContent: message,
+          ...(attachmentIds.length > 0 && { attachmentIds }),
+        };
+
         const response = await apiRequest(
           `Client/ClientChatSession/${currentSessionId}/send-message`,
-          "POST",
+          'POST',
           messageDto,
-          { language },
+          { language }
         );
 
         if (!response.ok) {
-          throw new Error("Failed to send message");
+          throw new Error('Failed to send message');
         }
 
         setMessages((prevMessages) => {
-          return prevMessages.map((msg) =>
-            msg.senderType === 1 && !msg.isSeen
-              ? { ...msg, isSeen: true }
-              : msg,
-          );
+          return prevMessages.map((msg) => (msg.senderType === 1 && !msg.isSeen ? { ...msg, isSeen: true } : msg));
         });
       } catch (error) {
-        console.error("Error in handleSendMessage:", error);
-        setAssistantStatus("idle");
+        setAssistantStatus('idle');
 
-        const errorMessage = {
+        const errorMessage: Message = {
           id: Date.now(),
           senderType: 3,
           messageContent:
-            "Failed to send the message. Please try again.\n لم يتم إرسال الرسالة. يرجى المحاولة مرة أخرى.",
+            'Failed to send the message. Please try again.\n لم يتم إرسال الرسالة. يرجى المحاولة مرة أخرى.',
           sentAt: new Date(),
           isSeen: true,
         };
@@ -293,20 +294,20 @@ const HelpCenterContent = ({
 
   useEffect(() => {
     if (isOpen && helpScreenId) {
-      setStatus("loading");
+      setStatus('loading');
 
-      apiRequest(`client/clientHelpScreen/${helpScreenId}`, "GET", null, {
+      apiRequest(`client/clientHelpScreen/${helpScreenId}`, 'GET', null, {
         language,
       })
         .then((res) => res.json())
         .then((data) => {
           setHelpScreenData(data);
-          setStatus("succeeded");
-          setError("");
+          setStatus('succeeded');
+          setError('');
         })
         .catch((err) => {
           setError(err.message);
-          setStatus("failed");
+          setStatus('failed');
         });
     }
   }, [isOpen, helpScreenId]);
@@ -314,12 +315,9 @@ const HelpCenterContent = ({
   const themeStyles = getThemeStyles({ primaryColor, secondaryColor });
 
   return (
-    <div className="babylai-help-center-container mb-4" style={themeStyles}>
+    <div className='babylai-help-center-container mb-4' style={themeStyles}>
       {showArrowAnimation && !isOpen && (
-        <FloatingMessage
-          onClose={handleCloseArrowAnimation}
-          message={messageLabel || t("homeSdk.needAssistance")}
-        />
+        <FloatingMessage onClose={handleCloseArrowAnimation} message={messageLabel || t('homeSdk.needAssistance')} />
       )}
 
       <HelpButton onClick={handleTogglePopup} />
@@ -334,6 +332,7 @@ const HelpCenterContent = ({
           user={user}
           onStartChat={handleStartChat}
           onSendMessage={handleSendMessage}
+          onEnsureSession={handleEnsureSession}
           onEndChat={handleEndChat}
           messages={messages}
           needsAgent={needsAgent}
@@ -348,10 +347,7 @@ const HelpCenterContent = ({
         />
       )}
       {isOpen && !!isReviewDialogOpen && reviewSessionId && (
-        <ReviewDialog
-          handleSubmit={handleSendChatReview}
-          onClose={handleCloseChatReview}
-        />
+        <ReviewDialog handleSubmit={handleSendChatReview} onClose={handleCloseChatReview} />
       )}
     </div>
   );

package/src/ui/help-popup.tsx

@@ -21,7 +21,8 @@ type HelpPopupProps = {
   error: string | null;
   user: any;
   onStartChat: (option: Option) => void;
-  onSendMessage: (message: string) => void;
+  onSendMessage: (message: string, attachmentIds: string[]) => void;
+  onEnsureSession: () => Promise<string>;
   onEndChat: (option?: Option) => void;
   messages: Message[];
   needsAgent: boolean;
@@ -42,6 +43,7 @@ const HelpPopup = ({
   error,
   onStartChat,
   onSendMessage,
+  onEnsureSession,
   onEndChat,
   messages,
   assistantStatus,
@@ -112,9 +114,9 @@ const HelpPopup = ({
   );
 
   const handleSendMessage = useCallback(
-    (message: string) => {
+    (message: string, attachmentIds: string[]) => {
       if (message.trim()) {
-        onSendMessage(message.trim());
+        onSendMessage(message.trim(), attachmentIds);
       }
     },
     [onSendMessage]
@@ -167,6 +169,7 @@ const HelpPopup = ({
           />
           <ChatWindow
             onSendMessage={handleSendMessage}
+            onEnsureSession={onEnsureSession}
             messages={memoizedMessages}
             assistantStatus={assistantStatus}
             needsAgent={needsAgent}
@@ -188,11 +191,7 @@ const HelpPopup = ({
         />
       );
     }
-    return <HomeScreen
-      setIsShowList={setIsShowList}
-      onClose={onClose}
-      logoUrl={logoUrl}
-    />;
+    return <HomeScreen setIsShowList={setIsShowList} onClose={onClose} logoUrl={logoUrl} />;
   }, [
     showChat,
     selectedOption,
@@ -202,6 +201,7 @@ const HelpPopup = ({
     isShowList,
     setIsShowList,
     handleSendMessage,
+    onEnsureSession,
     memoizedMessages,
     assistantStatus,
     needsAgent,
@@ -210,6 +210,8 @@ const HelpPopup = ({
     setExpandedOption,
     handleStartChat,
     showHelpScreen,
+    isAblyConnected,
+    logoUrl,
   ]);
 
   // Memoize confirmation modal
@@ -311,6 +313,6 @@ md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-roun
       </div>
     </div>
   );
-}
+};
 
 export default HelpPopup;

package/src/ui/powered-by.tsx

@@ -1,19 +1,20 @@
-import { useLocalTranslation } from "@/useLocalTranslation";
+import { useLocalTranslation } from '@/useLocalTranslation';
 
 const PoweredBy: React.FC = () => {
   const { t } = useLocalTranslation();
 
   return (
-    <section className="dark:babylai-text-white babylai-font-bold babylai-text-center babylai-px-8 babylai-py-2 babylai-w-full">
+    <section className='dark:babylai-text-white babylai-font-bold babylai-text-center babylai-px-8 babylai-py-2 babylai-w-full'>
       <a
-        href="https://www.babylai.net/"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="babylai-text-xs babylai-opacity-60 hover:babylai-opacity-100 babylai-transition-all">
+        href='https://www.babylai.net/'
+        target='_blank'
+        rel='noopener noreferrer'
+        className='babylai-text-xs babylai-opacity-60 hover:babylai-opacity-100 babylai-transition-all'
+      >
         {t('homeSdk.poweredBy')} BabylAI © 2025
       </a>
     </section>
-  )
-}
+  );
+};
 
-export default PoweredBy
+export default PoweredBy;