@ni/ok-components 0.2.18 → 0.2.20

package/dist/all-components-bundle.js

@@ -97755,6 +97755,14 @@ focus outline in that case.
         display: none;
     }
 
+    .start {
+        display: block;
+    }
+
+    .start.start-empty {
+        display: none;
+    }
+
     .messages {
         flex: 1;
         display: flex;
@@ -97785,6 +97793,9 @@ focus outline in that case.
 <div class="toolbar ${x => (x.toolbarEmpty ? 'toolbar-empty' : '')}">
     <slot name="toolbar" ${slotted({ property: 'slottedToolbarElements' })}></slot>
 </div>
+<div class="start ${x => (x.startEmpty ? 'start-empty' : '')}">
+    <slot name="start" ${slotted({ property: 'slottedStartElements' })}></slot>
+</div>
 <div class="messages"><slot></slot></div>
 <div class="input ${x => (x.inputEmpty ? 'input-empty' : '')}">
     <slot name="input" ${slotted({ property: 'slottedInputElements' })}>
@@ -97810,6 +97821,8 @@ focus outline in that case.
           this.inputEmpty = true;
           /** @internal */
           this.toolbarEmpty = true;
+          /** @internal */
+          this.startEmpty = true;
       }
       slottedInputElementsChanged(_prev, next) {
           this.inputEmpty = next === undefined || next.length === 0;
@@ -97817,6 +97830,9 @@ focus outline in that case.
       slottedToolbarElementsChanged(_prev, next) {
           this.toolbarEmpty = next === undefined || next.length === 0;
       }
+      slottedStartElementsChanged(_prev, next) {
+          this.startEmpty = next === undefined || next.length === 0;
+      }
   }
   __decorate([
       attr
@@ -97833,6 +97849,12 @@ focus outline in that case.
   __decorate([
       observable
   ], ChatConversation.prototype, "slottedToolbarElements", void 0);
+  __decorate([
+      observable
+  ], ChatConversation.prototype, "startEmpty", void 0);
+  __decorate([
+      observable
+  ], ChatConversation.prototype, "slottedStartElements", void 0);
   const sprightChatConversation = ChatConversation.compose({
       baseName: 'chat-conversation',
       template: template$8,
@@ -97961,7 +97983,7 @@ focus outline in that case.
         class="action-button"
         appearance="block"
         appearance-variant="${x => (x.processing ? 'primary' : 'accent')}"
-        ?disabled=${x => (x.processing ? false : x.disableSendButton)}
+        ?disabled=${x => (x.processing ? false : (x.sendDisabled || x.isInputEmpty))}
         @click=${x => (x.processing ? x.stopButtonClickHandler() : x.sendButtonClickHandler())}
         tabindex="${x => x.tabIndex}"
         title=${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}
@@ -97987,10 +98009,12 @@ focus outline in that case.
           this.value = '';
           this.maxLength = -1;
           this.processing = false;
+          this.sendDisabled = false;
           /**
+           * Tracks whether the send button should be disabled based on input value
            * @internal
            */
-          this.disableSendButton = true;
+          this.isInputEmpty = true;
           /**
            * The width of the vertical scrollbar, if displayed.
            * @internal
@@ -98016,7 +98040,7 @@ focus outline in that case.
        */
       textAreaInputHandler() {
           this.value = this.textArea.value;
-          this.disableSendButton = this.shouldDisableSendButton();
+          this.isInputEmpty = this.shouldDisableSendButton();
           this.queueUpdateScrollbarWidth();
       }
       // If a property can affect whether a scrollbar is visible, we need to
@@ -98037,7 +98061,7 @@ focus outline in that case.
       valueChanged() {
           if (this.textArea) {
               this.textArea.value = this.value;
-              this.disableSendButton = this.shouldDisableSendButton();
+              this.isInputEmpty = this.shouldDisableSendButton();
               this.queueUpdateScrollbarWidth();
           }
       }
@@ -98047,7 +98071,7 @@ focus outline in that case.
       connectedCallback() {
           super.connectedCallback();
           this.textArea.value = this.value;
-          this.disableSendButton = this.shouldDisableSendButton();
+          this.isInputEmpty = this.shouldDisableSendButton();
           this.resizeObserver = new ResizeObserver(() => this.onResize());
           this.resizeObserver.observe(this);
       }
@@ -98086,7 +98110,7 @@ focus outline in that case.
       }
       resetInput() {
           this.value = '';
-          this.disableSendButton = true;
+          this.isInputEmpty = true;
           if (this.textArea) {
               this.textArea.value = '';
               this.textArea.focus();
@@ -98130,12 +98154,15 @@ focus outline in that case.
   __decorate([
       attr({ attribute: 'processing', mode: 'boolean' })
   ], ChatInput.prototype, "processing", void 0);
+  __decorate([
+      attr({ attribute: 'send-disabled', mode: 'boolean' })
+  ], ChatInput.prototype, "sendDisabled", void 0);
   __decorate([
       observable
   ], ChatInput.prototype, "textArea", void 0);
   __decorate([
       observable
-  ], ChatInput.prototype, "disableSendButton", void 0);
+  ], ChatInput.prototype, "isInputEmpty", void 0);
   __decorate([
       observable
   ], ChatInput.prototype, "scrollbarWidth", void 0);