fix(models): align selector metadata

This commit is contained in:
RockChinQ
2026-09-12 00:57:55 +08:00
parent 33b4035140
commit 50d544aa6f
2 changed files with 45 additions and 13 deletions
@@ -74,6 +74,10 @@ import ReasoningLevelPicker, {
import LangBotModelMetadata from '@/app/home/components/model-availability/LangBotModelMetadata'; import LangBotModelMetadata from '@/app/home/components/model-availability/LangBotModelMetadata';
import { useLangBotModelAvailability } from '@/app/home/components/model-availability/useLangBotModelAvailability'; import { useLangBotModelAvailability } from '@/app/home/components/model-availability/useLangBotModelAvailability';
const MODEL_SELECT_TRIGGER_CLASS =
'w-full min-w-0 bg-[#ffffff] dark:bg-[#2a2a2e] *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:flex-1';
const MODEL_SELECT_ITEM_CLASS = '*:[span]:last:min-w-0 *:[span]:last:flex-1';
function hasUsableUuid<T extends { uuid?: string | null }>( function hasUsableUuid<T extends { uuid?: string | null }>(
item: T, item: T,
): item is T & { uuid: string } { ): item is T & { uuid: string } {
@@ -615,7 +619,7 @@ export default function DynamicFormItemComponent({
<div className="flex w-full max-w-md min-w-0 items-center gap-1.5"> <div className="flex w-full max-w-md min-w-0 items-center gap-1.5">
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<Select value={field.value} onValueChange={field.onChange}> <Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger className="min-w-0 bg-[#ffffff] dark:bg-[#2a2a2e]"> <SelectTrigger className={MODEL_SELECT_TRIGGER_CLASS}>
<SelectValue placeholder={t('models.selectModel')} /> <SelectValue placeholder={t('models.selectModel')} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -623,7 +627,11 @@ export default function DynamicFormItemComponent({
<SelectGroup key={providerName}> <SelectGroup key={providerName}>
<SelectLabel>{providerName}</SelectLabel> <SelectLabel>{providerName}</SelectLabel>
{models.map((model) => ( {models.map((model) => (
<SelectItem key={model.uuid} value={model.uuid}> <SelectItem
key={model.uuid}
value={model.uuid}
className={MODEL_SELECT_ITEM_CLASS}
>
{renderModelOption(model)} {renderModelOption(model)}
</SelectItem> </SelectItem>
))} ))}
@@ -719,7 +727,11 @@ export default function DynamicFormItemComponent({
</span> </span>
</SelectLabel> </SelectLabel>
{models.map((model) => ( {models.map((model) => (
<SelectItem key={model.uuid} value={model.uuid}> <SelectItem
key={model.uuid}
value={model.uuid}
className={MODEL_SELECT_ITEM_CLASS}
>
{renderModelOption(model)} {renderModelOption(model)}
</SelectItem> </SelectItem>
))} ))}
@@ -797,7 +809,7 @@ export default function DynamicFormItemComponent({
<div className="flex w-full max-w-md min-w-0 items-center gap-1.5"> <div className="flex w-full max-w-md min-w-0 items-center gap-1.5">
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<Select value={field.value} onValueChange={field.onChange}> <Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger className="min-w-0 bg-[#ffffff] dark:bg-[#2a2a2e]"> <SelectTrigger className={MODEL_SELECT_TRIGGER_CLASS}>
<SelectValue <SelectValue
placeholder={t('knowledge.selectEmbeddingModel')} placeholder={t('knowledge.selectEmbeddingModel')}
/> />
@@ -808,7 +820,11 @@ export default function DynamicFormItemComponent({
<SelectGroup key={providerName}> <SelectGroup key={providerName}>
<SelectLabel>{providerName}</SelectLabel> <SelectLabel>{providerName}</SelectLabel>
{models.map((model) => ( {models.map((model) => (
<SelectItem key={model.uuid} value={model.uuid}> <SelectItem
key={model.uuid}
value={model.uuid}
className={MODEL_SELECT_ITEM_CLASS}
>
{renderModelOption(model)} {renderModelOption(model)}
</SelectItem> </SelectItem>
))} ))}
@@ -900,7 +916,11 @@ export default function DynamicFormItemComponent({
</span> </span>
</SelectLabel> </SelectLabel>
{models.map((model) => ( {models.map((model) => (
<SelectItem key={model.uuid} value={model.uuid}> <SelectItem
key={model.uuid}
value={model.uuid}
className={MODEL_SELECT_ITEM_CLASS}
>
{renderModelOption(model)} {renderModelOption(model)}
</SelectItem> </SelectItem>
))} ))}
@@ -955,7 +975,7 @@ export default function DynamicFormItemComponent({
value={field.value || '__none__'} value={field.value || '__none__'}
onValueChange={(v) => field.onChange(v === '__none__' ? '' : v)} onValueChange={(v) => field.onChange(v === '__none__' ? '' : v)}
> >
<SelectTrigger className="min-w-0 bg-[#ffffff] dark:bg-[#2a2a2e]"> <SelectTrigger className={MODEL_SELECT_TRIGGER_CLASS}>
<SelectValue placeholder={t('models.rerank')} /> <SelectValue placeholder={t('models.rerank')} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -965,7 +985,11 @@ export default function DynamicFormItemComponent({
<SelectGroup key={providerName}> <SelectGroup key={providerName}>
<SelectLabel>{providerName}</SelectLabel> <SelectLabel>{providerName}</SelectLabel>
{models.map((model) => ( {models.map((model) => (
<SelectItem key={model.uuid} value={model.uuid}> <SelectItem
key={model.uuid}
value={model.uuid}
className={MODEL_SELECT_ITEM_CLASS}
>
{renderModelOption(model)} {renderModelOption(model)}
</SelectItem> </SelectItem>
))} ))}
@@ -1074,7 +1098,7 @@ export default function DynamicFormItemComponent({
placeholder: string, placeholder: string,
) => ( ) => (
<Select value={value} onValueChange={onChange}> <Select value={value} onValueChange={onChange}>
<SelectTrigger className="min-w-0 bg-[#ffffff] dark:bg-[#2a2a2e]"> <SelectTrigger className={MODEL_SELECT_TRIGGER_CLASS}>
<SelectValue placeholder={placeholder} /> <SelectValue placeholder={placeholder} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -1083,7 +1107,11 @@ export default function DynamicFormItemComponent({
<SelectGroup key={providerName}> <SelectGroup key={providerName}>
<SelectLabel>{providerName}</SelectLabel> <SelectLabel>{providerName}</SelectLabel>
{models.map((model) => ( {models.map((model) => (
<SelectItem key={model.uuid} value={model.uuid}> <SelectItem
key={model.uuid}
value={model.uuid}
className={MODEL_SELECT_ITEM_CLASS}
>
{renderModelOption(model)} {renderModelOption(model)}
</SelectItem> </SelectItem>
))} ))}
@@ -1180,7 +1208,11 @@ export default function DynamicFormItemComponent({
</span> </span>
</SelectLabel> </SelectLabel>
{models.map((model) => ( {models.map((model) => (
<SelectItem key={model.uuid} value={model.uuid}> <SelectItem
key={model.uuid}
value={model.uuid}
className={MODEL_SELECT_ITEM_CLASS}
>
{renderModelOption(model)} {renderModelOption(model)}
</SelectItem> </SelectItem>
))} ))}
@@ -64,12 +64,12 @@ export default function LangBotModelMetadata({
<p>{t('models.pricing.title')}</p> <p>{t('models.pricing.title')}</p>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{t('models.pricing.input', { {t('models.pricing.input', {
credits: inputCredits, credits: input,
})} })}
</p> </p>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{t('models.pricing.output', { {t('models.pricing.output', {
credits: outputCredits, credits: output,
})} })}
</p> </p>
</div> </div>