@kodaris/krubble-app-components 1.0.84 → 1.0.86

package/dist/krubble-app.umd.js

@@ -5642,14 +5642,6 @@
            * from the Kodaris Bedrock conversation endpoints. Set this to override.
            */
           this.send = null;
-          /**
-           * Callback function called when the user clears the conversation.
-           * Must return a Promise — messages are only cleared if it resolves.
-           *
-           * Optional — when not set, the chatbot uses its built-in default that clears
-           * the Kodaris Bedrock conversation state. Set this to override.
-           */
-          this.clear = null;
           /**
            * Callback function called on init to load existing conversation messages.
            * Must return a Promise that resolves with an array of KRChatbotMessage.
@@ -5692,6 +5684,20 @@
            *   full page or panel region.
            */
           this.variant = 'floating';
+          /**
+           * The conversation this chatbot's turns target (backend `conversationID`).
+           *
+           * - Set → every turn is sent with this `conversationID`, so the chat continues
+           *   that specific conversation.
+           * - Unset → the first turn is sent with `createNew: true` (a fresh
+           *   conversation); the component then resolves the new conversation's id (via
+           *   `/conversation/last`) and pins it here so the rest of the session stays one
+           *   conversation instead of spawning a new one per message.
+           *
+           * Only used by the built-in `send` default; a custom `send` owns its own
+           * targeting.
+           */
+          this.conversationId = null;
           // --- @state (internal) ---
           this._inputValue = '';
           this._isStreaming = false;
@@ -5730,7 +5736,7 @@
           /** True while the user is dragging the debug drawer's resize handle. */
           this._isDebugResizing = false;
           /** Images staged in the composer, before the message is sent. */
-          this._pendingInternalFiles = [];
+          this._pendingConversationFiles = [];
           /** True while a file is being dragged over the panel (shows the drop overlay). */
           this._isDraggingFile = false;
           /** Whether the `/` skill menu is open above the composer. */
@@ -5900,7 +5906,7 @@
           document.removeEventListener('mousemove', this._handleMouseMove);
           document.removeEventListener('mouseup', this._handleMouseUp);
           // Release any object URLs still held by staged attachments.
-          this._pendingInternalFiles.forEach((p) => URL.revokeObjectURL(p.previewUrl));
+          this._pendingConversationFiles.forEach((p) => URL.revokeObjectURL(p.previewUrl));
       }
       updated(changed) {
           if (changed.has('messages')) {
@@ -6233,7 +6239,7 @@
               this._skillMenuOpened = false;
               this._send({
                   message: '/test-context-warning',
-                  internalFiles: [],
+                  conversationFiles: [],
               });
               return;
           }
@@ -6241,7 +6247,7 @@
               this._skillMenuOpened = false;
               this._send({
                   message: '/test-context-limit',
-                  internalFiles: [],
+                  conversationFiles: [],
               });
               return;
           }
@@ -6558,6 +6564,10 @@
       }
       // --- Attachments ---
       _openFilePicker() {
+          // Close the skill/attachment menu — opening the OS file picker is the end of
+          // the menu interaction, and the picker is a separate window so the menu would
+          // otherwise linger open behind it (and after a file is chosen).
+          this._skillMenuOpened = false;
           this._fileInputEl?.click();
       }
       _handleFileInputChange(e) {
@@ -6639,49 +6649,49 @@
                   name: file.name,
                   previewUrl: URL.createObjectURL(file),
               };
-              this._pendingInternalFiles = [...this._pendingInternalFiles, pending];
+              this._pendingConversationFiles = [...this._pendingConversationFiles, pending];
           });
       }
       _removePending(localId) {
-          const target = this._pendingInternalFiles.find((p) => p.localId === localId);
+          const target = this._pendingConversationFiles.find((p) => p.localId === localId);
           if (target) {
               URL.revokeObjectURL(target.previewUrl);
           }
-          this._pendingInternalFiles = this._pendingInternalFiles.filter((p) => p.localId !== localId);
+          this._pendingConversationFiles = this._pendingConversationFiles.filter((p) => p.localId !== localId);
       }
       _clearPending() {
-          this._pendingInternalFiles.forEach((p) => URL.revokeObjectURL(p.previewUrl));
-          this._pendingInternalFiles = [];
+          this._pendingConversationFiles.forEach((p) => URL.revokeObjectURL(p.previewUrl));
+          this._pendingConversationFiles = [];
       }
       /** Open the shared full-screen previewer for a message image. */
       _openImage(img) {
           krubbleComponents.FilePreview.open({
-              src: `/api/system/integration/aws/bedrock/conversationImage/${img.internalFileID}/view`,
+              src: `/api/system/conversationFile/${img.conversationFileID}/view`,
               name: img.niceName || 'image',
           });
       }
       /** Whether the send button is active: needs text or at least one image. */
       _canSend() {
-          return Boolean(this._inputValue.trim()) || this._pendingInternalFiles.length > 0;
+          return Boolean(this._inputValue.trim()) || this._pendingConversationFiles.length > 0;
       }
       _handleSubmit() {
           if (this._isStreaming) {
               return;
           }
           const messageText = this._inputValue.trim();
-          const pending = this._pendingInternalFiles;
+          const pending = this._pendingConversationFiles;
           // Allow sending an image with no text, but require at least one of them.
           if (!messageText && !pending.length) {
               return;
           }
           // The raw files sent to the backend. Sent images are shown once the
-          // conversation reloads and they come back as stored internal files; the
+          // conversation reloads and they come back as stored conversation files; the
           // just-sent message itself carries text only.
-          const internalFiles = pending.map((p) => p.file);
+          const conversationFiles = pending.map((p) => p.file);
           const submitEvent = new CustomEvent('message-submit', {
               detail: {
                   message: messageText,
-                  internalFiles,
+                  conversationFiles,
               },
               bubbles: true,
               composed: true,
@@ -6693,7 +6703,7 @@
           }
           this._send({
               message: messageText,
-              internalFiles
+              conversationFiles
           });
       }
       /**
@@ -6713,8 +6723,8 @@
           this._error = '';
           this._userHasScrolledUp = false;
           // Clear the composer and release its preview object URLs.
-          this._pendingInternalFiles.forEach((p) => URL.revokeObjectURL(p.previewUrl));
-          this._pendingInternalFiles = [];
+          this._pendingConversationFiles.forEach((p) => URL.revokeObjectURL(p.previewUrl));
+          this._pendingConversationFiles = [];
           // Reset textarea height
           if (this._inputEl) {
               this._inputEl.style.height = 'auto';
@@ -6750,30 +6760,74 @@
           // the consumer hasn't provided their own `send`.
           if (!this.send) {
               this.send = (params) => {
-                  // With images, post text + files as multipart; without, post plain JSON.
-                  if (params.internalFiles.length) {
-                      const form = new FormData();
-                      form.append('userText', params.message);
-                      params.internalFiles.forEach((file) => form.append('images', file));
+                  // Images are upload-first: each file is stored as a conversation file
+                  // (type LIBRARY — the format lives in mimeType), then the resulting
+                  // conversationFileIDs are attached to the message via `fileIds` on the
+                  // normal JSON stream call. There is no multipart chat endpoint. With no
+                  // images the upload resolves to an empty list immediately; a failed
+                  // upload is dropped so an undefined id never reaches `fileIds`.
+                  let uploaded = Promise.resolve([]);
+                  if (params.conversationFiles.length) {
+                      uploaded = Promise.all(params.conversationFiles.map((file) => {
+                          const form = new FormData();
+                          form.append('file', file);
+                          form.append('type', 'LIBRARY');
+                          form.append('niceName', file.name);
+                          return krubbleHttp.Http.fetch({
+                              url: '/api/system/conversationFile/upload',
+                              method: 'POST',
+                              body: form,
+                          })
+                              .then((r) => r.json())
+                              .then((res) => res?.data?.conversationFileID);
+                      })).then((ids) => ids.filter((id) => typeof id === 'number'));
+                  }
+                  return uploaded.then((fileIds) => {
+                      // 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,
+                      };
+                      if (this.conversationId != null) {
+                          body.conversationID = this.conversationId;
+                      }
+                      else {
+                          body.createNew = true;
+                      }
                       return krubbleHttp.Http.fetch({
-                          url: '/api/system/integration/aws/bedrock/stream/invokeModelForConversationWithImages',
+                          url: '/api/system/integration/aws/bedrock/stream/invokeModelForConversationWithState',
                           method: 'POST',
                           headers: { Accept: 'text/event-stream' },
-                          body: form,
+                          body,
+                      }).then((response) => {
+                          // Pin the session to the conversation this turn used. The stream
+                          // doesn't echo the resolved id, so when we let the server create one
+                          // (no conversationId set) we resolve it via `/last` and keep it, so
+                          // subsequent turns continue this conversation instead of each sending
+                          // createNew and spawning a new one. Best-effort, fire-and-forget: a
+                          // failure leaves it unpinned and the next turn resolves server-side.
+                          if (this.conversationId == null) {
+                              krubbleHttp.Http.fetch({ url: '/api/system/conversation/last' })
+                                  .then((r) => r.json())
+                                  .then((res) => {
+                                  const id = res?.data?.conversationID;
+                                  if (typeof id === 'number') {
+                                      this.conversationId = id;
+                                  }
+                              })
+                                  .catch(() => { });
+                          }
+                          return response;
                       });
-                  }
-                  return krubbleHttp.Http.fetch({
-                      url: '/api/system/integration/aws/bedrock/stream/invokeModelForConversationWithState',
-                      method: 'POST',
-                      headers: { Accept: 'text/event-stream' },
-                      body: { userText: params.message },
                   });
               };
           }
           this.send({
               message: params.message,
               messages: this.messages.slice(0, -1),
-              internalFiles: params.internalFiles,
+              conversationFiles: params.conversationFiles,
           }).then((response) => {
               if (!response.ok) {
                   this._handleStreamError('Request failed: ' + response.status);
@@ -6800,35 +6854,6 @@
           }
           this._isStreaming = false;
       }
-      _handleClear() {
-          // Default to clearing the Kodaris Bedrock conversation state when the consumer
-          // hasn't provided their own `clear`.
-          if (!this.clear) {
-              this.clear = () => krubbleHttp.Http.fetch({
-                  url: '/api/system/integration/aws/bedrock/clearConversationWithState',
-                  method: 'POST',
-              });
-          }
-          this.clear().then(() => {
-              if (this._reader) {
-                  this._reader.cancel();
-                  this._reader = null;
-              }
-              this.messages = [];
-              this._isStreaming = false;
-              this._error = '';
-              this._inputValue = '';
-              this._userHasScrolledUp = false;
-              // Reset conversation-scoped context + telemetry state for the new convo.
-              this._contextWarning = '';
-              this._contextLimitReached = false;
-              this._contextLimitMessage = '';
-              this._telemetry = null;
-              this._iterationLog = [];
-              this._cacheCheckpoints = {};
-              this._saveState();
-          });
-      }
       _handleMessagesScroll(e) {
           const container = e.target;
           const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
@@ -7438,28 +7463,6 @@
                 </svg>
               </button>
             ` : A}
-            ${this.messages.length > 0 ? b `
-              <button
-                class="header-action"
-                @click=${this._handleClear}
-                title="Clear conversation"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                  stroke="currentColor"
-                  class="header-action-icon"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
-                  />
-                </svg>
-              </button>
-            ` : A}
             ${this.variant === 'inline' ? A : b `
               <button
                 class="header-action"
@@ -7504,9 +7507,9 @@
                     <div class="reasoning-content">${msg.reasoning}</div>
                   </details>
                 ` : A}
-                ${msg.internalFiles && msg.internalFiles.length ? b `
+                ${msg.conversationFiles && msg.conversationFiles.length ? b `
                   <div class="attachments">
-                    ${msg.internalFiles.map((img) => b `
+                    ${msg.conversationFiles.map((img) => b `
                       <button
                         class="attachment"
                         type="button"
@@ -7514,7 +7517,7 @@
                         @click=${() => this._openImage(img)}
                       >
                         <img
-                          src="/api/system/integration/aws/bedrock/conversationImage/${img.internalFileID}/view"
+                          src="/api/system/conversationFile/${img.conversationFileID}/view"
                           alt=${img.niceName || ''}
                         />
                       </button>
@@ -7632,9 +7635,9 @@
         ` : A}
 
         <div class="footer">
-          ${this._pendingInternalFiles.length ? b `
+          ${this._pendingConversationFiles.length ? b `
             <div class="composer-attachments">
-              ${c(this._pendingInternalFiles, (p) => p.localId, (p) => b `
+              ${c(this._pendingConversationFiles, (p) => p.localId, (p) => b `
                 <div class="chip">
                   <img src=${p.previewUrl} alt=${p.name} />
                   <button
@@ -8924,9 +8927,6 @@
   __decorate([
       n$1({ attribute: false })
   ], exports.Chatbot.prototype, "send", void 0);
-  __decorate([
-      n$1({ attribute: false })
-  ], exports.Chatbot.prototype, "clear", void 0);
   __decorate([
       n$1({ attribute: false })
   ], exports.Chatbot.prototype, "load", void 0);
@@ -8958,6 +8958,13 @@
           reflect: true
       })
   ], exports.Chatbot.prototype, "variant", void 0);
+  __decorate([
+      n$1({
+          type: Number,
+          attribute: 'conversation-id',
+          reflect: true
+      })
+  ], exports.Chatbot.prototype, "conversationId", void 0);
   __decorate([
       r()
   ], exports.Chatbot.prototype, "_inputValue", void 0);
@@ -8996,7 +9003,7 @@
   ], exports.Chatbot.prototype, "_isDebugResizing", void 0);
   __decorate([
       r()
-  ], exports.Chatbot.prototype, "_pendingInternalFiles", void 0);
+  ], exports.Chatbot.prototype, "_pendingConversationFiles", void 0);
   __decorate([
       r()
   ], exports.Chatbot.prototype, "_isDraggingFile", void 0);