@aslaluroba/help-center-react 3.0.21 → 3.2.1

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

@@ -1,37 +1,274 @@
+import React, { useRef, useState, useCallback } from 'react';
+import axios from 'axios';
 import { Button } from '@/components';
+import { ImagePreviewDialog } from '@/components/ui';
 import EnvelopeIcon from './../../../assets/icons/envelope.svg';
+import PaperclipIcon from './../../../assets/icons/paperclip.svg';
+import XIcon from './../../../assets/icons/x.svg';
 import { useLocalTranslation } from '../../../useLocalTranslation';
+import { presignUpload } from '@/core/api';
+
+interface SelectedFileDto {
+  file: File;
+  previewUrl: string;
+  uploading: boolean;
+  uploadedId: string | null;
+  error: string | null;
+}
 
 interface ChatWindowFooterProps {
   inputMessage: string;
   setInputMessage: (e: string) => void;
-  handleKeyDown: (e: React.KeyboardEvent) => void;
-  handleSendMessage: () => void;
+  handleSendMessage: (attachmentIds: string[]) => void;
   isLoading: boolean;
+  onEnsureSession: () => Promise<string>;
 }
 
 const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
-  const { t, dir } = useLocalTranslation();
-  
+  const { t, dir, i18n } = useLocalTranslation();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [selectedFiles, setSelectedFiles] = useState<SelectedFileDto[]>([]);
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+
+  const handleAttachClick = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+
+  const handleFileSelect = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+
+    // Validate that all files are images
+    const imageFiles = files.filter((file) => file.type.startsWith('image/'));
+
+    // Only image files are allowed
+
+    // Create preview URLs and add to selected files
+    const newFiles: SelectedFileDto[] = imageFiles.map((file) => ({
+      file,
+      previewUrl: URL.createObjectURL(file),
+      uploading: false,
+      uploadedId: null,
+      error: null,
+    }));
+
+    setSelectedFiles((prev) => [...prev, ...newFiles]);
+
+    // Clear the input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+
+    // Start uploading immediately
+    await handleUploadFiles(newFiles);
+  }, []);
+
+  const handleUploadFiles = useCallback(
+    async (filesToUpload: SelectedFileDto[]) => {
+      // Get session ID
+      let sessionId: string;
+      try {
+        sessionId = await props.onEnsureSession();
+      } catch (error) {
+        // Mark all files as error
+        setSelectedFiles((prev) =>
+          prev.map((f) =>
+            filesToUpload.some((ftl) => ftl.previewUrl === f.previewUrl)
+              ? { ...f, error: 'Failed to initialize session', uploading: false }
+              : f
+          )
+        );
+        return;
+      }
+
+      // Upload each file
+      for (const fileDto of filesToUpload) {
+        try {
+          // Mark as uploading
+          setSelectedFiles((prev) =>
+            prev.map((f) => (f.previewUrl === fileDto.previewUrl ? { ...f, uploading: true, error: null } : f))
+          );
+
+          // Get presigned URL
+          const presignResponse = await presignUpload(sessionId, fileDto.file, i18n.language);
+
+          // Upload file to presigned URL using axios
+          // Important: Content-Type must match the file type (e.g., 'image/png'), not 'multipart/form-data'
+          const uploadResponse = await axios.put(presignResponse.uploadUrl, fileDto.file, {
+            headers: {
+              'Content-Type': fileDto.file.type,
+            },
+            onUploadProgress: () => {
+              // Upload progress tracking (silent)
+            },
+          });
+
+          if (uploadResponse.status !== 200 && uploadResponse.status !== 204) {
+            throw new Error(`Upload failed with status ${uploadResponse.status}`);
+          }
+
+          // Update with uploaded ID
+          setSelectedFiles((prev) =>
+            prev.map((f) =>
+              f.previewUrl === fileDto.previewUrl
+                ? { ...f, uploading: false, uploadedId: presignResponse.id, error: null }
+                : f
+            )
+          );
+        } catch (error) {
+          setSelectedFiles((prev) =>
+            prev.map((f) =>
+              f.previewUrl === fileDto.previewUrl
+                ? { ...f, uploading: false, error: 'Upload failed', uploadedId: null }
+                : f
+            )
+          );
+        }
+      }
+    },
+    [props.onEnsureSession, i18n.language]
+  );
+
+  const handleRemoveFile = useCallback((previewUrl: string) => {
+    setSelectedFiles((prev) => {
+      const fileToRemove = prev.find((f) => f.previewUrl === previewUrl);
+      if (fileToRemove) {
+        URL.revokeObjectURL(fileToRemove.previewUrl);
+      }
+      return prev.filter((f) => f.previewUrl !== previewUrl);
+    });
+  }, []);
+
+  const handleSendMessageWithAttachments = useCallback(() => {
+    // Only allow sending if all files have finished uploading (either successfully or with error)
+    const hasUploadingFiles = selectedFiles.some((f) => f.uploading);
+    if (hasUploadingFiles) {
+      return; // Prevent sending if any files are still uploading
+    }
+
+    // Get all successfully uploaded file IDs
+    const attachmentIds = selectedFiles.filter((f) => f.uploadedId !== null).map((f) => f.uploadedId as string);
+
+    // Call the original send message with attachment IDs
+    props.handleSendMessage(attachmentIds);
+
+    // Clear selected files and revoke URLs
+    selectedFiles.forEach((f) => URL.revokeObjectURL(f.previewUrl));
+    setSelectedFiles([]);
+  }, [selectedFiles, props]);
+
+  // Check if any files are currently uploading
+  const hasUploadingFiles = selectedFiles.some((f) => f.uploading);
+
+  // Check if there are files that haven't finished (no uploadedId, no error, not uploading)
+  // This shouldn't happen in normal flow, but we check for safety
+  const hasPendingFiles = selectedFiles.some((f) => !f.uploading && f.uploadedId === null && f.error === null);
+
+  // Check if all files have errors (no successful uploads)
+  const hasSuccessfulUploads = selectedFiles.some((f) => f.uploadedId !== null);
+  const allFilesHaveErrors =
+    selectedFiles.length > 0 && !hasSuccessfulUploads && !hasUploadingFiles && !hasPendingFiles;
+
+  const isSendDisabled =
+    props.isLoading || props.inputMessage.trim() === '' || hasUploadingFiles || hasPendingFiles || allFilesHaveErrors;
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        if (!isSendDisabled) {
+          handleSendMessageWithAttachments();
+        }
+      }
+    },
+    [isSendDisabled, handleSendMessageWithAttachments]
+  );
+
   return (
-    <footer className='babylai-flex babylai-items-center babylai-gap-2 babylai-relative babylai-rounded-full babylai-bg-white dark:!babylai-bg-storm-dust-900 babylai-mx-4 md:babylai-mx-6 md:babylai-py-3 md:babylai-px-4'>
-      <input
-        type='text'
-        value={props.inputMessage}
-        onChange={(e) => props.setInputMessage(e.target.value)}
-        onKeyDown={props.handleKeyDown}
-        placeholder={t('homeSdk.placeholder')}
-        className='babylai-flex-1 babylai-py-2 babylai-px-4 babylai-bg-transparent babylai-outline-none babylai-text-sm dark:babylai-text-white babylai-border-none'
-      />
-      <Button
-        variant='default'
-        size='icon'
-        onClick={props.handleSendMessage}
-        disabled={props?.isLoading}
-        className='babylai-rounded-full babylai-bg-primary-500 babylai-hover:babylai-bg-purple-600 babylai-w-8 babylai-h-8 disabled:babylai-opacity-50'
-      >
-        <EnvelopeIcon className={`babylai-w-4 babylai-h-4 ${dir === 'rtl' ? 'babylai-rotate-270' : ''}`} />
-      </Button>
+    <footer className='babylai-flex babylai-flex-col babylai-gap-2 babylai-mx-4 md:babylai-mx-6'>
+      {selectedFiles.length > 0 && (
+        <div className='babylai-flex babylai-gap-2 babylai-flex-wrap babylai-p-2 babylai-bg-white dark:!babylai-bg-storm-dust-900 babylai-rounded-lg'>
+          {selectedFiles.map((file) => (
+            <div key={file.previewUrl} className='babylai-relative babylai-group'>
+              <img
+                src={file.previewUrl}
+                alt='Preview'
+                className='babylai-w-16 babylai-h-16 babylai-object-cover babylai-rounded-lg babylai-border babylai-border-black-white-200 babylai-cursor-pointer hover:babylai-opacity-80 babylai-transition-opacity'
+                onClick={() => setPreviewImage(file.previewUrl)}
+                role='button'
+                aria-label='Click to preview image'
+              />
+              {file.uploading && (
+                <div className='babylai-absolute babylai-inset-0 babylai-flex babylai-items-center babylai-justify-center babylai-bg-black babylai-bg-opacity-50 babylai-rounded-lg'>
+                  <div className='babylai-animate-spin babylai-rounded-full babylai-h-6 babylai-w-6 babylai-border-2 babylai-border-white babylai-border-t-transparent'></div>
+                </div>
+              )}
+              {file.error && (
+                <div className='babylai-absolute babylai-inset-0 babylai-flex babylai-items-center babylai-justify-center babylai-bg-red-500 babylai-bg-opacity-70 babylai-rounded-lg'>
+                  <span className='babylai-text-white babylai-text-xs'>Error</span>
+                </div>
+              )}
+              <button
+                onClick={() => handleRemoveFile(file.previewUrl)}
+                className='babylai-absolute -babylai-top-2 -babylai-right-2 babylai-bg-red-500 babylai-text-white babylai-rounded-full babylai-w-5 babylai-h-5 babylai-flex babylai-items-center babylai-justify-center babylai-opacity-0 group-hover:babylai-opacity-100 babylai-transition-opacity'
+                type='button'
+                aria-label='Remove image'
+              >
+                <XIcon className='babylai-w-3 babylai-h-3' />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className='babylai-flex babylai-items-center babylai-gap-2 babylai-relative babylai-rounded-full babylai-bg-white dark:!babylai-bg-storm-dust-900 babylai-py-1 babylai-px-2 md:babylai-py-3 md:babylai-px-4'>
+        <input
+          type='file'
+          ref={fileInputRef}
+          onChange={handleFileSelect}
+          accept='image/*'
+          multiple
+          className='babylai-hidden'
+        />
+        <Button
+          variant='ghost'
+          size='icon'
+          onClick={handleAttachClick}
+          disabled={props.isLoading}
+          className='babylai-rounded-full babylai-w-8 babylai-h-8 babylai-text-black-white-500 hover:babylai-text-primary-500 hover:babylai-bg-transparent'
+          type='button'
+        >
+          <PaperclipIcon className='babylai-w-4 babylai-h-4' />
+        </Button>
+        <input
+          type='text'
+          value={props.inputMessage}
+          onChange={(e) => props.setInputMessage(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={t('homeSdk.placeholder')}
+          className='babylai-flex-1 babylai-py-2 babylai-px-2 babylai-bg-transparent babylai-outline-none babylai-text-sm dark:babylai-text-white babylai-border-none'
+        />
+        <Button
+          variant='default'
+          size='icon'
+          onClick={handleSendMessageWithAttachments}
+          disabled={isSendDisabled}
+          className='babylai-rounded-full babylai-bg-primary-500 babylai-hover:babylai-bg-purple-600 babylai-w-8 babylai-h-8 disabled:babylai-opacity-50'
+          type='button'
+        >
+          <EnvelopeIcon className={`babylai-w-4 babylai-h-4 ${dir === 'rtl' ? 'babylai-rotate-270' : ''}`} />
+        </Button>
+      </div>
+
+      {/* Image Preview Dialog */}
+      {previewImage && (
+        <ImagePreviewDialog
+          imageUrls={[previewImage]}
+          initialIndex={0}
+          isOpen={!!previewImage}
+          onClose={() => setPreviewImage(null)}
+          alt='Image preview'
+        />
+      )}
     </footer>
   );
 };

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';