sparkdesign 0.0.1 → 0.1.10

package/registry/chat/file-card.tsx

@@ -0,0 +1,68 @@
+import { forwardRef } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { FileLine } from '../basic/icons-inline'
+
+const ICON_CLASS = 'w-5 h-5 text-text-secondary'
+
+export interface FileCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  filename: string
+  iconFilename?: string
+  size?: string
+  icon?: ReactNode
+  getFileIcon?: (filename: string, className?: string) => ReactNode
+  onClick?: () => void
+}
+
+export const FileCard = forwardRef<HTMLDivElement, FileCardProps>(
+  ({ filename, iconFilename, size, icon, getFileIcon, onClick, className, ...props }, ref) => {
+    const iconLookup = iconFilename ?? filename
+    const resolvedIcon: ReactNode =
+      icon ?? (getFileIcon ? getFileIcon(iconLookup, ICON_CLASS) : <FileLine className={ICON_CLASS} />)
+
+    return (
+      <div
+        ref={ref}
+        role={onClick ? 'button' : undefined}
+        tabIndex={onClick ? 0 : undefined}
+        onClick={onClick}
+        onKeyDown={
+          onClick
+            ? (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                  onClick()
+                }
+              }
+            : undefined
+        }
+        className={cn(
+          'flex flex-row items-center gap-4 w-full max-w-96',
+          'py-5 px-5 rounded-lg',
+          'bg-bg-base border border-border-tertiary',
+          'text-sm leading-sm',
+          'transition-colors cursor-pointer hover:border-border-secondary',
+          className
+        )}
+        {...props}
+      >
+        <div
+          className={cn(
+            'flex items-center justify-center w-10 h-10 shrink-0 rounded-md',
+            'bg-fill-tertiary'
+          )}
+        >
+          {resolvedIcon}
+        </div>
+        <div className="flex flex-row items-center gap-3 min-w-0">
+          <span className="font-medium text-text truncate">{filename}</span>
+          {size != null && size !== '' && (
+            <span className="shrink-0 text-text-tertiary">({size})</span>
+          )}
+        </div>
+      </div>
+    )
+  }
+)
+
+FileCard.displayName = 'FileCard'

package/registry/chat/file-review-part.tsx

@@ -0,0 +1,259 @@
+import { useState, type ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { CollapsibleCard } from '../basic/collapsible-card'
+import { Button } from '../basic/button'
+import { RequestChangesLine, CheckLine, CloseLine } from '../basic/icons-inline'
+
+const ICON_CLASS = 'w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0'
+/** Seti 图标：固定 16px，与 QodeChatPanel 的 w-4 h-4 一致 */
+const SETI_ICON_CLASS =
+  "font-['Seti'] shrink-0 inline-flex items-center justify-center w-4 h-4 text-[16px] leading-[16px]"
+
+// 与 QodeChatPanel FileReviewPart.jsx 内联映射完全一致（qoder-seti.woff）
+const SETI_CHAR_MAP: Record<string, string> = {
+  javascript: '\ue054',
+  typescript: '\ue099',
+  react: '\ue07d',
+  json: '\ue059',
+  html: '\ue048',
+  css: '\ue01d',
+  python: '\ue07b',
+  java: '\ue050',
+  go: '\ue039',
+  rust: '\ue082',
+  php: '\ue070',
+  ruby: '\ue081',
+  vue: '\ue09d',
+  svelte: '\ue090',
+  markdown: '\ue060',
+  yaml: '\ue0a7',
+  xml: '\ue0a5',
+  shell: '\ue089',
+  sass: '\ue084',
+  settings: '\ue019',
+  default: '\ue023',
+}
+const SETI_COLOR_MAP: Record<string, string> = {
+  javascript: '#F8CA3E',
+  typescript: '#1E8DEE',
+  react: '#1E8DEE',
+  json: '#F8CA3E',
+  html: '#1E8DEE',
+  css: '#1E8DEE',
+  python: '#1E8DEE',
+  java: '#E84654',
+  go: '#1E8DEE',
+  rust: '#6A89E6',
+  php: '#AE4EE2',
+  ruby: '#E84654',
+  vue: '#4EBD35',
+  svelte: '#E84654',
+  markdown: '#1E8DEE',
+  yaml: '#AE4EE2',
+  xml: '#F18745',
+  shell: '#4EBD35',
+  sass: '#E84654',
+  settings: '#6A89E6',
+  default: '#6A89E6',
+}
+const FILE_TYPE_MAP: Record<string, string> = {
+  js: 'javascript',
+  jsx: 'react',
+  ts: 'typescript',
+  tsx: 'typescript',
+  json: 'json',
+  html: 'html',
+  css: 'css',
+  scss: 'sass',
+  sass: 'sass',
+  less: 'css',
+  py: 'python',
+  java: 'java',
+  go: 'go',
+  rs: 'rust',
+  php: 'php',
+  rb: 'ruby',
+  vue: 'vue',
+  svelte: 'svelte',
+  md: 'markdown',
+  yml: 'yaml',
+  yaml: 'yaml',
+  xml: 'xml',
+  sh: 'shell',
+  bash: 'shell',
+  zsh: 'shell',
+  config: 'settings',
+  conf: 'settings',
+}
+
+function getSetiIconType(fileType?: string, filename?: string): string {
+  let iconType: string | null = null
+  if (filename && typeof filename === 'string' && filename.trim()) {
+    const lastDotIndex = filename.lastIndexOf('.')
+    if (lastDotIndex > 0 && lastDotIndex < filename.length - 1) {
+      const ext = filename.substring(lastDotIndex + 1).toLowerCase().trim()
+      if (ext && FILE_TYPE_MAP[ext]) iconType = FILE_TYPE_MAP[ext]
+    }
+  }
+  if (!iconType && fileType && typeof fileType === 'string' && fileType.trim()) {
+    const lowerFileType = fileType.toLowerCase().trim()
+    if (FILE_TYPE_MAP[lowerFileType]) iconType = FILE_TYPE_MAP[lowerFileType]
+    else if (SETI_CHAR_MAP[lowerFileType]) iconType = lowerFileType
+  }
+  return iconType || 'default'
+}
+
+function getSetiIcon(fileType?: string, filename?: string): string {
+  const iconType = getSetiIconType(fileType, filename)
+  return SETI_CHAR_MAP[iconType] ?? SETI_CHAR_MAP.default
+}
+
+function getSetiIconColor(fileType?: string, filename?: string): string {
+  const iconType = getSetiIconType(fileType, filename)
+  return SETI_COLOR_MAP[iconType] ?? SETI_COLOR_MAP.default
+}
+
+export interface FileReviewFile {
+  filename: string
+  fileType?: string
+  additions?: number
+  deletions?: number
+}
+
+export interface FileReviewPartProps {
+  files?: FileReviewFile[]
+  defaultExpanded?: boolean
+  className?: string
+  /** 卡片标题区图标，未传则用内联 SVG */
+  headerIcon?: ReactNode
+  /** 接受按钮图标，未传则用内联 SVG */
+  acceptIcon?: ReactNode
+  /** 拒绝按钮图标，未传则用内联 SVG */
+  rejectIcon?: ReactNode
+  /** 按文件类型/文件名渲染图标；未传则用 Seti 字体字符（需加载 qoder-seti.woff） */
+  getFileIcon?: (fileType?: string, filename?: string) => ReactNode
+}
+
+export function FileReviewPart({
+  files = [],
+  defaultExpanded = true,
+  className,
+  headerIcon,
+  acceptIcon,
+  rejectIcon,
+  getFileIcon,
+}: FileReviewPartProps) {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+  const defaultHeaderIcon = <RequestChangesLine className={cn(ICON_CLASS, 'text-text-secondary')} />
+  const actionIconSize = 'w-[var(--font-size-sm)] h-[var(--font-size-sm)]'
+  const defaultAcceptIcon = <CheckLine className={actionIconSize} />
+  const defaultRejectIcon = <CloseLine className={actionIconSize} />
+  const actionBtnClass =
+    'flex items-center justify-center shrink-0 rounded cursor-pointer transition-colors duration-200 text-text-secondary hover:text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-primary'
+
+  return (
+    <CollapsibleCard
+      headerIcon={headerIcon ?? defaultHeaderIcon}
+      headerTitle={
+        <span className="font-normal">
+          {files.length} {files.length === 1 ? 'File' : 'Files'}
+        </span>
+      }
+      headerRight={
+        <div className="flex items-center gap-1.5">
+          <Button variant="ghost" size="sm" onClick={(e) => e.stopPropagation()}>
+            Undo All
+          </Button>
+          <Button variant="ghost" size="sm" onClick={(e) => e.stopPropagation()}>
+            Keep All
+          </Button>
+          <Button variant="secondary" size="sm" onClick={(e) => e.stopPropagation()}>
+            Review
+          </Button>
+        </div>
+      }
+      defaultExpanded={defaultExpanded}
+      contentPadding="var(--spacing-1\.5) var(--spacing-1) var(--spacing-1\.5)"
+      className={className}
+    >
+      <div className="flex flex-col gap-0.5">
+        {files.map((file, index) => {
+          const isHovered = hoveredIndex === index
+          const add = file.additions != null && Number.isFinite(file.additions) ? file.additions : null
+          const del = file.deletions != null && Number.isFinite(file.deletions) ? file.deletions : null
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                'flex items-center gap-1 px-1 py-1 rounded-sm cursor-pointer transition-colors duration-200 relative h-6',
+                isHovered ? 'bg-fill-secondary' : 'bg-transparent'
+              )}
+              onMouseEnter={() => setHoveredIndex(index)}
+              onMouseLeave={() => setHoveredIndex(null)}
+            >
+              {getFileIcon ? (
+                <span className={cn('shrink-0', ICON_CLASS)}>{getFileIcon(file.fileType, file.filename)}</span>
+              ) : (
+                <span
+                  className={cn('shrink-0', SETI_ICON_CLASS)}
+                  style={{ color: getSetiIconColor(file.fileType, file.filename) }}
+                  aria-hidden
+                >
+                  {getSetiIcon(file.fileType, file.filename)}
+                </span>
+              )}
+              <span
+                className={cn(
+                  'flex-1 text-xs font-medium truncate pr-12',
+                  isHovered ? 'text-text' : 'text-text-tertiary'
+                )}
+              >
+                {file.filename}
+              </span>
+              {/* 默认展示 diff 统计，hover 时淡出 */}
+              <div
+                className={cn(
+                  'absolute right-1 flex items-center gap-0.5 text-xs font-medium shrink-0 transition-opacity duration-200',
+                  isHovered ? 'opacity-0 pointer-events-none' : 'opacity-100'
+                )}
+              >
+                {add != null && <span className="text-success">+{add}</span>}
+                {del != null && <span className="text-error">-{del}</span>}
+              </div>
+              {/* Hover 时显示的对号/错号按钮，始终挂载用 opacity 控制显隐；用原生 button 保证图标可见 */}
+              <div
+                className={cn(
+                  'flex items-center gap-0.5 shrink-0 absolute right-1 transition-opacity duration-200',
+                  isHovered ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
+                )}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <button
+                  type="button"
+                  className={cn(actionBtnClass, 'h-6 min-w-6 [&_svg]:w-[var(--font-size-sm)] [&_svg]:h-[var(--font-size-sm)]')}
+                  title="Reject"
+                  aria-label="Reject"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {rejectIcon ?? defaultRejectIcon}
+                </button>
+                <button
+                  type="button"
+                  className={cn(actionBtnClass, 'h-6 min-w-6 [&_svg]:w-[var(--font-size-sm)] [&_svg]:h-[var(--font-size-sm)]')}
+                  title="Accept"
+                  aria-label="Accept"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {acceptIcon ?? defaultAcceptIcon}
+                </button>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </CollapsibleCard>
+  )
+}
+
+FileReviewPart.displayName = 'FileReviewPart'

package/registry/chat/folder-button.tsx

@@ -0,0 +1,169 @@
+import { forwardRef, useState } from 'react'
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import { motion } from 'framer-motion'
+import {
+  FolderLine,
+  FolderFillLine,
+  ArrowRightLine,
+  CloseLine,
+} from '../basic/icons-inline'
+
+const folderButtonVariants = cva(
+  'inline-flex items-center justify-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 group text-sm leading-sm',
+  {
+    variants: {
+      size: {
+        sm: 'h-7 px-2 text-xs leading-xs',
+        md: 'h-9 px-3 text-sm leading-sm',
+        lg: 'h-11 px-4 text-base leading-base',
+      },
+      rounded: {
+        square: 'rounded',
+        pill: 'rounded-full',
+      },
+      selected: {
+        true: 'bg-info-bg text-info',
+        false: 'bg-fill-tertiary text-text hover:bg-fill-secondary',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      rounded: 'square',
+      selected: false,
+    },
+  }
+)
+
+const iconClass = 'w-4 h-4'
+
+export interface FolderButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof folderButtonVariants> {
+  label: string
+  selected?: boolean
+  disabled?: boolean
+  multipleFolders?: boolean
+  onClear?: () => void
+  folderIcon?: ReactNode
+  folderFillIcon?: ReactNode
+  arrowRightIcon?: ReactNode
+  closeIcon?: ReactNode
+}
+
+export const FolderButton = forwardRef<HTMLButtonElement, FolderButtonProps>(
+  (
+    {
+      label,
+      selected = false,
+      disabled = false,
+      multipleFolders = false,
+      onClear,
+      size = 'md',
+      rounded = 'square',
+      className,
+      onMouseEnter: onMouseEnterProp,
+      onMouseLeave: onMouseLeaveProp,
+      folderIcon,
+      folderFillIcon,
+      arrowRightIcon,
+      closeIcon,
+      ...props
+    },
+    ref
+  ) => {
+    const [isHovered, setIsHovered] = useState(false)
+    const showClose = selected && !disabled && !multipleFolders && typeof onClear === 'function'
+
+    const baseStyles = cn(
+      folderButtonVariants({ size, rounded, selected, className }),
+      disabled && 'opacity-50 cursor-not-allowed',
+      !disabled && 'cursor-pointer'
+    )
+
+    const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (showClose) setIsHovered(true)
+      onMouseEnterProp?.(e)
+    }
+    const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (showClose) setIsHovered(false)
+      onMouseLeaveProp?.(e)
+    }
+
+    const defaultFolder = folderIcon ?? <FolderLine className={iconClass} />
+    const defaultFolderFill = folderFillIcon ?? <FolderFillLine className={iconClass} />
+    const defaultArrow = arrowRightIcon ?? <ArrowRightLine className={iconClass} />
+    const defaultClose = closeIcon ?? <CloseLine className={iconClass} />
+
+    const content = (
+      <>
+        <span className="w-4 h-4 flex items-center justify-center flex-shrink-0 relative text-current">
+          {selected ? defaultFolderFill : defaultFolder}
+        </span>
+
+        <span>{label}</span>
+
+        {multipleFolders && (
+          <span className="w-4 h-4 flex items-center justify-center flex-shrink-0">
+            {defaultArrow}
+          </span>
+        )}
+
+        {showClose ? (
+          <motion.span
+            role="button"
+            tabIndex={0}
+            aria-label="清空文件夹选择"
+            className="flex items-center justify-center flex-shrink-0 text-info hover:text-info-hover cursor-pointer overflow-hidden"
+            initial={false}
+            animate={{
+              width: isHovered ? 20 : 0,
+              opacity: isHovered ? 1 : 0,
+              marginLeft: isHovered ? 2 : 0,
+            }}
+            transition={{ duration: 0.2, ease: 'easeOut' }}
+            style={{ pointerEvents: isHovered ? 'auto' : 'none', minWidth: 0 }}
+            onPointerDown={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+            }}
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              onClear()
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                e.stopPropagation()
+                onClear()
+              }
+            }}
+          >
+            <span className="w-4 h-4 flex items-center justify-center flex-shrink-0">
+              {defaultClose}
+            </span>
+          </motion.span>
+        ) : null}
+      </>
+    )
+
+    return (
+      <button
+        ref={ref}
+        className={baseStyles}
+        disabled={disabled}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        {content}
+      </button>
+    )
+  }
+)
+
+FolderButton.displayName = 'FolderButton'
+
+export { folderButtonVariants }

package/registry/chat/generated-images-grid.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode, ReactElement } from 'react'
+import { memo, Children, cloneElement, isValidElement } from 'react'
+import { cn } from '@/lib/utils'
+
+type ImageChildProps = {
+  showOverlay?: boolean
+  overlayText?: string
+}
+
+export interface GeneratedImagesGridProps {
+  children: ReactNode
+  className?: string
+  gridClassName?: string
+  isGenerating?: boolean
+  maxVisibleWhenGenerating?: number
+  formatRemaining?: (remaining: number) => string
+}
+
+export const GeneratedImagesGrid = memo(function GeneratedImagesGrid({
+  children,
+  className = '',
+  gridClassName = '',
+  isGenerating = false,
+  maxVisibleWhenGenerating = 6,
+  formatRemaining = (remaining: number) => `+${remaining}`,
+}: GeneratedImagesGridProps) {
+  const childArray = Children.toArray(children)
+  const totalCount = childArray.length
+
+  const shouldTruncate = isGenerating && totalCount > maxVisibleWhenGenerating
+  const visibleCount = shouldTruncate ? maxVisibleWhenGenerating : totalCount
+  const remainingCount = totalCount - maxVisibleWhenGenerating + 1
+
+  const visibleChildren = childArray.slice(0, visibleCount)
+
+  const processedChildren = visibleChildren.map((child, index) => {
+    const isLastAndNeedOverlay = shouldTruncate && index === visibleCount - 1
+    if (isLastAndNeedOverlay && isValidElement(child)) {
+      return cloneElement(child as ReactElement<ImageChildProps>, {
+        showOverlay: true,
+        overlayText: formatRemaining(remainingCount),
+      })
+    }
+    return child
+  })
+
+  return (
+    <div className={cn('mt-5 mb-2', className)}>
+      <div className={cn('flex flex-wrap gap-3', gridClassName)}>
+        {processedChildren}
+      </div>
+    </div>
+  )
+})
+
+GeneratedImagesGrid.displayName = 'GeneratedImagesGrid'

package/registry/chat/generation-status-bar.tsx

@@ -0,0 +1,72 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+export interface GenerationStatusBarProps {
+  children?: ReactNode
+  status?: string
+  icon?: ReactNode
+  time?: string
+  className?: string
+}
+
+function StatusWithAnimatedDots({ content }: { content: string }) {
+  const baseText = content.replace(/\.+$/, '')
+  return (
+    <span className="text-sm leading-sm font-medium text-primary-active">
+      {baseText}
+      <span className="status-dots-anim" style={{ fontFamily: 'inherit' }}>
+        ...
+      </span>
+    </span>
+  )
+}
+
+export const GenerationStatusBar = ({
+  children,
+  status,
+  icon,
+  time,
+  className = '',
+}: GenerationStatusBarProps) => {
+  const content = status ?? (typeof children === 'string' ? children : null)
+  const hasContent = content != null || children != null
+
+  if (!hasContent && !icon && !time) return null
+
+  const containerStyles = cn(
+    'flex w-full h-9 items-center gap-2 rounded-t-xl bg-primary-bg px-3 text-sm leading-sm',
+    className
+  )
+
+  return (
+    <div className={containerStyles}>
+      <style>{`
+        @keyframes status-dots {
+          0%, 100% { opacity: 0.4; }
+          50% { opacity: 1; }
+        }
+        .status-dots-anim {
+          animation: status-dots 1.2s ease-in-out infinite;
+        }
+      `}</style>
+      {icon && (
+        <span className="flex h-4 w-4 shrink-0 items-center justify-center text-primary-active">
+          {icon}
+        </span>
+      )}
+      {content != null && <StatusWithAnimatedDots content={String(content)} />}
+      {content == null && children != null && (
+        <span className="font-medium text-primary-active">
+          {children}
+        </span>
+      )}
+      {time && (
+        <span className="ml-auto font-medium font-mono text-primary-active">
+          {time}
+        </span>
+      )}
+    </div>
+  )
+}
+
+GenerationStatusBar.displayName = 'GenerationStatusBar'