@kodaris/krubble-app-components 1.0.91 → 1.0.93

package/dist/krubble-app.umd.js

@@ -6706,10 +6706,13 @@
       }
       /** Open the shared full-screen previewer for a message image. */
       _openImage(img) {
-          // Prefix the configured backend base URL — a raw fetch of a relative path
-          // would hit the page origin (e.g. the dev server), not the backend.
+          // Use the local preview if the upload hasn't finished yet; otherwise the
+          // backend view URL (prefixed with the base URL — a raw fetch of a relative
+          // path would hit the page origin, e.g. the dev server, not the backend).
+          const src = img.previewUrl
+              || `${krubbleHttp.Http.getBaseUrl()}/api/system/conversationFile/${img.conversationFileID}/view`;
           const preview = krubbleComponents.FilePreview.open({
-              src: `${krubbleHttp.Http.getBaseUrl()}/api/system/conversationFile/${img.conversationFileID}/view`,
+              src,
               name: img.niceName || 'image',
           });
           // The previewer's download button only fires a `download` event — the
@@ -6766,13 +6769,24 @@
               type: 'user',
               content: params.message,
           };
+          // Attach the staged files' local previews to the message so its thumbnails
+          // show INSTANTLY, without waiting on the upload. Each carries a temporary
+          // previewUrl (and conversationFileID -1 as a placeholder); the built-in send
+          // swaps these for the real server files once the upload returns.
+          if (this._pendingConversationFiles.length) {
+              userMessage.conversationFiles = this._pendingConversationFiles.map((p) => ({
+                  conversationFileID: -1,
+                  niceName: p.name,
+                  previewUrl: p.previewUrl,
+              }));
+          }
           this.messages = [...this.messages, userMessage];
           this._inputValue = '';
           this._saveState();
           this._error = '';
           this._userHasScrolledUp = false;
-          // Clear the composer and release its preview object URLs.
-          this._pendingConversationFiles.forEach((p) => URL.revokeObjectURL(p.previewUrl));
+          // Clear the composer, but DON'T revoke the preview object URLs — the sent
+          // message now renders them until the upload's real files replace them.
           this._pendingConversationFiles = [];
           // Reset textarea height
           if (this._inputEl) {
@@ -6835,12 +6849,18 @@
                       }));
                   }
                   return uploaded.then((files) => {
-                      // Attach the uploaded files to the just-sent user message so its
-                      // thumbnails show right away (no reload). The last user message is the
-                      // one _send appended before the trailing empty assistant message.
+                      // Replace the just-sent user message's local previews with the real
+                      // uploaded files (backed by the stored file's view URL). The last user
+                      // message is the one _send appended before the trailing empty assistant
+                      // message; revoke its now-defunct preview object URLs first.
                       if (files.length) {
                           for (let i = this.messages.length - 1; i >= 0; i--) {
                               if (this.messages[i].type === 'user') {
+                                  (this.messages[i].conversationFiles || []).forEach((f) => {
+                                      if (f.previewUrl) {
+                                          URL.revokeObjectURL(f.previewUrl);
+                                      }
+                                  });
                                   this.messages[i].conversationFiles = files;
                                   this.requestUpdate();
                                   break;
@@ -7591,7 +7611,7 @@
                         @click=${() => this._openImage(img)}
                       >
                         <img
-                          src="${krubbleHttp.Http.getBaseUrl()}/api/system/conversationFile/${img.conversationFileID}/view"
+                          src=${img.previewUrl || `${krubbleHttp.Http.getBaseUrl()}/api/system/conversationFile/${img.conversationFileID}/view`}
                           alt=${img.niceName || ''}
                         />
                       </button>