@aslaluroba/help-center-react 3.2.1 → 3.2.4

package/dist/index.esm.js

@@ -16245,10 +16245,19 @@ class ClientAblyService {
           token: ablyToken,
           autoConnect: true
         });
+        _this.client.connection.on('failed', stateChange => {
+          var _a;
+          console.error('[AblyService] Connection state: failed', {
+            reason: (_a = stateChange.reason) === null || _a === void 0 ? void 0 : _a.message,
+            error: stateChange.reason
+          });
+        });
         // Wait for connection to be established
         yield new Promise((resolve, reject) => {
           if (!_this.client) {
-            reject(new Error('Failed to initialize Ably client'));
+            var error = new Error('Failed to initialize Ably client');
+            console.error('[AblyService]', error);
+            reject(error);
             return;
           }
           _this.client.connection.once('connected', () => {
@@ -16257,23 +16266,38 @@ class ClientAblyService {
             resolve();
           });
           _this.client.connection.once('failed', stateChange => {
-            var _a;
-            reject(new Error("Ably connection failed: ".concat(((_a = stateChange.reason) === null || _a === void 0 ? void 0 : _a.message) || 'Unknown error')));
+            var _a, _b;
+            var error = new Error("Ably connection failed: ".concat(((_a = stateChange.reason) === null || _a === void 0 ? void 0 : _a.message) || 'Unknown error'));
+            console.error('[AblyService] Connection failed', {
+              reason: (_b = stateChange.reason) === null || _b === void 0 ? void 0 : _b.message,
+              error: stateChange.reason
+            });
+            reject(error);
           });
           _this.client.connection.once('disconnected', stateChange => {
-            var _a;
-            reject(new Error("Ably connection disconnected: ".concat(((_a = stateChange.reason) === null || _a === void 0 ? void 0 : _a.message) || 'Unknown error')));
+            var _a, _b;
+            var error = new Error("Ably connection disconnected: ".concat(((_a = stateChange.reason) === null || _a === void 0 ? void 0 : _a.message) || 'Unknown error'));
+            console.error('[AblyService] Connection disconnected', {
+              reason: (_b = stateChange.reason) === null || _b === void 0 ? void 0 : _b.message
+            });
+            reject(error);
           });
           // Set a timeout for connection
           setTimeout(() => {
             if (!_this.isConnected) {
-              reject(new Error('Ably connection timeout'));
+              var _error = new Error('Ably connection timeout');
+              console.error('[AblyService] Connection timeout after 10 seconds');
+              reject(_error);
             }
           }, 10000);
         });
         // Subscribe to the session room
         yield _this.joinChannel(sessionId, onMessageReceived, tenantId);
       } catch (error) {
+        console.error('[AblyService] Error in startConnection', {
+          error,
+          sessionId
+        });
         _this.isConnected = false;
         _this.sessionId = null;
         throw error;
@@ -16284,23 +16308,53 @@ class ClientAblyService {
     var _this2 = this;
     return _asyncToGenerator(function* () {
       if (!_this2.client) {
-        throw new Error('Chat client not initialized');
+        var error = new Error('Chat client not initialized');
+        console.error('[AblyService] joinChannel error:', error);
+        throw error;
       }
       var roomName = "session:".concat(tenantId, ":").concat(sessionId);
       // Set up raw channel subscription for server messages
       if (_this2.client) {
         _this2.channel = _this2.client.channels.get(roomName);
+        _this2.channel.on('failed', stateChange => {
+          var _a;
+          console.error('[AblyService] Channel failed', {
+            roomName,
+            reason: (_a = stateChange.reason) === null || _a === void 0 ? void 0 : _a.message,
+            error: stateChange.reason
+          });
+        });
         // Subscribe to assistant/system responses
         _this2.channel.subscribe('ReceiveMessage', message => {
-          var _a, _b, _c, _d, _e, _f;
+          var _a, _b, _c, _d, _e, _f, _g, _h;
           try {
-            var messageContent = typeof message.data === 'string' ? message.data : ((_a = message.data) === null || _a === void 0 ? void 0 : _a.content) || ((_b = message.data) === null || _b === void 0 ? void 0 : _b.message);
-            var senderType = ((_c = message.data) === null || _c === void 0 ? void 0 : _c.senderType) || 3; // Assistant
-            var needsAgent = ((_d = message.data) === null || _d === void 0 ? void 0 : _d.needsAgent) || ((_e = message.data) === null || _e === void 0 ? void 0 : _e.actionType) == "needs_agent" || false;
-            var attachments = ((_f = message.data) === null || _f === void 0 ? void 0 : _f.attachments) || [];
-            onMessageReceived(messageContent, senderType, needsAgent, attachments);
+            // Ensure messageContent is always a string (default to empty string if undefined)
+            var messageContent = typeof message.data === 'string' ? message.data : (_d = (_b = (_a = message.data) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : (_c = message.data) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : '';
+            var senderType = ((_e = message.data) === null || _e === void 0 ? void 0 : _e.senderType) || 3; // Assistant
+            var needsAgent = ((_f = message.data) === null || _f === void 0 ? void 0 : _f.needsAgent) || ((_g = message.data) === null || _g === void 0 ? void 0 : _g.actionType) == 'needs_agent' || false;
+            var attachments = ((_h = message.data) === null || _h === void 0 ? void 0 : _h.attachments) || [];
+            // Extract downloadUrl from attachments (Ably now returns downloadUrl directly)
+            // Attachments can be: strings (URLs), objects with downloadUrl, or objects with id
+            var attachmentUrls = attachments.map(attachment => {
+              if (typeof attachment === 'string') {
+                // If it's already a string, it's a URL
+                return attachment;
+              } else if (attachment === null || attachment === void 0 ? void 0 : attachment.downloadUrl) {
+                // If it's an object with downloadUrl, use that
+                return attachment.downloadUrl;
+              } else if (attachment === null || attachment === void 0 ? void 0 : 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 => url !== null);
+            onMessageReceived(messageContent, senderType, needsAgent, attachmentUrls);
           } catch (error) {
-            // Handle error silently
+            console.error('[AblyService] Error processing message', {
+              error,
+              message
+            });
           }
         });
         yield _this2.channel.attach();
@@ -16330,6 +16384,9 @@ class ClientAblyService {
         _this3.isConnected = false;
         _this3.sessionId = null;
       } catch (error) {
+        console.error('[AblyService] Error in stopConnection', {
+          error
+        });
         // Reset state even if there's an error
         _this3.isConnected = false;
         _this3.sessionId = null;
@@ -16482,19 +16539,21 @@ function useTypewriter(text) {
   var onType = arguments.length > 2 ? arguments[2] : undefined;
   var [displayedText, setDisplayedText] = useState('');
   useEffect(() => {
+    // Ensure text is always a string to prevent errors
+    var safeText = text !== null && text !== void 0 ? text : '';
     var index = 0;
     setDisplayedText('');
     var interval = setInterval(() => {
       setDisplayedText(() => {
-        var next = text.slice(0, index + 1);
+        var 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;
 }
 
@@ -34281,11 +34340,13 @@ var AgentResponse = _ref => {
     messageId,
     onType
   } = _ref;
+  // Ensure messageContent is always a string to prevent errors
+  var safeMessageContent = messageContent !== null && messageContent !== void 0 ? messageContent : '';
   var shouldAnimate = (senderType === 2 || senderType === 3) && !seenMessagesRef.has(messageId);
-  var animatedText = useTypewriter(messageContent, 20, onType);
-  var finalMessage = shouldAnimate ? animatedText : messageContent;
+  var animatedText = useTypewriter(safeMessageContent, 20, onType);
+  var finalMessage = shouldAnimate ? animatedText : safeMessageContent;
   // Mark message as "seen" after full animation
-  if (shouldAnimate && finalMessage === messageContent) {
+  if (shouldAnimate && finalMessage === safeMessageContent) {
     seenMessagesRef.add(messageId);
   }
   return jsx("div", {
@@ -34435,6 +34496,32 @@ var ImagePreviewDialog = _ref => {
       y: 0
     });
   }, []);
+  var handleDownload = useCallback(/*#__PURE__*/_asyncToGenerator(function* () {
+    if (!currentImageUrl) return;
+    try {
+      // Fetch the image as a blob
+      var response = yield fetch(currentImageUrl);
+      var blob = yield response.blob();
+      // Create a temporary URL for the blob
+      var blobUrl = URL.createObjectURL(blob);
+      // Extract filename from URL or use a default
+      var urlParts = currentImageUrl.split('/');
+      var filename = urlParts[urlParts.length - 1].split('?')[0] || 'image.png';
+      // Create a temporary anchor element and trigger download
+      var 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]);
   var handleClose = useCallback(() => {
     setZoomLevel(1);
     setImagePosition({
@@ -34635,6 +34722,27 @@ var ImagePreviewDialog = _ref => {
           "aria-label": 'Reset zoom',
           type: 'button',
           children: "Reset"
+        }), jsx("div", {
+          className: 'babylai-h-9 babylai-w-px babylai-bg-white/20 babylai-mx-1'
+        }), jsx(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',
+          children: jsx("svg", {
+            className: 'babylai-w-5 babylai-h-5',
+            fill: 'none',
+            stroke: 'currentColor',
+            viewBox: '0 0 24 24',
+            children: jsx("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'
+            })
+          })
         })]
       }), hasMultipleImages && jsx("div", {
         className: cn('babylai-absolute babylai-top-4 babylai-z-[60]', 'babylai-bg-black/50 babylai-backdrop-blur-sm babylai-rounded-lg babylai-px-4 babylai-py-2', dir === 'rtl' ? 'babylai-right-1/2 babylai-translate-x-1/2' : 'babylai-left-1/2 -babylai-translate-x-1/2'),
@@ -34668,6 +34776,7 @@ ImagePreviewDialog.displayName = 'ImagePreviewDialog';
 var ImageAttachment = _ref => {
   var {
     fileId,
+    imageUrl: propImageUrl,
     className,
     enablePreview = true,
     onClick
@@ -34675,30 +34784,39 @@ var ImageAttachment = _ref => {
   var {
     i18n
   } = useLocalTranslation();
-  var [imageUrl, setImageUrl] = useState(null);
-  var [loading, setLoading] = useState(true);
+  var [imageUrl, setImageUrl] = useState(propImageUrl || null);
+  var [loading, setLoading] = useState(!propImageUrl && !!fileId);
   var [error, setError] = useState(false);
   var [isPreviewOpen, setIsPreviewOpen] = useState(false);
   useEffect(() => {
-    var fetchImageUrl = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator(function* () {
-        try {
-          setLoading(true);
-          setError(false);
-          var response = yield presignDownload(fileId, i18n.language);
-          setImageUrl(response.downloadUrl);
-        } catch (err) {
-          setError(true);
-        } finally {
-          setLoading(false);
-        }
-      });
-      return function fetchImageUrl() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    fetchImageUrl();
-  }, [fileId, i18n.language]);
+    // 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) {
+      var fetchImageUrl = /*#__PURE__*/function () {
+        var _ref2 = _asyncToGenerator(function* () {
+          try {
+            setLoading(true);
+            setError(false);
+            var response = yield presignDownload(fileId, i18n.language);
+            setImageUrl(response.downloadUrl);
+          } catch (err) {
+            setError(true);
+          } finally {
+            setLoading(false);
+          }
+        });
+        return function fetchImageUrl() {
+          return _ref2.apply(this, arguments);
+        };
+      }();
+      fetchImageUrl();
+    }
+  }, [fileId, propImageUrl, i18n.language]);
   var handleImageClick = () => {
     if (onClick) {
       onClick();
@@ -38246,95 +38364,31 @@ var ChatWindowFooter = props => {
   var fileInputRef = useRef(null);
   var [selectedFiles, setSelectedFiles] = useState([]);
   var [previewImage, setPreviewImage] = useState(null);
+  var [isSending, setIsSending] = useState(false);
   var handleAttachClick = useCallback(() => {
     var _a;
     (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
   }, []);
-  var handleFileSelect = useCallback(/*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(function* (e) {
-      var files = Array.from(e.target.files || []);
-      // Validate that all files are images
-      var imageFiles = files.filter(file => file.type.startsWith('image/'));
-      // Only image files are allowed
-      // Create preview URLs and add to selected files
-      var newFiles = 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
-      yield handleUploadFiles(newFiles);
-    });
-    return function (_x) {
-      return _ref.apply(this, arguments);
-    };
-  }(), []);
-  var handleUploadFiles = useCallback(/*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(function* (filesToUpload) {
-      // Get session ID
-      var sessionId;
-      try {
-        sessionId = yield props.onEnsureSession();
-      } catch (error) {
-        // Mark all files as error
-        setSelectedFiles(prev => prev.map(f => filesToUpload.some(ftl => ftl.previewUrl === f.previewUrl) ? _objectSpread2(_objectSpread2({}, f), {}, {
-          error: 'Failed to initialize session',
-          uploading: false
-        }) : f));
-        return;
-      }
-      // Upload each file
-      var _loop = function* _loop(fileDto) {
-        try {
-          // Mark as uploading
-          setSelectedFiles(prev => prev.map(f => f.previewUrl === fileDto.previewUrl ? _objectSpread2(_objectSpread2({}, f), {}, {
-            uploading: true,
-            error: null
-          }) : f));
-          // Get presigned URL
-          var presignResponse = yield 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'
-          var uploadResponse = yield axios$1.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 ".concat(uploadResponse.status));
-          }
-          // Update with uploaded ID
-          setSelectedFiles(prev => prev.map(f => f.previewUrl === fileDto.previewUrl ? _objectSpread2(_objectSpread2({}, f), {}, {
-            uploading: false,
-            uploadedId: presignResponse.id,
-            error: null
-          }) : f));
-        } catch (error) {
-          setSelectedFiles(prev => prev.map(f => f.previewUrl === fileDto.previewUrl ? _objectSpread2(_objectSpread2({}, f), {}, {
-            uploading: false,
-            error: 'Upload failed',
-            uploadedId: null
-          }) : f));
-        }
-      };
-      for (var fileDto of filesToUpload) {
-        yield* _loop(fileDto);
-      }
-    });
-    return function (_x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), [props.onEnsureSession, i18n.language]);
+  var handleFileSelect = useCallback(e => {
+    var files = Array.from(e.target.files || []);
+    // Validate that all files are images
+    var imageFiles = files.filter(file => file.type.startsWith('image/'));
+    // Create preview URLs and add to selected files (don't upload yet)
+    var newFiles = 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 = '';
+    }
+    // Don't upload files immediately - wait for send button click
+  }, []);
+  // Removed handleUploadFiles - files are now uploaded in handleSendMessageWithAttachments
   var handleRemoveFile = useCallback(previewUrl => {
     setSelectedFiles(prev => {
       var fileToRemove = prev.find(f => f.previewUrl === previewUrl);
@@ -38344,29 +38398,114 @@ var ChatWindowFooter = props => {
       return prev.filter(f => f.previewUrl !== previewUrl);
     });
   }, []);
-  var handleSendMessageWithAttachments = useCallback(() => {
-    // Only allow sending if all files have finished uploading (either successfully or with error)
-    var hasUploadingFiles = selectedFiles.some(f => f.uploading);
-    if (hasUploadingFiles) {
-      return; // Prevent sending if any files are still uploading
-    }
-    // Get all successfully uploaded file IDs
-    var attachmentIds = selectedFiles.filter(f => f.uploadedId !== null).map(f => f.uploadedId);
-    // 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]);
+  var handleSendMessageWithAttachments = useCallback(/*#__PURE__*/_asyncToGenerator(function* () {
+    // Prevent sending if already loading
+    if (props.isLoading || isSending) {
+      return;
+    }
+    setIsSending(true);
+    try {
+      // Get files that need to be uploaded (those without uploadedId)
+      var filesToUpload = selectedFiles.filter(f => f.uploadedId === null && !f.error);
+      var alreadyUploadedIds = selectedFiles.filter(f => f.uploadedId !== null).map(f => f.uploadedId);
+      // Declare uploadedIds outside the if block so it's accessible later
+      var uploadedIds = [];
+      // 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)
+        var sessionId = 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 = yield 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) ? _objectSpread2(_objectSpread2({}, f), {}, {
+            error: 'Failed to initialize session',
+            uploading: false
+          }) : f));
+          setIsSending(false);
+          return;
+        }
+        // Upload each file and collect uploaded IDs
+        uploadedIds = [];
+        var hasUploadErrors = false;
+        var _loop = function* _loop(fileDto) {
+          try {
+            // Mark as uploading
+            setSelectedFiles(prev => prev.map(f => f.previewUrl === fileDto.previewUrl ? _objectSpread2(_objectSpread2({}, f), {}, {
+              uploading: true,
+              error: null
+            }) : f));
+            // Get presigned URL
+            var presignResponse = yield presignUpload(sessionId, fileDto.file, i18n.language);
+            // Upload file to presigned URL using axios
+            var uploadResponse = yield axios$1.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 ".concat(uploadResponse.status));
+            }
+            // Collect uploaded ID
+            uploadedIds.push(presignResponse.id);
+            // Update with uploaded ID
+            setSelectedFiles(prev => prev.map(f => f.previewUrl === fileDto.previewUrl ? _objectSpread2(_objectSpread2({}, 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 ? _objectSpread2(_objectSpread2({}, f), {}, {
+              uploading: false,
+              error: 'Upload failed',
+              uploadedId: null
+            }) : f));
+          }
+        };
+        for (var fileDto of filesToUpload) {
+          yield* _loop(fileDto);
+        }
+        // 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
+      var 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
   var 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
-  var hasPendingFiles = selectedFiles.some(f => !f.uploading && f.uploadedId === null && f.error === null);
-  // Check if all files have errors (no successful uploads)
-  var hasSuccessfulUploads = selectedFiles.some(f => f.uploadedId !== null);
-  var allFilesHaveErrors = selectedFiles.length > 0 && !hasSuccessfulUploads && !hasUploadingFiles && !hasPendingFiles;
-  var isSendDisabled = props.isLoading || props.inputMessage.trim() === '' || hasUploadingFiles || hasPendingFiles || allFilesHaveErrors;
+  // Check if there are files with errors
+  var hasFileErrors = selectedFiles.some(f => f.error !== null);
+  // Allow sending if there's text OR files selected (files will be uploaded on send)
+  var hasContentToSend = props.inputMessage.trim() !== '' || selectedFiles.length > 0;
+  var isSendDisabled = props.isLoading || isSending || !hasContentToSend || hasUploadingFiles || hasFileErrors;
+  var showLoading = props.isLoading || isSending || hasUploadingFiles;
   var handleKeyDown = useCallback(e => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
@@ -38440,10 +38579,12 @@ var ChatWindowFooter = 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',
-        children: jsx(EnvelopeIcon, {
-          className: "babylai-w-4 babylai-h-4 ".concat(dir === 'rtl' ? 'babylai-rotate-270' : '')
+        children: showLoading ? jsx("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'
+        }) : jsx(EnvelopeIcon, {
+          className: "babylai-w-4 babylai-h-4 babylai-flex-shrink-0 ".concat(dir === 'rtl' ? 'babylai-rotate-270' : '')
         })
       })]
     }), previewImage && jsx(ImagePreviewDialog, {
@@ -38531,10 +38672,12 @@ var MessageComponent = /*#__PURE__*/React__default.memo(_ref => {
   var isFirstHumanAgentMessage = index === firstHumanAgentIndex && message.senderType === 2;
   var textDirection = message.senderType === 1 ? 'babylai-justify-end' : 'babylai-justify-start';
   var handleImageClick = useCallback(clickedIndex => {
-    if (message.attachmentIds && message.attachmentIds.length > 0) {
-      onImageClick(message.attachmentIds, clickedIndex);
+    // Use attachmentUrls if available (from Ably), otherwise use attachmentIds (user-sent)
+    var attachments = message.attachmentUrls || [];
+    if (attachments.length > 0) {
+      onImageClick(attachments, clickedIndex);
     }
-  }, [message.attachmentIds, onImageClick]);
+  }, [message.attachmentIds, message.attachmentUrls, onImageClick]);
   return jsxs("div", {
     children: [isFirstHumanAgentMessage && jsx("div", {
       className: 'babylai-flex babylai-justify-center babylai-items-center babylai-my-4',
@@ -38557,14 +38700,21 @@ var MessageComponent = /*#__PURE__*/React__default.memo(_ref => {
         className: 'babylai-flex-shrink-0 babylai-me-3 babylai-w-8'
       }), jsxs("div", {
         className: 'babylai-flex babylai-flex-col babylai-gap-2',
-        children: [message.attachmentIds && message.attachmentIds.length > 0 && jsx("div", {
+        children: [message.attachmentUrls && message.attachmentUrls.length > 0 && jsx("div", {
+          className: 'babylai-flex babylai-flex-row babylai-flex-wrap babylai-gap-2 babylai-max-w-full',
+          children: message.attachmentUrls.map((attachmentUrl, imgIndex) => jsx(ImageAttachment, {
+            imageUrl: attachmentUrl,
+            enablePreview: false,
+            onClick: () => handleImageClick(imgIndex)
+          }, attachmentUrl))
+        }), message.attachmentIds && message.attachmentIds.length > 0 && jsx("div", {
           className: 'babylai-flex babylai-flex-row babylai-flex-wrap babylai-gap-2 babylai-max-w-full',
           children: message.attachmentIds.map((attachmentId, imgIndex) => jsx(ImageAttachment, {
             fileId: attachmentId,
             enablePreview: false,
             onClick: () => handleImageClick(imgIndex)
           }, attachmentId))
-        }), jsx(AgentResponse$1, {
+        }), message.messageContent && message.messageContent.trim() !== '' && jsx(AgentResponse$1, {
           messageContent: message.messageContent,
           senderType: message.senderType,
           messageId: message.id,
@@ -38609,7 +38759,8 @@ var ChatWindow = /*#__PURE__*/React__default.memo(_ref3 => {
     onEnsureSession,
     messages,
     assistantStatus = 'loading',
-    needsAgent
+    needsAgent,
+    sessionId
   } = _ref3;
   var {
     i18n
@@ -38652,7 +38803,8 @@ var ChatWindow = /*#__PURE__*/React__default.memo(_ref3 => {
     };
   }, []);
   var handleSendMessage = useCallback(attachmentIds => {
-    if (inputMessage.trim()) {
+    // Allow sending if there's text OR attachments
+    if (inputMessage.trim() || attachmentIds.length > 0) {
       onSendMessage(inputMessage, attachmentIds);
       setInputMessage('');
     }
@@ -38663,13 +38815,32 @@ var ChatWindow = /*#__PURE__*/React__default.memo(_ref3 => {
   }, [messages]);
   // Handle image gallery opening
   var handleImageClick = useCallback(/*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator(function* (attachmentIds, clickedIndex) {
-      if (!attachmentIds || attachmentIds.length === 0) {
+    var _ref4 = _asyncToGenerator(function* (attachmentIdsOrUrls, clickedIndex) {
+      var _a, _b;
+      if (!attachmentIdsOrUrls || attachmentIdsOrUrls.length === 0) {
         return;
       }
       try {
-        // Fetch all image URLs with comprehensive error handling
-        var 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
+        var isUrl = ((_a = attachmentIdsOrUrls[0]) === null || _a === void 0 ? void 0 : _a.startsWith('http://')) || ((_b = attachmentIdsOrUrls[0]) === null || _b === void 0 ? void 0 : _b.startsWith('https://'));
+        var imageUrls;
+        if (isUrl) {
+          // These are already URLs from Ably, use them directly (no async needed)
+          imageUrls = attachmentIdsOrUrls.filter(url => url !== null && url.length > 0);
+          // Open gallery immediately with URLs
+          if (imageUrls.length > 0) {
+            var _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
+        var imageUrlPromises = attachmentIdsOrUrls.map(fileId => {
           if (!fileId || typeof fileId !== 'string') {
             return Promise.resolve(null);
           }
@@ -38683,7 +38854,7 @@ var ChatWindow = /*#__PURE__*/React__default.memo(_ref3 => {
             return null;
           });
         });
-        var imageUrls = (yield Promise.all(imageUrlPromises)).filter(url => url !== null && url.length > 0);
+        imageUrls = (yield Promise.all(imageUrlPromises)).filter(url => url !== null && url.length > 0);
         if (imageUrls.length === 0) {
           return;
         }
@@ -38745,7 +38916,8 @@ var ChatWindow = /*#__PURE__*/React__default.memo(_ref3 => {
       handleSendMessage: handleSendMessage,
       setInputMessage: setInputMessage,
       isLoading: isLoading,
-      onEnsureSession: onEnsureSession
+      onEnsureSession: onEnsureSession,
+      sessionId: sessionId
     }), galleryState.isOpen && galleryState.imageUrls.length > 0 && jsx(ImagePreviewDialog, {
       imageUrls: galleryState.imageUrls,
       initialIndex: galleryState.initialIndex,
@@ -39364,7 +39536,8 @@ var HelpPopup = _ref => {
     }
   }, [onStartChat, setSelectedOption, sessionId, setStartNewChatConfirmation, setTempSelectedOption]);
   var handleSendMessage = useCallback((message, attachmentIds) => {
-    if (message.trim()) {
+    // Allow sending if there's text OR attachments
+    if (message.trim() || attachmentIds.length > 0) {
       onSendMessage(message.trim(), attachmentIds);
     }
   }, [onSendMessage]);
@@ -39420,7 +39593,8 @@ var HelpPopup = _ref => {
           messages: memoizedMessages,
           assistantStatus: assistantStatus,
           needsAgent: needsAgent,
-          isAblyConnected: isAblyConnected
+          isAblyConnected: isAblyConnected,
+          sessionId: sessionId
         })]
       });
     }
@@ -39559,7 +39733,7 @@ var HelpCenterContent = _ref => {
         sentAt: new Date(),
         isSeen: true
       }, attachments.length > 0 && {
-        attachmentIds: attachments
+        attachmentUrls: attachments
       });
       return [...prevMessages, newMessage];
     });
@@ -39688,10 +39862,11 @@ var HelpCenterContent = _ref => {
   var handleEnsureSession = /*#__PURE__*/function () {
     var _ref7 = _asyncToGenerator(function* () {
       // 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) {
         var newSessionId = yield startNewChatSession(selectedOption);
         return newSessionId;
@@ -39705,28 +39880,32 @@ var HelpCenterContent = _ref => {
   var handleSendMessage = /*#__PURE__*/function () {
     var _ref8 = _asyncToGenerator(function* (message) {
       var attachmentIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-      if (message.trim() !== '') {
+      // Allow sending if there's text OR attachments
+      if (message.trim() !== '' || attachmentIds.length > 0) {
         try {
           setAssistantStatus('typing');
           var userMessage = {
             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
           };
           setMessages(prevMessages => [...prevMessages, userMessage]);
-          // Handle session creation if needed
+          // Handle session creation if needed - only create if no session exists
           var 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 = yield startNewChatSession(selectedOption);
           }
           if (!currentSessionId) {
             throw new Error('No active session available');
           }
           var messageDto = _objectSpread2({
-            messageContent: message
+            messageContent: message || ''
           }, attachmentIds.length > 0 && {
             attachmentIds
           });