sparkdesign 0.0.1 → 0.2.6

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

@@ -0,0 +1,67 @@
+import { forwardRef, useCallback, useRef } from 'react'
+import { useAutoResizeTextarea } from './useAutoResizeTextarea'
+
+export interface ChatInputTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange'> {
+  value: string
+  onChange?: (value: string) => void
+  placeholder?: string
+  disabled?: boolean
+  maxRows?: number
+  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
+}
+
+export const ChatInputTextarea = forwardRef<HTMLTextAreaElement, ChatInputTextareaProps>(
+  (
+    {
+      value,
+      onChange,
+      placeholder = 'What can I help you with today?',
+      disabled = false,
+      maxRows = 6,
+      onKeyDown,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const innerRef = useRef<HTMLTextAreaElement>(null)
+    useAutoResizeTextarea(innerRef, value, maxRows)
+
+    const setRef = useCallback(
+      (node: HTMLTextAreaElement | null) => {
+        (innerRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node
+        if (typeof ref === 'function') ref(node)
+        else if (ref) (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node
+      },
+      [ref]
+    )
+
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLTextAreaElement>) => onChange?.(e.target.value),
+      [onChange]
+    )
+
+    const textareaNoFocusStyle = { outline: 'none', border: 'none', boxShadow: 'none' } as const
+    const textareaStyles =
+      'w-full resize-none border-none bg-transparent text-sm leading-sm font-normal placeholder:text-text-tertiary overflow-y-auto scrollbar-auto outline-none shadow-none focus:outline-none focus:ring-0 focus:shadow-none focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-none [&:focus-visible]:outline-none [&:focus-visible]:ring-0 [&:focus-visible]:ring-offset-0 [&:focus-visible]:shadow-none ' +
+      (value?.trim() ? 'text-text' : 'text-text-quaternary')
+
+    return (
+      <textarea
+        ref={setRef}
+        value={value}
+        onChange={handleChange}
+        onKeyDown={onKeyDown}
+        placeholder={placeholder}
+        disabled={disabled}
+        rows={1}
+        className={textareaStyles}
+        {...props}
+        style={{ ...(style ?? {}), ...textareaNoFocusStyle }}
+      />
+    )
+  }
+)
+
+ChatInputTextarea.displayName = 'ChatInputTextarea'

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

@@ -0,0 +1,334 @@
+import React, { forwardRef, useCallback } from 'react'
+import type { ReactNode } from 'react'
+import { cva } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import { SendButton } from '../send-button'
+import { IconButton } from '../../basic/icon-button'
+import { MoreLine } from '../../basic/icons-inline'
+import { GenerationStatusBar } from '../generation-status-bar'
+import { ChatInputTextarea } from './chat-input-textarea'
+import { ChatInputFolderSelector } from './chat-input-folder-selector'
+import { ChatInputModelSwitcher } from './chat-input-model-switcher'
+import { useChatInputContext } from './context'
+
+const chatInputContainerVariants = cva(
+  [
+    'flex flex-col w-full bg-bg-base border border-primary-border rounded-xl transition-all duration-200',
+    /* 参考 Claude 输入框：2 级阴影默认，4 级 focus，使用本项目 1～4 级 shadow token */
+    'shadow-[0_0.25rem_1.25rem_var(--color-shadow-secondary)]',
+    'hover:shadow-[0_0.25rem_1.25rem_var(--color-shadow-secondary)]',
+    'focus-within:shadow-[0_0.25rem_1.25rem_var(--color-shadow-quaternary)]',
+    'hover:focus-within:shadow-[0_0.25rem_1.25rem_var(--color-shadow-quaternary)]',
+  ].join(' '),
+  {
+    variants: { disabled: { true: 'opacity-50 cursor-not-allowed', false: '' } },
+    defaultVariants: { disabled: false },
+  }
+)
+// Box 使用 rounded-xl (= --radius-xl)
+
+const attachmentRowStyles = 'flex flex-wrap items-center gap-2 px-3 pt-3 pb-2'
+const contentStyles = 'flex flex-1 items-center min-h-6 p-3'
+const footerStyles = 'flex shrink-0 items-center justify-between w-full self-stretch gap-2 p-3'
+
+// ----- 框外 -----
+// Above 高度 = 主题下 md 按钮高度（h-9），文字 text-sm；宽度 = Box 宽度 - 2*圆角，居中；无水平 padding
+export interface ChatInputAboveProps {
+  className?: string
+  style?: React.CSSProperties
+  children?: ReactNode
+}
+
+export function ChatInputAbove({ className, style, children }: ChatInputAboveProps) {
+  return (
+    <div
+      className={cn(
+        'flex min-h-9 h-9 w-[calc(100%-2*var(--radius-xl))] mx-auto items-center overflow-hidden rounded-t-xl text-sm leading-sm',
+        className
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  )
+}
+ChatInputAbove.displayName = 'ChatInputAbove'
+
+// ----- 框容器 -----
+export interface ChatInputBoxProps {
+  className?: string
+  children?: ReactNode
+}
+
+export function ChatInputBox({ className, children }: ChatInputBoxProps) {
+  const ctx = useChatInputContext()
+  return (
+    <div
+      className={chatInputContainerVariants({
+        disabled: ctx.disabled,
+        className: cn('relative', className),
+      })}
+    >
+      {children}
+    </div>
+  )
+}
+ChatInputBox.displayName = 'ChatInputBox'
+
+// ----- 框内·第一层 附件区 -----
+export interface ChatInputAttachmentsProps {
+  className?: string
+  children?: ReactNode
+}
+
+export function ChatInputAttachments({ className, children }: ChatInputAttachmentsProps) {
+  if (!children) return null
+  return <div className={cn(attachmentRowStyles, className)}>{children}</div>
+}
+ChatInputAttachments.displayName = 'ChatInputAttachments'
+
+// ----- 框内·第二层 输入区 -----
+export interface ChatInputInputProps extends Omit<React.ComponentProps<typeof ChatInputTextarea>, 'value' | 'onChange' | 'onKeyDown'> {
+  placeholder?: string
+  maxRows?: number
+}
+
+export const ChatInputInput = forwardRef<HTMLTextAreaElement, ChatInputInputProps>(
+  ({ placeholder = 'What can I help you with today?', maxRows = 6, ...props }, ref) => {
+    const ctx = useChatInputContext()
+    const setRef = useCallback(
+      (node: HTMLTextAreaElement | null) => {
+        ctx.setTextareaRef(node)
+        if (typeof ref === 'function') ref(node)
+        else if (ref) (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node
+      },
+      [ctx, ref]
+    )
+    return (
+      <div className={contentStyles}>
+        <ChatInputTextarea
+          ref={setRef}
+          value={ctx.value}
+          onChange={ctx.onChange}
+          onKeyDown={ctx.handleKeyDown}
+          placeholder={placeholder}
+          disabled={ctx.disabled}
+          maxRows={maxRows}
+          {...props}
+        />
+      </div>
+    )
+  }
+)
+ChatInputInput.displayName = 'ChatInputInput'
+
+// ----- 框内·第三层 操作区 -----
+export interface ChatInputActionsProps {
+  className?: string
+  children?: ReactNode
+}
+
+export function ChatInputActions({ className, children }: ChatInputActionsProps) {
+  return <div className={cn(footerStyles, className)}>{children}</div>
+}
+ChatInputActions.displayName = 'ChatInputActions'
+
+export interface ChatInputActionsLeftProps {
+  className?: string
+  children?: ReactNode
+}
+
+export function ChatInputActionsLeft({ className, children }: ChatInputActionsLeftProps) {
+  return <div className={cn('flex items-center gap-2', className)}>{children}</div>
+}
+ChatInputActionsLeft.displayName = 'ChatInputActionsLeft'
+
+export interface ChatInputActionsRightProps {
+  className?: string
+  children?: ReactNode
+}
+
+export function ChatInputActionsRight({ className, children }: ChatInputActionsRightProps) {
+  return <div className={cn('flex items-center gap-2', className)}>{children}</div>
+}
+ChatInputActionsRight.displayName = 'ChatInputActionsRight'
+
+// ----- 固定·框内右上角放大按钮 -----
+export interface ChatInputExpandButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  children?: ReactNode
+}
+
+export function ChatInputExpandButton({ className, style, ...props }: ChatInputExpandButtonProps) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        'absolute top-2 right-2 z-10 flex h-8 w-8 items-center justify-center rounded-lg text-text-secondary hover:bg-fill-secondary hover:text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50',
+        className
+      )}
+      style={{ ...style }}
+      {...props}
+    />
+  )
+}
+ChatInputExpandButton.displayName = 'ChatInputExpandButton'
+
+// ----- 操作区子组件（从 Context 消费） -----
+export function ChatInputFolderButton() {
+  const ctx = useChatInputContext()
+  if (!ctx.showFolderButton) return null
+  return (
+    <ChatInputFolderSelector
+      disabled={ctx.disabled}
+      folderButtonLabel={ctx.folderButtonLabel}
+      folderPermission={ctx.folderPermission}
+      onFolderButtonClick={ctx.onFolderButtonClick}
+      onFolderClear={ctx.handleFolderClear}
+      onFolderSelect={ctx.handleFolderSelect}
+      hasFolderSelected={ctx.hasFolderSelected}
+      dataStyle={ctx.dataStyle}
+      dataTheme={ctx.dataTheme}
+      folderIcon={ctx.folderIcon}
+      folderOpenIcon={ctx.folderOpenIcon}
+      historyIcon={ctx.historyIcon}
+      subMenuArrowIcon={ctx.subMenuArrowIcon}
+      folderFillIcon={ctx.folderFillIcon}
+      closeIcon={ctx.closeIcon}
+    />
+  )
+}
+ChatInputFolderButton.displayName = 'ChatInputFolderButton'
+
+export function ChatInputMoreButton() {
+  const ctx = useChatInputContext()
+  if (!ctx.showMoreButton) return null
+  return (
+    <IconButton
+      variant="ghost"
+      icon={ctx.addLargeIcon ?? <MoreLine className="h-5 w-5" />}
+      onClick={ctx.onMoreButtonClick}
+      disabled={ctx.disabled}
+    />
+  )
+}
+ChatInputMoreButton.displayName = 'ChatInputMoreButton'
+
+// 使用 chat 内共用的 SendButton，仅从 Context 注入 disabled/status/onClick|form
+export function ChatInputSendButton() {
+  const ctx = useChatInputContext()
+  return (
+    <SendButton
+      disabled={!ctx.canSend || ctx.disabled}
+      status={ctx.sendButtonStatus}
+      {...(ctx.form ? { type: 'submit' as const, form: ctx.form } : { onClick: ctx.handleSend })}
+    />
+  )
+}
+ChatInputSendButton.displayName = 'ChatInputSendButton'
+
+// 左侧操作区默认内容：有 footerLeftConfig 时渲染模式/模型切换，否则渲染 FolderButton + MoreButton
+export function ChatInputFooterLeft() {
+  const ctx = useChatInputContext()
+  if (ctx.footerLeftConfig) {
+    return (
+      <ChatInputModelSwitcher
+        config={ctx.footerLeftConfig}
+        disabled={ctx.disabled}
+        arrowDownIcon={ctx.arrowDownIcon}
+        dataStyle={ctx.dataStyle}
+        dataTheme={ctx.dataTheme}
+      />
+    )
+  }
+  return (
+    <>
+      <ChatInputFolderButton />
+      <ChatInputMoreButton />
+    </>
+  )
+}
+ChatInputFooterLeft.displayName = 'ChatInputFooterLeft'
+
+// ----- 默认布局（ChatInput 便捷导出使用） -----
+export interface ChatInputDefaultLayoutProps {
+  className?: string
+  hasAbove?: boolean
+  hasAttachments?: boolean
+  hasFooter?: boolean
+  aboveOverlap?: boolean
+}
+
+export const ChatInputDefaultLayout = forwardRef<HTMLTextAreaElement, ChatInputDefaultLayoutProps>(
+  function ChatInputDefaultLayout(
+    { className, hasAbove = false, hasAttachments = false, hasFooter = true, aboveOverlap = true },
+    ref
+  ) {
+    const ctx = useChatInputContext()
+
+    const renderAttachments = () => {
+    if (!hasAttachments || ctx.attachments == null || ctx.attachments === false) return null
+    const att = ctx.attachments
+    if (typeof att === 'object' && !React.isValidElement(att) && ('files' in att || 'images' in att)) {
+      return (
+        <>
+          {(att as { files?: ReactNode }).files && (
+            <div className={attachmentRowStyles}>{(att as { files?: ReactNode }).files}</div>
+          )}
+          {(att as { images?: ReactNode }).images && (
+            <div className={attachmentRowStyles}>{(att as { images?: ReactNode }).images}</div>
+          )}
+        </>
+      )
+    }
+    return <div className={attachmentRowStyles}>{att as ReactNode}</div>
+  }
+
+  const renderFooterLeft = () => <ChatInputFooterLeft />
+
+  const boxContent = (
+    <ChatInputBox className={cn(!hasFooter && !hasAttachments && 'min-h-14')}>
+      {renderAttachments()}
+      <ChatInputInput ref={ref} />
+      {/* 始终保留操作区右侧 SendButton：hasFooter 时显示完整 footer，否则仅显示右侧发送按钮（Minimal 模式） */}
+      <ChatInputActions>
+        {hasFooter ? (
+          <>
+            <ChatInputActionsLeft>{renderFooterLeft()}</ChatInputActionsLeft>
+            <div className="flex-1 h-5" />
+            <ChatInputActionsRight>
+              <ChatInputSendButton />
+            </ChatInputActionsRight>
+          </>
+        ) : (
+          <>
+            <div className="flex-1 h-5" />
+            <ChatInputActionsRight>
+              <ChatInputSendButton />
+            </ChatInputActionsRight>
+          </>
+        )}
+      </ChatInputActions>
+    </ChatInputBox>
+  )
+
+  if (hasAbove && ctx.showGenerationStatus && ctx.generationStatus) {
+    return (
+      <div className={cn('flex flex-col w-full', className)}>
+        <ChatInputAbove>
+          <GenerationStatusBar
+            status={typeof ctx.generationStatus?.content === 'string' ? ctx.generationStatus.content : undefined}
+            icon={ctx.generationStatus?.icon}
+            time={ctx.generationStatus?.time}
+          >
+            {ctx.generationStatus?.content}
+          </GenerationStatusBar>
+        </ChatInputAbove>
+        {boxContent}
+      </div>
+    )
+  }
+
+  return <div className={className}>{boxContent}</div>
+  }
+)
+ChatInputDefaultLayout.displayName = 'ChatInputDefaultLayout'

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