sparkdesign 0.0.1 → 0.1.10

package/registry/chat/reasoning-step/index.tsx

@@ -0,0 +1,45 @@
+import { ReasoningStepRootProvider, useReasoningStepContext } from './context'
+import {
+  ReasoningStepHeader,
+  ReasoningStepDetails,
+  ReasoningStepDetailRow,
+  ReasoningStepDefaultLayout,
+} from './compound'
+import type {
+  ReasoningStepProps,
+  ReasoningStepCompound,
+  ReasoningStepDetail,
+  ReasoningStepStatus,
+} from './types'
+
+// ===== ReasoningStep 便捷组件 =====
+
+function ReasoningStepBase(props: ReasoningStepProps) {
+  return (
+    <ReasoningStepRootProvider {...props}>
+      <ReasoningStepDefaultLayout />
+    </ReasoningStepRootProvider>
+  )
+}
+
+ReasoningStepBase.displayName = 'ReasoningStep'
+
+// ===== 挂载复合组件 =====
+
+type ReasoningStepBaseType = React.FC<ReasoningStepProps> & Partial<ReasoningStepCompound>
+
+const ReasoningStepWithSlots = ReasoningStepBase as ReasoningStepBaseType
+
+ReasoningStepWithSlots.Root = ReasoningStepRootProvider
+ReasoningStepWithSlots.Header = ReasoningStepHeader
+ReasoningStepWithSlots.Details = ReasoningStepDetails
+ReasoningStepWithSlots.DetailRow = ReasoningStepDetailRow
+
+export const ReasoningStep = ReasoningStepWithSlots as React.FC<ReasoningStepProps> &
+  ReasoningStepCompound
+
+// ===== 导出类型和工具 =====
+
+export type { ReasoningStepProps, ReasoningStepDetail, ReasoningStepStatus }
+
+export { useReasoningStepContext }

package/registry/chat/reasoning-step/types.ts

@@ -0,0 +1,109 @@
+import type { ReactNode } from 'react'
+
+// ===== 基础类型 =====
+
+export type ReasoningStepDetail =
+  | { type: 'action'; action: string; desc?: string; details?: ReasoningStepDetail[] }
+  | {
+      type: 'file'
+      filename: string
+      lines?: string
+      path?: string
+      fileType?: string
+      details?: ReasoningStepDetail[]
+    }
+
+export type ReasoningStepStatus = 'completed' | 'in-progress'
+
+// ===== 组件 Props =====
+
+export interface ReasoningStepRootProps {
+  /** 主文本 */
+  text: ReactNode
+  /** 描述文本 */
+  description?: string
+  /** 状态 */
+  status?: ReasoningStepStatus
+  /** 自定义图标 */
+  icon?: ReactNode
+  /** 是否显示图标 */
+  showIcon?: boolean
+  /** 详情数据 */
+  details?: ReasoningStepDetail[]
+  /** 子组件 */
+  children?: ReactNode
+  /** 动画持续时间 */
+  duration?: number
+  /** 动画扩散度 */
+  spread?: number
+  /** 禁用展开动画 */
+  disableExpandAnimation?: boolean
+  /** 默认展开 */
+  defaultExpanded?: boolean
+  /** 受控展开状态 */
+  expanded?: boolean
+  /** 展开状态变化回调 */
+  onExpandedChange?: (expanded: boolean) => void
+  /** 自定义眼睛图标 */
+  eyeIcon?: ReactNode
+  /** 自定义箭头图标 */
+  arrowRightIcon?: ReactNode
+}
+
+export type ReasoningStepProps = ReasoningStepRootProps
+
+export interface ReasoningStepHeaderProps {
+  className?: string
+}
+
+export interface ReasoningStepDetailsProps {
+  className?: string
+  children?: ReactNode
+}
+
+export interface ReasoningStepDetailRowProps {
+  detail: ReasoningStepDetail
+  depth?: number
+  pathKey?: string
+  className?: string
+}
+
+// ===== Context 类型 =====
+
+export interface ReasoningStepContextValue {
+  // 状态
+  status: ReasoningStepStatus
+  isExpanded: boolean
+  isHovered: boolean
+  setIsHovered: (hovered: boolean) => void
+  toggleExpanded: () => void
+  effectiveExpanded: boolean
+  effectiveShowIcon: boolean
+  hasExpandableContent: boolean
+  // 数据
+  text: ReactNode
+  description?: string
+  details?: ReasoningStepDetail[]
+  detailsChildren?: ReactNode
+  // 配置
+  duration: number
+  spread: number
+  disableExpandAnimation: boolean
+  detailIndent: string
+  // 嵌套状态
+  expandedNestedKeys: Set<string>
+  toggleNested: (pathKey: string) => void
+  // 图标
+  icon?: ReactNode
+  eyeIcon: ReactNode
+  arrowRightIcon: ReactNode
+}
+
+// ===== 复合组件类型 =====
+
+export interface ReasoningStepCompound {
+  Root: React.FC<ReasoningStepRootProps>
+  Header: React.FC<ReasoningStepHeaderProps>
+  Details: React.FC<ReasoningStepDetailsProps>
+  DetailRow: React.FC<ReasoningStepDetailRowProps>
+}

package/registry/chat/related-prompts.tsx

@@ -0,0 +1,91 @@
+import type { ReactNode } from 'react'
+import { Fragment } from 'react'
+import { cn } from '@/lib/utils'
+import { Tooltip } from '../basic/tooltip'
+import { Chat3Line } from '../basic/icons-inline'
+
+const iconClass = 'w-3.5 h-3.5 shrink-0 text-text-tertiary'
+
+export interface RelatedPromptItem {
+  text: string
+  prompt: string
+  icon?: ReactNode
+}
+
+export interface RelatedPromptsProps {
+  items: RelatedPromptItem[]
+  onSelect?: (item: RelatedPromptItem) => void
+  singleLineText?: boolean
+  className?: string
+  /** 主库可注入 useIcon('chat3')；不传则用 Chat3Line */
+  defaultIcon?: ReactNode
+}
+
+export function RelatedPrompts({
+  items,
+  onSelect,
+  singleLineText = false,
+  className,
+  defaultIcon,
+}: RelatedPromptsProps) {
+  const list = items.slice(0, 3)
+  const icon = defaultIcon ?? <Chat3Line className={iconClass} />
+
+  if (list.length === 0) return null
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-3 w-full min-w-0',
+        !singleLineText && 'max-w-lg',
+        className
+      )}
+      role="list"
+      aria-label="Related prompt suggestions"
+    >
+      {list.map((item, index) => {
+        const itemIcon = item.icon ?? icon
+
+        const itemContent = (
+          <button
+            type="button"
+            onClick={() => onSelect?.(item)}
+            className={cn(
+              'flex items-center gap-2 w-full min-w-0 text-left',
+              'rounded-md px-0 py-0 min-h-0',
+              'text-xs leading-xs font-normal text-text-tertiary',
+              'transition-colors',
+              onSelect && 'cursor-pointer hover:text-text',
+              !onSelect && 'cursor-default'
+            )}
+            role="listitem"
+          >
+            <span className="w-3.5 h-3.5 flex-shrink-0 flex items-center justify-center">
+              {itemIcon}
+            </span>
+            <span
+              className={cn(
+                'min-w-0 flex-1',
+                singleLineText ? 'truncate' : 'line-clamp-2'
+              )}
+            >
+              {item.text}
+            </span>
+          </button>
+        )
+
+        if (singleLineText) {
+          return (
+            <Tooltip key={`${item.prompt}-${index}`} content={item.text} side="top">
+              {itemContent}
+            </Tooltip>
+          )
+        }
+
+        return <Fragment key={`${item.prompt}-${index}`}>{itemContent}</Fragment>
+      })}
+    </div>
+  )
+}
+
+RelatedPrompts.displayName = 'RelatedPrompts'

package/registry/chat/response/compound.tsx

@@ -0,0 +1,210 @@
+import { useMemo, type ReactNode } from 'react'
+import { cn } from '../../lib/utils'
+import { MarkdownBody } from '../markdown'
+import { ReasoningStep } from '../reasoning-step'
+import { StreamingMarkdownBlock } from '../streaming-markdown-block'
+import { ImageGenerating as ImageGeneratingBase } from '../image-generating'
+import { useResponseContext } from './context'
+import type {
+  ResponseThinkingProps,
+  ResponseStepsProps,
+  ResponseStepProps,
+  ResponseContentProps,
+  ResponseImageGeneratingProps,
+  ResponseDefaultLayoutProps,
+} from './types'
+
+// ===== Response.Thinking =====
+
+export function ResponseThinking({ className }: ResponseThinkingProps) {
+  const ctx = useResponseContext()
+  const effectiveShowThink = ctx.simulate
+    ? ctx.showThink
+    : ctx.phase === 'thinking' || ctx.phase === 'streaming'
+
+  if (!effectiveShowThink) return null
+
+  return <span className={className}>{ctx.thinkingIndicator}</span>
+}
+
+ResponseThinking.displayName = 'ResponseThinking'
+
+// ===== Response.Steps =====
+
+export function ResponseSteps({ className, children }: ResponseStepsProps) {
+  return <div className={cn('flex flex-col gap-1', className)}>{children}</div>
+}
+
+ResponseSteps.displayName = 'ResponseSteps'
+
+// ===== Response.Step =====
+
+export function ResponseStepComponent({ step, status = 'completed' }: ResponseStepProps) {
+  return (
+    <ReasoningStep
+      text={step.text}
+      description={step.description}
+      details={step.details}
+      status={status}
+    />
+  )
+}
+
+ResponseStepComponent.displayName = 'ResponseStep'
+
+// ===== Response.Content =====
+
+export function ResponseContent({
+  markdown,
+  streaming = false,
+  onStreamComplete,
+  className,
+}: ResponseContentProps) {
+  const ctx = useResponseContext()
+  const content = markdown ?? ctx.finalMarkdown
+
+  if (streaming) {
+    return (
+      <div className={cn('mt-1', className)}>
+        <StreamingMarkdownBlock
+          content={content}
+          isActive={streaming}
+          onStreamComplete={onStreamComplete}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('mt-1', className)}>
+      <MarkdownBody>{content}</MarkdownBody>
+    </div>
+  )
+}
+
+ResponseContent.displayName = 'ResponseContent'
+
+// ===== Response.ImageGenerating =====
+
+export function ResponseImageGenerating({
+  width = '320px',
+  height = '240px',
+  className,
+}: ResponseImageGeneratingProps) {
+  return <ImageGeneratingBase width={width} height={height} className={className} />
+}
+
+ResponseImageGenerating.displayName = 'ResponseImageGenerating'
+
+// ===== Response.DefaultLayout =====
+
+export function ResponseDefaultLayout({ className }: ResponseDefaultLayoutProps) {
+  const ctx = useResponseContext()
+
+  // 模拟模式：流式渲染 - useMemo 必须在条件语句前调用
+  const contentElements = useMemo(() => {
+    if (!ctx.simulate) return []
+
+    const el: ReactNode[] = []
+    const upTo = Math.min(ctx.visibleIndex, ctx.blocks.length - 1)
+    let lastVisibleComposerIndex = -1
+    for (let j = 0; j <= upTo; j++) {
+      if (ctx.blocks[j]?.type === 'composer') lastVisibleComposerIndex = j
+    }
+    for (let i = 0; i <= upTo; i++) {
+      const b = ctx.blocks[i]
+      if (!b) continue
+      if (b.type === 'think') {
+        if (i === ctx.visibleIndex) {
+          el.push(<span key={`think-${i}`}>{ctx.thinkingIndicator}</span>)
+        }
+        continue
+      }
+      if (b.type === 'composer' && b.step) {
+        const inProgress = i === lastVisibleComposerIndex && !ctx.isSimDone
+        el.push(
+          <ReasoningStep
+            key={i}
+            text={b.step.text}
+            description={b.step.description}
+            details={b.step.details}
+            status={inProgress ? 'in-progress' : 'completed'}
+          />
+        )
+      }
+      if (b.type === 'md' && b.md) {
+        el.push(
+          <div key={`md-${i}`} className="mt-1">
+            <StreamingMarkdownBlock
+              content={b.md}
+              isActive={i === upTo}
+              onStreamComplete={() => {
+                ctx.setVisibleIndex((v) => Math.min(v + 1, ctx.blocks.length))
+                if (i + 1 >= ctx.blocks.length) ctx.onSimulateComplete?.()
+              }}
+            />
+          </div>
+        )
+      }
+    }
+    return el
+  }, [ctx])
+
+  // 静态内容元素（非模拟模式）
+  const staticElements = useMemo(() => {
+    if (ctx.simulate) return []
+    const staticEl: ReactNode[] = []
+    for (let i = 0; i < ctx.blocks.length; i++) {
+      const b = ctx.blocks[i]
+      if (!b) continue
+      if (b.type === 'composer' && b.step) {
+        staticEl.push(
+          <ReasoningStep
+            key={i}
+            text={b.step.text}
+            description={b.step.description}
+            details={b.step.details}
+            status="completed"
+            disableExpandAnimation
+          />
+        )
+      }
+      if (b.type === 'md' && b.md) {
+        staticEl.push(
+          <div key={`md-${i}`} className="mt-1">
+            <MarkdownBody>{b.md}</MarkdownBody>
+          </div>
+        )
+      }
+    }
+    return staticEl
+  }, [ctx])
+
+  // imageGenerating 阶段
+  if (ctx.phase === 'imageGenerating') {
+    return (
+      <div className={cn('flex flex-col gap-3 font-body', className)}>
+        <ResponseImageGenerating />
+      </div>
+    )
+  }
+
+  // 非模拟模式：静态渲染
+  if (!ctx.simulate) {
+    return (
+      <div className={cn('flex flex-col gap-3 font-body', className)}>
+        <div className="flex flex-col gap-1">{staticElements}</div>
+        {(ctx.phase === 'thinking' || ctx.phase === 'streaming') && ctx.thinkingIndicator}
+      </div>
+    )
+  }
+
+  // 模拟模式
+  return (
+    <div className={cn('flex flex-col gap-3 font-body', className)}>
+      <div className="flex flex-col gap-1">{contentElements}</div>
+    </div>
+  )
+}
+
+ResponseDefaultLayout.displayName = 'ResponseDefaultLayout'

package/registry/chat/response/context.tsx

@@ -0,0 +1,200 @@
+import { createContext, useContext, useState, useEffect, useMemo, useRef } from 'react'
+import { ThinkingIndicator } from '../thinking-indicator'
+import type {
+  ResponseContextValue,
+  ResponseRootProps,
+  ResponseBlock,
+  ResponseRound,
+  ResponseStep,
+} from './types'
+
+// ===== Demo 数据 =====
+
+const DEMO_STEP_1: ResponseStep = {
+  text: 'Scanning local photo library',
+  description: 'Indexing metadata and building a rename plan',
+  details: [
+    { type: 'action', action: 'Discover photos', desc: 'Found 1,000 images in /Pictures/Unsorted' },
+    { type: 'action', action: 'Extract metadata', desc: 'Read EXIF timestamps, GPS, and camera model' },
+    { type: 'action', action: 'Detect duplicates', desc: 'Hash-based matching + perceptual similarity' },
+  ],
+}
+
+const DEMO_STEP_2: ResponseStep = {
+  text: 'Classifying photos into albums',
+  description: 'Clustering by time, location, and scene',
+  details: [
+    { type: 'action', action: 'Time buckets', desc: 'Group into events using temporal gaps' },
+    { type: 'action', action: 'Location clusters', desc: 'Reverse geocode GPS into city/area labels' },
+    { type: 'action', action: 'Scene tags', desc: 'Detect indoor/outdoor, portraits, food, and documents' },
+  ],
+}
+
+const DEMO_STEP_3: ResponseStep = {
+  text: 'Renaming files safely',
+  description: 'Dry-run, collision check, then atomic move',
+  details: [
+    { type: 'action', action: 'Dry run', desc: 'Preview 1,000 rename operations' },
+    { type: 'action', action: 'Collision handling', desc: 'Append counter suffix to avoid overwrites' },
+    { type: 'action', action: 'Write changes', desc: 'Move files into album folders' },
+  ],
+}
+
+const DEMO_ROUNDS: ResponseRound[] = [
+  { step: DEMO_STEP_1, simpleMd: "I'm **scanning** your library and building the index. Found 1,000 photos in `Pictures/Unsorted`; EXIF and duplicates are being analyzed.\n\n" },
+  { step: DEMO_STEP_2, simpleMd: "**Classifying** into albums by time, location, and scene. Time buckets and GPS labels are done; next I'll tag indoor/outdoor and document vs. portrait.\n\n" },
+  { step: DEMO_STEP_3, simpleMd: "**Dry-run** is done and collision handling is in place. No overwrites; an audit log (CSV) is ready. Pending your confirmation to run the renames.\n\n" },
+]
+
+const DEMO_FINAL_MD = `## Plan
+
+I will organize your **1,000 local photos** by building an index, clustering them into albums, and then performing a safe rename + move operation.
+
+### Folder structure
+
+\`\`\`text
+Pictures/
+  Organized/
+    2026-01-18 — San Francisco — Golden Gate Park/
+    2026-01-05 — Home — Documents/
+    2025-12-31 — New Year's Eve/
+    _Duplicates/
+    _Unsorted/
+\`\`\`
+
+### Naming scheme
+
+\`YYYY-MM-DD_HH-mm-ss__<Location>__<Scene>__<Counter>.<ext>\`
+
+Example:
+
+\`2026-01-18_15-42-11__San-Francisco__Outdoor__001.jpg\`
+
+### Safety checks
+
+- [x] Dry-run all operations
+- [x] Detect collisions and append counters
+- [x] Keep an audit log (CSV)
+- [ ] Execute moves (requires confirmation)
+
+---
+
+## Next step
+
+If you want, I can generate a **preview report** first (top 50 renames + album summary) before applying changes.
+`
+
+// ===== 工具函数 =====
+
+function buildBlocks(rounds: ResponseRound[], finalMd: string): ResponseBlock[] {
+  const blocks: ResponseBlock[] = []
+  for (const r of rounds) {
+    blocks.push({ type: 'think' })
+    blocks.push({ type: 'composer', step: r.step })
+    blocks.push({ type: 'md', md: r.simpleMd })
+  }
+  blocks.push({ type: 'think' })
+  blocks.push({ type: 'md', md: finalMd })
+  return blocks
+}
+
+// ===== Context =====
+
+const ResponseContext = createContext<ResponseContextValue | null>(null)
+ResponseContext.displayName = 'ResponseContext'
+
+export function useResponseContext() {
+  const ctx = useContext(ResponseContext)
+  if (!ctx) throw new Error('Response compound components must be used within Response.Root')
+  return ctx
+}
+
+// ===== Default ThinkingIndicator =====
+
+const DEFAULT_THINK = <ThinkingIndicator text="Qoder is thinking..." />
+
+// ===== Provider =====
+
+export function ResponseRootProvider({
+  simulate = true,
+  phase = 'thinking',
+  rounds,
+  finalMarkdown,
+  onSimulateComplete,
+  onStepChange,
+  thinkingIndicator,
+  children,
+}: ResponseRootProps) {
+  const allRounds = rounds ?? DEMO_ROUNDS
+  const finalMd = finalMarkdown ?? DEMO_FINAL_MD
+  const thinkNode = thinkingIndicator ?? DEFAULT_THINK
+
+  const blocks = useMemo(() => buildBlocks(allRounds, finalMd), [allRounds, finalMd])
+  const [visibleIndex, setVisibleIndex] = useState(0)
+  const prevBlocksLengthRef = useRef(blocks.length)
+
+  const isSimDone = simulate ? visibleIndex >= blocks.length - 1 : phase === 'done'
+  const currentBlock = blocks[visibleIndex] ?? null
+  const showThink = currentBlock?.type === 'think'
+
+  // 步骤变化回调
+  useEffect(() => {
+    if (!simulate || blocks.length === 0) return
+    const block = blocks[visibleIndex] ?? null
+    if (block?.type === 'composer' && block.step) {
+      onStepChange?.(block.step.text, block.step.toolType)
+    } else if (block?.type === 'think') {
+      onStepChange?.('Thinking...')
+    }
+    if (visibleIndex >= blocks.length) {
+      onSimulateComplete?.()
+    }
+  }, [simulate, blocks, visibleIndex, onStepChange, onSimulateComplete])
+
+  // blocks 变化时重置
+  useEffect(() => {
+    if (!simulate || blocks.length === 0) return
+    if (prevBlocksLengthRef.current !== blocks.length) {
+      prevBlocksLengthRef.current = blocks.length
+      // 使用 requestAnimationFrame 避免同步 setState
+      requestAnimationFrame(() => setVisibleIndex(0))
+    }
+  }, [simulate, blocks.length])
+
+  // 定时器推进
+  useEffect(() => {
+    if (!simulate || blocks.length === 0) return
+    const block = blocks[visibleIndex] ?? null
+    if (block?.type === 'think' || block?.type === 'composer') {
+      const id = window.setTimeout(() => setVisibleIndex((v) => Math.min(v + 1, blocks.length)), 580)
+      return () => window.clearTimeout(id)
+    }
+  }, [simulate, blocks, visibleIndex])
+
+  const ctxValue: ResponseContextValue = {
+    phase,
+    simulate,
+    rounds: allRounds,
+    finalMarkdown: finalMd,
+    blocks,
+    visibleIndex,
+    setVisibleIndex,
+    isSimDone,
+    currentBlock,
+    showThink,
+    onSimulateComplete,
+    onStepChange,
+    thinkingIndicator: thinkNode,
+  }
+
+  return (
+    <ResponseContext.Provider value={ctxValue}>
+      {children}
+    </ResponseContext.Provider>
+  )
+}
+
+ResponseRootProvider.displayName = 'ResponseRoot'
+
+// 导出 Demo 数据供测试使用
+export { DEMO_ROUNDS, DEMO_FINAL_MD }