Skip to content

Commit bb3ca57

Browse files
sandros94sandros94
committed
docs(ChatMessage/ChatMessages): use proper destructuring of slot's content
1 parent a66e8ab commit bb3ca57

10 files changed

Lines changed: 57 additions & 57 deletions

File tree

‎docs/app/components/chat/Chat.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -282,8 +282,8 @@ defineShortcuts({
282282
<UChatTool icon="i-lucide-brain" text="Thinking..." streaming />
283283
</template>
284284

285-
<template #content="{ message }">
286-
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
285+
<template #content="{ id, role, parts }">
286+
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
287287
<UChatReasoning
288288
v-if="isReasoningUIPart(part)"
289289
:text="part.text"
@@ -298,11 +298,11 @@ defineShortcuts({
298298

299299
<template v-else-if="isTextUIPart(part) && part.text.length > 0">
300300
<ChatComark
301-
v-if="message.role === 'assistant'"
301+
v-if="role === 'assistant'"
302302
:markdown="part.text"
303303
:streaming="isPartStreaming(part)"
304304
/>
305-
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap text-sm/6">
305+
<p v-else-if="role === 'user'" class="whitespace-pre-wrap text-sm/6">
306306
{{ part.text }}
307307
</p>
308308
</template>

‎docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,17 +82,17 @@ const ui = {
8282
:user="{ side: 'left', variant: 'naked', avatar: { src: 'https://github.com/benjamincanac.png', loading: 'lazy' as const } }"
8383
:assistant="{ icon: 'i-lucide-bot' }"
8484
>
85-
<template #content="{ message }">
86-
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
85+
<template #content="{ id, role, parts }">
86+
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
8787
<template v-if="isTextUIPart(part)">
8888
<Comark
89-
v-if="message.role === 'assistant'"
89+
v-if="role === 'assistant'"
9090
:markdown="part.text"
9191
:streaming="isPartStreaming(part)"
9292
:plugins="[highlight()]"
9393
class="*:first:mt-0 *:last:mb-0"
9494
/>
95-
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap leading-6">
95+
<p v-else-if="role === 'user'" class="whitespace-pre-wrap leading-6">
9696
{{ part.text }}
9797
</p>
9898
</template>

‎docs/app/components/content/examples/chat/ChatPaletteModalExample.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,17 +57,17 @@ const ui = {
5757
:user="{ side: 'left', variant: 'naked', avatar: { src: 'https://github.com/benjamincanac.png', loading: 'lazy' as const } }"
5858
:assistant="{ icon: 'i-lucide-bot' }"
5959
>
60-
<template #content="{ message }">
61-
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
60+
<template #content="{ id, role, parts }">
61+
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
6262
<template v-if="isTextUIPart(part)">
6363
<Comark
64-
v-if="message.role === 'assistant'"
64+
v-if="role === 'assistant'"
6565
:markdown="part.text"
6666
:streaming="isPartStreaming(part)"
6767
:plugins="[highlight()]"
6868
class="*:first:mt-0 *:last:mb-0"
6969
/>
70-
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap leading-6">
70+
<p v-else-if="role === 'user'" class="whitespace-pre-wrap leading-6">
7171
{{ part.text }}
7272
</p>
7373
</template>

‎docs/app/components/content/examples/sidebar/SidebarChatExample.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,17 +82,17 @@ const ui = {
8282
compact
8383
class="px-0"
8484
>
85-
<template #content="{ message }">
86-
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
85+
<template #content="{ id, role, parts }">
86+
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
8787
<template v-if="isTextUIPart(part)">
8888
<Comark
89-
v-if="message.role === 'assistant'"
89+
v-if="role === 'assistant'"
9090
:markdown="part.text"
9191
:streaming="isPartStreaming(part)"
9292
:plugins="[highlight()]"
9393
class="*:first:mt-0 *:last:mb-0"
9494
/>
95-
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap text-sm/6">
95+
<p v-else-if="role === 'user'" class="whitespace-pre-wrap text-sm/6">
9696
{{ part.text }}
9797
</p>
9898
</template>

‎docs/content/blog/how-to-build-an-ai-chat.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -579,8 +579,8 @@ onMounted(() => {
579579
should-auto-scroll
580580
class="flex-1"
581581
>
582-
<template #content="{ message }">
583-
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
582+
<template #content="{ id, role, parts }">
583+
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
584584
<UChatReasoning
585585
v-if="isReasoningUIPart(part)"
586586
:text="part.text"
@@ -594,11 +594,11 @@ onMounted(() => {
594594
595595
<template v-else-if="isTextUIPart(part)">
596596
<ChatComark
597-
v-if="message.role === 'assistant'"
597+
v-if="role === 'assistant'"
598598
:markdown="part.text"
599599
:streaming="isPartStreaming(part)"
600600
/>
601-
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
601+
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
602602
{{ part.text }}
603603
</p>
604604
</template>
@@ -860,8 +860,8 @@ onMounted(() => {
860860
should-auto-scroll
861861
class="flex-1"
862862
>
863-
<template #content="{ message }">
864-
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
863+
<template #content="{ id, role, parts }">
864+
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
865865
<UChatReasoning
866866
v-if="isReasoningUIPart(part)"
867867
:text="part.text"
@@ -875,11 +875,11 @@ onMounted(() => {
875875
876876
<template v-else-if="isTextUIPart(part)">
877877
<ChatComark
878-
v-if="message.role === 'assistant'"
878+
v-if="role === 'assistant'"
879879
:markdown="part.text"
880880
:streaming="isPartStreaming(part)"
881881
/>
882-
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
882+
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
883883
{{ part.text }}
884884
</p>
885885
</template>
@@ -1045,8 +1045,8 @@ onMounted(() => {
10451045
should-auto-scroll
10461046
class="flex-1"
10471047
>
1048-
<template #content="{ message }">
1049-
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
1048+
<template #content="{ id, role, parts }">
1049+
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
10501050
<UChatReasoning
10511051
v-if="isReasoningUIPart(part)"
10521052
:text="part.text"
@@ -1060,11 +1060,11 @@ onMounted(() => {
10601060
10611061
<template v-else-if="isTextUIPart(part)">
10621062
<ChatComark
1063-
v-if="message.role === 'assistant'"
1063+
v-if="role === 'assistant'"
10641064
:markdown="part.text"
10651065
:streaming="isPartStreaming(part)"
10661066
/>
1067-
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
1067+
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
10681068
{{ part.text }}
10691069
</p>
10701070
</template>

‎docs/content/docs/1.getting-started/3.migration/1.v4.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -471,8 +471,8 @@ import highlight from '@comark/nuxt/plugins/highlight'
471471
472472
<template>
473473
<UChatMessages :messages="chat.messages" :status="chat.status">
474-
<template #content="{ message }">
475-
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
474+
<template #content="{ id, role, parts }">
475+
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
476476
<UChatReasoning
477477
v-if="isReasoningUIPart(part)"
478478
:text="part.text"
@@ -488,13 +488,13 @@ import highlight from '@comark/nuxt/plugins/highlight'
488488
489489
<template v-else-if="isTextUIPart(part)">
490490
<Comark
491-
v-if="message.role === 'assistant'"
491+
v-if="role === 'assistant'"
492492
:markdown="part.text"
493493
:streaming="isPartStreaming(part)"
494494
:plugins="[highlight()]"
495495
class="*:first:mt-0 *:last:mb-0"
496496
/>
497-
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
497+
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
498498
{{ part.text }}
499499
</p>
500500
</template>
@@ -515,8 +515,8 @@ import highlight from '@comark/vue/plugins/highlight'
515515
516516
<template>
517517
<UChatMessages :messages="chat.messages" :status="chat.status">
518-
<template #content="{ message }">
519-
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
518+
<template #content="{ id, role, parts }">
519+
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
520520
<UChatReasoning
521521
v-if="isReasoningUIPart(part)"
522522
:text="part.text"
@@ -532,13 +532,13 @@ import highlight from '@comark/vue/plugins/highlight'
532532
533533
<template v-else-if="isTextUIPart(part)">
534534
<Comark
535-
v-if="message.role === 'assistant'"
535+
v-if="role === 'assistant'"
536536
:markdown="part.text"
537537
:streaming="isPartStreaming(part)"
538538
:plugins="[highlight()]"
539539
class="*:first:mt-0 *:last:mb-0"
540540
/>
541-
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
541+
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
542542
{{ part.text }}
543543
</p>
544544
</template>

‎docs/content/docs/2.components/chat-messages.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -420,10 +420,10 @@ import { isTextUIPart } from 'ai'
420420
421421
<template>
422422
<UChatMessages :messages="messages" :status="status">
423-
<template #content="{ message }">
423+
<template #content="{ id, parts }">
424424
<template
425-
v-for="(part, index) in message.parts"
426-
:key="`${message.id}-${part.type}-${index}`"
425+
v-for="(part, index) in parts"
426+
:key="`${id}-${part.type}-${index}`"
427427
>
428428
<p v-if="isTextUIPart(part)" class="whitespace-pre-wrap">
429429
{{ part.text }}

‎docs/content/docs/2.components/chat.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -334,10 +334,10 @@ function onSubmit() {
334334
:messages="chat.messages"
335335
:status="chat.status"
336336
>
337-
<template #content="{ message }">
337+
<template #content="{ id, role, parts }">
338338
<template
339-
v-for="(part, index) in message.parts"
340-
:key="`${message.id}-${part.type}-${index}`"
339+
v-for="(part, index) in parts"
340+
:key="`${id}-${part.type}-${index}`"
341341
>
342342
<UChatReasoning
343343
v-if="isReasoningUIPart(part)"
@@ -360,13 +360,13 @@ function onSubmit() {
360360
361361
<template v-else-if="isTextUIPart(part)">
362362
<Comark
363-
v-if="message.role === 'assistant'"
363+
v-if="role === 'assistant'"
364364
:markdown="part.text"
365365
:streaming="isPartStreaming(part)"
366366
:plugins="[highlight()]"
367367
class="*:first:mt-0 *:last:mb-0"
368368
/>
369-
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
369+
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
370370
{{ part.text }}
371371
</p>
372372
</template>
@@ -418,10 +418,10 @@ function onSubmit() {
418418
:messages="chat.messages"
419419
:status="chat.status"
420420
>
421-
<template #content="{ message }">
421+
<template #content="{ id, role, parts }">
422422
<template
423-
v-for="(part, index) in message.parts"
424-
:key="`${message.id}-${part.type}-${index}`"
423+
v-for="(part, index) in parts"
424+
:key="`${id}-${part.type}-${index}`"
425425
>
426426
<UChatReasoning
427427
v-if="isReasoningUIPart(part)"
@@ -444,13 +444,13 @@ function onSubmit() {
444444
445445
<template v-else-if="isTextUIPart(part)">
446446
<Comark
447-
v-if="message.role === 'assistant'"
447+
v-if="role === 'assistant'"
448448
:markdown="part.text"
449449
:streaming="isPartStreaming(part)"
450450
:plugins="[highlight()]"
451451
class="*:first:mt-0 *:last:mb-0"
452452
/>
453-
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
453+
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
454454
{{ part.text }}
455455
</p>
456456
</template>

‎playgrounds/nuxt/app/pages/chat.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,8 @@ function getFaviconUrl(url: string): string {
7979
:status="chat.status"
8080
:spacing-offset="48"
8181
>
82-
<template #content="{ message }">
83-
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
82+
<template #content="{ id, role, parts }">
83+
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
8484
<UChatReasoning
8585
v-if="isReasoningUIPart(part)"
8686
:text="part.text"
@@ -97,13 +97,13 @@ function getFaviconUrl(url: string): string {
9797

9898
<template v-else-if="isTextUIPart(part)">
9999
<Comark
100-
v-if="message.role === 'assistant'"
100+
v-if="role === 'assistant'"
101101
:markdown="part.text"
102102
:streaming="isPartStreaming(part)"
103103
:plugins="[highlight()]"
104104
class="*:first:mt-0 *:last:mb-0"
105105
/>
106-
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
106+
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
107107
{{ part.text }}
108108
</p>
109109
</template>

‎skills/nuxt-ui/references/layouts/chat.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,8 @@ function onSubmit() {
138138
<template #body>
139139
<UContainer>
140140
<UChatMessages :messages="chat.messages" :status="chat.status">
141-
<template #content="{ message }">
142-
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
141+
<template #content="{ id, role, parts }">
142+
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
143143
<UChatReasoning
144144
v-if="isReasoningUIPart(part)"
145145
:text="part.text"
@@ -161,13 +161,13 @@ function onSubmit() {
161161
162162
<template v-else-if="isTextUIPart(part)">
163163
<Comark
164-
v-if="message.role === 'assistant'"
164+
v-if="role === 'assistant'"
165165
:markdown="part.text"
166166
:streaming="isPartStreaming(part)"
167167
:plugins="[highlight()]"
168168
class="*:first:mt-0 *:last:mb-0"
169169
/>
170-
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
170+
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
171171
{{ part.text }}
172172
</p>
173173
</template>

0 commit comments

Comments
 (0)