@aslaluroba/help-center-react 3.2.1 → 3.2.3

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

@@ -17,6 +17,7 @@ interface ChatWindowProps {
   assistantStatus: string;
   needsAgent: boolean;
   isAblyConnected: boolean;
+  sessionId?: string | null;
 }
 
 // Memoize individual message component to prevent unnecessary re-renders
@@ -34,7 +35,7 @@ const MessageComponent = React.memo(
     messages: Message[];
     firstHumanAgentIndex: number;
     onType: () => void;
-    onImageClick: (attachmentIds: string[], clickedIndex: number) => void;
+    onImageClick: (attachmentIdsOrUrls: string[], clickedIndex: number) => void;
   }) => {
     const isFirstInSequence = index === 0 || messages[index - 1].senderType !== message.senderType;
     const isFirstHumanAgentMessage = index === firstHumanAgentIndex && message.senderType === 2;
@@ -42,11 +43,13 @@ const MessageComponent = React.memo(
 
     const handleImageClick = useCallback(
       (clickedIndex: number) => {
-        if (message.attachmentIds && message.attachmentIds.length > 0) {
-          onImageClick(message.attachmentIds, clickedIndex);
+        // Use attachmentUrls if available (from Ably), otherwise use attachmentIds (user-sent)
+        const attachments = message.attachmentUrls || message.attachmentIds || [];
+        if (attachments.length > 0) {
+          onImageClick(attachments, clickedIndex);
         }
       },
-      [message.attachmentIds, onImageClick]
+      [message.attachmentIds, message.attachmentUrls, onImageClick]
     );
 
     return (
@@ -75,6 +78,20 @@ const MessageComponent = React.memo(
           {!isFirstInSequence && <div className='babylai-flex-shrink-0 babylai-me-3 babylai-w-8'></div>}
 
           <div className='babylai-flex babylai-flex-col babylai-gap-2'>
+            {/* Display attachment URLs (from Ably) */}
+            {message.attachmentUrls && message.attachmentUrls.length > 0 && (
+              <div className='babylai-flex babylai-flex-row babylai-flex-wrap babylai-gap-2 babylai-max-w-full'>
+                {message.attachmentUrls.map((attachmentUrl, imgIndex) => (
+                  <ImageAttachment
+                    key={attachmentUrl}
+                    imageUrl={attachmentUrl}
+                    enablePreview={false}
+                    onClick={() => handleImageClick(imgIndex)}
+                  />
+                ))}
+              </div>
+            )}
+            {/* Display attachment IDs (user-sent messages) */}
             {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) => (
@@ -87,12 +104,15 @@ const MessageComponent = React.memo(
                 ))}
               </div>
             )}
-            <AgentResponse
-              messageContent={message.messageContent}
-              senderType={message.senderType}
-              messageId={message.id}
-              onType={onType}
-            />
+            {/* Only show chat bubble if there's message content */}
+            {message.messageContent && message.messageContent.trim() !== '' && (
+              <AgentResponse
+                messageContent={message.messageContent}
+                senderType={message.senderType}
+                messageId={message.id}
+                onType={onType}
+              />
+            )}
           </div>
         </div>
       </div>
@@ -123,7 +143,14 @@ const TypingIndicator = React.memo(({ firstHumanAgentIndex }: { firstHumanAgentI
 TypingIndicator.displayName = 'TypingIndicator';
 
 export const ChatWindow = React.memo(
-  ({ onSendMessage, onEnsureSession, messages, assistantStatus = 'loading', needsAgent }: ChatWindowProps) => {
+  ({
+    onSendMessage,
+    onEnsureSession,
+    messages,
+    assistantStatus = 'loading',
+    needsAgent,
+    sessionId,
+  }: ChatWindowProps) => {
     const { i18n } = useLocalTranslation();
     const [inputMessage, setInputMessage] = useState('');
     const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -172,7 +199,8 @@ export const ChatWindow = React.memo(
 
     const handleSendMessage = useCallback(
       (attachmentIds: string[]) => {
-        if (inputMessage.trim()) {
+        // Allow sending if there's text OR attachments
+        if (inputMessage.trim() || attachmentIds.length > 0) {
           onSendMessage(inputMessage, attachmentIds);
           setInputMessage('');
         }
@@ -187,14 +215,36 @@ export const ChatWindow = React.memo(
 
     // Handle image gallery opening
     const handleImageClick = useCallback(
-      async (attachmentIds: string[], clickedIndex: number) => {
-        if (!attachmentIds || attachmentIds.length === 0) {
+      async (attachmentIdsOrUrls: string[], clickedIndex: number) => {
+        if (!attachmentIdsOrUrls || attachmentIdsOrUrls.length === 0) {
           return;
         }
 
         try {
-          // Fetch all image URLs with comprehensive error handling
-          const imageUrlPromises = attachmentIds.map((fileId) => {
+          // Check if the first item is a URL (starts with http:// or https://)
+          // If so, they're all URLs from Ably and can be used directly
+          const isUrl = attachmentIdsOrUrls[0]?.startsWith('http://') || attachmentIdsOrUrls[0]?.startsWith('https://');
+
+          let imageUrls: string[];
+
+          if (isUrl) {
+            // These are already URLs from Ably, use them directly (no async needed)
+            imageUrls = attachmentIdsOrUrls.filter((url): url is string => url !== null && url.length > 0);
+
+            // Open gallery immediately with URLs
+            if (imageUrls.length > 0) {
+              const adjustedIndex = Math.max(0, Math.min(clickedIndex, imageUrls.length - 1));
+              setGalleryState({
+                isOpen: true,
+                imageUrls,
+                initialIndex: adjustedIndex,
+              });
+            }
+            return; // Exit early since we don't need to fetch anything
+          }
+
+          // These are file IDs, need to fetch URLs using presignDownload
+          const imageUrlPromises = attachmentIdsOrUrls.map((fileId) => {
             if (!fileId || typeof fileId !== 'string') {
               return Promise.resolve(null);
             }
@@ -212,7 +262,7 @@ export const ChatWindow = React.memo(
               });
           });
 
-          const imageUrls = (await Promise.all(imageUrlPromises)).filter(
+          imageUrls = (await Promise.all(imageUrlPromises)).filter(
             (url): url is string => url !== null && url.length > 0
           );
 
@@ -221,7 +271,7 @@ export const ChatWindow = React.memo(
           }
 
           // Adjust the initial index if some images failed to load
-          let adjustedIndex = Math.max(0, Math.min(clickedIndex, imageUrls.length - 1));
+          const adjustedIndex = Math.max(0, Math.min(clickedIndex, imageUrls.length - 1));
 
           setGalleryState({
             isOpen: true,
@@ -288,6 +338,7 @@ export const ChatWindow = React.memo(
           setInputMessage={setInputMessage}
           isLoading={isLoading}
           onEnsureSession={onEnsureSession}
+          sessionId={sessionId}
         />
 
         {/* Gallery Preview Dialog */}

package/src/ui/help-center.tsx

@@ -83,7 +83,8 @@ const HelpCenterContent = ({
         messageContent: message,
         sentAt: new Date(),
         isSeen: true,
-        ...(attachments.length > 0 && { attachmentIds: attachments }),
+        // Ably now returns downloadUrls directly, not file IDs
+        ...(attachments.length > 0 && { attachmentUrls: attachments }),
       };
 
       return [...prevMessages, newMessage];
@@ -216,11 +217,12 @@ const HelpCenterContent = ({
 
   const handleEnsureSession = async (): Promise<string> => {
     // If we already have a session ID and connection, return it
-    if (sessionId && isAblyConnected) {
+    // NEVER create a new session if one already exists
+    if (sessionId) {
       return sessionId;
     }
 
-    // If we have a selected option but no session, create one
+    // 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;
@@ -230,14 +232,15 @@ const HelpCenterContent = ({
   };
 
   const handleSendMessage = async (message: string, attachmentIds: string[] = []) => {
-    if (message.trim() !== '') {
+    // 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,
+          messageContent: message || '', // Use empty string if message is empty but attachments exist
           sentAt: new Date(),
           isSeen: false,
           attachmentIds: attachmentIds.length > 0 ? attachmentIds : undefined,
@@ -245,10 +248,12 @@ const HelpCenterContent = ({
 
         setMessages((prevMessages) => [...prevMessages, userMessage]);
 
-        // Handle session creation if needed
+        // Handle session creation if needed - only create if no session exists
         let currentSessionId = sessionId;
 
-        if (!isAblyConnected && selectedOption) {
+        // 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);
         }
 
@@ -257,7 +262,7 @@ const HelpCenterContent = ({
         }
 
         const messageDto = {
-          messageContent: message,
+          messageContent: message || '', // Use empty string if message is empty but attachments exist
           ...(attachmentIds.length > 0 && { attachmentIds }),
         };
 

package/src/ui/help-popup.tsx

@@ -115,7 +115,8 @@ const HelpPopup = ({
 
   const handleSendMessage = useCallback(
     (message: string, attachmentIds: string[]) => {
-      if (message.trim()) {
+      // Allow sending if there's text OR attachments
+      if (message.trim() || attachmentIds.length > 0) {
         onSendMessage(message.trim(), attachmentIds);
       }
     },
@@ -174,6 +175,7 @@ const HelpPopup = ({
             assistantStatus={assistantStatus}
             needsAgent={needsAgent}
             isAblyConnected={isAblyConnected}
+            sessionId={sessionId}
           />
         </>
       );