@ni/ok-components 0.2.9 → 0.2.11

package/dist/all-components-bundle.js

@@ -24932,6 +24932,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
   registerIconSvg('icon-stop-square', IconStopSquare);
+  const iconStopSquareTag = 'nimble-icon-stop-square';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
@@ -96797,6 +96798,14 @@ focus outline in that case.
         border-color: transparent;
     }
 
+    .toolbar {
+        display: block;
+    }
+
+    .toolbar.toolbar-empty {
+        display: none;
+    }
+
     .messages {
         flex: 1;
         display: flex;
@@ -96824,6 +96833,9 @@ focus outline in that case.
 `;
 
   const template$8 = html `
+<div class="toolbar ${x => (x.toolbarEmpty ? 'toolbar-empty' : '')}">
+    <slot name="toolbar" ${slotted({ property: 'slottedToolbarElements' })}></slot>
+</div>
 <div class="messages"><slot></slot></div>
 <div class="input ${x => (x.inputEmpty ? 'input-empty' : '')}">
     <slot name="input" ${slotted({ property: 'slottedInputElements' })}>
@@ -96847,10 +96859,15 @@ focus outline in that case.
           this.appearance = ChatConversationAppearance.default;
           /** @internal */
           this.inputEmpty = true;
+          /** @internal */
+          this.toolbarEmpty = true;
       }
       slottedInputElementsChanged(_prev, next) {
           this.inputEmpty = next === undefined || next.length === 0;
       }
+      slottedToolbarElementsChanged(_prev, next) {
+          this.toolbarEmpty = next === undefined || next.length === 0;
+      }
   }
   __decorate([
       attr
@@ -96861,6 +96878,12 @@ focus outline in that case.
   __decorate([
       observable
   ], ChatConversation.prototype, "slottedInputElements", void 0);
+  __decorate([
+      observable
+  ], ChatConversation.prototype, "toolbarEmpty", void 0);
+  __decorate([
+      observable
+  ], ChatConversation.prototype, "slottedToolbarElements", void 0);
   const sprightChatConversation = ChatConversation.compose({
       baseName: 'chat-conversation',
       template: template$8,
@@ -96939,7 +96962,7 @@ focus outline in that case.
         color: ${controlLabelFontColor};
     }
 
-    .send-button {
+    .action-button {
         align-self: flex-end;
         width: 80px;
         margin: ${mediumPadding};
@@ -96958,18 +96981,18 @@ focus outline in that case.
         @input="${x => x.textAreaInputHandler()}"
     ></textarea>
     <${buttonTag}
-        class="send-button"
+        class="action-button"
         appearance="block"
-        appearance-variant="accent"
-        ?disabled=${x => x.disableSendButton}
-        @click=${x => x.sendButtonClickHandler()}
+        appearance-variant="${x => (x.processing ? 'primary' : 'accent')}"
+        ?disabled=${x => (x.processing ? false : x.disableSendButton)}
+        @click=${x => (x.processing ? x.stopButtonClickHandler() : x.sendButtonClickHandler())}
         tabindex="${x => x.tabIndex}"
-        title=${x => x.sendButtonLabel}
+        title=${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}
         content-hidden
     >
-        ${x => x.sendButtonLabel}
-        <${iconPaperPlaneTag} slot="start"><${iconPaperPlaneTag}/>
-    </${buttonTag}>    
+        ${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}
+        ${when(x => x.processing, html `<${iconStopSquareTag} slot="start"></${iconStopSquareTag}>`, html `<${iconPaperPlaneTag} slot="start"></${iconPaperPlaneTag}>`)}
+    </${buttonTag}>
 </div>`;
 
   /**
@@ -96980,6 +97003,7 @@ focus outline in that case.
           super(...arguments);
           this.value = '';
           this.maxLength = -1;
+          this.processing = false;
           /**
            * @internal
            */
@@ -96990,6 +97014,9 @@ focus outline in that case.
        */
       textAreaKeydownHandler(e) {
           if (e.key === keyEnter && !e.shiftKey) {
+              if (this.processing) {
+                  return false;
+              }
               this.sendButtonClickHandler();
               return false;
           }
@@ -97032,6 +97059,16 @@ focus outline in that case.
           this.resetInput();
           this.$emit('send', eventDetail);
       }
+      /**
+       * @internal
+       */
+      stopButtonClickHandler() {
+          if (!this.processing) {
+              return;
+          }
+          this.$emit('stop');
+          this.textArea?.blur();
+      }
       shouldDisableSendButton() {
           return this.textArea.value.length === 0;
       }
@@ -97050,6 +97087,9 @@ focus outline in that case.
   __decorate([
       attr({ attribute: 'send-button-label' })
   ], ChatInput.prototype, "sendButtonLabel", void 0);
+  __decorate([
+      attr({ attribute: 'stop-button-label' })
+  ], ChatInput.prototype, "stopButtonLabel", void 0);
   __decorate([
       attr
   ], ChatInput.prototype, "value", void 0);
@@ -97059,6 +97099,9 @@ focus outline in that case.
   __decorate([
       attr({ attribute: 'maxlength', converter: nullableNumberConverter })
   ], ChatInput.prototype, "maxLength", void 0);
+  __decorate([
+      attr({ attribute: 'processing', mode: 'boolean' })
+  ], ChatInput.prototype, "processing", void 0);
   __decorate([
       observable
   ], ChatInput.prototype, "textArea", void 0);