@aslaluroba/help-center-react 3.2.3 → 3.2.4

package/package.json

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

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/ui/chatbot-popup/chat-window-screen/footer.tsx

@@ -30,6 +30,7 @@ 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();
@@ -74,119 +75,122 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
 
   const handleSendMessageWithAttachments = useCallback(async () => {
     // Prevent sending if already loading
-    if (props.isLoading) {
+    if (props.isLoading || isSending) {
       return;
     }
 
-    // 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 - only use existing, never create new one
-      let sessionId: string | null = null;
-      try {
-        // Only use existing sessionId, never call onEnsureSession
-        if (props.sessionId) {
-          sessionId = props.sessionId;
-        } else {
+    setIsSending(true);
+
+    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) =>
               filesToUpload.some((ftl) => ftl.previewUrl === f.previewUrl)
-                ? { ...f, error: 'No session available', uploading: false }
+                ? { ...f, error: 'Failed to initialize session', uploading: false }
                 : f
             )
           );
+          setIsSending(false);
           return;
         }
-      } catch (error) {
-        console.error('[ChatWindowFooter] Failed to get sessionId for file upload:', 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 and collect uploaded IDs
-      uploadedIds = [];
-      let hasUploadErrors = false;
 
-      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
-          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}`);
+        // Upload each file and collect uploaded IDs
+        uploadedIds = [];
+        let hasUploadErrors = false;
+
+        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
+            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}`);
+            }
+
+            // 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
+              )
+            );
           }
-
-          // 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');
-        return;
+        // 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];
+      // 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);
+      // 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([]);
-  }, [selectedFiles, props, i18n.language]);
+      // 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);
@@ -196,7 +200,8 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
 
   // 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 || !hasContentToSend || hasUploadingFiles || hasFileErrors;
+  const isSendDisabled = props.isLoading || isSending || !hasContentToSend || hasUploadingFiles || hasFileErrors;
+  const showLoading = props.isLoading || isSending || hasUploadingFiles;
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
@@ -279,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>
 

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

@@ -44,7 +44,7 @@ const MessageComponent = React.memo(
     const handleImageClick = useCallback(
       (clickedIndex: number) => {
         // Use attachmentUrls if available (from Ably), otherwise use attachmentIds (user-sent)
-        const attachments = message.attachmentUrls || message.attachmentIds || [];
+        const attachments = message.attachmentUrls || [];
         if (attachments.length > 0) {
           onImageClick(attachments, clickedIndex);
         }