51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T8b5,.cr-question { display: grid; gap: var(--cr-space-3); margin: 0; padding: var(--cr-space-6); border-radius: var(--cr-radius-xl); color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); font-size: var(--cr-font-size-md); } .cr-question__who { color: var(--cr-color-text-muted); font-size: var(--cr-font-size-sm); } .cr-question__title { margin: 0; font-family: var(--cr-font-family-display); font-size: var(--cr-font-size-2xl); font-weight: var(--cr-font-weight-bold); letter-spacing: var(--cr-font-tracking-title); line-height: 1.2; } .cr-question[data-answered] .cr-question__title { font-size: var(--cr-font-size-lg); font-weight: var(--cr-font-weight-semibold); } .cr-question__answer { font-weight: var(--cr-font-weight-semibold); } .cr-question__options { display: grid; gap: var(--cr-space-2); margin: 0; padding: 0; border: 0; } .cr-question__option { display: flex; gap: var(--cr-space-3); padding: 14px var(--cr-space-4); border-radius: 14px; background: var(--cr-color-glass-tile); cursor: pointer; } .cr-question__option:has(:checked) { background: var(--cr-color-glass-popover); box-shadow: 0 0 0 1.5px var(--cr-color-ink-bg); } .cr-question__option:has(:focus-visible) { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } .cr-question__option input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--cr-color-ink-bg); } .cr-question__option input:focus-visible { outline: none; } .cr-question__option-text { display: grid; gap: 2px; font-weight: var(--cr-font-weight-semibold); } .cr-question__option-description { color: var(--cr-color-text-muted); font-size: var(--cr-font-size-sm); font-weight: var(--cr-font-weight-regular); } .cr-question__free { display: grid; gap: var(--cr-space-2); } .cr-question__free-label { font-size: var(--cr-font-size-sm); font-weight: var(--cr-font-weight-semibold); } .cr-question__note { margin: 0; color: var(--cr-color-text-muted); font-size: var(--cr-font-size-sm); } .cr-question__actions { display: flex; flex-wrap: wrap; gap: var(--cr-space-2); } 54:T1015,'use client'; import { useId, useState, type ReactNode } from 'react'; import { Button } from '@/components/creance/button/Button'; import { Textarea } from '@/components/creance/textarea/Textarea'; import { cx } from '@/lib/creance/cx'; import './QuestionCard.css'; export interface QuestionOption { value: string; label: string; description?: ReactNode; } export interface QuestionCardProps { agentName: string; question: string; /** Answers the agent can offer. Leave out for a free-text question. */ options?: QuestionOption[]; /** Add "Something else" with a text box. Default true when there are options. */ allowOther?: boolean; /** The option the agent would pick, pre-selected and said openly. */ defaultValue?: string; /** Names the option group. Default "Answer". */ optionsLabel?: string; /** What happens if nobody answers: "If no one answers in 30 minutes, Data Loader will pause, not guess." */ timeoutNote?: ReactNode; onAnswer: (answer: string) => void; /** Shows "Ask me later". */ onDefer?: () => void; /** Once answered, the card shows the answer instead of the form. */ answer?: string; headingLevel?: 2 | 3 | 4; className?: string; } /** When the agent needs information rather than permission: options when it has them, free text when not. */ export function QuestionCard({ agentName, question, options, allowOther = !!options?.length, defaultValue, optionsLabel = 'Answer', timeoutNote, onAnswer, onDefer, answer, headingLevel = 3, className, }: QuestionCardProps) { const id = useId(); const H = `h${headingLevel}` as const; const [choice, setChoice] = useState(defaultValue ?? options?.[0]?.value ?? ''); const [text, setText] = useState(''); const other = !options?.length || choice === '__other'; const value = other ? text.trim() : options!.find((o) => o.value === choice)?.label ?? choice; if (answer !== undefined) { return (

{agentName} asked {question} You answered {answer}

); } return (

{ e.preventDefault(); if (value) onAnswer(value); }} > {agentName} is asking {question} {options?.length ? (

{optionsLabel} {[...options, ...(allowOther ? [{ value: '__other', label: 'Something else' } as QuestionOption] : [])].map((o) => ( setChoice(o.value)} /> {o.label} {o.description && {o.description}} ))}

) : null} {other && (

Your answer

setText(e.currentTarget.value)} />
        </div>
      )}
      {timeoutNote && <p className="cr-question__note">{timeoutNote}</p>}
      <div className="cr-question__actions">
        <Button type="submit" variant="primary" disabled={!value}>
          {options?.length ? 'Answer' : 'Send answer'}
        </Button>
        {onDefer && <Button onClick={onDefer}>Ask me later</Button>}
      </div>
    </form>
  );
}
50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/button.json","https://creance.pages.dev/r/creance-base.json","https://creance.pages.dev/r/textarea.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"question-card/QuestionCard.css","content":"$53","type":"registry:file","target":"@components/creance/question-card/QuestionCard.css"},{"path":"question-card/QuestionCard.tsx","content":"$54","type":"registry:ui","target":"@components/creance/question-card/QuestionCard.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>