Thinking Step Item

"use client";

import { BookOpen } from "lucide-react";
import { ThinkingStepItem } from "@/components/composed/thinking-step-item/thinking-step-item";

export function ThinkingStepItemDemo() {
  return (
    <div className="w-full max-w-2xl space-y-4 h-full">
      {/* 默认：不启用折叠（内容直接展示，无箭头） */}
      <ThinkingStepItem
        status="success"
        title="明确研究目标与边界"
        statusIcon={<BookOpen className="size-4" />}
        items={[
          {
            content: "明确研究目标与边界,我将调用知识和搜索工具",
            toolCall: {
              icon: <BookOpen className="size-4" />,
              title: "调取知识",
              content: "我正在调取知识库资料",
            },
            files: [
              { icon: "📄", name: "AI发展趋势.pdf" },
              { icon: "📄", name: "AI发展历史.doc" },
            ],
          },
          {
            content: "明确研究目标与边界,我将调用知识和搜索工具",
            toolCall: {
              icon: <BookOpen className="size-4" />,
              title: "调取知识",
              content: "我正在调取知识库资料",
            },
            files: [
              { icon: "📄", name: "AI发展趋势.pdf" },
              { icon: "📄", name: "AI发展历史.doc" },
            ],
          },
          {
            content: "明确研究目标与边界,我将调用知识和搜索工具",
            toolCall: {
              icon: <BookOpen className="size-4" />,
              title: "调取知识",
              content: "我正在调取知识库资料",
            },
            files: [
              { icon: "📄", name: "AI发展趋势.pdf" },
              { icon: "📄", name: "AI发展历史.doc" },
            ],
          },
        ]}
      />

      {/* 可选：启用折叠（展示箭头，支持展开/收起） */}
      <ThinkingStepItem
        collapsible
        status="success"
        title="（可折叠）查看详情"
        items={[
          {
            key: "collapsible",
            content: "当你传入 collapsible 时才会启用展开/收起交互。",
          },
        ]}
        defaultOpen={false}
      />

      {/* 取消状态（默认不折叠） */}
      <ThinkingStepItem status="cancel" title="已取消" items={[]} />

      {/* 加载中状态 */}
      <ThinkingStepItem
        status="loading"
        title="正在解析简历信息"
        items={[
          {
            // 不传 content：将自动显示“思考中...”并闪烁
            toolCall: {
              icon: <BookOpen className="size-4" />,
              title: "解析中",
              content: "正在处理附件与字段映射",
            },
          },
        ]}
      />

      {/* 成功状态 - 带工具调用 */}
      <ThinkingStepItem
        status="success"
        title="调取知识库"
        items={[
          {
            toolCall: {
              icon: <BookOpen className="size-4" />,
              title: "调取知识",
              content: "已从知识库中检索到 5 条相关岗位要求信息",
            },
          },
        ]}
      />

      {/* 错误状态 */}
      <ThinkingStepItem
        status="error"
        title="API 调用失败"
        items={[
          {
            content: "无法连接到外部 API 服务，请检查网络连接后重试。",
          },
        ]}
      />
    </div>
  );
}

"use client";

import * as React from "react";
import { ThinkingStepItem } from "@/components/composed/thinking-step-item/thinking-step-item";

export function ThinkingStepItemDefault() {
  return (
    <div className="w-full max-w-2xl">
      {/* 默认用法 - 成功状态 */}
      <ThinkingStepItem
        status="success"
        title="解析简历信息"
        items={[
          {
            content:
              "成功提取了候选人的基本信息、工作经历、教育背景和技能列表。",
          },
        ]}
        defaultOpen
      />
    </div>
  );
}

"use client";

import * as React from "react";
import { ThinkingStepItem } from "@/components/composed/thinking-step-item/thinking-step-item";

export function ThinkingStepItemWithAttachments() {
  return (
    <div className="w-full max-w-2xl">
      {/* 带文件附件的子步骤 */}
      <ThinkingStepItem
        status="success"
        title="处理附件文件"
        items={[
          {
            content: "已成功解析以下文件：",
            files: [
              { icon: "📄", name: "resume.pdf" },
              { icon: "📄", name: "cover-letter.docx" },
              { icon: "📊", name: "portfolio.xlsx" },
              { icon: "🖼️", name: "certificate.jpg" },
              { icon: "📄", name: "reference-letter.pdf" },
            ],
          },
        ]}
        defaultOpen
      />
    </div>
  );
}

"use client";

import { ThinkingStepItem } from "@/components/composed/thinking-step-item/thinking-step-item";

export function ThinkingStepItemWithOverflowFiles() {
  return (
    // 使用较窄的宽度，确保文件项会换行，触发“超过两排显示更多”的行为
    <div className="w-full max-w-md">
      <ThinkingStepItem
        status="success"
        title="处理附件文件（超出两排）"
        items={[
          {
            key: "overflow-files",
            content: "文件较多，默认只展示两排，超过两排会出现“查看更多”。",
            files: [
              { icon: "📄", name: "resume.pdf" },
              { icon: "📄", name: "cover-letter.docx" },
              { icon: "📊", name: "portfolio.xlsx" },
              { icon: "🖼️", name: "certificate.jpg" },
              { icon: "📄", name: "reference-letter.pdf" },
              { status: "loading", name: "uploading-attachments.zip" },
              { icon: "🧾", name: "invoice-2025-12.pdf" },
              { icon: "📎", name: "attachments.zip" },
              { icon: "📄", name: "work-history.pdf" },
              { icon: "📄", name: "education.docx" },
              { icon: "📄", name: "skills.txt" },
              { icon: "📄", name: "awards.pdf" },
              { icon: "📄", name: "projects.md" },
              { icon: "📄", name: "notes.txt" },
              { icon: "📄", name: "more-files.pdf" },
            ],
          },
        ]}
        defaultOpen
      />
    </div>
  );
}

"use client";

import * as React from "react";
import { ThinkingStepItem } from "@/components/composed/thinking-step-item/thinking-step-item";
import { Database, Search, FileText } from "lucide-react";

export function ThinkingStepItemWithTags() {
  return (
    <div className="w-full max-w-2xl space-y-4">
      {/* 带工具调用的子步骤 */}
      <ThinkingStepItem
        status="success"
        title="调取知识库"
        items={[
          {
            toolCall: {
              icon: <Database className="size-4" />,
              title: "知识库查询",
              content: "已从知识库中检索到 5 条相关岗位要求信息",
            },
          },
        ]}
        defaultOpen
      />

      {/* 带多个工具调用的子步骤 */}
      <ThinkingStepItem
        status="success"
        title="多步骤执行"
        items={[
          {
            toolCall: {
              icon: <Search className="size-4" />,
              title: "搜索引擎",
              content: "搜索了相关技术栈和行业趋势",
            },
          },
          {
            toolCall: {
              icon: <Database className="size-4" />,
              title: "数据库查询",
              content: "查询了候选人历史记录",
            },
          },
          {
            toolCall: {
              icon: <FileText className="size-4" />,
              title: "文档分析",
              content: "分析了简历和岗位描述",
            },
          },
        ]}
        defaultOpen
      />
    </div>
  );
}