sparkdesign 0.0.1 → 0.1.10

package/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/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>
+}

package/registry/chat/send-button.tsx

@@ -0,0 +1,94 @@
+import { forwardRef } from 'react'
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { SendPlaneLine, StopLine, MicLine } from '../basic/icons-inline'
+
+const sendButtonVariants = cva(
+  'inline-flex items-center justify-center rounded-full p-1.5 transition-colors duration-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-transform active:scale-95 active:translate-y-px',
+  {
+    variants: {
+      status: {
+        normal:
+          'SendButton-send bg-bg-highlight hover:bg-bg-highlight-hover active:opacity-80',
+        generating:
+          'bg-primary hover:bg-primary-hover active:opacity-80',
+        recording:
+          'SendButton-send bg-bg-highlight hover:bg-bg-highlight-hover active:opacity-80',
+        stopRecording:
+          'bg-error-bg hover:bg-error-bg-hover active:opacity-80',
+      },
+    },
+    defaultVariants: {
+      status: 'normal',
+    },
+  }
+)
+
+const sendButtonIconVariants = cva('inline-flex h-4 w-4 shrink-0 items-center justify-center [&>*]:block [&>*]:leading-none', {
+  variants: {
+    status: {
+      normal: 'text-text-on-primary',
+      generating: 'text-text-on-primary',
+      recording: 'text-text-on-primary',
+      stopRecording: 'text-error',
+    },
+  },
+  defaultVariants: {
+    status: 'normal',
+  },
+})
+
+const iconClass = 'w-4 h-4'
+
+export interface SendButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof sendButtonVariants> {
+  status?: 'normal' | 'generating' | 'recording' | 'stopRecording'
+  /** 主库可注入 useIcon('send')；不传则用 registry 内联图标 */
+  sendIcon?: ReactNode
+  stopIcon?: ReactNode
+  micIcon?: ReactNode
+}
+
+export const SendButton = forwardRef<HTMLButtonElement, SendButtonProps>(
+  (
+    {
+      status = 'normal',
+      disabled = false,
+      className,
+      sendIcon,
+      stopIcon,
+      micIcon,
+      ...props
+    },
+    ref
+  ) => {
+    const defaultSend = sendIcon ?? <SendPlaneLine className={iconClass} />
+    const defaultStop = stopIcon ?? <StopLine className={iconClass} />
+    const defaultMic = micIcon ?? <MicLine className={iconClass} />
+    const iconByStatus =
+      status === 'normal'
+        ? defaultSend
+        : status === 'generating' || status === 'stopRecording'
+          ? defaultStop
+          : defaultMic
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        className={sendButtonVariants({ status, className })}
+        disabled={disabled}
+        {...props}
+      >
+        <span className={sendButtonIconVariants({ status })}>
+          {iconByStatus}
+        </span>
+      </button>
+    )
+  }
+)
+
+SendButton.displayName = 'SendButton'
+
+export { sendButtonVariants, sendButtonIconVariants }

package/registry/chat/streaming-markdown-block.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { MarkdownBody } from './markdown'
+
+function segmentForStreaming(text: string): string[] {
+  const tokens: string[] = []
+  let i = 0
+  const isCJK = (c: string) => /[\u4e00-\u9fff\u3040-\u30ff]/.test(c)
+  const isWordChar = (c: string) => /[a-zA-Z0-9']/.test(c)
+  while (i < text.length) {
+    const c = text[i]!
+    if (isCJK(c)) {
+      tokens.push(c)
+      i += 1
+    } else if (isWordChar(c)) {
+      let end = i
+      while (end < text.length && isWordChar(text[end]!)) end += 1
+      tokens.push(text.slice(i, end))
+      i = end
+    } else {
+      let end = i
+      while (end < text.length && !isCJK(text[end]!) && !isWordChar(text[end]!)) end += 1
+      tokens.push(text.slice(i, end))
+      i = end
+    }
+  }
+  return tokens
+}
+
+function splitCompletedBlocks(visibleText: string): { completed: string; partial: string } {
+  const blocks = visibleText.split(/\n\n+/)
+  if (blocks.length <= 1) return { completed: '', partial: visibleText }
+  const partial = blocks.pop() ?? ''
+  const completed = blocks.join('\n\n')
+  return { completed, partial }
+}
+
+export interface StreamingMarkdownBlockProps {
+  content: string
+  isActive: boolean
+  onStreamComplete?: () => void
+  tokenDelayMs?: number
+  className?: string
+}
+
+const TOKENS_PER_TICK = 3
+
+export function StreamingMarkdownBlock({
+  content,
+  isActive,
+  onStreamComplete,
+  tokenDelayMs = 14,
+  className,
+}: StreamingMarkdownBlockProps) {
+  const tokens = useMemo(() => segmentForStreaming(content), [content])
+  const [visibleCount, setVisibleCount] = useState(0)
+  const onStreamCompleteRef = useRef(onStreamComplete)
+  onStreamCompleteRef.current = onStreamComplete
+
+  const visibleText = useMemo(
+    () => tokens.slice(0, visibleCount).join(''),
+    [tokens, visibleCount]
+  )
+  const { completed, partial } = useMemo(() => splitCompletedBlocks(visibleText), [visibleText])
+
+  useEffect(() => {
+    if (!isActive) return
+    setVisibleCount(0)
+    const len = tokens.length
+    if (len === 0) {
+      onStreamCompleteRef.current?.()
+      return
+    }
+    let k = 0
+    const id = setInterval(() => {
+      k = Math.min(k + TOKENS_PER_TICK, len)
+      setVisibleCount(k)
+      if (k >= len) {
+        clearInterval(id)
+        onStreamCompleteRef.current?.()
+      }
+    }, tokenDelayMs)
+    return () => clearInterval(id)
+  }, [isActive, content, tokens.length, tokenDelayMs])
+
+  const isStreaming = isActive && visibleCount < tokens.length
+
+  if (tokens.length === 0) return null
+
+  if (isStreaming) {
+    return (
+      <div className={className}>
+        {completed ? (
+          <div className="streaming-completed">
+            <MarkdownBody>{completed}</MarkdownBody>
+          </div>
+        ) : null}
+        {partial ? (
+          <span className="streaming-partial text-sm leading-sm text-text streaming-token-fade-in">
+            {partial}
+          </span>
+        ) : null}
+      </div>
+    )
+  }
+
+  return (
+    <div className={className}>
+      <MarkdownBody>{content}</MarkdownBody>
+    </div>
+  )
+}

package/registry/chat/task-part.tsx

@@ -0,0 +1,109 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { CollapsibleCard } from '../basic/collapsible-card'
+import { CatalogLine, CircleLine, CheckboxCircleLine, IndeterminateCircleLine, ArrowRightCircleFillLine } from '../basic/icons-inline'
+
+const ICON_CLASS = 'w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0'
+
+export type TaskStatus = 'completed' | 'uncompleted' | 'skipped' | 'cancelled'
+
+export interface TaskPartTask {
+  id?: string
+  text: string
+  status?: TaskStatus
+}
+
+export interface TaskPartProps {
+  tasks?: TaskPartTask[]
+  title?: string
+  currentTaskId?: string
+  defaultExpanded?: boolean
+  className?: string
+  headerIcon?: ReactNode
+  uncompletedIcon?: ReactNode
+  completedIcon?: ReactNode
+  skippedIcon?: ReactNode
+  loaderIcon?: ReactNode
+}
+
+const defaultHeaderIcon = <CatalogLine className={cn(ICON_CLASS, 'text-text-secondary')} />
+const defaultUncompleted = <CircleLine className={cn(ICON_CLASS, 'text-text-tertiary')} />
+const defaultCompleted = <CheckboxCircleLine className={cn(ICON_CLASS, 'text-text-quaternary')} />
+const defaultSkipped = <IndeterminateCircleLine className={cn(ICON_CLASS, 'text-text-tertiary')} />
+const defaultLoader = <ArrowRightCircleFillLine className={cn(ICON_CLASS, 'text-text')} />
+
+function getStatusIcon(
+  task: TaskPartTask,
+  isCurrent: boolean,
+  icons: {
+    loaderIcon?: ReactNode
+    completedIcon?: ReactNode
+    skippedIcon?: ReactNode
+    uncompletedIcon?: ReactNode
+  }
+): ReactNode {
+  if (isCurrent) return icons.loaderIcon ?? defaultLoader
+  if (task.status === 'completed') return icons.completedIcon ?? defaultCompleted
+  if (task.status === 'skipped' || task.status === 'cancelled') return icons.skippedIcon ?? defaultSkipped
+  return icons.uncompletedIcon ?? defaultUncompleted
+}
+
+export function TaskPart({
+  tasks = [],
+  title = 'To-dos',
+  currentTaskId,
+  defaultExpanded = true,
+  className,
+  headerIcon,
+  uncompletedIcon,
+  completedIcon,
+  skippedIcon,
+  loaderIcon,
+}: TaskPartProps) {
+  return (
+    <CollapsibleCard
+      headerIcon={headerIcon ?? defaultHeaderIcon}
+      headerTitle={<span className="text-left">{title}</span>}
+      defaultExpanded={defaultExpanded}
+      contentPadding="var(--spacing-1\.5) var(--spacing-2)"
+      showExpandAllBar
+      maxHeight={124}
+      className={className}
+    >
+      <div className="flex flex-col gap-2">
+        {tasks.map((task, index) => {
+          const taskId = task.id ?? index
+          const isCurrent = currentTaskId != null && currentTaskId === String(taskId)
+          const statusIcon = getStatusIcon(task, isCurrent, {
+            loaderIcon,
+            completedIcon,
+            skippedIcon,
+            uncompletedIcon,
+          })
+
+          return (
+            <div key={taskId} className="flex flex-row gap-2 items-start">
+              <div className="flex items-center justify-center shrink-0 pt-0.5 [&>svg]:w-[var(--font-size-sm)] [&>svg]:h-[var(--font-size-sm)]">
+                {statusIcon}
+              </div>
+              <span
+                className={cn(
+                  'text-xs leading-xs flex-1 text-left',
+                  isCurrent
+                    ? 'text-text'
+                    : task.status === 'completed'
+                      ? 'text-text-quaternary line-through'
+                      : 'text-text-tertiary'
+                )}
+              >
+                {task.text}
+              </span>
+            </div>
+          )
+        })}
+      </div>
+    </CollapsibleCard>
+  )
+}
+
+TaskPart.displayName = 'TaskPart'

package/registry/chat/terminal-code-block-part.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react'
+import { CollapsibleCard } from '../basic/collapsible-card'
+import { IconButton } from '../basic/icon-button'
+import { TerminalBoxLine, ExternalLinkLine } from '../basic/icons-inline'
+
+const ICON_CLASS = 'w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0 text-text-secondary'
+
+export interface TerminalCodeBlockPartProps {
+  command?: string
+  output?: string
+  autoRanCommand?: string
+  className?: string
+  headerIcon?: ReactNode
+  externalLinkIcon?: ReactNode
+}
+
+const defaultHeaderIcon = <TerminalBoxLine className={ICON_CLASS} />
+const defaultExternalLinkIcon = <ExternalLinkLine className={ICON_CLASS} />
+
+export function TerminalCodeBlockPart({
+  command,
+  output,
+  autoRanCommand,
+  className,
+  headerIcon,
+  externalLinkIcon,
+}: TerminalCodeBlockPartProps) {
+  const displayCommand = autoRanCommand ?? (command != null ? `Auto-Ran command: ${command}` : 'Terminal')
+
+  return (
+    <CollapsibleCard
+      headerIcon={headerIcon ?? defaultHeaderIcon}
+      headerTitle={<span className="font-normal">{displayCommand}</span>}
+      headerRight={
+        <IconButton
+          variant="iconOnly"
+          size="sm"
+          icon={externalLinkIcon ?? defaultExternalLinkIcon}
+          aria-label="Open in terminal"
+          className="!min-h-0 !min-w-0 h-[var(--font-size-sm)] w-[var(--font-size-sm)] text-text-secondary hover:text-text [&_svg]:w-[var(--font-size-sm)] [&_svg]:h-[var(--font-size-sm)]"
+        />
+      }
+      contentPadding="0"
+      className={className}
+    >
+      <div className="flex flex-col gap-0">
+        {command != null && command !== '' && (
+          <div className="px-2 py-1.5">
+            <div className="flex items-start gap-2">
+              <span className="font-mono text-xs text-text shrink-0">$</span>
+              <pre className="m-0 flex-1 overflow-x-auto text-left font-mono text-xs leading-xs whitespace-pre text-text bg-transparent scrollbar-auto">
+                <code>{command}</code>
+              </pre>
+            </div>
+          </div>
+        )}
+        {output != null && output !== '' && (
+          <div className="px-2 py-1.5 overflow-x-auto text-left scrollbar-auto">
+            <pre className="m-0 p-0 font-mono text-xs leading-xs whitespace-pre-wrap break-all text-text-tertiary bg-transparent">
+              {output}
+            </pre>
+          </div>
+        )}
+      </div>
+    </CollapsibleCard>
+  )
+}
+
+TerminalCodeBlockPart.displayName = 'TerminalCodeBlockPart'

package/registry/chat/thinking-indicator.tsx

@@ -0,0 +1,91 @@
+import { useMemo } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { motion } from 'framer-motion'
+
+export interface ThinkingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+  text?: string
+  textClassName?: string
+  shimmer?: boolean
+  shimmerDuration?: number
+  shimmerSpread?: number
+  /** 主库可注入 Lottie 等自定义动画；不传则用 CSS 三点脉动 */
+  loader?: ReactNode
+}
+
+/** 默认：CSS 三点脉动，无 Lottie 依赖 */
+function DefaultLoader() {
+  return (
+    <span className="relative block w-5 h-5 shrink-0 flex items-center justify-center" aria-hidden>
+      <style>{`
+        .thinking-dots span { animation: thinking-dot 1.4s ease-in-out infinite both; }
+        .thinking-dots span:nth-child(1) { animation-delay: 0s; }
+        .thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
+        .thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
+        @keyframes thinking-dot {
+          0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
+          40% { transform: scale(1); opacity: 1; }
+        }
+      `}</style>
+      <span className="thinking-dots inline-flex gap-0.5">
+        <span className="w-1 h-1 rounded-full bg-current opacity-70" />
+        <span className="w-1 h-1 rounded-full bg-current opacity-70" />
+        <span className="w-1 h-1 rounded-full bg-current opacity-70" />
+      </span>
+    </span>
+  )
+}
+
+export function ThinkingIndicator({
+  text = 'Qoder is Thinking...',
+  textClassName,
+  shimmer = true,
+  shimmerDuration = 2,
+  shimmerSpread = 2,
+  className,
+  loader,
+  ...props
+}: ThinkingIndicatorProps) {
+  const dynamicSpread = useMemo(() => {
+    const textToUse = text || ''
+    return textToUse.length * shimmerSpread
+  }, [text, shimmerSpread])
+
+  const loaderContent = loader ?? <DefaultLoader />
+
+  return (
+    <div
+      className={cn('inline-flex items-center gap-1.5 max-w-full', className)}
+      {...props}
+    >
+      <span className="shrink-0 -translate-x-0.5" aria-hidden>
+        {loaderContent}
+      </span>
+      <div className="flex-1 min-w-0 flex items-center">
+        {shimmer ? (
+          <motion.span
+            className={cn(
+              'text-sm leading-sm relative inline-block bg-clip-text text-transparent',
+              'bg-[length:250%_100%,auto] bg-no-repeat truncate',
+              textClassName
+            )}
+            style={{
+              backgroundImage: `linear-gradient(90deg, transparent calc(50% - ${dynamicSpread}px), var(--color-text), transparent calc(50% + ${dynamicSpread}px)), linear-gradient(var(--color-text-secondary), var(--color-text-secondary))`,
+            }}
+            initial={{ backgroundPosition: '100% center' }}
+            animate={{ backgroundPosition: '0% center' }}
+            transition={{ repeat: Infinity, duration: shimmerDuration, ease: 'linear' }}
+          >
+            {text}
+          </motion.span>
+        ) : (
+          <span className={cn('text-sm leading-sm text-text-secondary truncate', textClassName)}>
+            {text}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
+
+ThinkingIndicator.displayName = 'ThinkingIndicator'