AI Reasoning Panel

AI 思考過程摺疊面板，思考中自動展開、流光標題與逐步揭示，結束後結算耗時並可自動收合。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

思考中thinking

預設展開defaultOpen

思考結束自動收合autoCollapse

自動收合延遲（毫秒）collapseDelay

800

<AiReasoningPanel />

安裝

npx shadcn@latest add https://webberui.com/r/ai-reasoning-panel.json

或在 components.json 設定 registries 後，改用 @webberui/ai-reasoning-panel 安裝。

安裝依賴後，從 registry JSON（/r/ai-reasoning-panel.json 的 files[0].content）複製 ai-reasoning-panel.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

使用

import {
  AIReasoningPanel,
  AIReasoningTrigger,
  AIReasoningContent,
  AIReasoningStep,
} from "@/components/ui/ai-reasoning-panel";

<AIReasoningPanel thinking={isStreaming} autoCollapse>
  <AIReasoningTrigger />
  <AIReasoningContent>
    {steps.map((step) => (
      <AIReasoningStep key={step}>{step}</AIReasoningStep>
    ))}
  </AIReasoningContent>
</AIReasoningPanel>

將 thinking 綁定到模型串流狀態即可：轉為 true 時面板自動展開、標題切換為流光的「思考中⋯」並開始計時；轉回 false 時標題結算為「思考了 N 秒」，若有 autoCollapse 則延遲後自動收合。

Props

AIReasoningPanel

Prop	型別	預設值	說明
`children`	`ReactNode`	—	需包含 `AIReasoningTrigger` 與 `AIReasoningContent`
`open`	`boolean`	—	受控模式的展開狀態，不傳則由元件內部管理
`onOpenChange`	`(open: boolean) => void`	—	展開狀態變更時的回呼（受控與非受控皆會觸發）
`defaultOpen`	`boolean`	`false`	非受控模式的初始展開狀態
`thinking`	`boolean`	`false`	模型是否思考中：轉為 `true` 時自動展開並開始計時
`autoCollapse`	`boolean`	`false`	思考結束後是否自動收合面板
`collapseDelay`	`number`	`800`	思考結束到自動收合之間的延遲（毫秒）
`className`	`string`	—	追加到外框容器的 className

AIReasoningTrigger

Prop	型別	預設值	說明
`children`	`ReactNode`	—	自訂標題內容；不傳則依思考狀態顯示「思考中⋯／思考了 N 秒／推理過程」
`className`	`string`	—	追加到標題按鈕的 className

AIReasoningContent

Prop	型別	預設值	說明
`children`	`ReactNode`	—	推理內容，可搭配 `AIReasoningStep` 逐步呈現
`className`	`string`	—	追加到內容容器的 className

AIReasoningStep

Prop	型別	預設值	說明
`children`	`ReactNode`	—	單一推理步驟的內容，掛載時以淡入＋上移＋模糊揭示進場
`className`	`string`	—	追加到步驟容器的 className

細節

展開/收合以 height: auto 過渡搭配透明度，時序曲線為 cubic-bezier(0.22, 1, 0.36, 1)
思考中的標題以中性色漸層流光呈現（bg-clip-text + 背景位移循環），不引入額外色彩 token
耗時計算在 thinking 轉回 false 時結算一次，不足一秒進位為 1，避免顯示「思考了 0 秒」
AIReasoningStep 適合串流情境：每個步驟掛載時獨立進場，逐步揭示思路
所有計時器在狀態切換與卸載時皆會清理

可及性

標題為原生 button，帶 aria-expanded 與 aria-controls，Enter／Space 原生可切換
內容區帶 role="region" 與 aria-labelledby 指向標題按鈕，輔助科技可辨識區塊歸屬
使用者系統開啟「減少動態效果」時：高度過渡歸零改為淡入淡出、流光退化為靜態文字、步驟進場移除位移與模糊、箭頭旋轉即時切換

AI Reasoning Panel

On this page