sparkdesign 0.0.1 → 0.2.5

package/cli/registry/chat/suggestion-part.tsx

@@ -0,0 +1,165 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { Button } from '../basic/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../basic/dropdown-menu'
+import { CloseLine, ArrowDownSLine, WarningLine, SparklingLine } from '../basic/icons-inline'
+import { Scrollbar } from '../basic/scrollbar'
+
+export interface SuggestionPartProps {
+  type?: 'wiki' | 'credits'
+  title?: string
+  description?: string
+  highlightText?: string
+  language?: string
+  rechargeText?: string
+  onClose?: () => void
+  onGenerate?: () => void
+  onRecharge?: () => void
+  onLanguageChange?: (language: string) => void
+  closeIcon?: ReactNode
+  arrowDownSIcon?: ReactNode
+  suggestionIcon?: ReactNode
+  /** 供 Portal 浮层继承（与 ChatInput FolderButton 一致），不传则由 dropdown-menu 使用 getThemeFromDocument() 兜底 */
+  dataStyle?: string
+  dataTheme?: string
+}
+
+const DEFAULT_HIGHLIGHT = 'Repo Wiki'
+const LANGUAGES = ['English', '中文', '日本語', '한국어']
+
+const closeClass = 'h-3.5 w-3.5'
+const arrowClass = 'h-3 w-3'
+const suggestionClass = 'h-4 w-4'
+
+export function SuggestionPart({
+  type = 'wiki',
+  title,
+  description,
+  highlightText = DEFAULT_HIGHLIGHT,
+  language = 'English',
+  rechargeText,
+  onClose,
+  onGenerate,
+  onRecharge,
+  onLanguageChange,
+  closeIcon,
+  arrowDownSIcon,
+  suggestionIcon,
+  dataStyle,
+  dataTheme,
+}: SuggestionPartProps) {
+  const isCreditsType = type === 'credits'
+  const defaultClose = closeIcon ?? <CloseLine className={closeClass} />
+  const defaultArrow = arrowDownSIcon ?? <ArrowDownSLine className={arrowClass} />
+  const defaultSuggestion =
+    suggestionIcon ?? (isCreditsType ? <WarningLine className={suggestionClass} /> : <SparklingLine className={suggestionClass} />)
+
+  const displayTitle =
+    title ?? (isCreditsType ? 'Credits Exhausted' : 'Free Wiki Generation Available')
+
+  const descriptionTemplate = isCreditsType
+    ? 'Your credits have been exhausted. Please recharge to continue using.'
+    : `Generate ${highlightText} for this repository to boost AI agent with structured context.`
+  const displayDescription = description ?? descriptionTemplate
+
+  const renderDescription = (): ReactNode => {
+    if (!displayDescription.includes(highlightText)) {
+      return <span>{displayDescription}</span>
+    }
+    const parts = displayDescription.split(highlightText)
+    const result: ReactNode[] = []
+    for (let i = 0; i < parts.length; i++) {
+      if (parts[i]) {
+        result.push(<span key={`text-${i}`}>{parts[i]}</span>)
+      }
+      if (i < parts.length - 1) {
+        result.push(
+          <span key={`highlight-${i}`} className="text-[var(--color-link)]">
+            {highlightText}
+          </span>
+        )
+      }
+    }
+    return <>{result}</>
+  }
+
+  return (
+    <div className="relative rounded-lg border border-border-tertiary bg-bg-base p-3">
+      {onClose && (
+        <button
+          type="button"
+          onClick={onClose}
+          className="absolute top-3 right-3 flex h-4 w-4 cursor-pointer items-center justify-center text-text-secondary transition-colors duration-200 hover:text-text"
+          aria-label="Close"
+        >
+          {defaultClose}
+        </button>
+      )}
+
+      <div className="mb-1 flex items-center gap-2">
+        <div
+          className={cn(
+            'flex h-4 w-4 shrink-0 items-center justify-center',
+            isCreditsType ? 'text-warning' : 'text-primary'
+          )}
+        >
+          {defaultSuggestion}
+        </div>
+        <h3 className="min-w-0 flex-1 text-base leading-base font-semibold text-text">
+          {displayTitle}
+        </h3>
+      </div>
+
+      <>
+        <Scrollbar
+          scrollbarVisibility="auto"
+          maxHeight={96}
+          className="mb-2 ml-6 text-xs leading-xs text-text-tertiary"
+        >
+          {renderDescription()}
+        </Scrollbar>
+      </>
+
+      <div className="flex items-center justify-end gap-2">
+        {isCreditsType ? (
+          rechargeText && (
+            <Button variant="secondary" onClick={onRecharge}>
+              {rechargeText ?? '前往充值'}
+            </Button>
+          )
+        ) : (
+          <>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="flex items-center gap-1">
+                  <span>{language}</span>
+                  {defaultArrow}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent dataStyle={dataStyle} dataTheme={dataTheme}>
+                {LANGUAGES.map((lang) => (
+                  <DropdownMenuItem
+                    key={lang}
+                    onSelect={() => onLanguageChange?.(lang)}
+                  >
+                    {lang}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <Button variant="secondary" onClick={onGenerate}>
+              Generate
+            </Button>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+SuggestionPart.displayName = 'SuggestionPart'

package/cli/registry/chat/task-part.tsx

@@ -0,0 +1,109 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { CollapsibleCard } from '../basic/collapsible-card'
+import { CatalogLine, CircleLine, CheckboxCircleLine, IndeterminateCircleLine, ArrowRightCircleFillLine } from '../basic/icons-inline'
+
+const ICON_CLASS = 'w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0'
+
+export type TaskStatus = 'completed' | 'uncompleted' | 'skipped' | 'cancelled'
+
+export interface TaskPartTask {
+  id?: string
+  text: string
+  status?: TaskStatus
+}
+
+export interface TaskPartProps {
+  tasks?: TaskPartTask[]
+  title?: string
+  currentTaskId?: string
+  defaultExpanded?: boolean
+  className?: string
+  headerIcon?: ReactNode
+  uncompletedIcon?: ReactNode
+  completedIcon?: ReactNode
+  skippedIcon?: ReactNode
+  loaderIcon?: ReactNode
+}
+
+const defaultHeaderIcon = <CatalogLine className={cn(ICON_CLASS, 'text-text-secondary')} />
+const defaultUncompleted = <CircleLine className={cn(ICON_CLASS, 'text-text-tertiary')} />
+const defaultCompleted = <CheckboxCircleLine className={cn(ICON_CLASS, 'text-text-quaternary')} />
+const defaultSkipped = <IndeterminateCircleLine className={cn(ICON_CLASS, 'text-text-tertiary')} />
+const defaultLoader = <ArrowRightCircleFillLine className={cn(ICON_CLASS, 'text-text')} />
+
+function getStatusIcon(
+  task: TaskPartTask,
+  isCurrent: boolean,
+  icons: {
+    loaderIcon?: ReactNode
+    completedIcon?: ReactNode
+    skippedIcon?: ReactNode
+    uncompletedIcon?: ReactNode
+  }
+): ReactNode {
+  if (isCurrent) return icons.loaderIcon ?? defaultLoader
+  if (task.status === 'completed') return icons.completedIcon ?? defaultCompleted
+  if (task.status === 'skipped' || task.status === 'cancelled') return icons.skippedIcon ?? defaultSkipped
+  return icons.uncompletedIcon ?? defaultUncompleted
+}
+
+export function TaskPart({
+  tasks = [],
+  title = 'To-dos',
+  currentTaskId,
+  defaultExpanded = true,
+  className,
+  headerIcon,
+  uncompletedIcon,
+  completedIcon,
+  skippedIcon,
+  loaderIcon,
+}: TaskPartProps) {
+  return (
+    <CollapsibleCard
+      headerIcon={headerIcon ?? defaultHeaderIcon}
+      headerTitle={<span className="text-left">{title}</span>}
+      defaultExpanded={defaultExpanded}
+      contentPadding="var(--spacing-1\.5) var(--spacing-2)"
+      showExpandAllBar
+      maxHeight={124}
+      className={className}
+    >
+      <div className="flex flex-col gap-2">
+        {tasks.map((task, index) => {
+          const taskId = task.id ?? index
+          const isCurrent = currentTaskId != null && currentTaskId === String(taskId)
+          const statusIcon = getStatusIcon(task, isCurrent, {
+            loaderIcon,
+            completedIcon,
+            skippedIcon,
+            uncompletedIcon,
+          })
+
+          return (
+            <div key={taskId} className="flex flex-row gap-2 items-start">
+              <div className="flex items-center justify-center shrink-0 pt-0.5 [&>svg]:w-[var(--font-size-sm)] [&>svg]:h-[var(--font-size-sm)]">
+                {statusIcon}
+              </div>
+              <span
+                className={cn(
+                  'text-xs leading-xs flex-1 text-left',
+                  isCurrent
+                    ? 'text-text'
+                    : task.status === 'completed'
+                      ? 'text-text-quaternary line-through'
+                      : 'text-text-tertiary'
+                )}
+              >
+                {task.text}
+              </span>
+            </div>
+          )
+        })}
+      </div>
+    </CollapsibleCard>
+  )
+}
+
+TaskPart.displayName = 'TaskPart'

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

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react'
+import { CollapsibleCard } from '../basic/collapsible-card'
+import { IconButton } from '../basic/icon-button'
+import { TerminalBoxLine, ExternalLinkLine } from '../basic/icons-inline'
+
+const ICON_CLASS = 'w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0 text-text-secondary'
+
+export interface TerminalCodeBlockPartProps {
+  command?: string
+  output?: string
+  autoRanCommand?: string
+  className?: string
+  headerIcon?: ReactNode
+  externalLinkIcon?: ReactNode
+}
+
+const defaultHeaderIcon = <TerminalBoxLine className={ICON_CLASS} />
+const defaultExternalLinkIcon = <ExternalLinkLine className={ICON_CLASS} />
+
+export function TerminalCodeBlockPart({
+  command,
+  output,
+  autoRanCommand,
+  className,
+  headerIcon,
+  externalLinkIcon,
+}: TerminalCodeBlockPartProps) {
+  const displayCommand = autoRanCommand ?? (command != null ? `Auto-Ran command: ${command}` : 'Terminal')
+
+  return (
+    <CollapsibleCard
+      headerIcon={headerIcon ?? defaultHeaderIcon}
+      headerTitle={<span className="font-normal">{displayCommand}</span>}
+      headerRight={
+        <IconButton
+          variant="iconOnly"
+          size="sm"
+          icon={externalLinkIcon ?? defaultExternalLinkIcon}
+          aria-label="Open in terminal"
+          className="!min-h-0 !min-w-0 h-[var(--font-size-sm)] w-[var(--font-size-sm)] text-text-secondary hover:text-text [&_svg]:w-[var(--font-size-sm)] [&_svg]:h-[var(--font-size-sm)]"
+        />
+      }
+      contentPadding="0"
+      className={className}
+    >
+      <div className="flex flex-col gap-0">
+        {command != null && command !== '' && (
+          <div className="px-2 py-1.5">
+            <div className="flex items-start gap-2">
+              <span className="font-mono text-xs text-text shrink-0">$</span>
+              <pre className="m-0 flex-1 overflow-x-auto text-left font-mono text-xs leading-xs whitespace-pre text-text bg-transparent scrollbar-auto">
+                <code>{command}</code>
+              </pre>
+            </div>
+          </div>
+        )}
+        {output != null && output !== '' && (
+          <div className="px-2 py-1.5 overflow-x-auto text-left scrollbar-auto">
+            <pre className="m-0 p-0 font-mono text-xs leading-xs whitespace-pre-wrap break-all text-text-tertiary bg-transparent">
+              {output}
+            </pre>
+          </div>
+        )}
+      </div>
+    </CollapsibleCard>
+  )
+}
+
+TerminalCodeBlockPart.displayName = 'TerminalCodeBlockPart'

package/cli/registry/chat/thinking-indicator.tsx

@@ -0,0 +1,91 @@
+import { useMemo } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { motion } from 'framer-motion'
+
+export interface ThinkingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+  text?: string
+  textClassName?: string
+  shimmer?: boolean
+  shimmerDuration?: number
+  shimmerSpread?: number
+  /** 主库可注入 Lottie 等自定义动画；不传则用 CSS 三点脉动 */
+  loader?: ReactNode
+}
+
+/** 默认：CSS 三点脉动，无 Lottie 依赖 */
+function DefaultLoader() {
+  return (
+    <span className="relative block w-5 h-5 shrink-0 flex items-center justify-center" aria-hidden>
+      <style>{`
+        .thinking-dots span { animation: thinking-dot 1.4s ease-in-out infinite both; }
+        .thinking-dots span:nth-child(1) { animation-delay: 0s; }
+        .thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
+        .thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
+        @keyframes thinking-dot {
+          0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
+          40% { transform: scale(1); opacity: 1; }
+        }
+      `}</style>
+      <span className="thinking-dots inline-flex gap-0.5">
+        <span className="w-1 h-1 rounded-full bg-current opacity-70" />
+        <span className="w-1 h-1 rounded-full bg-current opacity-70" />
+        <span className="w-1 h-1 rounded-full bg-current opacity-70" />
+      </span>
+    </span>
+  )
+}
+
+export function ThinkingIndicator({
+  text = 'Qoder is Thinking...',
+  textClassName,
+  shimmer = true,
+  shimmerDuration = 2,
+  shimmerSpread = 2,
+  className,
+  loader,
+  ...props
+}: ThinkingIndicatorProps) {
+  const dynamicSpread = useMemo(() => {
+    const textToUse = text || ''
+    return textToUse.length * shimmerSpread
+  }, [text, shimmerSpread])
+
+  const loaderContent = loader ?? <DefaultLoader />
+
+  return (
+    <div
+      className={cn('inline-flex items-center gap-1.5 max-w-full', className)}
+      {...props}
+    >
+      <span className="shrink-0 -translate-x-0.5" aria-hidden>
+        {loaderContent}
+      </span>
+      <div className="flex-1 min-w-0 flex items-center">
+        {shimmer ? (
+          <motion.span
+            className={cn(
+              'text-sm leading-sm relative inline-block bg-clip-text text-transparent',
+              'bg-[length:250%_100%,auto] bg-no-repeat truncate',
+              textClassName
+            )}
+            style={{
+              backgroundImage: `linear-gradient(90deg, transparent calc(50% - ${dynamicSpread}px), var(--color-text), transparent calc(50% + ${dynamicSpread}px)), linear-gradient(var(--color-text-secondary), var(--color-text-secondary))`,
+            }}
+            initial={{ backgroundPosition: '100% center' }}
+            animate={{ backgroundPosition: '0% center' }}
+            transition={{ repeat: Infinity, duration: shimmerDuration, ease: 'linear' }}
+          >
+            {text}
+          </motion.span>
+        ) : (
+          <span className={cn('text-sm leading-sm text-text-secondary truncate', textClassName)}>
+            {text}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
+
+ThinkingIndicator.displayName = 'ThinkingIndicator'

package/cli/registry/chat/tool-invocation-card.tsx

@@ -0,0 +1,132 @@
+import { memo, useState } from 'react'
+import { cn } from '@/lib/utils'
+import type { ReactNode } from 'react'
+import { TimeLine, CheckboxCircleLine, CloseCircleLine, ArrowRightLine } from '../basic/icons-inline'
+import { Scrollbar } from '../basic/scrollbar'
+
+export type ToolInvocationStatus = 'running' | 'success' | 'error'
+
+export interface ToolInvocationCardProps {
+  toolName: string
+  params?: string
+  status: ToolInvocationStatus
+  response?: string
+  defaultExpanded?: boolean
+  statusText?: string
+  className?: string
+  timeIcon?: ReactNode
+  checkboxCircleIcon?: ReactNode
+  closeCircleIcon?: ReactNode
+  arrowRightIcon?: ReactNode
+  runningText?: string
+  ranText?: string
+  failedText?: string
+  responseLabel?: string
+}
+
+/* 左侧状态图标随 token：容器 text-xs 使 1em = var(--font-size-xs)，图标 size-[1em] 继承 */
+const statusIconClass = 'size-[1em] shrink-0'
+const timeClass = `${statusIconClass} text-text-tertiary`
+const checkboxClass = `${statusIconClass} text-success`
+const closeCircleClass = `${statusIconClass} text-text-tertiary`
+const arrowClass = 'w-3.5 h-3.5 text-text-tertiary transition-all duration-200'
+
+export const ToolInvocationCard = memo(function ToolInvocationCard({
+  toolName,
+  params,
+  status,
+  response,
+  defaultExpanded = false,
+  statusText: statusTextProp,
+  className,
+  timeIcon,
+  checkboxCircleIcon,
+  closeCircleIcon,
+  arrowRightIcon,
+  runningText = 'Running',
+  ranText = 'Ran',
+  failedText = 'Failed',
+  responseLabel = 'Response',
+}: ToolInvocationCardProps) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded)
+
+  const hasResponse = response != null && response.length > 0
+  const isRunning = status === 'running'
+  const isSuccess = status === 'success'
+  const isError = status === 'error'
+
+  const defaultStatusText = isRunning ? runningText : isSuccess ? ranText : failedText
+  const statusText = statusTextProp !== undefined ? statusTextProp : defaultStatusText
+  const showStatusText = statusText !== ''
+
+  const defaultTime = timeIcon ?? <TimeLine className={timeClass} />
+  const defaultCheck = checkboxCircleIcon ?? <CheckboxCircleLine className={checkboxClass} />
+  const defaultCloseCircle = closeCircleIcon ?? <CloseCircleLine className={closeCircleClass} />
+  const defaultArrow = arrowRightIcon ?? <ArrowRightLine className={arrowClass} />
+
+  return (
+    <div className={cn('flex flex-col', className)}>
+      <div
+        onClick={() => hasResponse && !isRunning && setIsExpanded(!isExpanded)}
+        className={cn(
+          'group flex items-center gap-1.5 min-h-5',
+          hasResponse && !isRunning && 'cursor-pointer hover:opacity-80 transition-opacity'
+        )}
+      >
+        <div className="shrink-0 flex items-center justify-center text-xs">
+          {isRunning && defaultTime}
+          {isSuccess && defaultCheck}
+          {isError && defaultCloseCircle}
+        </div>
+        {showStatusText && (
+          <span className="text-xs leading-xs text-text-tertiary shrink-0">{statusText}</span>
+        )}
+        <span className="text-xs leading-xs text-text-secondary shrink-0">{toolName}</span>
+        {params != null && params !== '' && (
+          <span
+            className="text-xs leading-xs text-text-tertiary min-w-0 shrink truncate"
+            title={params}
+          >
+            {params}
+          </span>
+        )}
+        {hasResponse && !isRunning && (
+          <div
+            className={cn(
+              'shrink-0 inline-flex items-center justify-center',
+              'opacity-0 group-hover:opacity-100',
+              isExpanded && '!opacity-100',
+              isExpanded ? 'rotate-90' : 'rotate-0'
+            )}
+          >
+            {defaultArrow}
+          </div>
+        )}
+      </div>
+
+      {hasResponse && isExpanded && (
+        <div className="mt-1 ml-4.5 rounded-md border border-border-tertiary bg-bg-base overflow-hidden font-mono text-xs leading-xs">
+          <div className="text-text-tertiary px-2 pt-1 pb-0 leading-xs">
+            {responseLabel}
+          </div>
+          <Scrollbar
+            scrollbarVisibility="auto"
+            maxHeight={208}
+            className="px-2 pb-1 leading-xs"
+          >
+            <pre
+              className={cn(
+                'whitespace-pre-wrap break-words leading-xs',
+                isError ? 'text-error' : 'text-text-tertiary'
+              )}
+            >
+              {response}
+            </pre>
+          </Scrollbar>
+        </div>
+      )}
+    </div>
+  )
+})
+
+ToolInvocationCard.displayName = 'ToolInvocationCard'