@aslaluroba/help-center-react 3.2.1 → 3.2.4

package/dist/ui/chatbot-popup/chat-window-screen/footer.d.ts

@@ -5,6 +5,7 @@ interface ChatWindowFooterProps {
     handleSendMessage: (attachmentIds: string[]) => void;
     isLoading: boolean;
     onEnsureSession: () => Promise<string>;
+    sessionId?: string | null;
 }
 declare const ChatWindowFooter: React.FC<ChatWindowFooterProps>;
 export default ChatWindowFooter;

package/dist/ui/chatbot-popup/chat-window-screen/index.d.ts

@@ -7,6 +7,7 @@ interface ChatWindowProps {
     assistantStatus: string;
     needsAgent: boolean;
     isAblyConnected: boolean;
+    sessionId?: string | null;
 }
-export declare const ChatWindow: React.MemoExoticComponent<({ onSendMessage, onEnsureSession, messages, assistantStatus, needsAgent }: ChatWindowProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const ChatWindow: React.MemoExoticComponent<({ onSendMessage, onEnsureSession, messages, assistantStatus, needsAgent, sessionId, }: ChatWindowProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "version": "3.2.1",
+  "version": "3.2.4",
   "description": "BabylAI Help Center Widget for React and Next.js",
   "private": false,
   "exports": {

package/src/components/ui/agent-response/agent-response.tsx

@@ -12,12 +12,14 @@ interface AgentResponseProps {
 const seenMessagesRef = new Set<number>();
 
 const AgentResponse = ({ senderType, messageContent, messageId, onType }: AgentResponseProps) => {
+  // Ensure messageContent is always a string to prevent errors
+  const safeMessageContent = messageContent ?? '';
   const shouldAnimate = (senderType === 2 || senderType === 3) && !seenMessagesRef.has(messageId);
-  const animatedText = useTypewriter(messageContent, 20, onType);
-  const finalMessage = shouldAnimate ? animatedText : messageContent;
+  const animatedText = useTypewriter(safeMessageContent, 20, onType);
+  const finalMessage = shouldAnimate ? animatedText : safeMessageContent;
 
   // Mark message as "seen" after full animation
-  if (shouldAnimate && finalMessage === messageContent) {
+  if (shouldAnimate && finalMessage === safeMessageContent) {
     seenMessagesRef.add(messageId);
   }
 

package/src/components/ui/image-attachment.tsx

@@ -5,7 +5,8 @@ import { useLocalTranslation } from '../../useLocalTranslation';
 import { ImagePreviewDialog } from './image-preview-dialog';
 
 interface ImageAttachmentProps {
-  fileId: string;
+  fileId?: string; // File ID (for user-sent messages, requires presignDownload)
+  imageUrl?: string; // Direct URL (for received messages from Ably)
   className?: string;
   enablePreview?: boolean;
   onClick?: () => void;
@@ -13,32 +14,43 @@ interface ImageAttachmentProps {
 
 export const ImageAttachment: React.FC<ImageAttachmentProps> = ({
   fileId,
+  imageUrl: propImageUrl,
   className,
   enablePreview = true,
   onClick,
 }) => {
   const { i18n } = useLocalTranslation();
-  const [imageUrl, setImageUrl] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
+  const [imageUrl, setImageUrl] = useState<string | null>(propImageUrl || null);
+  const [loading, setLoading] = useState(!propImageUrl && !!fileId);
   const [error, setError] = useState(false);
   const [isPreviewOpen, setIsPreviewOpen] = useState(false);
 
   useEffect(() => {
-    const fetchImageUrl = async () => {
-      try {
-        setLoading(true);
-        setError(false);
-        const response = await presignDownload(fileId, i18n.language);
-        setImageUrl(response.downloadUrl);
-      } catch (err) {
-        setError(true);
-      } finally {
-        setLoading(false);
-      }
-    };
+    // If we have a direct URL, use it immediately
+    if (propImageUrl) {
+      setImageUrl(propImageUrl);
+      setLoading(false);
+      return;
+    }
+
+    // If we only have a fileId, fetch the URL using presignDownload
+    if (fileId) {
+      const fetchImageUrl = async () => {
+        try {
+          setLoading(true);
+          setError(false);
+          const response = await presignDownload(fileId, i18n.language);
+          setImageUrl(response.downloadUrl);
+        } catch (err) {
+          setError(true);
+        } finally {
+          setLoading(false);
+        }
+      };
 
-    fetchImageUrl();
-  }, [fileId, i18n.language]);
+      fetchImageUrl();
+    }
+  }, [fileId, propImageUrl, i18n.language]);
 
   const handleImageClick = () => {
     if (onClick) {

package/src/components/ui/image-preview-dialog.tsx

@@ -70,6 +70,38 @@ export const ImagePreviewDialog: React.FC<ImagePreviewDialogProps> = ({
     setImagePosition({ x: 0, y: 0 });
   }, []);
 
+  const handleDownload = useCallback(async () => {
+    if (!currentImageUrl) return;
+
+    try {
+      // Fetch the image as a blob
+      const response = await fetch(currentImageUrl);
+      const blob = await response.blob();
+      
+      // Create a temporary URL for the blob
+      const blobUrl = URL.createObjectURL(blob);
+      
+      // Extract filename from URL or use a default
+      const urlParts = currentImageUrl.split('/');
+      const filename = urlParts[urlParts.length - 1].split('?')[0] || 'image.png';
+      
+      // Create a temporary anchor element and trigger download
+      const link = document.createElement('a');
+      link.href = blobUrl;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      
+      // Cleanup
+      document.body.removeChild(link);
+      URL.revokeObjectURL(blobUrl);
+    } catch (error) {
+      console.error('Failed to download image:', error);
+      // Fallback: open in new tab if download fails
+      window.open(currentImageUrl, '_blank');
+    }
+  }, [currentImageUrl]);
+
   const handleClose = useCallback(() => {
     setZoomLevel(1);
     setImagePosition({ x: 0, y: 0 });
@@ -307,6 +339,20 @@ export const ImagePreviewDialog: React.FC<ImagePreviewDialogProps> = ({
               Reset
             </Button>
           )}
+          {/* Download Button */}
+          <div className='babylai-h-9 babylai-w-px babylai-bg-white/20 babylai-mx-1' />
+          <Button
+            variant='ghost'
+            size='icon'
+            onClick={handleDownload}
+            className='babylai-text-white hover:babylai-text-white/80 hover:babylai-bg-white/10 babylai-h-9 babylai-w-9'
+            aria-label='Download image'
+            type='button'
+          >
+            <svg className='babylai-w-5 babylai-h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' />
+            </svg>
+          </Button>
         </div>
 
         {/* Image Counter */}

package/src/core/AblyService.ts

@@ -26,10 +26,19 @@ export class ClientAblyService {
         autoConnect: true,
       });
 
+      this.client.connection.on('failed', (stateChange) => {
+        console.error('[AblyService] Connection state: failed', {
+          reason: stateChange.reason?.message,
+          error: stateChange.reason,
+        });
+      });
+
       // Wait for connection to be established
       await new Promise<void>((resolve, reject) => {
         if (!this.client) {
-          reject(new Error('Failed to initialize Ably client'));
+          const error = new Error('Failed to initialize Ably client');
+          console.error('[AblyService]', error);
+          reject(error);
           return;
         }
 
@@ -40,17 +49,26 @@ export class ClientAblyService {
         });
 
         this.client.connection.once('failed', (stateChange) => {
-          reject(new Error(`Ably connection failed: ${stateChange.reason?.message || 'Unknown error'}`));
+          const error = new Error(`Ably connection failed: ${stateChange.reason?.message || 'Unknown error'}`);
+          console.error('[AblyService] Connection failed', {
+            reason: stateChange.reason?.message,
+            error: stateChange.reason,
+          });
+          reject(error);
         });
 
         this.client.connection.once('disconnected', (stateChange) => {
-          reject(new Error(`Ably connection disconnected: ${stateChange.reason?.message || 'Unknown error'}`));
+          const error = new Error(`Ably connection disconnected: ${stateChange.reason?.message || 'Unknown error'}`);
+          console.error('[AblyService] Connection disconnected', { reason: stateChange.reason?.message });
+          reject(error);
         });
 
         // Set a timeout for connection
         setTimeout(() => {
           if (!this.isConnected) {
-            reject(new Error('Ably connection timeout'));
+            const error = new Error('Ably connection timeout');
+            console.error('[AblyService] Connection timeout after 10 seconds');
+            reject(error);
           }
         }, 10000);
       });
@@ -58,6 +76,7 @@ export class ClientAblyService {
       // Subscribe to the session room
       await this.joinChannel(sessionId, onMessageReceived, tenantId);
     } catch (error) {
+      console.error('[AblyService] Error in startConnection', { error, sessionId });
       this.isConnected = false;
       this.sessionId = null;
       throw error;
@@ -66,7 +85,9 @@ export class ClientAblyService {
 
   private static async joinChannel(sessionId: string, onMessageReceived: Function, tenantId: string) {
     if (!this.client) {
-      throw new Error('Chat client not initialized');
+      const error = new Error('Chat client not initialized');
+      console.error('[AblyService] joinChannel error:', error);
+      throw error;
     }
 
     const roomName = `session:${tenantId}:${sessionId}`;
@@ -75,21 +96,46 @@ export class ClientAblyService {
     if (this.client) {
       this.channel = this.client.channels.get(roomName);
 
+      this.channel.on('failed', (stateChange) => {
+        console.error('[AblyService] Channel failed', {
+          roomName,
+          reason: stateChange.reason?.message,
+          error: stateChange.reason,
+        });
+      });
+
       // Subscribe to assistant/system responses
       this.channel.subscribe('ReceiveMessage', (message) => {
         try {
+          // Ensure messageContent is always a string (default to empty string if undefined)
           const messageContent =
-            typeof message.data === 'string' ? message.data : message.data?.content || message.data?.message;
+            typeof message.data === 'string' ? message.data : message.data?.content ?? message.data?.message ?? '';
           const senderType = message.data?.senderType || 3; // Assistant
-          const needsAgent =
-            message.data?.needsAgent ||
-            message.data?.actionType == "needs_agent" ||
-            false;
+          const needsAgent = message.data?.needsAgent || message.data?.actionType == 'needs_agent' || false;
           const attachments = message.data?.attachments || [];
 
-          onMessageReceived(messageContent, senderType, needsAgent, attachments);
+          // Extract downloadUrl from attachments (Ably now returns downloadUrl directly)
+          // Attachments can be: strings (URLs), objects with downloadUrl, or objects with id
+          const attachmentUrls = attachments
+            .map((attachment: any) => {
+              if (typeof attachment === 'string') {
+                // If it's already a string, it's a URL
+                return attachment;
+              } else if (attachment?.downloadUrl) {
+                // If it's an object with downloadUrl, use that
+                return attachment.downloadUrl;
+              } else if (attachment?.url) {
+                // Fallback to url property
+                return attachment.url;
+              }
+              // If it's an object with id, we'll need to keep it for backward compatibility
+              return null;
+            })
+            .filter((url: string | null): url is string => url !== null);
+
+          onMessageReceived(messageContent, senderType, needsAgent, attachmentUrls);
         } catch (error) {
-          // Handle error silently
+          console.error('[AblyService] Error processing message', { error, message });
         }
       });
 
@@ -121,6 +167,7 @@ export class ClientAblyService {
       this.isConnected = false;
       this.sessionId = null;
     } catch (error) {
+      console.error('[AblyService] Error in stopConnection', { error });
       // Reset state even if there's an error
       this.isConnected = false;
       this.sessionId = null;

package/src/core/api.ts

@@ -238,7 +238,6 @@ export async function presignUpload(
 
   return await response.json();
 }
-
 export async function presignDownload(fileId: string, language: string): Promise<PresignDownloadResponse> {
   try {
     const response = await apiRequest(`NewFile/${fileId}/presign-download`, 'GET', null, {

package/src/lib/custom-hooks/useTypewriter.ts

@@ -4,21 +4,23 @@ export function useTypewriter(text: string, speed: number = 20, onType?: () => v
   const [displayedText, setDisplayedText] = useState('')
 
   useEffect(() => {
+    // Ensure text is always a string to prevent errors
+    const safeText = text ?? ''
     let index = 0
     setDisplayedText('')
 
     const interval = setInterval(() => {
       setDisplayedText(() => {
-        const next = text.slice(0, index + 1)
+        const next = safeText.slice(0, index + 1)
         index++
         if (onType) onType()
-        if (index >= text.length) clearInterval(interval)
+        if (index >= safeText.length) clearInterval(interval)
         return next
       })
     }, speed)
 
     return () => clearInterval(interval)
-  }, [text])
+  }, [text, onType])
 
   return displayedText
 }

package/src/lib/types.ts

@@ -27,7 +27,8 @@ export interface Message {
   messageContent: string;
   sentAt: Date;
   isSeen: boolean;
-  attachmentIds?: string[];
+  attachmentIds?: string[]; // For user-sent messages (file IDs)
+  attachmentUrls?: string[]; // For received messages from Ably (download URLs)
 }
 
 export interface ChatSession {

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

@@ -22,6 +22,7 @@ interface ChatWindowFooterProps {
   handleSendMessage: (attachmentIds: string[]) => void;
   isLoading: boolean;
   onEnsureSession: () => Promise<string>;
+  sessionId?: string | null; // Pass existing sessionId to avoid creating new sessions
 }
 
 const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
@@ -29,20 +30,19 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [selectedFiles, setSelectedFiles] = useState<SelectedFileDto[]>([]);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [isSending, setIsSending] = useState(false);
 
   const handleAttachClick = useCallback(() => {
     fileInputRef.current?.click();
   }, []);
 
-  const handleFileSelect = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileSelect = useCallback((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
+    // Create preview URLs and add to selected files (don't upload yet)
     const newFiles: SelectedFileDto[] = imageFiles.map((file) => ({
       file,
       previewUrl: URL.createObjectURL(file),
@@ -58,118 +58,150 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
       fileInputRef.current.value = '';
     }
 
-    // Start uploading immediately
-    await handleUploadFiles(newFiles);
+    // Don't upload files immediately - wait for send button click
   }, []);
 
-  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;
+  // Removed handleUploadFiles - files are now uploaded in handleSendMessageWithAttachments
+
+  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);
+    });
+  }, []);
 
-      // 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))
-          );
+  const handleSendMessageWithAttachments = useCallback(async () => {
+    // Prevent sending if already loading
+    if (props.isLoading || isSending) {
+      return;
+    }
 
-          // 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}`);
-          }
+    setIsSending(true);
 
-          // Update with uploaded ID
-          setSelectedFiles((prev) =>
-            prev.map((f) =>
-              f.previewUrl === fileDto.previewUrl
-                ? { ...f, uploading: false, uploadedId: presignResponse.id, error: null }
-                : f
-            )
-          );
+    try {
+      // Get files that need to be uploaded (those without uploadedId)
+      const filesToUpload = selectedFiles.filter((f) => f.uploadedId === null && !f.error);
+      const alreadyUploadedIds = selectedFiles.filter((f) => f.uploadedId !== null).map((f) => f.uploadedId as string);
+
+      // Declare uploadedIds outside the if block so it's accessible later
+      let uploadedIds: string[] = [];
+
+      // If there are files to upload, upload them first
+      if (filesToUpload.length > 0) {
+        // Get session ID - ensure session exists if needed (for image-only messages)
+        let sessionId: string | null = null;
+        try {
+          // Use existing sessionId if available, otherwise ensure session is created
+          if (props.sessionId) {
+            sessionId = props.sessionId;
+          } else {
+            // Ensure session exists before uploading files (allows starting chat with image only)
+            sessionId = await props.onEnsureSession();
+          }
         } catch (error) {
+          console.error('[ChatWindowFooter] Failed to get sessionId for file upload:', error);
+          // Mark all files as error
           setSelectedFiles((prev) =>
             prev.map((f) =>
-              f.previewUrl === fileDto.previewUrl
-                ? { ...f, uploading: false, error: 'Upload failed', uploadedId: null }
+              filesToUpload.some((ftl) => ftl.previewUrl === f.previewUrl)
+                ? { ...f, error: 'Failed to initialize session', uploading: false }
                 : f
             )
           );
+          setIsSending(false);
+          return;
         }
-      }
-    },
-    [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);
-    });
-  }, []);
+        // Upload each file and collect uploaded IDs
+        uploadedIds = [];
+        let hasUploadErrors = false;
 
-  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
-    }
+        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 all successfully uploaded file IDs
-    const attachmentIds = selectedFiles.filter((f) => f.uploadedId !== null).map((f) => f.uploadedId as string);
+            // Get presigned URL
+            const presignResponse = await presignUpload(sessionId, fileDto.file, i18n.language);
 
-    // Call the original send message with attachment IDs
-    props.handleSendMessage(attachmentIds);
+            // Upload file to presigned URL using axios
+            const uploadResponse = await axios.put(presignResponse.uploadUrl, fileDto.file, {
+              headers: {
+                'Content-Type': fileDto.file.type,
+              },
+              onUploadProgress: () => {
+                // Upload progress tracking (silent)
+              },
+            });
 
-    // Clear selected files and revoke URLs
-    selectedFiles.forEach((f) => URL.revokeObjectURL(f.previewUrl));
-    setSelectedFiles([]);
-  }, [selectedFiles, props]);
+            if (uploadResponse.status !== 200 && uploadResponse.status !== 204) {
+              throw new Error(`Upload failed with status ${uploadResponse.status}`);
+            }
+
+            // Collect uploaded ID
+            uploadedIds.push(presignResponse.id);
+
+            // Update with uploaded ID
+            setSelectedFiles((prev) =>
+              prev.map((f) =>
+                f.previewUrl === fileDto.previewUrl
+                  ? { ...f, uploading: false, uploadedId: presignResponse.id, error: null }
+                  : f
+              )
+            );
+          } catch (error) {
+            console.error('[ChatWindowFooter] File upload failed:', error);
+            hasUploadErrors = true;
+            setSelectedFiles((prev) =>
+              prev.map((f) =>
+                f.previewUrl === fileDto.previewUrl
+                  ? { ...f, uploading: false, error: 'Upload failed', uploadedId: null }
+                  : f
+              )
+            );
+          }
+        }
+
+        // If any uploads failed, don't send the message
+        if (hasUploadErrors) {
+          console.error('[ChatWindowFooter] Some files failed to upload, not sending message');
+          setIsSending(false);
+          return;
+        }
+      }
+
+      // Get all successfully uploaded file IDs (already uploaded + newly uploaded)
+      // Use uploadedIds from the upload loop instead of reading from state
+      const allAttachmentIds = [...alreadyUploadedIds, ...uploadedIds];
+
+      // Call the original send message with attachment IDs
+      props.handleSendMessage(allAttachmentIds);
+
+      // Clear selected files and revoke URLs
+      selectedFiles.forEach((f) => URL.revokeObjectURL(f.previewUrl));
+      setSelectedFiles([]);
+      setIsSending(false);
+    } catch (error) {
+      console.error('[ChatWindowFooter] Error sending message:', error);
+      setIsSending(false);
+    }
+  }, [selectedFiles, props, i18n.language, isSending]);
 
   // 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;
+  // Check if there are files with errors
+  const hasFileErrors = selectedFiles.some((f) => f.error !== null);
 
-  const isSendDisabled =
-    props.isLoading || props.inputMessage.trim() === '' || hasUploadingFiles || hasPendingFiles || allFilesHaveErrors;
+  // Allow sending if there's text OR files selected (files will be uploaded on send)
+  const hasContentToSend = props.inputMessage.trim() !== '' || selectedFiles.length > 0;
+  const isSendDisabled = props.isLoading || isSending || !hasContentToSend || hasUploadingFiles || hasFileErrors;
+  const showLoading = props.isLoading || isSending || hasUploadingFiles;
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
@@ -252,10 +284,16 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
           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'
+          className='babylai-rounded-full babylai-bg-primary-500 babylai-hover:babylai-bg-purple-600 babylai-w-8 babylai-h-8 !babylai-p-0 babylai-flex babylai-items-center babylai-justify-center disabled:babylai-opacity-50'
           type='button'
         >
-          <EnvelopeIcon className={`babylai-w-4 babylai-h-4 ${dir === 'rtl' ? 'babylai-rotate-270' : ''}`} />
+          {showLoading ? (
+            <div className='babylai-inline-block babylai-animate-spin babylai-rounded-full babylai-h-4 babylai-w-4 babylai-aspect-square babylai-border-2 babylai-border-white babylai-border-t-transparent babylai-box-border'></div>
+          ) : (
+            <EnvelopeIcon
+              className={`babylai-w-4 babylai-h-4 babylai-flex-shrink-0 ${dir === 'rtl' ? 'babylai-rotate-270' : ''}`}
+            />
+          )}
         </Button>
       </div>