1
- import { GradientAvatar } from "@/components/blocks/Avatars/GradientAvatar" ;
2
1
import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow" ;
3
2
import { Spinner } from "@/components/ui/Spinner/Spinner" ;
4
3
import { Alert , AlertTitle } from "@/components/ui/alert" ;
@@ -13,13 +12,15 @@ import {
13
12
ThumbsDownIcon ,
14
13
ThumbsUpIcon ,
15
14
} from "lucide-react" ;
15
+ import { useTheme } from "next-themes" ;
16
16
import { useEffect , useRef , useState } from "react" ;
17
17
import { toast } from "sonner" ;
18
18
import { type ThirdwebClient , prepareTransaction } from "thirdweb" ;
19
19
import { useSendTransaction } from "thirdweb/react" ;
20
20
import { TransactionButton } from "../../../../components/buttons/TransactionButton" ;
21
21
import { MarkdownRenderer } from "../../../../components/contract-components/published-contract/markdown-renderer" ;
22
22
import { useV5DashboardChain } from "../../../../lib/v5-adapter" ;
23
+ import { getSDKTheme } from "../../../components/sdk-component-theme" ;
23
24
import { submitFeedback } from "../api/feedback" ;
24
25
import { NebulaIcon } from "../icons/NebulaIcon" ;
25
26
@@ -97,7 +98,7 @@ export function Chats(props: {
97
98
98
99
return (
99
100
< div
100
- className = "flex max-h-full flex-1 flex-col overflow-hidden"
101
+ className = "relative flex max-h-full flex-1 flex-col overflow-hidden"
101
102
ref = { chatContainerRef }
102
103
>
103
104
< ScrollShadow
@@ -113,27 +114,34 @@ export function Chats(props: {
113
114
props . isChatStreaming && index === props . messages . length - 1 ;
114
115
return (
115
116
< div
117
+ className = "fade-in-0 min-w-0 animate-in pt-1 text-sm duration-300 lg:text-base"
116
118
// biome-ignore lint/suspicious/noArrayIndexKey: index is the unique key
117
119
key = { index }
118
120
>
119
- < div
120
- className = { cn (
121
- "fade-in-0 flex min-w-0 animate-in gap-3 duration-300" ,
122
- ) }
123
- >
124
- < div className = "-translate-y-[2px] relative shrink-0 " >
125
- { message . type === "user" ? (
126
- < GradientAvatar
127
- id = { props . twAccount ?. id || "default" }
128
- // TODO- set account image when available in account object
129
- src = { "" }
130
- className = "size-8 shrink-0 rounded-lg"
131
- client = { props . client }
121
+ { message . type === "user" ? (
122
+ < div className = "flex justify-end gap-3" >
123
+ < div className = "max-w-[80%] overflow-auto rounded-xl border bg-muted/50 px-4 py-2" >
124
+ < MarkdownRenderer
125
+ skipHtml
126
+ markdownText = { message . text }
127
+ code = { {
128
+ ignoreFormattingErrors : true ,
129
+ className : "bg-transparent" ,
130
+ } }
131
+ className = "text-foreground [&>*:last-child]:mb-0"
132
+ p = { { className : "text-foreground leading-normal" } }
133
+ li = { { className : "text-foreground" } }
134
+ inlineCode = { { className : "border-none" } }
132
135
/>
133
- ) : (
136
+ </ div >
137
+ </ div >
138
+ ) : (
139
+ < div className = "flex gap-3" >
140
+ { /* Left Icon */ }
141
+ < div className = "-translate-y-[2px] relative shrink-0" >
134
142
< div
135
143
className = { cn (
136
- "flex size-8 items-center justify-center rounded-lg " ,
144
+ "flex size-9 items-center justify-center rounded-full " ,
137
145
message . type === "assistant" &&
138
146
"border bg-muted/50" ,
139
147
message . type === "error" && "border" ,
@@ -152,49 +160,57 @@ export function Chats(props: {
152
160
< AlertCircleIcon className = "size-5 text-destructive-text" />
153
161
) }
154
162
</ div >
155
- ) }
156
- </ div >
157
- < div className = "min-w-0 grow" >
158
- { message . type === "assistant" ? (
159
- < MarkdownRenderer
160
- skipHtml
161
- markdownText = { message . text }
162
- code = { {
163
- disableCodeHighlight : isMessagePending ,
164
- ignoreFormattingErrors : true ,
165
- } }
166
- className = "text-foreground"
167
- p = { { className : "text-foreground" } }
168
- li = { { className : "text-foreground" } }
169
- />
170
- ) : message . type === "error" ? (
171
- < span className = "text-destructive-text leading-loose" >
172
- { message . text }
173
- </ span >
174
- ) : message . type === "send_transaction" ? (
175
- < ExecuteTransaction
176
- txData = { message . data }
177
- twAccount = { props . twAccount }
178
- client = { props . client }
179
- />
180
- ) : (
181
- < span className = "leading-loose" > { message . text } </ span >
182
- ) }
163
+ </ div >
183
164
184
- { message . type === "assistant" &&
185
- ! props . isChatStreaming &&
186
- props . sessionId &&
187
- message . request_id && (
188
- < MessageActions
189
- messageText = { message . text }
190
- authToken = { props . authToken }
191
- requestId = { message . request_id }
192
- sessionId = { props . sessionId }
193
- className = "mt-4"
194
- />
195
- ) }
165
+ { /* Right Message */ }
166
+ < div className = "min-w-0 grow" >
167
+ < ScrollShadow className = "rounded-lg" >
168
+ { message . type === "assistant" ? (
169
+ < MarkdownRenderer
170
+ skipHtml
171
+ markdownText = { message . text }
172
+ code = { {
173
+ disableCodeHighlight : isMessagePending ,
174
+ ignoreFormattingErrors : true ,
175
+ } }
176
+ className = "text-foreground [&>*:last-child]:mb-0"
177
+ p = { {
178
+ className : "text-foreground" ,
179
+ } }
180
+ li = { { className : "text-foreground" } }
181
+ />
182
+ ) : message . type === "error" ? (
183
+ < span className = "text-destructive-text leading-loose" >
184
+ { message . text }
185
+ </ span >
186
+ ) : message . type === "send_transaction" ? (
187
+ < ExecuteTransaction
188
+ txData = { message . data }
189
+ twAccount = { props . twAccount }
190
+ client = { props . client }
191
+ />
192
+ ) : (
193
+ < span className = "leading-loose" >
194
+ { message . text }
195
+ </ span >
196
+ ) }
197
+ </ ScrollShadow >
198
+
199
+ { message . type === "assistant" &&
200
+ ! props . isChatStreaming &&
201
+ props . sessionId &&
202
+ message . request_id && (
203
+ < MessageActions
204
+ messageText = { message . text }
205
+ authToken = { props . authToken }
206
+ requestId = { message . request_id }
207
+ sessionId = { props . sessionId }
208
+ className = "mt-4"
209
+ />
210
+ ) }
211
+ </ div >
196
212
</ div >
197
- </ div >
213
+ ) }
198
214
</ div >
199
215
) ;
200
216
} ) }
@@ -327,8 +343,13 @@ function SendTransactionButton(props: {
327
343
twAccount : TWAccount ;
328
344
client : ThirdwebClient ;
329
345
} ) {
346
+ const { theme } = useTheme ( ) ;
330
347
const { txData } = props ;
331
- const sendTransaction = useSendTransaction ( ) ;
348
+ const sendTransaction = useSendTransaction ( {
349
+ payModal : {
350
+ theme : getSDKTheme ( theme === "light" ? "light" : "dark" ) ,
351
+ } ,
352
+ } ) ;
332
353
const chain = useV5DashboardChain ( txData . chainId ) ;
333
354
334
355
return (
0 commit comments