-
{t('common.theme')}
-
{
- if (value) setTheme(value);
- }}
- className="justify-start"
- >
-
-
-
-
-
-
-
-
-
-
+
{
+ handleAccountSettingsChange(true);
+ setPopoverOpen(false);
+ }}
+ >
+
+ {userEmail ? userEmail.charAt(0).toUpperCase() : 'U'}
+
+
+ {userEmail || t('account.settings')}
+
-
-
- {t('common.language')}
-
+
+
-
-
- {t('common.integration')}
-
+
{t('common.apiIntegration')}
-
-
-
- {t('common.account')}
- {systemInfo?.allow_change_password && (
-
- )}
-
+
);
}
+
+function SidebarLoadingFallback() {
+ return (
+
+ );
+}
+
+export default function HomeSidebar({
+ onSelectedChangeAction,
+}: {
+ onSelectedChangeAction: (sidebarChild: SidebarChildVO) => void;
+}) {
+ return (
+
}>
+
+
+ );
+}
diff --git a/web/src/app/home/components/home-sidebar/sidbarConfigList.tsx b/web/src/app/home/components/home-sidebar/sidbarConfigList.tsx
index b3edb98a..868ac5b4 100644
--- a/web/src/app/home/components/home-sidebar/sidbarConfigList.tsx
+++ b/web/src/app/home/components/home-sidebar/sidbarConfigList.tsx
@@ -27,27 +27,6 @@ export const sidebarConfigList = [
zh_Hans: 'https://docs.langbot.app/zh/deploy/platforms/readme.html',
},
}),
- new SidebarChildVO({
- id: 'models',
- name: t('models.title'),
- icon: (
-
- ),
- route: '/home/models',
- description: t('models.description'),
- helpLink: {
- en_US: 'https://docs.langbot.app/en/deploy/models/readme.html',
- zh_Hans: 'https://docs.langbot.app/zh/deploy/models/readme.html',
- },
- }),
-
new SidebarChildVO({
id: 'pipelines',
name: t('pipelines.title'),
diff --git a/web/src/app/home/components/models-dialog/ModelsDialog.tsx b/web/src/app/home/components/models-dialog/ModelsDialog.tsx
new file mode 100644
index 00000000..c860c9a8
--- /dev/null
+++ b/web/src/app/home/components/models-dialog/ModelsDialog.tsx
@@ -0,0 +1,496 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Plus, Boxes } from 'lucide-react';
+import { httpClient, systemInfo } from '@/app/infra/http/HttpClient';
+import { ModelProvider } from '@/app/infra/entities/api';
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+import { useTranslation } from 'react-i18next';
+import ProviderForm from './component/provider-form/ProviderForm';
+import { ProviderCard } from './components';
+import {
+ ExtraArg,
+ ModelType,
+ TestResult,
+ ProviderModels,
+ LANGBOT_MODELS_PROVIDER_REQUESTER,
+} from './types';
+import { CustomApiError } from '@/app/infra/entities/common';
+
+interface ModelsDialogProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+}
+
+function convertExtraArgsToObject(
+ args: ExtraArg[],
+): Record
{
+ const obj: Record = {};
+ args.forEach((arg) => {
+ if (arg.key.trim()) {
+ if (arg.type === 'number') obj[arg.key] = Number(arg.value);
+ else if (arg.type === 'boolean') obj[arg.key] = arg.value === 'true';
+ else obj[arg.key] = arg.value;
+ }
+ });
+ return obj;
+}
+
+export default function ModelsDialog({
+ open,
+ onOpenChange,
+}: ModelsDialogProps) {
+ const { t } = useTranslation();
+
+ const [providers, setProviders] = useState([]);
+ const [accountType, setAccountType] = useState<'local' | 'space'>('local');
+ const [spaceCredits, setSpaceCredits] = useState(null);
+
+ // Expanded providers and their models
+ const [expandedProviders, setExpandedProviders] = useState>(
+ new Set(),
+ );
+ const [providerModels, setProviderModels] = useState<
+ Record
+ >({});
+ const [loadingProviders, setLoadingProviders] = useState>(
+ new Set(),
+ );
+
+ // Provider form modal
+ const [providerFormOpen, setProviderFormOpen] = useState(false);
+ const [editingProviderId, setEditingProviderId] = useState(
+ null,
+ );
+
+ // Popover states
+ const [addModelPopoverOpen, setAddModelPopoverOpen] = useState(
+ null,
+ );
+ const [editModelPopoverOpen, setEditModelPopoverOpen] = useState<
+ string | null
+ >(null);
+ const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(
+ null,
+ );
+
+ // Form states
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [isTesting, setIsTesting] = useState(false);
+ const [testResult, setTestResult] = useState(null);
+
+ // Track if providers have been loaded initially
+ const [providersLoaded, setProvidersLoaded] = useState(false);
+
+ // Separate LangBot Models provider (hide when models service is disabled)
+ const langbotProvider = systemInfo.disable_models_service
+ ? undefined
+ : providers.find((p) => p.requester === LANGBOT_MODELS_PROVIDER_REQUESTER);
+ const otherProviders = providers.filter(
+ (p) => p.requester !== LANGBOT_MODELS_PROVIDER_REQUESTER,
+ );
+
+ useEffect(() => {
+ if (open) {
+ loadUserInfo();
+ loadProviders();
+ }
+ }, [open]);
+
+ // Auto-expand LangBot Models when no external providers exist
+ useEffect(() => {
+ if (providersLoaded && langbotProvider && otherProviders.length === 0) {
+ if (!expandedProviders.has(langbotProvider.uuid)) {
+ setExpandedProviders(new Set([langbotProvider.uuid]));
+ if (!providerModels[langbotProvider.uuid]) {
+ loadProviderModels(langbotProvider.uuid);
+ }
+ }
+ }
+ }, [providersLoaded, providers]);
+
+ async function loadUserInfo() {
+ try {
+ const userInfo = await httpClient.getUserInfo();
+ setAccountType(userInfo.account_type);
+ if (userInfo.account_type === 'space') {
+ const creditsInfo = await httpClient.getSpaceCredits();
+ setSpaceCredits(creditsInfo.credits);
+ }
+ } catch {
+ setAccountType('local');
+ }
+ }
+
+ async function loadProviders() {
+ try {
+ const resp = await httpClient.getModelProviders();
+ setProviders(resp.providers);
+ setProvidersLoaded(true);
+ } catch (err) {
+ console.error('Failed to load providers', err);
+ toast.error(t('models.loadError'));
+ }
+ }
+
+ async function loadProviderModels(providerUuid: string, silent = false) {
+ if (loadingProviders.has(providerUuid)) return;
+
+ if (!silent) {
+ setLoadingProviders((prev) => new Set(prev).add(providerUuid));
+ }
+ try {
+ const [llmResp, embeddingResp] = await Promise.all([
+ httpClient.getProviderLLMModels(providerUuid),
+ httpClient.getProviderEmbeddingModels(providerUuid),
+ ]);
+ setProviderModels((prev) => ({
+ ...prev,
+ [providerUuid]: {
+ llm: llmResp.models,
+ embedding: embeddingResp.models,
+ },
+ }));
+ } catch (err) {
+ console.error('Failed to load models', err);
+ } finally {
+ if (!silent) {
+ setLoadingProviders((prev) => {
+ const next = new Set(prev);
+ next.delete(providerUuid);
+ return next;
+ });
+ }
+ }
+ }
+
+ function toggleProvider(providerUuid: string) {
+ setExpandedProviders((prev) => {
+ const next = new Set(prev);
+ if (next.has(providerUuid)) {
+ next.delete(providerUuid);
+ } else {
+ next.add(providerUuid);
+ if (!providerModels[providerUuid]) {
+ loadProviderModels(providerUuid);
+ }
+ }
+ return next;
+ });
+ }
+
+ function handleCreateProvider() {
+ setEditingProviderId(null);
+ setProviderFormOpen(true);
+ }
+
+ function handleEditProvider(providerId: string) {
+ setEditingProviderId(providerId);
+ setProviderFormOpen(true);
+ }
+
+ async function handleDeleteProvider(providerId: string) {
+ try {
+ await httpClient.deleteModelProvider(providerId);
+ toast.success(t('models.providerDeleted'));
+ loadProviders();
+ } catch (err) {
+ toast.error(t('models.providerDeleteError') + (err as Error).message);
+ }
+ }
+
+ function handleSpaceLogin() {
+ window.location.href = '/auth/space';
+ }
+
+ async function handleAddModel(
+ providerUuid: string,
+ modelType: ModelType,
+ name: string,
+ abilities: string[],
+ extraArgs: ExtraArg[],
+ ) {
+ if (!name.trim()) {
+ toast.error(t('models.modelNameRequired'));
+ return;
+ }
+ setIsSubmitting(true);
+ try {
+ const extraArgsObj = convertExtraArgsToObject(extraArgs);
+
+ if (modelType === 'llm') {
+ await httpClient.createProviderLLMModel({
+ name,
+ provider_uuid: providerUuid,
+ abilities,
+ extra_args: extraArgsObj,
+ } as never);
+ } else {
+ await httpClient.createProviderEmbeddingModel({
+ name,
+ provider_uuid: providerUuid,
+ extra_args: extraArgsObj,
+ } as never);
+ }
+ setAddModelPopoverOpen(null);
+ loadProviderModels(providerUuid, true);
+ loadProviders();
+ } catch (err) {
+ toast.error(t('models.createError') + (err as Error).message);
+ } finally {
+ setIsSubmitting(false);
+ }
+ }
+
+ async function handleUpdateModel(
+ providerUuid: string,
+ modelId: string,
+ modelType: ModelType,
+ name: string,
+ abilities: string[],
+ extraArgs: ExtraArg[],
+ ) {
+ if (!name.trim()) {
+ toast.error(t('models.modelNameRequired'));
+ return;
+ }
+ setIsSubmitting(true);
+ try {
+ const extraArgsObj = convertExtraArgsToObject(extraArgs);
+
+ if (modelType === 'llm') {
+ await httpClient.updateProviderLLMModel(modelId, {
+ name,
+ provider_uuid: providerUuid,
+ abilities,
+ extra_args: extraArgsObj,
+ } as never);
+ } else {
+ await httpClient.updateProviderEmbeddingModel(modelId, {
+ name,
+ provider_uuid: providerUuid,
+ extra_args: extraArgsObj,
+ } as never);
+ }
+ setEditModelPopoverOpen(null);
+ loadProviderModels(providerUuid, true);
+ loadProviders();
+ } catch (err) {
+ toast.error(t('models.saveError') + (err as Error).message);
+ } finally {
+ setIsSubmitting(false);
+ }
+ }
+
+ async function handleDeleteModel(
+ providerUuid: string,
+ modelId: string,
+ modelType: ModelType,
+ ) {
+ try {
+ if (modelType === 'llm') {
+ await httpClient.deleteProviderLLMModel(modelId);
+ } else {
+ await httpClient.deleteProviderEmbeddingModel(modelId);
+ }
+ toast.success(t('models.deleteSuccess'));
+ loadProviderModels(providerUuid, true);
+ loadProviders();
+ } catch (err) {
+ toast.error(t('models.deleteError') + (err as Error).message);
+ }
+ }
+
+ async function handleTestModel(
+ providerUuid: string,
+ name: string,
+ modelType: ModelType,
+ abilities: string[],
+ extraArgs: ExtraArg[],
+ ) {
+ setIsTesting(true);
+ setTestResult(null);
+ const startTime = Date.now();
+ try {
+ const extraArgsObj = convertExtraArgsToObject(extraArgs);
+
+ // Get the provider info
+ const provider = providers.find((p) => p.uuid === providerUuid);
+ const providerData = {
+ requester: provider?.requester || '',
+ base_url: provider?.base_url || '',
+ api_keys: provider?.api_keys || [],
+ };
+
+ if (modelType === 'llm') {
+ await httpClient.testLLMModel('_', {
+ uuid: '',
+ name,
+ provider_uuid: '',
+ provider: providerData,
+ abilities,
+ extra_args: extraArgsObj,
+ } as never);
+ } else {
+ await httpClient.testEmbeddingModel('_', {
+ uuid: '',
+ name,
+ provider_uuid: '',
+ provider: providerData,
+ extra_args: extraArgsObj,
+ } as never);
+ }
+ const duration = Date.now() - startTime;
+ setTestResult({ success: true, duration });
+ } catch (err) {
+ console.error('Failed to test model', err);
+ toast.error(t('models.testError') + ': ' + (err as CustomApiError).msg);
+ setTestResult(null);
+ } finally {
+ setIsTesting(false);
+ }
+ }
+
+ function handleFormClose() {
+ setProviderFormOpen(false);
+ loadProviders();
+ // Refresh expanded providers
+ expandedProviders.forEach((uuid) => loadProviderModels(uuid));
+ }
+
+ function renderProviderCard(
+ provider: ModelProvider,
+ isLangBotModels: boolean = false,
+ ) {
+ return (
+ toggleProvider(provider.uuid)}
+ onEditProvider={() => handleEditProvider(provider.uuid)}
+ onDeleteProvider={() => handleDeleteProvider(provider.uuid)}
+ onSpaceLogin={handleSpaceLogin}
+ onOpenAddModel={() => setAddModelPopoverOpen(provider.uuid)}
+ onCloseAddModel={() => setAddModelPopoverOpen(null)}
+ onAddModel={(modelType, name, abilities, extraArgs) =>
+ handleAddModel(provider.uuid, modelType, name, abilities, extraArgs)
+ }
+ onOpenEditModel={(modelId) => setEditModelPopoverOpen(modelId)}
+ onCloseEditModel={() => setEditModelPopoverOpen(null)}
+ onUpdateModel={(modelId, modelType, name, abilities, extraArgs) =>
+ handleUpdateModel(
+ provider.uuid,
+ modelId,
+ modelType,
+ name,
+ abilities,
+ extraArgs,
+ )
+ }
+ onOpenDeleteConfirm={(modelId) => setDeleteConfirmOpen(modelId)}
+ onCloseDeleteConfirm={() => setDeleteConfirmOpen(null)}
+ onDeleteModel={(modelId, modelType) =>
+ handleDeleteModel(provider.uuid, modelId, modelType)
+ }
+ onTestModel={(name, modelType, abilities, extraArgs) =>
+ handleTestModel(provider.uuid, name, modelType, abilities, extraArgs)
+ }
+ isSubmitting={isSubmitting}
+ isTesting={isTesting}
+ testResult={testResult}
+ onResetTestResult={() => setTestResult(null)}
+ />
+ );
+ }
+
+ return (
+ <>
+
+
+
+
+ );
+}
diff --git a/web/src/app/home/components/models-dialog/component/provider-form/ProviderForm.tsx b/web/src/app/home/components/models-dialog/component/provider-form/ProviderForm.tsx
new file mode 100644
index 00000000..94e4b0f9
--- /dev/null
+++ b/web/src/app/home/components/models-dialog/component/provider-form/ProviderForm.tsx
@@ -0,0 +1,325 @@
+import { useEffect, useState } from 'react';
+import { httpClient } from '@/app/infra/http/HttpClient';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useTranslation } from 'react-i18next';
+
+import { Button } from '@/components/ui/button';
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
+import { DialogFooter } from '@/components/ui/dialog';
+import { toast } from 'sonner';
+import { extractI18nObject } from '@/i18n/I18nProvider';
+import { CustomApiError } from '@/app/infra/entities/common';
+
+const getFormSchema = (t: (key: string) => string) =>
+ z.object({
+ name: z.string().min(1, { message: t('models.providerNameRequired') }),
+ requester: z.string().min(1, { message: t('models.requesterRequired') }),
+ base_url: z.string(),
+ api_key: z.string().optional(),
+ });
+
+interface ProviderFormProps {
+ providerId?: string;
+ onFormSubmit: () => void;
+ onFormCancel: () => void;
+}
+
+export default function ProviderForm({
+ providerId,
+ onFormSubmit,
+ onFormCancel,
+}: ProviderFormProps) {
+ const { t } = useTranslation();
+ const formSchema = getFormSchema(t);
+
+ const form = useForm>({
+ resolver: zodResolver(formSchema),
+ defaultValues: {
+ name: '',
+ requester: '',
+ base_url: '',
+ api_key: '',
+ },
+ });
+
+ const [requesterList, setRequesterList] = useState<
+ {
+ label: string;
+ value: string;
+ category: string;
+ defaultUrl: string;
+ description: string;
+ }[]
+ >([]);
+
+ useEffect(() => {
+ loadRequesters();
+ if (providerId) {
+ loadProvider(providerId);
+ }
+ }, [providerId]);
+
+ async function loadRequesters() {
+ const resp = await httpClient.getProviderRequesters();
+ setRequesterList(
+ resp.requesters
+ .filter((item) => item.name !== 'space-chat-completions')
+ .map((item) => ({
+ label: extractI18nObject(item.label),
+ value: item.name,
+ category: item.spec.provider_category || 'manufacturer',
+ defaultUrl:
+ item.spec.config
+ .find((c) => c.name === 'base_url')
+ ?.default?.toString() || '',
+ description: extractI18nObject(item.description),
+ })),
+ );
+ }
+
+ async function loadProvider(id: string) {
+ const resp = await httpClient.getModelProvider(id);
+ const provider = resp.provider;
+
+ form.setValue('name', provider.name);
+ form.setValue('requester', provider.requester);
+ form.setValue('base_url', provider.base_url);
+ form.setValue('api_key', provider.api_keys?.[0] || '');
+ }
+
+ async function handleFormSubmit(values: z.infer) {
+ const data = {
+ name: values.name,
+ requester: values.requester,
+ base_url: values.base_url,
+ api_keys: values.api_key ? [values.api_key] : [],
+ };
+
+ try {
+ if (providerId) {
+ await httpClient.updateModelProvider(providerId, data);
+ toast.success(t('models.providerSaved'));
+ } else {
+ await httpClient.createModelProvider(data);
+ toast.success(t('models.providerCreated'));
+ }
+ onFormSubmit();
+ } catch (err) {
+ toast.error(t('models.providerSaveError') + (err as CustomApiError).msg);
+ }
+ }
+
+ return (
+
+
+ );
+}
diff --git a/web/src/app/home/components/models-dialog/components/AddModelPopover.tsx b/web/src/app/home/components/models-dialog/components/AddModelPopover.tsx
new file mode 100644
index 00000000..ac64d37d
--- /dev/null
+++ b/web/src/app/home/components/models-dialog/components/AddModelPopover.tsx
@@ -0,0 +1,233 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Plus, MessageSquareText, Cpu, Eye, Wrench, Check } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@/components/ui/popover';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useTranslation } from 'react-i18next';
+import { ExtraArg, ModelType, TestResult } from '../types';
+import ExtraArgsEditor from './ExtraArgsEditor';
+
+interface AddModelPopoverProps {
+ isOpen: boolean;
+ onOpen: () => void;
+ onClose: () => void;
+ onAddModel: (
+ modelType: ModelType,
+ name: string,
+ abilities: string[],
+ extraArgs: ExtraArg[],
+ ) => Promise;
+ onTestModel: (
+ name: string,
+ modelType: ModelType,
+ abilities: string[],
+ extraArgs: ExtraArg[],
+ ) => Promise;
+ isSubmitting: boolean;
+ isTesting: boolean;
+ testResult: TestResult | null;
+ onResetTestResult: () => void;
+}
+
+export default function AddModelPopover({
+ isOpen,
+ onOpen,
+ onClose,
+ onAddModel,
+ onTestModel,
+ isSubmitting,
+ isTesting,
+ testResult,
+ onResetTestResult,
+}: AddModelPopoverProps) {
+ const { t } = useTranslation();
+
+ const [tab, setTab] = useState('llm');
+ const [name, setName] = useState('');
+ const [abilities, setAbilities] = useState([]);
+ const [extraArgs, setExtraArgs] = useState([]);
+
+ // Reset form when popover opens
+ useEffect(() => {
+ if (isOpen) {
+ setTab('llm');
+ setName('');
+ setAbilities([]);
+ setExtraArgs([]);
+ onResetTestResult();
+ }
+ }, [isOpen]);
+
+ const handleAdd = async () => {
+ await onAddModel(tab, name, abilities, extraArgs);
+ };
+
+ const handleTest = async () => {
+ await onTestModel(name, tab, tab === 'llm' ? abilities : [], extraArgs);
+ };
+
+ const toggleAbility = (ability: string, checked: boolean) => {
+ if (checked) {
+ setAbilities([...abilities, ability]);
+ } else {
+ setAbilities(abilities.filter((a) => a !== ability));
+ }
+ };
+
+ return (
+ (open ? onOpen() : onClose())}
+ >
+
+
+
+ e.stopPropagation()}
+ >
+ setTab(v as ModelType)}>
+
+
+
+ {t('models.chat')}
+
+
+
+ {t('models.embedding')}
+
+
+
+
+
+
+ setName(e.target.value)}
+ />
+
+
+
+
+
+
+ toggleAbility('vision', checked as boolean)
+ }
+ />
+
+
+
+
+ toggleAbility('func_call', checked as boolean)
+ }
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ setName(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/web/src/app/home/components/models-dialog/components/ExtraArgsEditor.tsx b/web/src/app/home/components/models-dialog/components/ExtraArgsEditor.tsx
new file mode 100644
index 00000000..e17a229e
--- /dev/null
+++ b/web/src/app/home/components/models-dialog/components/ExtraArgsEditor.tsx
@@ -0,0 +1,114 @@
+'use client';
+
+import { Plus, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
+import { useTranslation } from 'react-i18next';
+import { ExtraArg } from '../types';
+
+interface ExtraArgsEditorProps {
+ args: ExtraArg[];
+ onChange: (args: ExtraArg[]) => void;
+ disabled?: boolean;
+}
+
+export default function ExtraArgsEditor({
+ args,
+ onChange,
+ disabled = false,
+}: ExtraArgsEditorProps) {
+ const { t } = useTranslation();
+
+ const handleAdd = () => {
+ onChange([...args, { key: '', type: 'string', value: '' }]);
+ };
+
+ const handleRemove = (index: number) => {
+ onChange(args.filter((_, i) => i !== index));
+ };
+
+ const handleUpdate = (
+ index: number,
+ field: keyof ExtraArg,
+ value: string,
+ ) => {
+ const newArgs = [...args];
+ newArgs[index] = { ...newArgs[index], [field]: value };
+ onChange(newArgs);
+ };
+
+ return (
+
+
+
+ {!disabled && (
+
+ )}
+
+ {args.length === 0 ? (
+
{t('common.none')}
+ ) : (
+ args.map((arg, index) => (
+
+ handleUpdate(index, 'key', e.target.value)}
+ />
+
+ handleUpdate(index, 'value', e.target.value)}
+ />
+ {!disabled && (
+
+ )}
+
+ ))
+ )}
+
+
+ {model.name}
+
+ {modelType === 'llm' ? t('models.chat') : t('models.embedding')}
+
+ {modelType === 'llm' &&
+ (model as LLMModel).abilities?.includes('vision') && (
+
+
+
+ )}
+ {modelType === 'llm' &&
+ (model as LLMModel).abilities?.includes('func_call') && (
+
+
+
+ )}
+
+ {!isLangBotModels && (
+
+ open ? onOpenDeleteConfirm(model.uuid) : onCloseDeleteConfirm()
+ }
+ >
+
+
+
+ e.stopPropagation()}
+ >
+
+
{t('models.deleteConfirmation')}
+
+
+
+
+
+ )}
+
+
+
+ setEditName(e.target.value)}
+ disabled={isLangBotModels}
+ />
+
+
+ {modelType === 'llm' && (
+
+
+
+
+
+ toggleAbility('vision', checked as boolean)
+ }
+ />
+
+
+
+
+ toggleAbility('func_call', checked as boolean)
+ }
+ />
+
+
+
+
+ )}
+
+
+
+
+ {!isLangBotModels && (
+
+ )}
+
+
+
+
+ {isLangBotModels ? (
+
+
+
+ ) : (
+
+ )}
+
+
+ {provider.name}
+
+ {t('models.modelsCount', { count: totalModels })}
+
+
+
+ {isLangBotModels ? (
+ t('models.langbotModelsDescription')
+ ) : (
+ <>
+ {provider.base_url}
+ {provider.base_url &&
+ provider.api_keys?.length > 0 &&
+ ' · '}
+ {provider.api_keys?.length > 0 &&
+ maskApiKey(provider.api_keys[0])}
+
+ )}
+
+
+
+
+ {isLangBotModels && accountType !== 'space' && (
+
+ )}
+ {isLangBotModels &&
+ accountType === 'space' &&
+ spaceCredits !== null && (
+
+
+ {(spaceCredits / 5000).toFixed(2)} {t('models.credits')}
+
+
+
+ )}
+ {!isLangBotModels && (
+ <>
+
+ {canDelete && (
+
+
+
+
+ e.stopPropagation()}
+ >
+
+
+ {t('models.deleteProviderConfirmation')}
+
+
+
+
+
+
+ )}
+
+ )}
+
+
+ {totalModels > 0 ? (
+
+ {isExpanded ? (
+
+ ) : (
+
+ )}
+
+ {isExpanded
+ ? t('models.collapseModels')
+ : t('models.expandModels')}
+
+
+ ) : (
+
+ )}
+ {!isLangBotModels && (
+
+ )}
+
+ {t('common.loading')}...
+
+ ) : models ? (
+
+ {models.llm.map((model) => (
+
onDeleteModel(model.uuid, 'llm')}
+ onUpdateModel={(name, abilities, extraArgs) =>
+ onUpdateModel(
+ model.uuid,
+ 'llm',
+ name,
+ abilities,
+ extraArgs,
+ )
+ }
+ onTestModel={(name, abilities, extraArgs) =>
+ onTestModel(name, 'llm', abilities, extraArgs)
+ }
+ isSubmitting={isSubmitting}
+ isTesting={isTesting}
+ testResult={testResult}
+ onResetTestResult={onResetTestResult}
+ />
+ ))}
+ {models.embedding.map((model) => (
+ onDeleteModel(model.uuid, 'embedding')}
+ onUpdateModel={(name, abilities, extraArgs) =>
+ onUpdateModel(
+ model.uuid,
+ 'embedding',
+ name,
+ abilities,
+ extraArgs,
+ )
+ }
+ onTestModel={(name, abilities, extraArgs) =>
+ onTestModel(name, 'embedding', abilities, extraArgs)
+ }
+ isSubmitting={isSubmitting}
+ isTesting={isTesting}
+ testResult={testResult}
+ onResetTestResult={onResetTestResult}
+ />
+ ))}
+ {models.llm.length === 0 && models.embedding.length === 0 && (
+
+ {t('models.noModels')}
+
+ )}
+
+ {t('models.noModels')}
+
+ )}
+
+
+
+
+ );
+}
diff --git a/web/src/app/home/components/models-dialog/components/index.ts b/web/src/app/home/components/models-dialog/components/index.ts
new file mode 100644
index 00000000..4e0a41cf
--- /dev/null
+++ b/web/src/app/home/components/models-dialog/components/index.ts
@@ -0,0 +1,4 @@
+export { default as ExtraArgsEditor } from './ExtraArgsEditor';
+export { default as ModelItem } from './ModelItem';
+export { default as AddModelPopover } from './AddModelPopover';
+export { default as ProviderCard } from './ProviderCard';
diff --git a/web/src/app/home/components/models-dialog/types.ts b/web/src/app/home/components/models-dialog/types.ts
new file mode 100644
index 00000000..15217269
--- /dev/null
+++ b/web/src/app/home/components/models-dialog/types.ts
@@ -0,0 +1,102 @@
+import {
+ LLMModel,
+ EmbeddingModel,
+ ModelProvider,
+} from '@/app/infra/entities/api';
+
+export type ExtraArg = {
+ key: string;
+ type: 'string' | 'number' | 'boolean';
+ value: string;
+};
+
+export type ModelType = 'llm' | 'embedding';
+
+export interface ProviderModels {
+ llm: LLMModel[];
+ embedding: EmbeddingModel[];
+}
+
+export interface TestResult {
+ success: boolean;
+ duration: number;
+}
+
+export interface ModelItemProps {
+ model: LLMModel | EmbeddingModel;
+ modelType: ModelType;
+ providerUuid: string;
+ isLangBotModels: boolean;
+ isEditOpen: boolean;
+ isDeleteOpen: boolean;
+ onEditOpen: () => void;
+ onEditClose: () => void;
+ onDeleteOpen: () => void;
+ onDeleteClose: () => void;
+ onDelete: () => void;
+ onUpdate: (
+ name: string,
+ abilities: string[],
+ extraArgs: ExtraArg[],
+ ) => Promise;
+ onTest: (
+ name: string,
+ abilities: string[],
+ extraArgs: ExtraArg[],
+ ) => Promise;
+ isSubmitting: boolean;
+ isTesting: boolean;
+ testResult: TestResult | null;
+}
+
+export interface ProviderCardProps {
+ provider: ModelProvider;
+ isLangBotModels?: boolean;
+ isExpanded: boolean;
+ isLoading: boolean;
+ models?: ProviderModels;
+ accountType: 'local' | 'space';
+ spaceCredits: number | null;
+ requesterNameList: { label: string; value: string }[];
+ // Popover states
+ addModelPopoverOpen: string | null;
+ editModelPopoverOpen: string | null;
+ deleteConfirmOpen: string | null;
+ // Handlers
+ onToggle: () => void;
+ onEditProvider: () => void;
+ onDeleteProvider: () => void;
+ onSpaceLogin: () => void;
+ onOpenAddModel: () => void;
+ onCloseAddModel: () => void;
+ onAddModel: (
+ modelType: ModelType,
+ name: string,
+ abilities: string[],
+ extraArgs: ExtraArg[],
+ ) => Promise;
+ onOpenEditModel: (modelId: string) => void;
+ onCloseEditModel: () => void;
+ onUpdateModel: (
+ modelId: string,
+ modelType: ModelType,
+ name: string,
+ abilities: string[],
+ extraArgs: ExtraArg[],
+ ) => Promise;
+ onOpenDeleteConfirm: (modelId: string) => void;
+ onCloseDeleteConfirm: () => void;
+ onDeleteModel: (modelId: string, modelType: ModelType) => Promise;
+ onTestModel: (
+ name: string,
+ modelType: ModelType,
+ abilities: string[],
+ extraArgs: ExtraArg[],
+ ) => Promise;
+ isSubmitting: boolean;
+ isTesting: boolean;
+ testResult: TestResult | null;
+ onResetTestResult: () => void;
+}
+
+export const LANGBOT_MODELS_PROVIDER_REQUESTER = 'space-chat-completions';
diff --git a/web/src/app/home/components/password-change-dialog/PasswordChangeDialog.tsx b/web/src/app/home/components/password-change-dialog/PasswordChangeDialog.tsx
index 03a302af..279eb265 100644
--- a/web/src/app/home/components/password-change-dialog/PasswordChangeDialog.tsx
+++ b/web/src/app/home/components/password-change-dialog/PasswordChangeDialog.tsx
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
@@ -26,36 +26,39 @@ import {
import { Input } from '@/components/ui/input';
import { httpClient } from '@/app/infra/http/HttpClient';
-const getFormSchema = (t: (key: string) => string) =>
- z
- .object({
- currentPassword: z
- .string()
- .min(1, { message: t('common.currentPasswordRequired') }),
- newPassword: z
- .string()
- .min(1, { message: t('common.newPasswordRequired') }),
- confirmNewPassword: z
- .string()
- .min(1, { message: t('common.confirmPasswordRequired') }),
- })
- .refine((data) => data.newPassword === data.confirmNewPassword, {
- message: t('common.passwordsDoNotMatch'),
- path: ['confirmNewPassword'],
- });
-
interface PasswordChangeDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
+ hasPassword?: boolean;
}
export default function PasswordChangeDialog({
open,
onOpenChange,
+ hasPassword = true,
}: PasswordChangeDialogProps) {
const { t } = useTranslation();
const [isSubmitting, setIsSubmitting] = useState(false);
- const formSchema = getFormSchema(t);
+
+ const getFormSchema = () =>
+ z
+ .object({
+ currentPassword: hasPassword
+ ? z.string().min(1, { message: t('common.currentPasswordRequired') })
+ : z.string().optional(),
+ newPassword: z
+ .string()
+ .min(1, { message: t('common.newPasswordRequired') }),
+ confirmNewPassword: z
+ .string()
+ .min(1, { message: t('common.confirmPasswordRequired') }),
+ })
+ .refine((data) => data.newPassword === data.confirmNewPassword, {
+ message: t('common.passwordsDoNotMatch'),
+ path: ['confirmNewPassword'],
+ });
+
+ const formSchema = getFormSchema();
const form = useForm>({
resolver: zodResolver(formSchema),
@@ -66,14 +69,30 @@ export default function PasswordChangeDialog({
},
});
+ // Reset form when dialog opens/closes or hasPassword changes
+ useEffect(() => {
+ if (open) {
+ form.reset({
+ currentPassword: '',
+ newPassword: '',
+ confirmNewPassword: '',
+ });
+ }
+ }, [open, hasPassword, form]);
+
const onSubmit = async (values: z.infer) => {
setIsSubmitting(true);
try {
- await httpClient.changePassword(
- values.currentPassword,
- values.newPassword,
- );
- toast.success(t('common.changePasswordSuccess'));
+ if (hasPassword) {
+ await httpClient.changePassword(
+ values.currentPassword!,
+ values.newPassword,
+ );
+ toast.success(t('common.changePasswordSuccess'));
+ } else {
+ await httpClient.setPassword(values.newPassword, undefined);
+ toast.success(t('account.passwordSetSuccess'));
+ }
form.reset();
onOpenChange(false);
} catch {
@@ -87,27 +106,33 @@ export default function PasswordChangeDialog({
diff --git a/web/src/app/home/models/LLMConfig.module.css b/web/src/app/home/models/LLMConfig.module.css
deleted file mode 100644
index ce6c689a..00000000
--- a/web/src/app/home/models/LLMConfig.module.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.modelListContainer {
- width: 100%;
- padding-left: 0.8rem;
- padding-right: 0.8rem;
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
- gap: 2rem;
- justify-items: stretch;
- align-items: start;
-}
-
-.emptyContainer {
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-}
diff --git a/web/src/app/home/models/component/ChooseRequesterEntity.ts b/web/src/app/home/models/component/ChooseRequesterEntity.ts
deleted file mode 100644
index 69ca03df..00000000
--- a/web/src/app/home/models/component/ChooseRequesterEntity.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface IChooseRequesterEntity {
- label: string;
- value: string;
- provider_category?: string;
- description?: string;
-}
diff --git a/web/src/app/home/models/component/ICreateEmbeddingField.ts b/web/src/app/home/models/component/ICreateEmbeddingField.ts
deleted file mode 100644
index ea198f3f..00000000
--- a/web/src/app/home/models/component/ICreateEmbeddingField.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface ICreateEmbeddingField {
- name: string;
- model_provider: string;
- url: string;
- api_key: string;
- extra_args?: string[];
-}
diff --git a/web/src/app/home/models/component/ICreateLLMField.ts b/web/src/app/home/models/component/ICreateLLMField.ts
deleted file mode 100644
index 4ded490b..00000000
--- a/web/src/app/home/models/component/ICreateLLMField.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface ICreateLLMField {
- name: string;
- model_provider: string;
- url: string;
- api_key: string;
- abilities: string[];
- extra_args: string[];
-}
diff --git a/web/src/app/home/models/component/embedding-card/EmbeddingCard.module.css b/web/src/app/home/models/component/embedding-card/EmbeddingCard.module.css
deleted file mode 100644
index 8ff900a9..00000000
--- a/web/src/app/home/models/component/embedding-card/EmbeddingCard.module.css
+++ /dev/null
@@ -1,128 +0,0 @@
-.cardContainer {
- width: 100%;
- height: 10rem;
- background-color: #fff;
- border-radius: 10px;
- box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.2);
- padding: 1.2rem;
- cursor: pointer;
- transition: all 0.2s ease;
-}
-
-:global(.dark) .cardContainer {
- background-color: #1f1f22;
- box-shadow: 0;
-}
-
-.cardContainer:hover {
- box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.1);
-}
-
-:global(.dark) .cardContainer:hover {
- box-shadow: 0;
-}
-
-.iconBasicInfoContainer {
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: row;
- gap: 0.8rem;
- user-select: none;
-}
-
-.iconImage {
- width: 3.8rem;
- height: 3.8rem;
- margin: 0.2rem;
- border-radius: 8%;
-}
-
-.basicInfoContainer {
- display: flex;
- flex-direction: column;
- gap: 0.2rem;
- min-width: 0;
- width: 100%;
-}
-
-.basicInfoText {
- font-size: 1.4rem;
- font-weight: bold;
- color: #1a1a1a;
-}
-
-:global(.dark) .basicInfoText {
- color: #f0f0f0;
-}
-
-.providerContainer {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- gap: 0.2rem;
-}
-
-.providerIcon {
- width: 1.2rem;
- height: 1.2rem;
- margin-top: 0.2rem;
- color: #626262;
-}
-
-:global(.dark) .providerIcon {
- color: #a0a0a0;
-}
-
-.providerLabel {
- font-size: 1.2rem;
- font-weight: 600;
- color: #626262;
-}
-
-:global(.dark) .providerLabel {
- color: #a0a0a0;
-}
-
-.baseURLContainer {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- gap: 0.2rem;
- width: calc(100% - 3rem);
-}
-
-.baseURLIcon {
- width: 1.2rem;
- height: 1.2rem;
- color: #626262;
-}
-
-:global(.dark) .baseURLIcon {
- color: #a0a0a0;
-}
-
-.baseURLText {
- font-size: 1rem;
- width: 100%;
- color: #626262;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- max-width: 100%;
-}
-
-:global(.dark) .baseURLText {
- color: #a0a0a0;
-}
-
-.bigText {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- font-size: 1.4rem;
- font-weight: bold;
- max-width: 100%;
-}
diff --git a/web/src/app/home/models/component/embedding-card/EmbeddingCard.tsx b/web/src/app/home/models/component/embedding-card/EmbeddingCard.tsx
deleted file mode 100644
index 8f2dfcd3..00000000
--- a/web/src/app/home/models/component/embedding-card/EmbeddingCard.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import styles from './EmbeddingCard.module.css';
-import { EmbeddingCardVO } from '@/app/home/models/component/embedding-card/EmbeddingCardVO';
-
-export default function EmbeddingCard({ cardVO }: { cardVO: EmbeddingCardVO }) {
- return (
-
-
-
-
-
- {/* 名称 */}
-
- {cardVO.name}
-
- {/* 厂商 */}
-
-
-
- {cardVO.providerLabel}
-
-
- {/* baseURL */}
- {cardVO.baseURL && (
-
-
-
{cardVO.baseURL}
-
- )}
-
-
-
- );
-}
diff --git a/web/src/app/home/models/component/embedding-card/EmbeddingCardVO.ts b/web/src/app/home/models/component/embedding-card/EmbeddingCardVO.ts
deleted file mode 100644
index f6d960f6..00000000
--- a/web/src/app/home/models/component/embedding-card/EmbeddingCardVO.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export interface IEmbeddingCardVO {
- id: string;
- iconURL: string;
- name: string;
- providerLabel: string;
- baseURL: string;
-}
-
-export class EmbeddingCardVO implements IEmbeddingCardVO {
- id: string;
- iconURL: string;
- providerLabel: string;
- name: string;
- baseURL: string;
-
- constructor(props: IEmbeddingCardVO) {
- this.id = props.id;
- this.iconURL = props.iconURL;
- this.providerLabel = props.providerLabel;
- this.name = props.name;
- this.baseURL = props.baseURL;
- }
-}
diff --git a/web/src/app/home/models/component/embedding-form/EmbeddingForm.tsx b/web/src/app/home/models/component/embedding-form/EmbeddingForm.tsx
deleted file mode 100644
index 41eeb635..00000000
--- a/web/src/app/home/models/component/embedding-form/EmbeddingForm.tsx
+++ /dev/null
@@ -1,651 +0,0 @@
-import { ICreateEmbeddingField } from '@/app/home/models/component/ICreateEmbeddingField';
-import { useEffect, useState } from 'react';
-import { IChooseRequesterEntity } from '@/app/home/models/component/ChooseRequesterEntity';
-import { httpClient } from '@/app/infra/http/HttpClient';
-import { EmbeddingModel } from '@/app/infra/entities/api';
-import { UUID } from 'uuidjs';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { useTranslation } from 'react-i18next';
-
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogHeader,
- DialogTitle,
- DialogFooter,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import {
- Form,
- FormControl,
- FormDescription,
- FormField,
- FormItem,
- FormLabel,
- FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import {
- Select,
- SelectContent,
- SelectGroup,
- SelectItem,
- SelectLabel,
- SelectTrigger,
- SelectValue,
-} from '@/components/ui/select';
-import { toast } from 'sonner';
-import { extractI18nObject } from '@/i18n/I18nProvider';
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { AlertCircle } from 'lucide-react';
-
-const getExtraArgSchema = (t: (key: string) => string) =>
- z
- .object({
- key: z.string().min(1, { message: t('models.keyNameRequired') }),
- type: z.enum(['string', 'number', 'boolean']),
- value: z.string(),
- })
- .superRefine((data, ctx) => {
- if (data.type === 'number' && isNaN(Number(data.value))) {
- ctx.addIssue({
- code: z.ZodIssueCode.custom,
- message: t('models.mustBeValidNumber'),
- path: ['value'],
- });
- }
- if (
- data.type === 'boolean' &&
- data.value !== 'true' &&
- data.value !== 'false'
- ) {
- ctx.addIssue({
- code: z.ZodIssueCode.custom,
- message: t('models.mustBeTrueOrFalse'),
- path: ['value'],
- });
- }
- });
-
-const getFormSchema = (t: (key: string) => string) =>
- z.object({
- name: z.string().min(1, { message: t('models.modelNameRequired') }),
- model_provider: z
- .string()
- .min(1, { message: t('models.modelProviderRequired') }),
- url: z.string().optional(),
- api_key: z.string().optional(),
- extra_args: z.array(getExtraArgSchema(t)).optional(),
- });
-
-export default function EmbeddingForm({
- editMode,
- initEmbeddingId,
- onFormSubmit,
- onFormCancel,
- onEmbeddingDeleted,
-}: {
- editMode: boolean;
- initEmbeddingId?: string;
- onFormSubmit: () => void;
- onFormCancel: () => void;
- onEmbeddingDeleted: () => void;
-}) {
- const { t } = useTranslation();
- const formSchema = getFormSchema(t);
-
- const form = useForm
>({
- resolver: zodResolver(formSchema),
- defaultValues: {
- name: '',
- model_provider: '',
- url: '',
- api_key: '',
- extra_args: [],
- },
- });
-
- const [extraArgs, setExtraArgs] = useState<
- { key: string; type: 'string' | 'number' | 'boolean'; value: string }[]
- >([]);
-
- const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false);
- const [requesterNameList, setRequesterNameList] = useState<
- IChooseRequesterEntity[]
- >([]);
- const [requesterDefaultURLList, setRequesterDefaultURLList] = useState<
- string[]
- >([]);
- const [modelTesting, setModelTesting] = useState(false);
- const [testErrorMessage, setTestErrorMessage] = useState(null);
- const [currentModelProvider, setCurrentModelProvider] = useState('');
-
- useEffect(() => {
- initEmbeddingModelFormComponent().then(() => {
- if (editMode && initEmbeddingId) {
- getEmbeddingConfig(initEmbeddingId).then((val) => {
- form.setValue('name', val.name);
- form.setValue('model_provider', val.model_provider);
- setCurrentModelProvider(val.model_provider);
- form.setValue('url', val.url);
- form.setValue('api_key', val.api_key);
- if (val.extra_args) {
- const args = val.extra_args.map((arg) => {
- const [key, value] = arg.split(':');
- let type: 'string' | 'number' | 'boolean' = 'string';
- if (!isNaN(Number(value))) {
- type = 'number';
- } else if (value === 'true' || value === 'false') {
- type = 'boolean';
- }
- return {
- key,
- type,
- value,
- };
- });
- setExtraArgs(args);
- form.setValue('extra_args', args);
- }
- });
- } else {
- form.reset();
- }
- });
- }, []);
-
- const addExtraArg = () => {
- setExtraArgs([...extraArgs, { key: '', type: 'string', value: '' }]);
- };
-
- const updateExtraArg = (
- index: number,
- field: 'key' | 'type' | 'value',
- value: string,
- ) => {
- const newArgs = [...extraArgs];
- newArgs[index] = {
- ...newArgs[index],
- [field]: value,
- };
- setExtraArgs(newArgs);
- form.setValue('extra_args', newArgs);
- };
-
- const removeExtraArg = (index: number) => {
- const newArgs = extraArgs.filter((_, i) => i !== index);
- setExtraArgs(newArgs);
- form.setValue('extra_args', newArgs);
- };
-
- async function initEmbeddingModelFormComponent() {
- const requesterNameList =
- await httpClient.getProviderRequesters('text-embedding');
- setRequesterNameList(
- requesterNameList.requesters.map((item) => {
- return {
- label: extractI18nObject(item.label),
- value: item.name,
- provider_category: item.spec.provider_category || 'manufacturer',
- description: extractI18nObject(item.description) || undefined,
- };
- }),
- );
- setRequesterDefaultURLList(
- requesterNameList.requesters.map((item) => {
- const config = item.spec.config;
- for (let i = 0; i < config.length; i++) {
- if (config[i].name == 'base_url') {
- return config[i].default?.toString() || '';
- }
- }
- return '';
- }),
- );
- }
-
- async function getEmbeddingConfig(
- id: string,
- ): Promise {
- const embeddingModel = await httpClient.getProviderEmbeddingModel(id);
-
- const fakeExtraArgs = [];
- const extraArgs = embeddingModel.model.extra_args as Record;
- for (const key in extraArgs) {
- fakeExtraArgs.push(`${key}:${extraArgs[key]}`);
- }
- return {
- name: embeddingModel.model.name,
- model_provider: embeddingModel.model.requester,
- url: embeddingModel.model.requester_config?.base_url,
- api_key: embeddingModel.model.api_keys[0],
- extra_args: fakeExtraArgs,
- };
- }
-
- function handleFormSubmit(value: z.infer) {
- const extraArgsObj: Record = {};
- value.extra_args?.forEach(
- (arg: { key: string; type: string; value: string }) => {
- if (arg.type === 'number') {
- extraArgsObj[arg.key] = Number(arg.value);
- } else if (arg.type === 'boolean') {
- extraArgsObj[arg.key] = arg.value === 'true';
- } else {
- extraArgsObj[arg.key] = arg.value;
- }
- },
- );
-
- const embeddingModel: EmbeddingModel = {
- uuid: editMode ? initEmbeddingId || '' : UUID.generate(),
- name: value.name,
- description: '',
- requester: value.model_provider,
- requester_config: {
- base_url: value.url || '',
- timeout: 120,
- },
- extra_args: extraArgsObj,
- api_keys: value.api_key ? [value.api_key] : [],
- };
-
- if (editMode) {
- onSaveEdit(embeddingModel).then(() => {
- form.reset();
- });
- } else {
- onCreateEmbedding(embeddingModel).then(() => {
- form.reset();
- });
- }
- }
-
- async function onCreateEmbedding(embeddingModel: EmbeddingModel) {
- try {
- await httpClient.createProviderEmbeddingModel(embeddingModel);
- onFormSubmit();
- toast.success(t('models.createSuccess'));
- } catch (err) {
- toast.error(t('models.createError') + (err as Error).message);
- }
- }
-
- async function onSaveEdit(embeddingModel: EmbeddingModel) {
- try {
- await httpClient.updateProviderEmbeddingModel(
- initEmbeddingId || '',
- embeddingModel,
- );
- onFormSubmit();
- toast.success(t('models.saveSuccess'));
- } catch (err) {
- toast.error(t('models.saveError') + (err as Error).message);
- }
- }
-
- function deleteModel() {
- if (initEmbeddingId) {
- httpClient
- .deleteProviderEmbeddingModel(initEmbeddingId)
- .then(() => {
- onEmbeddingDeleted();
- toast.success(t('models.deleteSuccess'));
- })
- .catch((err) => {
- toast.error(t('models.deleteError') + err.message);
- });
- }
- }
-
- function testEmbeddingModelInForm() {
- setModelTesting(true);
- setTestErrorMessage(null);
- const extraArgsObj: Record = {};
- form
- .getValues('extra_args')
- ?.forEach((arg: { key: string; type: string; value: string }) => {
- if (arg.type === 'number') {
- extraArgsObj[arg.key] = Number(arg.value);
- } else if (arg.type === 'boolean') {
- extraArgsObj[arg.key] = arg.value === 'true';
- } else {
- extraArgsObj[arg.key] = arg.value;
- }
- });
- const apiKey = form.getValues('api_key');
- httpClient
- .testEmbeddingModel('_', {
- uuid: '',
- name: form.getValues('name'),
- description: '',
- requester: form.getValues('model_provider'),
- requester_config: {
- base_url: form.getValues('url') ?? '',
- timeout: 120,
- },
- api_keys: apiKey ? [apiKey] : [],
- extra_args: extraArgsObj,
- })
- .then(() => {
- toast.success(t('models.testSuccess'));
- setTestErrorMessage(null);
- })
- .catch((err: { message?: string }) => {
- setTestErrorMessage(err?.message || t('models.testError'));
- })
- .finally(() => {
- setModelTesting(false);
- });
- }
-
- return (
-
-
-
-
-
-
-
-
- {t('models.visionAbility')}
-
-
-
-
- {t('models.functionCallAbility')}
-
-
-
-
-
-
- {/* 名称 */}
-
- {cardVO.name}
-
- {/* 厂商 */}
-
-
-
- {cardVO.providerLabel}
-
-
- {/* baseURL */}
-
-
-
{cardVO.baseURL}
-
- {/* 能力 */}
-
- {AbilityBadges(cardVO.abilities)}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {t('llm.llmModels')}
-
-
- {t('embedding.embeddingModels')}
-
-
-
-
-
-
- {t('llm.description')}
-
-
-
-
-
- {t('embedding.description')}
-
-
-
-
- {cardList.map((cardVO) => {
- return (
-
{
- selectLLM(cardVO);
- }}
- >
-
-
- );
- })}
-
-
- {embeddingCardList.map((cardVO) => {
- return (
-
{
- selectEmbedding(cardVO);
- }}
- >
-
-
- );
- })}
-
-
-//
-//
-// {plugin.author}
-//
-//
{plugin.name}
-//
-// {plugin.description}
-//
-//
-//
