Skip to content

Commit af8c023

Browse files
benjamincanacbenjamincanac
committed
fix(ChatMessage): ensure left side takes full width
1 parent d4d793f commit af8c023

File tree

3 files changed

+36
-30
lines changed

3 files changed

+36
-30
lines changed

‎src/theme/chat-message.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,12 @@ export default (options: Required<NuxtOptions['ui']>) => ({
9292
content: 'px-2 py-1 rounded-lg min-h-8',
9393
leading: 'mt-1'
9494
}
95+
}, {
96+
variant: 'naked',
97+
side: 'left',
98+
class: {
99+
content: 'w-full'
100+
}
95101
}],
96102
defaultVariants: {
97103
variant: 'naked'

‎test/components/__snapshots__/ChatMessages-vue.spec.ts.snap‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ exports[`ChatMessages > renders with assistant correctly 1`] = `
1212
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
1313
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
1414
<div class="inline-flex items-center justify-center min-h-6"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span></div>
15-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
15+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
1616
<!--v-if-->
1717
</div>
1818
</article>
@@ -33,7 +33,7 @@ exports[`ChatMessages > renders with class correctly 1`] = `
3333
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
3434
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
3535
<!--v-if-->
36-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
36+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
3737
<!--v-if-->
3838
</div>
3939
</article>
@@ -54,7 +54,7 @@ exports[`ChatMessages > renders with compact correctly 1`] = `
5454
<article data-role="assistant" class="group/message relative w-full scroll-mt-3">
5555
<div class="relative flex items-start rtl:justify-end gap-1.5 pb-3">
5656
<!--v-if-->
57-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
57+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
5858
<!--v-if-->
5959
</div>
6060
</article>
@@ -75,7 +75,7 @@ exports[`ChatMessages > renders with content slot correctly 1`] = `
7575
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
7676
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
7777
<!--v-if-->
78-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Content slot</div>
78+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">Content slot</div>
7979
<!--v-if-->
8080
</div>
8181
</article>
@@ -103,14 +103,14 @@ exports[`ChatMessages > renders with indicator slot correctly 1`] = `
103103
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
104104
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
105105
<!--v-if-->
106-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
106+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
107107
<!--v-if-->
108108
</div>
109109
</article>
110110
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
111111
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
112112
<!--v-if-->
113-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Indicator slot</div>
113+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">Indicator slot</div>
114114
<!--v-if-->
115115
</div>
116116
</article>
@@ -130,7 +130,7 @@ exports[`ChatMessages > renders with messages correctly 1`] = `
130130
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
131131
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
132132
<!--v-if-->
133-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
133+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
134134
<!--v-if-->
135135
</div>
136136
</article>
@@ -151,7 +151,7 @@ exports[`ChatMessages > renders with status error correctly 1`] = `
151151
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
152152
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
153153
<!--v-if-->
154-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
154+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
155155
<!--v-if-->
156156
</div>
157157
</article>
@@ -172,7 +172,7 @@ exports[`ChatMessages > renders with status ready correctly 1`] = `
172172
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
173173
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
174174
<!--v-if-->
175-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
175+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
176176
<!--v-if-->
177177
</div>
178178
</article>
@@ -193,7 +193,7 @@ exports[`ChatMessages > renders with status streaming correctly 1`] = `
193193
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
194194
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
195195
<!--v-if-->
196-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
196+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
197197
<!--v-if-->
198198
</div>
199199
</article>
@@ -214,14 +214,14 @@ exports[`ChatMessages > renders with status submitted correctly 1`] = `
214214
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
215215
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
216216
<!--v-if-->
217-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
217+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
218218
<!--v-if-->
219219
</div>
220220
</article>
221221
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
222222
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
223223
<!--v-if-->
224-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">
224+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">
225225
<div class="h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-elevated [&amp;>*:nth-child(1)]:animate-[bounce_1s_infinite] [&amp;>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] [&amp;>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]"><span></span><span></span><span></span></div>
226226
</div>
227227
<!--v-if-->
@@ -243,7 +243,7 @@ exports[`ChatMessages > renders with ui correctly 1`] = `
243243
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
244244
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
245245
<!--v-if-->
246-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
246+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
247247
<!--v-if-->
248248
</div>
249249
</article>
@@ -264,7 +264,7 @@ exports[`ChatMessages > renders with user correctly 1`] = `
264264
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
265265
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
266266
<!--v-if-->
267-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
267+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
268268
<!--v-if-->
269269
</div>
270270
</article>
@@ -285,7 +285,7 @@ exports[`ChatMessages > renders with viewport slot correctly 1`] = `
285285
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
286286
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
287287
<!--v-if-->
288-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
288+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
289289
<!--v-if-->
290290
</div>
291291
</article>

‎test/components/__snapshots__/ChatMessages.spec.ts.snap‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ exports[`ChatMessages > renders with assistant correctly 1`] = `
1212
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
1313
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
1414
<div class="inline-flex items-center justify-center min-h-6"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:bot text-muted shrink-0" aria-hidden="true"></span></span></div>
15-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
15+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
1616
<!--v-if-->
1717
</div>
1818
</article>
@@ -33,7 +33,7 @@ exports[`ChatMessages > renders with class correctly 1`] = `
3333
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
3434
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
3535
<!--v-if-->
36-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
36+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
3737
<!--v-if-->
3838
</div>
3939
</article>
@@ -54,7 +54,7 @@ exports[`ChatMessages > renders with compact correctly 1`] = `
5454
<article data-role="assistant" class="group/message relative w-full scroll-mt-3">
5555
<div class="relative flex items-start rtl:justify-end gap-1.5 pb-3">
5656
<!--v-if-->
57-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
57+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
5858
<!--v-if-->
5959
</div>
6060
</article>
@@ -75,7 +75,7 @@ exports[`ChatMessages > renders with content slot correctly 1`] = `
7575
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
7676
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
7777
<!--v-if-->
78-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Content slot</div>
78+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">Content slot</div>
7979
<!--v-if-->
8080
</div>
8181
</article>
@@ -103,14 +103,14 @@ exports[`ChatMessages > renders with indicator slot correctly 1`] = `
103103
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
104104
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
105105
<!--v-if-->
106-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
106+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
107107
<!--v-if-->
108108
</div>
109109
</article>
110110
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
111111
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
112112
<!--v-if-->
113-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Indicator slot</div>
113+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">Indicator slot</div>
114114
<!--v-if-->
115115
</div>
116116
</article>
@@ -130,7 +130,7 @@ exports[`ChatMessages > renders with messages correctly 1`] = `
130130
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
131131
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
132132
<!--v-if-->
133-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
133+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
134134
<!--v-if-->
135135
</div>
136136
</article>
@@ -151,7 +151,7 @@ exports[`ChatMessages > renders with status error correctly 1`] = `
151151
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
152152
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
153153
<!--v-if-->
154-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
154+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
155155
<!--v-if-->
156156
</div>
157157
</article>
@@ -172,7 +172,7 @@ exports[`ChatMessages > renders with status ready correctly 1`] = `
172172
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
173173
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
174174
<!--v-if-->
175-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
175+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
176176
<!--v-if-->
177177
</div>
178178
</article>
@@ -193,7 +193,7 @@ exports[`ChatMessages > renders with status streaming correctly 1`] = `
193193
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
194194
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
195195
<!--v-if-->
196-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
196+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
197197
<!--v-if-->
198198
</div>
199199
</article>
@@ -214,14 +214,14 @@ exports[`ChatMessages > renders with status submitted correctly 1`] = `
214214
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
215215
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
216216
<!--v-if-->
217-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
217+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
218218
<!--v-if-->
219219
</div>
220220
</article>
221221
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
222222
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
223223
<!--v-if-->
224-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">
224+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">
225225
<div class="h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-elevated [&amp;>*:nth-child(1)]:animate-[bounce_1s_infinite] [&amp;>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] [&amp;>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]"><span></span><span></span><span></span></div>
226226
</div>
227227
<!--v-if-->
@@ -243,7 +243,7 @@ exports[`ChatMessages > renders with ui correctly 1`] = `
243243
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
244244
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
245245
<!--v-if-->
246-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
246+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
247247
<!--v-if-->
248248
</div>
249249
</article>
@@ -264,7 +264,7 @@ exports[`ChatMessages > renders with user correctly 1`] = `
264264
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
265265
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
266266
<!--v-if-->
267-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
267+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
268268
<!--v-if-->
269269
</div>
270270
</article>
@@ -285,7 +285,7 @@ exports[`ChatMessages > renders with viewport slot correctly 1`] = `
285285
<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
286286
<div class="relative flex items-start rtl:justify-end gap-3 pb-8">
287287
<!--v-if-->
288-
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">I am fine, thank you!</div>
288+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I am fine, thank you!</div>
289289
<!--v-if-->
290290
</div>
291291
</article>

0 commit comments

Comments
 (0)