mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-06-02 03:55:55 +00:00
perf: unify entities
This commit is contained in:
Junyan Qin
@@ -40,9 +40,8 @@ stages:
|
||||
label:
|
||||
en_US: Model
|
||||
zh_CN: 模型
|
||||
type: select
|
||||
type: llm-model-selector
|
||||
required: true
|
||||
scope: /provider/models/llm
|
||||
- name: max-round
|
||||
label:
|
||||
en_US: Max Round
|
||||
@@ -54,16 +53,8 @@ stages:
|
||||
label:
|
||||
en_US: Prompt
|
||||
zh_CN: 提示词
|
||||
type: array
|
||||
type: prompt-editor
|
||||
required: true
|
||||
items:
|
||||
type: object
|
||||
properties:
|
||||
role:
|
||||
type: string
|
||||
default: user
|
||||
content:
|
||||
type: string
|
||||
- name: dify-service-api
|
||||
label:
|
||||
en_US: Dify Service API
|
||||
|
||||
@@ -28,11 +28,9 @@ stages:
|
||||
description:
|
||||
en_US: The prefix of the message
|
||||
zh_CN: 消息前缀
|
||||
type: array
|
||||
type: array[string]
|
||||
required: true
|
||||
default: []
|
||||
items:
|
||||
type: string
|
||||
- name: regexp
|
||||
label:
|
||||
en_US: Regexp
|
||||
@@ -40,11 +38,9 @@ stages:
|
||||
description:
|
||||
en_US: The regexp of the message
|
||||
zh_CN: 消息正则表达式
|
||||
type: array
|
||||
type: array[string]
|
||||
required: true
|
||||
default: []
|
||||
items:
|
||||
type: string
|
||||
- name: random
|
||||
label:
|
||||
en_US: Random
|
||||
@@ -83,20 +79,16 @@ stages:
|
||||
label:
|
||||
en_US: Blacklist
|
||||
zh_CN: 黑名单
|
||||
type: array
|
||||
type: array[string]
|
||||
required: true
|
||||
default: []
|
||||
items:
|
||||
type: string
|
||||
- name: whitelist
|
||||
label:
|
||||
en_US: Whitelist
|
||||
zh_CN: 白名单
|
||||
type: array
|
||||
type: array[string]
|
||||
required: true
|
||||
default: []
|
||||
items:
|
||||
type: string
|
||||
- name: ignore-rules
|
||||
label:
|
||||
en_US: Ignore Rules
|
||||
@@ -109,11 +101,9 @@ stages:
|
||||
description:
|
||||
en_US: The prefix of the message
|
||||
zh_CN: 消息前缀
|
||||
type: array
|
||||
type: array[string]
|
||||
required: true
|
||||
default: []
|
||||
items:
|
||||
type: string
|
||||
- name: regexp
|
||||
label:
|
||||
en_US: Regexp
|
||||
@@ -121,8 +111,6 @@ stages:
|
||||
description:
|
||||
en_US: The regexp of the message
|
||||
zh_CN: 消息正则表达式
|
||||
type: array
|
||||
type: array[string]
|
||||
required: true
|
||||
default: []
|
||||
items:
|
||||
type: string
|
||||
|
||||
31
web/package-lock.json
generated
31
web/package-lock.json
generated
@@ -16,6 +16,7 @@
|
||||
"@radix-ui/react-select": "^2.2.4",
|
||||
"@radix-ui/react-slot": "^1.2.2",
|
||||
"@radix-ui/react-switch": "^1.2.4",
|
||||
"@radix-ui/react-tabs": "^1.1.11",
|
||||
"@radix-ui/react-toggle": "^1.1.8",
|
||||
"@radix-ui/react-toggle-group": "^1.1.9",
|
||||
"@tailwindcss/postcss": "^4.1.5",
|
||||
@@ -1503,6 +1504,36 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tabs": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.11.tgz",
|
||||
"integrity": "sha512-4FiKSVoXqPP/KfzlB7lwwqoFV6EPwkrrqGp9cUYXjwDYHhvpnqq79P+EPHKcdoTE7Rl8w/+6s9rTlsfXHES9GA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-presence": "1.1.4",
|
||||
"@radix-ui/react-primitive": "2.1.2",
|
||||
"@radix-ui/react-roving-focus": "1.1.9",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-toggle": {
|
||||
"version": "1.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.8.tgz",
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
"@radix-ui/react-select": "^2.2.4",
|
||||
"@radix-ui/react-slot": "^1.2.2",
|
||||
"@radix-ui/react-switch": "^1.2.4",
|
||||
"@radix-ui/react-tabs": "^1.1.11",
|
||||
"@radix-ui/react-toggle": "^1.1.8",
|
||||
"@radix-ui/react-toggle-group": "^1.1.9",
|
||||
"@tailwindcss/postcss": "^4.1.5",
|
||||
|
||||
@@ -2,10 +2,10 @@ import { useEffect, useState } from 'react';
|
||||
import { IChooseAdapterEntity, IPipelineEntity } from '@/app/home/bots/components/bot-form/ChooseEntity';
|
||||
import {
|
||||
DynamicFormItemConfig,
|
||||
IDynamicFormItemConfig,
|
||||
getDefaultValues,
|
||||
parseDynamicFormItemType,
|
||||
} from '@/app/home/components/dynamic-form/DynamicFormItemConfig';
|
||||
import { IDynamicFormItemSchema } from '@/app/infra/entities/form/dynamic';
|
||||
import { UUID } from 'uuidjs';
|
||||
import DynamicFormComponent from '@/app/home/components/dynamic-form/DynamicFormComponent';
|
||||
import { httpClient } from '@/app/infra/http/HttpClient';
|
||||
@@ -76,7 +76,7 @@ export default function BotForm({
|
||||
const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false);
|
||||
|
||||
const [adapterNameToDynamicConfigMap, setAdapterNameToDynamicConfigMap] =
|
||||
useState(new Map<string, IDynamicFormItemConfig[]>());
|
||||
useState(new Map<string, IDynamicFormItemSchema[]>());
|
||||
// const [form] = Form.useForm<IBotFormEntity>();
|
||||
const [showDynamicForm, setShowDynamicForm] = useState<boolean>(false);
|
||||
// const [dynamicForm] = Form.useForm();
|
||||
@@ -95,7 +95,7 @@ export default function BotForm({
|
||||
>([]);
|
||||
|
||||
const [dynamicFormConfigList, setDynamicFormConfigList] = useState<
|
||||
IDynamicFormItemConfig[]
|
||||
IDynamicFormItemSchema[]
|
||||
>([]);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { IDynamicFormItemConfig } from '@/app/home/components/dynamic-form/DynamicFormItemConfig';
|
||||
import { IDynamicFormItemSchema } from '@/app/infra/entities/form/dynamic';
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
@@ -18,7 +18,7 @@ export default function DynamicFormComponent({
|
||||
onSubmit,
|
||||
initialValues,
|
||||
}: {
|
||||
itemConfigList: IDynamicFormItemConfig[];
|
||||
itemConfigList: IDynamicFormItemSchema[];
|
||||
onSubmit?: (val: object) => unknown;
|
||||
initialValues?: Record<string, any>;
|
||||
}) {
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
// import { Form, Input, InputNumber, Select, Switch } from 'antd';
|
||||
import {
|
||||
DynamicFormItemType,
|
||||
IDynamicFormItemConfig,
|
||||
} from '@/app/home/components/dynamic-form/DynamicFormItemConfig';
|
||||
IDynamicFormItemSchema,
|
||||
} from '@/app/infra/entities/form/dynamic';
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { ControllerRenderProps } from "react-hook-form";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export default function DynamicFormItemComponent({
|
||||
config,
|
||||
field,
|
||||
}: {
|
||||
config: IDynamicFormItemConfig;
|
||||
config: IDynamicFormItemSchema;
|
||||
field: ControllerRenderProps<any, any>;
|
||||
}) {
|
||||
switch (config.type) {
|
||||
@@ -39,21 +39,37 @@ export default function DynamicFormItemComponent({
|
||||
|
||||
case DynamicFormItemType.STRING_ARRAY:
|
||||
return (
|
||||
<Select
|
||||
value={field.value}
|
||||
onValueChange={field.onChange}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="请选择" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{/* 这里需要根据实际情况添加选项 */}
|
||||
<SelectItem value="option1">选项1</SelectItem>
|
||||
<SelectItem value="option2">选项2</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div className="space-y-2">
|
||||
{field.value.map((item: string, index: number) => (
|
||||
<div key={index} className="flex gap-2">
|
||||
<Input
|
||||
value={item}
|
||||
onChange={(e) => {
|
||||
const newValue = [...field.value];
|
||||
newValue[index] = e.target.value;
|
||||
field.onChange(newValue);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => {
|
||||
const newValue = field.value.filter((_: string, i: number) => i !== index);
|
||||
field.onChange(newValue);
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
field.onChange([...field.value, '']);
|
||||
}}
|
||||
>
|
||||
添加
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
case DynamicFormItemType.SELECT:
|
||||
@@ -67,9 +83,11 @@ export default function DynamicFormItemComponent({
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{/* 这里需要根据实际情况添加选项 */}
|
||||
<SelectItem value="option1">选项1</SelectItem>
|
||||
<SelectItem value="option2">选项2</SelectItem>
|
||||
{config.options?.map((option) => (
|
||||
<SelectItem key={option.name} value={option.name}>
|
||||
{option.label.zh_CN}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
@@ -1,23 +1,17 @@
|
||||
export interface IDynamicFormItemConfig {
|
||||
id: string;
|
||||
default: string | number | boolean | Array<unknown>;
|
||||
label: IDynamicFormItemLabel;
|
||||
name: string;
|
||||
required: boolean;
|
||||
type: DynamicFormItemType;
|
||||
description?: IDynamicFormItemLabel;
|
||||
}
|
||||
import { IDynamicFormItemSchema, DynamicFormItemType, IDynamicFormItemOption } from '@/app/infra/entities/form/dynamic';
|
||||
import { I18nLabel } from '@/app/infra/entities/common';
|
||||
|
||||
export class DynamicFormItemConfig implements IDynamicFormItemConfig {
|
||||
export class DynamicFormItemConfig implements IDynamicFormItemSchema {
|
||||
id: string;
|
||||
name: string;
|
||||
default: string | number | boolean | Array<unknown>;
|
||||
label: IDynamicFormItemLabel;
|
||||
label: I18nLabel;
|
||||
required: boolean;
|
||||
type: DynamicFormItemType;
|
||||
description?: IDynamicFormItemLabel;
|
||||
description?: I18nLabel;
|
||||
options?: IDynamicFormItemOption[];
|
||||
|
||||
constructor(params: IDynamicFormItemConfig) {
|
||||
constructor(params: IDynamicFormItemSchema) {
|
||||
this.id = params.id;
|
||||
this.name = params.name;
|
||||
this.default = params.default;
|
||||
@@ -25,23 +19,10 @@ export class DynamicFormItemConfig implements IDynamicFormItemConfig {
|
||||
this.required = params.required;
|
||||
this.type = params.type;
|
||||
this.description = params.description;
|
||||
this.options = params.options;
|
||||
}
|
||||
}
|
||||
|
||||
export interface IDynamicFormItemLabel {
|
||||
en_US: string;
|
||||
zh_CN: string;
|
||||
}
|
||||
|
||||
export enum DynamicFormItemType {
|
||||
INT = 'integer',
|
||||
FLOAT = 'float',
|
||||
BOOLEAN = 'boolean',
|
||||
STRING = 'string',
|
||||
STRING_ARRAY = 'array[string]',
|
||||
SELECT = 'select',
|
||||
UNKNOWN = 'unknown',
|
||||
}
|
||||
|
||||
export function isDynamicFormItemType(
|
||||
value: string,
|
||||
@@ -55,7 +36,7 @@ export function parseDynamicFormItemType(value: string): DynamicFormItemType {
|
||||
return isDynamicFormItemType(value) ? value : DynamicFormItemType.UNKNOWN;
|
||||
}
|
||||
|
||||
export function getDefaultValues(itemConfigList: IDynamicFormItemConfig[]): Record<string, any> {
|
||||
export function getDefaultValues(itemConfigList: IDynamicFormItemSchema[]): Record<string, any> {
|
||||
return itemConfigList.reduce((acc, item) => {
|
||||
acc[item.name] = item.default;
|
||||
return acc;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import {
|
||||
DynamicFormItemConfig,
|
||||
DynamicFormItemType,
|
||||
IDynamicFormItemConfig,
|
||||
} from '@/app/home/components/dynamic-form/DynamicFormItemConfig';
|
||||
IDynamicFormItemSchema,
|
||||
} from '@/app/infra/entities/form/dynamic';
|
||||
import { DynamicFormItemConfig } from '@/app/home/components/dynamic-form/DynamicFormItemConfig';
|
||||
|
||||
export const testDynamicConfigList: IDynamicFormItemConfig[] = [
|
||||
export const testDynamicConfigList: IDynamicFormItemSchema[] = [
|
||||
new DynamicFormItemConfig({
|
||||
default: '',
|
||||
id: '111',
|
||||
|
||||
@@ -3,7 +3,7 @@ import { ICreateLLMField } from '@/app/home/models/ICreateLLMField';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { IChooseRequesterEntity } from '@/app/home/models/component/llm-form/ChooseRequesterEntity';
|
||||
import { httpClient } from '@/app/infra/http/HttpClient';
|
||||
import { LLMModel } from '@/app/infra/api/api-types';
|
||||
import { LLMModel } from '@/app/infra/entities/api';
|
||||
import { UUID } from 'uuidjs';
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
@@ -178,7 +178,7 @@ export default function LLMForm({
|
||||
const config = item.spec.config;
|
||||
for (let i = 0; i < config.length; i++) {
|
||||
if (config[i].name == 'base_url') {
|
||||
return config[i].default;
|
||||
return config[i].default?.toString() || '';
|
||||
}
|
||||
}
|
||||
return '';
|
||||
|
||||
@@ -1,19 +1,27 @@
|
||||
import {
|
||||
Form,
|
||||
Button,
|
||||
Switch,
|
||||
Select,
|
||||
Input,
|
||||
InputNumber,
|
||||
SelectProps,
|
||||
} from 'antd';
|
||||
// import {
|
||||
// Form,
|
||||
// Button,
|
||||
// Switch,
|
||||
// Select,
|
||||
// Input,
|
||||
// InputNumber,
|
||||
// SelectProps,
|
||||
// } from 'antd';
|
||||
import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
|
||||
import { useEffect, useState } from 'react';
|
||||
import styles from './pipelineFormStyle.module.css';
|
||||
import { httpClient } from '@/app/infra/http/HttpClient';
|
||||
import { LLMModel, Pipeline } from '@/app/infra/api/api-types';
|
||||
import { LLMModel, Pipeline } from '@/app/infra/entities/api';
|
||||
import { UUID } from 'uuidjs';
|
||||
import { PipelineFormEntity } from '@/app/home/pipelines/components/pipeline-form/PipelineFormEntity';
|
||||
import { PipelineFormEntity, PipelineConfigTab, PipelineConfigStage } from '@/app/infra/entities/pipeline';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import {
|
||||
getDefaultValues,
|
||||
parseDynamicFormItemType,
|
||||
} from '@/app/home/components/dynamic-form/DynamicFormItemConfig';
|
||||
import { IDynamicFormItemSchema } from '@/app/infra/entities/form/dynamic';
|
||||
import DynamicFormComponent from '@/app/home/components/dynamic-form/DynamicFormComponent';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export default function PipelineFormComponent({
|
||||
initValues,
|
||||
@@ -31,48 +39,67 @@ export default function PipelineFormComponent({
|
||||
}) {
|
||||
const [nowFormIndex, setNowFormIndex] = useState<number>(0);
|
||||
const [nowAIRunner, setNowAIRunner] = useState('');
|
||||
const [llmModelList, setLlmModelList] = useState<SelectProps['options']>([]);
|
||||
// const [llmModelList, setLlmModelList] = useState<SelectProps['options']>([]);
|
||||
// 这里不好，可以改成enum等
|
||||
const formLabelList: FormLabel[] = [
|
||||
{ label: '基础', name: 'basic' },
|
||||
{ label: '基础信息', name: 'basic' },
|
||||
{ label: 'AI能力', name: 'ai' },
|
||||
{ label: '触发条件', name: 'trigger' },
|
||||
{ label: '安全能力', name: 'safety' },
|
||||
{ label: '输出处理', name: 'output' },
|
||||
];
|
||||
const [basicForm] = Form.useForm();
|
||||
const [aiForm] = Form.useForm();
|
||||
const [triggerForm] = Form.useForm();
|
||||
const [safetyForm] = Form.useForm();
|
||||
const [outputForm] = Form.useForm();
|
||||
// const [basicForm] = Form.useForm();
|
||||
// const [aiForm] = Form.useForm();
|
||||
// const [triggerForm] = Form.useForm();
|
||||
// const [safetyForm] = Form.useForm();
|
||||
// const [outputForm] = Form.useForm();
|
||||
const [aiConfigTabSchema, setAIConfigTabSchema] = useState<PipelineConfigTab>();
|
||||
const [triggerConfigTabSchema, setTriggerConfigTabSchema] = useState<PipelineConfigTab>();
|
||||
const [safetyConfigTabSchema, setSafetyConfigTabSchema] = useState<PipelineConfigTab>();
|
||||
const [outputConfigTabSchema, setOutputConfigTabSchema] = useState<PipelineConfigTab>();
|
||||
|
||||
useEffect(() => {
|
||||
getLLMModelList();
|
||||
|
||||
// get config schema from metadata
|
||||
httpClient.getGeneralPipelineMetadata().then((resp) => {
|
||||
for (const config of resp.configs) {
|
||||
if (config.name === 'ai') {
|
||||
setAIConfigTabSchema(config);
|
||||
} else if (config.name === 'trigger') {
|
||||
setTriggerConfigTabSchema(config);
|
||||
} else if (config.name === 'safety') {
|
||||
setSafetyConfigTabSchema(config);
|
||||
} else if (config.name === 'output') {
|
||||
setOutputConfigTabSchema(config);
|
||||
}
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('initValues change: ', initValues);
|
||||
if (initValues) {
|
||||
basicForm.setFieldsValue(initValues.basic);
|
||||
aiForm.setFieldsValue(initValues.ai);
|
||||
triggerForm.setFieldsValue(initValues.trigger);
|
||||
safetyForm.setFieldsValue(initValues.safety);
|
||||
outputForm.setFieldsValue(initValues.output);
|
||||
}
|
||||
}, [aiForm, basicForm, initValues, outputForm, safetyForm, triggerForm]);
|
||||
// useEffect(() => {
|
||||
// console.log('initValues change: ', initValues);
|
||||
// if (initValues) {
|
||||
// // basicForm.setFieldsValue(initValues.basic);
|
||||
// // aiForm.setFieldsValue(initValues.ai);
|
||||
// // triggerForm.setFieldsValue(initValues.trigger);
|
||||
// // safetyForm.setFieldsValue(initValues.safety);
|
||||
// // outputForm.setFieldsValue(initValues.output);
|
||||
// }
|
||||
// }, [aiForm, basicForm, initValues, outputForm, safetyForm, triggerForm]);
|
||||
|
||||
function getLLMModelList() {
|
||||
httpClient
|
||||
.getProviderLLMModels()
|
||||
.then((resp) => {
|
||||
setLlmModelList(
|
||||
resp.models.map((model: LLMModel) => {
|
||||
return {
|
||||
value: model.uuid,
|
||||
label: model.name,
|
||||
};
|
||||
}),
|
||||
);
|
||||
// setLlmModelList(
|
||||
// resp.models.map((model: LLMModel) => {
|
||||
// return {
|
||||
// value: model.uuid,
|
||||
// label: model.name,
|
||||
// };
|
||||
// }),
|
||||
// );
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('get LLM model list error', err);
|
||||
@@ -120,511 +147,89 @@ export default function PipelineFormComponent({
|
||||
}
|
||||
|
||||
function handleCreate() {
|
||||
Promise.all([
|
||||
basicForm.validateFields(),
|
||||
aiForm.validateFields(),
|
||||
triggerForm.validateFields(),
|
||||
safetyForm.validateFields(),
|
||||
outputForm.validateFields(),
|
||||
])
|
||||
.then(() => {
|
||||
const pipeline = assembleForm();
|
||||
httpClient.createPipeline(pipeline).then(() => onFinish());
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
});
|
||||
// Promise.all([
|
||||
// // basicForm.validateFields(),
|
||||
// // aiForm.validateFields(),
|
||||
// // triggerForm.validateFields(),
|
||||
// // safetyForm.validateFields(),
|
||||
// // outputForm.validateFields(),
|
||||
// ])
|
||||
// .then(() => {
|
||||
// const pipeline = assembleForm();
|
||||
// httpClient.createPipeline(pipeline).then(() => onFinish());
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// console.error(e);
|
||||
// });
|
||||
}
|
||||
|
||||
function handleModify() {
|
||||
Promise.all([
|
||||
basicForm.validateFields(),
|
||||
aiForm.validateFields(),
|
||||
triggerForm.validateFields(),
|
||||
safetyForm.validateFields(),
|
||||
outputForm.validateFields(),
|
||||
])
|
||||
.then(() => {
|
||||
const pipeline = assembleForm();
|
||||
httpClient
|
||||
.updatePipeline(pipelineId || '', pipeline)
|
||||
.then(() => onFinish());
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
});
|
||||
// Promise.all([
|
||||
// // basicForm.validateFields(),
|
||||
// // aiForm.validateFields(),
|
||||
// // triggerForm.validateFields(),
|
||||
// // safetyForm.validateFields(),
|
||||
// // outputForm.validateFields(),
|
||||
// ])
|
||||
// .then(() => {
|
||||
// const pipeline = assembleForm();
|
||||
// httpClient
|
||||
// .updatePipeline(pipelineId || '', pipeline)
|
||||
// .then(() => onFinish());
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// console.error(e);
|
||||
// });
|
||||
}
|
||||
|
||||
// TODO 类型混乱，需要优化
|
||||
function assembleForm(): Pipeline {
|
||||
console.log('basicForm:', basicForm.getFieldsValue());
|
||||
console.log('aiForm:', aiForm.getFieldsValue());
|
||||
console.log('triggerForm:', triggerForm.getFieldsValue());
|
||||
console.log('safetyForm:', safetyForm.getFieldsValue());
|
||||
console.log('outputForm:', outputForm.getFieldsValue());
|
||||
const config: object = {
|
||||
ai: aiForm.getFieldsValue(),
|
||||
trigger: triggerForm.getFieldsValue(),
|
||||
safety: safetyForm.getFieldsValue(),
|
||||
output: outputForm.getFieldsValue(),
|
||||
};
|
||||
// function assembleForm(): Pipeline {
|
||||
// console.log('basicForm:', basicForm.getFieldsValue());
|
||||
// console.log('aiForm:', aiForm.getFieldsValue());
|
||||
// console.log('triggerForm:', triggerForm.getFieldsValue());
|
||||
// console.log('safetyForm:', safetyForm.getFieldsValue());
|
||||
// console.log('outputForm:', outputForm.getFieldsValue());
|
||||
// const config: object = {
|
||||
// ai: aiForm.getFieldsValue(),
|
||||
// trigger: triggerForm.getFieldsValue(),
|
||||
// safety: safetyForm.getFieldsValue(),
|
||||
// output: outputForm.getFieldsValue(),
|
||||
// };
|
||||
|
||||
return {
|
||||
config,
|
||||
created_at: '',
|
||||
description: basicForm.getFieldsValue().description,
|
||||
for_version: '',
|
||||
name: basicForm.getFieldsValue().name,
|
||||
stages: [],
|
||||
updated_at: '',
|
||||
uuid: UUID.generate(),
|
||||
};
|
||||
}
|
||||
// return {
|
||||
// config,
|
||||
// created_at: '',
|
||||
// description: basicForm.getFieldsValue().description,
|
||||
// for_version: '',
|
||||
// name: basicForm.getFieldsValue().name,
|
||||
// stages: [],
|
||||
// updated_at: '',
|
||||
// uuid: UUID.generate(),
|
||||
// };
|
||||
// }
|
||||
|
||||
return (
|
||||
<div style={{ maxHeight: '70vh', overflowY: 'auto' }}>
|
||||
<h1>{getNowFormLabel().label}</h1>
|
||||
<Form
|
||||
layout={'vertical'}
|
||||
style={{
|
||||
display: getNowFormLabel().name === 'basic' ? 'block' : 'none',
|
||||
}}
|
||||
form={basicForm}
|
||||
disabled={disableForm}
|
||||
>
|
||||
<Form.Item
|
||||
label="流水线名称"
|
||||
name={'name'}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="流水线描述"
|
||||
name={'description'}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
{/* AI能力表单 ai */}
|
||||
<Form
|
||||
layout={'vertical'}
|
||||
style={{ display: getNowFormLabel().name === 'ai' ? 'block' : 'none' }}
|
||||
form={aiForm}
|
||||
disabled={disableForm}
|
||||
>
|
||||
{/* Runner 配置区块 */}
|
||||
<div className={`${styles.formItemSubtitle}`}>运行器</div>
|
||||
<Form.Item
|
||||
label="运行器"
|
||||
name={['runner', 'runner']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Select
|
||||
options={[
|
||||
{ label: '内置 Agent', value: 'local-agent' },
|
||||
{ label: 'Dify 服务 API', value: 'dify-service-api' },
|
||||
{ label: '阿里云百炼平台 API', value: 'dashscope-app-api' },
|
||||
]}
|
||||
onChange={(value) => setNowAIRunner(value)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Tabs defaultValue={getNowFormLabel().name}>
|
||||
<TabsList>
|
||||
{formLabelList.map((formLabel) => (
|
||||
<TabsTrigger key={formLabel.name} value={formLabel.name}>
|
||||
{formLabel.label}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
{formLabelList.map((formLabel) => (
|
||||
<TabsContent key={formLabel.name} value={formLabel.name}>
|
||||
<h1>{formLabel.label}</h1>
|
||||
<div>name: {formLabel.name}</div>
|
||||
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
|
||||
{/* 内置 Agent 配置区块 */}
|
||||
{nowAIRunner === 'local-agent' && (
|
||||
<>
|
||||
<div className={`${styles.formItemSubtitle}`}>配置内置Agent</div>
|
||||
<Form.Item
|
||||
label="模型"
|
||||
name={['local-agent', 'model']}
|
||||
rules={[{ required: true }]}
|
||||
tooltip="从模型库中选择"
|
||||
>
|
||||
<Select
|
||||
options={llmModelList}
|
||||
placeholder="请选择语言模型"
|
||||
showSearch
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="最大回合数"
|
||||
name={['local-agent', 'max-round']}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputNumber precision={0} />
|
||||
</Form.Item>
|
||||
{/* TODO 这里要做转换处理 */}
|
||||
<Form.Item
|
||||
label="提示词"
|
||||
name={['local-agent', 'prompt']}
|
||||
rules={[{ required: true }]}
|
||||
tooltip="按JSON格式输入"
|
||||
>
|
||||
<Input.TextArea
|
||||
rows={4}
|
||||
placeholder={`示例结构：{ "role": "user", "content": "你好" } `}
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
{/* Dify 服务 API 区块 */}
|
||||
{nowAIRunner === 'dify-service-api' && (
|
||||
<>
|
||||
<div className={`${styles.formItemSubtitle}`}>配置Dify服务API</div>
|
||||
<Form.Item
|
||||
label="基础 URL"
|
||||
name={['dify-service-api', 'base-url']}
|
||||
rules={[
|
||||
{ required: true },
|
||||
{ type: 'url', message: '请输入有效的URL地址' },
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="应用类型"
|
||||
name={['dify-service-api', 'app-type']}
|
||||
initialValue={'chat'}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Select
|
||||
options={[
|
||||
{ label: '聊天（包括Chatflow）', value: 'chat' },
|
||||
{ label: 'Agent', value: 'agent' },
|
||||
{ label: '工作流', value: 'workflow' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="API 密钥"
|
||||
name={['dify-service-api', 'api-key']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input.Password visibilityToggle={false} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="思维链转换"
|
||||
name={['dify-service-api', 'thinking-convert']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Select
|
||||
options={[
|
||||
{ label: '转换成 \<think\>...\<\/think\>', value: 'plain' },
|
||||
{ label: '原始', value: 'original' },
|
||||
{ label: '移除', value: 'remove' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
{/* 阿里云百炼区块 */}
|
||||
{nowAIRunner === 'dashscope-app-api' && (
|
||||
<>
|
||||
<div className={`${styles.formItemSubtitle}`}>
|
||||
配置阿里云百炼平台 API
|
||||
</div>
|
||||
<Form.Item
|
||||
label="应用类型"
|
||||
name={['dashscope-app-api', 'app-type']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Select
|
||||
options={[
|
||||
{ label: 'Agent', value: 'agent' },
|
||||
{ label: '工作流', value: 'workflow' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="API 密钥"
|
||||
name={['dashscope-app-api', 'api-key']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input.Password visibilityToggle={false} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="应用 ID"
|
||||
name={['dashscope-app-api', 'app-id']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="引用文本"
|
||||
name={['dashscope-app-api', 'references_quote']}
|
||||
initialValue={'参考资料来自:'}
|
||||
>
|
||||
<Input.TextArea rows={2} />
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</Form>
|
||||
|
||||
{/* 触发条件表单 trigger */}
|
||||
<Form
|
||||
layout={'vertical'}
|
||||
style={{
|
||||
display: getNowFormLabel().name === 'trigger' ? 'block' : 'none',
|
||||
}}
|
||||
form={triggerForm}
|
||||
disabled={disableForm}
|
||||
>
|
||||
{/* 群响应规则块 */}
|
||||
<div className={`${styles.formItemSubtitle}`}> 群响应规则</div>
|
||||
<Form.Item
|
||||
label={'是否在消息@机器人时触发'}
|
||||
name={['group-respond-rules', 'at']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={'消息前缀'}
|
||||
name={['group-respond-rules', 'prefix']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Select
|
||||
options={[{ value: '"type": "string"', label: '"type": "string"' }]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={'正则表达式'}
|
||||
name={['group-respond-rules', 'regexp']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Select mode="tags" options={[]} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={'随机'}
|
||||
name={['group-respond-rules', 'random']}
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<InputNumber max={1} min={0} step={0.05} />
|
||||
</Form.Item>
|
||||
<div className={`${styles.formItemSubtitle}`}> 访问控制 </div>
|
||||
<Form.Item
|
||||
label={'模式'}
|
||||
name={['access-control', 'mode']}
|
||||
rules={[{ required: true }]}
|
||||
tooltip={'访问控制模式'}
|
||||
>
|
||||
<Select
|
||||
options={[
|
||||
{ label: '黑名单', value: 'blacklist' },
|
||||
{ label: '白名单', value: 'Whitelist' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={'黑名单'}
|
||||
name={['access-control', 'blacklist']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Select mode={'tags'} options={[]} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={'白名单'}
|
||||
name={['access-control', 'whitelist']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Select mode={'tags'} options={[]} />
|
||||
</Form.Item>
|
||||
|
||||
<div className={`${styles.formItemSubtitle}`}> 消息忽略规则 </div>
|
||||
|
||||
<Form.Item
|
||||
label={'前缀'}
|
||||
name={['ignore-rules', 'whitelist']}
|
||||
rules={[{ required: true }]}
|
||||
tooltip={'消息前缀'}
|
||||
>
|
||||
<Select mode={'tags'} options={[]} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={'正则表达式'}
|
||||
name={['ignore-rules', 'regexp']}
|
||||
rules={[{ required: true }]}
|
||||
tooltip={'消息正则表达式'}
|
||||
>
|
||||
<Select mode={'tags'} options={[]} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
{/* 安全控制表单 safety */}
|
||||
<Form
|
||||
layout={'vertical'}
|
||||
style={{
|
||||
display: getNowFormLabel().name === 'safety' ? 'block' : 'none',
|
||||
}}
|
||||
form={safetyForm}
|
||||
disabled={disableForm}
|
||||
>
|
||||
{/* 内容过滤块 content-filter */}
|
||||
<div className={`${styles.formItemSubtitle}`}> 内容过滤 </div>
|
||||
<Form.Item
|
||||
label={'检查范围'}
|
||||
name={['content-filter', 'scope']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Select
|
||||
options={[
|
||||
{ label: '全部', value: 'all' },
|
||||
{ label: '传入消息（用户消息）', value: 'income-msg' },
|
||||
{ label: '传出消息（机器人消息）', value: 'output-msg' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={'检查敏感词'}
|
||||
name={['content-filter', 'check-sensitive-words']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
|
||||
{/* 速率限制块 rate-limit */}
|
||||
<div className={`${styles.formItemSubtitle}`}> 速率限制 </div>
|
||||
<Form.Item
|
||||
label={'窗口长度（秒）'}
|
||||
name={['rate-limit', 'window-length']}
|
||||
rules={[{ required: true }]}
|
||||
initialValue={60}
|
||||
>
|
||||
<InputNumber></InputNumber>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={'限制次数'}
|
||||
name={['rate-limit', 'limitation']}
|
||||
rules={[{ required: true }]}
|
||||
initialValue={60}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={'策略'}
|
||||
name={['rate-limit', 'strategy']}
|
||||
rules={[{ required: true }]}
|
||||
initialValue={'drop'}
|
||||
>
|
||||
<Select
|
||||
options={[
|
||||
{ label: '丢弃', value: 'drop' },
|
||||
{ label: '等待', value: 'wait' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
{/* 输出处理控制表单 output */}
|
||||
<Form
|
||||
layout={'vertical'}
|
||||
style={{
|
||||
display: getNowFormLabel().name === 'output' ? 'block' : 'none',
|
||||
}}
|
||||
form={outputForm}
|
||||
disabled={disableForm}
|
||||
>
|
||||
{/* 长文本处理区块 */}
|
||||
<div className={`${styles.formItemSubtitle}`}> 长文本处理 </div>
|
||||
<Form.Item
|
||||
label="阈值"
|
||||
name={['long-text-processing', 'threshold']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="策略"
|
||||
name={['long-text-processing', 'strategy']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Select
|
||||
options={[
|
||||
{ label: '转发消息组件', value: 'forward' },
|
||||
{ label: '转换为图片', value: 'image' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="字体路径"
|
||||
name={['long-text-processing', 'font-path']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
{/* 强制延迟区块 */}
|
||||
<div className={`${styles.formItemSubtitle}`}> 强制延迟 </div>
|
||||
<Form.Item
|
||||
label="最小秒数"
|
||||
name={['force-delay', 'min']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="最大秒数"
|
||||
name={['force-delay', 'max']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
|
||||
{/* 杂项区块 */}
|
||||
<div className={`${styles.formItemSubtitle}`}> 杂项 </div>
|
||||
<Form.Item
|
||||
label="不输出异常信息给用户"
|
||||
name={['misc', 'hide-exception']}
|
||||
rules={[{ required: true }]}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="在回复中@发送者"
|
||||
name={['misc', 'at-sender']}
|
||||
rules={[{ required: true }]}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="引用原文"
|
||||
name={['misc', 'quote-origin']}
|
||||
rules={[{ required: true }]}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="跟踪函数调用"
|
||||
name={['misc', 'track-function-calls']}
|
||||
rules={[{ required: true }]}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<div className={`${styles.changeFormButtonGroupContainer}`}>
|
||||
{/* <div className={`${styles.changeFormButtonGroupContainer}`}>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<CaretLeftOutlined />}
|
||||
@@ -646,7 +251,7 @@ export default function PipelineFormComponent({
|
||||
<Button type="primary" onClick={handleCommit}>
|
||||
提交
|
||||
</Button>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
export interface PipelineFormEntity {
|
||||
basic: object;
|
||||
ai: object;
|
||||
trigger: object;
|
||||
safety: object;
|
||||
output: object;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
'use client';
|
||||
import { Modal } from 'antd';
|
||||
import { useState, useEffect } from 'react';
|
||||
import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
|
||||
import PipelineFormComponent from './components/pipeline-form/PipelineFormComponent';
|
||||
@@ -8,6 +7,14 @@ import { PipelineCardVO } from '@/app/home/pipelines/components/pipeline-card/Pi
|
||||
import PipelineCard from '@/app/home/pipelines/components/pipeline-card/PipelineCard';
|
||||
import { PipelineFormEntity } from '@/app/home/pipelines/components/pipeline-form/PipelineFormEntity';
|
||||
import styles from './pipelineConfig.module.css';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export default function PluginConfigPage() {
|
||||
@@ -74,7 +81,7 @@ export default function PluginConfigPage() {
|
||||
return (
|
||||
<div className={styles.configPageContainer}>
|
||||
|
||||
<Modal
|
||||
{/* <Modal
|
||||
title={isEditForm ? '编辑流水线' : '创建流水线'}
|
||||
centered
|
||||
open={modalOpen}
|
||||
@@ -94,7 +101,27 @@ export default function PluginConfigPage() {
|
||||
disableForm={disableForm}
|
||||
initValues={selectedPipelineFormValue}
|
||||
/>
|
||||
</Modal>
|
||||
</Modal> */}
|
||||
<Dialog open={modalOpen} onOpenChange={setModalOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{isEditForm ? '编辑流水线' : '创建流水线'}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<PipelineFormComponent
|
||||
onFinish={() => {
|
||||
getPipelines();
|
||||
setModalOpen(false);
|
||||
}}
|
||||
isEditMode={isEditForm}
|
||||
pipelineId={selectedPipelineId}
|
||||
disableForm={disableForm}
|
||||
initValues={selectedPipelineFormValue}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
|
||||
{pipelineList.length > 0 && (
|
||||
<div className={styles.pipelineListContainer}>
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
import { IDynamicFormItemSchema } from '@/app/infra/entities/form/dynamic';
|
||||
import { I18nLabel } from '@/app/infra/entities/common';
|
||||
import { PipelineConfigTab } from '@/app/infra/entities/pipeline';
|
||||
|
||||
export interface ApiResponse<T> {
|
||||
code: number;
|
||||
data: T;
|
||||
@@ -26,7 +30,9 @@ export interface Requester {
|
||||
label: I18nText;
|
||||
description: I18nText;
|
||||
icon?: string;
|
||||
spec: object;
|
||||
spec: {
|
||||
config: IDynamicFormItemSchema[];
|
||||
}
|
||||
}
|
||||
|
||||
export interface ApiRespProviderLLMModels {
|
||||
@@ -302,3 +308,7 @@ interface GetPipeline {
|
||||
export interface GetPipelineResponseData {
|
||||
pipeline: GetPipeline;
|
||||
}
|
||||
|
||||
export interface GetPipelineMetadataResponseData {
|
||||
configs: PipelineConfigTab[];
|
||||
}
|
||||
5
web/src/app/infra/entities/common.ts
Normal file
5
web/src/app/infra/entities/common.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export interface I18nLabel {
|
||||
en_US: string;
|
||||
zh_CN: string;
|
||||
ja_JP?: string;
|
||||
}
|
||||
29
web/src/app/infra/entities/form/dynamic.ts
Normal file
29
web/src/app/infra/entities/form/dynamic.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import { I18nLabel } from '@/app/infra/entities/common';
|
||||
|
||||
export interface IDynamicFormItemSchema {
|
||||
id: string;
|
||||
default: string | number | boolean | Array<unknown>;
|
||||
label: I18nLabel;
|
||||
name: string;
|
||||
required: boolean;
|
||||
type: DynamicFormItemType;
|
||||
description?: I18nLabel;
|
||||
options?: IDynamicFormItemOption[];
|
||||
}
|
||||
|
||||
export enum DynamicFormItemType {
|
||||
INT = 'integer',
|
||||
FLOAT = 'float',
|
||||
BOOLEAN = 'boolean',
|
||||
STRING = 'string',
|
||||
STRING_ARRAY = 'array[string]',
|
||||
SELECT = 'select',
|
||||
LLM_MODEL_SELECTOR = 'llm-model-selector',
|
||||
PROMPT_EDITOR = 'prompt-editor',
|
||||
UNKNOWN = 'unknown',
|
||||
}
|
||||
|
||||
export interface IDynamicFormItemOption {
|
||||
name: string;
|
||||
label: I18nLabel;
|
||||
}
|
||||
22
web/src/app/infra/entities/pipeline/index.ts
Normal file
22
web/src/app/infra/entities/pipeline/index.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { I18nLabel } from '@/app/infra/entities/common';
|
||||
import { IDynamicFormItemSchema } from '@/app/infra/entities/form/dynamic';
|
||||
|
||||
export interface PipelineFormEntity {
|
||||
basic: object;
|
||||
ai: object;
|
||||
trigger: object;
|
||||
safety: object;
|
||||
output: object;
|
||||
}
|
||||
|
||||
export interface PipelineConfigTab {
|
||||
name: string;
|
||||
label: I18nLabel;
|
||||
stages: PipelineConfigStage[];
|
||||
}
|
||||
|
||||
export interface PipelineConfigStage {
|
||||
name: string;
|
||||
label: I18nLabel;
|
||||
config: IDynamicFormItemSchema[];
|
||||
}
|
||||
@@ -28,7 +28,8 @@ import {
|
||||
ApiRespUserToken,
|
||||
MarketPluginResponse,
|
||||
GetPipelineResponseData,
|
||||
} from '../api/api-types';
|
||||
GetPipelineMetadataResponseData
|
||||
} from '@/app/infra/entities/api';
|
||||
import { notification } from 'antd';
|
||||
|
||||
type JSONValue = string | number | boolean | JSONObject | JSONArray | null;
|
||||
@@ -249,7 +250,7 @@ class HttpClient {
|
||||
}
|
||||
|
||||
// ============ Pipeline API ============
|
||||
public getGeneralPipelineMetadata(): Promise<object> {
|
||||
public getGeneralPipelineMetadata(): Promise<GetPipelineMetadataResponseData> {
|
||||
// as designed, this method will be deprecated, and only for developer to check the prefered config schema
|
||||
return this.get('/api/v1/pipelines/_/metadata');
|
||||
}
|
||||
|
||||
66
web/src/components/ui/tabs.tsx
Normal file
66
web/src/components/ui/tabs.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Tabs({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
||||
return (
|
||||
<TabsPrimitive.Root
|
||||
data-slot="tabs"
|
||||
className={cn("flex flex-col gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsList({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.List>) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
data-slot="tabs-list"
|
||||
className={cn(
|
||||
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsTrigger({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
||||
return (
|
||||
<TabsPrimitive.Trigger
|
||||
data-slot="tabs-trigger"
|
||||
className={cn(
|
||||
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
||||
return (
|
||||
<TabsPrimitive.Content
|
||||
data-slot="tabs-content"
|
||||
className={cn("flex-1 outline-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
||||
Reference in New Issue
Block a user