From 22917d62a8c14e54d196f240ceed1f4ab3289306 Mon Sep 17 00:00:00 2001
From: Brent O'Neill <brent.oneill@datastax.com>
Date: Wed, 24 Sep 2025 13:52:16 -0600
Subject: [PATCH] fix radio button border and update labels to use LabelWrapper

---
 frontend/components/ui/radio-group.tsx |  26 +++---
 frontend/src/app/settings/page.tsx     | 108 +++++++++++++------------
 2 files changed, 71 insertions(+), 63 deletions(-)

diff --git a/frontend/components/ui/radio-group.tsx b/frontend/components/ui/radio-group.tsx
index 0968c2a8..de9da9af 100644
--- a/frontend/components/ui/radio-group.tsx
+++ b/frontend/components/ui/radio-group.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { Circle } from "lucide-react"
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -16,9 +16,9 @@ const RadioGroup = React.forwardRef<
       {...props}
       ref={ref}
     />
-  )
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
 const RadioGroupItem = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
@@ -28,7 +28,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square h-4 w-4 rounded-full border border-input text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
@@ -37,8 +37,8 @@ const RadioGroupItem = React.forwardRef<
         <Circle className="h-2.5 w-2.5 fill-current text-current" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
-  )
-})
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
-export { RadioGroup, RadioGroupItem }
\ No newline at end of file
+export { RadioGroup, RadioGroupItem };
diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx
index 4f793177..bf3327e3 100644
--- a/frontend/src/app/settings/page.tsx
+++ b/frontend/src/app/settings/page.tsx
@@ -37,6 +37,7 @@ import { useTask } from "@/contexts/task-context";
 import { useDebounce } from "@/lib/debounce";
 import { getFallbackModels, type ModelProvider } from "./helpers/model-helpers";
 import { ModelSelectItems } from "./helpers/model-select-item";
+import { LabelWrapper } from "@/components/label-wrapper";
 
 const MAX_SYSTEM_PROMPT_CHARS = 2000;
 
@@ -797,29 +798,35 @@ function KnowledgeSourcesPage() {
         <CardContent>
           <div className="space-y-6">
             <div className="space-y-2">
-              <Label htmlFor="model-select" className="text-base font-medium">
-                Language model
-                <span className="text-red-500">*</span>
-              </Label>
-              <Select
-                value={
-                  settings.agent?.llm_model ||
-                  modelsData?.language_models?.find((m) => m.default)?.value ||
-                  "gpt-4"
-                }
-                onValueChange={handleModelChange}
+              <LabelWrapper
+                helperText=""
+                id="model-select"
+                label="Language model"
+                required
               >
-                <SelectTrigger id="model-select">
-                  <SelectValue placeholder="Select a model" />
-                </SelectTrigger>
-                <SelectContent>
-                  <ModelSelectItems
-                    models={modelsData?.language_models}
-                    fallbackModels={getFallbackModels(currentProvider).language}
-                    provider={currentProvider}
-                  />
-                </SelectContent>
-              </Select>
+                <Select
+                  value={
+                    settings.agent?.llm_model ||
+                    modelsData?.language_models?.find((m) => m.default)
+                      ?.value ||
+                    "gpt-4"
+                  }
+                  onValueChange={handleModelChange}
+                >
+                  <SelectTrigger id="model-select">
+                    <SelectValue placeholder="Select a model" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <ModelSelectItems
+                      models={modelsData?.language_models}
+                      fallbackModels={
+                        getFallbackModels(currentProvider).language
+                      }
+                      provider={currentProvider}
+                    />
+                  </SelectContent>
+                </Select>
+              </LabelWrapper>
             </div>
             <div className="space-y-2">
               <Label htmlFor="system-prompt" className="text-base font-medium">
@@ -950,35 +957,36 @@ function KnowledgeSourcesPage() {
         <CardContent>
           <div className="space-y-6">
             <div className="space-y-2">
-              <Label
-                htmlFor="embedding-model-select"
-                className="text-base font-medium"
+              <LabelWrapper
+                helperText="Some helping text"
+                id="embedding-model-select"
+                label="Embedding model"
               >
-                Embedding model
-              </Label>
-              <Select
-                // Disabled until API supports multiple embedding models
-                disabled={true}
-                value={
-                  settings.knowledge?.embedding_model ||
-                  modelsData?.embedding_models?.find((m) => m.default)?.value ||
-                  "text-embedding-ada-002"
-                }
-                onValueChange={handleEmbeddingModelChange}
-              >
-                <SelectTrigger id="embedding-model-select">
-                  <SelectValue placeholder="Select an embedding model" />
-                </SelectTrigger>
-                <SelectContent>
-                  <ModelSelectItems
-                    models={modelsData?.embedding_models}
-                    fallbackModels={
-                      getFallbackModels(currentProvider).embedding
-                    }
-                    provider={currentProvider}
-                  />
-                </SelectContent>
-              </Select>
+                <Select
+                  // Disabled until API supports multiple embedding models
+                  disabled={true}
+                  value={
+                    settings.knowledge?.embedding_model ||
+                    modelsData?.embedding_models?.find((m) => m.default)
+                      ?.value ||
+                    "text-embedding-ada-002"
+                  }
+                  onValueChange={handleEmbeddingModelChange}
+                >
+                  <SelectTrigger id="embedding-model-select">
+                    <SelectValue placeholder="Select an embedding model" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <ModelSelectItems
+                      models={modelsData?.embedding_models}
+                      fallbackModels={
+                        getFallbackModels(currentProvider).embedding
+                      }
+                      provider={currentProvider}
+                    />
+                  </SelectContent>
+                </Select>
+              </LabelWrapper>
             </div>
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2">