@ni/spright-components 6.16.0 → 6.17.1

package/dist/all-components-bundle.js

@@ -14764,6 +14764,7 @@
   const tokenNames = {
       actionRgbPartialColor: 'action-rgb-partial-color',
       applicationBackgroundColor: 'application-background-color',
+      containerBackgroundColor: 'container-background-color',
       dividerBackgroundColor: 'divider-background-color',
       dividerBackgroundDynamicColor: 'divider-background-dynamic-color',
       headerBackgroundColor: 'header-background-color',
@@ -16301,6 +16302,7 @@
   const tokenValues = {
       actionRgbPartialColor: hexToRgbPartialThemeColor(createThemeColor(Black91, Black15, White)),
       applicationBackgroundColor: createThemeColor(White, Black85, ForestGreen),
+      containerBackgroundColor: hexToRgbaCssThemeColor(createThemeColor(Black91, Black15, White), 0.07, 0.1, 0.1),
       headerBackgroundColor: createThemeColor(Black7, Black88, ForestGreen),
       sectionBackgroundColor: createThemeColor(Black15, Black80, ForestGreen),
       sectionBackgroundImage: createThemeColor(`linear-gradient(${Black15}, ${hexToRgbaCssColor(Black15, 0)})`, `linear-gradient(${Black82}, ${hexToRgbaCssColor(Black82, 0)})`, `linear-gradient(${ForestGreen}, ${hexToRgbaCssColor(ForestGreen, 0)})`),
@@ -16474,6 +16476,7 @@
   // #region color tokens
   const actionRgbPartialColor = createThemeColorToken(tokenNames.actionRgbPartialColor, tokenValues.actionRgbPartialColor);
   const applicationBackgroundColor = createThemeColorToken(tokenNames.applicationBackgroundColor, tokenValues.applicationBackgroundColor);
+  createThemeColorToken(tokenNames.containerBackgroundColor, tokenValues.containerBackgroundColor);
   createThemeColorToken(tokenNames.headerBackgroundColor, tokenValues.headerBackgroundColor);
   createThemeColorToken(tokenNames.sectionBackgroundColor, tokenValues.sectionBackgroundColor);
   const sectionBackgroundImage = createThemeColorToken(tokenNames.sectionBackgroundImage, tokenValues.sectionBackgroundImage);
@@ -98696,10 +98699,57 @@ focus outline in that case.
         width: 80px;
         margin: ${mediumPadding};
     }
+
+    .attachments {
+        display: none;
+    }
+
+    .attachments.has-content {
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${mediumPadding};
+        padding: ${mediumPadding};
+        max-height: calc(${controlSlimHeight} * 3 + ${mediumPadding} * 4 );
+        overflow-y: auto;
+    }
+
+    .attachments ::slotted(*) {
+        height: ${controlSlimHeight};
+    }
+
+    .footer {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+        justify-content: flex-end;
+    }
+
+    .footer-actions {
+        display: none;
+        flex: 1;
+    }
+
+    .footer-actions.has-content {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        column-gap: ${mediumPadding};
+        margin: ${mediumPadding};
+    }
+
+    .footer-actions ::slotted(*) {
+        height: ${controlSlimHeight};
+    }
 `;
 
   const template$7 = html `
 <div class="container">
+    <section class="attachments ${x => (x.attachmentsIsEmpty ? '' : 'has-content')}">
+        <slot
+            name="attachments"
+            ${slotted({ property: 'slottedAttachmentsElements' })}
+        ></slot>
+    </section>
     <textarea
         ${ref('textArea')}
         placeholder="${x => x.placeholder}"
@@ -98709,19 +98759,27 @@ focus outline in that case.
         @keydown="${(x, c) => x.textAreaKeydownHandler(c.event)}"
         @input="${x => x.textAreaInputHandler()}"
     ></textarea>
-    <${buttonTag}
-        class="action-button"
-        appearance="block"
-        appearance-variant="${x => (x.processing ? 'primary' : 'accent')}"
-        ?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)}
-        content-hidden
-    >
-        ${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}
-        ${when(x => x.processing, html `<${iconStopSquareTag} slot="start"></${iconStopSquareTag}>`, html `<${iconPaperPlaneTag} slot="start"></${iconPaperPlaneTag}>`)}
-    </${buttonTag}>
+    <section class="footer">
+        <section class="footer-actions ${x => (x.footerActionsIsEmpty ? '' : 'has-content')}">
+            <slot
+                name="footer-actions"
+                ${slotted({ property: 'slottedFooterActionsElements' })}
+            ></slot>
+        </section>
+        <${buttonTag}
+            class="action-button"
+            appearance="block"
+            appearance-variant="${x => (x.processing ? 'primary' : 'accent')}"
+            ?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)}
+            content-hidden
+        >
+            ${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}
+            ${when(x => x.processing, html `<${iconStopSquareTag} slot="start"></${iconStopSquareTag}>`, html `<${iconPaperPlaneTag} slot="start"></${iconPaperPlaneTag}>`)}
+        </${buttonTag}>
+    </section>
     <${iconExclamationMarkTag}
         severity="error"
         class="error-icon ${x => (x.scrollbarWidth >= 0 ? 'scrollbar-width-calculated' : '')}"
@@ -98750,8 +98808,18 @@ focus outline in that case.
            * @internal
            */
           this.scrollbarWidth = -1;
+          /** @internal */
+          this.footerActionsIsEmpty = true;
+          /** @internal */
+          this.attachmentsIsEmpty = true;
           this.updateScrollbarWidthQueued = false;
       }
+      slottedFooterActionsElementsChanged(_prev, next) {
+          this.footerActionsIsEmpty = next === undefined || next.length === 0;
+      }
+      slottedAttachmentsElementsChanged(_prev, next) {
+          this.attachmentsIsEmpty = next === undefined || next.length === 0;
+      }
       /**
        * @internal
        */
@@ -98912,6 +98980,18 @@ focus outline in that case.
   __decorate([
       observable
   ], ChatInput.prototype, "scrollbarWidth", void 0);
+  __decorate([
+      observable
+  ], ChatInput.prototype, "footerActionsIsEmpty", void 0);
+  __decorate([
+      observable
+  ], ChatInput.prototype, "slottedFooterActionsElements", void 0);
+  __decorate([
+      observable
+  ], ChatInput.prototype, "attachmentsIsEmpty", void 0);
+  __decorate([
+      observable
+  ], ChatInput.prototype, "slottedAttachmentsElements", void 0);
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
       template: template$7,