gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix radio button border and update labels to use LabelWrapper

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

26
frontend/components/ui/radio-group.tsx
View file

@ -1,10 +1,10 @@
"use client" "use client";
import * as React from "react" import * as React from "react";
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
import { Circle } from "lucide-react" import { Circle } from "lucide-react";
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils";
const RadioGroup = React.forwardRef< const RadioGroup = React.forwardRef<
React.ElementRef<typeof RadioGroupPrimitive.Root>, React.ElementRef<typeof RadioGroupPrimitive.Root>,
@ -16,9 +16,9 @@ const RadioGroup = React.forwardRef<
{...props} {...props}
ref={ref} ref={ref}
/> />
) );
}) });
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
const RadioGroupItem = React.forwardRef< const RadioGroupItem = React.forwardRef<
React.ElementRef<typeof RadioGroupPrimitive.Item>, React.ElementRef<typeof RadioGroupPrimitive.Item>,
@ -28,7 +28,7 @@ const RadioGroupItem = React.forwardRef<
<RadioGroupPrimitive.Item <RadioGroupPrimitive.Item
ref={ref} ref={ref}
className={cn( 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 className
)} )}
{...props} {...props}
@ -37,8 +37,8 @@ const RadioGroupItem = React.forwardRef<
<Circle className="h-2.5 w-2.5 fill-current text-current" /> <Circle className="h-2.5 w-2.5 fill-current text-current" />
</RadioGroupPrimitive.Indicator> </RadioGroupPrimitive.Indicator>
</RadioGroupPrimitive.Item> </RadioGroupPrimitive.Item>
) );
}) });
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
export { RadioGroup, RadioGroupItem } export { RadioGroup, RadioGroupItem };

108
frontend/src/app/settings/page.tsx
View file

@ -37,6 +37,7 @@ import { useTask } from "@/contexts/task-context";
import { useDebounce } from "@/lib/debounce"; import { useDebounce } from "@/lib/debounce";
import { getFallbackModels, type ModelProvider } from "./helpers/model-helpers"; import { getFallbackModels, type ModelProvider } from "./helpers/model-helpers";
import { ModelSelectItems } from "./helpers/model-select-item"; import { ModelSelectItems } from "./helpers/model-select-item";
import { LabelWrapper } from "@/components/label-wrapper";
const MAX_SYSTEM_PROMPT_CHARS = 2000; const MAX_SYSTEM_PROMPT_CHARS = 2000;
@ -797,29 +798,35 @@ function KnowledgeSourcesPage() {
<CardContent> <CardContent>
<div className="space-y-6"> <div className="space-y-6">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="model-select" className="text-base font-medium"> <LabelWrapper
Language model helperText=""
<span className="text-red-500">*</span> id="model-select"
</Label> label="Language model"
<Select required
value={
settings.agent?.llm_model ||
modelsData?.language_models?.find((m) => m.default)?.value ||
"gpt-4"
}
onValueChange={handleModelChange}
> >
<SelectTrigger id="model-select"> <Select
<SelectValue placeholder="Select a model" /> value={
</SelectTrigger> settings.agent?.llm_model ||
<SelectContent> modelsData?.language_models?.find((m) => m.default)
<ModelSelectItems ?.value ||
models={modelsData?.language_models} "gpt-4"
fallbackModels={getFallbackModels(currentProvider).language} }
provider={currentProvider} onValueChange={handleModelChange}
/> >
</SelectContent> <SelectTrigger id="model-select">
</Select> <SelectValue placeholder="Select a model" />
</SelectTrigger>
<SelectContent>
<ModelSelectItems
models={modelsData?.language_models}
fallbackModels={
getFallbackModels(currentProvider).language
}
provider={currentProvider}
/>
</SelectContent>
</Select>
</LabelWrapper>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="system-prompt" className="text-base font-medium"> <Label htmlFor="system-prompt" className="text-base font-medium">
@ -950,35 +957,36 @@ function KnowledgeSourcesPage() {
<CardContent> <CardContent>
<div className="space-y-6"> <div className="space-y-6">
<div className="space-y-2"> <div className="space-y-2">
<Label <LabelWrapper
htmlFor="embedding-model-select" helperText="Some helping text"
className="text-base font-medium" id="embedding-model-select"
label="Embedding model"
> >
Embedding model <Select
</Label> // Disabled until API supports multiple embedding models
<Select disabled={true}
// Disabled until API supports multiple embedding models value={
disabled={true} settings.knowledge?.embedding_model ||
value={ modelsData?.embedding_models?.find((m) => m.default)
settings.knowledge?.embedding_model || ?.value ||
modelsData?.embedding_models?.find((m) => m.default)?.value || "text-embedding-ada-002"
"text-embedding-ada-002" }
} onValueChange={handleEmbeddingModelChange}
onValueChange={handleEmbeddingModelChange} >
> <SelectTrigger id="embedding-model-select">
<SelectTrigger id="embedding-model-select"> <SelectValue placeholder="Select an embedding model" />
<SelectValue placeholder="Select an embedding model" /> </SelectTrigger>
</SelectTrigger> <SelectContent>
<SelectContent> <ModelSelectItems
<ModelSelectItems models={modelsData?.embedding_models}
models={modelsData?.embedding_models} fallbackModels={
fallbackModels={ getFallbackModels(currentProvider).embedding
getFallbackModels(currentProvider).embedding }
} provider={currentProvider}
provider={currentProvider} />
/> </SelectContent>
</SelectContent> </Select>
</Select> </LabelWrapper>
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="space-y-2"> <div className="space-y-2">