fix radio button border and update labels to use LabelWrapper

This commit is contained in:
Brent O'Neill 2025-09-24 13:52:16 -06:00
parent 04df8b6290
commit 22917d62a8
2 changed files with 71 additions and 63 deletions

View file

@ -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 }
export { RadioGroup, RadioGroupItem };

View file

@ -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">