dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix alignment (#1148)

Browse source
This commit is contained in:
josh 2025-09-01 12:27:04 +01:00 • committed by GitHub
parent 5e2f45aede
commit 92292c5a0a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 7 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

21
components/message.tsx
View file

@ -72,9 +72,9 @@ const PurePreviewMessage = ({
<div <div
className={cn('flex items-start gap-3', { className={cn('flex items-start gap-3', {
'w-full': mode === 'edit', 'w-full': mode === 'edit',
'max-w-xl ml-auto justify-end mr-10': 'max-w-xl ml-auto justify-end mr-6':
message.role === 'user' && mode !== 'edit', message.role === 'user' && mode !== 'edit',
'justify-start': message.role === 'assistant', 'justify-start -ml-3': message.role === 'assistant',
})} })}
> >
{message.role === 'assistant' && ( {message.role === 'assistant' && (
@ -149,7 +149,7 @@ const PurePreviewMessage = ({
className={cn('justify-start items-start text-left', { className={cn('justify-start items-start text-left', {
'bg-primary text-primary-foreground': 'bg-primary text-primary-foreground':
message.role === 'user', message.role === 'user',
'bg-transparent': message.role === 'assistant', 'bg-transparent -ml-4': message.role === 'assistant',
})} })}
> >
<Response>{sanitizeText(part.text)}</Response> <Response>{sanitizeText(part.text)}</Response>
@ -315,25 +315,18 @@ export const ThinkingMessage = () => {
return ( return (
<motion.div <motion.div
data-testid="message-assistant-loading" data-testid="message-assistant-loading"
className="px-4 mx-auto w-full max-w-3xl group/message min-h-96" className="w-full group/message"
initial={{ y: 5, opacity: 0 }} initial={{ y: 5, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { delay: 1 } }} animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
data-role={role} data-role={role}
> >
<div <div className="flex gap-4 w-full items-start justify-start">
className={cx( <div className="flex justify-center items-center rounded-full ring-1 size-8 shrink-0 ring-border bg-background mt-1">
'flex gap-4 group-data-[role=user]/message:px-3 w-full group-data-[role=user]/message:w-fit group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl group-data-[role=user]/message:py-2 rounded-xl',
{
'group-data-[role=user]/message:bg-muted': true,
},
)}
>
<div className="flex justify-center items-center mt-1 rounded-full ring-1 size-8 shrink-0 ring-border bg-background">
<SparklesIcon size={14} /> <SparklesIcon size={14} />
</div> </div>
<div className="flex flex-col gap-2 w-full"> <div className="flex flex-col gap-2 w-full">
<div className="flex flex-col gap-4 text-muted-foreground"> <div className="flex flex-col gap-2 text-muted-foreground">
Hmm... Hmm...
</div> </div>
</div> </div>