Improve doc content

packages/storybook/src/spright/chat/chat.mdx

@@ -7,12 +7,11 @@ import { chatMessageTag } from '../../../../spright-components/src/chat/message'
 <Meta of={chatStories} />
 <Title of={chatStories} />
 
-Chat components are used to conduct and display a conversation with a chat bot
-or other users. The components can collect user input and display responses; the
+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 low level chat messages and input fields and higher level
-composite components representing an entire conversation.
+Components include a chat message and a chat conversation, which is a collection of messages.
 
 ## API
 
@@ -29,20 +28,33 @@ messages in a conversation.
 ### 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={chatStories.chatMessageText} />
 <Controls of={chatStories.chatMessageText} />
 
+#### Rich text message content
+
 <Canvas of={chatStories.chatMessageRichText} />
-<Controls of={chatStories.chatMessageRichText} />
+
+#### Spinner message content
 
 <Canvas of={chatStories.chatMessageSpinner} />
-<Controls of={chatStories.chatMessageSpinner} />
+
+#### Prompt buttons message content
 
 <Canvas of={chatStories.chatMessagePrompts} />
-<Controls of={chatStories.chatMessagePrompts} />
 
-{/* ## Usage */}
+## 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 */}
 

packages/storybook/src/spright/chat/chat.stories.ts

@@ -42,8 +42,14 @@ export const chatConversation: StoryObj<ChatConversation> = {
                 <${buttonTag} appearance='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 }
+        },
+    },
 };
 
 interface ChatMessageArgs {
@@ -67,13 +73,15 @@ export const chatMessageText: StoryObj<ChatMessageTextArgs> = {
     `),
     argTypes: {
         text: {
-            description: 'The text to display in the chat message.',
+            name: 'default',
+            description: 'The content to display in the chat message.',
             table: { category: apiCategory.slots }
         },
         messageType: {
+            name: 'message-type',
             options: Object.keys(ChatMessageType),
             control: { type: 'radio' },
-            description: 'The status of the chat message.',
+            description: 'The type of the chat message.',
             table: { category: apiCategory.attributes }
         }
     },
@@ -135,18 +143,14 @@ export const chatMessageSpinner: StoryObj<ChatMessageArgs> = {
     }
 };
 
-interface ChatMessagePrompts extends ChatMessageArgs {
-    prompt1: string;
-    prompt2: string;
-}
-export const chatMessagePrompts: StoryObj<ChatMessagePrompts> = {
+export const chatMessagePrompts: StoryObj<ChatMessageArgs> = {
     parameters: {
         actions: {}
     },
     render: createUserSelectedThemeStory(html`
         <${chatMessageTag} message-type=${x => x.messageType}>
-            <${buttonTag} appearance='block'>${x => x.prompt1}</${buttonTag}>
-            <${buttonTag} appearance='block'>${x => x.prompt2}</${buttonTag}>
+            <${buttonTag} appearance='block'>Eat my shorts</${buttonTag}>
+            <${buttonTag} appearance='block'>Do the Bartman</${buttonTag}>
         </${chatMessageTag}>
     `),
     argTypes: {
@@ -156,18 +160,8 @@ export const chatMessagePrompts: StoryObj<ChatMessagePrompts> = {
             description: 'The status of the chat message.',
             table: { category: apiCategory.attributes }
         },
-        prompt1: {
-            description: 'The first prompt text',
-            table: { category: apiCategory.slots }
-        },
-        prompt2: {
-            description: 'The second prompt text',
-            table: { category: apiCategory.slots }
-        }
     },
     args: {
         messageType: ChatMessageType.system,
-        prompt1: 'Eat my shorts',
-        prompt2: 'Do the Bartman'
     }
 };