@@ -16,7 +16,9 @@ The ChatMessage component renders an `<article>` element for a `user` or `assist
16161717::u-chat-message
1818---
19-content: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
19+parts:
20+- type: 'text'
21+ text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
2022side: 'right'
2123variant: 'soft'
2224avatar:
@@ -30,18 +32,26 @@ avatar:
3032Use the [`ChatMessages`](/docs/components/chat-messages) component to display a list of chat messages.
3133::
323433-### Content
35+### Parts
343635-Use the `content` prop to display the message content.
37+Use the `parts` prop to display the message content using the AI SDK v5 format.
36383739::component-code
3840---
3941prettier: true
42+ignore:
43+- parts
4044props:
41- content: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
45+ parts:
46+ - type: 'text'
47+ text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
4248---
4349::
445051+::note
52+The `parts` prop is the recommended format for AI SDK v5. Each part has a `type` (e.g., 'text') and corresponding content. The ChatMessage component also supports the deprecated `content` prop for backward compatibility.
53+::
54+4555### Side
46564757Use the `side` prop to display the message on the left or right.
@@ -50,10 +60,12 @@ Use the `side` prop to display the message on the left or right.
5060---
5161prettier: true
5262ignore:
53-- content
63+- parts
5464props:
5565 side: 'right'
56- content: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
66+ parts:
67+ - type: 'text'
68+ text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
5769---
5870::
5971@@ -69,10 +81,12 @@ Use the `variant` prop to change style of the message.
6981---
7082prettier: true
7183ignore:
72-- content
84+- parts
7385props:
7486 variant: 'soft'
75- content: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
87+ parts:
88+ - type: 'text'
89+ text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
7690---
7791::
7892@@ -88,14 +102,16 @@ Use the `icon` prop to display an [Icon](/docs/components/icon) component next t
88102---
89103prettier: true
90104ignore:
91-- content
105+- parts
92106- side
93107- variant
94108props:
95109 icon: i-lucide-user
96110 variant: 'soft'
97111 side: 'right'
98- content: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
112+ parts:
113+ - type: 'text'
114+ text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
99115---
100116::
101117@@ -107,15 +123,17 @@ Use the `avatar` prop to display an [Avatar](/docs/components/avatar) component
107123---
108124prettier: true
109125ignore:
110-- content
126+- parts
111127- side
112128- variant
113129props:
114130 avatar:
115131 src: 'https://github.com/benjamincanac.png'
116132 variant: 'soft'
117133 side: 'right'
118- content: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
134+ parts:
135+ - type: 'text'
136+ text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
119137---
120138::
121139@@ -125,11 +143,13 @@ You can also use the `avatar.icon` prop to display an icon as the avatar.
125143---
126144prettier: true
127145ignore:
128-- content
146+- parts
129147props:
130148 avatar:
131149 icon: i-lucide-bot
132- content: 'Nuxt UI offers several features for building AI chatbots including the ChatMessage, ChatMessages, and ChatPrompt components. Best practices include using the useChat composable from Vercel AI SDK, implementing proper message styling with variants, and utilizing the built-in actions for message interactions. The components are fully customizable with theming support and responsive design.'
150+ parts:
151+ - type: 'text'
152+ text: 'Nuxt UI offers several features for building AI chatbots including the ChatMessage, ChatMessages, and ChatPrompt components. Best practices include using the Chat class from AI SDK v5, implementing proper message styling with variants, and utilizing the built-in actions for message interactions. The components are fully customizable with theming support and responsive design.'
133153---
134154::
135155@@ -143,13 +163,15 @@ prettier: true
143163external:
144164- actions
145165ignore:
146-- content
166+- parts
147167- actions
148168props:
149169 actions:
150170 - label: 'Copy to clipboard'
151171 icon: i-lucide-copy
152- content: 'Nuxt UI offers several features for building AI chatbots including the ChatMessage, ChatMessages, and ChatPrompt components. Best practices include using the useChat composable from Vercel AI SDK, implementing proper message styling with variants, and utilizing the built-in actions for message interactions. The components are fully customizable with theming support and responsive design.'
172+ parts:
173+ - type: 'text'
174+ text: 'Nuxt UI offers several features for building AI chatbots including the ChatMessage, ChatMessages, and ChatPrompt components. Best practices include using the Chat class from AI SDK v5, implementing proper message styling with variants, and utilizing the built-in actions for message interactions. The components are fully customizable with theming support and responsive design.'
153175---
154176::
155177