sparkdesign 0.3.1 → 0.3.3

package/cli/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/cli/registry/chat/{response.tsx → response/context.tsx}

@@ -1,38 +1,14 @@
-import { useEffect, useMemo, useState } from 'react'
-import type { HTMLAttributes, ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-import { MarkdownBody } from './markdown'
-import { ThinkingIndicator } from './thinking-indicator'
-import { ImageGenerating } from './image-generating'
-import { ReasoningStep } from './reasoning-step'
-import type { ReasoningStepDetail } from './reasoning-step'
-import { StreamingMarkdownBlock } from './streaming-markdown-block'
-
-export type ResponsePhase = 'thinking' | 'streaming' | 'done' | 'imageGenerating'
-export type ResponseStepToolType = 'read' | 'edit' | 'search'
-
-export interface ResponseStep {
-  text: string
-  description?: string
-  details?: ReasoningStepDetail[]
-  toolType?: ResponseStepToolType
-}
-
-export interface ResponseRound {
-  step: ResponseStep
-  simpleMd: string
-}
-
-export interface ResponseProps extends HTMLAttributes<HTMLDivElement> {
-  simulate?: boolean
-  phase?: ResponsePhase
-  rounds?: ResponseRound[]
-  finalMarkdown?: string
-  onSimulateComplete?: () => void
-  onStepChange?: (text: string, toolType?: ResponseStepToolType) => void
-  /** 主库可注入带 Lottie 的 ThinkingIndicator，与独立 ThinkingIndicator 动效一致 */
-  thinkingIndicator?: ReactNode
-}
+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',
@@ -108,10 +84,10 @@ Example:
 If you want, I can generate a **preview report** first (top 50 renames + album summary) before applying changes.
 `
 
-type BlockType = 'think' | 'composer' | 'md'
+// ===== 工具函数 =====
 
-function buildBlocks(rounds: ResponseRound[], finalMd: string): { type: BlockType; step?: ResponseStep; md?: string }[] {
-  const blocks: { type: BlockType; step?: ResponseStep; md?: string }[] = []
+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 })
@@ -122,9 +98,24 @@ function buildBlocks(rounds: ResponseRound[], finalMd: string): { type: BlockTyp
   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..." />
 
-export function Response({
+// ===== Provider =====
+
+export function ResponseRootProvider({
   simulate = true,
   phase = 'thinking',
   rounds,
@@ -132,18 +123,21 @@ export function Response({
   onSimulateComplete,
   onStepChange,
   thinkingIndicator,
-  className,
-  ...props
-}: ResponseProps) {
-  const thinkNode = thinkingIndicator ?? DEFAULT_THINK
+  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
@@ -157,11 +151,17 @@ export function Response({
     }
   }, [simulate, blocks, visibleIndex, onStepChange, onSimulateComplete])
 
+  // blocks 变化时重置
   useEffect(() => {
     if (!simulate || blocks.length === 0) return
-    setVisibleIndex(0)
+    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
@@ -171,101 +171,30 @@ export function Response({
     }
   }, [simulate, blocks, visibleIndex])
 
-  const effectiveShowThink = simulate ? showThink : phase === 'thinking' || phase === 'streaming'
-
-  const contentElements = useMemo(() => {
-    const el: ReactNode[] = []
-    const upTo = simulate ? Math.min(visibleIndex, blocks.length - 1) : blocks.length - 1
-    let lastVisibleComposerIndex = -1
-    for (let j = 0; j <= upTo; j++) {
-      if (blocks[j]?.type === 'composer') lastVisibleComposerIndex = j
-    }
-    for (let i = 0; i <= upTo; i++) {
-      const b = blocks[i]
-      if (!b) continue
-      if (b.type === 'think') {
-        if (simulate && i === visibleIndex) {
-          el.push(<span key={`think-${i}`}>{thinkNode}</span>)
-        }
-        continue
-      }
-      if (b.type === 'composer' && b.step) {
-        const inProgress = i === lastVisibleComposerIndex && !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={() => {
-                setVisibleIndex((v) => Math.min(v + 1, blocks.length))
-                if (i + 1 >= blocks.length) onSimulateComplete?.()
-              }}
-            />
-          </div>
-        )
-      }
-    }
-    return el
-  }, [simulate, visibleIndex, blocks, isSimDone, onSimulateComplete, thinkNode])
-
-  if (phase === 'imageGenerating') {
-    return (
-      <div className={cn('flex flex-col gap-3 font-body', className)} {...props}>
-        <ImageGenerating width="320px" height="240px" />
-      </div>
-    )
-  }
-
-  if (!simulate) {
-    const staticEl: ReactNode[] = []
-    for (let i = 0; i < blocks.length; i++) {
-      const b = 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 (
-      <div className={cn('flex flex-col gap-3 font-body', className)} {...props}>
-        <div className="flex flex-col gap-1">{staticEl}</div>
-        {(phase === 'thinking' || phase === 'streaming') && thinkNode}
-      </div>
-    )
+  const ctxValue: ResponseContextValue = {
+    phase,
+    simulate,
+    rounds: allRounds,
+    finalMarkdown: finalMd,
+    blocks,
+    visibleIndex,
+    setVisibleIndex,
+    isSimDone,
+    currentBlock,
+    showThink,
+    onSimulateComplete,
+    onStepChange,
+    thinkingIndicator: thinkNode,
   }
 
   return (
-    <div className={cn('flex flex-col gap-3 font-body', className)} {...props}>
-      <div className="flex flex-col gap-1">{contentElements}</div>
-      {effectiveShowThink && !simulate && thinkNode}
-    </div>
+    <ResponseContext.Provider value={ctxValue}>
+      {children}
+    </ResponseContext.Provider>
   )
 }
 
-Response.displayName = 'Response'
+ResponseRootProvider.displayName = 'ResponseRoot'
+
+// 导出 Demo 数据供测试使用
+export { DEMO_ROUNDS, DEMO_FINAL_MD }

package/cli/registry/chat/response/index.tsx

@@ -0,0 +1,87 @@
+import type { HTMLAttributes } from 'react'
+import { ResponseRootProvider, useResponseContext, DEMO_ROUNDS, DEMO_FINAL_MD } from './context'
+import {
+  ResponseThinking,
+  ResponseSteps,
+  ResponseStepComponent,
+  ResponseContent,
+  ResponseImageGenerating,
+  ResponseDefaultLayout,
+} from './compound'
+import type {
+  ResponseProps,
+  ResponseCompound,
+  ResponsePhase,
+  ResponseStep,
+  ResponseStepToolType,
+  ResponseRound,
+  ResponseBlock,
+  BlockType,
+} from './types'
+
+// ===== Response 便捷组件 =====
+
+function ResponseBase({
+  simulate,
+  phase,
+  rounds,
+  finalMarkdown,
+  onSimulateComplete,
+  onStepChange,
+  thinkingIndicator,
+  className,
+  ...props
+}: ResponseProps & HTMLAttributes<HTMLDivElement>) {
+  return (
+    <ResponseRootProvider
+      simulate={simulate}
+      phase={phase}
+      rounds={rounds}
+      finalMarkdown={finalMarkdown}
+      onSimulateComplete={onSimulateComplete}
+      onStepChange={onStepChange}
+      thinkingIndicator={thinkingIndicator}
+    >
+      <div {...props}>
+        <ResponseDefaultLayout className={className} />
+      </div>
+    </ResponseRootProvider>
+  )
+}
+
+ResponseBase.displayName = 'Response'
+
+// ===== 挂载复合组件 =====
+
+type ResponseBaseType = React.FC<ResponseProps & HTMLAttributes<HTMLDivElement>> &
+  Partial<ResponseCompound>
+
+const ResponseWithSlots = ResponseBase as ResponseBaseType
+
+ResponseWithSlots.Root = ResponseRootProvider
+ResponseWithSlots.Thinking = ResponseThinking
+ResponseWithSlots.Steps = ResponseSteps
+ResponseWithSlots.Step = ResponseStepComponent
+ResponseWithSlots.Content = ResponseContent
+ResponseWithSlots.ImageGenerating = ResponseImageGenerating
+ResponseWithSlots.DefaultLayout = ResponseDefaultLayout
+
+export const Response = ResponseWithSlots as React.FC<
+  ResponseProps & HTMLAttributes<HTMLDivElement>
+> &
+  ResponseCompound
+
+// ===== 导出类型和工具 =====
+
+export type {
+  ResponseProps,
+  ResponsePhase,
+  ResponseStep,
+  ResponseStepToolType,
+  ResponseRound,
+  ResponseBlock,
+  BlockType,
+  ResponseCompound,
+}
+
+export { useResponseContext, DEMO_ROUNDS, DEMO_FINAL_MD }

package/cli/registry/chat/response/types.ts

@@ -0,0 +1,123 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import type { ReasoningStepDetail } from '../reasoning-step'
+
+// ===== 基础类型 =====
+
+export type ResponsePhase = 'thinking' | 'streaming' | 'done' | 'imageGenerating'
+export type ResponseStepToolType = 'read' | 'edit' | 'search'
+
+export interface ResponseStep {
+  text: string
+  description?: string
+  details?: ReasoningStepDetail[]
+  toolType?: ResponseStepToolType
+}
+
+export interface ResponseRound {
+  step: ResponseStep
+  simpleMd: string
+}
+
+// ===== Block 类型（内部） =====
+
+export type BlockType = 'think' | 'composer' | 'md'
+
+export interface ResponseBlock {
+  type: BlockType
+  step?: ResponseStep
+  md?: string
+}
+
+// ===== 组件 Props =====
+
+export interface ResponseRootProps {
+  /** 是否启用流式模拟 */
+  simulate?: boolean
+  /** 当前阶段 */
+  phase?: ResponsePhase
+  /** 响应轮次数据 */
+  rounds?: ResponseRound[]
+  /** 最终 Markdown 内容 */
+  finalMarkdown?: string
+  /** 模拟完成回调 */
+  onSimulateComplete?: () => void
+  /** 步骤变化回调 */
+  onStepChange?: (text: string, toolType?: ResponseStepToolType) => void
+  /** 自定义 ThinkingIndicator（主库注入 Lottie） */
+  thinkingIndicator?: ReactNode
+  /** 自定义 className */
+  className?: string
+  /** 子组件 */
+  children?: ReactNode
+}
+
+export interface ResponseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, ResponseRootProps {}
+
+export interface ResponseThinkingProps {
+  className?: string
+}
+
+export interface ResponseStepsProps {
+  className?: string
+  children?: ReactNode
+}
+
+export interface ResponseStepProps {
+  step: ResponseStep
+  status?: 'completed' | 'in-progress'
+}
+
+export interface ResponseContentProps {
+  /** Markdown 内容 */
+  markdown?: string
+  /** 是否流式渲染 */
+  streaming?: boolean
+  /** 流式渲染完成回调 */
+  onStreamComplete?: () => void
+  className?: string
+}
+
+export interface ResponseImageGeneratingProps {
+  width?: string
+  height?: string
+  className?: string
+}
+
+export interface ResponseDefaultLayoutProps {
+  className?: string
+}
+
+// ===== Context 类型 =====
+
+export interface ResponseContextValue {
+  // 阶段控制
+  phase: ResponsePhase
+  simulate: boolean
+  // 数据
+  rounds: ResponseRound[]
+  finalMarkdown: string
+  blocks: ResponseBlock[]
+  // 状态
+  visibleIndex: number
+  setVisibleIndex: React.Dispatch<React.SetStateAction<number>>
+  isSimDone: boolean
+  currentBlock: ResponseBlock | null
+  showThink: boolean
+  // 回调
+  onSimulateComplete?: () => void
+  onStepChange?: (text: string, toolType?: ResponseStepToolType) => void
+  // 注入
+  thinkingIndicator: ReactNode
+}
+
+// ===== 复合组件类型 =====
+
+export interface ResponseCompound {
+  Root: React.FC<ResponseRootProps>
+  Thinking: React.FC<ResponseThinkingProps>
+  Steps: React.FC<ResponseStepsProps>
+  Step: React.FC<ResponseStepProps>
+  Content: React.FC<ResponseContentProps>
+  ImageGenerating: React.FC<ResponseImageGeneratingProps>
+  DefaultLayout: React.FC<ResponseDefaultLayoutProps>
+}