sparkdesign 0.0.1 → 0.1.10

package/registry/chat/queue-indicator.tsx

@@ -0,0 +1,234 @@
+import { memo, useState, useCallback, useEffect } from 'react'
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Tooltip } from '../basic/tooltip'
+import { IconButton } from '../basic/icon-button'
+import { ArrowUpLine, CloseLine, ArrowDownSLine } from '../basic/icons-inline'
+import { Scrollbar } from '../basic/scrollbar'
+
+export interface QueueIndicatorItem {
+  id: string
+  label: ReactNode
+  attachmentCount?: number
+}
+
+export interface QueueIndicatorLabels {
+  title?: string
+  sendNowTip?: string
+  removeTip?: string
+  fileLabel?: string
+  filesLabel?: string
+}
+
+const DEFAULT_LABELS: Required<QueueIndicatorLabels> = {
+  title: 'In queue',
+  sendNowTip: 'Send now',
+  removeTip: 'Remove',
+  fileLabel: 'file',
+  filesLabel: 'files',
+}
+
+export interface QueueIndicatorProps {
+  items: QueueIndicatorItem[]
+  onRemoveItem?: (itemId: string) => void
+  onSendNow?: (itemId: string) => void
+  isStreaming?: boolean
+  hasStatusCardBelow?: boolean
+  labels?: QueueIndicatorLabels
+  defaultExpanded?: boolean
+  storageKey?: string
+  arrowUpIcon?: ReactNode
+  closeIcon?: ReactNode
+  arrowDownSIcon?: ReactNode
+}
+
+const arrowUpClass = 'w-3.5 h-3.5'
+const closeClass = 'w-3.5 h-3.5'
+const arrowDownClass = 'w-4 h-4 text-text-tertiary transition-transform duration-200'
+
+const QueueItemRow = memo(function QueueItemRow({
+  item,
+  onRemove,
+  onSendNow,
+  labels,
+  arrowUpIcon,
+  closeIcon,
+}: {
+  item: QueueIndicatorItem
+  onRemove?: (itemId: string) => void
+  onSendNow?: (itemId: string) => void
+  labels: Required<QueueIndicatorLabels>
+  arrowUpIcon: ReactNode
+  closeIcon: ReactNode
+}) {
+  const handleRemove = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      onRemove?.(item.id)
+    },
+    [item.id, onRemove]
+  )
+
+  const handleSendNow = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      onSendNow?.(item.id)
+    },
+    [item.id, onSendNow]
+  )
+
+  const attachmentCount = item.attachmentCount ?? 0
+  const fileWord = attachmentCount === 1 ? labels.fileLabel : labels.filesLabel
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-1.5 text-xs leading-xs hover:bg-fill-tertiary transition-colors cursor-default">
+      <span className="truncate flex-1 text-text">{item.label}</span>
+      {attachmentCount > 0 && (
+        <span className="shrink-0 text-xs leading-xs text-text-tertiary">
+          +{attachmentCount} {fileWord}
+        </span>
+      )}
+      <div className="flex items-center gap-0.5">
+        {onSendNow && (
+          <Tooltip content={labels.sendNowTip} side="top">
+            <IconButton
+              size="sm"
+              variant="ghost"
+              icon={arrowUpIcon}
+              aria-label={labels.sendNowTip}
+              className="shrink-0"
+              onClick={handleSendNow}
+            />
+          </Tooltip>
+        )}
+        {onRemove && (
+          <Tooltip content={labels.removeTip} side="top">
+            <IconButton
+              size="sm"
+              variant="ghost"
+              icon={closeIcon}
+              aria-label={labels.removeTip}
+              className="shrink-0"
+              onClick={handleRemove}
+            />
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  )
+})
+
+export const QueueIndicator = memo(function QueueIndicator({
+  items,
+  onRemoveItem,
+  onSendNow,
+  isStreaming = false,
+  hasStatusCardBelow = false,
+  labels: labelsProp,
+  defaultExpanded = true,
+  storageKey,
+  arrowUpIcon,
+  closeIcon,
+  arrowDownSIcon,
+}: QueueIndicatorProps) {
+  const labels = { ...DEFAULT_LABELS, ...labelsProp }
+
+  const defaultArrowUp = arrowUpIcon ?? <ArrowUpLine className={arrowUpClass} />
+  const defaultClose = closeIcon ?? <CloseLine className={closeClass} />
+  const defaultArrowDown =
+    arrowDownSIcon ?? <ArrowDownSLine className={arrowDownClass} />
+
+  const [isExpanded, setIsExpanded] = useState(() => {
+    if (typeof window === 'undefined') return defaultExpanded
+    if (storageKey) {
+      const saved = localStorage.getItem(storageKey)
+      return saved !== null ? saved === 'true' : defaultExpanded
+    }
+    return defaultExpanded
+  })
+
+  useEffect(() => {
+    if (storageKey) {
+      localStorage.setItem(storageKey, String(isExpanded))
+    }
+  }, [storageKey, isExpanded])
+
+  if (items.length === 0) return null
+
+  const containerStyles = cn(
+    'w-full overflow-hidden flex flex-col',
+    'border border-b-0 border-border border-border-tertiary bg-bg-base',
+    !hasStatusCardBelow && 'rounded-t-xl'
+  )
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+      className={containerStyles}
+    >
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={() => setIsExpanded(!isExpanded)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            setIsExpanded(!isExpanded)
+          }
+        }}
+        aria-expanded={isExpanded}
+        aria-label={`${isExpanded ? 'Collapse' : 'Expand'} queue`}
+        className="flex items-center justify-between px-3 py-1 h-7 cursor-pointer bg-fill-tertiary hover:bg-fill-secondary transition-colors duration-150 focus:outline-none"
+      >
+        <div className="flex items-center gap-2 flex-1 min-w-0">
+          <span
+            className={cn(
+              'inline-flex items-center justify-center',
+              !isExpanded && '-rotate-90'
+            )}
+          >
+            {defaultArrowDown}
+          </span>
+          <span className="text-xs leading-xs font-medium text-text-secondary">
+            {labels.title}
+          </span>
+        </div>
+      </div>
+
+      <AnimatePresence initial={false}>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2, ease: [0.23, 1, 0.32, 1] }}
+            className="overflow-hidden"
+          >
+            <Scrollbar
+              scrollbarVisibility="auto"
+              maxHeight={208}
+              className="border-t border-border-tertiary scroll-smooth"
+            >
+              {items.map((item) => (
+                <QueueItemRow
+                  key={item.id}
+                  item={item}
+                  onRemove={onRemoveItem}
+                  onSendNow={onSendNow}
+                  labels={labels}
+                  arrowUpIcon={defaultArrowUp}
+                  closeIcon={defaultClose}
+                />
+              ))}
+            </Scrollbar>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  )
+})
+
+QueueIndicator.displayName = 'QueueIndicator'

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

@@ -0,0 +1,336 @@
+import { memo, useMemo, useCallback, Fragment } from 'react'
+import type { ReactNode } from 'react'
+import { motion } from 'framer-motion'
+import { cn } from '../../lib/utils'
+import { useReasoningStepContext } from './context'
+import type {
+  ReasoningStepHeaderProps,
+  ReasoningStepDetailsProps,
+  ReasoningStepDetailRowProps,
+  ReasoningStepDetail,
+} from './types'
+
+// ===== 样式常量 =====
+
+const iconSizeStyle = { width: 'var(--font-size-xs)', height: 'var(--font-size-xs)' }
+
+const FILE_ICON_COLOR_MAP: Record<string, string> = {
+  ts: 'text-info', tsx: 'text-info', js: 'text-info', jsx: 'text-info',
+  py: 'text-teal',
+  md: 'text-text-secondary', mdx: 'text-text-secondary',
+}
+
+function getFileIconColorClass(fileType?: string, filename?: string): string {
+  const ext = (fileType ?? filename?.split('.').pop() ?? '').toLowerCase()
+  return FILE_ICON_COLOR_MAP[ext] ?? 'text-text-tertiary'
+}
+
+// ===== 辅助组件 =====
+
+const FileIconPlaceholder = memo(function FileIconPlaceholder({ className }: { className?: string }) {
+  return (
+    <span
+      className={cn('inline-flex items-center justify-center text-xs leading-xs font-mono', className)}
+      style={iconSizeStyle}
+      aria-hidden
+    >
+      ⎔
+    </span>
+  )
+})
+
+const InlineRow = memo(function InlineRow({
+  prefix,
+  primary,
+  secondary,
+}: {
+  prefix?: ReactNode
+  primary: string
+  secondary?: string
+}) {
+  return (
+    <div className="flex flex-row items-center gap-1.5 min-w-0 flex-1">
+      {prefix ? <div className="flex items-center justify-center shrink-0">{prefix}</div> : null}
+      <div className="flex flex-row items-center gap-1 min-w-0 overflow-hidden flex-1">
+        <span className="text-xs leading-xs font-normal text-text-tertiary truncate" title={primary}>
+          {primary}
+        </span>
+        {secondary ? (
+          <span className="text-xs leading-xs font-normal text-text-quaternary truncate" title={secondary}>
+            {secondary}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  )
+})
+
+// ===== ReasoningStep.Header =====
+
+export function ReasoningStepHeader({ className }: ReasoningStepHeaderProps) {
+  const ctx = useReasoningStepContext()
+
+  const dynamicSpread = useMemo(() => {
+    if (typeof ctx.text === 'string') return ctx.text.length * ctx.spread
+    return 10 * ctx.spread
+  }, [ctx.text, ctx.spread])
+
+  const getIcon = () => (ctx.icon ? ctx.icon : ctx.eyeIcon)
+
+  const renderPrimaryText = () => {
+    if (typeof ctx.text !== 'string') return ctx.text
+    if (ctx.status === 'in-progress') {
+      return (
+        <motion.span
+          className="text-xs leading-xs font-normal relative inline-block bg-clip-text text-transparent bg-[length:250%_100%,auto] bg-no-repeat truncate"
+          style={{
+            backgroundImage: `linear-gradient(90deg, transparent calc(50% - ${dynamicSpread}px), var(--color-text), transparent calc(50% + ${dynamicSpread}px)), linear-gradient(var(--color-text-tertiary), var(--color-text-tertiary))`,
+          }}
+          initial={{ backgroundPosition: '100% center' }}
+          animate={{ backgroundPosition: '0% center' }}
+          transition={{ repeat: Infinity, duration: ctx.duration, ease: 'linear' }}
+        >
+          {ctx.text}
+        </motion.span>
+      )
+    }
+    return (
+      <span className="text-xs leading-xs font-normal text-text-tertiary truncate">
+        {ctx.text}
+      </span>
+    )
+  }
+
+  const renderDescription = () => {
+    if (!ctx.description) return null
+    return (
+      <span className="text-xs leading-xs font-normal text-text-quaternary truncate">
+        {ctx.description}
+      </span>
+    )
+  }
+
+  return (
+    <div
+      className={cn('flex flex-row items-center gap-1.5', ctx.hasExpandableContent && 'cursor-pointer', className)}
+      onClick={ctx.toggleExpanded}
+    >
+      {ctx.effectiveShowIcon && (
+        <div className="flex items-center justify-center shrink-0" style={iconSizeStyle}>
+          {getIcon()}
+        </div>
+      )}
+      <div className="flex flex-row items-center gap-1 flex-1 min-w-0">
+        {renderPrimaryText()}
+        {ctx.description ? renderDescription() : null}
+        {ctx.hasExpandableContent && (
+          <div
+            className={cn(
+              'flex items-center justify-center shrink-0 text-text-tertiary transition-opacity duration-200 ease-in-out',
+              ctx.effectiveExpanded ? 'opacity-100' : ctx.isHovered ? 'opacity-100' : 'opacity-0',
+              ctx.effectiveExpanded ? 'rotate-90' : 'rotate-0'
+            )}
+            style={iconSizeStyle}
+          >
+            {ctx.arrowRightIcon}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+ReasoningStepHeader.displayName = 'ReasoningStepHeader'
+
+// ===== ReasoningStep.DetailRow（内部递归组件）=====
+
+interface DetailRowInternalProps {
+  detail: ReasoningStepDetail
+  depth: number
+  pathKey: string
+  detailIndent: string
+  disableExpandAnimation: boolean
+  expandedNestedKeys: Set<string>
+  onToggleNested: (pathKey: string) => void
+  arrowRightIcon: ReactNode
+}
+
+const DetailRowInternal = memo(function DetailRowInternal({
+  detail,
+  depth,
+  pathKey,
+  detailIndent,
+  expandedNestedKeys,
+  onToggleNested,
+  arrowRightIcon,
+}: DetailRowInternalProps) {
+  const hasNested = detail.details != null && detail.details.length > 0
+  const isExpandedNested = expandedNestedKeys.has(pathKey)
+  const showIconOnRow = !hasNested
+  const primary = detail.type === 'action' ? detail.action : detail.filename
+  const secondary =
+    detail.type === 'action' ? detail.desc : [detail.lines, detail.path].filter(Boolean).join(' ')
+  const prefix =
+    showIconOnRow && detail.type === 'file' ? (
+      <FileIconPlaceholder className={getFileIconColorClass(detail.fileType, detail.filename)} />
+    ) : undefined
+
+  const handleClick = useCallback(() => {
+    if (hasNested) onToggleNested(pathKey)
+  }, [hasNested, onToggleNested, pathKey])
+
+  const rowContent = (
+    <div
+      className={cn(
+        'flex flex-row items-center gap-1.5 self-stretch min-h-5 min-w-0',
+        hasNested && 'cursor-pointer'
+      )}
+      onClick={hasNested ? handleClick : undefined}
+    >
+      <InlineRow prefix={prefix} primary={primary} secondary={secondary} />
+      {hasNested && (
+        <div
+          className={cn(
+            'flex items-center justify-center shrink-0 text-text-tertiary',
+            isExpandedNested ? 'rotate-90' : 'rotate-0'
+          )}
+          style={iconSizeStyle}
+        >
+          {arrowRightIcon}
+        </div>
+      )}
+    </div>
+  )
+
+  const rowWithOptionalLine = (
+    <div
+      className="flex flex-row items-center gap-0 self-stretch"
+      style={{ marginLeft: detailIndent }}
+    >
+      <div className="shrink-0 w-[var(--font-size-xs)] h-5 border-l border-border-tertiary" />
+      {rowContent}
+    </div>
+  )
+
+  if (!hasNested) return <Fragment key={pathKey}>{rowWithOptionalLine}</Fragment>
+
+  const isThirdLevelContainer = depth === 1
+  const nestedWrapperClass = isThirdLevelContainer
+    ? 'rounded-lg border border-border-tertiary bg-bg-base p-2 flex flex-col gap-0'
+    : 'flex flex-col'
+
+  return (
+    <div key={pathKey} className="flex flex-col self-stretch">
+      {rowWithOptionalLine}
+      <div
+        className={cn(
+          'grid transition-[grid-template-rows,opacity] duration-150 ease-out',
+          isExpandedNested ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
+        )}
+      >
+        <div className="overflow-hidden">
+          <div className={cn(nestedWrapperClass)}>
+            {detail.details?.map((d, i) => (
+              <DetailRowInternal
+                key={`${pathKey}-${i}`}
+                detail={d}
+                depth={depth + 1}
+                pathKey={`${pathKey}-${i}`}
+                detailIndent={detailIndent}
+                disableExpandAnimation={false}
+                expandedNestedKeys={expandedNestedKeys}
+                onToggleNested={onToggleNested}
+                arrowRightIcon={arrowRightIcon}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+// ===== ReasoningStep.DetailRow（公开 API）=====
+
+export function ReasoningStepDetailRow({
+  detail,
+  depth = 0,
+  pathKey = '0',
+}: ReasoningStepDetailRowProps) {
+  const ctx = useReasoningStepContext()
+  return (
+    <DetailRowInternal
+      detail={detail}
+      depth={depth}
+      pathKey={pathKey}
+      detailIndent={ctx.detailIndent}
+      disableExpandAnimation={ctx.disableExpandAnimation}
+      expandedNestedKeys={ctx.expandedNestedKeys}
+      onToggleNested={ctx.toggleNested}
+      arrowRightIcon={ctx.arrowRightIcon}
+    />
+  )
+}
+
+ReasoningStepDetailRow.displayName = 'ReasoningStepDetailRow'
+
+// ===== ReasoningStep.Details =====
+
+export function ReasoningStepDetails({ className, children }: ReasoningStepDetailsProps) {
+  const ctx = useReasoningStepContext()
+  const hasDetails = ctx.details != null && ctx.details.length > 0
+
+  return (
+    <div
+      className={cn(
+        'grid transition-[grid-template-rows,opacity] duration-200 ease-out',
+        ctx.effectiveExpanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
+        className
+      )}
+    >
+      <div className="overflow-hidden">
+        {hasDetails ? (
+          <div className="flex flex-col">
+            {ctx.details?.map((d, i) => (
+              <DetailRowInternal
+                key={String(i)}
+                detail={d}
+                depth={0}
+                pathKey={String(i)}
+                detailIndent={ctx.detailIndent}
+                disableExpandAnimation={ctx.disableExpandAnimation}
+                expandedNestedKeys={ctx.expandedNestedKeys}
+                onToggleNested={ctx.toggleNested}
+                arrowRightIcon={ctx.arrowRightIcon}
+              />
+            ))}
+          </div>
+        ) : (
+          children ?? ctx.detailsChildren
+        )}
+      </div>
+    </div>
+  )
+}
+
+ReasoningStepDetails.displayName = 'ReasoningStepDetails'
+
+// ===== ReasoningStep.DefaultLayout =====
+
+export function ReasoningStepDefaultLayout() {
+  const ctx = useReasoningStepContext()
+
+  return (
+    <div
+      data-reasoning-step
+      className="flex flex-col gap-1 py-0.5"
+      onMouseEnter={() => ctx.setIsHovered(true)}
+      onMouseLeave={() => ctx.setIsHovered(false)}
+    >
+      <ReasoningStepHeader />
+      {ctx.hasExpandableContent && <ReasoningStepDetails />}
+    </div>
+  )
+}
+
+ReasoningStepDefaultLayout.displayName = 'ReasoningStepDefaultLayout'

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

@@ -0,0 +1,114 @@
+import { createContext, useContext, useState, useCallback, useMemo } from 'react'
+import type { ReactNode } from 'react'
+import { EyeLine, ArrowRightLine } from '../../basic/icons-inline'
+import type { ReasoningStepContextValue, ReasoningStepRootProps } from './types'
+
+// ===== 样式常量 =====
+
+const eyeClass = 'w-full h-full text-text-tertiary transition-transform duration-200 ease-in-out'
+const arrowClass = 'w-full h-full transition-transform duration-200 ease-in-out'
+
+// ===== Context =====
+
+const ReasoningStepContext = createContext<ReasoningStepContextValue | null>(null)
+ReasoningStepContext.displayName = 'ReasoningStepContext'
+
+export function useReasoningStepContext() {
+  const ctx = useContext(ReasoningStepContext)
+  if (!ctx) throw new Error('ReasoningStep compound components must be used within ReasoningStep.Root')
+  return ctx
+}
+
+// ===== Provider =====
+
+export function ReasoningStepRootProvider({
+  text,
+  description,
+  status = 'completed',
+  icon,
+  showIcon = true,
+  details,
+  children,
+  detailsChildren,
+  duration = 2,
+  spread = 2,
+  disableExpandAnimation = false,
+  defaultExpanded,
+  expanded: expandedProp,
+  onExpandedChange,
+  eyeIcon,
+  arrowRightIcon,
+}: ReasoningStepRootProps & { children?: ReactNode; detailsChildren?: ReactNode }) {
+  const isControlled = expandedProp !== undefined
+  const [isExpandedInternal, setIsExpandedInternal] = useState(defaultExpanded ?? false)
+  const isExpanded = isControlled ? expandedProp : isExpandedInternal
+  const [isHovered, setIsHovered] = useState(false)
+
+  const effectiveExpanded = disableExpandAnimation && defaultExpanded !== undefined
+    ? defaultExpanded
+    : isExpanded
+
+  const effectiveShowIcon = showIcon && typeof text === 'string'
+  const detailIndent = effectiveShowIcon ? 'var(--spacing-1.5)' : 'var(--spacing-2.5)'
+
+  const hasDetails = details != null && details.length > 0
+  const hasExpandableContent = hasDetails || detailsChildren != null
+
+  const toggleExpanded = useCallback(() => {
+    if (hasExpandableContent) {
+      if (isControlled) onExpandedChange?.(!expandedProp)
+      else setIsExpandedInternal((e) => !e)
+    }
+  }, [hasExpandableContent, isControlled, expandedProp, onExpandedChange])
+
+  const [expandedNestedKeys, setExpandedNestedKeys] = useState<Set<string>>(new Set())
+  const toggleNested = useCallback((pathKey: string) => {
+    setExpandedNestedKeys((prev) => {
+      const next = new Set(prev)
+      if (next.has(pathKey)) next.delete(pathKey)
+      else next.add(pathKey)
+      return next
+    })
+  }, [])
+
+  const defaultEye = useMemo(
+    () => eyeIcon ?? <EyeLine className={eyeClass} />,
+    [eyeIcon]
+  )
+  const defaultArrow = useMemo(
+    () => arrowRightIcon ?? <ArrowRightLine className={arrowClass} />,
+    [arrowRightIcon]
+  )
+
+  const ctxValue: ReasoningStepContextValue = {
+    status,
+    isExpanded,
+    isHovered,
+    setIsHovered,
+    toggleExpanded,
+    effectiveExpanded,
+    effectiveShowIcon,
+    hasExpandableContent,
+    text,
+    description,
+    details,
+    detailsChildren,
+    duration,
+    spread,
+    disableExpandAnimation,
+    detailIndent,
+    expandedNestedKeys,
+    toggleNested,
+    icon,
+    eyeIcon: defaultEye,
+    arrowRightIcon: defaultArrow,
+  }
+
+  return (
+    <ReasoningStepContext.Provider value={ctxValue}>
+      {children}
+    </ReasoningStepContext.Provider>
+  )
+}
+
+ReasoningStepRootProvider.displayName = 'ReasoningStepRoot'