@kodaris/krubble-app-components 1.0.90 → 1.0.92

package/dist/krubble-app.umd.js

@@ -685,6 +685,19 @@
        *
        * @param itemId - The unique identifier of the nav group to toggle
        */
+      /**
+       * Expand a nav group by id. Public so consumers can keep a group open after
+       * adding it dynamically — the scaffold only auto-expands groups once at startup,
+       * so a group added later (e.g. an async "Recent" list) would otherwise stay
+       * collapsed. Idempotent; a no-op if the group is already expanded.
+       */
+      expandNavGroup(groupId) {
+          if (this.navItemsExpanded.has(groupId)) {
+              return;
+          }
+          this.navItemsExpanded.add(groupId);
+          this.requestUpdate();
+      }
       toggleNavItem(itemId) {
           const navItem = this.shadowRoot?.querySelector(`.nav-item[data-id="${itemId}"]`);
           const groupEl = navItem?.nextElementSibling;
@@ -6693,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
@@ -6753,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) {
@@ -6815,16 +6842,37 @@
                               body: form,
                           })
                               .then((r) => r.json())
-                              .then((res) => res?.data?.conversationFileID);
-                      })).then((ids) => ids.filter((id) => typeof id === 'number'));
+                              // Keep the whole file DTO the upload returns (id + niceName +
+                              // mimeType + …), not just the id — it's attached to the sent message
+                              // below so the attachment shows immediately.
+                              .then((res) => res.data);
+                      }));
                   }
-                  return uploaded.then((fileIds) => {
+                  return uploaded.then((files) => {
+                      // 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;
+                              }
+                          }
+                      }
                       // Conversation targeting: continue `conversationId` when set, else
                       // start a fresh conversation (createNew) for this turn. The pin below
                       // means createNew only fires on the very first untargeted turn.
                       const body = {
                           userText: params.message,
-                          fileIds,
+                          fileIds: files.map((f) => f.conversationFileID),
                       };
                       if (this.conversationId != null) {
                           body.conversationID = this.conversationId;
@@ -7563,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>