Skip to content

Commit 8f9176c

Browse files
benjamincanacbenjamincanac
committed
fix(ChatMessage): reset top and bottom margin
1 parent edda8a6 commit 8f9176c

File tree

5 files changed

+89
-89
lines changed

5 files changed

+89
-89
lines changed

‎src/theme/chat-message.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default (options: Required<NuxtOptions['ui']>) => ({
88
leadingIcon: 'shrink-0',
99
leadingAvatar: 'shrink-0',
1010
leadingAvatarSize: '',
11-
content: 'relative text-pretty min-w-0',
11+
content: 'relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0',
1212
actions: ['opacity-0 group-hover/message:opacity-100 absolute bottom-0 flex items-center', options.theme.transitions && 'transition-opacity']
1313
},
1414
variants: {

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`ChatMessage > renders with as correctly 1`] = `
44
"<section data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
55
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
66
<!--v-if-->
7-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
7+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
88
<!--v-if-->
99
</div>
1010
</section>"
@@ -14,7 +14,7 @@ exports[`ChatMessage > renders with avatar correctly 1`] = `
1414
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
1515
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
1616
<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"><img src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>
17-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
17+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
1818
<!--v-if-->
1919
</div>
2020
</article>"
@@ -24,7 +24,7 @@ exports[`ChatMessage > renders with class correctly 1`] = `
2424
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
2525
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
2626
<!--v-if-->
27-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
27+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
2828
<!--v-if-->
2929
</div>
3030
</article>"
@@ -34,7 +34,7 @@ exports[`ChatMessage > renders with compact correctly 1`] = `
3434
"<article data-role="user" class="group/message relative w-full scroll-mt-3">
3535
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-1.5 pb-3">
3636
<!--v-if-->
37-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
37+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
3838
<!--v-if-->
3939
</div>
4040
</article>"
@@ -44,7 +44,7 @@ exports[`ChatMessage > renders with content correctly 1`] = `
4444
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
4545
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
4646
<!--v-if-->
47-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
47+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
4848
<!--v-if-->
4949
</div>
5050
</article>"
@@ -54,7 +54,7 @@ exports[`ChatMessage > renders with content slot correctly 1`] = `
5454
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
5555
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
5656
<!--v-if-->
57-
<div class="relative text-pretty min-w-0">Content slot</div>
57+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Content slot</div>
5858
<!--v-if-->
5959
</div>
6060
</article>"
@@ -64,7 +64,7 @@ exports[`ChatMessage > renders with icon correctly 1`] = `
6464
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
6565
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
6666
<div class="inline-flex items-center justify-center min-h-6"><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="shrink-0 size-8"></svg></div>
67-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
67+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
6868
<!--v-if-->
6969
</div>
7070
</article>"
@@ -74,7 +74,7 @@ exports[`ChatMessage > renders with parts correctly 1`] = `
7474
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
7575
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
7676
<!--v-if-->
77-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
77+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
7878
<!--v-if-->
7979
</div>
8080
</article>"
@@ -84,7 +84,7 @@ exports[`ChatMessage > renders with role assistant correctly 1`] = `
8484
"<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
8585
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
8686
<!--v-if-->
87-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
87+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
8888
<!--v-if-->
8989
</div>
9090
</article>"
@@ -94,7 +94,7 @@ exports[`ChatMessage > renders with side right correctly 1`] = `
9494
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
9595
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] ltr:justify-end ms-auto gap-3 pb-8">
9696
<!--v-if-->
97-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
97+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
9898
<!--v-if-->
9999
</div>
100100
</article>"
@@ -104,7 +104,7 @@ exports[`ChatMessage > renders with ui correctly 1`] = `
104104
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
105105
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
106106
<!--v-if-->
107-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
107+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
108108
<!--v-if-->
109109
</div>
110110
</article>"
@@ -114,7 +114,7 @@ exports[`ChatMessage > renders with variant naked correctly 1`] = `
114114
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
115115
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
116116
<!--v-if-->
117-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
117+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
118118
<!--v-if-->
119119
</div>
120120
</article>"
@@ -124,7 +124,7 @@ exports[`ChatMessage > renders with variant outline correctly 1`] = `
124124
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
125125
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
126126
<!--v-if-->
127-
<div class="relative text-pretty min-w-0 bg-default ring ring-default px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
127+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-default ring ring-default px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
128128
<!--v-if-->
129129
</div>
130130
</article>"
@@ -134,7 +134,7 @@ exports[`ChatMessage > renders with variant soft correctly 1`] = `
134134
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
135135
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
136136
<!--v-if-->
137-
<div class="relative text-pretty min-w-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
137+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
138138
<!--v-if-->
139139
</div>
140140
</article>"
@@ -144,7 +144,7 @@ exports[`ChatMessage > renders with variant solid correctly 1`] = `
144144
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
145145
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
146146
<!--v-if-->
147-
<div class="relative text-pretty min-w-0 bg-inverted text-inverted px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
147+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-inverted text-inverted px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
148148
<!--v-if-->
149149
</div>
150150
</article>"
@@ -154,7 +154,7 @@ exports[`ChatMessage > renders with variant subtle correctly 1`] = `
154154
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
155155
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
156156
<!--v-if-->
157-
<div class="relative text-pretty min-w-0 bg-elevated/50 ring ring-default px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
157+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 ring ring-default px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
158158
<!--v-if-->
159159
</div>
160160
</article>"

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`ChatMessage > renders with as correctly 1`] = `
44
"<section data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
55
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
66
<!--v-if-->
7-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
7+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
88
<!--v-if-->
99
</div>
1010
</section>"
@@ -14,7 +14,7 @@ exports[`ChatMessage > renders with avatar correctly 1`] = `
1414
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
1515
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
1616
<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"><img src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span></div>
17-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
17+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
1818
<!--v-if-->
1919
</div>
2020
</article>"
@@ -24,7 +24,7 @@ exports[`ChatMessage > renders with class correctly 1`] = `
2424
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
2525
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
2626
<!--v-if-->
27-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
27+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
2828
<!--v-if-->
2929
</div>
3030
</article>"
@@ -34,7 +34,7 @@ exports[`ChatMessage > renders with compact correctly 1`] = `
3434
"<article data-role="user" class="group/message relative w-full scroll-mt-3">
3535
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-1.5 pb-3">
3636
<!--v-if-->
37-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
37+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
3838
<!--v-if-->
3939
</div>
4040
</article>"
@@ -44,7 +44,7 @@ exports[`ChatMessage > renders with content correctly 1`] = `
4444
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
4545
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
4646
<!--v-if-->
47-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
47+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
4848
<!--v-if-->
4949
</div>
5050
</article>"
@@ -54,7 +54,7 @@ exports[`ChatMessage > renders with content slot correctly 1`] = `
5454
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
5555
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
5656
<!--v-if-->
57-
<div class="relative text-pretty min-w-0">Content slot</div>
57+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Content slot</div>
5858
<!--v-if-->
5959
</div>
6060
</article>"
@@ -64,7 +64,7 @@ exports[`ChatMessage > renders with icon correctly 1`] = `
6464
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
6565
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
6666
<div class="inline-flex items-center justify-center min-h-6"><span class="iconify i-lucide:user shrink-0 size-8" aria-hidden="true"></span></div>
67-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
67+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
6868
<!--v-if-->
6969
</div>
7070
</article>"
@@ -74,7 +74,7 @@ exports[`ChatMessage > renders with parts correctly 1`] = `
7474
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
7575
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
7676
<!--v-if-->
77-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
77+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
7878
<!--v-if-->
7979
</div>
8080
</article>"
@@ -84,7 +84,7 @@ exports[`ChatMessage > renders with role assistant correctly 1`] = `
8484
"<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
8585
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
8686
<!--v-if-->
87-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
87+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
8888
<!--v-if-->
8989
</div>
9090
</article>"
@@ -94,7 +94,7 @@ exports[`ChatMessage > renders with side right correctly 1`] = `
9494
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
9595
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] ltr:justify-end ms-auto gap-3 pb-8">
9696
<!--v-if-->
97-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
97+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
9898
<!--v-if-->
9999
</div>
100100
</article>"
@@ -104,7 +104,7 @@ exports[`ChatMessage > renders with ui correctly 1`] = `
104104
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
105105
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
106106
<!--v-if-->
107-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
107+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
108108
<!--v-if-->
109109
</div>
110110
</article>"
@@ -114,7 +114,7 @@ exports[`ChatMessage > renders with variant naked correctly 1`] = `
114114
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
115115
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
116116
<!--v-if-->
117-
<div class="relative text-pretty min-w-0">Hello, how are you?</div>
117+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0">Hello, how are you?</div>
118118
<!--v-if-->
119119
</div>
120120
</article>"
@@ -124,7 +124,7 @@ exports[`ChatMessage > renders with variant outline correctly 1`] = `
124124
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
125125
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
126126
<!--v-if-->
127-
<div class="relative text-pretty min-w-0 bg-default ring ring-default px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
127+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-default ring ring-default px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
128128
<!--v-if-->
129129
</div>
130130
</article>"
@@ -134,7 +134,7 @@ exports[`ChatMessage > renders with variant soft correctly 1`] = `
134134
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
135135
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
136136
<!--v-if-->
137-
<div class="relative text-pretty min-w-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
137+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
138138
<!--v-if-->
139139
</div>
140140
</article>"
@@ -144,7 +144,7 @@ exports[`ChatMessage > renders with variant solid correctly 1`] = `
144144
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
145145
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
146146
<!--v-if-->
147-
<div class="relative text-pretty min-w-0 bg-inverted text-inverted px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
147+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-inverted text-inverted px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
148148
<!--v-if-->
149149
</div>
150150
</article>"
@@ -154,7 +154,7 @@ exports[`ChatMessage > renders with variant subtle correctly 1`] = `
154154
"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
155155
<div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
156156
<!--v-if-->
157-
<div class="relative text-pretty min-w-0 bg-elevated/50 ring ring-default px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
157+
<div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 ring ring-default px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
158158
<!--v-if-->
159159
</div>
160160
</article>"

0 commit comments

Comments
 (0)