Skip to content

fix(ChatMessage/ChatMessages): handle generic message and message duplication #6391

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sandros94 wants to merge 5 commits into
base: v4
Choose a base branch
from
Open

fix(ChatMessage/ChatMessages): handle generic message and message duplication #6391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
79a2132
feat(ChatMessage/ChatMessages): generic slot props
sandros94 Apr 23, 2026
a66e8ab
test(ChatMessage/ChatMessages): add regression tests
sandros94 Apr 23, 2026
bb3ca57
docs(ChatMessage/ChatMessages): use proper destructuring of slot's co…
sandros94 Apr 23, 2026
092b26d
fix(ChatMessage): update `action.onClick` to use `messageProps` inste…
sandros94 Apr 23, 2026
6f2f3a5
fix(ChatMessages): update `user` and `assistant` props to to preser g…
sandros94 Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/app/components/chat/Chat.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,8 +282,8 @@ defineShortcuts({
<UChatTool icon="i-lucide-brain" text="Thinking..." streaming />
</template>

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

<template v-else-if="isTextUIPart(part) && part.text.length > 0">
<ChatComark
v-if="message.role === 'assistant'"
v-if="role === 'assistant'"
:markdown="part.text"
:streaming="isPartStreaming(part)"
/>
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap text-sm/6">
<p v-else-if="role === 'user'" class="whitespace-pre-wrap text-sm/6">
{{ part.text }}
</p>
</template>
Expand Down
8 changes: 4 additions & 4 deletions docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,17 +82,17 @@ const ui = {
:user="{ side: 'left', variant: 'naked', avatar: { src: 'https://github.com/benjamincanac.png', loading: 'lazy' as const } }"
:assistant="{ icon: 'i-lucide-bot' }"
>
<template #content="{ message }">
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
<template #content="{ id, role, parts }">
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
<template v-if="isTextUIPart(part)">
<Comark
v-if="message.role === 'assistant'"
v-if="role === 'assistant'"
:markdown="part.text"
:streaming="isPartStreaming(part)"
:plugins="[highlight()]"
class="*:first:mt-0 *:last:mb-0"
/>
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap leading-6">
<p v-else-if="role === 'user'" class="whitespace-pre-wrap leading-6">
{{ part.text }}
</p>
</template>
Expand Down
8 changes: 4 additions & 4 deletions docs/app/components/content/examples/chat/ChatPaletteModalExample.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,17 +57,17 @@ const ui = {
:user="{ side: 'left', variant: 'naked', avatar: { src: 'https://github.com/benjamincanac.png', loading: 'lazy' as const } }"
:assistant="{ icon: 'i-lucide-bot' }"
>
<template #content="{ message }">
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
<template #content="{ id, role, parts }">
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
<template v-if="isTextUIPart(part)">
<Comark
v-if="message.role === 'assistant'"
v-if="role === 'assistant'"
:markdown="part.text"
:streaming="isPartStreaming(part)"
:plugins="[highlight()]"
class="*:first:mt-0 *:last:mb-0"
/>
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap leading-6">
<p v-else-if="role === 'user'" class="whitespace-pre-wrap leading-6">
{{ part.text }}
</p>
</template>
Expand Down
8 changes: 4 additions & 4 deletions docs/app/components/content/examples/sidebar/SidebarChatExample.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,17 +82,17 @@ const ui = {
compact
class="px-0"
>
<template #content="{ message }">
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
<template #content="{ id, role, parts }">
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
<template v-if="isTextUIPart(part)">
<Comark
v-if="message.role === 'assistant'"
v-if="role === 'assistant'"
:markdown="part.text"
:streaming="isPartStreaming(part)"
:plugins="[highlight()]"
class="*:first:mt-0 *:last:mb-0"
/>
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap text-sm/6">
<p v-else-if="role === 'user'" class="whitespace-pre-wrap text-sm/6">
{{ part.text }}
</p>
</template>
Expand Down
24 changes: 12 additions & 12 deletions docs/content/blog/how-to-build-an-ai-chat.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -579,8 +579,8 @@ onMounted(() => {
should-auto-scroll
class="flex-1"
>
<template #content="{ message }">
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
<template #content="{ id, role, parts }">
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
<UChatReasoning
v-if="isReasoningUIPart(part)"
:text="part.text"
Expand All @@ -594,11 +594,11 @@ onMounted(() => {

<template v-else-if="isTextUIPart(part)">
<ChatComark
v-if="message.role === 'assistant'"
v-if="role === 'assistant'"
:markdown="part.text"
:streaming="isPartStreaming(part)"
/>
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
{{ part.text }}
</p>
</template>
Expand Down Expand Up @@ -860,8 +860,8 @@ onMounted(() => {
should-auto-scroll
class="flex-1"
>
<template #content="{ message }">
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
<template #content="{ id, role, parts }">
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
<UChatReasoning
v-if="isReasoningUIPart(part)"
:text="part.text"
Expand All @@ -875,11 +875,11 @@ onMounted(() => {

<template v-else-if="isTextUIPart(part)">
<ChatComark
v-if="message.role === 'assistant'"
v-if="role === 'assistant'"
:markdown="part.text"
:streaming="isPartStreaming(part)"
/>
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
{{ part.text }}
</p>
</template>
Expand Down Expand Up @@ -1045,8 +1045,8 @@ onMounted(() => {
should-auto-scroll
class="flex-1"
>
<template #content="{ message }">
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
<template #content="{ id, role, parts }">
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
<UChatReasoning
v-if="isReasoningUIPart(part)"
:text="part.text"
Expand All @@ -1060,11 +1060,11 @@ onMounted(() => {

<template v-else-if="isTextUIPart(part)">
<ChatComark
v-if="message.role === 'assistant'"
v-if="role === 'assistant'"
:markdown="part.text"
:streaming="isPartStreaming(part)"
/>
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
{{ part.text }}
</p>
</template>
Expand Down
16 changes: 8 additions & 8 deletions docs/content/docs/1.getting-started/3.migration/1.v4.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,8 +471,8 @@ import highlight from '@comark/nuxt/plugins/highlight'

<template>
<UChatMessages :messages="chat.messages" :status="chat.status">
<template #content="{ message }">
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
<template #content="{ id, role, parts }">
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
<UChatReasoning
v-if="isReasoningUIPart(part)"
:text="part.text"
Expand All @@ -488,13 +488,13 @@ import highlight from '@comark/nuxt/plugins/highlight'

<template v-else-if="isTextUIPart(part)">
<Comark
v-if="message.role === 'assistant'"
v-if="role === 'assistant'"
:markdown="part.text"
:streaming="isPartStreaming(part)"
:plugins="[highlight()]"
class="*:first:mt-0 *:last:mb-0"
/>
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
{{ part.text }}
</p>
</template>
Expand All @@ -515,8 +515,8 @@ import highlight from '@comark/vue/plugins/highlight'

<template>
<UChatMessages :messages="chat.messages" :status="chat.status">
<template #content="{ message }">
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
<template #content="{ id, role, parts }">
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
<UChatReasoning
v-if="isReasoningUIPart(part)"
:text="part.text"
Expand All @@ -532,13 +532,13 @@ import highlight from '@comark/vue/plugins/highlight'

<template v-else-if="isTextUIPart(part)">
<Comark
v-if="message.role === 'assistant'"
v-if="role === 'assistant'"
:markdown="part.text"
:streaming="isPartStreaming(part)"
:plugins="[highlight()]"
class="*:first:mt-0 *:last:mb-0"
/>
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
{{ part.text }}
</p>
</template>
Expand Down
6 changes: 3 additions & 3 deletions docs/content/docs/2.components/chat-messages.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -420,10 +420,10 @@ import { isTextUIPart } from 'ai'
<template>
<UChatMessages :messages="messages" :status="status">
<template #content="{ message }">
<template #content="{ id, parts }">
<template
v-for="(part, index) in message.parts"
:key="`${message.id}-${part.type}-${index}`"
v-for="(part, index) in parts"
:key="`${id}-${part.type}-${index}`"
Comment thread
benjamincanac marked this conversation as resolved.
>
<p v-if="isTextUIPart(part)" class="whitespace-pre-wrap">
{{ part.text }}
Expand Down
20 changes: 10 additions & 10 deletions docs/content/docs/2.components/chat.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,10 +334,10 @@ function onSubmit() {
:messages="chat.messages"
:status="chat.status"
>
<template #content="{ message }">
<template #content="{ id, role, parts }">
<template
v-for="(part, index) in message.parts"
:key="`${message.id}-${part.type}-${index}`"
v-for="(part, index) in parts"
:key="`${id}-${part.type}-${index}`"
>
<UChatReasoning
v-if="isReasoningUIPart(part)"
Expand All @@ -360,13 +360,13 @@ function onSubmit() {
<template v-else-if="isTextUIPart(part)">
<Comark
v-if="message.role === 'assistant'"
v-if="role === 'assistant'"
:markdown="part.text"
:streaming="isPartStreaming(part)"
:plugins="[highlight()]"
class="*:first:mt-0 *:last:mb-0"
/>
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
{{ part.text }}
</p>
</template>
Expand Down Expand Up @@ -418,10 +418,10 @@ function onSubmit() {
:messages="chat.messages"
:status="chat.status"
>
<template #content="{ message }">
<template #content="{ id, role, parts }">
<template
v-for="(part, index) in message.parts"
:key="`${message.id}-${part.type}-${index}`"
v-for="(part, index) in parts"
:key="`${id}-${part.type}-${index}`"
>
<UChatReasoning
v-if="isReasoningUIPart(part)"
Expand All @@ -444,13 +444,13 @@ function onSubmit() {
<template v-else-if="isTextUIPart(part)">
<Comark
v-if="message.role === 'assistant'"
v-if="role === 'assistant'"
:markdown="part.text"
:streaming="isPartStreaming(part)"
:plugins="[highlight()]"
class="*:first:mt-0 *:last:mb-0"
/>
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
{{ part.text }}
</p>
</template>
Expand Down
8 changes: 4 additions & 4 deletions playgrounds/nuxt/app/pages/chat.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,8 @@ function getFaviconUrl(url: string): string {
:status="chat.status"
:spacing-offset="48"
>
<template #content="{ message }">
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
<template #content="{ id, role, parts }">
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
<UChatReasoning
v-if="isReasoningUIPart(part)"
:text="part.text"
Expand All @@ -97,13 +97,13 @@ function getFaviconUrl(url: string): string {

<template v-else-if="isTextUIPart(part)">
<Comark
v-if="message.role === 'assistant'"
v-if="role === 'assistant'"
:markdown="part.text"
:streaming="isPartStreaming(part)"
:plugins="[highlight()]"
class="*:first:mt-0 *:last:mb-0"
/>
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
{{ part.text }}
</p>
</template>
Expand Down
8 changes: 4 additions & 4 deletions skills/nuxt-ui/references/layouts/chat.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,8 +138,8 @@ function onSubmit() {
<template #body>
<UContainer>
<UChatMessages :messages="chat.messages" :status="chat.status">
<template #content="{ message }">
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
<template #content="{ id, role, parts }">
<template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
<UChatReasoning
v-if="isReasoningUIPart(part)"
:text="part.text"
Expand All @@ -161,13 +161,13 @@ function onSubmit() {

<template v-else-if="isTextUIPart(part)">
<Comark
v-if="message.role === 'assistant'"
v-if="role === 'assistant'"
:markdown="part.text"
:streaming="isPartStreaming(part)"
:plugins="[highlight()]"
class="*:first:mt-0 *:last:mb-0"
/>
<p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
<p v-else-if="role === 'user'" class="whitespace-pre-wrap">
{{ part.text }}
</p>
</template>
Expand Down
Loading
Loading