Chat Conversation and Messages (Spright)
Chat Conversation and Messages (Spright)
+ ${startSlotTemplate(context, definition)}
+
+
+ ${endSlotTemplate(context, definition)}
+
+`;
diff --git a/packages/spright-components/src/chat/message/index.ts b/packages/spright-components/src/chat/message/index.ts
index eee80ed989..0ba315a586 100644
--- a/packages/spright-components/src/chat/message/index.ts
+++ b/packages/spright-components/src/chat/message/index.ts
@@ -25,6 +25,7 @@ export type ChatMessageOptions = FoundationElementDefinition & StartEndOptions;
/**
* A Spright component for displaying a chat message
+ * @deprecated Use specific message component types instead
*/
export class ChatMessage extends FoundationElement {
/**
diff --git a/packages/spright-components/src/chat/message/outbound/index.ts b/packages/spright-components/src/chat/message/outbound/index.ts
new file mode 100644
index 0000000000..30eb9e1818
--- /dev/null
+++ b/packages/spright-components/src/chat/message/outbound/index.ts
@@ -0,0 +1,27 @@
+import {
+ DesignSystem,
+ FoundationElement,
+} from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'spright-chat-message-outbound': ChatMessageOutbound;
+ }
+}
+
+/**
+ * A Spright component for displaying an outbound chat message
+ */
+export class ChatMessageOutbound extends FoundationElement {
+}
+
+const sprightChatMessageOutbound = ChatMessageOutbound.compose({
+ baseName: 'chat-message-outbound',
+ template,
+ styles
+});
+
+DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageOutbound());
+export const chatMessageOutboundTag = 'spright-chat-message-outbound';
diff --git a/packages/spright-components/src/chat/message/outbound/styles.ts b/packages/spright-components/src/chat/message/outbound/styles.ts
new file mode 100644
index 0000000000..412c3b0667
--- /dev/null
+++ b/packages/spright-components/src/chat/message/outbound/styles.ts
@@ -0,0 +1,46 @@
+import { css } from '@ni/fast-element';
+
+import {
+ bodyFont,
+ bodyFontColor,
+ borderHoverColor,
+ borderWidth,
+ fillSelectedColor,
+ 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 {
+ min-width: ${standardPadding};
+ min-height: ${standardPadding};
+
+ flex-direction: row;
+ justify-content: flex-end;
+ flex-shrink: 0;
+ font: ${bodyFont};
+ color: ${bodyFontColor};
+ }
+
+ .container {
+ display: flex;
+ flex-direction: column;
+ max-width: calc(90%);
+ }
+
+ .message-content {
+ width: fit-content;
+ height: fit-content;
+ overflow-x: auto;
+ }
+
+ :host .message-content {
+ background: ${fillSelectedColor};
+ border: ${borderWidth} solid ${borderHoverColor};
+ border-radius: ${mediumPadding} ${mediumPadding} 0px ${mediumPadding};
+ padding: ${mediumPadding};
+ }
+`;
diff --git a/packages/spright-components/src/chat/message/outbound/template.ts b/packages/spright-components/src/chat/message/outbound/template.ts
new file mode 100644
index 0000000000..59452b860a
--- /dev/null
+++ b/packages/spright-components/src/chat/message/outbound/template.ts
@@ -0,0 +1,15 @@
+import { html, ViewTemplate } from '@ni/fast-element';
+import {
+ type FoundationElementTemplate
+} from '@ni/fast-foundation';
+import type { ChatMessageOutbound } from '.';
+
+export const template: FoundationElementTemplate<
+ViewTemplate
+
+
+`;
diff --git a/packages/spright-components/src/chat/message/styles.ts b/packages/spright-components/src/chat/message/styles.ts
index e68c8c3a86..ffa78b65c8 100644
--- a/packages/spright-components/src/chat/message/styles.ts
+++ b/packages/spright-components/src/chat/message/styles.ts
@@ -22,8 +22,8 @@ export const styles = css`
${display('flex')}
:host {
- min-width: 16px;
- min-height: 16px;
+ min-width: ${standardPadding};
+ min-height: ${standardPadding};
flex-direction: row;
justify-content: center;
diff --git a/packages/spright-components/src/chat/message/system/index.ts b/packages/spright-components/src/chat/message/system/index.ts
new file mode 100644
index 0000000000..cde64f992f
--- /dev/null
+++ b/packages/spright-components/src/chat/message/system/index.ts
@@ -0,0 +1,27 @@
+import {
+ DesignSystem,
+ FoundationElement,
+} from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'spright-chat-message-system': ChatMessageSystem;
+ }
+}
+
+/**
+ * A Spright component for displaying an system chat message
+ */
+export class ChatMessageSystem extends FoundationElement {
+}
+
+const sprightChatMessageSystem = ChatMessageSystem.compose({
+ baseName: 'chat-message-system',
+ template,
+ styles
+});
+
+DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageSystem());
+export const chatMessageSystemTag = 'spright-chat-message-system';
diff --git a/packages/spright-components/src/chat/message/system/styles.ts b/packages/spright-components/src/chat/message/system/styles.ts
new file mode 100644
index 0000000000..30126d0d32
--- /dev/null
+++ b/packages/spright-components/src/chat/message/system/styles.ts
@@ -0,0 +1,35 @@
+import { css } from '@ni/fast-element';
+
+import {
+ bodyFont,
+ bodyFontColor,
+ standardPadding,
+} 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: ${standardPadding};
+ min-height: ${standardPadding};
+
+ flex-direction: row;
+ justify-content: center;
+ flex-shrink: 0;
+ font: ${bodyFont};
+ color: ${bodyFontColor};
+ }
+
+ .container {
+ display: flex;
+ flex-direction: column;
+ max-width: calc(90%);
+ }
+
+ .message-content {
+ width: fit-content;
+ height: fit-content;
+ overflow-x: auto;
+ }
+`;
diff --git a/packages/spright-components/src/chat/message/system/template.ts b/packages/spright-components/src/chat/message/system/template.ts
new file mode 100644
index 0000000000..5f9fe81c9f
--- /dev/null
+++ b/packages/spright-components/src/chat/message/system/template.ts
@@ -0,0 +1,15 @@
+import { html, ViewTemplate } from '@ni/fast-element';
+import {
+ type FoundationElementTemplate
+} from '@ni/fast-foundation';
+import type { ChatMessageSystem } from '.';
+
+export const template: FoundationElementTemplate<
+ViewTemplate
+
+
+`;
diff --git a/packages/spright-components/src/chat/message/types.ts b/packages/spright-components/src/chat/message/types.ts
index f4f93e0ba8..6e6d1101ee 100644
--- a/packages/spright-components/src/chat/message/types.ts
+++ b/packages/spright-components/src/chat/message/types.ts
@@ -1,6 +1,7 @@
/**
* A message type in a chat conversation.
* @public
+ * @deprecated Use specific message component types instead
*/
export const ChatMessageType = {
system: undefined,
diff --git a/packages/spright-components/src/chat/specs/README.md b/packages/spright-components/src/chat/specs/README.md
index 503e6f260e..618f3cb2fa 100644
--- a/packages/spright-components/src/chat/specs/README.md
+++ b/packages/spright-components/src/chat/specs/README.md
@@ -5,7 +5,10 @@
This spec describes a set of components that can be used to compose a chat interface. This includes:
- chat input: a text input, button, and related components for users to compose and send new messages
-- chat message: a single entry in a chat conversation, including some content and metadata about the message
+- chat messages: each a single entry in a chat conversation, including some content and metadata about the message
+ - inbound
+ - system
+ - outbound
- chat conversation: a layout component that allows slotting messages and an input
### Background
@@ -40,12 +43,24 @@ The message component will allow slotting arbitrary content, but any efforts to
#### Chat message
-The `spright-chat-message` has the following slot elements.
+##### Common features
+
+The all Spright chat messages have the following slot elements.
1. `default` slot displays arbitrary slotted content. For example: text, rich text, buttons, images, or a spinner.
+
+The components also contains the following features:
+
+1. Layout content to the right, center, or left of parent container depending on the type of the message
+1. Size based on content size with maximum width (but not height) based on parent's width.
+1. Change the styling of the message depending on the type of message. For example: render outbound messages in a bubble with the tail pointing to the right but render system messages with no styling.
+
+##### Inbound message additional features
+
+In addition, inbound messages will add support these slots:
+
1. `footer-actions` slot which is used to add action buttons below the main content.
1. `end` slot which is used to add text buttons. They are below any action buttons.
-
Nimble will set the height of the action buttons to `$ni-nimble-control-slim-height`. All action buttons must meet the following criteria
1. They are `nimble-button`s or any other button variant (toggle button, menu button, etc)
@@ -59,12 +74,6 @@ All end text buttons must meet the following criteria
1. The `apperance` attribute is set to `block`
1. The buttons only have text
-The component also contains the following features:
-
-1. Layout content to the right, center, or left of parent container depending on metadata about who sent the message.
-1. Size based on content size with maximum width (but not height) based on parent's width.
-1. Change the styling of the message depending on metadata about who sent the message. For example: render user messages in a bubble with the tail pointing to the right but render system messages with no styling.
-
#### Chat conversation
1. Lays out messages vertically based on their order.
@@ -118,15 +127,15 @@ These components are competing against possible implementations within applicati
```html
+ viewport:${() => viewportLabel}, content:${() => contentWidthLabel},${() => contentHeightLabel} +
+
+ <${chatConversationTag} style="
+ width: 100%;
+ height: 100%;
+ ">
+ <${messageComponentType}>
+
+
+
+
+`;
+
+export const outboundMessageSizing: StoryFn = createStory(html`
+ ${createMatrix(messageComponentSizing, [
+ [outboundComponentState],
+ viewportStates,
+ contentWidthStates,
+ contentHeightStates
+ ])}
+`);
+
+export const inboundMessageSizing: StoryFn = createStory(html`
+ ${createMatrix(messageComponentSizing, [
+ [inboundComponentState],
+ viewportStates,
+ contentWidthStates,
+ contentHeightStates
+ ])}
+`);
+
+export const systemMessageSizing: StoryFn = createStory(html`
+ ${createMatrix(messageComponentSizing, [
+ [systemComponentState],
viewportStates,
contentWidthStates,
contentHeightStates
@@ -144,7 +221,7 @@ const endButtonStates = [
] as const;
type EndButtonStates = (typeof endButtonStates)[number];
-const slottedButtons = (
+const slottedButtonsMessageTypes = (
[_messageTypeLabel, messageType]: MessageTypeStates,
[footerActionsLabel, footerActions]: FooterActionsStates,
[endButtonsLabel, endButtons]: EndButtonStates
@@ -187,13 +264,61 @@ const slottedButtons = (
`;
export const slottedButtonsSizing: StoryFn = createMatrixThemeStory(html`
- ${createMatrix(slottedButtons, [
+ ${createMatrix(slottedButtonsMessageTypes, [
messageTypeStates,
footerActionsStates,
endButtonStates
])}
`);
+const slottedButtonsInboundMessageComponent = (
+ [footerActionsLabel, footerActions]: FooterActionsStates,
+ [endButtonsLabel, endButtons]: EndButtonStates
+): ViewTemplate => html`
+ + footer-actions:${() => footerActionsLabel}, end:${() => endButtonsLabel} +
+
+ <${chatConversationTag} style="
+ width: 100%;
+ height: 100%;
+ ">
+ <${chatMessageInboundTag}>
+ `
+ <${buttonTag} content-hidden slot="footer-actions" appearance="ghost">
+ <${iconThumbUpTag} slot="start">
+ ${x => x}
+
+ `)}
+ ${repeat(() => endButtons, html`
+ <${buttonTag} slot="end" appearance="block">
+ ${x => x}
+
+ `)}
+
+
+
+`;
+
+export const slottedButtonsInboundMessageSizing: StoryFn = createMatrixThemeStory(html`
+ ${createMatrix(slottedButtonsInboundMessageComponent, [
+ footerActionsStates,
+ endButtonStates
+ ])}
+`);
+
const heightStates = [
['shorter', '200px'],
['taller', '300px']
@@ -208,12 +333,12 @@ const conversationWithInput = (
width: 100%;
height: ${height};
">
- <${chatMessageTag} message-type="inbound">
+ <${chatMessageInboundTag}>
Conversation is ${heightLabel} than the height of the messages.
-
- <${chatMessageTag} message-type="outbound">
+
+ <${chatMessageOutboundTag} message-type="outbound">
Conversation is ${heightLabel} than the height of the messages.
-
+
<${chatInputTag} slot='input'>
Placeholder text
+ ${repeat(() => footerActions, html