sparkdesign 0.3.1 → 0.3.3

package/cli/registry/chat/thinking-indicator.test.tsx

@@ -0,0 +1,244 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { ThinkingIndicator } from './thinking-indicator'
+
+describe('ThinkingIndicator', () => {
+  // ============================================================
+  // 渲染测试
+  // ============================================================
+  describe('渲染', () => {
+    it('应正确渲染组件', () => {
+      const { container } = render(<ThinkingIndicator />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('应设置正确的 displayName', () => {
+      expect(ThinkingIndicator.displayName).toBe('ThinkingIndicator')
+    })
+  })
+
+  // ============================================================
+  // 文案测试
+  // ============================================================
+  describe('text 文案', () => {
+    it('应显示默认文案 "Qoder is Thinking..."', () => {
+      render(<ThinkingIndicator />)
+      expect(screen.getByText('Qoder is Thinking...')).toBeInTheDocument()
+    })
+
+    it('应显示自定义文案', () => {
+      render(<ThinkingIndicator text="正在思考..." />)
+      expect(screen.getByText('正在思考...')).toBeInTheDocument()
+    })
+
+    it('空文案应正常渲染', () => {
+      const { container } = render(<ThinkingIndicator text="" />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('长文案应正常渲染', () => {
+      const longText = 'AI is analyzing your complex multi-step request with deep reasoning...'
+      render(<ThinkingIndicator text={longText} />)
+      expect(screen.getByText(longText)).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // Loader Slot 测试
+  // ============================================================
+  describe('loader slot', () => {
+    it('无 loader prop 时应渲染默认三点动画', () => {
+      const { container } = render(<ThinkingIndicator />)
+      expect(container.querySelector('.thinking-dots')).toBeInTheDocument()
+    })
+
+    it('默认动画应包含三个点', () => {
+      const { container } = render(<ThinkingIndicator />)
+      const dots = container.querySelectorAll('.thinking-dots span')
+      expect(dots).toHaveLength(3)
+    })
+
+    it('有 loader prop 时应渲染自定义 loader', () => {
+      render(
+        <ThinkingIndicator
+          loader={<div data-testid="custom-loader">Custom Loader</div>}
+        />
+      )
+      expect(screen.getByTestId('custom-loader')).toBeInTheDocument()
+    })
+
+    it('自定义 loader 时不应渲染默认动画', () => {
+      const { container } = render(
+        <ThinkingIndicator
+          loader={<div data-testid="custom-loader">Custom</div>}
+        />
+      )
+      expect(container.querySelector('.thinking-dots')).not.toBeInTheDocument()
+    })
+
+    it('loader 可以是复杂 React 节点', () => {
+      render(
+        <ThinkingIndicator
+          loader={
+            <div data-testid="complex-loader">
+              <span>Loading</span>
+              <span>...</span>
+            </div>
+          }
+        />
+      )
+      expect(screen.getByTestId('complex-loader')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // Shimmer 效果测试
+  // ============================================================
+  describe('shimmer 效果', () => {
+    it('默认应启用 shimmer 效果', () => {
+      render(<ThinkingIndicator text="Test" />)
+      // shimmer 使用 motion.span，在测试环境被 mock 为普通 span
+      expect(screen.getByText('Test')).toBeInTheDocument()
+    })
+
+    it('shimmer=true 时文本应有渐变样式类', () => {
+      render(<ThinkingIndicator shimmer text="Shimmer Text" />)
+      const textElement = screen.getByText('Shimmer Text')
+      expect(textElement).toHaveClass('bg-clip-text')
+      expect(textElement).toHaveClass('text-transparent')
+    })
+
+    it('shimmer=false 时应显示静态文本', () => {
+      render(<ThinkingIndicator shimmer={false} text="Static Text" />)
+      const textElement = screen.getByText('Static Text')
+      expect(textElement).toHaveClass('text-text-secondary')
+      expect(textElement).not.toHaveClass('text-transparent')
+    })
+  })
+
+  // ============================================================
+  // Shimmer 配置测试
+  // ============================================================
+  describe('shimmer 配置', () => {
+    it('应接受自定义 shimmerDuration', () => {
+      // shimmerDuration 用于动画，测试环境动画被 mock，仅验证 prop 接受
+      const { container } = render(
+        <ThinkingIndicator shimmerDuration={5} text="Custom Duration" />
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('应接受自定义 shimmerSpread', () => {
+      const { container } = render(
+        <ThinkingIndicator shimmerSpread={4} text="Custom Spread" />
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // textClassName 测试
+  // ============================================================
+  describe('textClassName', () => {
+    it('应将 textClassName 应用到文本元素', () => {
+      render(
+        <ThinkingIndicator text="Styled Text" textClassName="custom-text-class" />
+      )
+      const textElement = screen.getByText('Styled Text')
+      expect(textElement).toHaveClass('custom-text-class')
+    })
+
+    it('textClassName 应与默认类名共存', () => {
+      render(
+        <ThinkingIndicator
+          shimmer={false}
+          text="Mixed Classes"
+          textClassName="my-class"
+        />
+      )
+      const textElement = screen.getByText('Mixed Classes')
+      expect(textElement).toHaveClass('my-class')
+      expect(textElement).toHaveClass('text-sm')
+    })
+  })
+
+  // ============================================================
+  // className 覆盖测试
+  // ============================================================
+  describe('className', () => {
+    it('应合并自定义 className 到根元素', () => {
+      const { container } = render(
+        <ThinkingIndicator className="custom-root-class" />
+      )
+      expect(container.firstChild).toHaveClass('custom-root-class')
+    })
+
+    it('自定义 className 应与默认布局类共存', () => {
+      const { container } = render(
+        <ThinkingIndicator className="my-indicator" />
+      )
+      expect(container.firstChild).toHaveClass('my-indicator')
+      expect(container.firstChild).toHaveClass('inline-flex')
+      expect(container.firstChild).toHaveClass('items-center')
+    })
+  })
+
+  // ============================================================
+  // 原生属性透传测试
+  // ============================================================
+  describe('原生属性透传', () => {
+    it('应透传 data-* 属性', () => {
+      render(<ThinkingIndicator data-testid="thinking" />)
+      expect(screen.getByTestId('thinking')).toBeInTheDocument()
+    })
+
+    it('应透传 id 属性', () => {
+      const { container } = render(<ThinkingIndicator id="my-indicator" />)
+      expect(container.querySelector('#my-indicator')).toBeInTheDocument()
+    })
+
+    it('应透传 aria-* 属性', () => {
+      const { container } = render(
+        <ThinkingIndicator aria-label="AI is thinking" />
+      )
+      expect(container.firstChild).toHaveAttribute('aria-label', 'AI is thinking')
+    })
+  })
+
+  // ============================================================
+  // 组合场景测试
+  // ============================================================
+  describe('组合场景', () => {
+    it('应支持所有 props 组合', () => {
+      render(
+        <ThinkingIndicator
+          text="完整配置测试"
+          shimmer={true}
+          shimmerDuration={3}
+          shimmerSpread={2}
+          textClassName="text-class"
+          className="root-class"
+          data-testid="full-config"
+          loader={<span data-testid="custom-spinner">⟳</span>}
+        />
+      )
+
+      const root = screen.getByTestId('full-config')
+      expect(root).toHaveClass('root-class')
+      expect(screen.getByText('完整配置测试')).toHaveClass('text-class')
+      expect(screen.getByTestId('custom-spinner')).toBeInTheDocument()
+    })
+
+    it('shimmer=false 时 loader 仍可自定义', () => {
+      render(
+        <ThinkingIndicator
+          shimmer={false}
+          text="No Shimmer"
+          loader={<span data-testid="static-loader">●</span>}
+        />
+      )
+      expect(screen.getByTestId('static-loader')).toBeInTheDocument()
+      expect(screen.getByText('No Shimmer')).toHaveClass('text-text-secondary')
+    })
+  })
+})

package/cli/registry/chat/tool-invocation-card.test.tsx

@@ -0,0 +1,346 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ToolInvocationCard } from './tool-invocation-card'
+
+describe('ToolInvocationCard', () => {
+  // ============================================================
+  // 基础渲染测试
+  // ============================================================
+  describe('基础渲染', () => {
+    it('应正确渲染工具名称', () => {
+      render(<ToolInvocationCard toolName="read_file" status="success" />)
+      expect(screen.getByText('read_file')).toBeInTheDocument()
+    })
+
+    it('应设置正确的 displayName', () => {
+      expect(ToolInvocationCard.displayName).toBe('ToolInvocationCard')
+    })
+
+    it('应渲染参数文本', () => {
+      render(
+        <ToolInvocationCard
+          toolName="search"
+          params="query: hello world"
+          status="success"
+        />
+      )
+      expect(screen.getByText('query: hello world')).toBeInTheDocument()
+    })
+
+    it('无参数时不应渲染参数区域', () => {
+      const { container } = render(
+        <ToolInvocationCard toolName="list_dir" status="success" />
+      )
+      // 只有工具名和状态文本
+      expect(container.textContent).toContain('list_dir')
+    })
+  })
+
+  // ============================================================
+  // 状态图标测试
+  // ============================================================
+  describe('状态图标', () => {
+    it('running 状态应显示时间图标', () => {
+      const { container } = render(
+        <ToolInvocationCard toolName="test" status="running" />
+      )
+      // 默认 timeIcon 使用 TimeLine 组件
+      expect(container.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('success 状态应显示勾选图标', () => {
+      const { container } = render(
+        <ToolInvocationCard toolName="test" status="success" />
+      )
+      expect(container.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('error 状态应显示关闭图标', () => {
+      const { container } = render(
+        <ToolInvocationCard toolName="test" status="error" />
+      )
+      expect(container.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('应接受自定义图标', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          checkboxCircleIcon={<span data-testid="custom-check">✓</span>}
+        />
+      )
+      expect(screen.getByTestId('custom-check')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // 状态文本测试
+  // ============================================================
+  describe('状态文本', () => {
+    it('running 状态应显示默认文本 "Running"', () => {
+      render(<ToolInvocationCard toolName="test" status="running" />)
+      expect(screen.getByText('Running')).toBeInTheDocument()
+    })
+
+    it('success 状态应显示默认文本 "Ran"', () => {
+      render(<ToolInvocationCard toolName="test" status="success" />)
+      expect(screen.getByText('Ran')).toBeInTheDocument()
+    })
+
+    it('error 状态应显示默认文本 "Failed"', () => {
+      render(<ToolInvocationCard toolName="test" status="error" />)
+      expect(screen.getByText('Failed')).toBeInTheDocument()
+    })
+
+    it('应接受自定义 statusText', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          statusText="执行完成"
+        />
+      )
+      expect(screen.getByText('执行完成')).toBeInTheDocument()
+    })
+
+    it('statusText 为空字符串时不应显示状态文本', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          statusText=""
+        />
+      )
+      expect(screen.queryByText('Ran')).not.toBeInTheDocument()
+    })
+
+    it('应接受自定义状态文本 props', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="running"
+          runningText="执行中"
+        />
+      )
+      expect(screen.getByText('执行中')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // 响应展示测试
+  // ============================================================
+  describe('响应展示', () => {
+    it('有响应时应可展开', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          response="Tool output result"
+        />
+      )
+      // 点击展开
+      fireEvent.click(screen.getByText('test'))
+      expect(screen.getByText('Tool output result')).toBeInTheDocument()
+    })
+
+    it('defaultExpanded=true 时应默认展开', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          response="Already expanded"
+          defaultExpanded={true}
+        />
+      )
+      expect(screen.getByText('Already expanded')).toBeInTheDocument()
+    })
+
+    it('无响应时不应显示展开箭头', () => {
+      const { container } = render(
+        <ToolInvocationCard toolName="test" status="success" />
+      )
+      // 没有箭头图标（ArrowRightLine 的 SVG）
+      const arrows = container.querySelectorAll('[class*="rotate"]')
+      expect(arrows).toHaveLength(0)
+    })
+
+    it('running 状态时不应可展开', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="running"
+          response="Some response"
+        />
+      )
+      // running 状态下点击不应展开
+      fireEvent.click(screen.getByText('test'))
+      expect(screen.queryByText('Some response')).not.toBeInTheDocument()
+    })
+
+    it('点击应切换展开/收起状态', () => {
+      render(
+        <ToolInvocationCard
+          toolName="toggle-test"
+          status="success"
+          response="Toggle content"
+        />
+      )
+      const trigger = screen.getByText('toggle-test')
+
+      // 第一次点击展开
+      fireEvent.click(trigger)
+      expect(screen.getByText('Toggle content')).toBeInTheDocument()
+
+      // 第二次点击收起
+      fireEvent.click(trigger)
+      expect(screen.queryByText('Toggle content')).not.toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // 响应标签测试
+  // ============================================================
+  describe('响应标签', () => {
+    it('展开时应显示默认标签 "Response"', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          response="Content"
+          defaultExpanded
+        />
+      )
+      expect(screen.getByText('Response')).toBeInTheDocument()
+    })
+
+    it('应接受自定义 responseLabel', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          response="Content"
+          responseLabel="输出结果"
+          defaultExpanded
+        />
+      )
+      expect(screen.getByText('输出结果')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // 错误状态样式测试
+  // ============================================================
+  describe('错误状态', () => {
+    it('error 状态响应应应用错误样式', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="error"
+          response="Error message"
+          defaultExpanded
+        />
+      )
+      const errorText = screen.getByText('Error message')
+      expect(errorText).toHaveClass('text-error')
+    })
+
+    it('success 状态响应不应有错误样式', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          response="Success message"
+          defaultExpanded
+        />
+      )
+      const successText = screen.getByText('Success message')
+      expect(successText).not.toHaveClass('text-error')
+    })
+  })
+
+  // ============================================================
+  // className 测试
+  // ============================================================
+  describe('className', () => {
+    it('应合并自定义 className', () => {
+      const { container } = render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          className="custom-card"
+        />
+      )
+      expect(container.firstChild).toHaveClass('custom-card')
+    })
+  })
+
+  // ============================================================
+  // 自定义图标 props 测试
+  // ============================================================
+  describe('自定义图标 props', () => {
+    it('应接受自定义 timeIcon', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="running"
+          timeIcon={<span data-testid="time-icon">⏱</span>}
+        />
+      )
+      expect(screen.getByTestId('time-icon')).toBeInTheDocument()
+    })
+
+    it('应接受自定义 closeCircleIcon', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="error"
+          closeCircleIcon={<span data-testid="close-icon">✗</span>}
+        />
+      )
+      expect(screen.getByTestId('close-icon')).toBeInTheDocument()
+    })
+
+    it('应接受自定义 arrowRightIcon', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          response="Content"
+          arrowRightIcon={<span data-testid="arrow-icon">→</span>}
+        />
+      )
+      expect(screen.getByTestId('arrow-icon')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // 组合场景测试
+  // ============================================================
+  describe('组合场景', () => {
+    it('应支持所有 props 组合', () => {
+      render(
+        <ToolInvocationCard
+          toolName="full_test"
+          params="/path/to/file.ts"
+          status="success"
+          response="File content here..."
+          defaultExpanded
+          statusText="已完成"
+          responseLabel="文件内容"
+          className="test-class"
+          checkboxCircleIcon={<span data-testid="check">✓</span>}
+          arrowRightIcon={<span data-testid="arrow">→</span>}
+        />
+      )
+
+      expect(screen.getByText('full_test')).toBeInTheDocument()
+      expect(screen.getByText('/path/to/file.ts')).toBeInTheDocument()
+      expect(screen.getByText('已完成')).toBeInTheDocument()
+      expect(screen.getByText('文件内容')).toBeInTheDocument()
+      expect(screen.getByText('File content here...')).toBeInTheDocument()
+      expect(screen.getByTestId('check')).toBeInTheDocument()
+      expect(screen.getByTestId('arrow')).toBeInTheDocument()
+    })
+  })
+})

package/cli/registry/chat/{request.tsx → user-message.tsx}

@@ -2,12 +2,12 @@ import { forwardRef } from 'react'
 import type { HTMLAttributes, ReactNode } from 'react'
 import { cn } from '@/lib/utils'
 
-export interface RequestProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface UserMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   children: ReactNode
   maxWidth?: string | number
 }
 
-export const Request = forwardRef<HTMLDivElement, RequestProps>(
+export const UserMessage = forwardRef<HTMLDivElement, UserMessageProps>(
   ({ children, className, maxWidth = '752px', ...props }, ref) => {
     const containerStyles = cn(
       'w-full',
@@ -35,4 +35,4 @@ export const Request = forwardRef<HTMLDivElement, RequestProps>(
   }
 )
 
-Request.displayName = 'Request'
+UserMessage.displayName = 'UserMessage'