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">
+                            {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',
+          !checked && 'opacity-0',
           iconClassName,
         )}
       />
-      ) : null}
     </button>
   );
 });