sparkdesign 0.0.1 → 0.2.6

package/cli/registry/basic/typography.tsx

@@ -0,0 +1,201 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { Scrollbar } from './scrollbar'
+
+export type TypographyH1Props = React.ComponentProps<'h1'>
+function TypographyH1({ className, ...props }: TypographyH1Props) {
+  return (
+    <h1
+      className={cn(
+        'font-sans scroll-m-20 text-4xl font-extrabold tracking-tight text-balance text-text',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyH1.displayName = 'TypographyH1'
+
+export type TypographyH2Props = React.ComponentProps<'h2'>
+function TypographyH2({ className, ...props }: TypographyH2Props) {
+  return (
+    <h2
+      className={cn(
+        'font-sans scroll-m-20 border-b border-border-tertiary pb-2 text-3xl font-semibold tracking-tight first:mt-0 text-text',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyH2.displayName = 'TypographyH2'
+
+export type TypographyH3Props = React.ComponentProps<'h3'>
+function TypographyH3({ className, ...props }: TypographyH3Props) {
+  return (
+    <h3
+      className={cn(
+        'font-sans scroll-m-20 text-2xl font-semibold tracking-tight text-text',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyH3.displayName = 'TypographyH3'
+
+export type TypographyH4Props = React.ComponentProps<'h4'>
+function TypographyH4({ className, ...props }: TypographyH4Props) {
+  return (
+    <h4
+      className={cn(
+        'font-sans scroll-m-20 text-xl font-semibold tracking-tight text-text',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyH4.displayName = 'TypographyH4'
+
+export type TypographyPProps = React.ComponentProps<'p'>
+function TypographyP({ className, ...props }: TypographyPProps) {
+  return (
+    <p
+      className={cn(
+        'font-sans leading-7 text-text [&:not(:first-child)]:mt-6',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyP.displayName = 'TypographyP'
+
+export type TypographyBlockquoteProps = React.ComponentProps<'blockquote'>
+function TypographyBlockquote({ className, ...props }: TypographyBlockquoteProps) {
+  return (
+    <blockquote
+      className={cn(
+        'font-sans mt-6 border-l-2 border-border-tertiary pl-6 italic text-text-secondary',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyBlockquote.displayName = 'TypographyBlockquote'
+
+export type TypographyTableProps = React.ComponentProps<'div'>
+function TypographyTable({ className, children, ..._rest }: TypographyTableProps) {
+  void _rest
+  return (
+    <Scrollbar
+      scrollbarVisibility="auto"
+      className={cn('font-sans my-6 w-full', className)}
+    >
+      {children}
+    </Scrollbar>
+  )
+}
+TypographyTable.displayName = 'TypographyTable'
+
+export type TypographyListProps = React.ComponentProps<'ul'>
+function TypographyList({ className, ...props }: TypographyListProps) {
+  return (
+    <ul
+      className={cn(
+        'font-sans my-6 ml-6 list-disc text-text [&>li]:mt-2',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyList.displayName = 'TypographyList'
+
+export type TypographyInlineCodeProps = React.ComponentProps<'code'>
+function TypographyInlineCode({ className, ...props }: TypographyInlineCodeProps) {
+  return (
+    <code
+      className={cn(
+        'relative rounded bg-fill-secondary px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-text',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyInlineCode.displayName = 'TypographyInlineCode'
+
+export type TypographyLeadProps = React.ComponentProps<'p'>
+function TypographyLead({ className, ...props }: TypographyLeadProps) {
+  return (
+    <p
+      className={cn(
+        'font-sans text-xl text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyLead.displayName = 'TypographyLead'
+
+export type TypographyLargeProps = React.ComponentProps<'div'>
+function TypographyLarge({ className, ...props }: TypographyLargeProps) {
+  return (
+    <div
+      className={cn(
+        'font-sans text-lg font-semibold text-text',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyLarge.displayName = 'TypographyLarge'
+
+export type TypographySmallProps = React.ComponentProps<'small'>
+function TypographySmall({ className, ...props }: TypographySmallProps) {
+  return (
+    <small
+      className={cn(
+        'font-sans text-sm font-medium leading-none text-text',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographySmall.displayName = 'TypographySmall'
+
+export type TypographyMutedProps = React.ComponentProps<'p'>
+function TypographyMuted({ className, ...props }: TypographyMutedProps) {
+  return (
+    <p
+      className={cn(
+        'font-sans text-sm text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyMuted.displayName = 'TypographyMuted'
+
+export {
+  TypographyH1,
+  TypographyH2,
+  TypographyH3,
+  TypographyH4,
+  TypographyP,
+  TypographyBlockquote,
+  TypographyTable,
+  TypographyList,
+  TypographyInlineCode,
+  TypographyLead,
+  TypographyLarge,
+  TypographySmall,
+  TypographyMuted,
+}

package/cli/registry/chat/browser-use-part.tsx

@@ -0,0 +1,166 @@
+import { useState, type ReactNode } from 'react'
+import { CollapsibleCard } from '../basic/collapsible-card'
+import { Button } from '../basic/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../basic/select'
+import { GlobalLine, WarningLine, Forbid2Line } from '../basic/icons-inline'
+
+const ICON_CLASS = 'w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0'
+
+export type BrowserUseStatus = 'normal' | 'failed' | 'skipped'
+
+export interface BrowserUsePartProps {
+  description?: string
+  content?: string
+  status?: BrowserUseStatus
+  onRun?: () => void
+  onSkip?: () => void
+  onViewDetail?: () => void
+  onAskEveryTimeChange?: (value: string) => void
+  className?: string
+  /** 供 Select 下拉浮层继承布局风格（如 dense），不传则从 document 读取 */
+  dataStyle?: string
+  /** 供 Select 下拉浮层继承颜色主题，不传则从 document 读取 */
+  dataTheme?: string
+  normalIcon?: ReactNode
+  failedIcon?: ReactNode
+  skippedIcon?: ReactNode
+}
+
+const defaultNormalIcon = <GlobalLine className={`${ICON_CLASS} text-text-secondary`} />
+const defaultFailedIcon = <WarningLine className={`${ICON_CLASS} text-warning`} />
+const defaultSkippedIcon = <Forbid2Line className={`${ICON_CLASS} text-text-secondary`} />
+
+function BrowserFooter({
+  askValue,
+  onAskChange,
+  onSkip,
+  onRun,
+  dataStyle,
+  dataTheme,
+}: {
+  askValue: string
+  onAskChange: (value: string) => void
+  onSkip: () => void
+  onRun: () => void
+  dataStyle?: string
+  dataTheme?: string
+}) {
+  return (
+    <div className="flex items-center gap-2 flex-1 min-w-0">
+      <div className="shrink-0 w-fit">
+        <Select value={askValue} onValueChange={onAskChange}>
+          <SelectTrigger
+            className="h-7 w-auto min-w-0 border-0 bg-transparent px-2 py-0 text-xs text-text-tertiary hover:text-text [&>svg]:w-[var(--font-size-sm)] [&>svg]:h-[var(--font-size-sm)]"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent
+            dataStyle={dataStyle}
+            dataTheme={dataTheme}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <SelectItem value="Ask every time">Ask every time</SelectItem>
+            <SelectItem value="Always allow">Always allow</SelectItem>
+            <SelectItem value="Always deny">Always deny</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="flex-1 h-4 border-l border-border-tertiary opacity-10" />
+      <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onSkip() }}>
+        Skip ⌘⌫
+      </Button>
+      <Button variant="secondary" size="sm" onClick={(e) => { e.stopPropagation(); onRun() }}>
+        Run ⌘⏎
+      </Button>
+    </div>
+  )
+}
+
+export function BrowserUsePart({
+  description,
+  content,
+  status = 'normal',
+  onRun,
+  onSkip,
+  onViewDetail,
+  onAskEveryTimeChange,
+  className,
+  dataStyle,
+  dataTheme,
+  normalIcon,
+  failedIcon,
+  skippedIcon,
+}: BrowserUsePartProps) {
+  const [askValue, setAskValue] = useState('Ask every time')
+
+  const handleAskChange = (value: string) => {
+    setAskValue(value)
+    onAskEveryTimeChange?.(value)
+  }
+
+  const headerIcon =
+    status === 'failed'
+      ? (failedIcon ?? defaultFailedIcon)
+      : status === 'skipped'
+        ? (skippedIcon ?? defaultSkippedIcon)
+        : (normalIcon ?? defaultNormalIcon)
+
+  const headerTitle =
+    status === 'failed' ? (
+      <span>Browser Failed</span>
+    ) : status === 'skipped' ? (
+      <span>Browser Skipped</span>
+    ) : (
+      <div className="flex items-center gap-2 flex-1 min-w-0">
+        <span className="shrink-0">Browser</span>
+        {description != null && (
+          <span className="flex-1 min-w-0 truncate text-text-tertiary">{description}</span>
+        )}
+      </div>
+    )
+
+  const headerRight =
+    status === 'failed' ? (
+      <Button variant="text" size="sm" onClick={(e) => { e.stopPropagation(); onViewDetail?.() }}>
+        View Detail
+      </Button>
+    ) : undefined
+
+  const footer =
+    status === 'normal' ? (
+      <BrowserFooter
+        askValue={askValue}
+        onAskChange={handleAskChange}
+        onSkip={() => onSkip?.()}
+        onRun={() => onRun?.()}
+        dataStyle={dataStyle}
+        dataTheme={dataTheme}
+      />
+    ) : undefined
+
+  return (
+    <CollapsibleCard
+      headerIcon={headerIcon}
+      headerTitle={headerTitle}
+      headerRight={headerRight}
+      contentPadding="var(--spacing-1\.5) var(--spacing-2)"
+      defaultExpanded={status === 'normal'}
+      collapsible={status === 'normal'}
+      footer={footer}
+      className={className}
+    >
+      {content != null && content !== '' && (
+        <span className="text-xs leading-xs text-text whitespace-pre-wrap break-words">{content}</span>
+      )}
+    </CollapsibleCard>
+  )
+}
+
+BrowserUsePart.displayName = 'BrowserUsePart'

package/cli/registry/chat/chat-input/chat-input-folder-selector.tsx

@@ -0,0 +1,185 @@
+import { useState, useCallback, useRef } from 'react'
+import { FolderButton } from '../folder-button'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from '../../basic/dropdown-menu'
+import { FolderPermissionDialog } from './folder-permission-dialog'
+import { FolderLine, FolderFillLine, TimeLine } from '../../basic/icons-inline'
+import type { FolderPermissionConfig, InputPropsWithWebkitDirectory } from './types'
+
+const MOCK_HISTORY_FOLDERS = ['~/Projects/qoder-work-ui', '~/Documents/workspace', '~/Desktop/demo', '~/code/my-app']
+
+const iconClass = 'mr-2 w-4 h-4 shrink-0'
+
+export interface ChatInputFolderSelectorProps {
+  disabled: boolean
+  folderButtonLabel: string
+  folderPermission?: FolderPermissionConfig
+  onFolderButtonClick?: () => void
+  onFolderClear?: () => void
+  onFolderSelect: (files: FileList) => void
+  hasFolderSelected: boolean
+  dataStyle?: string
+  dataTheme?: string
+  folderIcon?: React.ReactNode
+  folderOpenIcon?: React.ReactNode
+  historyIcon?: React.ReactNode
+  subMenuArrowIcon?: React.ReactNode
+  folderFillIcon?: React.ReactNode
+  closeIcon?: React.ReactNode
+}
+
+export function ChatInputFolderSelector({
+  disabled,
+  folderButtonLabel,
+  folderPermission,
+  onFolderButtonClick,
+  onFolderClear,
+  onFolderSelect,
+  hasFolderSelected,
+  dataStyle,
+  dataTheme,
+  folderIcon = <FolderLine className={iconClass} />,
+  folderOpenIcon = <FolderFillLine className={iconClass} />,
+  historyIcon = <TimeLine className={iconClass} />,
+  subMenuArrowIcon,
+  folderFillIcon,
+  closeIcon,
+}: ChatInputFolderSelectorProps) {
+  const enableFolderPermissionDialog = folderPermission?.enable ?? false
+  const folderPermissionProjectName = folderPermission?.projectName ?? '04_代码'
+  const [folderPermissionOpen, setFolderPermissionOpen] = useState(false)
+  const [folderPermissionAlwaysAllow, setFolderPermissionAlwaysAllow] = useState(false)
+  const [folderMenuOpen, setFolderMenuOpen] = useState(false)
+  const folderInputRef = useRef<HTMLInputElement>(null)
+
+  const handleFolderButtonClick = onFolderButtonClick ?? (() => {})
+
+  const openFolderPicker = () => {
+    folderInputRef.current?.click()
+  }
+
+  const handleFolderClear = () => {
+    if (folderInputRef.current) folderInputRef.current.value = ''
+    onFolderClear?.()
+  }
+
+  const requestFolderPermission = useCallback((mode: 'once' | 'always') => {
+    if (mode === 'always') setFolderPermissionAlwaysAllow(true)
+    setFolderPermissionOpen(false)
+    setFolderMenuOpen(true)
+  }, [])
+
+  const handleFolderMenuOpenChange = (next: boolean) => {
+    if (!enableFolderPermissionDialog) {
+      setFolderMenuOpen(next)
+      return
+    }
+    if (!next) {
+      setFolderMenuOpen(false)
+      return
+    }
+    if (folderPermissionAlwaysAllow) {
+      setFolderMenuOpen(true)
+      return
+    }
+    setFolderPermissionOpen(true)
+    setFolderMenuOpen(false)
+  }
+
+  const handleFolderInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files
+    if (files && files.length > 0) onFolderSelect(files)
+  }
+
+  if (onFolderButtonClick) {
+    return (
+      <FolderButton
+        label={folderButtonLabel}
+        onClick={handleFolderButtonClick}
+        disabled={disabled}
+        folderIcon={folderIcon}
+        folderFillIcon={folderFillIcon}
+      />
+    )
+  }
+
+  return (
+    <>
+      <DropdownMenu open={folderMenuOpen} onOpenChange={handleFolderMenuOpenChange}>
+        <DropdownMenuTrigger asChild>
+          <FolderButton
+            label={folderButtonLabel}
+            disabled={disabled}
+            selected={hasFolderSelected}
+            onClear={handleFolderClear}
+            folderIcon={folderIcon}
+            folderFillIcon={folderFillIcon}
+            closeIcon={closeIcon}
+            className="focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0"
+          />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="start"
+          side="top"
+          className="min-w-50"
+          dataStyle={dataStyle}
+          dataTheme={dataTheme}
+        >
+          <DropdownMenuItem onClick={openFolderPicker}>
+            {folderIcon}
+            Add folder
+          </DropdownMenuItem>
+          {hasFolderSelected && (
+            <DropdownMenuItem onClick={openFolderPicker}>
+              {folderOpenIcon}
+              Replace folder
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger subTriggerIcon={subMenuArrowIcon}>
+              {historyIcon}
+              Recent folders
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent
+              collisionPadding={{ bottom: 24, left: 8 }}
+              dataStyle={dataStyle}
+              dataTheme={dataTheme}
+            >
+              {MOCK_HISTORY_FOLDERS.map((path) => (
+                <DropdownMenuItem key={path} onClick={() => {}}>
+                  {path}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <input
+        ref={folderInputRef}
+        type="file"
+        {...({ webkitdirectory: '' } as InputPropsWithWebkitDirectory)}
+        multiple
+        style={{ display: 'none' }}
+        onChange={handleFolderInputChange}
+      />
+      {enableFolderPermissionDialog && (
+        <FolderPermissionDialog
+          open={folderPermissionOpen}
+          onOpenChange={setFolderPermissionOpen}
+          projectName={folderPermissionProjectName}
+          onAllowOnce={() => requestFolderPermission('once')}
+          onAllowAlways={() => requestFolderPermission('always')}
+        />
+      )}
+    </>
+  )
+}
+
+ChatInputFolderSelector.displayName = 'ChatInputFolderSelector'

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