@ni/spright-components 6.15.9 → 6.17.0

package/dist/custom-elements.json

@@ -326,6 +326,54 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "method",
+              "name": "slottedFooterActionsElementsChanged",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "_prev",
+                  "type": {
+                    "text": "HTMLElement[] | undefined"
+                  }
+                },
+                {
+                  "name": "next",
+                  "type": {
+                    "text": "HTMLElement[] | undefined"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "slottedAttachmentsElementsChanged",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "_prev",
+                  "type": {
+                    "text": "HTMLElement[] | undefined"
+                  }
+                },
+                {
+                  "name": "next",
+                  "type": {
+                    "text": "HTMLElement[] | undefined"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "shouldDisableSendButton",
@@ -754,6 +802,81 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/chat/message/welcome/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A Spright component for displaying a welcome chat message",
+          "name": "ChatMessageWelcome",
+          "members": [
+            {
+              "kind": "field",
+              "name": "welcomeTitle",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "subtitle",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "welcome-title",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "welcomeTitle"
+            },
+            {
+              "name": "subtitle",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "subtitle"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@ni/fast-foundation"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "chatMessageWelcomeTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'spright-chat-message-welcome'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ChatMessageWelcome",
+          "declaration": {
+            "name": "ChatMessageWelcome",
+            "module": "src/chat/message/welcome/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "chatMessageWelcomeTag",
+          "declaration": {
+            "name": "chatMessageWelcomeTag",
+            "module": "src/chat/message/welcome/index.ts"
+          }
+        }
+      ]
     }
   ]
 }

package/dist/custom-elements.md

@@ -60,6 +60,13 @@
 | `processing`      | public  | `boolean`             | `false` |             |                |
 | `sendDisabled`    | public  | `boolean`             | `false` |             |                |
 
+### Methods
+
+| Name                                  | Privacy | Description | Parameters                                                            | Return | Inherited From |
+| ------------------------------------- | ------- | ----------- | --------------------------------------------------------------------- | ------ | -------------- |
+| `slottedFooterActionsElementsChanged` | public  |             | `_prev: HTMLElement[] \| undefined, next: HTMLElement[] \| undefined` | `void` |                |
+| `slottedAttachmentsElementsChanged`   | public  |             | `_prev: HTMLElement[] \| undefined, next: HTMLElement[] \| undefined` | `void` |                |
+
 ### Attributes
 
 | Name                | Field           | Inherited From |
@@ -138,3 +145,27 @@
 | `FoundationElement` |        | @ni/fast-foundation |
 
 <hr/>
+
+## class: `ChatMessageWelcome`
+
+### Superclass
+
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
+
+### Fields
+
+| Name           | Privacy | Type                  | Default | Description | Inherited From |
+| -------------- | ------- | --------------------- | ------- | ----------- | -------------- |
+| `welcomeTitle` | public  | `string \| undefined` |         |             |                |
+| `subtitle`     | public  | `string \| undefined` |         |             |                |
+
+### Attributes
+
+| Name            | Field        | Inherited From |
+| --------------- | ------------ | -------------- |
+| `welcome-title` | welcomeTitle |                |
+| `subtitle`      | subtitle     |                |
+
+<hr/>

package/dist/esm/all-components.d.ts

@@ -10,5 +10,6 @@ import './chat/message';
 import './chat/message/inbound';
 import './chat/message/outbound';
 import './chat/message/system';
+import './chat/message/welcome';
 import './icons/all-icons';
 import './rectangle';

package/dist/esm/all-components.js

@@ -10,6 +10,7 @@ import './chat/message';
 import './chat/message/inbound';
 import './chat/message/outbound';
 import './chat/message/system';
+import './chat/message/welcome';
 import './icons/all-icons';
 import './rectangle';
 //# sourceMappingURL=all-components.js.map

package/dist/esm/all-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,+CAA+C,CAAC;AAEvD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,cAAc,CAAC;AACtB,OAAO,gBAAgB,CAAC;AACxB,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,aAAa,CAAC","sourcesContent":["/**\n * Import of all the web components available in Spright AND Nimble.\n * Production applications are encouraged to import only components\n * that are required instead of leveraging this file.\n */\n\nimport '@ni/nimble-components/dist/esm/all-components';\n\nimport './chat/conversation';\nimport './chat/input';\nimport './chat/message';\nimport './chat/message/inbound';\nimport './chat/message/outbound';\nimport './chat/message/system';\nimport './icons/all-icons';\nimport './rectangle';\n"]}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,+CAA+C,CAAC;AAEvD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,cAAc,CAAC;AACtB,OAAO,gBAAgB,CAAC;AACxB,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,aAAa,CAAC","sourcesContent":["/**\n * Import of all the web components available in Spright AND Nimble.\n * Production applications are encouraged to import only components\n * that are required instead of leveraging this file.\n */\n\nimport '@ni/nimble-components/dist/esm/all-components';\n\nimport './chat/conversation';\nimport './chat/input';\nimport './chat/message';\nimport './chat/message/inbound';\nimport './chat/message/outbound';\nimport './chat/message/system';\nimport './chat/message/welcome';\nimport './icons/all-icons';\nimport './rectangle';\n"]}

package/dist/esm/chat/input/index.d.ts

@@ -41,8 +41,18 @@ export declare class ChatInput extends ChatInput_base {
      * @internal
      */
     scrollbarWidth: number;
+    /** @internal */
+    footerActionsIsEmpty: boolean;
+    /** @internal */
+    readonly slottedFooterActionsElements?: HTMLElement[];
+    /** @internal */
+    attachmentsIsEmpty: boolean;
+    /** @internal */
+    readonly slottedAttachmentsElements?: HTMLElement[];
     private resizeObserver?;
     private updateScrollbarWidthQueued;
+    slottedFooterActionsElementsChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
+    slottedAttachmentsElementsChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
     /**
      * @internal
      */

package/dist/esm/chat/input/index.js

@@ -25,8 +25,18 @@ export class ChatInput extends mixinErrorPattern(FoundationElement) {
          * @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
      */
@@ -187,6 +197,18 @@ __decorate([
 __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,

package/dist/esm/chat/input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/input/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { keyEnter } from '@ni/fast-web-utilities';\nimport { attr, nullableNumberConverter, observable, DOM } from '@ni/fast-element';\nimport { mixinErrorPattern } from '@ni/nimble-components/dist/esm/patterns/error/types';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { ChatInputSendEventDetail } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'spright-chat-input': ChatInput;\n    }\n}\n\n/**\n * A Spright component for composing and sending a chat message\n */\nexport class ChatInput extends mixinErrorPattern(FoundationElement) {\n    private static readonly fieldSizingSupported = CSS.supports(\n        'field-sizing',\n        'content'\n    );\n\n    @attr\n    public placeholder?: string;\n\n    @attr({ attribute: 'send-button-label' })\n    public sendButtonLabel?: string;\n\n    @attr({ attribute: 'stop-button-label' })\n    public stopButtonLabel?: string;\n\n    @attr\n    public value = '';\n\n    @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n    public override tabIndex!: number;\n\n    @attr({ attribute: 'maxlength', converter: nullableNumberConverter })\n    public maxLength?: number = -1;\n\n    @attr({ attribute: 'processing', mode: 'boolean' })\n    public processing = false;\n\n    @attr({ attribute: 'send-disabled', mode: 'boolean' })\n    public sendDisabled = false;\n\n    /**\n     * @internal\n     */\n    @observable\n    public textArea?: HTMLTextAreaElement;\n\n    /**\n     * Tracks whether the send button should be disabled based on input value\n     * @internal\n     */\n    @observable\n    public isInputEmpty = true;\n\n    /**\n     * The width of the vertical scrollbar, if displayed.\n     * @internal\n     */\n    @observable\n    public scrollbarWidth = -1;\n\n    private resizeObserver?: ResizeObserver;\n    private updateScrollbarWidthQueued = false;\n\n    /**\n     * @internal\n     */\n    public textAreaKeydownHandler(e: KeyboardEvent): boolean {\n        if (e.key === keyEnter && !e.shiftKey) {\n            if (this.processing) {\n                return false;\n            }\n            this.sendButtonClickHandler();\n            return false;\n        }\n        return true;\n    }\n\n    /**\n     * @internal\n     */\n    public textAreaInputHandler(): void {\n        this.value = this.textArea!.value;\n        this.isInputEmpty = this.shouldDisableSendButton();\n        this.adjustTextAreaHeight();\n        this.queueUpdateScrollbarWidth();\n    }\n\n    // If a property can affect whether a scrollbar is visible, we need to\n    // call queueUpdateScrollbarWidth() when it changes. The exceptions are\n    // properties that affect size (e.g. height, width, cols, rows), because\n    // we already have a ResizeObserver handling those changes. Also,\n    // a change to errorVisible cannot cause scrollbar visibility to change,\n    // because we always reserve space for the error icon.\n\n    /**\n     * @internal\n     */\n    public placeholderChanged(): void {\n        this.queueUpdateScrollbarWidth();\n    }\n\n    /**\n     * @internal\n     */\n    public valueChanged(): void {\n        if (this.textArea) {\n            this.textArea.value = this.value;\n            this.isInputEmpty = this.shouldDisableSendButton();\n            this.adjustTextAreaHeight();\n            this.queueUpdateScrollbarWidth();\n        }\n    }\n\n    /**\n     * @internal\n     */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.textArea!.value = this.value;\n        this.isInputEmpty = this.shouldDisableSendButton();\n        this.adjustTextAreaHeight();\n        this.resizeObserver = new ResizeObserver(() => this.onResize());\n        this.resizeObserver.observe(this);\n    }\n\n    /**\n     * @internal\n     */\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.resizeObserver?.disconnect();\n    }\n\n    /**\n     * @internal\n     */\n    public sendButtonClickHandler(): void {\n        if (this.shouldDisableSendButton()) {\n            return;\n        }\n        const eventDetail: ChatInputSendEventDetail = {\n            text: this.textArea!.value\n        };\n        this.resetInput();\n        this.$emit('send', eventDetail);\n    }\n\n    /**\n     * @internal\n     */\n    public stopButtonClickHandler(): void {\n        if (!this.processing) {\n            return;\n        }\n        this.$emit('stop');\n        this.textArea?.blur();\n    }\n\n    private shouldDisableSendButton(): boolean {\n        return this.textArea!.value.length === 0;\n    }\n\n    private resetInput(): void {\n        this.value = '';\n        this.isInputEmpty = true;\n        if (this.textArea) {\n            this.textArea.value = '';\n            this.adjustTextAreaHeight();\n            this.textArea.focus();\n        }\n    }\n\n    private onResize(): void {\n        this.adjustTextAreaHeight();\n        this.scrollbarWidth = this.textArea!.offsetWidth - this.textArea!.clientWidth;\n    }\n\n    private queueUpdateScrollbarWidth(): void {\n        if (!this.$fastController.isConnected) {\n            return;\n        }\n        if (!this.updateScrollbarWidthQueued) {\n            this.updateScrollbarWidthQueued = true;\n            DOM.queueUpdate(() => this.updateScrollbarWidth());\n        }\n    }\n\n    // Workaround for browsers that do not support the CSS property `field-sizing: content`\n    // See https://github.com/ni/nimble/issues/2902\n    private adjustTextAreaHeight(): void {\n        if (ChatInput.fieldSizingSupported || !this.textArea) {\n            return;\n        }\n        const textArea = this.textArea;\n        textArea.style.height = 'auto';\n        textArea.style.height = `${textArea.scrollHeight}px`;\n    }\n\n    private updateScrollbarWidth(): void {\n        this.updateScrollbarWidthQueued = false;\n        this.scrollbarWidth = this.textArea!.offsetWidth - this.textArea!.clientWidth;\n    }\n}\n\nconst sprightChatInput = ChatInput.compose({\n    baseName: 'chat-input',\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('spright').register(sprightChatInput());\nexport const chatInputTag = 'spright-chat-input';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/input/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { keyEnter } from '@ni/fast-web-utilities';\nimport { attr, nullableNumberConverter, observable, DOM } from '@ni/fast-element';\nimport { mixinErrorPattern } from '@ni/nimble-components/dist/esm/patterns/error/types';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { ChatInputSendEventDetail } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'spright-chat-input': ChatInput;\n    }\n}\n\n/**\n * A Spright component for composing and sending a chat message\n */\nexport class ChatInput extends mixinErrorPattern(FoundationElement) {\n    private static readonly fieldSizingSupported = CSS.supports(\n        'field-sizing',\n        'content'\n    );\n\n    @attr\n    public placeholder?: string;\n\n    @attr({ attribute: 'send-button-label' })\n    public sendButtonLabel?: string;\n\n    @attr({ attribute: 'stop-button-label' })\n    public stopButtonLabel?: string;\n\n    @attr\n    public value = '';\n\n    @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n    public override tabIndex!: number;\n\n    @attr({ attribute: 'maxlength', converter: nullableNumberConverter })\n    public maxLength?: number = -1;\n\n    @attr({ attribute: 'processing', mode: 'boolean' })\n    public processing = false;\n\n    @attr({ attribute: 'send-disabled', mode: 'boolean' })\n    public sendDisabled = false;\n\n    /**\n     * @internal\n     */\n    @observable\n    public textArea?: HTMLTextAreaElement;\n\n    /**\n     * Tracks whether the send button should be disabled based on input value\n     * @internal\n     */\n    @observable\n    public isInputEmpty = true;\n\n    /**\n     * The width of the vertical scrollbar, if displayed.\n     * @internal\n     */\n    @observable\n    public scrollbarWidth = -1;\n\n    /** @internal */\n    @observable\n    public footerActionsIsEmpty = true;\n\n    /** @internal */\n    @observable\n    public readonly slottedFooterActionsElements?: HTMLElement[];\n\n    /** @internal */\n    @observable\n    public attachmentsIsEmpty = true;\n\n    /** @internal */\n    @observable\n    public readonly slottedAttachmentsElements?: HTMLElement[];\n\n    private resizeObserver?: ResizeObserver;\n    private updateScrollbarWidthQueued = false;\n\n    public slottedFooterActionsElementsChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.footerActionsIsEmpty = next === undefined || next.length === 0;\n    }\n\n    public slottedAttachmentsElementsChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.attachmentsIsEmpty = next === undefined || next.length === 0;\n    }\n\n    /**\n     * @internal\n     */\n    public textAreaKeydownHandler(e: KeyboardEvent): boolean {\n        if (e.key === keyEnter && !e.shiftKey) {\n            if (this.processing) {\n                return false;\n            }\n            this.sendButtonClickHandler();\n            return false;\n        }\n        return true;\n    }\n\n    /**\n     * @internal\n     */\n    public textAreaInputHandler(): void {\n        this.value = this.textArea!.value;\n        this.isInputEmpty = this.shouldDisableSendButton();\n        this.adjustTextAreaHeight();\n        this.queueUpdateScrollbarWidth();\n    }\n\n    // If a property can affect whether a scrollbar is visible, we need to\n    // call queueUpdateScrollbarWidth() when it changes. The exceptions are\n    // properties that affect size (e.g. height, width, cols, rows), because\n    // we already have a ResizeObserver handling those changes. Also,\n    // a change to errorVisible cannot cause scrollbar visibility to change,\n    // because we always reserve space for the error icon.\n\n    /**\n     * @internal\n     */\n    public placeholderChanged(): void {\n        this.queueUpdateScrollbarWidth();\n    }\n\n    /**\n     * @internal\n     */\n    public valueChanged(): void {\n        if (this.textArea) {\n            this.textArea.value = this.value;\n            this.isInputEmpty = this.shouldDisableSendButton();\n            this.adjustTextAreaHeight();\n            this.queueUpdateScrollbarWidth();\n        }\n    }\n\n    /**\n     * @internal\n     */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.textArea!.value = this.value;\n        this.isInputEmpty = this.shouldDisableSendButton();\n        this.adjustTextAreaHeight();\n        this.resizeObserver = new ResizeObserver(() => this.onResize());\n        this.resizeObserver.observe(this);\n    }\n\n    /**\n     * @internal\n     */\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.resizeObserver?.disconnect();\n    }\n\n    /**\n     * @internal\n     */\n    public sendButtonClickHandler(): void {\n        if (this.shouldDisableSendButton()) {\n            return;\n        }\n        const eventDetail: ChatInputSendEventDetail = {\n            text: this.textArea!.value\n        };\n        this.resetInput();\n        this.$emit('send', eventDetail);\n    }\n\n    /**\n     * @internal\n     */\n    public stopButtonClickHandler(): void {\n        if (!this.processing) {\n            return;\n        }\n        this.$emit('stop');\n        this.textArea?.blur();\n    }\n\n    private shouldDisableSendButton(): boolean {\n        return this.textArea!.value.length === 0;\n    }\n\n    private resetInput(): void {\n        this.value = '';\n        this.isInputEmpty = true;\n        if (this.textArea) {\n            this.textArea.value = '';\n            this.adjustTextAreaHeight();\n            this.textArea.focus();\n        }\n    }\n\n    private onResize(): void {\n        this.adjustTextAreaHeight();\n        this.scrollbarWidth = this.textArea!.offsetWidth - this.textArea!.clientWidth;\n    }\n\n    private queueUpdateScrollbarWidth(): void {\n        if (!this.$fastController.isConnected) {\n            return;\n        }\n        if (!this.updateScrollbarWidthQueued) {\n            this.updateScrollbarWidthQueued = true;\n            DOM.queueUpdate(() => this.updateScrollbarWidth());\n        }\n    }\n\n    // Workaround for browsers that do not support the CSS property `field-sizing: content`\n    // See https://github.com/ni/nimble/issues/2902\n    private adjustTextAreaHeight(): void {\n        if (ChatInput.fieldSizingSupported || !this.textArea) {\n            return;\n        }\n        const textArea = this.textArea;\n        textArea.style.height = 'auto';\n        textArea.style.height = `${textArea.scrollHeight}px`;\n    }\n\n    private updateScrollbarWidth(): void {\n        this.updateScrollbarWidthQueued = false;\n        this.scrollbarWidth = this.textArea!.offsetWidth - this.textArea!.clientWidth;\n    }\n}\n\nconst sprightChatInput = ChatInput.compose({\n    baseName: 'chat-input',\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('spright').register(sprightChatInput());\nexport const chatInputTag = 'spright-chat-input';\n"]}

package/dist/esm/chat/input/styles.js

@@ -1,5 +1,5 @@
 import { css } from '@ni/fast-element';
-import { applicationBackgroundColor, bodyFont, bodyFontColor, borderWidth, controlLabelFontColor, elevation2BoxShadow, mediumPadding, popupBorderColor, borderHoverColor, smallDelay, failColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { applicationBackgroundColor, bodyFont, bodyFontColor, borderWidth, controlLabelFontColor, controlSlimHeight, elevation2BoxShadow, mediumPadding, popupBorderColor, borderHoverColor, smallDelay, failColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
 import { styles as errorStyles } from '@ni/nimble-components/dist/esm/patterns/error/styles';
 import { display } from '../../utilities/style/display';
 export const styles = css `
@@ -104,5 +104,46 @@ export const styles = css `
         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};
+    }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/chat/input/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/chat/input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,WAAW,EACX,qBAAqB,EACrB,mBAAmB,EACnB,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,SAAS,EACZ,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAC7F,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;MACf,WAAW;;;;;;mDAMkC,WAAW;;;;;;;;;;4BAUlC,0BAA0B;kBACpC,WAAW,UAAU,gBAAgB;sBACjC,mBAAmB;;;;;;4BAMb,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;4BAKV,UAAU;;;;+BAIP,gBAAgB;;;;+BAIhB,SAAS;;;;+BAIT,SAAS;;;;+BAIT,SAAS;;;;+BAIT,SAAS;;;;;;;;;;gBAUxB,QAAQ;iBACP,aAAa;;;;;;qCAMO,aAAa;;;;;mBAK/B,aAAa;;;;iBAIf,qBAAqB;;;;;;;;;;eAUvB,aAAa;;;;;;;kBAOV,aAAa;;CAE9B,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    borderWidth,\n    controlLabelFontColor,\n    elevation2BoxShadow,\n    mediumPadding,\n    popupBorderColor,\n    borderHoverColor,\n    smallDelay,\n    failColor\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { styles as errorStyles } from '@ni/nimble-components/dist/esm/patterns/error/styles';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    ${display('flex')}\n    ${errorStyles}\n\n    :host {\n        width: 100%;\n        height: auto;\n        outline: none;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n    }\n\n    .container {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        width: 100%;\n        height: 100%;\n\n        background-color: ${applicationBackgroundColor};\n        border: ${borderWidth} solid ${popupBorderColor};\n        box-shadow: ${elevation2BoxShadow};\n    }\n\n    .container::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        align-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    :host(:hover) .container::after {\n        width: 100%;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    :host(:focus-within) .container {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([error-visible]) .container::after {\n        border-bottom-color: ${failColor};\n    }\n        \n    :host([error-visible]) .container {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([error-visible]:hover) .container::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([error-visible]:focus-within) .container {\n        border-bottom-color: ${failColor};\n    }\n\n    @media (prefers-reduced-motion) {\n        .container::after {\n            transition-duration: 0s;\n        }\n    }\n\n    textarea {\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        background-color: transparent;\n\n        width: 100%;\n        resize: none;\n        height: auto;\n        max-height: calc(6lh + 2 * ${mediumPadding});\n        field-sizing: content;\n\n        border-width: 0px;\n        outline: none;\n        padding: ${mediumPadding};\n    }\n\n    textarea::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    :host([error-visible]) .error-icon {\n        display: none;\n    }\n\n    :host([error-visible]) .error-icon.scrollbar-width-calculated {\n        display: inline-flex;\n        position: absolute;\n        top: ${mediumPadding};\n        right: var(--ni-private-scrollbar-width);\n    }\n\n    .action-button {\n        align-self: flex-end;\n        width: 80px;\n        margin: ${mediumPadding};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/chat/input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,WAAW,EACX,qBAAqB,EACrB,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,SAAS,EACZ,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAC7F,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;MACf,WAAW;;;;;;mDAMkC,WAAW;;;;;;;;;;4BAUlC,0BAA0B;kBACpC,WAAW,UAAU,gBAAgB;sBACjC,mBAAmB;;;;;;4BAMb,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;4BAKV,UAAU;;;;+BAIP,gBAAgB;;;;+BAIhB,SAAS;;;;+BAIT,SAAS;;;;+BAIT,SAAS;;;;+BAIT,SAAS;;;;;;;;;;gBAUxB,QAAQ;iBACP,aAAa;;;;;;qCAMO,aAAa;;;;;mBAK/B,aAAa;;;;iBAIf,qBAAqB;;;;;;;;;;eAUvB,aAAa;;;;;;;kBAOV,aAAa;;;;;;;;;;eAUhB,aAAa;mBACT,aAAa;2BACL,iBAAiB,UAAU,aAAa;;;;;kBAKjD,iBAAiB;;;;;;;;;;;;;;;;;;;sBAmBb,aAAa;kBACjB,aAAa;;;;kBAIb,iBAAiB;;CAElC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    borderWidth,\n    controlLabelFontColor,\n    controlSlimHeight,\n    elevation2BoxShadow,\n    mediumPadding,\n    popupBorderColor,\n    borderHoverColor,\n    smallDelay,\n    failColor\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { styles as errorStyles } from '@ni/nimble-components/dist/esm/patterns/error/styles';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    ${display('flex')}\n    ${errorStyles}\n\n    :host {\n        width: 100%;\n        height: auto;\n        outline: none;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n    }\n\n    .container {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        width: 100%;\n        height: 100%;\n\n        background-color: ${applicationBackgroundColor};\n        border: ${borderWidth} solid ${popupBorderColor};\n        box-shadow: ${elevation2BoxShadow};\n    }\n\n    .container::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        align-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    :host(:hover) .container::after {\n        width: 100%;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    :host(:focus-within) .container {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([error-visible]) .container::after {\n        border-bottom-color: ${failColor};\n    }\n        \n    :host([error-visible]) .container {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([error-visible]:hover) .container::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([error-visible]:focus-within) .container {\n        border-bottom-color: ${failColor};\n    }\n\n    @media (prefers-reduced-motion) {\n        .container::after {\n            transition-duration: 0s;\n        }\n    }\n\n    textarea {\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        background-color: transparent;\n\n        width: 100%;\n        resize: none;\n        height: auto;\n        max-height: calc(6lh + 2 * ${mediumPadding});\n        field-sizing: content;\n\n        border-width: 0px;\n        outline: none;\n        padding: ${mediumPadding};\n    }\n\n    textarea::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    :host([error-visible]) .error-icon {\n        display: none;\n    }\n\n    :host([error-visible]) .error-icon.scrollbar-width-calculated {\n        display: inline-flex;\n        position: absolute;\n        top: ${mediumPadding};\n        right: var(--ni-private-scrollbar-width);\n    }\n\n    .action-button {\n        align-self: flex-end;\n        width: 80px;\n        margin: ${mediumPadding};\n    }\n\n    .attachments {\n        display: none;\n    }\n\n    .attachments.has-content {\n        display: flex;\n        flex-wrap: wrap;\n        gap: ${mediumPadding};\n        padding: ${mediumPadding};\n        max-height: calc(${controlSlimHeight} * 3 + ${mediumPadding} * 4 );\n        overflow-y: auto;\n    }\n\n    .attachments ::slotted(*) {\n        height: ${controlSlimHeight};\n    }\n\n    .footer {\n        display: flex;\n        flex-direction: row;\n        align-items: flex-end;\n        justify-content: flex-end;\n    }\n\n    .footer-actions {\n        display: none;\n        flex: 1;\n    }\n\n    .footer-actions.has-content {\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n        column-gap: ${mediumPadding};\n        margin: ${mediumPadding};\n    }\n\n    .footer-actions ::slotted(*) {\n        height: ${controlSlimHeight};\n    }\n`;\n"]}

package/dist/esm/chat/input/template.js

@@ -1,4 +1,4 @@
-import { html, ref, when } from '@ni/fast-element';
+import { html, ref, slotted, when } from '@ni/fast-element';
 import { buttonTag } from '@ni/nimble-components/dist/esm/button';
 import { iconPaperPlaneTag } from '@ni/nimble-components/dist/esm/icons/paper-plane';
 import { iconStopSquareTag } from '@ni/nimble-components/dist/esm/icons/stop-square';
@@ -6,6 +6,12 @@ import { iconExclamationMarkTag } from '@ni/nimble-components/dist/esm/icons/exc
 import { errorTextTemplate } from '@ni/nimble-components/dist/esm/patterns/error/template';
 export const template = 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}"
@@ -15,19 +21,27 @@ export const template = html `
         @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' : '')}"

package/dist/esm/chat/input/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/chat/input/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,sBAAsB,EAAE,MAAM,uDAAuD,CAAC;AAC/F,OAAO,EAAE,iBAAiB,EAAE,MAAM,wDAAwD,CAAC;AAG3F,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAW;;;UAG7B,GAAG,CAAC,UAAU,CAAC;uBACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;;oBAErB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;qBACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;oBACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,KAAsB,CAAC;kBAC9D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE;;OAExC,SAAS;;;8BAGc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;oBACpD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC;iBACnE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,sBAAsB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,sBAAsB,EAAE,CAAC;oBAC1E,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;gBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC;;;UAGjE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC;UAC3D,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EACjB,IAAI,CAAA,IAAI,iBAAiB,mBAAmB,iBAAiB,GAAG,EAChE,IAAI,CAAA,IAAI,iBAAiB,mBAAmB,iBAAiB,GAAG,CACnE;QACD,SAAS;OACV,sBAAsB;;4BAED,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,CAAC;+CAC7C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;SAC3D,sBAAsB;MACzB,iBAAiB;OAChB,CAAC","sourcesContent":["import { html, ref, when } from '@ni/fast-element';\nimport { buttonTag } from '@ni/nimble-components/dist/esm/button';\nimport { iconPaperPlaneTag } from '@ni/nimble-components/dist/esm/icons/paper-plane';\nimport { iconStopSquareTag } from '@ni/nimble-components/dist/esm/icons/stop-square';\nimport { iconExclamationMarkTag } from '@ni/nimble-components/dist/esm/icons/exclamation-mark';\nimport { errorTextTemplate } from '@ni/nimble-components/dist/esm/patterns/error/template';\nimport type { ChatInput } from '.';\n\nexport const template = html<ChatInput>`\n<div class=\"container\">\n    <textarea\n        ${ref('textArea')}\n        placeholder=\"${x => x.placeholder}\"\n        rows=\"1\"\n        tabindex=\"${x => x.tabIndex}\"\n        maxlength=\"${x => x.maxLength}\"\n        @keydown=\"${(x, c) => x.textAreaKeydownHandler(c.event as KeyboardEvent)}\"\n        @input=\"${x => x.textAreaInputHandler()}\"\n    ></textarea>\n    <${buttonTag}\n        class=\"action-button\"\n        appearance=\"block\"\n        appearance-variant=\"${x => (x.processing ? 'primary' : 'accent')}\"\n        ?disabled=${x => (x.processing ? false : (x.sendDisabled || x.isInputEmpty))}\n        @click=${x => (x.processing ? x.stopButtonClickHandler() : x.sendButtonClickHandler())}\n        tabindex=\"${x => x.tabIndex}\"\n        title=${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}\n        content-hidden\n    >\n        ${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}\n        ${when(\n            x => x.processing,\n            html`<${iconStopSquareTag} slot=\"start\"></${iconStopSquareTag}>`,\n            html`<${iconPaperPlaneTag} slot=\"start\"></${iconPaperPlaneTag}>`\n        )}\n    </${buttonTag}>\n    <${iconExclamationMarkTag}\n        severity=\"error\"\n        class=\"error-icon ${x => (x.scrollbarWidth >= 0 ? 'scrollbar-width-calculated' : '')}\"\n        style=\"--ni-private-scrollbar-width: ${x => x.scrollbarWidth}px;\"\n    ></${iconExclamationMarkTag}>\n    ${errorTextTemplate}\n</div>`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/chat/input/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,sBAAsB,EAAE,MAAM,uDAAuD,CAAC;AAC/F,OAAO,EAAE,iBAAiB,EAAE,MAAM,wDAAwD,CAAC;AAG3F,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAW;;kCAEL,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC;;;cAGpE,OAAO,CAAC,EAAE,QAAQ,EAAE,4BAA4B,EAAE,CAAC;;;;UAIvD,GAAG,CAAC,UAAU,CAAC;uBACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;;oBAErB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;qBACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;oBACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,KAAsB,CAAC;kBAC9D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE;;;yCAGN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC;;;kBAGzE,OAAO,CAAC,EAAE,QAAQ,EAAE,8BAA8B,EAAE,CAAC;;;WAG5D,SAAS;;;kCAGc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;wBACpD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC;qBACnE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,sBAAsB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,sBAAsB,EAAE,CAAC;wBAC1E,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC;;;cAGjE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC;cAC3D,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EACjB,IAAI,CAAA,IAAI,iBAAiB,mBAAmB,iBAAiB,GAAG,EAChE,IAAI,CAAA,IAAI,iBAAiB,mBAAmB,iBAAiB,GAAG,CACnE;YACD,SAAS;;OAEd,sBAAsB;;4BAED,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,CAAC;+CAC7C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;SAC3D,sBAAsB;MACzB,iBAAiB;OAChB,CAAC","sourcesContent":["import { html, ref, slotted, when } from '@ni/fast-element';\nimport { buttonTag } from '@ni/nimble-components/dist/esm/button';\nimport { iconPaperPlaneTag } from '@ni/nimble-components/dist/esm/icons/paper-plane';\nimport { iconStopSquareTag } from '@ni/nimble-components/dist/esm/icons/stop-square';\nimport { iconExclamationMarkTag } from '@ni/nimble-components/dist/esm/icons/exclamation-mark';\nimport { errorTextTemplate } from '@ni/nimble-components/dist/esm/patterns/error/template';\nimport type { ChatInput } from '.';\n\nexport const template = html<ChatInput>`\n<div class=\"container\">\n    <section class=\"attachments ${x => (x.attachmentsIsEmpty ? '' : 'has-content')}\">\n        <slot\n            name=\"attachments\"\n            ${slotted({ property: 'slottedAttachmentsElements' })}\n        ></slot>\n    </section>\n    <textarea\n        ${ref('textArea')}\n        placeholder=\"${x => x.placeholder}\"\n        rows=\"1\"\n        tabindex=\"${x => x.tabIndex}\"\n        maxlength=\"${x => x.maxLength}\"\n        @keydown=\"${(x, c) => x.textAreaKeydownHandler(c.event as KeyboardEvent)}\"\n        @input=\"${x => x.textAreaInputHandler()}\"\n    ></textarea>\n    <section class=\"footer\">\n        <section class=\"footer-actions ${x => (x.footerActionsIsEmpty ? '' : 'has-content')}\">\n            <slot\n                name=\"footer-actions\"\n                ${slotted({ property: 'slottedFooterActionsElements' })}\n            ></slot>\n        </section>\n        <${buttonTag}\n            class=\"action-button\"\n            appearance=\"block\"\n            appearance-variant=\"${x => (x.processing ? 'primary' : 'accent')}\"\n            ?disabled=${x => (x.processing ? false : (x.sendDisabled || x.isInputEmpty))}\n            @click=${x => (x.processing ? x.stopButtonClickHandler() : x.sendButtonClickHandler())}\n            tabindex=\"${x => x.tabIndex}\"\n            title=${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}\n            content-hidden\n        >\n            ${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}\n            ${when(\n                x => x.processing,\n                html`<${iconStopSquareTag} slot=\"start\"></${iconStopSquareTag}>`,\n                html`<${iconPaperPlaneTag} slot=\"start\"></${iconPaperPlaneTag}>`\n            )}\n        </${buttonTag}>\n    </section>\n    <${iconExclamationMarkTag}\n        severity=\"error\"\n        class=\"error-icon ${x => (x.scrollbarWidth >= 0 ? 'scrollbar-width-calculated' : '')}\"\n        style=\"--ni-private-scrollbar-width: ${x => x.scrollbarWidth}px;\"\n    ></${iconExclamationMarkTag}>\n    ${errorTextTemplate}\n</div>`;\n"]}

package/dist/esm/chat/input/testing/chat-input.pageobject.d.ts

@@ -21,9 +21,15 @@ export declare class ChatInputPageObject {
     getTextAreaMaxLength(): number | null;
     getPlaceholder(): string;
     getRenderedText(): string;
+    hasFooterActionsSlot(): boolean;
+    getFooterActionsSlotElementCount(): number;
+    hasAttachmentSlot(): boolean;
+    getAttachmentsSlotElementCount(): number;
     setText(text: string): void;
     pressEnterKey(): Promise<void>;
     pressShiftEnterKey(): Promise<void>;
     private getActionButton;
+    private getAttachmentsSlot;
+    private getFooterActionsSlot;
     private sendEnterKeyEvents;
 }

package/dist/esm/chat/input/testing/chat-input.pageobject.js

@@ -65,6 +65,18 @@ export class ChatInputPageObject {
     getRenderedText() {
         return this.element.textArea.value;
     }
+    hasFooterActionsSlot() {
+        return this.getFooterActionsSlot() !== null;
+    }
+    getFooterActionsSlotElementCount() {
+        return this.getFooterActionsSlot()?.assignedElements().length ?? 0;
+    }
+    hasAttachmentSlot() {
+        return this.getAttachmentsSlot() !== null;
+    }
+    getAttachmentsSlotElementCount() {
+        return this.getAttachmentsSlot()?.assignedElements().length ?? 0;
+    }
     setText(text) {
         this.element.textArea.focus();
         this.element.textArea.value = text;
@@ -83,6 +95,14 @@ export class ChatInputPageObject {
         const actionButton = this.element.shadowRoot.querySelector('.action-button');
         return actionButton;
     }
+    getAttachmentsSlot() {
+        const attachmentsSlot = this.element.shadowRoot.querySelector('slot[name="attachments"]');
+        return attachmentsSlot;
+    }
+    getFooterActionsSlot() {
+        const footerActionsSlot = this.element.shadowRoot.querySelector('slot[name="footer-actions"]');
+        return footerActionsSlot;
+    }
     async sendEnterKeyEvents(shiftKey) {
         const keyDownEvent = await sendKeyDownEvent(this.element.textArea, keyEnter, { shiftKey });
         if (!keyDownEvent.defaultPrevented) {

package/dist/esm/chat/input/testing/chat-input.pageobject.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-input.pageobject.js","sourceRoot":"","sources":["../../../../../src/chat/input/testing/chat-input.pageobject.ts"],"names":[],"mappings":"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","sourcesContent":["import { keyEnter } from '@ni/fast-web-utilities';\nimport { Button } from '@ni/nimble-components/dist/esm/button';\nimport { iconPaperPlaneTag } from '@ni/nimble-components/dist/esm/icons/paper-plane';\nimport { iconStopSquareTag } from '@ni/nimble-components/dist/esm/icons/stop-square';\nimport {\n    processUpdates,\n    waitForUpdatesAsync\n} from '@ni/nimble-components/dist/esm/testing/async-helpers';\nimport { sendKeyDownEvent } from '@ni/nimble-components/dist/esm/utilities/testing/component';\nimport type { ChatInput } from '..';\n\n/**\n * Page object for the `spright-chat-input` component to provide consistent ways\n * of querying and interacting with the component during tests.\n */\nexport class ChatInputPageObject {\n    public constructor(protected readonly element: ChatInput) {}\n\n    public isButtonEnabled(): boolean {\n        return !this.getActionButton().disabled;\n    }\n\n    public isProcessing(): boolean {\n        return this.element.processing;\n    }\n\n    public isTextAreaFocused(): boolean {\n        return this.element.textArea === this.element.shadowRoot?.activeElement;\n    }\n\n    public clickSendButton(): void {\n        if (!this.element.processing) {\n            this.getActionButton().click();\n        }\n    }\n\n    public clickStopButton(): void {\n        if (this.element.processing) {\n            this.getActionButton().click();\n        }\n    }\n\n    public getButtonTitle(): string {\n        return this.getActionButton().title;\n    }\n\n    public buttonHasSendIcon(): boolean {\n        return this.getActionButton().querySelector(iconPaperPlaneTag) !== null;\n    }\n\n    public buttonHasStopIcon(): boolean {\n        return this.getActionButton().querySelector(iconStopSquareTag) !== null;\n    }\n\n    public getButtonTextContent(): string {\n        return this.getActionButton().textContent?.trim() ?? '';\n    }\n\n    public getButtonTabIndex(): string | null {\n        return this.getActionButton().getAttribute('tabindex');\n    }\n\n    public textAreaHasFocus(): boolean {\n        return (\n            document.activeElement === this.element\n            && this.element.shadowRoot?.activeElement === this.element.textArea\n        );\n    }\n\n    public getTextAreaTabIndex(): string | null {\n        return this.element.textArea!.getAttribute('tabindex');\n    }\n\n    public getTextAreaMaxLength(): number | null {\n        return this.element.textArea!.maxLength;\n    }\n\n    public getPlaceholder(): string {\n        if (this.element.textArea!.value) {\n            throw Error('Placeholder not visible');\n        }\n        return this.element.textArea!.placeholder;\n    }\n\n    public getRenderedText(): string {\n        return this.element.textArea!.value;\n    }\n\n    public setText(text: string): void {\n        this.element.textArea!.focus();\n        this.element.textArea!.value = text;\n        this.element.textArea!.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n        processUpdates();\n    }\n\n    public async pressEnterKey(): Promise<void> {\n        this.element.textArea!.focus();\n        await this.sendEnterKeyEvents(false);\n    }\n\n    public async pressShiftEnterKey(): Promise<void> {\n        this.element.textArea!.focus();\n        await this.sendEnterKeyEvents(true);\n    }\n\n    private getActionButton(): Button {\n        const actionButton = this.element.shadowRoot!.querySelector<Button>('.action-button')!;\n        return actionButton;\n    }\n\n    private async sendEnterKeyEvents(shiftKey: boolean): Promise<void> {\n        const keyDownEvent = await sendKeyDownEvent(\n            this.element.textArea!,\n            keyEnter,\n            { shiftKey }\n        );\n        if (!keyDownEvent.defaultPrevented) {\n            this.element.textArea!.value += '\\n';\n            this.element.textArea!.dispatchEvent(new InputEvent('input'));\n        }\n\n        await waitForUpdatesAsync();\n    }\n}\n"]}
+{"version":3,"file":"chat-input.pageobject.js","sourceRoot":"","sources":["../../../../../src/chat/input/testing/chat-input.pageobject.ts"],"names":[],"mappings":"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","sourcesContent":["import { keyEnter } from '@ni/fast-web-utilities';\nimport { Button } from '@ni/nimble-components/dist/esm/button';\nimport { iconPaperPlaneTag } from '@ni/nimble-components/dist/esm/icons/paper-plane';\nimport { iconStopSquareTag } from '@ni/nimble-components/dist/esm/icons/stop-square';\nimport {\n    processUpdates,\n    waitForUpdatesAsync\n} from '@ni/nimble-components/dist/esm/testing/async-helpers';\nimport { sendKeyDownEvent } from '@ni/nimble-components/dist/esm/utilities/testing/component';\nimport type { ChatInput } from '..';\n\n/**\n * Page object for the `spright-chat-input` component to provide consistent ways\n * of querying and interacting with the component during tests.\n */\nexport class ChatInputPageObject {\n    public constructor(protected readonly element: ChatInput) {}\n\n    public isButtonEnabled(): boolean {\n        return !this.getActionButton().disabled;\n    }\n\n    public isProcessing(): boolean {\n        return this.element.processing;\n    }\n\n    public isTextAreaFocused(): boolean {\n        return this.element.textArea === this.element.shadowRoot?.activeElement;\n    }\n\n    public clickSendButton(): void {\n        if (!this.element.processing) {\n            this.getActionButton().click();\n        }\n    }\n\n    public clickStopButton(): void {\n        if (this.element.processing) {\n            this.getActionButton().click();\n        }\n    }\n\n    public getButtonTitle(): string {\n        return this.getActionButton().title;\n    }\n\n    public buttonHasSendIcon(): boolean {\n        return this.getActionButton().querySelector(iconPaperPlaneTag) !== null;\n    }\n\n    public buttonHasStopIcon(): boolean {\n        return this.getActionButton().querySelector(iconStopSquareTag) !== null;\n    }\n\n    public getButtonTextContent(): string {\n        return this.getActionButton().textContent?.trim() ?? '';\n    }\n\n    public getButtonTabIndex(): string | null {\n        return this.getActionButton().getAttribute('tabindex');\n    }\n\n    public textAreaHasFocus(): boolean {\n        return (\n            document.activeElement === this.element\n            && this.element.shadowRoot?.activeElement === this.element.textArea\n        );\n    }\n\n    public getTextAreaTabIndex(): string | null {\n        return this.element.textArea!.getAttribute('tabindex');\n    }\n\n    public getTextAreaMaxLength(): number | null {\n        return this.element.textArea!.maxLength;\n    }\n\n    public getPlaceholder(): string {\n        if (this.element.textArea!.value) {\n            throw Error('Placeholder not visible');\n        }\n        return this.element.textArea!.placeholder;\n    }\n\n    public getRenderedText(): string {\n        return this.element.textArea!.value;\n    }\n\n    public hasFooterActionsSlot(): boolean {\n        return this.getFooterActionsSlot() !== null;\n    }\n\n    public getFooterActionsSlotElementCount(): number {\n        return this.getFooterActionsSlot()?.assignedElements().length ?? 0;\n    }\n\n    public hasAttachmentSlot(): boolean {\n        return this.getAttachmentsSlot() !== null;\n    }\n\n    public getAttachmentsSlotElementCount(): number {\n        return this.getAttachmentsSlot()?.assignedElements().length ?? 0;\n    }\n\n    public setText(text: string): void {\n        this.element.textArea!.focus();\n        this.element.textArea!.value = text;\n        this.element.textArea!.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n        processUpdates();\n    }\n\n    public async pressEnterKey(): Promise<void> {\n        this.element.textArea!.focus();\n        await this.sendEnterKeyEvents(false);\n    }\n\n    public async pressShiftEnterKey(): Promise<void> {\n        this.element.textArea!.focus();\n        await this.sendEnterKeyEvents(true);\n    }\n\n    private getActionButton(): Button {\n        const actionButton = this.element.shadowRoot!.querySelector<Button>('.action-button')!;\n        return actionButton;\n    }\n\n    private getAttachmentsSlot(): HTMLSlotElement | null {\n        const attachmentsSlot = this.element.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=\"attachments\"]');\n        return attachmentsSlot;\n    }\n\n    private getFooterActionsSlot(): HTMLSlotElement | null {\n        const footerActionsSlot = this.element.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=\"footer-actions\"]');\n        return footerActionsSlot;\n    }\n\n    private async sendEnterKeyEvents(shiftKey: boolean): Promise<void> {\n        const keyDownEvent = await sendKeyDownEvent(\n            this.element.textArea!,\n            keyEnter,\n            { shiftKey }\n        );\n        if (!keyDownEvent.defaultPrevented) {\n            this.element.textArea!.value += '\\n';\n            this.element.textArea!.dispatchEvent(new InputEvent('input'));\n        }\n\n        await waitForUpdatesAsync();\n    }\n}\n"]}

package/dist/esm/chat/message/welcome/index.d.ts

@@ -0,0 +1,19 @@
+import { FoundationElement, type FoundationElementDefinition } from '@ni/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'spright-chat-message-welcome': ChatMessageWelcome;
+    }
+}
+/**
+ * SprightChatMessageWelcome configuration options
+ * @public
+ */
+export type ChatMessageWelcomeOptions = FoundationElementDefinition;
+/**
+ * A Spright component for displaying a welcome chat message
+ */
+export declare class ChatMessageWelcome extends FoundationElement {
+    welcomeTitle?: string;
+    subtitle?: string;
+}
+export declare const chatMessageWelcomeTag = "spright-chat-message-welcome";

package/dist/esm/chat/message/welcome/index.js

@@ -0,0 +1,24 @@
+import { __decorate } from "tslib";
+import { attr } from '@ni/fast-element';
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A Spright component for displaying a welcome chat message
+ */
+export class ChatMessageWelcome extends FoundationElement {
+}
+__decorate([
+    attr({ attribute: 'welcome-title' })
+], ChatMessageWelcome.prototype, "welcomeTitle", void 0);
+__decorate([
+    attr
+], ChatMessageWelcome.prototype, "subtitle", void 0);
+const sprightChatMessageWelcome = ChatMessageWelcome.compose({
+    baseName: 'chat-message-welcome',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageWelcome());
+export const chatMessageWelcomeTag = 'spright-chat-message-welcome';
+//# sourceMappingURL=index.js.map

package/dist/esm/chat/message/welcome/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/chat/message/welcome/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EACH,YAAY,EACZ,iBAAiB,EAEpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AActC;;GAEG;AACH,MAAM,OAAO,kBAAmB,SAAQ,iBAAiB;CAMxD;AAJU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;wDACR;AAGtB;IADN,IAAI;oDACoB;AAG7B,MAAM,yBAAyB,GAAG,kBAAkB,CAAC,OAAO,CAAC;IACzD,QAAQ,EAAE,sBAAsB;IAChC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,yBAAyB,EAAE,CAAC,CAAC;AACvF,MAAM,CAAC,MAAM,qBAAqB,GAAG,8BAA8B,CAAC","sourcesContent":["import { attr } from '@ni/fast-element';\nimport {\n    DesignSystem,\n    FoundationElement,\n    type FoundationElementDefinition\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'spright-chat-message-welcome': ChatMessageWelcome;\n    }\n}\n\n/**\n * SprightChatMessageWelcome configuration options\n * @public\n */\nexport type ChatMessageWelcomeOptions = FoundationElementDefinition;\n\n/**\n * A Spright component for displaying a welcome chat message\n */\nexport class ChatMessageWelcome extends FoundationElement {\n    @attr({ attribute: 'welcome-title' })\n    public welcomeTitle?: string;\n\n    @attr\n    public subtitle?: string;\n}\n\nconst sprightChatMessageWelcome = ChatMessageWelcome.compose({\n    baseName: 'chat-message-welcome',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageWelcome());\nexport const chatMessageWelcomeTag = 'spright-chat-message-welcome';\n"]}

package/dist/esm/chat/message/welcome/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@ni/fast-element").ElementStyles;