lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: align agent image analysis card with reference layout

Browse Source
This commit is contained in:
Your Name 2026-02-21 00:27:07 +08:00
parent 2f33598e57
commit 41482275b6
1 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
components/elements/response.tsx
View File

@ -168,31 +168,42 @@ function ImageAnalysisCollapsible({
streamdownClassName,
streamdownComponents,
}: ImageAnalysisCollapsibleProps) {
const [open, setOpen] = useState(false);
const [open, setOpen] = useState(true);
return (
<Collapsible
className="my-2 rounded-xl border border-border/60 bg-muted/30"
className="my-3 rounded-[20px] bg-[#f4f5f7] px-5 py-4"
onOpenChange={setOpen}
open={open}
>
<CollapsibleTrigger className="flex w-full items-center justify-between px-3 py-2 text-left">
<span className="text-sm font-medium text-foreground">图片分析</span>
<CollapsibleTrigger className="flex w-full items-center justify-between gap-3 text-left">
<span className="inline-flex items-center gap-2">
<span className="inline-flex h-6 min-w-6 items-center justify-center rounded-full bg-white text-[11px] font-semibold text-[#98a2b3] shadow-[inset_0_0_0_1px_rgba(148,163,184,0.45)]">
Q.
</span>
<span className="text-base font-semibold tracking-tight text-[#9aa1ad]">图片分析</span>
</span>
<ChevronDownIcon
className={cn(
"size-4 text-muted-foreground transition-transform",
"size-4 shrink-0 text-[#9aa1ad] transition-transform",
open ? "rotate-180" : "rotate-0"
)}
/>
</CollapsibleTrigger>
<CollapsibleContent
className={cn(
"border-border/50 border-t px-3 pb-3 pt-2 text-sm text-muted-foreground",
"px-0 pb-0 pt-3",
"data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1",
"outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in"
)}
>
<Streamdown className={streamdownClassName} components={streamdownComponents}>
<Streamdown
className={cn(
streamdownClassName,
"text-[15px] font-medium leading-7 text-[#2f3640] [&_p]:my-0 [&_ul]:my-0 [&_li]:my-0"
)}
components={streamdownComponents}
>
{content}
</Streamdown>
</CollapsibleContent>