Invert background, add a subtle shadow

This commit is contained in:
Tat Dat Duong
2025-03-07 15:28:11 +01:00
parent 9fc221e88a
commit 13240c7c26
3 changed files with 4 additions and 7 deletions

View File

@@ -315,7 +315,7 @@ export function Thread() {
<ScrollToBottom className="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 animate-in fade-in-0 zoom-in-95" /> <ScrollToBottom className="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 animate-in fade-in-0 zoom-in-95" />
<div className="bg-muted rounded-2xl border mx-auto mb-8 w-full max-w-4xl relative z-10"> <div className="bg-muted rounded-2xl border shadow-xs mx-auto mb-8 w-full max-w-4xl relative z-10">
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
className="grid grid-rows-[1fr_auto] gap-2 max-w-4xl mx-auto" className="grid grid-rows-[1fr_auto] gap-2 max-w-4xl mx-auto"
@@ -344,7 +344,7 @@ export function Thread() {
) : ( ) : (
<Button <Button
type="submit" type="submit"
className="transition-all" className="transition-all shadow-md"
disabled={isLoading || !input.trim()} disabled={isLoading || !input.trim()}
> >
Send Send

View File

@@ -69,15 +69,12 @@ export function AssistantMessage({
return ( return (
<div className="flex items-start mr-auto gap-2 group"> <div className="flex items-start mr-auto gap-2 group">
<Avatar>
<AvatarFallback>A</AvatarFallback>
</Avatar>
{isToolResult ? ( {isToolResult ? (
<ToolResult message={message} /> <ToolResult message={message} />
) : ( ) : (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
{contentString.length > 0 && ( {contentString.length > 0 && (
<div className="rounded-2xl bg-muted px-4 py-2"> <div className="py-1">
<MarkdownText>{contentString}</MarkdownText> <MarkdownText>{contentString}</MarkdownText>
</div> </div>
)} )}

View File

@@ -84,7 +84,7 @@ export function HumanMessage({
onSubmit={handleSubmitEdit} onSubmit={handleSubmitEdit}
/> />
) : ( ) : (
<p className="text-right py-1">{contentString}</p> <p className="text-right px-4 py-2 rounded-3xl bg-muted">{contentString}</p>
)} )}
<div <div