Single select question radios (#965)

* fix(ui): make radios not jump around upon state change

* fix(ui): use radios for single-select questions instead of checkboxes

packages/ui/src/components/chat/QuestionCard.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { RiArrowRightSLine, RiCheckLine, RiCloseLine, RiEditLine, RiListCheck3, RiQuestionLine } from '@remixicon/react';
 import { Checkbox } from '@/components/ui/checkbox';
+import { Radio } from '@/components/ui/radio';
 
 import { cn } from '@/lib/utils';
 import type { QuestionRequest } from '@/types/question';
@@ -295,11 +296,19 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
                       >
                         <div className="flex items-start gap-2">
                           <div className="mt-0.5 shrink-0">
-                            <Checkbox
-                              checked={selected}
-                              onChange={() => handleToggleOption(option.label)}
-                              disabled={isResponding}
-                            />
+                            {isMultiple ? (
+                              <Checkbox
+                                checked={selected}
+                                onChange={() => handleToggleOption(option.label)}
+                                disabled={isResponding}
+                              />
+                            ) : (
+                              <Radio
+                                checked={selected}
+                                onChange={() => handleToggleOption(option.label)}
+                                disabled={isResponding}
+                              />
+                            )}
                           </div>
 
                           <div className="min-w-0 flex-1">

packages/ui/src/components/ui/radio.tsx

@@ -62,15 +62,14 @@ export const Radio = React.memo<RadioProps>(function Radio({
         className,
       )}
     >
-      {checked ? (
-        <span
-          aria-hidden
-          className={cn(
-            'block h-[5px] w-[5px] rounded-full bg-white',
-            iconClassName,
-          )}
-        />
-      ) : null}
+      <span
+        aria-hidden
+        className={cn(
+          'block h-[5px] w-[5px] rounded-full bg-white',
+          !checked && 'opacity-0',
+          iconClassName,
+        )}
+      />
     </button>
   );
 });