sparkdesign 0.0.1 → 0.2.6

package/cli/registry/chat/response.tsx

@@ -0,0 +1,271 @@
+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
+}
+
+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.
+`
+
+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 }[] = []
+  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
+}
+
+const DEFAULT_THINK = <ThinkingIndicator text="Qoder is thinking..." />
+
+export function Response({
+  simulate = true,
+  phase = 'thinking',
+  rounds,
+  finalMarkdown,
+  onSimulateComplete,
+  onStepChange,
+  thinkingIndicator,
+  className,
+  ...props
+}: ResponseProps) {
+  const thinkNode = thinkingIndicator ?? DEFAULT_THINK
+  const allRounds = rounds ?? DEMO_ROUNDS
+  const finalMd = finalMarkdown ?? DEMO_FINAL_MD
+  const blocks = useMemo(() => buildBlocks(allRounds, finalMd), [allRounds, finalMd])
+  const [visibleIndex, setVisibleIndex] = useState(0)
+  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])
+
+  useEffect(() => {
+    if (!simulate || blocks.length === 0) return
+    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 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>
+    )
+  }
+
+  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>
+  )
+}
+
+Response.displayName = 'Response'

package/cli/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/cli/registry/chat/sidebar-menu.tsx

@@ -0,0 +1,177 @@
+import { forwardRef, useState } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../basic/dropdown-menu'
+import { MoreLine } from '../basic/icons-inline'
+
+export interface SidebarMenuItemAction {
+  id: string
+  label: string
+  icon?: ReactNode
+  onClick?: () => void
+  destructive?: boolean
+}
+
+export interface SidebarMenuItem {
+  id: string
+  label: string
+  icon?: ReactNode
+  disabled?: boolean
+  actions?: SidebarMenuItemAction[]
+}
+
+export interface SidebarMenuProps extends HTMLAttributes<HTMLDivElement> {
+  items: SidebarMenuItem[]
+  selectedId?: string
+  onItemClick?: (item: SidebarMenuItem) => void
+  width?: string
+  moreIcon?: ReactNode
+}
+
+const moreClass = 'w-4 h-4'
+
+export const SidebarMenu = forwardRef<HTMLDivElement, SidebarMenuProps>(
+  (
+    {
+      items,
+      selectedId,
+      onItemClick,
+      width = 'w-52',
+      className,
+      moreIcon,
+      ...props
+    },
+    ref
+  ) => {
+    const [openDropdownId, setOpenDropdownId] = useState<string | null>(null)
+    const baseStyles = 'flex flex-col gap-1.5 rounded-md bg-transparent'
+    const defaultMore = moreIcon ?? <MoreLine className={moreClass} />
+
+    return (
+      <div ref={ref} className={cn(baseStyles, width, className)} {...props}>
+        {items.map((item) => {
+          const isSelected = selectedId === item.id
+          const isDisabled = item.disabled
+          const isOpen = openDropdownId === item.id
+
+          return (
+            <div
+              key={item.id}
+              className={cn(
+                'group flex items-center gap-2 py-1 px-2 rounded-md text-sm leading-sm transition-colors',
+                'focus-within:outline-none min-w-0',
+                isDisabled && 'opacity-50 cursor-not-allowed',
+                !isDisabled && 'cursor-pointer',
+                isSelected
+                  ? 'bg-fill-secondary text-text'
+                  : 'bg-transparent text-text-secondary hover:bg-fill-secondary hover:text-text'
+              )}
+            >
+              <button
+                onClick={() => {
+                  if (!isDisabled) onItemClick?.(item)
+                  setOpenDropdownId(null)
+                }}
+                disabled={isDisabled}
+                className="flex-1 text-left truncate min-w-0 outline-none bg-transparent border-none p-0 cursor-pointer"
+              >
+                {item.label}
+              </button>
+              {item.actions && item.actions.length > 0 ? (
+                <div onClick={(e) => e.stopPropagation()}>
+                  <DropdownMenu
+                    open={isOpen}
+                    onOpenChange={(open) => {
+                      setOpenDropdownId(open ? item.id : null)
+                    }}
+                  >
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        className={cn(
+                          'flex items-center justify-center p-1 rounded outline-none transition-all duration-200 relative z-10 cursor-pointer hover:bg-fill-primary'
+                        )}
+                        style={{ pointerEvents: 'auto' }}
+                        onClick={(e) => e.stopPropagation()}
+                        onMouseDown={(e) => e.stopPropagation()}
+                      >
+                        <span
+                          className={cn(
+                            'transition-opacity pointer-events-none flex items-center justify-center',
+                            isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                          )}
+                        >
+                          {item.icon ?? (
+                            <span
+                              className={cn(
+                                'w-4 h-4 inline-flex items-center justify-center',
+                                isSelected ? 'text-text' : 'text-text-secondary'
+                              )}
+                            >
+                              {defaultMore}
+                            </span>
+                          )}
+                        </span>
+                      </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      {item.actions.map((action) => (
+                        <DropdownMenuItem
+                          key={action.id}
+                          variant={action.destructive ? 'destructive' : 'default'}
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            setOpenDropdownId(null)
+                            action.onClick?.()
+                          }}
+                        >
+                          {action.icon && (
+                            <span className="mr-2 w-4 h-4 flex items-center justify-center">
+                              {action.icon}
+                            </span>
+                          )}
+                          {action.label}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              ) : (
+                <span
+                  className="flex-shrink-0 w-4 h-4 flex items-center justify-center"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {item.icon ? (
+                    <span
+                      className={cn(
+                        'transition-opacity pointer-events-none',
+                        isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                      )}
+                    >
+                      {item.icon}
+                    </span>
+                  ) : (
+                    <span
+                      className={cn(
+                        'w-4 h-4 inline-flex items-center justify-center transition-opacity pointer-events-none',
+                        isSelected ? 'opacity-100 text-text' : 'opacity-0 group-hover:opacity-100 text-text-secondary'
+                      )}
+                    >
+                      {defaultMore}
+                    </span>
+                  )}
+                </span>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+)
+
+SidebarMenu.displayName = 'SidebarMenu'

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