unnamed-ui
折叠/步骤

Deep Thinking

Deep thinking collapsible block for displaying AI thinking process

深度思考中
用户想要了解维度来源的相关信息。这是一个比较开放的问题，需要我从多个角度来思考和组织信息。应该包含定义、常见来源、获取方法等方面的内容，并尽量提供清晰和有用的语言来表达。
"use client";

import { DeepThinking } from "@/components/composed/deep-thinking/deep-thinking";

export function DeepThinkingDemo() {
  return (
    <div className="space-y-4 w-full h-full max-w-2xl">
      <DeepThinking
        status="thinking"
        defaultOpen
        content="用户想要了解维度来源的相关信息。这是一个比较开放的问题，需要我从多个角度来思考和组织信息。应该包含定义、常见来源、获取方法等方面的内容，并尽量提供清晰和有用的语言来表达。"
      />
    </div>
  );
}

Deep Thinking 组件用于展示 AI 的深度思考过程，支持可折叠交互、状态管理、动画效果等，适用于 AI 对话、推理展示、问题分析等场景。

概述

  • 三种状态：思考中、已完成、失败，自动匹配图标和样式
  • 可折叠交互：点击头部展开/收起思考内容，支持受控和非受控模式
  • 动画效果：思考中状态显示脉冲动画，展开收起有平滑过渡
  • 完全自定义：支持自定义标题、图标、内容、箭头等
  • 类型安全：完整的 TypeScript 类型定义
  • 轻量级：基于原语组件构建，无额外依赖

快速开始

import { DeepThinking } from "@/registry/wuhan/composed/deep-thinking/deep-thinking";

export function Example() {
  return (
    <DeepThinking
      status="thinking"
      content="正在分析问题的核心要点..."
    />
  );
}

特性

  • 智能状态管理：根据 status 自动切换图标、颜色和默认标题
  • 灵活控制：支持受控模式（controlled）和非受控模式（uncontrolled）
  • 自定义标签：通过 labels 配置不同状态的默认标题
  • 时长显示：可在标题中显示思考耗时（如"已完成思考(用时5秒)"）
  • 可访问性：支持 aria 属性，键盘导航友好
  • 响应式：自适应不同屏幕尺寸

安装

pnpm dlx shadcn@latest add http://localhost:3000/r/wuhan/deep-thinking.json

代码演示

基本

基础的深度思考展示，包含不同状态。

已完成思考(用时5秒)
用户想要了解维度来源的相关信息。这是一个比较开放的问题，需要我从多个角度来思考和组织信息。应该包含定义、常见来源、获取方法等方面的内容，并尽量提供清晰和有用的语言来表达。
"use client";

import { DeepThinking } from "@/components/composed/deep-thinking/deep-thinking";

export function DeepThinkingDefault() {
  return (
    <div className="space-y-4 w-full h-full max-w-2xl">
      {/* 思考中状态 */}
      <DeepThinking
        status="thinking"
        content="深度思考中，正在分析问题的核心要点..."
      />

      {/* 已完成状态 - 展开 */}
      <DeepThinking
        status="completed"
        title="已完成思考(用时5秒)"
        defaultOpen
        content="用户想要了解维度来源的相关信息。这是一个比较开放的问题，需要我从多个角度来思考和组织信息。应该包含定义、常见来源、获取方法等方面的内容，并尽量提供清晰和有用的语言来表达。"
      />

      {/* 已完成状态 - 折叠 */}
      <DeepThinking
        status="completed"
        title="已完成思考(用时8秒)"
        content="已完成对问题的深度分析，考虑了用户的需求和上下文，准备提供详细的回复。"
      />
    </div>
  );
}

状态设置

展示深度思考的不同状态：思考中、已完成、失败。

深度思考中
用户想要了解维度来源的相关信息。这是一个比较开放的问题，需要我从多个角度来思考和组织信息。应该包含定义、常见来源、获取方法等方面的内容，并尽量提供清晰和有用的语言来表达。
"use client";

import { DeepThinking } from "@/components/composed/deep-thinking/deep-thinking";

export function DeepThinkingWithStatus() {
  return (
    <div className="space-y-4 w-full h-full max-w-2xl">
      {/* 思考中 */}
      <DeepThinking
        status="thinking"
        defaultOpen
        content="用户想要了解维度来源的相关信息。这是一个比较开放的问题，需要我从多个角度来思考和组织信息。应该包含定义、常见来源、获取方法等方面的内容，并尽量提供清晰和有用的语言来表达。"
      />

      {/* 已完成 */}
      <DeepThinking
        status="completed"
        title="已完成思考(用时5秒)"
        content="已完成对问题的深度分析，考虑了用户的需求和上下文，准备提供详细的回复。"
      />

      {/* 失败 */}
      <DeepThinking
        status="failed"
        content="思考过程中遇到了问题，无法继续分析。请稍后再试。"
      />
    </div>
  );
}

自定义

自定义图标和标题的深度思考组件。

自定义标题：深度分析完成
这是一个使用自定义图标和标题的深度思考组件。你可以完全控制显示的内容、图标、样式等，原语组件只提供基础的样式框架。
"use client";

import { ChevronDown, Brain } from "lucide-react";
import {
  DeepThinkingContainerPrimitive,
  DeepThinkingHeaderPrimitive,
  DeepThinkingIconPrimitive,
  DeepThinkingTitlePrimitive,
  DeepThinkingContentPrimitive,
  DeepThinkingArrowPrimitive,
} from "@/components/wuhan/blocks/deep-thinking/deep-thinking-01";

export function DeepThinkingCustom() {
  return (
    <div className="space-y-4 w-full h-full max-w-2xl">
      <DeepThinkingContainerPrimitive defaultOpen>
        <DeepThinkingHeaderPrimitive
          arrow={
            <DeepThinkingArrowPrimitive>
              <ChevronDown className="size-4" />
            </DeepThinkingArrowPrimitive>
          }
        >
          <DeepThinkingIconPrimitive>
            <Brain className="size-4 text-purple-500" />
            <DeepThinkingTitlePrimitive>
              自定义标题：深度分析完成
            </DeepThinkingTitlePrimitive>
          </DeepThinkingIconPrimitive>
        </DeepThinkingHeaderPrimitive>
        <DeepThinkingContentPrimitive>
          这是一个使用自定义图标和标题的深度思考组件。你可以完全控制显示的内容、图标、样式等，原语组件只提供基础的样式框架。
        </DeepThinkingContentPrimitive>
      </DeepThinkingContainerPrimitive>

      {/* 完全自定义样式 */}
      <DeepThinkingContainerPrimitive>
        <DeepThinkingHeaderPrimitive
          className="bg-blue-50 dark:bg-blue-900/20"
          arrow={
            <DeepThinkingArrowPrimitive>
              <ChevronDown className="size-4 text-blue-600" />
            </DeepThinkingArrowPrimitive>
          }
        >
          <DeepThinkingIconPrimitive>
            <Brain className="size-4 text-blue-600" />
            <DeepThinkingTitlePrimitive className="text-blue-600">
              自定义颜色主题
            </DeepThinkingTitlePrimitive>
          </DeepThinkingIconPrimitive>
        </DeepThinkingHeaderPrimitive>
        <DeepThinkingContentPrimitive className="bg-blue-50/50 dark:bg-blue-900/10">
          通过原语组件，你可以完全自定义样式，包括背景色、文字颜色等，满足各种设计需求。
        </DeepThinkingContentPrimitive>
      </DeepThinkingContainerPrimitive>
    </div>
  );
}

受控

受控模式的深度思考组件，可通过外部状态控制展开和状态。

"use client";

import { DeepThinking } from "@/components/composed/deep-thinking/deep-thinking";
import { Button } from "@/components/ui/button";
import { useState } from "react";

export function DeepThinkingControlled() {
  const [isOpen, setIsOpen] = useState(false);
  const [status, setStatus] = useState<"thinking" | "completed" | "failed">(
    "thinking",
  );

  return (
    <div className="space-y-4 w-full h-full max-w-2xl">
      {/* 控制按钮 */}
      <div className="flex gap-2">
        <Button size="sm" variant="outline" onClick={() => setIsOpen(!isOpen)}>
          {isOpen ? "折叠" : "展开"}
        </Button>
        <Button
          size="sm"
          variant="outline"
          onClick={() => setStatus("thinking")}
        >
          思考中
        </Button>
        <Button
          size="sm"
          variant="outline"
          onClick={() => setStatus("completed")}
        >
          已完成
        </Button>
        <Button size="sm" variant="outline" onClick={() => setStatus("failed")}>
          失败
        </Button>
      </div>

      {/* 受控组件 */}
      <DeepThinking
        status={status}
        title={
          status === "thinking"
            ? "AI 正在思考"
            : status === "completed"
              ? "分析完成(用时3秒)"
              : "思考中断"
        }
        content={
          status === "thinking"
            ? "正在分析您的问题，识别关键信息和上下文..."
            : status === "completed"
              ? "已完成深度分析，识别出问题的核心要点，准备生成回答。分析过程包括：语义理解、知识检索、逻辑推理等多个步骤。"
              : "抱歉，思考过程遇到问题。可能的原因：网络连接中断、服务器繁忙或问题过于复杂。建议简化问题后重试。"
        }
        open={isOpen}
        onOpenChange={setIsOpen}
      />
    </div>
  );
}

自定义标签

自定义不同状态的标题标签。

推理完成 ✓ (耗时 4.2 秒)
推理过程：问题分解 → 知识检索 → 逻辑分析 → 答案生成
"use client";

import { DeepThinking } from "@/components/composed/deep-thinking/deep-thinking";

export function DeepThinkingLabels() {
  return (
    <div className="space-y-4 w-full h-full max-w-2xl">
      {/* 中文标签 */}
      <DeepThinking
        status="thinking"
        labels={{
          thinkingTitle: "AI 正在深度分析",
          completedTitle: "分析完毕",
          failedTitle: "分析异常",
        }}
        content="正在进行多维度分析，识别问题的关键要素..."
      />

      {/* 英文标签 */}
      <DeepThinking
        status="completed"
        labels={{
          thinkingTitle: "AI is thinking",
          completedTitle: "Thinking completed",
          failedTitle: "Thinking failed",
        }}
        content="The AI has completed its analysis and is ready to respond. The thinking process included semantic understanding, knowledge retrieval, and logical reasoning."
      />

      {/* 带时长的标签 */}
      <DeepThinking
        status="completed"
        labels={{
          thinkingTitle: "推理中...",
          completedTitle: "推理完成 ✓",
          failedTitle: "推理失败 ✗",
        }}
        title="推理完成 ✓ (耗时 4.2 秒)"
        content="推理过程：问题分解 → 知识检索 → 逻辑分析 → 答案生成"
        defaultOpen
      />
    </div>
  );
}

步骤展示

步骤式展示思考过程。

推理过程(用时5秒)
步骤1: 问题理解
识别用户问题的核心意图和关键信息点
步骤2: 知识检索
从知识库中检索相关背景信息和参考资料
步骤3: 逻辑推理
综合分析信息，进行逻辑推理和结论推导
步骤4: 答案生成
基于推理结果生成准确、完整的答案
深度思考中
✓ 理解问题
已完成
✓ 检索知识
已完成
○ 逻辑推理
进行中...
○ 生成答案
等待中
"use client";

import { DeepThinking } from "@/components/composed/deep-thinking/deep-thinking";
import { CheckCircle2, Circle } from "lucide-react";

export function DeepThinkingSteps() {
  return (
    <div className="space-y-4 w-full h-full max-w-2xl">
      {/* 步骤式思考展示 */}
      <DeepThinking
        status="completed"
        title="推理过程(用时5秒)"
        defaultOpen
        content={
          <div className="space-y-3">
            <div className="flex items-start gap-3">
              <CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
              <div className="space-y-1">
                <div className="font-semibold text-sm">步骤1: 问题理解</div>
                <div className="text-sm text-muted-foreground">
                  识别用户问题的核心意图和关键信息点
                </div>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
              <div className="space-y-1">
                <div className="font-semibold text-sm">步骤2: 知识检索</div>
                <div className="text-sm text-muted-foreground">
                  从知识库中检索相关背景信息和参考资料
                </div>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
              <div className="space-y-1">
                <div className="font-semibold text-sm">步骤3: 逻辑推理</div>
                <div className="text-sm text-muted-foreground">
                  综合分析信息，进行逻辑推理和结论推导
                </div>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
              <div className="space-y-1">
                <div className="font-semibold text-sm">步骤4: 答案生成</div>
                <div className="text-sm text-muted-foreground">
                  基于推理结果生成准确、完整的答案
                </div>
              </div>
            </div>
          </div>
        }
      />

      {/* 进行中的步骤展示 */}
      <DeepThinking
        status="thinking"
        defaultOpen
        content={
          <div className="space-y-3">
            <div className="flex items-start gap-3">
              <CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
              <div className="space-y-1">
                <div className="font-semibold text-sm">✓ 理解问题</div>
                <div className="text-sm text-muted-foreground">已完成</div>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
              <div className="space-y-1">
                <div className="font-semibold text-sm">✓ 检索知识</div>
                <div className="text-sm text-muted-foreground">已完成</div>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <div className="w-5 h-5 mt-0.5 flex-shrink-0 flex items-center justify-center">
                <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
              </div>
              <div className="space-y-1">
                <div className="font-semibold text-sm">○ 逻辑推理</div>
                <div className="text-sm text-muted-foreground">进行中...</div>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Circle className="w-5 h-5 text-gray-300 mt-0.5 flex-shrink-0" />
              <div className="space-y-1">
                <div className="font-semibold text-sm text-gray-400">
                  ○ 生成答案
                </div>
                <div className="text-sm text-muted-foreground">等待中</div>
              </div>
            </div>
          </div>
        }
      />
    </div>
  );
}

API

DeepThinking

深度思考主组件，支持三种状态和完全自定义。

Props

PropTypeDefaultDescription
statusDeepThinkingStatus"thinking"当前状态：thinking（思考中）、completed（已完成）、failed（失败）
titleReact.ReactNode-自定义标题，优先级高于 labels 和默认标题
contentReact.ReactNode-思考内容，展开后显示的详细信息
iconReact.ReactNode-自定义图标，优先级高于状态默认图标
arrowIconReact.ReactNode-自定义展开/收起箭头图标
defaultOpenbooleanfalse非受控模式下的默认展开状态
openboolean-受控模式下的展开状态
onOpenChange(open: boolean) => void-展开状态变化回调函数
labelsDeepThinkingLabels-自定义不同状态的默认标题

Example

import { DeepThinking } from "@/registry/wuhan/composed/deep-thinking/deep-thinking";
import { useState } from "react";

function AIThinking() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <div className="flex flex-col gap-4">
      {/* 非受控模式 - 思考中 */}
      <DeepThinking
        status="thinking"
        content="正在分析用户问题的核心意图..."
      />
      
      {/* 受控模式 - 已完成 */}
      <DeepThinking
        status="completed"
        title="分析完成(用时5秒)"
        content="已识别用户需求：询问深度思考组件的使用方法..."
        open={isOpen}
        onOpenChange={setIsOpen}
      />
      
      {/* 自定义标签 */}
      <DeepThinking
        status="thinking"
        labels={{
          thinkingTitle: "AI 正在深度分析",
          completedTitle: "分析完毕",
          failedTitle: "分析异常"
        }}
        content="正在进行多维度分析..."
      />
      
      {/* 完全自定义 */}
      <DeepThinking
        title="推理过程"
        icon={<Brain className="w-4 h-4 text-purple-500" />}
        content="第一步：理解问题\n第二步：查找相关信息\n第三步：综合分析"
        defaultOpen
      />
    </div>
  );
}

DeepThinkingStatus

状态类型定义。

type DeepThinkingStatus = 
  | "thinking"    // 思考中
  | "completed"   // 已完成
  | "failed";     // 失败

DeepThinkingLabels

标签配置接口，用于自定义不同状态的默认标题。

interface DeepThinkingLabels {
  /** 思考中状态的标题 */
  thinkingTitle?: React.ReactNode;
  /** 已完成状态的标题 */
  completedTitle?: React.ReactNode;
  /** 失败状态的标题 */
  failedTitle?: React.ReactNode;
}

状态默认配置

StatusDefault TitleIconText Color
thinking深度思考中ThinkingDots (脉冲动画)text-secondary
completed已完成思考CheckCircle2text-success (绿色)
failed思考失败AlertCircletext-error (红色)

使用场景

  • AI 对话：展示 AI 的思考过程，提升用户体验和信任度
  • 问题分析：显示复杂问题的分析步骤和推理逻辑
  • 推理展示：展示 AI 的推理链路和决策过程
  • 错误处理：显示思考失败的原因和建议
  • 长时任务：显示耗时任务的处理过程和状态
  • 教育场景：展示 AI 如何一步步解决问题，帮助学习

最佳实践

  1. 状态管理：思考中时使用 thinking 状态，完成后切换到 completed
  2. 时长显示：在标题中显示思考耗时，如"已完成思考(用时5秒)"
  3. 内容简洁：思考内容应简洁明了，避免过长的文本
  4. 默认展开：思考中状态建议 defaultOpen={true}，让用户看到实时过程
  5. 受控模式：需要外部控制展开状态时使用受控模式（open + onOpenChange）
  6. 错误处理：失败状态应提供明确的错误信息和建议
  7. 动画流畅：利用内置的过渡动画，不要禁用或覆盖

注意事项

  • title 优先级高于 labels 和状态默认标题
  • icon 优先级高于状态默认图标
  • 使用受控模式时必须同时提供 open 和 onOpenChange
  • 思考中状态（thinking）的标题文本颜色会自动设置为次要文本色
  • content 为空时不会渲染内容区域（仅显示头部）
  • 脉冲动画仅在 thinking 状态下显示

原语组件

Deep Thinking 基于以下原语组件构建：

  • DeepThinkingContainerPrimitive - 容器，基于 Collapsible
  • DeepThinkingHeaderPrimitive - 头部触发器
  • DeepThinkingIconPrimitive - 图标容器
  • DeepThinkingTitlePrimitive - 标题文本
  • DeepThinkingContentPrimitive - 内容区域
  • DeepThinkingArrowPrimitive - 箭头图标容器
  • ThinkingDotsPrimitive - 思考中脉冲动画

这些原语可以在 registry/wuhan/blocks/deep-thinking/deep-thinking-01.tsx 中找到。

样式定制

组件使用 Tailwind CSS 和 CSS 变量，可以通过以下方式定制：

// 自定义样式（使用原语组件）
import {
  DeepThinkingContainerPrimitive,
  DeepThinkingHeaderPrimitive,
} from "@/registry/wuhan/blocks/deep-thinking/deep-thinking-01";

<DeepThinkingContainerPrimitive>
  <DeepThinkingHeaderPrimitive className="bg-blue-50 hover:bg-blue-100">
    {/* 自定义头部样式 */}
  </DeepThinkingHeaderPrimitive>
</DeepThinkingContainerPrimitive>

扩展示例

带进度条的思考

import { DeepThinking } from "@/registry/wuhan/composed/deep-thinking/deep-thinking";
import { Progress } from "@/components/ui/progress";

function ThinkingWithProgress() {
  const [progress, setProgress] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prev) => (prev >= 100 ? 100 : prev + 10));
    }, 500);
    return () => clearInterval(timer);
  }, []);
  
  return (
    <DeepThinking
      status={progress === 100 ? "completed" : "thinking"}
      title={progress === 100 ? "分析完成" : `分析中... ${progress}%`}
      defaultOpen
      content={
        <div className="space-y-2">
          <Progress value={progress} />
          <p className="text-sm text-muted-foreground">
            正在进行多维度分析，请稍候...
          </p>
        </div>
      }
    />
  );
}

步骤式思考展示

import { DeepThinking } from "@/registry/wuhan/composed/deep-thinking/deep-thinking";

function StepByStepThinking() {
  return (
    <DeepThinking
      status="completed"
      title="推理过程(用时3秒)"
      defaultOpen
      content={
        <div className="space-y-3">
          <div className="flex gap-2">
            <span className="text-blue-600 font-semibold">步骤1:</span>
            <span>理解用户问题核心意图</span>
          </div>
          <div className="flex gap-2">
            <span className="text-blue-600 font-semibold">步骤2:</span>
            <span>检索相关知识库内容</span>
          </div>
          <div className="flex gap-2">
            <span className="text-blue-600 font-semibold">步骤3:</span>
            <span>综合分析并生成回答</span>
          </div>
        </div>
      }
    />
  );
}

多状态切换

import { DeepThinking } from "@/registry/wuhan/composed/deep-thinking/deep-thinking";
import { useState, useEffect } from "react";

function DynamicThinking() {
  const [status, setStatus] = useState<DeepThinkingStatus>("thinking");
  
  useEffect(() => {
    const timer = setTimeout(() => {
      setStatus(Math.random() > 0.5 ? "completed" : "failed");
    }, 3000);
    return () => clearTimeout(timer);
  }, []);
  
  return (
    <DeepThinking
      status={status}
      title={
        status === "thinking" 
          ? "AI 正在思考" 
          : status === "completed"
          ? "思考完成(用时3秒)"
          : "思考中断"
      }
      content={
        status === "thinking"
          ? "正在分析您的问题..."
          : status === "completed"
          ? "已完成深度分析，准备回答您的问题。"
          : "抱歉，思考过程遇到问题，请重试。"
      }
      defaultOpen
    />
  );
}

Accordion

手风琴组件，用于折叠/展开内容

Execution Result

Execution result block for displaying function call results with collapsible items

On this page

概述快速开始特性安装代码演示基本状态设置自定义受控自定义标签步骤展示APIDeepThinkingPropsExampleDeepThinkingStatusDeepThinkingLabels状态默认配置使用场景最佳实践注意事项原语组件样式定制扩展示例带进度条的思考步骤式思考展示多状态切换