Skip to content

fix(webui): model config uiux #146

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GCWing merged 1 commit into from
Mar 14, 2026
Merged

fix(webui): model config uiux #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions src/web-ui/src/component-library/components/Select/Select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,10 @@
border-radius: 3px;
color: var(--color-text-primary, #e8e8e8);
font-size: var(--font-size-sm, 14px);
outline: none;
outline: none !important;
box-shadow: none !important;
appearance: none;
-webkit-appearance: none;
transition: all var(--motion-fast, 0.15s) var(--easing-standard, cubic-bezier(0.4, 0, 0.2, 1));

&::placeholder {
Expand All @@ -297,9 +300,11 @@
background: var(--element-bg-soft, rgba(255, 255, 255, 0.08));
}

&:focus {
&:focus,
&:focus-visible {
background: var(--element-bg-soft, rgba(255, 255, 255, 0.08));
box-shadow: inset 0 0 0 1px var(--color-accent-500, #60a5fa);
outline: none !important;
box-shadow: none !important;
}
}

Expand Down
7 changes: 7 additions & 0 deletions src/web-ui/src/infrastructure/config/components/AIModelConfig.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,13 @@
}
}

&__provider-group-actions {
display: inline-flex;
align-items: center;
gap: $size-gap-1;
flex-shrink: 0;
}

&__meta-tag {
flex-shrink: 0;
font-size: $font-size-xs;
Expand Down
165 changes: 94 additions & 71 deletions src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,12 @@ const AIModelConfig: React.FC = () => {
],
[]
);
const requestFormatLabelMap = useMemo(
() => Object.fromEntries(
requestFormatOptions.map(option => [String(option.value), option.label])
) as Record<string, string>,
[requestFormatOptions]
);

const reasoningEffortOptions = useMemo(
() => [
Expand Down Expand Up @@ -541,7 +547,7 @@ const AIModelConfig: React.FC = () => {
setIsEditing(true);
};

const handleAddModelToExistingProvider = (config: AIModelConfigType) => {
const handleEditProvider = (config: AIModelConfigType) => {
resetRemoteModelDiscovery();
setManualModelInput('');
setShowApiKey(false);
Expand Down Expand Up @@ -583,6 +589,10 @@ const AIModelConfig: React.FC = () => {
setIsEditing(true);
};

const handleAddModelToExistingProvider = (config: AIModelConfigType) => {
handleEditProvider(config);
};


const handleEdit = (config: AIModelConfigType) => {
resetRemoteModelDiscovery();
Expand Down Expand Up @@ -980,6 +990,7 @@ const AIModelConfig: React.FC = () => {
const renderEditingForm = () => {
if (!isEditing || !editingConfig) return null;
const isFromTemplate = !editingConfig.id && !!currentTemplate;
const isProviderScopedEditing = !editingConfig.id;
const currentProviderLabel = (editingConfig.name || currentTemplate?.name || t('providerSelection.customTitle')).trim() || t('providerSelection.customTitle');
const configuredProviderModels = getConfiguredModelsForProvider(currentProviderLabel);
const configuredProviderModelOptions: SelectOption[] = configuredProviderModels.map(model => ({
Expand Down Expand Up @@ -1119,7 +1130,7 @@ const AIModelConfig: React.FC = () => {
<>
<div className="bitfun-ai-model-config__form bitfun-ai-model-config__form--modal">
<ConfigPageSection
title={t('editSubtitle')}
title={isProviderScopedEditing ? t('editProviderSubtitle') : t('editSubtitle')}
className="bitfun-ai-model-config__edit-section"
>
{isFromTemplate ? (
Expand Down Expand Up @@ -1259,69 +1270,73 @@ const AIModelConfig: React.FC = () => {
</>
) : (
<>
<ConfigPageRow label={`${t('form.configName')} *`} align="center" wide>
<Input value={editingConfig.name || ''} onChange={(e) => setEditingConfig(prev => ({ ...prev, name: e.target.value }))} placeholder={t('form.configNamePlaceholder')} inputSize="small" />
</ConfigPageRow>
<ConfigPageRow label={`${t('form.baseUrl')} *`} align="center" wide>
<div className="bitfun-ai-model-config__control-stack">
<Input
type="url"
value={editingConfig.base_url || ''}
onChange={(e) => {
resetRemoteModelDiscovery();
setEditingConfig(prev => ({
...prev,
base_url: e.target.value,
request_url: resolveRequestUrl(e.target.value, prev?.provider || 'openai', prev?.model_name || '')
}));
}}
onFocus={(e) => e.target.select()}
placeholder={'https://open.bigmodel.cn/api/paas/v4/chat/completions'}
inputSize="small"
/>
{editingConfig.base_url && (
<div className="bitfun-ai-model-config__resolved-url">
{isProviderScopedEditing && (
<>
<ConfigPageRow label={`${t('form.configName')} *`} align="center" wide>
<Input value={editingConfig.name || ''} onChange={(e) => setEditingConfig(prev => ({ ...prev, name: e.target.value }))} placeholder={t('form.configNamePlaceholder')} inputSize="small" />
</ConfigPageRow>
<ConfigPageRow label={`${t('form.baseUrl')} *`} align="center" wide>
<div className="bitfun-ai-model-config__control-stack">
<Input
value={resolveRequestUrl(editingConfig.base_url, editingConfig.provider || 'openai', editingConfig.model_name || '')}
readOnly
type="url"
value={editingConfig.base_url || ''}
onChange={(e) => {
resetRemoteModelDiscovery();
setEditingConfig(prev => ({
...prev,
base_url: e.target.value,
request_url: resolveRequestUrl(e.target.value, prev?.provider || 'openai', prev?.model_name || '')
}));
}}
onFocus={(e) => e.target.select()}
placeholder={'https://open.bigmodel.cn/api/paas/v4/chat/completions'}
inputSize="small"
className="bitfun-ai-model-config__resolved-url-input"
/>
{editingConfig.base_url && (
<div className="bitfun-ai-model-config__resolved-url">
<Input
value={resolveRequestUrl(editingConfig.base_url, editingConfig.provider || 'openai', editingConfig.model_name || '')}
readOnly
onFocus={(e) => e.target.select()}
inputSize="small"
className="bitfun-ai-model-config__resolved-url-input"
/>
</div>
)}
</div>
)}
</div>
</ConfigPageRow>
<ConfigPageRow label={`${t('form.apiKey')} *`} align="center" wide>
<Input
type={showApiKey ? 'text' : 'password'}
value={editingConfig.api_key || ''}
onChange={(e) => {
resetRemoteModelDiscovery();
setEditingConfig(prev => ({ ...prev, api_key: e.target.value }));
}}
placeholder={t('form.apiKeyPlaceholder')}
inputSize="small"
suffix={apiKeySuffix}
/>
</ConfigPageRow>
</ConfigPageRow>
<ConfigPageRow label={`${t('form.apiKey')} *`} align="center" wide>
<Input
type={showApiKey ? 'text' : 'password'}
value={editingConfig.api_key || ''}
onChange={(e) => {
resetRemoteModelDiscovery();
setEditingConfig(prev => ({ ...prev, api_key: e.target.value }));
}}
placeholder={t('form.apiKeyPlaceholder')}
inputSize="small"
suffix={apiKeySuffix}
/>
</ConfigPageRow>
<ConfigPageRow label={t('form.provider')} align="center" wide>
<Select value={editingConfig.provider || 'openai'} onChange={(value) => {
const provider = value as string;
resetRemoteModelDiscovery();
setEditingConfig(prev => ({
...prev,
provider,
request_url: resolveRequestUrl(prev?.base_url || '', provider, prev?.model_name || ''),
reasoning_effort: isResponsesProvider(provider) ? (prev?.reasoning_effort || 'medium') : undefined,
}));
}} placeholder={t('form.providerPlaceholder')} options={requestFormatOptions} size="small" />
</ConfigPageRow>
</>
)}
</>
)}

{!isFromTemplate && (
<>
<ConfigPageRow label={t('form.provider')} align="center" wide>
<Select value={editingConfig.provider || 'openai'} onChange={(value) => {
const provider = value as string;
resetRemoteModelDiscovery();
setEditingConfig(prev => ({
...prev,
provider,
request_url: resolveRequestUrl(prev?.base_url || '', provider, prev?.model_name || ''),
reasoning_effort: isResponsesProvider(provider) ? (prev?.reasoning_effort || 'medium') : undefined,
}));
}} placeholder={t('form.providerPlaceholder')} options={requestFormatOptions} size="small" />
</ConfigPageRow>
<ConfigPageRow label={`${t('form.modelSelection')} *`} description={editingConfig.category === 'speech_recognition' ? t('form.modelNameHint') : undefined} wide multiline>
<div className="bitfun-ai-model-config__control-stack">
<div className="bitfun-ai-model-config__model-picker-row">
Expand Down Expand Up @@ -1470,9 +1485,6 @@ const AIModelConfig: React.FC = () => {
<span className="bitfun-ai-model-config__meta-tag">
{t(`category.${config.category}`)}
</span>
<span className="bitfun-ai-model-config__meta-tag">
{config.provider}
</span>
{testResult && (
<span
className={`bitfun-ai-model-config__status-dot ${testResult.success ? 'is-success' : 'is-error'}`}
Expand All @@ -1497,10 +1509,6 @@ const AIModelConfig: React.FC = () => {
<span className="bitfun-ai-model-config__details-label">{t('details.modelName')}</span>
<span className="bitfun-ai-model-config__details-value">{config.model_name}</span>
</div>
<div className="bitfun-ai-model-config__details-item">
<span className="bitfun-ai-model-config__details-label">{t('details.provider')}</span>
<span className="bitfun-ai-model-config__details-value">{config.provider}</span>
</div>
<div className="bitfun-ai-model-config__details-item">
<span className="bitfun-ai-model-config__details-label">{t('details.contextWindow')}</span>
<span className="bitfun-ai-model-config__details-value">{config.context_window?.toLocaleString() || '128,000'}</span>
Expand Down Expand Up @@ -1657,15 +1665,28 @@ const AIModelConfig: React.FC = () => {
<div className="bitfun-ai-model-config__provider-group-title">
<span>{group.providerName}</span>
<span className="bitfun-ai-model-config__provider-group-count">{group.models.length}</span>
<span className="bitfun-ai-model-config__meta-tag">
{requestFormatLabelMap[group.models[0]?.provider || 'openai'] || (group.models[0]?.provider || 'openai')}
</span>
</div>
<div className="bitfun-ai-model-config__provider-group-actions">
<IconButton
variant="ghost"
size="small"
onClick={() => handleEditProvider(group.models[0])}
tooltip={t('actions.edit')}
>
<Edit2 size={14} />
</IconButton>
<IconButton
variant="ghost"
size="small"
onClick={() => handleAddModelToExistingProvider(group.models[0])}
tooltip={t('actions.addModel')}
>
<Plus size={14} />
</IconButton>
</div>
<IconButton
variant="ghost"
size="small"
onClick={() => handleAddModelToExistingProvider(group.models[0])}
tooltip={t('actions.addModel')}
>
<Plus size={14} />
</IconButton>
</div>
<div className="bitfun-ai-model-config__provider-group-list">
{group.models.map(config => renderModelCollectionItem(config))}
Expand Down Expand Up @@ -1733,7 +1754,9 @@ const AIModelConfig: React.FC = () => {
onClose={closeEditingModal}
title={editingConfig?.id
? t('editModel')
: (currentTemplate ? `${t('newModel')} - ${currentTemplate.name}` : t('newModel'))}
: (selectedModelDrafts.some(draft => !!draft.configId)
? t('editProvider')
: (currentTemplate ? `${t('newProvider')} - ${currentTemplate.name}` : t('newProvider')))}
size="xlarge"
>
{renderEditingForm()}
Expand Down
28 changes: 18 additions & 10 deletions src/web-ui/src/infrastructure/config/components/DefaultModelConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,30 +52,22 @@ export const DefaultModelConfig: React.FC = () => {
const [defaultModels, setDefaultModels] = useState<DefaultModels>({ primary: null, fast: null });
const [optionalCapabilities, setOptionalCapabilities] = useState<OptionalCapabilityModels>({});


useEffect(() => {
loadData();
}, []);

const loadData = async () => {
const loadData = useCallback(async () => {
try {
setLoading(true);


const [allModels, defaultModelsConfig] = await Promise.all([
configManager.getConfig<AIModelConfig[]>('ai.models') || [],
configManager.getConfig<any>('ai.default_models') || {},
]);

setModels(allModels);


setDefaultModels({
primary: defaultModelsConfig?.primary || null,
fast: defaultModelsConfig?.fast || null,
});


setOptionalCapabilities({
image_understanding: defaultModelsConfig?.image_understanding,
image_generation: defaultModelsConfig?.image_generation,
Expand All @@ -87,7 +79,23 @@ export const DefaultModelConfig: React.FC = () => {
} finally {
setLoading(false);
}
};
}, [t]);

useEffect(() => {
void loadData();

const unsubscribeModels = configManager.watch('ai.models', () => {
void loadData();
});
const unsubscribeDefaultModels = configManager.watch('ai.default_models', () => {
void loadData();
});

return () => {
unsubscribeModels();
unsubscribeDefaultModels();
};
}, [loadData]);


const getModelName = useCallback((modelId: string | null | undefined): string | undefined => {
Expand Down
3 changes: 3 additions & 0 deletions src/web-ui/src/locales/en-US/settings/ai-model.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
{
"title": "Model Configuration",
"subtitle": "Configure and manage AI model providers",
"editProvider": "Edit Provider Configuration",
"newProvider": "New Provider Configuration",
"editModel": "Edit Model Configuration",
"newModel": "New Model Configuration",
"editProviderSubtitle": "Basic Provider Parameters",
"editSubtitle": "Basic Model Parameters",
"confirmDelete": "Are you sure you want to delete this configuration?",
"providerSelection": {
Expand Down
3 changes: 3 additions & 0 deletions src/web-ui/src/locales/zh-CN/settings/ai-model.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
{
"title": "模型配置",
"subtitle": "配置和管理 AI 模型提供商",
"editProvider": "编辑服务商配置",
"newProvider": "新建服务商配置",
"editModel": "编辑模型配置",
"newModel": "新建模型配置",
"editProviderSubtitle": "基础服务商参数配置",
"editSubtitle": "基础模型参数配置",
"confirmDelete": "确定删除此配置？",
"providerSelection": {
Expand Down
Loading