sparkdesign 0.0.1 → 0.2.6

package/cli/registry/chat/chat-input/index.tsx

@@ -0,0 +1,123 @@
+import React, { forwardRef } from 'react'
+import type { ReactNode } from 'react'
+import { ChatInputRootProvider } from './context'
+import {
+  ChatInputAbove,
+  ChatInputBox,
+  ChatInputAttachments,
+  ChatInputInput,
+  ChatInputActions,
+  ChatInputActionsLeft,
+  ChatInputActionsRight,
+  ChatInputExpandButton,
+  ChatInputFolderButton,
+  ChatInputMoreButton,
+  ChatInputSendButton,
+  ChatInputFooterLeft,
+  ChatInputDefaultLayout,
+} from './compound'
+import type { ChatInputProps } from './types'
+
+export type {
+  ChatInputProps,
+  FolderPermissionConfig,
+  GenerationStatusConfig,
+  FooterLeftModelSwitchConfig,
+  FooterLeftModelSwitchItem,
+} from './types'
+
+function hasAttachmentsValue(attachments: ChatInputProps['attachments']): boolean {
+  if (attachments == null || attachments === false) return false
+  if (typeof attachments === 'object' && !React.isValidElement(attachments)) {
+    return !!(attachments as { files?: ReactNode }).files || !!(attachments as { images?: ReactNode }).images
+  }
+  return true
+}
+
+export interface ChatInputCompound {
+  Root: typeof ChatInputRootProvider
+  Above: typeof ChatInputAbove
+  Box: typeof ChatInputBox
+  Attachments: typeof ChatInputAttachments
+  Input: typeof ChatInputInput
+  Actions: typeof ChatInputActions
+  ActionsLeft: typeof ChatInputActionsLeft
+  ActionsRight: typeof ChatInputActionsRight
+  ExpandButton: typeof ChatInputExpandButton
+  FolderButton: typeof ChatInputFolderButton
+  MoreButton: typeof ChatInputMoreButton
+  SendButton: typeof ChatInputSendButton
+  FooterLeft: typeof ChatInputFooterLeft
+}
+
+const ChatInputBase = forwardRef<HTMLTextAreaElement, ChatInputProps>(function ChatInput(props, ref) {
+  // ChatInput = 复合组件的默认组合（Root + DefaultLayout），便捷导出；主 API 为复合组件
+  const hasAttachments = hasAttachmentsValue(props.attachments)
+  return (
+    <ChatInputRootProvider {...props}>
+      <ChatInputDefaultLayout
+        ref={ref}
+        className={props.className}
+        hasAbove={props.showGenerationStatus}
+        hasAttachments={hasAttachments}
+        hasFooter={props.showFooter}
+        aboveOverlap
+      />
+    </ChatInputRootProvider>
+  )
+})
+
+// 挂载复合组件后断言为带命名空间的类型，便于赋值时通过类型检查
+type ChatInputBaseType = React.ForwardRefExoticComponent<
+  ChatInputProps & React.RefAttributes<HTMLTextAreaElement>
+> &
+  Partial<ChatInputCompound>
+
+const ChatInputBaseWithSlots = ChatInputBase as ChatInputBaseType
+ChatInputBaseWithSlots.displayName = 'ChatInput'
+ChatInputBaseWithSlots.Root = ChatInputRootProvider
+ChatInputBaseWithSlots.Above = ChatInputAbove
+ChatInputBaseWithSlots.Box = ChatInputBox
+ChatInputBaseWithSlots.Attachments = ChatInputAttachments
+ChatInputBaseWithSlots.Input = ChatInputInput
+ChatInputBaseWithSlots.Actions = ChatInputActions
+ChatInputBaseWithSlots.ActionsLeft = ChatInputActionsLeft
+ChatInputBaseWithSlots.ActionsRight = ChatInputActionsRight
+ChatInputBaseWithSlots.ExpandButton = ChatInputExpandButton
+ChatInputBaseWithSlots.FolderButton = ChatInputFolderButton
+ChatInputBaseWithSlots.MoreButton = ChatInputMoreButton
+ChatInputBaseWithSlots.SendButton = ChatInputSendButton
+ChatInputBaseWithSlots.FooterLeft = ChatInputFooterLeft
+
+export const ChatInput = ChatInputBaseWithSlots as React.ForwardRefExoticComponent<
+  ChatInputProps & React.RefAttributes<HTMLTextAreaElement>
+> &
+  ChatInputCompound
+
+// 扁平命名导出（Root、Above、Box、Attachments、Input、Actions 等）
+export { ChatInputRootProvider as ChatInputRoot } from './context'
+export {
+  ChatInputAbove,
+  ChatInputBox,
+  ChatInputAttachments,
+  ChatInputInput,
+  ChatInputActions,
+  ChatInputActionsLeft,
+  ChatInputActionsRight,
+  ChatInputExpandButton,
+  ChatInputFolderButton,
+  ChatInputMoreButton,
+  ChatInputSendButton,
+  ChatInputFooterLeft,
+} from './compound'
+export type { ChatInputRootProps } from './context'
+export type {
+  ChatInputAboveProps,
+  ChatInputBoxProps,
+  ChatInputAttachmentsProps,
+  ChatInputInputProps,
+  ChatInputActionsProps,
+  ChatInputActionsLeftProps,
+  ChatInputActionsRightProps,
+  ChatInputExpandButtonProps,
+} from './compound'

package/cli/registry/chat/chat-input/types.ts

@@ -0,0 +1,77 @@
+import type { TextareaHTMLAttributes, ReactNode } from 'react'
+
+export type InputPropsWithWebkitDirectory = React.InputHTMLAttributes<HTMLInputElement> & {
+  webkitdirectory?: string
+}
+
+export interface FolderPermissionConfig {
+  enable?: boolean
+  projectName?: string
+}
+
+export interface GenerationStatusConfig {
+  content?: ReactNode
+  icon?: ReactNode
+  time?: string
+}
+
+export interface FooterLeftModelSwitchItem {
+  value: string
+  label: string
+  icon?: ReactNode
+}
+
+export interface FooterLeftModelSwitchConfig {
+  modeSwitch: {
+    icon?: ReactNode
+    label: string
+    value: string
+    options: FooterLeftModelSwitchItem[]
+    onChange: (value: string) => void
+  }
+  modelSwitch: {
+    label: string
+    value: string
+    options: FooterLeftModelSwitchItem[]
+    onChange: (value: string) => void
+  }
+  consumptionMultiplier: {
+    value: string
+    options?: FooterLeftModelSwitchItem[]
+    onChange?: (value: string) => void
+  }
+}
+
+export interface ChatInputProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'value'> {
+  value?: string
+  onChange?: (value: string) => void
+  onSend?: (value: string) => void
+  placeholder?: string
+  disabled?: boolean
+  maxRows?: number
+  form?: string
+  attachments?: { files?: ReactNode; images?: ReactNode } | ReactNode
+  showFooter?: boolean
+  showFolderButton?: boolean
+  folderButtonLabel?: string
+  onFolderButtonClick?: () => void
+  onFolderClear?: () => void
+  folderPermission?: FolderPermissionConfig
+  showMoreButton?: boolean
+  onMoreButtonClick?: () => void
+  footerLeftConfig?: FooterLeftModelSwitchConfig
+  sendButtonStatus?: 'normal' | 'generating'
+  showGenerationStatus?: boolean
+  generationStatus?: GenerationStatusConfig
+  addLargeIcon?: ReactNode
+  folderIcon?: ReactNode
+  folderOpenIcon?: ReactNode
+  historyIcon?: ReactNode
+  arrowDownIcon?: ReactNode
+  subMenuArrowIcon?: ReactNode
+  folderFillIcon?: ReactNode
+  closeIcon?: ReactNode
+  /** 供 Portal 浮层继承（Showcase 预览区等场景），不传则由 dropdown-menu 使用 getThemeFromDocument() 兜底 */
+  dataStyle?: string
+  dataTheme?: string
+}

package/cli/registry/chat/chat-input/useAutoResizeTextarea.ts

@@ -0,0 +1,20 @@
+import { useEffect, type RefObject } from 'react'
+
+export function useAutoResizeTextarea(
+  textareaRef: RefObject<HTMLTextAreaElement | null>,
+  value: string,
+  maxRows: number
+): void {
+  useEffect(() => {
+    const textarea = textareaRef.current
+    if (!textarea) return
+    textarea.style.height = 'auto'
+    const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight) || 24
+    const maxHeight = lineHeight * maxRows
+    if (textarea.scrollHeight <= maxHeight) {
+      textarea.style.height = `${textarea.scrollHeight}px`
+    } else {
+      textarea.style.height = `${maxHeight}px`
+    }
+  }, [textareaRef, value, maxRows])
+}

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

@@ -0,0 +1,151 @@
+import { useMemo, type ReactNode } from 'react'
+import { motion } from 'framer-motion'
+import { cn } from '@/lib/utils'
+import { Highlight, Prism } from 'prism-react-renderer'
+import { CollapsibleCard } from '../basic/collapsible-card'
+import { FileLine, LoaderLine } from '../basic/icons-inline'
+import { getFileIconColorClass } from '../lib/file-icon-maps'
+
+const ICON_CLASS = 'w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0'
+
+/** Prism 主题：使用设计令牌，随 data-theme 生效 */
+const codeBlockTheme = {
+  plain: { color: 'var(--color-text)' },
+  styles: [
+    { types: ['comment', 'prolog', 'cdata'], style: { color: 'var(--color-text-tertiary)' } },
+    { types: ['keyword', 'atrule'], style: { color: 'var(--color-blue)' } },
+    { types: ['string', 'attr-value', 'inserted'], style: { color: 'var(--color-success)' } },
+    { types: ['number', 'constant', 'boolean'], style: { color: 'var(--color-success)' } },
+    { types: ['function', 'function-variable'], style: { color: 'var(--color-purple)' } },
+    { types: ['punctuation', 'operator', 'deleted'], style: { color: 'var(--color-text-tertiary)' } },
+    { types: ['property', 'tag', 'selector'], style: { color: 'var(--color-pink)' } },
+    { types: ['regex', 'important', 'variable'], style: { color: 'var(--color-text)' } },
+  ],
+}
+
+const LANG_EXT: Record<string, string> = {
+  javascript: 'js', typescript: 'ts', jsx: 'jsx', tsx: 'tsx',
+  python: 'py', java: 'java', go: 'go', rust: 'rs', html: 'html', css: 'css',
+  json: 'json', yaml: 'yml', markdown: 'md', shell: 'sh', bash: 'sh',
+}
+
+export type CodeBlockDiffType = 'add' | 'remove'
+
+export interface CodeBlockPartProps {
+  language?: string
+  code?: string
+  filename?: string
+  diffType?: CodeBlockDiffType | null
+  diffLines?: number | null
+  isGenerating?: boolean
+  defaultExpanded?: boolean
+  className?: string
+  headerIcon?: ReactNode
+  getFileIcon?: (fileType?: string, filename?: string) => ReactNode
+}
+
+function getDisplayFilename(filename?: string, language?: string): string {
+  if (filename && filename.trim()) return filename
+  const lang = (language ?? 'text').toLowerCase()
+  const ext = LANG_EXT[lang] ?? 'txt'
+  return `${lang}.${ext}`
+}
+
+export function CodeBlockPart({
+  language = 'javascript',
+  code = '',
+  filename,
+  diffType = null,
+  diffLines = null,
+  isGenerating = false,
+  defaultExpanded = true,
+  className,
+  headerIcon,
+  getFileIcon,
+}: CodeBlockPartProps) {
+  const displayName = useMemo(
+    () => getDisplayFilename(filename, language),
+    [filename, language]
+  )
+
+  const calculatedDiffLines = useMemo(() => {
+    if (diffType && code) {
+      const lines = code.split('\n')
+      return lines.length
+    }
+    return diffLines ?? null
+  }, [code, diffType, diffLines])
+
+  const fileType = language?.toLowerCase()
+  const defaultHeaderIcon = isGenerating ? (
+    <motion.div
+      animate={{ rotate: 360 }}
+      transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
+    >
+      <LoaderLine className={cn(ICON_CLASS, 'text-text-secondary')} />
+    </motion.div>
+  ) : getFileIcon ? (
+    getFileIcon(fileType, displayName)
+  ) : (
+    <span className={cn(getFileIconColorClass(fileType, displayName))}>
+      <FileLine className={ICON_CLASS} />
+    </span>
+  )
+
+  const headerRight =
+    diffType && calculatedDiffLines != null ? (
+      <span
+        className={cn(
+          'font-normal text-xs leading-xs',
+          diffType === 'add' ? 'text-success' : 'text-error'
+        )}
+      >
+        {diffType === 'add' ? '+' : '-'}{calculatedDiffLines}
+      </span>
+    ) : null
+
+  const contentClass = cn(
+    'overflow-x-auto text-left scrollbar-auto',
+    diffType === 'add' &&
+      'bg-success-bg border-l-[3px] border-l-[var(--color-success-border)] -ml-5 pl-5',
+    diffType === 'remove' &&
+      'bg-error-bg border-l-[3px] border-l-[var(--color-error-border)] -ml-5 pl-5'
+  )
+
+  const lang = (language ?? 'text').toLowerCase()
+
+  return (
+    <CollapsibleCard
+      headerIcon={headerIcon ?? defaultHeaderIcon}
+      headerTitle={<span className="font-normal">{displayName}</span>}
+      headerRight={headerRight}
+      defaultExpanded={defaultExpanded}
+      contentPadding="var(--spacing-2) 0 var(--spacing-2) var(--spacing-5)"
+      titleShimmer={isGenerating}
+      className={className}
+    >
+      <div className={contentClass}>
+        <Highlight theme={codeBlockTheme} code={code} language={lang}>
+          {({ className: preClassName, style, tokens, getLineProps, getTokenProps }) => (
+            <pre
+              className={cn(preClassName, 'm-0 text-left bg-transparent font-mono text-xs font-normal leading-xs whitespace-pre')}
+              style={style}
+            >
+              <code className="text-left block">
+                {tokens.map((line, i) => (
+                  <div key={i} {...getLineProps({ line })}>
+                    {line.map((token, k) => (
+                      <span key={k} {...getTokenProps({ token })} />
+                    ))}
+                  </div>
+                ))}
+              </code>
+            </pre>
+          )}
+        </Highlight>
+      </div>
+    </CollapsibleCard>
+  )
+}
+
+CodeBlockPart.displayName = 'CodeBlockPart'

package/cli/registry/chat/file-attachment.tsx

@@ -0,0 +1,44 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { forwardRef } from 'react'
+import { Tag } from '../basic/tag'
+import { FileLine } from '../basic/icons-inline'
+
+const ICON_CLASS = 'h-3.5 w-3.5 shrink-0 text-current'
+
+export interface FileAttachmentProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+  filename: string
+  iconFilename?: string
+  onRemove?: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void
+  icon?: ReactNode
+  /** 主库可注入 useIcons().getFileIcon；不传则用 registry 内联 FileLine */
+  getFileIcon?: (filename: string, className?: string) => ReactNode
+}
+
+export const FileAttachment = forwardRef<HTMLSpanElement, FileAttachmentProps>(
+  ({ filename, iconFilename, onRemove, icon, getFileIcon, className, ...props }, ref) => {
+    const lookup = iconFilename ?? filename
+    const resolvedIcon: ReactNode =
+      icon ?? (getFileIcon ? getFileIcon(lookup, ICON_CLASS) : <FileLine className={ICON_CLASS} />)
+
+    const { color: _omitColor, ...restProps } = props
+    return (
+      <Tag
+        ref={ref}
+        appearance="filled"
+        color="mauve"
+        closable={typeof onRemove === 'function'}
+        onClose={onRemove}
+        closeAriaLabel="移除"
+        className={className}
+        {...restProps}
+      >
+        <span className="inline-flex items-center gap-1.5 shrink-0">
+          {resolvedIcon}
+          {filename}
+        </span>
+      </Tag>
+    )
+  }
+)
+
+FileAttachment.displayName = 'FileAttachment'

package/cli/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'