sparkdesign 0.0.1 → 0.1.10

package/registry/chat/chat-input/context.tsx

@@ -0,0 +1,189 @@
+import React, { createContext, useContext, useCallback, useRef, useState } from 'react'
+import type { ReactNode } from 'react'
+import type { ChatInputProps, FolderPermissionConfig, GenerationStatusConfig, FooterLeftModelSwitchConfig } from './types'
+
+export interface ChatInputContextValue {
+  // Portal 主题透传（供 DropdownMenuContent/SubContent 等弹层继承）
+  dataStyle?: string
+  dataTheme?: string
+  // 输入与发送
+  value: string
+  onChange: (value: string) => void
+  onSend?: (value: string) => void
+  disabled: boolean
+  form?: string
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>
+  setTextareaRef: (node: HTMLTextAreaElement | null) => void
+  handleSend: () => void
+  handleKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
+  sendButtonStatus: 'normal' | 'generating'
+  canSend: boolean
+  // 文件夹 / 更多 / 模式切换（默认操作区左侧）
+  hasFolderSelected: boolean
+  setHasFolderSelected: (v: boolean) => void
+  handleFolderSelect: (files: FileList) => void
+  handleFolderClear: () => void
+  folderPermission?: FolderPermissionConfig
+  footerLeftConfig?: FooterLeftModelSwitchConfig
+  showFolderButton: boolean
+  showMoreButton: boolean
+  folderButtonLabel: string
+  onFolderButtonClick?: () => void
+  onFolderClear?: () => void
+  onMoreButtonClick?: () => void
+  addLargeIcon?: ReactNode
+  folderIcon?: ReactNode
+  folderOpenIcon?: ReactNode
+  historyIcon?: ReactNode
+  arrowDownIcon?: ReactNode
+  subMenuArrowIcon?: ReactNode
+  folderFillIcon?: ReactNode
+  closeIcon?: ReactNode
+  // 框外 / 框内显隐（默认布局用）
+  showGenerationStatus?: boolean
+  generationStatus?: GenerationStatusConfig
+  attachments?: { files?: ReactNode; images?: ReactNode } | ReactNode
+  showFooter?: boolean
+}
+
+const ChatInputContext = createContext<ChatInputContextValue | null>(null)
+
+export function useChatInputContext() {
+  const ctx = useContext(ChatInputContext)
+  if (!ctx) throw new Error('ChatInput compound components must be used within ChatInput.Root')
+  return ctx
+}
+
+export type ChatInputRootProps = ChatInputProps & { children?: ReactNode }
+
+export function ChatInputRootProvider({
+  value: controlledValue,
+  onChange,
+  onSend,
+  placeholder = 'What can I help you with today?',
+  disabled = false,
+  maxRows = 6,
+  form,
+  sendButtonStatus = 'normal',
+  showFooter = true,
+  showFolderButton = true,
+  folderButtonLabel = 'Work in a Folder',
+  onFolderButtonClick,
+  onFolderClear,
+  folderPermission,
+  showMoreButton = true,
+  onMoreButtonClick,
+  footerLeftConfig,
+  showGenerationStatus = false,
+  generationStatus,
+  attachments,
+  addLargeIcon,
+  folderIcon,
+  folderOpenIcon,
+  historyIcon,
+  arrowDownIcon,
+  subMenuArrowIcon,
+  folderFillIcon,
+  closeIcon,
+  dataStyle,
+  dataTheme,
+  className,
+  children,
+  ...rest
+}: ChatInputRootProps) {
+  const [internalValue, setInternalValue] = useState('')
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null)
+  const [hasFolderSelected, setHasFolderSelected] = useState(false)
+  const isControlled = controlledValue !== undefined
+  const value = isControlled ? controlledValue : internalValue
+
+  const setTextareaRef = useCallback((node: HTMLTextAreaElement | null) => {
+    (textareaRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node
+  }, [])
+
+  const handleChange = useCallback(
+    (v: string) => {
+      if (!isControlled) setInternalValue(v)
+      onChange?.(v)
+    },
+    [isControlled, onChange]
+  )
+
+  const handleSend = useCallback(() => {
+    const raw = textareaRef.current?.value ?? value
+    const trimmed = (raw ?? '').trim()
+    if (!trimmed || disabled || !onSend) return
+    onSend(trimmed)
+    if (!isControlled) setInternalValue('')
+    if (textareaRef.current) textareaRef.current.style.height = 'auto'
+  }, [value, disabled, onSend, isControlled])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
+        e.preventDefault()
+        handleSend()
+      }
+      rest.onKeyDown?.(e)
+    },
+    [handleSend, rest]
+  )
+
+  const handleFolderSelect = useCallback(() => setHasFolderSelected(true), [])
+  const handleFolderClear = useCallback(() => {
+    setHasFolderSelected(false)
+    onFolderClear?.()
+  }, [onFolderClear])
+
+  const canSend = value.trim().length > 0 && !disabled
+
+  const ctxValue: ChatInputContextValue = {
+    dataStyle,
+    dataTheme,
+    value,
+    onChange: handleChange,
+    onSend,
+    disabled,
+    form,
+    textareaRef,
+    setTextareaRef,
+    handleSend,
+    handleKeyDown,
+    sendButtonStatus,
+    canSend,
+    hasFolderSelected,
+    setHasFolderSelected,
+    handleFolderSelect,
+    handleFolderClear,
+    folderPermission,
+    footerLeftConfig,
+    showFolderButton,
+    showMoreButton,
+    folderButtonLabel,
+    onFolderButtonClick,
+    onFolderClear,
+    onMoreButtonClick,
+    addLargeIcon,
+    folderIcon,
+    folderOpenIcon,
+    historyIcon,
+    arrowDownIcon,
+    subMenuArrowIcon,
+    folderFillIcon,
+    closeIcon,
+    showGenerationStatus,
+    generationStatus,
+    attachments,
+    showFooter,
+  }
+
+  return (
+    <ChatInputContext.Provider value={ctxValue}>
+      {children}
+    </ChatInputContext.Provider>
+  )
+}
+
+ChatInputRootProvider.displayName = 'ChatInputRootProvider'
+
+export { ChatInputContext }

package/registry/chat/chat-input/folder-permission-dialog.tsx

@@ -0,0 +1,61 @@
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+} from '../../basic/alert-dialog'
+
+export interface FolderPermissionDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  projectName: string
+  onAllowOnce: () => void
+  onAllowAlways: () => void
+}
+
+export function FolderPermissionDialog({
+  open,
+  onOpenChange,
+  projectName,
+  onAllowOnce,
+  onAllowAlways,
+}: FolderPermissionDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className="p-6">
+        <AlertDialogHeader>
+          <AlertDialogTitle className="text-xl leading-xl font-semibold text-text">
+            Allow Qoder Work to access and modify files in &quot;{projectName}&quot;?
+          </AlertDialogTitle>
+          <AlertDialogDescription className="mt-2 text-sm leading-sm text-text-tertiary">
+            This permission applies to all files and subfolders in this directory. Qoder Work may read, update, and
+            permanently delete files here, and may share relevant file contents with connected tools when needed.
+            Only allow access to folders you trust.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="mt-6 flex flex-row justify-end gap-2">
+          <AlertDialogCancel className="h-9 rounded-full px-4">Cancel</AlertDialogCancel>
+          <button
+            type="button"
+            className="inline-flex h-9 items-center justify-center rounded-full px-4 text-sm leading-sm font-medium border border-border bg-bg-base text-text transition-colors hover:bg-fill-tertiary active:bg-fill-secondary"
+            onClick={onAllowAlways}
+          >
+            Always Allow
+          </button>
+          <button
+            type="button"
+            className="inline-flex h-9 items-center justify-center rounded-full px-4 text-sm leading-sm font-medium bg-text text-text-on-primary transition-opacity hover:opacity-90 active:opacity-95"
+            onClick={onAllowOnce}
+          >
+            Allow
+          </button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+
+FolderPermissionDialog.displayName = 'FolderPermissionDialog'

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