oxios 1.5.2

Oxios Agent OS — Agent Operating System powered by oxi-sdk
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

import { useTranslation } from 'react-i18next'
import { cn } from '@/lib/utils'
import type { InterviewQuestion } from '@/types'

interface InterviewQuestionCardProps {
  question: InterviewQuestion
  value: string | string[] | undefined
  onChange: (value: string | string[]) => void
  disabled?: boolean
}

/**
 * Renders a single interview question with the appropriate widget
 * based on `question.kind`: single_choice (chips), multi_choice (toggleable
 * chips), yes_no (binary buttons), free_text (textarea).
 */
export function InterviewQuestionCard({
  question,
  value,
  onChange,
  disabled,
}: InterviewQuestionCardProps) {
  const { kind, text, options } = question
  const { t } = useTranslation()

  if (kind === 'single_choice') {
    return (
      <div>
        <p className="text-sm font-medium mb-2">{text}</p>
        <div className="flex flex-wrap gap-2">
          {options?.map((opt) => (
            <button
              key={opt.value}
              type="button"
              onClick={() => onChange(opt.value)}
              disabled={disabled}
              className={cn(
                'px-3 py-1.5 rounded-full text-sm border transition-colors',
                value === opt.value
                  ? 'bg-primary text-primary-foreground border-primary'
                  : 'bg-card hover:bg-accent/50 border-border',
              )}
            >
              {opt.label}
            </button>
          ))}
        </div>
      </div>
    )
  }

  if (kind === 'multi_choice') {
    const selected = Array.isArray(value) ? value : []
    return (
      <div>
        <p className="text-sm font-medium mb-2">{text}</p>
        <div className="flex flex-wrap gap-2">
          {options?.map((opt) => {
            const isActive = selected.includes(opt.value)
            return (
              <button
                key={opt.value}
                type="button"
                onClick={() => {
                  onChange(
                    isActive ? selected.filter((v) => v !== opt.value) : [...selected, opt.value],
                  )
                }}
                disabled={disabled}
                className={cn(
                  'px-3 py-1.5 rounded-full text-sm border transition-colors',
                  isActive
                    ? 'bg-primary text-primary-foreground border-primary'
                    : 'bg-card hover:bg-accent/50 border-border',
                )}
              >
                {opt.label}
              </button>
            )
          })}
        </div>
      </div>
    )
  }

  if (kind === 'yes_no') {
    return (
      <div>
        <p className="text-sm font-medium mb-2">{text}</p>
        <div className="flex gap-2">
          <button
            type="button"
            onClick={() => onChange('yes')}
            disabled={disabled}
            className={cn(
              'px-4 py-1.5 rounded-lg text-sm border transition-colors',
              value === 'yes'
                ? 'bg-success/15 text-success border-success/40'
                : 'bg-card hover:bg-accent/50 border-border',
            )}
          >
            ✅ {t('chat.interview.yes')}
          </button>
          <button
            type="button"
            onClick={() => onChange('no')}
            disabled={disabled}
            className={cn(
              'px-4 py-1.5 rounded-lg text-sm border transition-colors',
              value === 'no'
                ? 'bg-error/15 text-error border-error/40'
                : 'bg-card hover:bg-accent/50 border-border',
            )}
          >
            ❌ {t('chat.interview.no')}
          </button>
        </div>
      </div>
    )
  }

  // free_text (default)
  return (
    <div>
      <p className="text-sm font-medium mb-2">{text}</p>
      <textarea
        value={(value as string) ?? ''}
        onChange={(e) => onChange(e.target.value)}
        disabled={disabled}
        className="flex min-h-[44px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none"
        placeholder={t('chat.interview.freeTextPlaceholder')}
      />
    </div>
  )
}