Reasoning

Reasoning 用于展示 AI 模型的思维链（Chain of Thought）内容。采用复合组件模式，支持自由组合和多种视觉变体。

引入

import {
  Reasoning,
  ReasoningRoot,
  ReasoningTrigger,
  ReasoningContent,
  ReasoningText,
  ReasoningFade,
} from "aui-components";

基本用法

快捷用法 — Reasoning 作为整体组件直接使用：

import { Reasoning } from "aui-components";

// 在 MessagePrimitive.GroupedParts 中使用（Thread 内部已预配置）
<MessagePrimitive.GroupedParts groupBy={...}>
  {({ part, children }) => {
    switch (part.type) {
      case "reasoning":
        return <Reasoning {...part} />;
    }
  }}
</MessagePrimitive.GroupedParts>

组合用法 — 自由组合子组件：

<ReasoningRoot streaming={true} variant="outline">
  <ReasoningTrigger active={true} duration={3} />
  <ReasoningContent aria-busy={true}>
    <ReasoningText>思考过程：首先分析问题，然后...</ReasoningText>
  </ReasoningContent>
</ReasoningRoot>

ReasoningRoot Props

该组件没有公开的 Props。

export type ReasoningRootProps = {
  /** 控制展开状态（受控模式） */
  open?: boolean;
  /** 展开状态变化回调 */
  onOpenChange?: (open: boolean) => void;
  /** 默认展开状态 */
  defaultOpen?: boolean;
  /** 是否正在流式输出。为 true 时自动展开 + 底部置顶预览，结束后自动折叠 */
  streaming?: boolean;
  /** 视觉变体 */
  variant?: "outline" | "ghost" | "muted";
};

streaming 行为

当 streaming={true} 时：

组件自动展开
内容区域底部固定，自动滚动跟随最新内容
底部显示渐变淡出效果（Fade）
流式结束（streaming=false）时自动折叠
用户手动切换展开/折叠后，streaming 不再自动控制

变体

ReasoningVariants

变体	样式	适用场景
`outline`	`rounded-lg border px-3 py-2`	默认，有边框
`ghost`	无边框和背景	极简风格
`muted`	`bg-muted/50 rounded-lg px-3 py-2`	柔和背景

// Outline 变体
<ReasoningRoot variant="outline">...</ReasoningRoot>

// Ghost 变体
<ReasoningRoot variant="ghost">...</ReasoningRoot>

// Muted 变体
<ReasoningRoot variant="muted">...</ReasoningRoot>

子组件

ReasoninTrigger

触发展开/折叠的按钮：

<ReasoningTrigger
  active={true} // 是否显示闪烁动画
  duration={3} // 思维链耗时（秒），显示为 "Reasoning (3s)"
/>

active — 流式输出时显示闪烁（Shimmer）效果
duration — 可选，显示思维耗时
图标：BrainIcon + ChevronDownIcon（展开时旋转）

ReasoninContent

可折叠的内容容器，带顶部渐变淡出效果：

<ReasoningContent aria-busy={true}>
  <ReasoningText>...</ReasoningText>
</ReasoningContent>

动画：animate-collapsible-down / animate-collapsible-up
时长：200ms（--animation-duration CSS 变量）

ReasoninText

思维链文本的滚动容器：

<ReasoningText>
  {children} {/* MarkdownText 渲染的思维链内容 */}
</ReasoningText>

最大高度：max-h-64
streaming 模式下自动滚动到底部
使用 ResizeObserver 监听内容变化

ReasoninFade

渐变淡出效果：

<ReasoningFade side="top" />   // 顶部渐变
<ReasoningFade side="bottom" /> // 底部渐变（默认）

仅在 streaming + 展开时显示底部 Fade

ReasonsGroup（已废弃）

// 旧用法（不推荐）
<MessagePrimitive.Parts components={{ ReasoningGroup }} />

// 新用法（推荐）
<MessagePrimitive.GroupedParts
  groupBy={groupPartByType({
    reasoning: ["group-chainOfThought", "group-reasoning"],
  })}
>
  {({ part, children }) => {
    switch (part.type) {
      case "group-reasoning":
        return (
          <ReasoningRoot streaming={running}>
            <ReasoningTrigger active={running} />
            <ReasoningContent aria-busy={running}>
              <ReasoningText>{children}</ReasoningText>
            </ReasoningContent>
          </ReasoningRoot>
        );
    }
  }}
</MessagePrimitive.GroupedParts>