@kodaris/krubble-app-components 1.0.87 → 1.0.89

package/dist/krubble-app.umd.js

@@ -5862,31 +5862,42 @@
       // --- Lifecycle ---
       connectedCallback() {
           super.connectedCallback();
-          // Default to loading a specific conversation's messages when the consumer
-          // hasn't provided their own `load`. With `conversationId` set we rebuild that
-          // conversation from `/conversation/{id}/messages`; with none set there's
-          // nothing to resume, so start empty. Rows already match KRChatbotMessage
-          // ({ type, content }); we only parse each row's `conversationFileIDs` (a JSON
-          // array string of ids) into the `conversationFiles` the render iterates.
+          // Default to loading a conversation's messages when the consumer hasn't
+          // provided their own `load`. With `conversationId` set we rebuild that
+          // conversation; with none set the user wants a NEW conversation, so we start
+          // blank (no resume — the first message creates one via `send`). Rows already
+          // match KRChatbotMessage ({ type, content }); we only parse each row's
+          // `conversationFileIDs` (a JSON array string of ids) into `conversationFiles`.
           if (!this.load) {
               this.load = () => {
                   if (this.conversationId == null) {
                       return Promise.resolve([]);
                   }
-                  return krubbleHttp.Http.fetch({
-                      url: `/api/system/conversation/${this.conversationId}/messages`,
-                  })
+                  return krubbleHttp.Http.fetch({ url: `/api/system/conversation/${this.conversationId}/messages` })
                       .then((r) => r.json())
-                      .then((res) => (res?.data || []).map((msg) => {
+                      .then((res) => Promise.all((res?.data || []).map((msg) => {
+                      // Resolve this message's `conversationFileIDs` (a JSON array string of
+                      // ids) into full file objects — each fetch response IS the
+                      // KRChatbotConversationFile (id + niceName + mimeType), and niceName
+                      // drives the previewer's file-type detection. A failed fetch drops
+                      // that file rather than rendering a broken thumbnail.
+                      let ids = [];
                       try {
-                          const ids = JSON.parse(msg.conversationFileIDs || '[]');
-                          if (ids.length) {
-                              msg.conversationFiles = ids.map((id) => ({ conversationFileID: id }));
-                          }
+                          ids = JSON.parse(msg.conversationFileIDs || '[]');
                       }
                       catch { /* no/invalid attachments — leave empty */ }
-                      return msg;
-                  }));
+                      if (!ids.length) {
+                          return Promise.resolve(msg);
+                      }
+                      return Promise.all(ids.map((id) => krubbleHttp.Http.fetch({ url: `/api/system/conversationFile/${id}` })
+                          .then((r) => r.json())
+                          .then((meta) => meta?.data)
+                          .catch(() => null)))
+                          .then((files) => {
+                          msg.conversationFiles = files.filter((f) => f != null);
+                          return msg;
+                      });
+                  })));
               };
           }
           this.load().then((messages) => {
@@ -6681,10 +6692,18 @@
       }
       /** Open the shared full-screen previewer for a message image. */
       _openImage(img) {
-          krubbleComponents.FilePreview.open({
-              src: `/api/system/conversationFile/${img.conversationFileID}/view`,
+          // 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.
+          const preview = krubbleComponents.FilePreview.open({
+              src: `${krubbleHttp.Http.getBaseUrl()}/api/system/conversationFile/${img.conversationFileID}/view`,
               name: img.niceName || 'image',
           });
+          // The previewer's download button only fires a `download` event — the
+          // consumer performs the actual download. Hit the view endpoint with
+          // `?download=true` (Content-Disposition: attachment) in a new tab.
+          preview.addEventListener('download', () => {
+              window.open(`${krubbleHttp.Http.getBaseUrl()}/api/system/conversationFile/${img.conversationFileID}/view?download=true`, '_blank');
+          });
       }
       /** Whether the send button is active: needs text or at least one image. */
       _canSend() {
@@ -7533,7 +7552,7 @@
                         @click=${() => this._openImage(img)}
                       >
                         <img
-                          src="/api/system/conversationFile/${img.conversationFileID}/view"
+                          src="${krubbleHttp.Http.getBaseUrl()}/api/system/conversationFile/${img.conversationFileID}/view"
                           alt=${img.niceName || ''}
                         />
                       </button>
@@ -7557,7 +7576,7 @@
                 ${msg.content ? b `
                   <button
                     class="message-copy"
-                    title="Copy"
+                    title=${this._copiedIndex === index ? 'Copied' : 'Copy'}
                     @click=${() => this._handleCopyMessage(msg.content, index)}
                   >
                     ${this._copiedIndex === index ? b `
@@ -7571,7 +7590,6 @@
                       >
                         <path d="M20 6 9 17l-5-5" />
                       </svg>
-                      Copied
                     ` : b `
                       <svg
                         viewBox="0 0 24 24"
@@ -7590,7 +7608,6 @@
                         />
                         <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
                       </svg>
-                      Copy
                     `}
                   </button>
                 ` : A}
@@ -7957,7 +7974,7 @@
       flex: 1;
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: 36px;
       padding: 32px;
       width: 100%;
       max-width: 768px;
@@ -7986,6 +8003,17 @@
       flex-direction: column;
       max-width: 100%;
       animation: chatbot-msg-in 0.3s ease-out;
+      /* Reserve room for the copy button INSIDE the message box (so the button is
+         part of the message's hover region — no dead zone to cross), then cancel
+         that space for layout so message spacing is unchanged. */
+      padding-bottom: 30px;
+      margin-bottom: -30px;
+    }
+
+    /* The reserved padding overhangs into the next message; lift the hovered one
+       so its copy button isn't covered by (or stealing hover from) the sibling. */
+    .message:hover {
+      z-index: 1;
     }
 
     @keyframes chatbot-msg-in {
@@ -8034,43 +8062,41 @@
       color: #b45309;
     }
 
-    /* Per-message copy button. Kept in flow with a fixed height that is always
-       reserved (via a negative bottom margin that cancels it) so message spacing
-       is identical whether or not it's shown; only its opacity toggles on hover. */
+    /* Per-message copy button. Sits in the message's reserved bottom padding —
+       inside the hover box, so moving the cursor down onto it never leaves the
+       message. Height is reserved (via the message padding) so spacing doesn't
+       jump; only opacity toggles on hover. */
     .message-copy {
-      align-self: flex-start;
-      margin-top: 4px;
-      margin-bottom: -27px;
+      position: absolute;
+      bottom: 0;
+      left: 0;
       display: inline-flex;
       align-items: center;
-      gap: 4px;
-      height: 23px;
-      padding: 4px 8px;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      padding: 0;
       background: none;
       border: none;
       border-radius: 6px;
-      font: inherit;
-      font-size: 12px;
-      color: #64668b;
+      color: #000000;
       cursor: pointer;
       opacity: 0;
-      pointer-events: none;
       transition: opacity 0.15s, background-color 0.15s, color 0.15s;
     }
 
     .message--user .message-copy {
-      align-self: flex-end;
+      left: auto;
+      right: 0;
     }
 
     .message:hover .message-copy,
     .message-copy:focus-visible {
       opacity: 1;
-      pointer-events: auto;
     }
 
     .message-copy:hover {
       background: rgba(0, 0, 0, 0.06);
-      color: #1a1a2e;
     }
 
     .message-copy svg {
@@ -8644,6 +8670,7 @@
 
     .message--user .attachments {
       justify-content: flex-end;
+      margin-bottom: 24px;
     }
 
     .attachment {