sparkdesign 0.0.1 → 0.1.10

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

package/registry/chat/user-message.tsx

@@ -0,0 +1,38 @@
+import { forwardRef } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+export interface UserMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  children: ReactNode
+  maxWidth?: string | number
+}
+
+export const UserMessage = forwardRef<HTMLDivElement, UserMessageProps>(
+  ({ children, className, maxWidth = '752px', ...props }, ref) => {
+    const containerStyles = cn(
+      'w-full',
+      'bg-sage-bg',
+      'rounded-lg',
+      'p-3',
+      'text-sm leading-sm',
+      'font-normal',
+      'text-text',
+      className
+    )
+
+    return (
+      <div
+        ref={ref}
+        className={containerStyles}
+        style={{
+          maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+UserMessage.displayName = 'UserMessage'

package/registry/chat/user-question/UserQuestionCard.tsx

@@ -0,0 +1,198 @@
+import type { Dispatch, MutableRefObject, SetStateAction } from 'react'
+import { useState } from 'react'
+import { cn } from '@/lib/utils'
+import { OptionList } from '../../basic/option-list'
+import type { OptionItem } from '../../basic/option-list'
+import type { UserQuestionItem, UserQuestionLabels } from './types'
+
+export interface UserQuestionCardProps {
+  question: UserQuestionItem
+  qIndex: number
+  labels: Required<UserQuestionLabels>
+  answers: Record<string, string[]>
+  customInputs: Record<string, string>
+  focusedOptionIndex: number
+  isCurrentQuestion: boolean
+  isSubmitting: boolean
+  allQuestionsAnswered: boolean
+  questionsLength: number
+  questionRefs: MutableRefObject<Map<number, HTMLDivElement>>
+  customInputRefs: MutableRefObject<Map<string, HTMLInputElement>>
+  setCurrentQuestionIndex: (i: number) => void
+  setFocusedOptionIndex: (i: number) => void
+  setAnswers: Dispatch<SetStateAction<Record<string, string[]>>>
+  setCustomInputs: Dispatch<SetStateAction<Record<string, string>>>
+  getSelectedOptionIndex: (i: number) => number
+  shouldScrollToQuestionRef: MutableRefObject<boolean>
+  onOptionClick: (questionText: string, optionLabel: string, questionIndex: number) => void
+  onContinue: () => void
+}
+
+export function UserQuestionCard({
+  question,
+  qIndex,
+  labels,
+  answers,
+  customInputs,
+  focusedOptionIndex,
+  isCurrentQuestion,
+  isSubmitting,
+  allQuestionsAnswered,
+  questionsLength,
+  questionRefs,
+  customInputRefs,
+  setCurrentQuestionIndex,
+  setFocusedOptionIndex,
+  setAnswers,
+  setCustomInputs,
+  getSelectedOptionIndex,
+  shouldScrollToQuestionRef,
+  onOptionClick,
+  onContinue,
+}: UserQuestionCardProps) {
+  const questionOptions = question.options || []
+  const [isInputFocused, setIsInputFocused] = useState(false)
+  const hasInputValue = !!(customInputs[question.question]?.trim())
+  const showUnderline = isInputFocused || hasInputValue
+
+  return (
+    <div
+      key={question.question}
+      ref={(el) => {
+        if (el) questionRefs.current.set(qIndex, el)
+        else questionRefs.current.delete(qIndex)
+      }}
+      className={cn(
+        'transition-opacity duration-200',
+        isCurrentQuestion ? 'opacity-100' : 'opacity-40'
+      )}
+    >
+      <div className="flex items-start gap-3 pl-2 mb-3">
+        <div className="flex-shrink-0 w-5 flex items-center justify-center text-sm leading-sm font-medium text-text-tertiary">
+          {qIndex + 1}.
+        </div>
+        <div className="text-sm leading-sm font-medium text-text min-w-0 flex-1">
+          {question.question}
+        </div>
+      </div>
+      <OptionList
+        items={questionOptions.map((opt) => ({
+          id: opt.label,
+          label: opt.label,
+          description: opt.description,
+        }))}
+        selectedIds={answers[question.question]?.map((l) => l) || []}
+        focusedId={
+          isCurrentQuestion ? questionOptions[focusedOptionIndex]?.label : undefined
+        }
+        disabled={isSubmitting || !isCurrentQuestion}
+        onItemClick={(item: OptionItem, index: number) => {
+          if (!isCurrentQuestion) {
+            setCurrentQuestionIndex(qIndex)
+            setFocusedOptionIndex(getSelectedOptionIndex(qIndex))
+            return
+          }
+          onOptionClick(question.question, item.label, qIndex)
+          setFocusedOptionIndex(index)
+        }}
+      />
+      {question.allowCustomInput !== false && (
+        <div
+          className={cn(
+            'w-full flex gap-3 pl-2 mt-3 transition-colors',
+            !isCurrentQuestion && 'opacity-40',
+            isSubmitting && 'opacity-50'
+          )}
+        >
+          <div
+            className={cn(
+              'flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-xs leading-xs font-medium transition-colors',
+              (isCurrentQuestion && focusedOptionIndex === questionOptions.length) ||
+                customInputs[question.question]?.trim()
+                ? 'bg-primary-active text-text-on-primary'
+                : 'bg-fill-secondary text-text-tertiary'
+            )}
+          >
+            {questionOptions.length + 1}
+          </div>
+          <div className="flex-1 min-w-0 flex flex-col">
+            <div className="h-5 flex items-center">
+              <input
+                ref={(el) => {
+                  if (el) customInputRefs.current.set(question.question, el)
+                  else customInputRefs.current.delete(question.question)
+                }}
+                type="text"
+                value={customInputs[question.question] || ''}
+                style={{ outline: 'none', outlineOffset: 0, boxShadow: 'none', border: 'none' }}
+                onChange={(e) => {
+                  const value = e.target.value
+                  setCustomInputs((prev) => ({ ...prev, [question.question]: value }))
+                  if (!question.multiSelect && value.trim()) {
+                    setAnswers((prev) => ({
+                      ...prev,
+                      [question.question]: [],
+                    }))
+                  }
+                }}
+                onFocus={() => {
+                  setIsInputFocused(true)
+                  if (isCurrentQuestion) {
+                    setFocusedOptionIndex(questionOptions.length)
+                    if (!question.multiSelect) {
+                      setAnswers((prev) => ({
+                        ...prev,
+                        [question.question]: [],
+                      }))
+                    }
+                  }
+                }}
+                onBlur={() => setIsInputFocused(false)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    const currentCustomInput = customInputs[question.question]?.trim()
+                    const currentSelectedOptions = answers[question.question] || []
+                    const hasAnswer =
+                      currentSelectedOptions.length > 0 || !!currentCustomInput
+                    if (hasAnswer) {
+                      if (allQuestionsAnswered) {
+                        onContinue()
+                      } else if (qIndex < questionsLength - 1) {
+                        const nextIndex = qIndex + 1
+                        shouldScrollToQuestionRef.current = true
+                        setCurrentQuestionIndex(nextIndex)
+                        setFocusedOptionIndex(0)
+                      } else {
+                        onContinue()
+                      }
+                    }
+                  }
+                }}
+                placeholder={labels.customInputPlaceholder}
+                disabled={isSubmitting || !isCurrentQuestion}
+                className={cn(
+                  'w-full h-full py-0 bg-transparent text-sm leading-sm font-medium text-text',
+                  'placeholder:text-text-tertiary placeholder:font-normal',
+                  'border-0 rounded-none outline-none outline-offset-0',
+                  'focus:outline-none focus:outline-offset-0',
+                  'focus-visible:outline-none focus-visible:outline-offset-0',
+                  'ring-0 focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 shadow-none',
+                  'disabled:cursor-not-allowed'
+                )}
+              />
+            </div>
+            <div
+              className="mt-1.5 overflow-hidden origin-left transition-[width] duration-200 ease-out"
+              style={{ width: showUnderline ? '100%' : '0%' }}
+              aria-hidden
+            >
+              <div className="h-px bg-[var(--color-border-tertiary)]" />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/registry/chat/user-question/UserQuestionFooter.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react'
+import { Button } from '../../basic/button'
+import type { UserQuestionLabels } from './types'
+
+export interface UserQuestionFooterProps {
+  labels: Required<UserQuestionLabels>
+  sparklingIcon: ReactNode
+  isSubmitting: boolean
+  hasCustomText: boolean
+  allQuestionsAnswered: boolean
+  onRecommend: () => void
+  onSkip: () => void
+  onContinue: () => void
+}
+
+export function UserQuestionFooter({
+  labels,
+  sparklingIcon,
+  isSubmitting,
+  hasCustomText,
+  allQuestionsAnswered,
+  onRecommend,
+  onSkip,
+  onContinue,
+}: UserQuestionFooterProps) {
+  return (
+    <div className="flex items-center justify-between px-3 py-2">
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={onRecommend}
+        disabled={isSubmitting}
+      >
+        {sparklingIcon}
+        {labels.recommend}
+      </Button>
+      <div className="flex items-center gap-2">
+        {!allQuestionsAnswered && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onSkip}
+            disabled={isSubmitting}
+          >
+            {labels.skipAll}
+          </Button>
+        )}
+        <Button
+          size="sm"
+          variant="secondary"
+          onClick={onContinue}
+          disabled={isSubmitting || hasCustomText || !allQuestionsAnswered}
+        >
+          {isSubmitting ? (
+            labels.sending
+          ) : (
+            <>
+              {allQuestionsAnswered ? labels.submit : labels.continue}
+              <span className="opacity-70"> ↵</span>
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/registry/chat/user-question/UserQuestionHeader.tsx

@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react'
+import { IconButton } from '../../basic/icon-button'
+import type { UserQuestionItem } from './types'
+import type { UserQuestionLabels } from './types'
+
+export interface UserQuestionHeaderProps {
+  currentQuestion: UserQuestionItem | undefined
+  questionsLength: number
+  labels: Required<UserQuestionLabels>
+  chat4Icon: ReactNode
+  arrowUpSIcon: ReactNode
+  arrowDownSIcon: ReactNode
+  currentQuestionIndex: number
+  onPrevious: () => void
+  onNext: () => void
+}
+
+export function UserQuestionHeader({
+  currentQuestion,
+  questionsLength,
+  labels,
+  chat4Icon,
+  arrowUpSIcon,
+  arrowDownSIcon,
+  currentQuestionIndex,
+  onPrevious,
+  onNext,
+}: UserQuestionHeaderProps) {
+  return (
+    <div className="flex items-center justify-between mb-2 -mt-2 px-3 pt-2 pb-2 rounded-t-xl bg-fill-tertiary">
+      <div className="flex items-center gap-1.5">
+        {chat4Icon}
+        <span className="text-xs leading-xs text-text-tertiary">
+          {currentQuestion?.header || labels.questionHeader}
+        </span>
+        <span className="text-text-tertiary/50">•</span>
+        <span className="text-xs leading-xs text-text-tertiary">
+          {currentQuestion?.multiSelect ? labels.multiSelect : labels.singleSelect}
+        </span>
+      </div>
+      {questionsLength > 1 && (
+        <div className="flex items-center gap-1">
+          <IconButton
+            size="sm"
+            variant="ghost"
+            onClick={onPrevious}
+            disabled={currentQuestionIndex === 0}
+            icon={arrowUpSIcon}
+          />
+          <span className="text-xs leading-xs text-text-tertiary px-1">
+            {currentQuestionIndex + 1} / {questionsLength}
+          </span>
+          <IconButton
+            size="sm"
+            variant="ghost"
+            onClick={onNext}
+            disabled={currentQuestionIndex === questionsLength - 1}
+            icon={arrowDownSIcon}
+          />
+        </div>
+      )}
+    </div>
+  )
+}