feat: redesign step counter

This commit is contained in:
Henry Li
2026-01-17 17:45:13 +08:00
parent 97dbcc4bd6
commit a64b0d226b

View File

@@ -42,6 +42,10 @@ export function MessageGroup({
isLoading?: boolean; isLoading?: boolean;
}) { }) {
const steps = useMemo(() => convertToSteps(messages), [messages]); const steps = useMemo(() => convertToSteps(messages), [messages]);
const stepCount = useMemo(
() => steps.filter((step) => step.type !== "reasoning").length,
[steps],
);
const rehypePlugins = useRehypeSplitWordsIntoSpans(isLoading); const rehypePlugins = useRehypeSplitWordsIntoSpans(isLoading);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const lastStep = steps[steps.length - 1]; const lastStep = steps[steps.length - 1];
@@ -56,16 +60,16 @@ export function MessageGroup({
<ChainOfThoughtHeader <ChainOfThoughtHeader
className="min-h-6" className="min-h-6"
icon={ icon={
open && steps.length > 1 ? <ListTreeIcon className="size-4" /> : icon open && stepCount > 1 ? <ListTreeIcon className="size-4" /> : icon
} }
> >
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center justify-between">
<div> <div>
<div> <div>
{open && steps.length > 1 ? ( {open && stepCount > 1 ? (
<div>{steps.length} steps</div> <div>{stepCount} steps</div>
) : ( ) : (
<FlipDisplay uniqueKey={`step-${steps.length}`}> <FlipDisplay uniqueKey={`step-${stepCount}`}>
<MessageResponse rehypePlugins={rehypePlugins}> <MessageResponse rehypePlugins={rehypePlugins}>
{label} {label}
</MessageResponse> </MessageResponse>
@@ -74,11 +78,9 @@ export function MessageGroup({
</div> </div>
</div> </div>
<div> <div>
{!open && steps.length > 1 && ( {!open && stepCount > 1 && (
<div> <div>
{steps.length - 1 > 1 {stepCount > 1 ? `${stepCount} steps` : `${stepCount} step`}
? `${steps.length - 1} more steps`
: `${steps.length - 1} more step`}
</div> </div>
)} )}
</div> </div>