heimoshuiyu/chatgpt-api-web
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Refactor Settings component to replace native select elements with custom Select components for improved UI consistency and usability

Browse Source
This commit is contained in:
ecwu
2024-12-21 14:10:12 +08:00
parent 685ef3c9d6
commit 5535706a26
1 changed files with 73 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/Settings.tsx
View File

@@ -49,11 +49,14 @@ import {
CardTitle,
} from "@/components/ui/card";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Dialog,
DialogContent,
@@ -152,11 +155,9 @@ const SelectModel = (props: {
}}
/>
) : (
<select
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
<Select
value={props.chatStore.model}
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
const model = e.target.value;
onValueChange={(model: string) => {
props.chatStore.model = model;
props.chatStore.maxTokens = getDefaultParams(
"max",
@@ -165,12 +166,20 @@ const SelectModel = (props: {
props.setChatStore({ ...props.chatStore });
}}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select a model" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Models</SelectLabel>
{Object.keys(models).map((opt) => (
<option key={opt} value={opt}>
<SelectItem key={opt} value={opt}>
{opt}
</option>
</SelectItem>
))}
</select>
</SelectGroup>
</SelectContent>
</Select>
)}
</div>
);
@@ -679,22 +688,21 @@ export default (props: {
<div className="space-y-4">
<div className="space-y-2">
<Label>Language</Label>
<select
className="w-full p-2 rounded-md border border-input"
onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
setLangCode(e.target.value)
}
>
<Select value={langCode} onValueChange={setLangCode}>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select language" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Languages</SelectLabel>
{Object.keys(LANG_OPTIONS).map((opt) => (
<option
key={opt}
value={opt}
selected={opt === langCode}
>
<SelectItem key={opt} value={opt}>
{LANG_OPTIONS[opt].name}
</option>
</SelectItem>
))}
</select>
</SelectGroup>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
@@ -1055,22 +1063,27 @@ export default (props: {
</DialogContent>
</Dialog>
</Label>
<select
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
<Select
value={props.chatStore.tts_voice}
onChange={(
event: React.ChangeEvent<HTMLSelectElement>
) => {
props.chatStore.tts_voice = event.target.value;
onValueChange={(value) => {
props.chatStore.tts_voice = value;
props.setChatStore({ ...props.chatStore });
}}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select a voice" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Voices</SelectLabel>
{TTS_VOICES.map((opt) => (
<option key={opt} value={opt}>
<SelectItem key={opt} value={opt}>
{opt}
</option>
</SelectItem>
))}
</select>
</SelectGroup>
</SelectContent>
</Select>
</div>
<Slicer
@@ -1100,22 +1113,27 @@ export default (props: {
</DialogContent>
</Dialog>
</Label>
<select
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
<Select
value={props.chatStore.tts_format}
onChange={(
event: React.ChangeEvent<HTMLSelectElement>
) => {
props.chatStore.tts_format = event.target.value;
onValueChange={(value) => {
props.chatStore.tts_format = value;
props.setChatStore({ ...props.chatStore });
}}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select a format" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Formats</SelectLabel>
{TTS_FORMAT.map((opt) => (
<option key={opt} value={opt}>
<SelectItem key={opt} value={opt}>
{opt}
</option>
</SelectItem>
))}
</select>
</SelectGroup>
</SelectContent>
</Select>
</div>
</div>
</AccordionContent>