sparkdesign 0.0.1 → 0.1.10

package/registry/chat/chat-input/chat-input-model-switcher.tsx

@@ -0,0 +1,131 @@
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '../../basic/dropdown-menu'
+import { ArrowDownSLine, CheckLine } from '../../basic/icons-inline'
+import type { FooterLeftModelSwitchConfig } from './types'
+
+export interface ChatInputModelSwitcherProps {
+  config: FooterLeftModelSwitchConfig
+  disabled: boolean
+  arrowDownIcon?: React.ReactNode
+  dataStyle?: string
+  dataTheme?: string
+}
+
+export function ChatInputModelSwitcher({
+  config,
+  disabled,
+  dataStyle,
+  dataTheme,
+  arrowDownIcon = <ArrowDownSLine className="h-3.5 w-3.5 shrink-0 text-text-secondary" />,
+}: ChatInputModelSwitcherProps) {
+  const currentModeOption = config.modeSwitch.options.find((o) => o.value === config.modeSwitch.value)
+  const modeTriggerIcon = currentModeOption?.icon ?? config.modeSwitch.icon
+
+  return (
+    <div className="flex items-center gap-3 text-sm leading-sm text-text-secondary">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            className="inline-flex items-center gap-1.5 rounded-md bg-fill-secondary px-2.5 py-1.5 text-sm leading-sm text-text hover:bg-fill focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+            disabled={disabled}
+          >
+            {modeTriggerIcon != null && (
+              <span className="flex shrink-0 items-center [&>*]:block [&>*]:leading-none">
+                {modeTriggerIcon}
+              </span>
+            )}
+            <span>{config.modeSwitch.label}</span>
+            {arrowDownIcon}
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" side="top" className="min-w-30" dataStyle={dataStyle} dataTheme={dataTheme}>
+          {config.modeSwitch.options.map((opt) => (
+            <DropdownMenuItem
+              key={opt.value}
+              onClick={() => config.modeSwitch.onChange(opt.value)}
+              className="flex items-center justify-between gap-2"
+            >
+              <span className="flex items-center gap-2">
+                {opt.icon != null && (
+                  <span className="flex shrink-0 [&>*]:block [&>*]:leading-none [&>*]:size-4">
+                    {opt.icon}
+                  </span>
+                )}
+                {opt.label}
+              </span>
+              {config.modeSwitch.value === opt.value && (
+                <CheckLine className="h-4 w-4 shrink-0 text-primary" />
+              )}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            className="inline-flex items-center gap-1 text-text-secondary hover:text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded px-1 py-0.5 disabled:opacity-50"
+            disabled={disabled}
+          >
+            <span>{config.modelSwitch.label}</span>
+            {arrowDownIcon}
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" side="top" className="min-w-25" dataStyle={dataStyle} dataTheme={dataTheme}>
+          {config.modelSwitch.options.map((opt) => (
+            <DropdownMenuItem
+              key={opt.value}
+              onClick={() => config.modelSwitch.onChange(opt.value)}
+              className="flex items-center justify-between gap-2"
+            >
+              {opt.label}
+              {config.modelSwitch.value === opt.value && (
+                <CheckLine className="h-4 w-4 shrink-0 text-primary" />
+              )}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {config.consumptionMultiplier.options != null &&
+      config.consumptionMultiplier.options.length > 0 &&
+      config.consumptionMultiplier.onChange != null ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              className="inline-flex items-center text-text-secondary hover:text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded px-1 py-0.5 disabled:opacity-50"
+              disabled={disabled}
+            >
+              {config.consumptionMultiplier.value}
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" side="top" className="min-w-20" dataStyle={dataStyle} dataTheme={dataTheme}>
+            {config.consumptionMultiplier.options.map((opt) => (
+              <DropdownMenuItem
+                key={opt.value}
+                onClick={() => config.consumptionMultiplier.onChange?.(opt.value)}
+                className="flex items-center justify-between gap-2"
+              >
+                {opt.label}
+                {config.consumptionMultiplier.value === opt.value && (
+                  <CheckLine className="h-4 w-4 shrink-0 text-primary" />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : (
+        <span className="text-text-secondary">{config.consumptionMultiplier.value}</span>
+      )}
+    </div>
+  )
+}
+
+ChatInputModelSwitcher.displayName = 'ChatInputModelSwitcher'

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