From d63861e4db5f7a7b2f2c7f1b4ada3bd3ae6d2f6d Mon Sep 17 00:00:00 2001
From: Jesse Attas <jattasNI@users.noreply.github.com>
Date: Thu, 20 Aug 2026 16:59:31 -0500
Subject: [PATCH 1/8] max-width on host, don't need calc, need align self

---
 .../spright-components/src/chat/message/inbound/styles.ts     | 3 ++-
 .../spright-components/src/chat/message/outbound/styles.ts    | 3 ++-
 packages/spright-components/src/chat/message/styles.ts        | 4 +++-
 packages/spright-components/src/chat/message/system/styles.ts | 3 ++-
 .../spright-components/src/chat/message/welcome/styles.ts     | 3 ++-
 5 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/spright-components/src/chat/message/inbound/styles.ts b/packages/spright-components/src/chat/message/inbound/styles.ts
index 90f202ebeb..2ba2c44817 100644
--- a/packages/spright-components/src/chat/message/inbound/styles.ts
+++ b/packages/spright-components/src/chat/message/inbound/styles.ts
@@ -20,9 +20,11 @@ export const styles = css`
     :host {
         min-width: ${standardPadding};
         min-height: ${standardPadding};
+        max-width: 90%;
 
         flex-direction: row;
         justify-content: flex-start;
+        align-self: flex-start;
         flex-shrink: 0;
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -31,7 +33,6 @@ export const styles = css`
     .container {
         display: flex;
         flex-direction: column;
-        max-width: calc(90%);
     }
 
     [part='start'] {
diff --git a/packages/spright-components/src/chat/message/outbound/styles.ts b/packages/spright-components/src/chat/message/outbound/styles.ts
index 412c3b0667..983bd1e95e 100644
--- a/packages/spright-components/src/chat/message/outbound/styles.ts
+++ b/packages/spright-components/src/chat/message/outbound/styles.ts
@@ -17,9 +17,11 @@ export const styles = css`
     :host {
         min-width: ${standardPadding};
         min-height: ${standardPadding};
+        max-width: 90%;
 
         flex-direction: row;
         justify-content: flex-end;
+        align-self: flex-end;
         flex-shrink: 0;
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -28,7 +30,6 @@ export const styles = css`
     .container {
         display: flex;
         flex-direction: column;
-        max-width: calc(90%);
     }
 
     .message-content {
diff --git a/packages/spright-components/src/chat/message/styles.ts b/packages/spright-components/src/chat/message/styles.ts
index ffa78b65c8..8a762090b1 100644
--- a/packages/spright-components/src/chat/message/styles.ts
+++ b/packages/spright-components/src/chat/message/styles.ts
@@ -24,6 +24,7 @@ export const styles = css`
     :host {
         min-width: ${standardPadding};
         min-height: ${standardPadding};
+        max-width: 90%;
 
         flex-direction: row;
         justify-content: center;
@@ -34,16 +35,17 @@ export const styles = css`
 
     :host([message-type='${ChatMessageType.outbound}']) {
         justify-content: flex-end;
+        align-self: flex-end;
     }
 
     :host([message-type='${ChatMessageType.inbound}']) {
         justify-content: flex-start;
+        align-self: flex-start;
     }
 
     .container {
         display: flex;
         flex-direction: column;
-        max-width: calc(90%);
     }
 
     [part='start'] {
diff --git a/packages/spright-components/src/chat/message/system/styles.ts b/packages/spright-components/src/chat/message/system/styles.ts
index 30126d0d32..a61a20e40a 100644
--- a/packages/spright-components/src/chat/message/system/styles.ts
+++ b/packages/spright-components/src/chat/message/system/styles.ts
@@ -13,9 +13,11 @@ export const styles = css`
     :host {
         min-width: ${standardPadding};
         min-height: ${standardPadding};
+        max-width: 90%;
 
         flex-direction: row;
         justify-content: center;
+        align-self: center;
         flex-shrink: 0;
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -24,7 +26,6 @@ export const styles = css`
     .container {
         display: flex;
         flex-direction: column;
-        max-width: calc(90%);
     }
 
     .message-content {
diff --git a/packages/spright-components/src/chat/message/welcome/styles.ts b/packages/spright-components/src/chat/message/welcome/styles.ts
index f68d56bed7..38e6e3d64f 100644
--- a/packages/spright-components/src/chat/message/welcome/styles.ts
+++ b/packages/spright-components/src/chat/message/welcome/styles.ts
@@ -18,10 +18,12 @@ export const styles = css`
     :host {
         min-width: ${standardPadding};
         min-height: ${standardPadding};
+        max-width: 90%;
 
         flex: 1;
         flex-direction: row;
         justify-content: center;
+        align-self: center;
         align-items: center;
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -31,7 +33,6 @@ export const styles = css`
         display: flex;
         flex-direction: column;
         align-items: center;
-        max-width: calc(90%);
         gap: ${mediumPadding};
     }
 

From befca2986ed3c1b051f88f7397e00dab40aa9590 Mon Sep 17 00:00:00 2001
From: Jesse Attas <jattasNI@users.noreply.github.com>
Date: Thu, 20 Aug 2026 17:06:31 -0500
Subject: [PATCH 2/8] max-width on .message-content

---
 packages/spright-components/src/chat/message/inbound/styles.ts  | 1 +
 packages/spright-components/src/chat/message/outbound/styles.ts | 1 +
 packages/spright-components/src/chat/message/styles.ts          | 1 +
 packages/spright-components/src/chat/message/system/styles.ts   | 1 +
 packages/spright-components/src/chat/message/welcome/styles.ts  | 1 +
 5 files changed, 5 insertions(+)

diff --git a/packages/spright-components/src/chat/message/inbound/styles.ts b/packages/spright-components/src/chat/message/inbound/styles.ts
index 2ba2c44817..337a864662 100644
--- a/packages/spright-components/src/chat/message/inbound/styles.ts
+++ b/packages/spright-components/src/chat/message/inbound/styles.ts
@@ -42,6 +42,7 @@ export const styles = css`
     .message-content {
         width: fit-content;
         height: fit-content;
+        max-width: 100%;
         overflow-x: auto;
     }
 
diff --git a/packages/spright-components/src/chat/message/outbound/styles.ts b/packages/spright-components/src/chat/message/outbound/styles.ts
index 983bd1e95e..3336611b1f 100644
--- a/packages/spright-components/src/chat/message/outbound/styles.ts
+++ b/packages/spright-components/src/chat/message/outbound/styles.ts
@@ -35,6 +35,7 @@ export const styles = css`
     .message-content {
         width: fit-content;
         height: fit-content;
+        max-width: 100%;
         overflow-x: auto;
     }
 
diff --git a/packages/spright-components/src/chat/message/styles.ts b/packages/spright-components/src/chat/message/styles.ts
index 8a762090b1..986b352b7e 100644
--- a/packages/spright-components/src/chat/message/styles.ts
+++ b/packages/spright-components/src/chat/message/styles.ts
@@ -55,6 +55,7 @@ export const styles = css`
     .message-content {
         width: fit-content;
         height: fit-content;
+        max-width: 100%;
         overflow-x: auto;
     }
 
diff --git a/packages/spright-components/src/chat/message/system/styles.ts b/packages/spright-components/src/chat/message/system/styles.ts
index a61a20e40a..391a114c1e 100644
--- a/packages/spright-components/src/chat/message/system/styles.ts
+++ b/packages/spright-components/src/chat/message/system/styles.ts
@@ -31,6 +31,7 @@ export const styles = css`
     .message-content {
         width: fit-content;
         height: fit-content;
+        max-width: 100%;
         overflow-x: auto;
     }
 `;
diff --git a/packages/spright-components/src/chat/message/welcome/styles.ts b/packages/spright-components/src/chat/message/welcome/styles.ts
index 38e6e3d64f..11a500c195 100644
--- a/packages/spright-components/src/chat/message/welcome/styles.ts
+++ b/packages/spright-components/src/chat/message/welcome/styles.ts
@@ -66,6 +66,7 @@ export const styles = css`
         align-items: center;
         width: fit-content;
         height: fit-content;
+        max-width: 100%;
         overflow-x: auto;
         gap: ${mediumPadding};
     }

From 1cccb87817b0477e5dd812c30956f484d83a66e1 Mon Sep 17 00:00:00 2001
From: Jesse Attas <jattasNI@users.noreply.github.com>
Date: Thu, 20 Aug 2026 17:07:45 -0500
Subject: [PATCH 3/8] Change files

---
 ...ht-components-53dfedf2-8550-49e2-816e-5988e14affad.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@ni-spright-components-53dfedf2-8550-49e2-816e-5988e14affad.json

diff --git a/change/@ni-spright-components-53dfedf2-8550-49e2-816e-5988e14affad.json b/change/@ni-spright-components-53dfedf2-8550-49e2-816e-5988e14affad.json
new file mode 100644
index 0000000000..fdede57423
--- /dev/null
+++ b/change/@ni-spright-components-53dfedf2-8550-49e2-816e-5988e14affad.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Chat message sizing is more client configurable",
+  "packageName": "@ni/spright-components",
+  "email": "jattasNI@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

From 1c297fa18347cd6e1c2c0e263c0f98b222e9f4ca Mon Sep 17 00:00:00 2001
From: Jesse Attas <jattasNI@users.noreply.github.com>
Date: Tue, 25 Aug 2026 23:02:45 -0500
Subject: [PATCH 4/8] Container width grows with message

---
 packages/spright-components/src/chat/message/inbound/styles.ts  | 1 +
 packages/spright-components/src/chat/message/outbound/styles.ts | 1 +
 packages/spright-components/src/chat/message/system/styles.ts   | 1 +
 3 files changed, 3 insertions(+)

diff --git a/packages/spright-components/src/chat/message/inbound/styles.ts b/packages/spright-components/src/chat/message/inbound/styles.ts
index 337a864662..ea998b8c70 100644
--- a/packages/spright-components/src/chat/message/inbound/styles.ts
+++ b/packages/spright-components/src/chat/message/inbound/styles.ts
@@ -33,6 +33,7 @@ export const styles = css`
     .container {
         display: flex;
         flex-direction: column;
+        width: 100%;
     }
 
     [part='start'] {
diff --git a/packages/spright-components/src/chat/message/outbound/styles.ts b/packages/spright-components/src/chat/message/outbound/styles.ts
index 3336611b1f..2a6c69886a 100644
--- a/packages/spright-components/src/chat/message/outbound/styles.ts
+++ b/packages/spright-components/src/chat/message/outbound/styles.ts
@@ -30,6 +30,7 @@ export const styles = css`
     .container {
         display: flex;
         flex-direction: column;
+        width: 100%;
     }
 
     .message-content {
diff --git a/packages/spright-components/src/chat/message/system/styles.ts b/packages/spright-components/src/chat/message/system/styles.ts
index 391a114c1e..220708a205 100644
--- a/packages/spright-components/src/chat/message/system/styles.ts
+++ b/packages/spright-components/src/chat/message/system/styles.ts
@@ -26,6 +26,7 @@ export const styles = css`
     .container {
         display: flex;
         flex-direction: column;
+        width: 100%;
     }
 
     .message-content {

From ddb4e07ddeccd7b313b7402f27b1b4fb4ee3512f Mon Sep 17 00:00:00 2001
From: Jesse Attas <jattasNI@users.noreply.github.com>
Date: Tue, 25 Aug 2026 23:03:13 -0500
Subject: [PATCH 5/8] Revert changes to deprecated message

---
 packages/spright-components/src/chat/message/styles.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/spright-components/src/chat/message/styles.ts b/packages/spright-components/src/chat/message/styles.ts
index 986b352b7e..ffa78b65c8 100644
--- a/packages/spright-components/src/chat/message/styles.ts
+++ b/packages/spright-components/src/chat/message/styles.ts
@@ -24,7 +24,6 @@ export const styles = css`
     :host {
         min-width: ${standardPadding};
         min-height: ${standardPadding};
-        max-width: 90%;
 
         flex-direction: row;
         justify-content: center;
@@ -35,17 +34,16 @@ export const styles = css`
 
     :host([message-type='${ChatMessageType.outbound}']) {
         justify-content: flex-end;
-        align-self: flex-end;
     }
 
     :host([message-type='${ChatMessageType.inbound}']) {
         justify-content: flex-start;
-        align-self: flex-start;
     }
 
     .container {
         display: flex;
         flex-direction: column;
+        max-width: calc(90%);
     }
 
     [part='start'] {
@@ -55,7 +53,6 @@ export const styles = css`
     .message-content {
         width: fit-content;
         height: fit-content;
-        max-width: 100%;
         overflow-x: auto;
     }
 

From 7fbd9c74d914944c1c58364f2316187e8b90aec1 Mon Sep 17 00:00:00 2001
From: Jesse Attas <jattasNI@users.noreply.github.com>
Date: Tue, 25 Aug 2026 23:10:45 -0500
Subject: [PATCH 6/8] inbound max width 100%

---
 packages/spright-components/src/chat/message/inbound/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/spright-components/src/chat/message/inbound/styles.ts b/packages/spright-components/src/chat/message/inbound/styles.ts
index ea998b8c70..c1244fb040 100644
--- a/packages/spright-components/src/chat/message/inbound/styles.ts
+++ b/packages/spright-components/src/chat/message/inbound/styles.ts
@@ -20,7 +20,7 @@ export const styles = css`
     :host {
         min-width: ${standardPadding};
         min-height: ${standardPadding};
-        max-width: 90%;
+        max-width: 100%;
 
         flex-direction: row;
         justify-content: flex-start;

From f564c069433572a089c3744806084d0d1898cfca Mon Sep 17 00:00:00 2001
From: Jesse Attas <jattasNI@users.noreply.github.com>
Date: Tue, 25 Aug 2026 23:36:18 -0500
Subject: [PATCH 7/8] Make message longer to keep test cases working

---
 .../chat-conversation-matrix.stories.ts       | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

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
index 861450bcc1..9be62935e4 100644
--- a/packages/storybook/src/spright/chat/conversation/chat-conversation-matrix.stories.ts
+++ b/packages/storybook/src/spright/chat/conversation/chat-conversation-matrix.stories.ts
@@ -353,10 +353,10 @@ const conversationWithInput = (
             height: ${height};
         ">
             <${chatMessageInboundTag}>
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageInboundTag}>
             <${chatMessageOutboundTag} message-type="outbound">
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageOutboundTag}>
             <${chatInputTag} slot='input'></${chatInputTag}>
         </${chatConversationTag}>
@@ -383,10 +383,10 @@ const conversationWithToolbar = (
                 </${buttonTag}>
             </${toolbarTag}>
             <${chatMessageInboundTag}>
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageInboundTag}>
             <${chatMessageOutboundTag} message-type="outbound">
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageOutboundTag}>
             <${chatInputTag} slot='input'></${chatInputTag}>
         </${chatConversationTag}>
@@ -410,10 +410,10 @@ const conversationWithStart = (
                 This is a banner in the start slot.
             </${bannerTag}>
             <${chatMessageInboundTag}>
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageInboundTag}>
             <${chatMessageOutboundTag} message-type="outbound">
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageOutboundTag}>
             <${chatInputTag} slot='input'></${chatInputTag}>
         </${chatConversationTag}>
@@ -444,10 +444,10 @@ const conversationWithToolbarAndStart = (
                 This is a banner in the start slot.
             </${bannerTag}>
             <${chatMessageInboundTag}>
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageInboundTag}>
             <${chatMessageOutboundTag} message-type="outbound">
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageOutboundTag}>
             <${chatInputTag} slot='input'></${chatInputTag}>
         </${chatConversationTag}>
@@ -478,10 +478,10 @@ const conversationWithToolbarAndStartAndEnd = (
                 This is a banner in the start slot.
             </${bannerTag}>
             <${chatMessageInboundTag}>
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageInboundTag}>
             <${chatMessageOutboundTag} message-type="outbound">
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageOutboundTag}>
             <${chatInputTag} slot='input'></${chatInputTag}>
             <span slot='end'>

From 129bb26b257f7cf1a7945a5b5359b9ab1d305772 Mon Sep 17 00:00:00 2001
From: Jesse Attas <jattasNI@users.noreply.github.com>
Date: Wed, 26 Aug 2026 16:19:53 -0500
Subject: [PATCH 8/8] Fix positioning in message matrix story

---
 .../message/chat-message-matrix.stories.ts    | 41 ++++++++++++++-----
 1 file changed, 31 insertions(+), 10 deletions(-)

diff --git a/packages/storybook/src/spright/chat/message/chat-message-matrix.stories.ts b/packages/storybook/src/spright/chat/message/chat-message-matrix.stories.ts
index 61896c5b2a..8addc7f632 100644
--- a/packages/storybook/src/spright/chat/message/chat-message-matrix.stories.ts
+++ b/packages/storybook/src/spright/chat/message/chat-message-matrix.stories.ts
@@ -1,5 +1,6 @@
 import type { StoryFn, Meta } from '@storybook/html-vite';
 import { html } from '@ni/fast-element';
+import { chatConversationTag } from '@ni/spright-components/dist/esm/chat/conversation';
 import { chatMessageTag } from '@ni/spright-components/dist/esm/chat/message';
 import { chatMessageInboundTag } from '@ni/spright-components/dist/esm/chat/message/inbound';
 import { chatMessageOutboundTag } from '@ni/spright-components/dist/esm/chat/message/outbound';
@@ -24,60 +25,80 @@ export default metadata;
 
 export const messageHidden: StoryFn = createStory(
     hiddenWrapper(
-        html`<${chatMessageTag} hidden>Hidden Chat Message</${chatMessageTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageTag} hidden>Hidden Chat Message</${chatMessageTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageTextCustomized: StoryFn = createMatrixThemeStory(
     textCustomizationWrapper(
-        html`<${chatMessageTag}>Message</${chatMessageTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageTag}>Message</${chatMessageTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageInboundHidden: StoryFn = createStory(
     hiddenWrapper(
-        html`<${chatMessageInboundTag} hidden>Hidden Chat Inbound Message</${chatMessageInboundTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageInboundTag} hidden>Hidden Chat Inbound Message</${chatMessageInboundTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageInboundTextCustomized: StoryFn = createMatrixThemeStory(
     textCustomizationWrapper(
-        html`<${chatMessageInboundTag}>Inbound Message</${chatMessageInboundTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageInboundTag}>Inbound Message</${chatMessageInboundTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageOutboundHidden: StoryFn = createStory(
     hiddenWrapper(
-        html`<${chatMessageOutboundTag} hidden>Hidden Chat Outbound Message</${chatMessageOutboundTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageOutboundTag} hidden>Hidden Chat Outbound Message</${chatMessageOutboundTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageOutboundTextCustomized: StoryFn = createMatrixThemeStory(
     textCustomizationWrapper(
-        html`<${chatMessageOutboundTag}>Outbound Message</${chatMessageOutboundTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageOutboundTag}>Outbound Message</${chatMessageOutboundTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageSystemHidden: StoryFn = createStory(
     hiddenWrapper(
-        html`<${chatMessageSystemTag} hidden>Hidden Chat System Message</${chatMessageSystemTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageSystemTag} hidden>Hidden Chat System Message</${chatMessageSystemTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageSystemTextCustomized: StoryFn = createMatrixThemeStory(
     textCustomizationWrapper(
-        html`<${chatMessageSystemTag}>System Message</${chatMessageSystemTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageSystemTag}>System Message</${chatMessageSystemTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageWelcomeHidden: StoryFn = createStory(
     hiddenWrapper(
-        html`<${chatMessageWelcomeTag} hidden welcome-title="Welcome" subtitle="Get started">Hidden Chat Welcome Message</${chatMessageWelcomeTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageWelcomeTag} hidden welcome-title="Welcome" subtitle="Get started">Hidden Chat Welcome Message</${chatMessageWelcomeTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageWelcomeTextCustomized: StoryFn = createMatrixThemeStory(
     textCustomizationWrapper(
-        html`<${chatMessageWelcomeTag} welcome-title="Welcome" subtitle="Get started">Welcome Message</${chatMessageWelcomeTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageWelcomeTag} welcome-title="Welcome" subtitle="Get started">Welcome Message</${chatMessageWelcomeTag}>
+        </${chatConversationTag}>`
     )
 );