sparkdesign 0.0.1 → 0.2.6

package/cli/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/cli/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/cli/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>
+  )
+}

package/cli/registry/chat/user-question/index.tsx

@@ -0,0 +1,340 @@
+import { memo, useCallback, forwardRef } from 'react'
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { motion } from 'framer-motion'
+import { Chat3Line, ArrowUpLine, ArrowDownSLine, SparklingLine } from '../../basic/icons-inline'
+import {
+  DEFAULT_LABELS,
+  NO_PREFERENCE_VALUE,
+  type UserQuestionProps,
+  type UserQuestionHandle,
+  type UserQuestionItem,
+} from './types'
+import { useUserQuestionState } from './useUserQuestionState'
+import { useUserQuestionKeyboard } from './useUserQuestionKeyboard'
+import { UserQuestionHeader } from './UserQuestionHeader'
+import { UserQuestionCard } from './UserQuestionCard'
+import { UserQuestionFooter } from './UserQuestionFooter'
+import { Scrollbar } from '../../basic/scrollbar'
+
+export type {
+  UserQuestionOption,
+  UserQuestionItem,
+  UserQuestionLabels,
+  UserQuestionProps,
+  UserQuestionHandle,
+} from './types'
+export { DEFAULT_LABELS, NO_PREFERENCE_VALUE } from './types'
+export { UserQuestionHeader } from './UserQuestionHeader'
+export { UserQuestionCard } from './UserQuestionCard'
+export { UserQuestionFooter } from './UserQuestionFooter'
+
+const defaultChat4Icon: ReactNode = (
+  <Chat3Line className="w-4 h-4 shrink-0 text-text-tertiary" />
+)
+const defaultArrowUpSIcon = <ArrowUpLine />
+const defaultArrowDownSIcon = <ArrowDownSLine />
+const defaultSparklingIcon = <SparklingLine className="w-4 h-4 mr-1" />
+
+export const UserQuestion = memo(
+  forwardRef<UserQuestionHandle, UserQuestionProps>(function UserQuestion(
+    {
+      questions,
+      resetKey,
+      onAnswer,
+      onSkip,
+      hasCustomText = false,
+      labels: labelsProp,
+      chat4Icon = defaultChat4Icon,
+      arrowUpSIcon = defaultArrowUpSIcon,
+      arrowDownSIcon = defaultArrowDownSIcon,
+      sparklingIcon = defaultSparklingIcon,
+    }: UserQuestionProps,
+    ref
+  ) {
+    const labels = { ...DEFAULT_LABELS, ...labelsProp }
+    const state = useUserQuestionState({ questions, resetKey, ref, onAnswer })
+
+    const {
+      currentQuestionIndex,
+      setCurrentQuestionIndex,
+      answers,
+      setAnswers,
+      customInputs,
+      setCustomInputs,
+      focusedOptionIndex,
+      setFocusedOptionIndex,
+      isSubmitting,
+      setIsSubmitting,
+      maxQuestionHeight,
+      scrollContainerRef,
+      questionRefs,
+      shouldScrollToQuestionRef,
+      customInputRefs,
+      getSelectedOptionIndex,
+    } = state
+
+    const currentQuestion = questions[currentQuestionIndex]
+    const currentOptions = currentQuestion?.options || []
+    const allQuestionsAnswered = questions.every(
+      (q) =>
+        (answers[q.question] || []).length > 0 ||
+        (customInputs[q.question]?.trim() || '').length > 0
+    )
+    const currentQuestionHasAnswer =
+      (answers[currentQuestion?.question] || []).length > 0 ||
+      (customInputs[currentQuestion?.question]?.trim() || '').length > 0
+
+    const handleOptionClick = useCallback(
+      (questionText: string, optionLabel: string, questionIndex: number) => {
+        const question = questions[questionIndex]
+        const allowMultiple = question?.multiSelect ?? false
+        const isLastQuestion = questionIndex === questions.length - 1
+        const currentAnswers = answers[questionText] || []
+        const isDeselecting = currentAnswers.includes(optionLabel)
+
+        setAnswers((prev) => {
+          const cur = prev[questionText] || []
+          if (allowMultiple) {
+            if (cur.includes(optionLabel)) {
+              return { ...prev, [questionText]: cur.filter((l) => l !== optionLabel) }
+            }
+            return { ...prev, [questionText]: [...cur, optionLabel] }
+          }
+          if (cur.includes(optionLabel)) return { ...prev, [questionText]: [] }
+          return { ...prev, [questionText]: [optionLabel] }
+        })
+
+        if (!allowMultiple) {
+          setCustomInputs((prev) => ({ ...prev, [questionText]: '' }))
+        }
+
+        const shouldAutoNext =
+          !allowMultiple && !isLastQuestion && !isDeselecting
+        if (shouldAutoNext) {
+          setTimeout(() => {
+            const nextIndex = questionIndex + 1
+            shouldScrollToQuestionRef.current = true
+            setCurrentQuestionIndex(nextIndex)
+            setFocusedOptionIndex(getSelectedOptionIndex(nextIndex))
+          }, 150)
+        }
+      },
+      [
+        questions,
+        answers,
+        setAnswers,
+        setCustomInputs,
+        setCurrentQuestionIndex,
+        setFocusedOptionIndex,
+        getSelectedOptionIndex,
+        shouldScrollToQuestionRef,
+      ]
+    )
+
+    const handlePrevious = useCallback(() => {
+      if (currentQuestionIndex > 0) {
+        const prevIndex = currentQuestionIndex - 1
+        shouldScrollToQuestionRef.current = true
+        setCurrentQuestionIndex(prevIndex)
+        setFocusedOptionIndex(getSelectedOptionIndex(prevIndex))
+      }
+    }, [currentQuestionIndex, setCurrentQuestionIndex, setFocusedOptionIndex, getSelectedOptionIndex, shouldScrollToQuestionRef])
+
+    const handleNext = useCallback(() => {
+      if (currentQuestionIndex < questions.length - 1) {
+        const nextIndex = currentQuestionIndex + 1
+        shouldScrollToQuestionRef.current = true
+        setCurrentQuestionIndex(nextIndex)
+        setFocusedOptionIndex(getSelectedOptionIndex(nextIndex))
+      }
+    }, [currentQuestionIndex, questions.length, setCurrentQuestionIndex, setFocusedOptionIndex, getSelectedOptionIndex, shouldScrollToQuestionRef])
+
+    const handleContinue = useCallback(() => {
+      if (isSubmitting) return
+      if (allQuestionsAnswered) {
+        setIsSubmitting(true)
+        const formatted: Record<string, string> = {}
+        for (const q of questions) {
+          const selected = answers[q.question] || []
+          const custom = customInputs[q.question]?.trim()
+          const parts: string[] = []
+          if (selected.length > 0) parts.push(...selected)
+          if (custom) parts.push(custom)
+          formatted[q.question] = parts.join(', ')
+        }
+        onAnswer(formatted)
+      } else {
+        const isUnanswered = (q: UserQuestionItem) =>
+          (answers[q.question] || []).length === 0 &&
+          (customInputs[q.question]?.trim() || '').length === 0
+        const len = questions.length
+        let nextUnansweredIndex = -1
+        for (let i = 1; i < len; i++) {
+          const idx = (currentQuestionIndex + i) % len
+          if (isUnanswered(questions[idx])) {
+            nextUnansweredIndex = idx
+            break
+          }
+        }
+        if (nextUnansweredIndex >= 0) {
+          shouldScrollToQuestionRef.current = true
+          setCurrentQuestionIndex(nextUnansweredIndex)
+          setFocusedOptionIndex(getSelectedOptionIndex(nextUnansweredIndex))
+        }
+      }
+    }, [
+      isSubmitting,
+      allQuestionsAnswered,
+      questions,
+      answers,
+      customInputs,
+      currentQuestionIndex,
+      onAnswer,
+      setIsSubmitting,
+      setCurrentQuestionIndex,
+      setFocusedOptionIndex,
+      getSelectedOptionIndex,
+      shouldScrollToQuestionRef,
+    ])
+
+    const handleSkipWithGuard = useCallback(() => {
+      if (isSubmitting) return
+      setIsSubmitting(true)
+      const finalAnswers: Record<string, string> = {}
+      for (const q of questions) {
+        const selected = answers[q.question] || []
+        const custom = customInputs[q.question]?.trim()
+        const hasAnswer = selected.length > 0 || !!custom
+        if (hasAnswer) {
+          const parts: string[] = []
+          if (selected.length > 0) parts.push(...selected)
+          if (custom) parts.push(custom)
+          finalAnswers[q.question] = parts.join(', ')
+        } else {
+          finalAnswers[q.question] = NO_PREFERENCE_VALUE
+        }
+      }
+      onAnswer(finalAnswers)
+      onSkip()
+    }, [isSubmitting, questions, answers, customInputs, onAnswer, onSkip, setIsSubmitting])
+
+    const handleRecommend = useCallback(() => {
+      if (isSubmitting) return
+      const recommended: Record<string, string[]> = {}
+      for (const q of questions) {
+        const first = q.options?.[0]
+        if (first) recommended[q.question] = [first.label]
+      }
+      setAnswers(recommended)
+      setCustomInputs({})
+      shouldScrollToQuestionRef.current = true
+      setCurrentQuestionIndex(questions.length - 1)
+      setFocusedOptionIndex(0)
+      setTimeout(() => {
+        if (scrollContainerRef.current) {
+          scrollContainerRef.current.scrollTo({
+            top: scrollContainerRef.current.scrollHeight,
+            behavior: 'smooth',
+          })
+        }
+      }, 50)
+    }, [
+      isSubmitting,
+      questions,
+      setAnswers,
+      setCustomInputs,
+      setCurrentQuestionIndex,
+      setFocusedOptionIndex,
+      shouldScrollToQuestionRef,
+      scrollContainerRef,
+    ])
+
+    useUserQuestionKeyboard({
+      isSubmitting,
+      currentQuestion,
+      currentOptions,
+      currentQuestionIndex,
+      questions,
+      focusedOptionIndex,
+      setFocusedOptionIndex,
+      currentQuestionHasAnswer,
+      getSelectedOptionIndex,
+      shouldScrollToQuestionRef,
+      setCurrentQuestionIndex,
+      handleOptionClick,
+      handleContinue,
+    })
+
+    if (questions.length === 0) return null
+
+    return (
+      <motion.div
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+        className={cn(
+          'border rounded-t-xl border-b-0 border-border border-border-tertiary bg-bg-base overflow-hidden pt-2 pb-2'
+        )}
+      >
+        <UserQuestionHeader
+          currentQuestion={currentQuestion}
+          questionsLength={questions.length}
+          labels={labels}
+          chat4Icon={chat4Icon}
+          arrowUpSIcon={arrowUpSIcon}
+          arrowDownSIcon={arrowDownSIcon}
+          currentQuestionIndex={currentQuestionIndex}
+          onPrevious={handlePrevious}
+          onNext={handleNext}
+        />
+        <Scrollbar
+          ref={scrollContainerRef}
+          scrollbarVisibility="auto"
+          maxHeight={maxQuestionHeight ? maxQuestionHeight : undefined}
+          className="scroll-smooth"
+        >
+          <div className="space-y-4 px-3">
+            {questions.map((question, qIndex) => (
+              <UserQuestionCard
+                key={question.question}
+                question={question}
+                qIndex={qIndex}
+                labels={labels}
+                answers={answers}
+                customInputs={customInputs}
+                focusedOptionIndex={focusedOptionIndex}
+                isCurrentQuestion={qIndex === currentQuestionIndex}
+                isSubmitting={isSubmitting}
+                allQuestionsAnswered={allQuestionsAnswered}
+                questionsLength={questions.length}
+                questionRefs={questionRefs}
+                customInputRefs={customInputRefs}
+                setCurrentQuestionIndex={setCurrentQuestionIndex}
+                setFocusedOptionIndex={setFocusedOptionIndex}
+                setAnswers={setAnswers}
+                setCustomInputs={setCustomInputs}
+                getSelectedOptionIndex={getSelectedOptionIndex}
+                shouldScrollToQuestionRef={shouldScrollToQuestionRef}
+                onOptionClick={handleOptionClick}
+                onContinue={handleContinue}
+              />
+            ))}
+          </div>
+        </Scrollbar>
+        <UserQuestionFooter
+          labels={labels}
+          sparklingIcon={sparklingIcon}
+          isSubmitting={isSubmitting}
+          hasCustomText={hasCustomText}
+          allQuestionsAnswered={allQuestionsAnswered}
+          onRecommend={handleRecommend}
+          onSkip={handleSkipWithGuard}
+          onContinue={handleContinue}
+        />
+      </motion.div>
+    )
+  })
+)
+
+UserQuestion.displayName = 'UserQuestion'