diff --git a/change/@ni-spright-components-6dcca5fc-0353-4ba2-b325-63565d42b95e.json b/change/@ni-spright-components-6dcca5fc-0353-4ba2-b325-63565d42b95e.json
new file mode 100644
index 0000000000..7b3455ef12
--- /dev/null
+++ b/change/@ni-spright-components-6dcca5fc-0353-4ba2-b325-63565d42b95e.json
@@ -0,0 +1,7 @@
+{
+ "type": "minor",
+ "comment": "Productize ChatConversation and ChatMessage elements",
+ "packageName": "@ni/spright-components",
+ "email": "jose.a.hernandez@ni.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/spright-components/src/all-components.ts b/packages/spright-components/src/all-components.ts
index 888b09c6cd..2ed36d88e2 100644
--- a/packages/spright-components/src/all-components.ts
+++ b/packages/spright-components/src/all-components.ts
@@ -6,4 +6,6 @@
import '@ni/nimble-components/dist/esm/all-components';
+import './chat/conversation';
+import './chat/message';
import './rectangle';
diff --git a/packages/spright-components/src/chat/conversation/index.ts b/packages/spright-components/src/chat/conversation/index.ts
new file mode 100644
index 0000000000..8b21371e4d
--- /dev/null
+++ b/packages/spright-components/src/chat/conversation/index.ts
@@ -0,0 +1,25 @@
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'spright-chat-conversation': ChatConversation;
+ }
+}
+
+/**
+ * A Spright component for displaying a series of chat messages
+ */
+export class ChatConversation extends FoundationElement {}
+
+const sprightChatConversation = ChatConversation.compose({
+ baseName: 'chat-conversation',
+ template,
+ styles
+});
+
+DesignSystem.getOrCreate()
+ .withPrefix('spright')
+ .register(sprightChatConversation());
+export const chatConversationTag = 'spright-chat-conversation';
diff --git a/packages/spright-components/src/chat/conversation/styles.ts b/packages/spright-components/src/chat/conversation/styles.ts
new file mode 100644
index 0000000000..800d5c7f6e
--- /dev/null
+++ b/packages/spright-components/src/chat/conversation/styles.ts
@@ -0,0 +1,20 @@
+import { css } from '@microsoft/fast-element';
+import {
+ applicationBackgroundColor,
+ mediumPadding,
+ standardPadding
+} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../utilities/style/display';
+
+export const styles = css`
+ ${display('flex')}
+
+ :host {
+ flex-direction: column;
+ justify-content: flex-start;
+ row-gap: ${standardPadding};
+ padding: ${mediumPadding};
+ background: ${applicationBackgroundColor};
+ overflow-y: auto;
+ }
+`;
diff --git a/packages/spright-components/src/chat/conversation/template.ts b/packages/spright-components/src/chat/conversation/template.ts
new file mode 100644
index 0000000000..0c74fc268b
--- /dev/null
+++ b/packages/spright-components/src/chat/conversation/template.ts
@@ -0,0 +1,7 @@
+import { html } from '@microsoft/fast-element';
+import type { ChatConversation } from '.';
+
+/* eslint-disable @typescript-eslint/indent */
+// prettier-ignore
+export const template = html<ChatConversation>`<slot></slot>`;
+/* eslint-enable @typescript-eslint/indent */
diff --git a/packages/spright-components/src/chat/conversation/tests/chat-conversation.spec.ts b/packages/spright-components/src/chat/conversation/tests/chat-conversation.spec.ts
new file mode 100644
index 0000000000..4a3b2cb64d
--- /dev/null
+++ b/packages/spright-components/src/chat/conversation/tests/chat-conversation.spec.ts
@@ -0,0 +1,34 @@
+import { html } from '@microsoft/fast-element';
+import { ChatConversation, chatConversationTag } from '..';
+import { fixture, type Fixture } from '../../../utilities/tests/fixture';
+
+async function setup(): Promise<Fixture<ChatConversation>> {
+ return await fixture<ChatConversation>(
+ html`<${chatConversationTag}></${chatConversationTag}>`
+ );
+}
+
+describe('ChatConversation', () => {
+ let element: ChatConversation;
+ let connect: () => Promise<void>;
+ let disconnect: () => Promise<void>;
+
+ beforeEach(async () => {
+ ({ element, connect, disconnect } = await setup());
+ });
+
+ afterEach(async () => {
+ await disconnect();
+ });
+
+ it('can construct an element instance', () => {
+ expect(document.createElement(chatConversationTag)).toBeInstanceOf(
+ ChatConversation
+ );
+ });
+
+ it('should have a slot element in the shadow DOM', async () => {
+ await connect();
+ expect(element.shadowRoot?.querySelector('SLOT')).not.toBeNull();
+ });
+});
diff --git a/packages/spright-components/src/chat/message/index.ts b/packages/spright-components/src/chat/message/index.ts
new file mode 100644
index 0000000000..356a986af4
--- /dev/null
+++ b/packages/spright-components/src/chat/message/index.ts
@@ -0,0 +1,34 @@
+import { attr } from '@microsoft/fast-element';
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+import { ChatMessageType } from './types';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'spright-chat-message': ChatMessage;
+ }
+}
+
+/**
+ * A Spright component for displaying a chat message
+ */
+export class ChatMessage extends FoundationElement {
+ /**
+ * @public
+ * The message type of this message in the chat conversation
+ * @remarks
+ * HTML Attribute: message-type
+ */
+ @attr({ attribute: 'message-type' })
+ public readonly messageType: ChatMessageType = ChatMessageType.system;
+}
+
+const sprightChatMessage = ChatMessage.compose({
+ baseName: 'chat-message',
+ template,
+ styles
+});
+
+DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());
+export const chatMessageTag = 'spright-chat-message';
diff --git a/packages/spright-components/src/chat/message/styles.ts b/packages/spright-components/src/chat/message/styles.ts
new file mode 100644
index 0000000000..2aa2dd2f0a
--- /dev/null
+++ b/packages/spright-components/src/chat/message/styles.ts
@@ -0,0 +1,51 @@
+import { css } from '@microsoft/fast-element';
+import {
+ bodyFont,
+ bodyFontColor,
+ borderHoverColor,
+ borderWidth,
+ fillSelectedColor,
+ mediumPadding
+} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../utilities/style/display';
+
+export const styles = css`
+ ${display('flex')}
+
+ :host {
+ min-width: 16px;
+ min-height: 16px;
+
+ flex-direction: row;
+ justify-content: center;
+ flex-shrink: 0;
+ font: ${bodyFont};
+ color: ${bodyFontColor};
+ }
+
+ :host([message-type='outbound']) {
+ justify-content: flex-end;
+ }
+
+ :host([message-type='inbound']) {
+ justify-content: flex-start;
+ }
+
+ div {
+ max-width: calc(100% - 200px);
+ width: fit-content;
+ height: fit-content;
+ padding: ${mediumPadding};
+ overflow-x: auto;
+ }
+
+ :host([message-type='outbound']) div {
+ background: ${fillSelectedColor};
+ border: ${borderWidth} solid ${borderHoverColor};
+ border-radius: 8px 8px 0px 8px;
+ }
+
+ :host([message-type='inbound']) div {
+ border-radius: 8px 8px 8px 0px;
+ }
+`;
diff --git a/packages/spright-components/src/chat/message/template.ts b/packages/spright-components/src/chat/message/template.ts
new file mode 100644
index 0000000000..4fd932c759
--- /dev/null
+++ b/packages/spright-components/src/chat/message/template.ts
@@ -0,0 +1,7 @@
+import { html } from '@microsoft/fast-element';
+import type { ChatMessage } from '.';
+
+/* eslint-disable @typescript-eslint/indent */
+// prettier-ignore
+export const template = html<ChatMessage>`<div><slot></slot></div>`;
+/* eslint-enable @typescript-eslint/indent */
diff --git a/packages/spright-components/src/chat/message/tests/chat-message.spec.ts b/packages/spright-components/src/chat/message/tests/chat-message.spec.ts
new file mode 100644
index 0000000000..3350280ad2
--- /dev/null
+++ b/packages/spright-components/src/chat/message/tests/chat-message.spec.ts
@@ -0,0 +1,43 @@
+import { html } from '@microsoft/fast-element';
+import { ChatMessage, chatMessageTag } from '..';
+import { fixture, type Fixture } from '../../../utilities/tests/fixture';
+import { ChatMessageType } from '../types';
+
+async function setup(): Promise<Fixture<ChatMessage>> {
+ return await fixture<ChatMessage>(
+ html`<${chatMessageTag}>Some message</${chatMessageTag}>`
+ );
+}
+
+describe('ChatMessage', () => {
+ let element: ChatMessage;
+ let connect: () => Promise<void>;
+ let disconnect: () => Promise<void>;
+
+ beforeEach(async () => {
+ ({ element, connect, disconnect } = await setup());
+ });
+
+ afterEach(async () => {
+ await disconnect();
+ });
+
+ it('can construct an element instance', () => {
+ expect(document.createElement(chatMessageTag)).toBeInstanceOf(
+ ChatMessage
+ );
+ });
+
+ it('should have a slot element in the shadow DOM', async () => {
+ await connect();
+ expect(element.shadowRoot?.querySelector('SLOT')).not.toBeNull();
+ expect(
+ element?.innerText?.includes('Some message', undefined)
+ ).toBeTrue();
+ });
+
+ it("should initialize 'message-type' to default", async () => {
+ await connect();
+ expect(element.messageType).toBe(ChatMessageType.system);
+ });
+});
diff --git a/packages/spright-components/src/chat/message/tests/types.spec.ts b/packages/spright-components/src/chat/message/tests/types.spec.ts
new file mode 100644
index 0000000000..7f98d4735e
--- /dev/null
+++ b/packages/spright-components/src/chat/message/tests/types.spec.ts
@@ -0,0 +1,9 @@
+import type { ChatMessageType } from '../types';
+
+describe('ChatMessage message type', () => {
+ it('ChatMessageType fails compile if assigning arbitrary string values', () => {
+ // @ts-expect-error This expect will fail if the enum-like type is missing "as const"
+ const messageType: ChatMessageType = 'hello';
+ expect(messageType!).toEqual('hello');
+ });
+});
diff --git a/packages/spright-components/src/chat/message/types.ts b/packages/spright-components/src/chat/message/types.ts
new file mode 100644
index 0000000000..e332d86832
--- /dev/null
+++ b/packages/spright-components/src/chat/message/types.ts
@@ -0,0 +1,12 @@
+/**
+ * A message type in a chat conversation.
+ * @public
+ */
+export const ChatMessageType = {
+ system: undefined,
+ outbound: 'outbound',
+ inbound: 'inbound'
+} as const;
+
+export type ChatMessageType =
+ (typeof ChatMessageType)[keyof typeof ChatMessageType];
diff --git a/packages/storybook/src/docs/component-status.stories.ts b/packages/storybook/src/docs/component-status.stories.ts
index 881c0f3e4b..50fa740b9f 100644
--- a/packages/storybook/src/docs/component-status.stories.ts
+++ b/packages/storybook/src/docs/component-status.stories.ts
@@ -6,6 +6,7 @@ import { tableColumnMappingTag } from '../../../nimble-components/src/table-colu
import { mappingIconTag } from '../../../nimble-components/src/mapping/icon';
import { iconCheckTag } from '../../../nimble-components/src/icons/check';
import { iconTriangleTag } from '../../../nimble-components/src/icons/triangle';
+import { iconTriangleFilledTag } from '../../../nimble-components/src/icons/triangle-filled';
import { iconXmarkTag } from '../../../nimble-components/src/icons/xmark';
import { tableFitRowsHeight } from '../../../nimble-components/src/theme-provider/design-tokens';
import { ComponentFrameworkStatus } from './types';
@@ -136,6 +137,16 @@ const components = [
angularStatus: ComponentFrameworkStatus.ready,
blazorStatus: ComponentFrameworkStatus.ready
},
+ {
+ componentName: 'Chat',
+ componentHref: './?path=/docs/spright-chat--docs',
+ designHref:
+ 'https://www.figma.com/design/PO9mFOu5BCl8aJvFchEeuN/Nimble_Components?node-id=12342-81782&node-type=canvas&t=L5GvLaC3injrqWrR-0',
+ designLabel: 'Figma',
+ componentStatus: ComponentFrameworkStatus.spright,
+ angularStatus: ComponentFrameworkStatus.doesNotExist,
+ blazorStatus: ComponentFrameworkStatus.doesNotExist
+ },
{
componentName: 'Checkbox',
componentHref: './?path=/docs/components-checkbox--docs',
@@ -547,6 +558,7 @@ const components = [
const iconMappings = html`
<${mappingIconTag} key="${ComponentFrameworkStatus.ready}" text="Ready" icon="${iconCheckTag}" severity="success" text-hidden></${mappingIconTag}>
+ <${mappingIconTag} key="${ComponentFrameworkStatus.spright}" text="Spright" icon="${iconTriangleFilledTag}" severity="success"></${mappingIconTag}>
<${mappingIconTag} key="${ComponentFrameworkStatus.incubating}" text="Incubating" icon="${iconTriangleTag}" severity="warning"></${mappingIconTag}>
<${mappingIconTag} key="${ComponentFrameworkStatus.doesNotExist}" text="Does not exist" icon="${iconXmarkTag}" severity="error"></${mappingIconTag}>
`;
diff --git a/packages/storybook/src/docs/types.ts b/packages/storybook/src/docs/types.ts
index c1ff0eb19c..fc097937a4 100644
--- a/packages/storybook/src/docs/types.ts
+++ b/packages/storybook/src/docs/types.ts
@@ -1,5 +1,6 @@
export const ComponentFrameworkStatus = {
ready: 'ready',
+ spright: 'spright',
incubating: 'incubating',
doesNotExist: 'does_not_exist'
} as const;
diff --git a/packages/storybook/src/spright/chat/conversation/chat-conversation-matrix.stories.ts b/packages/storybook/src/spright/chat/conversation/chat-conversation-matrix.stories.ts
new file mode 100644
index 0000000000..a159a7288a
--- /dev/null
+++ b/packages/storybook/src/spright/chat/conversation/chat-conversation-matrix.stories.ts
@@ -0,0 +1,138 @@
+import type { StoryFn, Meta } from '@storybook/html';
+import { html, ViewTemplate } from '@microsoft/fast-element';
+import { chatMessageTag } from '../../../../../spright-components/src/chat/message';
+import { ChatMessageType } from '../../../../../spright-components/src/chat/message/types';
+import {
+ createMatrix,
+ sharedMatrixParameters,
+ createMatrixThemeStory
+} from '../../../utilities/matrix';
+import { createStory } from '../../../utilities/storybook';
+import { hiddenWrapper } from '../../../utilities/hidden';
+import { chatConversationTag } from '../../../../../spright-components/src/chat/conversation';
+import { textCustomizationWrapper } from '../../../utilities/text-customization';
+import {
+ bodyFont,
+ bodyFontColor
+} from '../../../../../nimble-components/src/theme-provider/design-tokens';
+
+const messageTypeStates = [
+ ['outbound', ChatMessageType.outbound],
+ ['inbound', ChatMessageType.inbound],
+ ['system', ChatMessageType.system]
+] as const;
+type MessageTypeStates = (typeof messageTypeStates)[number];
+const outboundState = messageTypeStates[0];
+const inboudState = messageTypeStates[1];
+const systemState = messageTypeStates[2];
+
+const metadata: Meta = {
+ title: 'Tests Spright/Chat Conversation',
+ parameters: {
+ ...sharedMatrixParameters()
+ }
+};
+
+export default metadata;
+
+const viewportStates = [
+ ['chat popup', '300px', '300px'],
+ ['mobile vertical', '300px', '600px'],
+ ['mobile horizontal', '600px', '300px'],
+ ['desktop', '600px', '600px']
+] as const;
+type ViewportStates = (typeof viewportStates)[number];
+
+const contentWidthStates = [
+ ['thin', '100px'],
+ ['wide', '600px']
+] as const;
+type ContentWidthStates = (typeof contentWidthStates)[number];
+
+const contentHeightStates = [
+ ['short', '100px'],
+ ['tall', '600px']
+] as const;
+type ContentHeightStates = (typeof contentHeightStates)[number];
+
+const componentSizing = (
+ [_messageTypeLabel, messageType]: MessageTypeStates,
+ [viewportLabel, viewportWidth, viewportHeight]: ViewportStates,
+ [contentWidthLabel, contentWidth]: ContentWidthStates,
+ [contentHeightLabel, contentHeight]: ContentHeightStates
+): ViewTemplate => html`
+ <p
+ style="
+ font: var(${bodyFont.cssCustomProperty});
+ color: var(${bodyFontColor.cssCustomProperty});
+ margin-bottom: 0px;
+ "
+ >
+ viewport:${() => viewportLabel}, content:${() => contentWidthLabel},${() => contentHeightLabel}
+ </p>
+ <div style="
+ width: ${viewportWidth};
+ height: ${viewportHeight};
+ border: 1px dashed red;
+ ">
+ <${chatConversationTag} style="
+ width: 100%;
+ height: 100%;
+ ">
+ <${chatMessageTag} message-type="${() => messageType}">
+ <div style="
+ width: ${contentWidth};
+ height: ${contentHeight};
+ background: blue;
+ display: inline-block;
+ "
+ ></div>
+ </${chatMessageTag}>
+ </${chatConversationTag}>
+ </div>
+`;
+
+export const outboundSizing: StoryFn = createStory(html`
+ ${createMatrix(componentSizing, [
+ [outboundState],
+ viewportStates,
+ contentWidthStates,
+ contentHeightStates
+ ])}
+`);
+
+export const inboundSizing: StoryFn = createStory(html`
+ ${createMatrix(componentSizing, [
+ [inboudState],
+ viewportStates,
+ contentWidthStates,
+ contentHeightStates
+ ])}
+`);
+
+export const systemSizing: StoryFn = createStory(html`
+ ${createMatrix(componentSizing, [
+ [systemState],
+ viewportStates,
+ contentWidthStates,
+ contentHeightStates
+ ])}
+`);
+
+export const conversationHidden: StoryFn = createStory(
+ hiddenWrapper(
+ html`<${chatConversationTag} hidden>Hidden Chat Conversation</${chatConversationTag}>`
+ )
+);
+
+export const messageHidden: StoryFn = createStory(
+ hiddenWrapper(
+ html`<${chatMessageTag} hidden>Hidden Chat Message</${chatMessageTag}>`
+ )
+);
+
+export const messageTextCustomized: StoryFn = createMatrixThemeStory(
+ textCustomizationWrapper(
+ html`<${chatMessageTag}>Message</${chatMessageTag}>`
+ )
+);
diff --git a/packages/storybook/src/spright/chat/conversation/chat-conversation.mdx b/packages/storybook/src/spright/chat/conversation/chat-conversation.mdx
new file mode 100644
index 0000000000..4dc0e41523
--- /dev/null
+++ b/packages/storybook/src/spright/chat/conversation/chat-conversation.mdx
@@ -0,0 +1,74 @@
+import { Controls, Canvas, Meta, Title } from '@storybook/blocks';
+import * as conversationStories from './chat-conversation.stories';
+import * as messageStories from '../message/chat-message.stories';
+import ComponentApisLink from '../../../docs/component-apis-link.mdx';
+import { chatConversationTag } from '../../../../../spright-components/src/chat/conversation';
+import { chatMessageTag } from '../../../../../spright-components/src/chat/message';
+
+<Meta of={conversationStories} />
+<Title of={conversationStories} />
+
+Chat components are used to display a conversation with a chat bot or other
+users. The components can display messages but the application is responsible
+for connecting them to a source of data.
+
+Components include a chat message and a chat conversation, which is a collection
+of messages.
+
+## API
+
+<ComponentApisLink />
+
+### Chat conversation
+
+Use the <Tag name={chatConversationTag} /> element to display a series of
+messages in a conversation.
+
+<Canvas of={conversationStories.chatConversation} />
+<Controls of={conversationStories.chatConversation} />
+
+### Chat message
+
+Use the <Tag name={chatMessageTag} /> element to display content in a message.
+Clients can place any HTML content within the message.
+
+#### Text message content
+
+<Canvas of={messageStories.chatMessageText} />
+<Controls of={messageStories.chatMessageText} />
+
+#### Rich text message content
+
+<Canvas of={messageStories.chatMessageRichText} />
+<Controls of={messageStories.chatMessageRichText} />
+
+#### Spinner message content
+
+<Canvas of={messageStories.chatMessageSpinner} />
+<Controls of={messageStories.chatMessageSpinner} />
+
+#### Image message content
+
+<Canvas of={messageStories.chatMessageImage} />
+<Controls of={messageStories.chatMessageImage} />
+
+#### Prompt buttons message content
+
+<Canvas of={messageStories.chatMessagePrompts} />
+<Controls of={messageStories.chatMessagePrompts} />
+
+## Usage
+
+These components are part of [Spright](?path=/docs/spright-docs--docs). They can
+be used in production applications but are not yet part of the core Nimble
+library for reasons including:
+
+1. the interaction and visual design are iterating rapidly
+2. we are unsure if the components are sufficiently atomic or general purpose to
+ belong in Nimble
+3. the implementation has not yet prioritized Nimble requirements like
+ accessibility and support for all frameworks
+
+{/* ## Accessibility */}
+
+{/* ## Resources */}
diff --git a/packages/storybook/src/spright/chat/conversation/chat-conversation.react.tsx b/packages/storybook/src/spright/chat/conversation/chat-conversation.react.tsx
new file mode 100644
index 0000000000..a470c8d309
--- /dev/null
+++ b/packages/storybook/src/spright/chat/conversation/chat-conversation.react.tsx
@@ -0,0 +1,4 @@
+import { ChatConversation } from '../../../../../spright-components/src/chat/conversation';
+import { wrap } from '../../../utilities/react-wrapper';
+
+export const SprightChatConversation = wrap(ChatConversation);
diff --git a/packages/storybook/src/spright/chat/conversation/chat-conversation.stories.ts b/packages/storybook/src/spright/chat/conversation/chat-conversation.stories.ts
new file mode 100644
index 0000000000..15ec0f3ef5
--- /dev/null
+++ b/packages/storybook/src/spright/chat/conversation/chat-conversation.stories.ts
@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/html';
+import { html } from '@microsoft/fast-element';
+import { buttonTag } from '../../../../../nimble-components/src/button';
+import { chatConversationTag } from '../../../../../spright-components/src/chat/conversation';
+import { ChatMessageType } from '../../../../../spright-components/src/chat/message/types';
+import { chatMessageTag } from '../../../../../spright-components/src/chat/message';
+import { richTextViewerTag } from '../../../../../nimble-components/src/rich-text/viewer';
+import { spinnerTag } from '../../../../../nimble-components/src/spinner';
+import {
+ apiCategory,
+ createUserSelectedThemeStory
+} from '../../../utilities/storybook';
+import { imgBlobUrl, markdownExample } from './story-helpers';
+import { ButtonAppearance } from '../../../../../nimble-components/src/menu-button/types';
+import { SpinnerAppearance } from '../../../../../nimble-components/src/spinner/types';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface ChatConversationArgs {}
+
+const metadata: Meta<ChatConversationArgs> = {
+ title: 'Spright/Chat Conversation'
+};
+
+export const chatConversation: StoryObj<ChatConversationArgs> = {
+ parameters: {
+ actions: {}
+ },
+ render: createUserSelectedThemeStory(html`
+ <${chatConversationTag}>
+ <${chatMessageTag} message-type="${() => ChatMessageType.inbound}">
+ To start, press any key.
+ </${chatMessageTag}>
+ <${chatMessageTag} message-type="${() => ChatMessageType.outbound}">
+ Where is the Any key?
+ </${chatMessageTag}>
+ <${chatMessageTag} message-type="${() => ChatMessageType.outbound}">
+ <${richTextViewerTag} :markdown="${() => markdownExample}"></${richTextViewerTag}>
+ </${chatMessageTag}>
+ <${chatMessageTag} message-type="${() => ChatMessageType.system}">
+ <${spinnerTag} appearance="${() => SpinnerAppearance.accent}"></${spinnerTag}>
+ </${chatMessageTag}>
+ <${chatMessageTag} message-type="${() => ChatMessageType.inbound}">
+ <img width="100" height="100" :src=${() => imgBlobUrl}>
+ </${chatMessageTag}>
+ <${chatMessageTag} message-type="${() => ChatMessageType.system}">
+ <${buttonTag} appearance="${() => ButtonAppearance.block}">
+ Order a tab
+ </${buttonTag}>
+ <${buttonTag} appearance="${() => ButtonAppearance.block}">
+ Check core temperature
+ </${buttonTag}>
+ </${chatMessageTag}>
+ </${chatConversationTag}>
+ `),
+ argTypes: {
+ content: {
+ name: 'default',
+ description:
+ 'The messages to display in the chat conversation. The DOM order of the messages controls their screen order within the conversation (earlier DOM order implies older message)',
+ table: { category: apiCategory.slots }
+ }
+ }
+};
+
+export default metadata;
diff --git a/packages/storybook/src/spright/chat/conversation/story-helpers.ts b/packages/storybook/src/spright/chat/conversation/story-helpers.ts
new file mode 100644
index 0000000000..ff094a0cc8
--- /dev/null
+++ b/packages/storybook/src/spright/chat/conversation/story-helpers.ts
@@ -0,0 +1,31 @@
+import { webviCustom16X16 } from '@ni/nimble-tokens/dist/icons/js';
+
+const imgBlob = new Blob([webviCustom16X16.data], {
+ type: 'image/svg+xml'
+});
+export const imgBlobUrl = URL.createObjectURL(imgBlob);
+
+export const markdownExample = "I see **Esc**, **Crtl**, and **Pg Up**. There doesn't seem to be any **Any** key.";
+
+export const multiLineMarkdownExample = `
+Introduction to TestStand
+
+NI TestStand is a flexible and open test management framework for building, customizing, and deploying a full-featured test management system.
+
+**TestStand Sequence Editor**
+
+The sequence editor is a development environment in which you create, edit, execute, and debug sequences and the tests sequences call. Use the sequence editor to access all features, such as step types and process models. Refer to the Process Models section of this tutorial for more information about process models.
+
+You can debug a sequence using the following techniques, similar to how you debug in application development environments (ADEs) such as LabVIEW, LabWindows/CVI (ANSI), and Microsoft Visual Studio:
+
+- Setting breakpoints
+- Stepping into, out of, or over steps
+- Tracing through program executions
+- Displaying variables
+- Monitoring variables, expressions, and output messages during executions
+- Performing static analysis of sequence files to locate errors and enforce coding guidelines
+
+In the sequence editor, you can start multiple concurrent executions, execute multiple instances of the same sequence, or execute different sequences at the same time. Each execution instance opens an Execution window. In Trace Mode, the Execution window shows the steps in the currently executing sequence. If the execution suspends, the Execution window shows the next step to execute and provides debugging options.
+
+In the sequence editor, you can fully customize the pane and tab layout to optimize development and debugging tasks. You can also customize the menus, toolbars, and keyboard shortcuts.
+`;
diff --git a/packages/storybook/src/spright/chat/message/chat-message.react.tsx b/packages/storybook/src/spright/chat/message/chat-message.react.tsx
new file mode 100644
index 0000000000..94aa54de05
--- /dev/null
+++ b/packages/storybook/src/spright/chat/message/chat-message.react.tsx
@@ -0,0 +1,4 @@
+import { ChatMessage } from '../../../../../spright-components/src/chat/message';
+import { wrap } from '../../../utilities/react-wrapper';
+
+export const SprightChatMessage = wrap(ChatMessage);
diff --git a/packages/storybook/src/spright/chat/message/chat-message.stories.ts b/packages/storybook/src/spright/chat/message/chat-message.stories.ts
new file mode 100644
index 0000000000..054392cc05
--- /dev/null
+++ b/packages/storybook/src/spright/chat/message/chat-message.stories.ts
@@ -0,0 +1,115 @@
+import { html } from '@microsoft/fast-element';
+import type { Meta, StoryObj } from '@storybook/html';
+import {
+ apiCategory,
+ createUserSelectedThemeStory
+} from '../../../utilities/storybook';
+
+import { buttonTag } from '../../../../../nimble-components/src/button';
+import { chatMessageTag } from '../../../../../spright-components/src/chat/message';
+import { ChatMessageType } from '../../../../../spright-components/src/chat/message/types';
+import { richTextViewerTag } from '../../../../../nimble-components/src/rich-text/viewer';
+import { spinnerTag } from '../../../../../nimble-components/src/spinner';
+import { imgBlobUrl, markdownExample } from '../conversation/story-helpers';
+import { SpinnerAppearance } from '../../../../../nimble-components/src/spinner/types';
+import { ButtonAppearance } from '../../../../../nimble-components/src/menu-button/types';
+
+interface ChatMessageArgs {
+ messageType: keyof typeof ChatMessageType;
+}
+
+const metadata: Meta<ChatMessageArgs> = {
+ title: 'Internal/Chat Message',
+ argTypes: {
+ messageType: {
+ name: 'message-type',
+ options: Object.keys(ChatMessageType),
+ control: { type: 'radio' },
+ description: 'The type of the chat message.',
+ table: { category: apiCategory.attributes }
+ }
+ },
+ parameters: {
+ actions: {}
+ }
+};
+
+export default metadata;
+
+interface ChatMessageTextArgs extends ChatMessageArgs {
+ text: string;
+}
+
+export const chatMessageText: StoryObj<ChatMessageTextArgs> = {
+ render: createUserSelectedThemeStory(html`
+ <${chatMessageTag} message-type="${x => ChatMessageType[x.messageType]}">
+ ${x => x.text}
+ </${chatMessageTag}>
+ `),
+ argTypes: {
+ text: {
+ name: 'default',
+ description: 'The content to display in the chat message.',
+ table: { category: apiCategory.slots }
+ }
+ },
+ args: {
+ text: 'Aurora Borealis? At this time of year? At this time of day? In this part of the country? Localized entirely within your kitchen?',
+ messageType: 'outbound'
+ }
+};
+
+interface ChatMessageRichTextArgs extends ChatMessageArgs {
+ markdown: string;
+}
+export const chatMessageRichText: StoryObj<ChatMessageRichTextArgs> = {
+ render: createUserSelectedThemeStory(html`
+ <${chatMessageTag} message-type="${x => ChatMessageType[x.messageType]}">
+ <${richTextViewerTag} :markdown="${x => x.markdown}"></${richTextViewerTag}>
+ </${chatMessageTag}>
+ `),
+ argTypes: {
+ markdown: {
+ description: 'Markdown text for the rich text viewer',
+ table: { category: apiCategory.slots }
+ }
+ },
+ args: {
+ markdown: markdownExample,
+ messageType: 'outbound'
+ }
+};
+
+export const chatMessageSpinner: StoryObj<ChatMessageArgs> = {
+ render: createUserSelectedThemeStory(html`
+ <${chatMessageTag} message-type="${x => ChatMessageType[x.messageType]}">
+ <${spinnerTag} appearance="${() => SpinnerAppearance.accent}"></${spinnerTag}>
+ </${chatMessageTag}>
+ `),
+ args: {
+ messageType: 'system'
+ }
+};
+
+export const chatMessageImage: StoryObj<ChatMessageArgs> = {
+ render: createUserSelectedThemeStory(html`
+ <${chatMessageTag} message-type="${x => ChatMessageType[x.messageType]}">
+ <img width="100" height="100" :src="${() => imgBlobUrl}">
+ </${chatMessageTag}>
+ `),
+ args: {
+ messageType: 'inbound'
+ }
+};
+
+export const chatMessagePrompts: StoryObj<ChatMessageArgs> = {
+ render: createUserSelectedThemeStory(html`
+ <${chatMessageTag} message-type="${x => ChatMessageType[x.messageType]}">
+ <${buttonTag} appearance="${() => ButtonAppearance.block}">Eat my shorts</${buttonTag}>
+ <${buttonTag} appearance="${() => ButtonAppearance.block}">Do the Bartman</${buttonTag}>
+ </${chatMessageTag}>
+ `),
+ args: {
+ messageType: 'system'
+ }
+};