sparkdesign 0.0.1 → 0.2.6

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

@@ -0,0 +1,358 @@
+import { useState, useMemo, useCallback, memo, Fragment } from 'react'
+import type { ReactNode } from 'react'
+import { motion } from 'framer-motion'
+import { cn } from '@/lib/utils'
+import { EyeLine, ArrowRightLine } from '../basic/icons-inline'
+
+export type ReasoningStepDetail =
+  | { type: 'action'; action: string; desc?: string; details?: ReasoningStepDetail[] }
+  | {
+      type: 'file'
+      filename: string
+      lines?: string
+      path?: string
+      fileType?: string
+      details?: ReasoningStepDetail[]
+    }
+
+export interface ReasoningStepProps {
+  text: ReactNode
+  description?: string
+  status?: 'completed' | 'in-progress'
+  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
+}
+
+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'
+}
+
+/* 与主文 text-xs 共用 token，图标与文字同尺度、随 data-style 一致缩放 */
+const iconSizeStyle = { width: 'var(--font-size-xs)', height: 'var(--font-size-xs)' }
+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'
+
+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>
+  )
+})
+
+interface DetailRowProps {
+  detail: ReasoningStepDetail
+  depth: number
+  pathKey: string
+  detailIndent: string
+  disableExpandAnimation: boolean
+  expandedNestedKeys: Set<string>
+  onToggleNested: (pathKey: string) => void
+  arrowRightIcon: ReactNode
+}
+
+const DetailRow = memo(function DetailRow({
+  detail,
+  depth,
+  pathKey,
+  detailIndent,
+  disableExpandAnimation,
+  expandedNestedKeys,
+  onToggleNested,
+  arrowRightIcon,
+}: DetailRowProps) {
+  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) => (
+              <DetailRow
+                key={`${pathKey}-${i}`}
+                detail={d}
+                depth={depth + 1}
+                pathKey={`${pathKey}-${i}`}
+                detailIndent={detailIndent}
+                disableExpandAnimation={disableExpandAnimation}
+                expandedNestedKeys={expandedNestedKeys}
+                onToggleNested={onToggleNested}
+                arrowRightIcon={arrowRightIcon}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+export function ReasoningStep({
+  text,
+  description,
+  status = 'completed',
+  icon,
+  showIcon = true,
+  details,
+  children,
+  duration = 2,
+  spread = 2,
+  disableExpandAnimation = false,
+  defaultExpanded,
+  expanded: expandedProp,
+  onExpandedChange,
+  eyeIcon,
+  arrowRightIcon,
+}: ReasoningStepProps) {
+  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 dynamicSpread = useMemo(() => {
+    if (typeof text === 'string') return text.length * spread
+    return 10 * spread
+  }, [text, spread])
+
+  const defaultEye = eyeIcon ?? <EyeLine className={eyeClass} />
+  const defaultArrow = arrowRightIcon ?? <ArrowRightLine className={arrowClass} />
+
+  const getIcon = () => (icon ? icon : defaultEye)
+
+  const renderPrimaryText = () => {
+    if (typeof text !== 'string') return text
+    if (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, ease: 'linear' }}
+        >
+          {text}
+        </motion.span>
+      )
+    }
+    return (
+      <span className="text-xs leading-xs font-normal text-text-tertiary truncate">
+        {text}
+      </span>
+    )
+  }
+
+  const renderDescription = () => {
+    if (!description) return null
+    return (
+      <span className="text-xs leading-xs font-normal text-text-quaternary truncate">
+        {description}
+      </span>
+    )
+  }
+
+  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 hasDetails = details != null && details.length > 0
+  const hasExpandableContent = hasDetails || children != null
+
+  const handleToggle = () => {
+    if (hasExpandableContent) {
+      if (isControlled) onExpandedChange?.(!expandedProp)
+      else setIsExpandedInternal((e) => !e)
+    }
+  }
+
+  return (
+    <div
+      data-reasoning-step
+      className="flex flex-col gap-1 py-0.5"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div
+        className={cn('flex flex-row items-center gap-1.5', hasExpandableContent && 'cursor-pointer')}
+        onClick={handleToggle}
+      >
+        {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()}
+          {description ? renderDescription() : null}
+          {hasExpandableContent && (
+          <div
+            className={cn(
+              'flex items-center justify-center shrink-0 text-text-tertiary transition-opacity duration-200 ease-in-out',
+              effectiveExpanded ? 'opacity-100' : isHovered ? 'opacity-100' : 'opacity-0',
+              effectiveExpanded ? 'rotate-90' : 'rotate-0'
+            )}
+            style={iconSizeStyle}
+          >
+            {defaultArrow}
+          </div>
+          )}
+        </div>
+      </div>
+
+      {hasExpandableContent && (
+        <div
+          className={cn(
+            'grid transition-[grid-template-rows,opacity] duration-200 ease-out',
+            effectiveExpanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
+          )}
+        >
+          <div className="overflow-hidden">
+            {hasDetails ? (
+              <div className="flex flex-col">
+                {details?.map((d, i) => (
+                  <DetailRow
+                    key={String(i)}
+                    detail={d}
+                    depth={0}
+                    pathKey={String(i)}
+                    detailIndent={detailIndent}
+                    disableExpandAnimation={disableExpandAnimation}
+                    expandedNestedKeys={expandedNestedKeys}
+                    onToggleNested={toggleNested}
+                    arrowRightIcon={defaultArrow}
+                  />
+                ))}
+              </div>
+            ) : (
+              children
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+ReasoningStep.displayName = 'ReasoningStep'

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

@@ -0,0 +1,38 @@
+import { forwardRef } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+export interface RequestProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  children: ReactNode
+  maxWidth?: string | number
+}
+
+export const Request = forwardRef<HTMLDivElement, RequestProps>(
+  ({ children, className, maxWidth = '752px', ...props }, ref) => {
+    const containerStyles = cn(
+      'w-full',
+      'bg-sage-bg',
+      'rounded-lg',
+      'p-3',
+      'text-sm leading-sm',
+      'font-normal',
+      'text-text',
+      className
+    )
+
+    return (
+      <div
+        ref={ref}
+        className={containerStyles}
+        style={{
+          maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+Request.displayName = 'Request'