@kodaris/krubble-app-components 1.0.87 → 1.0.89

package/dist/krubble-app.bundled.js

@@ -5859,31 +5859,42 @@ let KRChatbot = class KRChatbot extends i$3 {
     // --- 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 KRHttp.fetch({
-                    url: `/api/system/conversation/${this.conversationId}/messages`,
-                })
+                return KRHttp.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) => KRHttp.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) => {
@@ -6678,10 +6689,18 @@ let KRChatbot = class KRChatbot extends i$3 {
     }
     /** Open the shared full-screen previewer for a message image. */
     _openImage(img) {
-        KRFilePreview.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 = KRFilePreview.open({
+            src: `${KRHttp.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(`${KRHttp.getBaseUrl()}/api/system/conversationFile/${img.conversationFileID}/view?download=true`, '_blank');
+        });
     }
     /** Whether the send button is active: needs text or at least one image. */
     _canSend() {
@@ -7530,7 +7549,7 @@ let KRChatbot = class KRChatbot extends i$3 {
                         @click=${() => this._openImage(img)}
                       >
                         <img
-                          src="/api/system/conversationFile/${img.conversationFileID}/view"
+                          src="${KRHttp.getBaseUrl()}/api/system/conversationFile/${img.conversationFileID}/view"
                           alt=${img.niceName || ''}
                         />
                       </button>
@@ -7554,7 +7573,7 @@ let KRChatbot = class KRChatbot extends i$3 {
                 ${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 `
@@ -7568,7 +7587,6 @@ let KRChatbot = class KRChatbot extends i$3 {
                       >
                         <path d="M20 6 9 17l-5-5" />
                       </svg>
-                      Copied
                     ` : b `
                       <svg
                         viewBox="0 0 24 24"
@@ -7587,7 +7605,6 @@ let KRChatbot = class KRChatbot extends i$3 {
                         />
                         <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}
@@ -7954,7 +7971,7 @@ KRChatbot.styles = i$6 `
       flex: 1;
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: 36px;
       padding: 32px;
       width: 100%;
       max-width: 768px;
@@ -7983,6 +8000,17 @@ KRChatbot.styles = i$6 `
       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 {
@@ -8031,43 +8059,41 @@ KRChatbot.styles = i$6 `
       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 {
@@ -8641,6 +8667,7 @@ KRChatbot.styles = i$6 `
 
     .message--user .attachments {
       justify-content: flex-end;
+      margin-bottom: 24px;
     }
 
     .attachment {