@aslaluroba/help-center-react 3.0.20 → 3.2.0

package/src/ui/chatbot-popup/chat-window-screen/index.tsx

@@ -1,4 +1,5 @@
 import AgentResponse from '@/components/ui/agent-response/agent-response';
+import { ImageAttachment, ImagePreviewDialog } from '@/components/ui';
 import { Message } from '@/lib/types';
 import ChatWindowFooter from '@/ui/chatbot-popup/chat-window-screen/footer';
 import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
@@ -6,9 +7,12 @@ import LoadingGif from './../../../assets/animatedLogo.gif';
 import Seperator from './../../../assets/icons/seperator.svg';
 import LogoIcon from './../../../assets/logo.svg';
 import HumanIcon from './../../../assets/icons/user.svg';
+import { presignDownload } from '@/core/api';
+import { useLocalTranslation } from '../../../useLocalTranslation';
 
 interface ChatWindowProps {
-  onSendMessage: (message: string) => void;
+  onSendMessage: (message: string, attachmentIds: string[]) => void;
+  onEnsureSession: () => Promise<string>;
   messages: Message[];
   assistantStatus: string;
   needsAgent: boolean;
@@ -23,17 +27,28 @@ const MessageComponent = React.memo(
     messages,
     firstHumanAgentIndex,
     onType,
+    onImageClick,
   }: {
     message: Message;
     index: number;
     messages: Message[];
     firstHumanAgentIndex: number;
     onType: () => void;
+    onImageClick: (attachmentIds: string[], clickedIndex: number) => void;
   }) => {
     const isFirstInSequence = index === 0 || messages[index - 1].senderType !== message.senderType;
     const isFirstHumanAgentMessage = index === firstHumanAgentIndex && message.senderType === 2;
     const textDirection = message.senderType === 1 ? 'babylai-justify-end' : 'babylai-justify-start';
 
+    const handleImageClick = useCallback(
+      (clickedIndex: number) => {
+        if (message.attachmentIds && message.attachmentIds.length > 0) {
+          onImageClick(message.attachmentIds, clickedIndex);
+        }
+      },
+      [message.attachmentIds, onImageClick]
+    );
+
     return (
       <div key={message.id}>
         {isFirstHumanAgentMessage && (
@@ -59,12 +74,26 @@ const MessageComponent = React.memo(
           )}
           {!isFirstInSequence && <div className='babylai-flex-shrink-0 babylai-me-3 babylai-w-8'></div>}
 
-          <AgentResponse
-            messageContent={message.messageContent}
-            senderType={message.senderType}
-            messageId={message.id}
-            onType={onType}
-          />
+          <div className='babylai-flex babylai-flex-col babylai-gap-2'>
+            {message.attachmentIds && message.attachmentIds.length > 0 && (
+              <div className='babylai-flex babylai-flex-row babylai-flex-wrap babylai-gap-2 babylai-max-w-full'>
+                {message.attachmentIds.map((attachmentId, imgIndex) => (
+                  <ImageAttachment
+                    key={attachmentId}
+                    fileId={attachmentId}
+                    enablePreview={false}
+                    onClick={() => handleImageClick(imgIndex)}
+                  />
+                ))}
+              </div>
+            )}
+            <AgentResponse
+              messageContent={message.messageContent}
+              senderType={message.senderType}
+              messageId={message.id}
+              onType={onType}
+            />
+          </div>
         </div>
       </div>
     );
@@ -93,111 +122,187 @@ const TypingIndicator = React.memo(({ firstHumanAgentIndex }: { firstHumanAgentI
 
 TypingIndicator.displayName = 'TypingIndicator';
 
-export const ChatWindow = React.memo(({ onSendMessage, messages, assistantStatus = 'loading' }: ChatWindowProps) => {
-  const [inputMessage, setInputMessage] = useState('');
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const lastMessageCountRef = useRef(messages.length);
-
-  // Debounced scroll to bottom function
-  const scrollToBottom = useCallback(() => {
-    if (scrollTimeoutRef.current) {
-      clearTimeout(scrollTimeoutRef.current);
-    }
-
-    scrollTimeoutRef.current = setTimeout(() => {
-      messagesEndRef.current?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end',
-      });
-    }, 100);
-  }, []);
-
-  // Only scroll when new messages are added or status changes
-  useEffect(() => {
-    if (messages.length !== lastMessageCountRef.current || assistantStatus === 'typing') {
-      lastMessageCountRef.current = messages.length;
-      scrollToBottom();
-    }
-  }, [messages.length, assistantStatus, scrollToBottom]);
-
-  // Cleanup timeout on unmount
-  useEffect(() => {
-    return () => {
+export const ChatWindow = React.memo(
+  ({ onSendMessage, onEnsureSession, messages, assistantStatus = 'loading', needsAgent }: ChatWindowProps) => {
+    const { i18n } = useLocalTranslation();
+    const [inputMessage, setInputMessage] = useState('');
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+    const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const lastMessageCountRef = useRef(messages.length);
+    const [galleryState, setGalleryState] = useState<{
+      isOpen: boolean;
+      imageUrls: string[];
+      initialIndex: number;
+    }>({
+      isOpen: false,
+      imageUrls: [],
+      initialIndex: 0,
+    });
+
+    // Debounced scroll to bottom function
+    const scrollToBottom = useCallback(() => {
       if (scrollTimeoutRef.current) {
         clearTimeout(scrollTimeoutRef.current);
       }
-    };
-  }, []);
-
-  const handleSendMessage = useCallback(() => {
-    if (inputMessage.trim()) {
-      onSendMessage(inputMessage);
-      setInputMessage('');
-    }
-  }, [inputMessage, onSendMessage]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        if (inputMessage.trim() && assistantStatus !== 'typing') {
-          onSendMessage(inputMessage);
+
+      scrollTimeoutRef.current = setTimeout(() => {
+        messagesEndRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'end',
+        });
+      }, 100);
+    }, []);
+
+    // Only scroll when new messages are added or status changes
+    useEffect(() => {
+      if (messages.length !== lastMessageCountRef.current || assistantStatus === 'typing') {
+        lastMessageCountRef.current = messages.length;
+        scrollToBottom();
+      }
+    }, [messages.length, assistantStatus, scrollToBottom]);
+
+    // Cleanup timeout on unmount
+    useEffect(() => {
+      return () => {
+        if (scrollTimeoutRef.current) {
+          clearTimeout(scrollTimeoutRef.current);
+        }
+      };
+    }, []);
+
+    const handleSendMessage = useCallback(
+      (attachmentIds: string[]) => {
+        if (inputMessage.trim()) {
+          onSendMessage(inputMessage, attachmentIds);
           setInputMessage('');
         }
+      },
+      [inputMessage, onSendMessage]
+    );
+
+    // Memoize the first human agent index calculation
+    const firstHumanAgentIndex = useMemo(() => {
+      return messages.findIndex((message) => message.senderType === 2);
+    }, [messages]);
+
+    // Handle image gallery opening
+    const handleImageClick = useCallback(
+      async (attachmentIds: string[], clickedIndex: number) => {
+        if (!attachmentIds || attachmentIds.length === 0) {
+          return;
+        }
+
+        try {
+          // Fetch all image URLs with comprehensive error handling
+          const imageUrlPromises = attachmentIds.map((fileId) => {
+            if (!fileId || typeof fileId !== 'string') {
+              return Promise.resolve(null);
+            }
+
+            return presignDownload(fileId, i18n.language)
+              .then((response) => {
+                if (!response || !response.downloadUrl) {
+                  return null;
+                }
+                return response.downloadUrl;
+              })
+              .catch(() => {
+                // Return null for failed downloads so we can filter them out
+                return null;
+              });
+          });
+
+          const imageUrls = (await Promise.all(imageUrlPromises)).filter(
+            (url): url is string => url !== null && url.length > 0
+          );
+
+          if (imageUrls.length === 0) {
+            return;
+          }
+
+          // Adjust the initial index if some images failed to load
+          let adjustedIndex = Math.max(0, Math.min(clickedIndex, imageUrls.length - 1));
+
+          setGalleryState({
+            isOpen: true,
+            imageUrls,
+            initialIndex: adjustedIndex,
+          });
+        } catch (error) {
+          // Handle unexpected errors silently
+        }
+      },
+      [i18n.language]
+    );
+
+    const handleCloseGallery = useCallback(() => {
+      setGalleryState({
+        isOpen: false,
+        imageUrls: [],
+        initialIndex: 0,
+      });
+    }, []);
+
+    // Memoize loading state check
+    // When a human agent has joined, don't disable based on assistantStatus
+    const hasHumanAgent = useMemo(() => {
+      return needsAgent || messages.some((msg) => msg.senderType === 2);
+    }, [needsAgent, messages]);
+
+    const isLoading = useMemo(() => {
+      // If human agent has joined, don't disable file uploads based on assistantStatus
+      if (hasHumanAgent) {
+        return false;
       }
-    },
-    [inputMessage, onSendMessage, assistantStatus]
-  );
+      return assistantStatus === 'typing' || assistantStatus === 'loading' || assistantStatus === 'error';
+    }, [assistantStatus, hasHumanAgent]);
+
+    // Memoize the message list to prevent unnecessary re-renders
+    const messagesListWithGallery = useMemo(() => {
+      return messages.map((message, index) => (
+        <MessageComponent
+          key={`${message.id}-${index}`}
+          message={message}
+          index={index}
+          messages={messages}
+          firstHumanAgentIndex={firstHumanAgentIndex}
+          onType={scrollToBottom}
+          onImageClick={handleImageClick}
+        />
+      ));
+    }, [messages, firstHumanAgentIndex, scrollToBottom, handleImageClick]);
 
-  // Memoize the first human agent index calculation
-  const firstHumanAgentIndex = useMemo(() => {
-    return messages.findIndex((message) => message.senderType === 2);
-  }, [messages]);
-
-  // Memoize the message list to prevent unnecessary re-renders
-  const messagesList = useMemo(() => {
-    return messages.map((message, index) => (
-      <MessageComponent
-        key={`${message.id}-${index}`}
-        message={message}
-        index={index}
-        messages={messages}
-        firstHumanAgentIndex={firstHumanAgentIndex}
-        onType={scrollToBottom}
-      />
-    ));
-  }, [messages, firstHumanAgentIndex, scrollToBottom]);
-
-  // Memoize loading state check
-  const isLoading = useMemo(() => {
     return (
-      assistantStatus === 'typing' ||
-      assistantStatus === 'loading' ||
-      assistantStatus === 'error' ||
-      inputMessage.trim() === ''
-    );
-  }, [assistantStatus, inputMessage]);
+      <>
+        <div className='babylai-flex-1 babylai-overflow-y-auto babylai-p-4 babylai-h-full'>
+          {messagesListWithGallery}
 
-  return (
-    <>
-      <div className='babylai-flex-1 babylai-overflow-y-auto babylai-p-4 babylai-h-full'>
-        {messagesList}
+          {assistantStatus === 'typing' && <TypingIndicator firstHumanAgentIndex={firstHumanAgentIndex} />}
 
-        {assistantStatus === 'typing' && <TypingIndicator firstHumanAgentIndex={firstHumanAgentIndex} />}
+          <div ref={messagesEndRef} />
+        </div>
 
-        <div ref={messagesEndRef} />
-      </div>
+        <ChatWindowFooter
+          inputMessage={inputMessage}
+          handleSendMessage={handleSendMessage}
+          setInputMessage={setInputMessage}
+          isLoading={isLoading}
+          onEnsureSession={onEnsureSession}
+        />
 
-      <ChatWindowFooter
-        inputMessage={inputMessage}
-        handleKeyDown={handleKeyDown}
-        handleSendMessage={handleSendMessage}
-        setInputMessage={setInputMessage}
-        isLoading={isLoading}
-      />
-    </>
-  );
-});
+        {/* Gallery Preview Dialog */}
+        {galleryState.isOpen && galleryState.imageUrls.length > 0 && (
+          <ImagePreviewDialog
+            imageUrls={galleryState.imageUrls}
+            initialIndex={galleryState.initialIndex}
+            isOpen={galleryState.isOpen}
+            onClose={handleCloseGallery}
+            alt='Image gallery preview'
+          />
+        )}
+      </>
+    );
+  }
+);
 
 ChatWindow.displayName = 'ChatWindow';

package/src/ui/help-center.tsx

@@ -38,7 +38,8 @@ const HelpCenterContent = ({
   primaryColor,
   secondaryColor,
   logoUrl,
-}: Omit<HelpCenterProps, 'language'>) => {
+  language,
+}: HelpCenterProps) => {
   const { t } = useLocalTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const [showArrowAnimation, setShowArrowAnimation] = useState(showArrow);
@@ -54,7 +55,6 @@ const HelpCenterContent = ({
   const [messages, setMessages] = useState<Message[]>([]);
   const [needsAgent, setNeedsAgent] = useState(false);
   const [assistantStatus, setAssistantStatus] = useState('idle');
-
   const [isReviewDialogOpen, setIsReviewDialogOpen] = useState(false);
 
   const handleTogglePopup = () => {
@@ -66,18 +66,24 @@ const HelpCenterContent = ({
     setShowArrowAnimation(false);
   };
 
-  const handleReceiveMessage = (message: string, senderType: number, needsAgent: boolean) => {
+  const handleReceiveMessage = (
+    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];
@@ -94,7 +100,9 @@ const HelpCenterContent = ({
       setIsAblyConnected(false);
       setAssistantStatus('idle');
 
-      const response = await apiRequest(`Client/ClientChatSession/${sessionId}/close`, 'POST');
+      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
@@ -107,7 +115,6 @@ const HelpCenterContent = ({
 
       setIsReviewDialogOpen(true);
     } catch (error) {
-      console.error('Error ending chat:', error);
       setError('Failed to end chat session');
       setAssistantStatus('idle');
       // Even if there's an error, clear the session state to prevent stuck state
@@ -123,12 +130,13 @@ const HelpCenterContent = ({
     const payload = { rating, comment };
 
     try {
-      const response = await apiRequest(`Client/ClientChatSession/${reviewSessionId}/review`, 'POST', payload);
+      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');
     }
   };
@@ -169,7 +177,9 @@ const HelpCenterContent = ({
         }),
       };
 
-      const response = await apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto);
+      const response = await apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto, {
+        language,
+      });
 
       if (!response.ok) {
         throw new Error('Failed to create chat session');
@@ -204,17 +214,33 @@ const HelpCenterContent = ({
     }
   };
 
-  const handleSendMessage = async (message: string) => {
+  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');
 
-        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]);
@@ -230,11 +256,16 @@ const HelpCenterContent = ({
           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',
-          messageDto
+          messageDto,
+          { language }
         );
 
         if (!response.ok) {
@@ -245,10 +276,9 @@ const HelpCenterContent = ({
           return prevMessages.map((msg) => (msg.senderType === 1 && !msg.isSeen ? { ...msg, isSeen: true } : msg));
         });
       } catch (error) {
-        console.error('Error in handleSendMessage:', error);
         setAssistantStatus('idle');
 
-        const errorMessage = {
+        const errorMessage: Message = {
           id: Date.now(),
           senderType: 3,
           messageContent:
@@ -266,7 +296,9 @@ const HelpCenterContent = ({
     if (isOpen && helpScreenId) {
       setStatus('loading');
 
-      apiRequest(`client/clientHelpScreen/${helpScreenId}`)
+      apiRequest(`client/clientHelpScreen/${helpScreenId}`, 'GET', null, {
+        language,
+      })
         .then((res) => res.json())
         .then((data) => {
           setHelpScreenData(data);
@@ -300,6 +332,7 @@ const HelpCenterContent = ({
           user={user}
           onStartChat={handleStartChat}
           onSendMessage={handleSendMessage}
+          onEnsureSession={handleEnsureSession}
           onEndChat={handleEndChat}
           messages={messages}
           needsAgent={needsAgent}
@@ -318,7 +351,7 @@ const HelpCenterContent = ({
       )}
     </div>
   );
-}
+};
 
 // Main HelpCenter component that provides the language context
 const HelpCenter = ({
@@ -335,6 +368,7 @@ const HelpCenter = ({
   return (
     <LanguageProvider language={language}>
       <HelpCenterContent
+        language={language}
         helpScreenId={helpScreenId}
         user={user}
         showArrow={showArrow}
@@ -346,6 +380,6 @@ const HelpCenter = ({
       />
     </LanguageProvider>
   );
-}
+};
 
 export default HelpCenter;

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;