injectlib/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2025-11-25 03:15:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: fix eslint limits to build

Browse Source
This commit is contained in:
HYana
2025-04-28 21:35:26 +08:00
parent 32f138bff5
commit 5c74bb41c9
15 changed files with 1886 additions and 1887 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web_ui/src/app/home/bots/ICreateBotField.ts
View File

@@ -1,3 +0,0 @@
export interface ICreateBotField {
}

535
web_ui/src/app/home/bots/components/bot-form/BotForm.tsx
View File

@@ -1,281 +1,292 @@
import {BotFormEntity, IBotFormEntity} from "@/app/home/bots/components/bot-form/BotFormEntity";
import {Button, Form, Input, Select, Space} from "antd";
import {useEffect, useState} from "react";
import {IChooseAdapterEntity} from "@/app/home/bots/components/bot-form/ChooseAdapterEntity";
import {
DynamicFormItemConfig,
IDynamicFormItemConfig,
parseDynamicFormItemType
BotFormEntity,
IBotFormEntity
} from "@/app/home/bots/components/bot-form/BotFormEntity";
import { Button, Form, Input, notification, Select, Space } from "antd";
import { useEffect, useState } from "react";
import { IChooseAdapterEntity } from "@/app/home/bots/components/bot-form/ChooseAdapterEntity";
import {
DynamicFormItemConfig,
IDynamicFormItemConfig,
parseDynamicFormItemType
} from "@/app/home/components/dynamic-form/DynamicFormItemConfig";
import {UUID} from 'uuidjs'
import { UUID } from "uuidjs";
import DynamicFormComponent from "@/app/home/components/dynamic-form/DynamicFormComponent";
import {httpClient} from "@/app/infra/http/HttpClient";
import { httpClient } from "@/app/infra/http/HttpClient";
import { Bot } from "@/app/infra/api/api-types";
import { notification } from "antd";
export default function BotForm({
initBotId,
onFormSubmit,
onFormCancel,
initBotId,
onFormSubmit,
onFormCancel
}: {
initBotId?: string;
onFormSubmit: (value: IBotFormEntity) => void;
onFormCancel: (value: IBotFormEntity) => void;
initBotId?: string;
onFormSubmit: (value: IBotFormEntity) => void;
onFormCancel: (value: IBotFormEntity) => void;
}) {
const [adapterNameToDynamicConfigMap, setAdapterNameToDynamicConfigMap] = useState(new Map<string, IDynamicFormItemConfig[]>())
const [form] = Form.useForm<IBotFormEntity>();
const [showDynamicForm, setShowDynamicForm] = useState<boolean>(false)
const [dynamicForm] = Form.useForm();
const [adapterNameList, setAdapterNameList] = useState<IChooseAdapterEntity[]>([])
const [dynamicFormConfigList, setDynamicFormConfigList] = useState<IDynamicFormItemConfig[]>([])
const [isLoading, setIsLoading] = useState<boolean>(false)
const [adapterNameToDynamicConfigMap, setAdapterNameToDynamicConfigMap] =
useState(new Map<string, IDynamicFormItemConfig[]>());
const [form] = Form.useForm<IBotFormEntity>();
const [showDynamicForm, setShowDynamicForm] = useState<boolean>(false);
const [dynamicForm] = Form.useForm();
const [adapterNameList, setAdapterNameList] = useState<
IChooseAdapterEntity[]
>([]);
const [dynamicFormConfigList, setDynamicFormConfigList] = useState<
IDynamicFormItemConfig[]
>([]);
const [isLoading, setIsLoading] = useState<boolean>(false);
useEffect(() => {
initBotFormComponent()
if (initBotId) {
onEditMode()
} else {
onCreateMode()
}
}, [])
useEffect(() => {
initBotFormComponent();
if (initBotId) {
onEditMode();
} else {
onCreateMode();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
async function initBotFormComponent() {
// 拉取adapter
const rawAdapterList = await httpClient.getAdapters()
// 初始化适配器选择列表
setAdapterNameList(
rawAdapterList.adapters.map(item => {
return {
label: item.label.zh_CN,
value: item.name
}
async function initBotFormComponent() {
// 拉取adapter
const rawAdapterList = await httpClient.getAdapters();
// 初始化适配器选择列表
setAdapterNameList(
rawAdapterList.adapters.map((item) => {
return {
label: item.label.zh_CN,
value: item.name
};
})
);
// 初始化适配器表单map
rawAdapterList.adapters.forEach((rawAdapter) => {
adapterNameToDynamicConfigMap.set(
rawAdapter.name,
rawAdapter.spec.config.map(
(item) =>
new DynamicFormItemConfig({
default: item.default,
id: UUID.generate(),
label: item.label,
name: item.name,
required: item.required,
type: parseDynamicFormItemType(item.type)
})
)
// 初始化适配器表单map
rawAdapterList.adapters.forEach(rawAdapter => {
adapterNameToDynamicConfigMap.set(
rawAdapter.name,
rawAdapter.spec.config.map(item =>
new DynamicFormItemConfig({
default: item.default,
id: UUID.generate(),
label: item.label,
name: item.name,
required: item.required,
type: parseDynamicFormItemType(item.type)
})
)
)
);
});
// 拉取初始化表单信息
if (initBotId) {
getBotFieldById(initBotId).then((val) => {
form.setFieldsValue(val);
handleAdapterSelect(val.adapter);
dynamicForm.setFieldsValue(val.adapter_config);
});
} else {
form.resetFields();
}
setAdapterNameToDynamicConfigMap(adapterNameToDynamicConfigMap);
}
async function onCreateMode() {}
function onEditMode() {}
async function getBotFieldById(botId: string): Promise<IBotFormEntity> {
const bot = (await httpClient.getBot(botId)).bot;
return new BotFormEntity({
adapter: bot.adapter,
description: bot.description,
name: bot.name,
adapter_config: bot.adapter_config
});
}
function handleAdapterSelect(adapterName: string) {
console.log("Select adapter: ", adapterName);
if (adapterName) {
const dynamicFormConfigList =
adapterNameToDynamicConfigMap.get(adapterName);
console.log(dynamicFormConfigList);
if (dynamicFormConfigList) {
setDynamicFormConfigList(dynamicFormConfigList);
}
setShowDynamicForm(true);
} else {
setShowDynamicForm(false);
}
}
function handleSubmitButton() {
form.submit();
}
function handleFormFinish() {
dynamicForm.submit();
}
// 只有通过外层固定表单验证才会走到这里，真正的提交逻辑在这里
function onDynamicFormSubmit(value: object) {
setIsLoading(true);
console.log("set loading", true);
if (initBotId) {
// 编辑提交
console.log("submit edit", form.getFieldsValue(), value);
const updateBot: Bot = {
uuid: initBotId,
name: form.getFieldsValue().name,
description: form.getFieldsValue().description,
adapter: form.getFieldsValue().adapter,
adapter_config: value
};
httpClient
.updateBot(initBotId, updateBot)
.then((res) => {
// TODO success toast
console.log("update bot success", res);
onFormSubmit(form.getFieldsValue());
notification.success({
message: "更新成功",
description: "机器人更新成功"
});
})
// 拉取初始化表单信息
if (initBotId) {
getBotFieldById(initBotId).then(val => {
form.setFieldsValue(val)
handleAdapterSelect(val.adapter)
dynamicForm.setFieldsValue(val.adapter_config)
})
} else {
form.resetFields()
}
setAdapterNameToDynamicConfigMap(adapterNameToDynamicConfigMap)
}
async function onCreateMode() {
}
function onEditMode() {
}
async function getBotFieldById(botId: string): Promise<IBotFormEntity> {
const bot = (await httpClient.getBot(botId)).bot
let botFormEntity = new BotFormEntity({
adapter: bot.adapter,
description: bot.description,
name: bot.name,
adapter_config: bot.adapter_config
.catch(() => {
// TODO error toast
notification.error({
message: "更新失败",
description: "机器人更新失败"
});
})
return botFormEntity
.finally(() => {
setIsLoading(false);
form.resetFields();
dynamicForm.resetFields();
});
} else {
// 创建提交
console.log("submit create", form.getFieldsValue(), value);
const newBot: Bot = {
name: form.getFieldsValue().name,
description: form.getFieldsValue().description,
adapter: form.getFieldsValue().adapter,
adapter_config: value
};
httpClient
.createBot(newBot)
.then((res) => {
// TODO success toast
notification.success({
message: "创建成功",
description: "机器人创建成功"
});
console.log(res);
onFormSubmit(form.getFieldsValue());
})
.catch(() => {
// TODO error toast
notification.error({
message: "创建失败",
description: "机器人创建失败"
});
})
.finally(() => {
setIsLoading(false);
form.resetFields();
dynamicForm.resetFields();
});
}
setShowDynamicForm(false);
console.log("set loading", false);
// TODO 刷新bot列表
// TODO 关闭当前弹窗 Already closed @setShowDynamicForm(false)?
}
function handleAdapterSelect(adapterName: string) {
console.log("Select adapter: ", adapterName)
if (adapterName) {
const dynamicFormConfigList = adapterNameToDynamicConfigMap.get(adapterName)
console.log(dynamicFormConfigList)
if (dynamicFormConfigList) {
setDynamicFormConfigList(dynamicFormConfigList)
}
setShowDynamicForm(true)
} else {
setShowDynamicForm(false)
}
}
function handleSaveButton() {
form.submit();
}
function handleSubmitButton() {
form.submit()
}
return (
<div>
<Form
form={form}
labelCol={{ span: 5 }}
wrapperCol={{ span: 18 }}
layout="vertical"
onFinish={handleFormFinish}
disabled={isLoading}
>
<Form.Item<IBotFormEntity>
label={"机器人名称"}
name={"name"}
rules={[{ required: true, message: "该项为必填项哦～" }]}
>
<Input
placeholder="为机器人取个好听的名字吧～"
style={{ width: 260 }}
></Input>
</Form.Item>
function handleFormFinish(value: IBotFormEntity) {
dynamicForm.submit()
}
<Form.Item<IBotFormEntity>
label={"描述"}
name={"description"}
rules={[{ required: true, message: "该项为必填项哦～" }]}
>
<Input placeholder="简单描述一下这个机器人"></Input>
</Form.Item>
// 只有通过外层固定表单验证才会走到这里，真正的提交逻辑在这里
function onDynamicFormSubmit(value: object) {
setIsLoading(true)
console.log('setloading', true)
if (initBotId) {
// 编辑提交
console.log('submit edit', form.getFieldsValue() ,value)
let updateBot: Bot = {
uuid: initBotId,
name: form.getFieldsValue().name,
description: form.getFieldsValue().description,
adapter: form.getFieldsValue().adapter,
adapter_config: value
}
httpClient.updateBot(initBotId, updateBot).then(res => {
// TODO success toast
console.log("update bot success", res)
onFormSubmit(form.getFieldsValue())
notification.success({
message: "更新成功",
description: "机器人更新成功"
})
}).catch(err => {
// TODO error toast
notification.error({
message: "更新失败",
description: "机器人更新失败"
})
}).finally(() => {
setIsLoading(false)
form.resetFields()
dynamicForm.resetFields()
})
} else {
// 创建提交
console.log('submit create', form.getFieldsValue() ,value)
let newBot: Bot = {
name: form.getFieldsValue().name,
description: form.getFieldsValue().description,
adapter: form.getFieldsValue().adapter,
adapter_config: value
}
httpClient.createBot(newBot).then(res => {
// TODO success toast
notification.success({
message: "创建成功",
description: "机器人创建成功"
})
console.log(res)
onFormSubmit(form.getFieldsValue())
}).catch(err => {
// TODO error toast
notification.error({
message: "创建失败",
description: "机器人创建失败"
})
}).finally(() => {
setIsLoading(false)
form.resetFields()
dynamicForm.resetFields()
})
}
setShowDynamicForm(false)
console.log('setloading', false)
// TODO 刷新bot列表
// TODO 关闭当前弹窗 Already closed @setShowDynamicForm(false)?
}
function handleSaveButton() {
form.submit()
}
return (
<div>
<Form
form={form}
labelCol={{span: 5}}
wrapperCol={{span: 18}}
layout='vertical'
onFinish={handleFormFinish}
disabled={isLoading}
>
<Form.Item<IBotFormEntity>
label={"机器人名称"}
name={"name"}
rules={[{required: true, message: "该项为必填项哦～"}]}
>
<Input
placeholder="为机器人取个好听的名字吧～"
style={{width: 260}}
></Input>
</Form.Item>
<Form.Item<IBotFormEntity>
label={"描述"}
name={"description"}
rules={[{required: true, message: "该项为必填项哦～"}]}
>
<Input
placeholder="简单描述一下这个机器人"
></Input>
</Form.Item>
<Form.Item<IBotFormEntity>
label={"平台/适配器选择"}
name={"adapter"}
rules={[{required: true, message: "该项为必填项哦～"}]}
>
<Select
style={{width: 220}}
onChange={(value) => {
handleAdapterSelect(value)
}}
options={adapterNameList}
/>
</Form.Item>
</Form>
{
showDynamicForm &&
<DynamicFormComponent
form={dynamicForm}
itemConfigList={dynamicFormConfigList}
onSubmit={onDynamicFormSubmit}
/>
}
<Space>
{
!initBotId &&
<Button
type="primary"
htmlType="button"
onClick={handleSubmitButton}
loading={isLoading}
>
提交
</Button>
}
{
initBotId &&
<Button
type="primary"
htmlType="submit"
onClick={handleSaveButton}
loading={isLoading}
>
保存
</Button>
}
<Button htmlType="button" onClick={() => {
onFormCancel(form.getFieldsValue())
}} disabled={isLoading}>
取消
</Button>
</Space>
</div>
)
}
<Form.Item<IBotFormEntity>
label={"平台/适配器选择"}
name={"adapter"}
rules={[{ required: true, message: "该项为必填项哦～" }]}
>
<Select
style={{ width: 220 }}
onChange={(value) => {
handleAdapterSelect(value);
}}
options={adapterNameList}
/>
</Form.Item>
</Form>
{showDynamicForm && (
<DynamicFormComponent
form={dynamicForm}
itemConfigList={dynamicFormConfigList}
onSubmit={onDynamicFormSubmit}
/>
)}
<Space>
{!initBotId && (
<Button
type="primary"
htmlType="button"
onClick={handleSubmitButton}
loading={isLoading}
>
提交
</Button>
)}
{initBotId && (
<Button
type="primary"
htmlType="submit"
onClick={handleSaveButton}
loading={isLoading}
>
保存
</Button>
)}
<Button
htmlType="button"
onClick={() => {
onFormCancel(form.getFieldsValue());
}}
disabled={isLoading}
>
取消
</Button>
</Space>
</div>
);
}

179
web_ui/src/app/home/components/home-sidebar/HomeSidebar.tsx
View File

@@ -1,107 +1,100 @@
"use client"
"use client";
import styles from "./HomeSidebar.module.css"
import {useEffect, useState} from "react";
import {SidebarChild, SidebarChildVO} from "@/app/home/components/home-sidebar/HomeSidebarChild";
import {useRouter, usePathname, useSearchParams} from "next/navigation";
import {sidebarConfigList} from "@/app/home/components/home-sidebar/sidbarConfigList";
import styles from "./HomeSidebar.module.css";
import { useEffect, useState } from "react";
import {
SidebarChild,
SidebarChildVO
} from "@/app/home/components/home-sidebar/HomeSidebarChild";
import { useRouter, usePathname } from "next/navigation";
import { sidebarConfigList } from "@/app/home/components/home-sidebar/sidbarConfigList";
// TODO 侧边导航栏要加动画
export default function HomeSidebar({
onSelectedChange
onSelectedChangeAction
}: {
onSelectedChange: (sidebarChild: SidebarChildVO) => void
onSelectedChangeAction: (sidebarChild: SidebarChildVO) => void;
}) {
// 路由相关
const router = useRouter()
const pathname = usePathname();
const searchParams = useSearchParams();
// 路由被动变化时处理
useEffect(() => {
handleRouteChange(pathname)
}, [pathname, searchParams]);
// 路由相关
const router = useRouter();
const pathname = usePathname();
// 路由被动变化时处理
useEffect(() => {
handleRouteChange(pathname);
}, [pathname]);
const [selectedChild, setSelectedChild] = useState<SidebarChildVO>(sidebarConfigList[0])
const [selectedChild, setSelectedChild] = useState<SidebarChildVO>(
sidebarConfigList[0]
);
useEffect(() => {
console.log('HomeSidebar挂载完成');
initSelect()
return () => console.log('HomeSidebar卸载');
}, []);
useEffect(() => {
console.log("HomeSidebar挂载完成");
initSelect();
return () => console.log("HomeSidebar卸载");
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
function handleChildClick(child: SidebarChildVO) {
setSelectedChild(child);
handleRoute(child);
onSelectedChangeAction(child);
}
function initSelect() {
handleChildClick(sidebarConfigList[0]);
}
function handleChildClick(child: SidebarChildVO) {
setSelectedChild(child)
handleRoute(child)
onSelectedChange(child)
function handleRoute(child: SidebarChildVO) {
console.log(child);
router.push(`${child.route}`);
}
function handleRouteChange(pathname: string) {
// TODO 这段逻辑并不好，未来router封装好后改掉
// 判断在home下，并且路由更改的是自己的路由子组件则更新UI
const routeList = pathname.split("/");
if (
routeList[1] === "home" &&
sidebarConfigList.find((childConfig) => childConfig.route === pathname)
) {
console.log("find success");
const routeSelectChild = sidebarConfigList.find(
(childConfig) => childConfig.route === pathname
);
if (routeSelectChild) {
setSelectedChild(routeSelectChild);
}
}
}
function initSelect() {
handleChildClick(sidebarConfigList[0])
}
function handleRoute(child: SidebarChildVO) {
console.log(child)
router.push(`${child.route}`)
}
function handleRouteChange(pathname: string) {
// TODO 这段逻辑并不好，未来router封装好后改掉
// 判断在home下，并且路由更改的是自己的路由子组件则更新UI
const routeList = pathname.split('/')
if (
routeList[1] === "home" &&
sidebarConfigList.find(childConfig =>
childConfig.route === pathname
)
) {
console.log("find success")
const routeSelectChild = sidebarConfigList.find(childConfig =>
childConfig.route === pathname
)
if (routeSelectChild) {
setSelectedChild(routeSelectChild)
}
}
}
return (
<div className={`${styles.sidebarContainer}`}>
{/* LangBot、ICON区域 */}
<div className={`${styles.langbotIconContainer}`}>
{/* icon */}
<div className={`${styles.langbotIcon}`}>
L
</div>
<div className={`${styles.langbotText}`}>
Langbot
</div>
return (
<div className={`${styles.sidebarContainer}`}>
{/* LangBot、ICON区域 */}
<div className={`${styles.langbotIconContainer}`}>
{/* icon */}
<div className={`${styles.langbotIcon}`}>L</div>
<div className={`${styles.langbotText}`}>Langbot</div>
</div>
{/* 菜单列表，后期可升级成配置驱动 */}
<div>
{sidebarConfigList.map((config) => {
return (
<div
key={config.id}
onClick={() => {
console.log("click:", config.id);
handleChildClick(config);
}}
>
<SidebarChild
isSelected={selectedChild.id === config.id}
icon={config.icon}
name={config.name}
/>
</div>
{/* 菜单列表，后期可升级成配置驱动 */}
<div>
{
sidebarConfigList.map(config => {
return (
<div
key={config.id}
onClick={() => {
console.log('click:', config.id)
handleChildClick(config)
}}
>
<SidebarChild
isSelected={selectedChild.id === config.id}
icon={config.icon}
name={config.name}
/>
</div>
)
})
}
</div>
</div>
);
}
);
})}
</div>
</div>
);
}

61
web_ui/src/app/home/components/home-sidebar/HomeSidebarChild.tsx
View File

@@ -1,41 +1,44 @@
import styles from "./HomeSidebar.module.css";
export interface ISidebarChildVO {
id: string;
icon: string;
name: string;
route: string;
id: string;
icon: string;
name: string;
route: string;
}
export class SidebarChildVO {
id: string;
icon: string;
name: string;
route: string;
id: string;
icon: string;
name: string;
route: string;
constructor(props: ISidebarChildVO) {
this.id = props.id;
this.icon = props.icon;
this.name = props.name;
this.route = props.route;
}
constructor(props: ISidebarChildVO) {
this.id = props.id;
this.icon = props.icon;
this.name = props.name;
this.route = props.route;
}
}
export function SidebarChild({
icon,
name,
isSelected,
icon,
name,
isSelected
}: {
icon: string;
name: string;
isSelected: boolean;
icon: string;
name: string;
isSelected: boolean;
}) {
return (
<div className={`${styles.sidebarChildContainer} ${isSelected ? styles.sidebarSelected : styles.sidebarUnselected}`}>
<div className={`${styles.sidebarChildIcon}`}/>
<div>{name}</div>
</div>
);
}
return (
<div
className={`${styles.sidebarChildContainer} ${isSelected ? styles.sidebarSelected : styles.sidebarUnselected}`}
>
<div className={`${styles.sidebarChildIcon}`} />
<div>
{icon}
{name}
</div>
</div>
);
}

48
web_ui/src/app/home/layout.tsx
View File

@@ -1,36 +1,30 @@
"use client"
"use client";
import '@ant-design/v5-patch-for-react-19';
import styles from "./layout.module.css"
import "@ant-design/v5-patch-for-react-19";
import styles from "./layout.module.css";
import HomeSidebar from "@/app/home/components/home-sidebar/HomeSidebar";
import HomeTitleBar from "@/app/home/components/home-titlebar/HomeTitleBar";
import React, {useState} from "react";
import {SidebarChildVO} from "@/app/home/components/home-sidebar/HomeSidebarChild";
import { useRouter } from 'next/navigation';
import React, { useState } from "react";
import { SidebarChildVO } from "@/app/home/components/home-sidebar/HomeSidebarChild";
export default function HomeLayout({
children
children
}: Readonly<{
children: React.ReactNode;
children: React.ReactNode;
}>) {
const router = useRouter();
const [title, setTitle] = useState<string>("")
const onSelectedChange = (child: SidebarChildVO) => {
setTitle(child.name)
}
const [title, setTitle] = useState<string>("");
const onSelectedChange = (child: SidebarChildVO) => {
setTitle(child.name);
};
return (
<div className={`${styles.homeLayoutContainer}`}>
<HomeSidebar
onSelectedChange={onSelectedChange}
/>
<div className={`${styles.main}`}>
<HomeTitleBar title={title}/>
{/* 主页面 */}
<div className={`${styles.mainContent}`}>
{children}
</div>
</div>
</div>
)
return (
<div className={`${styles.homeLayoutContainer}`}>
<HomeSidebar onSelectedChangeAction={onSelectedChange} />
<div className={`${styles.main}`}>
<HomeTitleBar title={title} />
{/* 主页面 */}
<div className={`${styles.mainContent}`}>{children}</div>
</div>
</div>
);
}

541
web_ui/src/app/home/models/component/llm-form/LLMForm.tsx
View File

@@ -1,296 +1,287 @@
import styles from "@/app/home/models/LLMConfig.module.css";
import {Button, Form, Input, Select, SelectProps, Space, Modal} from "antd";
import {ICreateLLMField} from "@/app/home/models/ICreateLLMField";
import {useEffect, useState} from "react";
import {IChooseRequesterEntity} from "@/app/home/models/component/llm-form/ChooseAdapterEntity";
import { Button, Form, Input, Select, SelectProps, Space, Modal } from "antd";
import { ICreateLLMField } from "@/app/home/models/ICreateLLMField";
import { useEffect, useState } from "react";
import { IChooseRequesterEntity } from "@/app/home/models/component/llm-form/ChooseAdapterEntity";
import { httpClient } from "@/app/infra/http/HttpClient";
import {LLMModel} from "@/app/infra/api/api-types";
import {UUID} from "uuidjs";
import { LLMModel } from "@/app/infra/api/api-types";
import { UUID } from "uuidjs";
export default function LLMForm({
editMode,
initLLMId,
onFormSubmit,
onFormCancel,
onLLMDeleted,
editMode,
initLLMId,
onFormSubmit,
onFormCancel,
onLLMDeleted
}: {
editMode: boolean;
initLLMId?: string;
onFormSubmit: (value: ICreateLLMField) => void;
onFormCancel: (value: ICreateLLMField) => void;
onLLMDeleted: () => void;
editMode: boolean;
initLLMId?: string;
onFormSubmit: (value: ICreateLLMField) => void;
onFormCancel: (value: ICreateLLMField) => void;
onLLMDeleted: () => void;
}) {
const [form] = Form.useForm<ICreateLLMField>();
const extraOptions: SelectProps['options'] = []
const [initValue, setInitValue] = useState<ICreateLLMField>()
const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false)
const abilityOptions: SelectProps['options'] = [
{
label: '函数调用',
value: 'func_call',
},
{
label: '图像识别',
value: 'vision',
},
];
const [requesterNameList, setRequesterNameList] = useState<IChooseRequesterEntity[]>([])
useEffect(() => {
initLLMModelFormComponent()
if (editMode && initLLMId) {
getLLMConfig(initLLMId).then(val => {
form.setFieldsValue(val)
})
} else {
form.resetFields()
}
}, [])
async function initLLMModelFormComponent() {
const requesterNameList = await httpClient.getProviderRequesters()
setRequesterNameList(requesterNameList.requesters.map(item => {
return {
label: item.label.zh_CN,
value: item.name
}
}))
const [form] = Form.useForm<ICreateLLMField>();
const extraOptions: SelectProps["options"] = [];
const [initValue] = useState<ICreateLLMField>();
const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false);
const abilityOptions: SelectProps["options"] = [
{
label: "函数调用",
value: "func_call"
},
{
label: "图像识别",
value: "vision"
}
];
const [requesterNameList, setRequesterNameList] = useState<
IChooseRequesterEntity[]
>([]);
async function getLLMConfig(id: string): Promise<ICreateLLMField> {
useEffect(() => {
initLLMModelFormComponent();
if (editMode && initLLMId) {
getLLMConfig(initLLMId).then((val) => {
form.setFieldsValue(val);
});
} else {
form.resetFields();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const llmModel = await httpClient.getProviderLLMModel(id)
let fakeExtraArgs = []
const extraArgs = llmModel.model.extra_args as Record<string, string>
for (const key in extraArgs) {
fakeExtraArgs.push(`${key}:${extraArgs[key]}`)
}
async function initLLMModelFormComponent() {
const requesterNameList = await httpClient.getProviderRequesters();
setRequesterNameList(
requesterNameList.requesters.map((item) => {
return {
name: llmModel.model.name,
model_provider: llmModel.model.requester,
url: llmModel.model.requester_config?.base_url,
api_key: llmModel.model.api_keys[0],
abilities: llmModel.model.abilities,
extra_args: fakeExtraArgs,
}
}
function handleFormSubmit(value: ICreateLLMField) {
if (editMode) {
// 暂不支持更改模型
// onSaveEdit(value)
} else {
onCreateLLM(value)
}
form.resetFields()
}
function onSaveEdit(value: ICreateLLMField) {
const requestParam: LLMModel = {
uuid: UUID.generate(),
name: value.name,
description: "",
requester: value.model_provider,
requester_config: {
"base_url": value.url,
"timeout": 120
},
extra_args: value.extra_args,
api_keys: [value.api_key],
abilities: value.abilities,
// created_at: 'Sun Apr 27 2025 21:56:35 GMT+0800',
// updated_at: 'Sun Apr 27 2025 21:56:35 GMT+0800',
label: item.label.zh_CN,
value: item.name
};
httpClient.createProviderLLMModel(requestParam).then(r => console.log(r))
})
);
}
async function getLLMConfig(id: string): Promise<ICreateLLMField> {
const llmModel = await httpClient.getProviderLLMModel(id);
const fakeExtraArgs = [];
const extraArgs = llmModel.model.extra_args as Record<string, string>;
for (const key in extraArgs) {
fakeExtraArgs.push(`${key}:${extraArgs[key]}`);
}
return {
name: llmModel.model.name,
model_provider: llmModel.model.requester,
url: llmModel.model.requester_config?.base_url,
api_key: llmModel.model.api_keys[0],
abilities: llmModel.model.abilities,
extra_args: fakeExtraArgs
};
}
function onCreateLLM(value: ICreateLLMField) {
console.log("create llm", value)
const requestParam: LLMModel = {
uuid: UUID.generate(),
name: value.name,
description: "",
requester: value.model_provider,
requester_config: {
"base_url": value.url,
"timeout": 120
},
extra_args: value.extra_args,
api_keys: [value.api_key],
abilities: value.abilities,
// created_at: 'Sun Apr 27 2025 21:56:35 GMT+0800',
// updated_at: 'Sun Apr 27 2025 21:56:35 GMT+0800',
};
httpClient.createProviderLLMModel(requestParam).then(r => {
onFormSubmit(value)
})
function handleFormSubmit(value: ICreateLLMField) {
if (editMode) {
// 暂不支持更改模型
// onSaveEdit(value)
} else {
onCreateLLM(value);
}
form.resetFields();
}
function handleAbilitiesChange() {
// function onSaveEdit(value: ICreateLLMField) {
// const requestParam: LLMModel = {
// uuid: UUID.generate(),
// name: value.name,
// description: "",
// requester: value.model_provider,
// requester_config: {
// "base_url": value.url,
// "timeout": 120
// },
// extra_args: value.extra_args,
// api_keys: [value.api_key],
// abilities: value.abilities,
// // created_at: 'Sun Apr 27 2025 21:56:35 GMT+0800',
// // updated_at: 'Sun Apr 27 2025 21:56:35 GMT+0800',
// };
// httpClient.createProviderLLMModel(requestParam).then(r => console.log(r))
// }
function onCreateLLM(value: ICreateLLMField) {
console.log("create llm", value);
const requestParam: LLMModel = {
uuid: UUID.generate(),
name: value.name,
description: "",
requester: value.model_provider,
requester_config: {
base_url: value.url,
timeout: 120
},
extra_args: value.extra_args,
api_keys: [value.api_key],
abilities: value.abilities
// created_at: 'Sun Apr 27 2025 21:56:35 GMT+0800',
// updated_at: 'Sun Apr 27 2025 21:56:35 GMT+0800',
};
httpClient.createProviderLLMModel(requestParam).then(() => {
onFormSubmit(value);
});
}
function handleAbilitiesChange() {}
function deleteModel() {
if (initLLMId) {
httpClient.deleteProviderLLMModel(initLLMId).then(() => {
onLLMDeleted();
});
}
}
function deleteModel() {
if (initLLMId) {
httpClient.deleteProviderLLMModel(initLLMId).then(res => {
onLLMDeleted()
})
}
}
return (
<div className={styles.modalContainer}>
<Modal
open={showDeleteConfirmModal}
title={"删除确认"}
onCancel={() => setShowDeleteConfirmModal(false)}
footer={
<div
style={{
width: "170px",
display: "flex",
flexDirection: "row",
justifyContent: "space-between"
}}
>
<Button
danger
onClick={() => {
deleteModel()
setShowDeleteConfirmModal(false)
}}
>确认删除</Button>
<Button
onClick={() => {
setShowDeleteConfirmModal(false)
}}
>取消</Button>
</div>
}
return (
<div className={styles.modalContainer}>
<Modal
open={showDeleteConfirmModal}
title={"删除确认"}
onCancel={() => setShowDeleteConfirmModal(false)}
footer={
<div
style={{
width: "170px",
display: "flex",
flexDirection: "row",
justifyContent: "space-between"
}}
>
<Button
danger
onClick={() => {
deleteModel();
setShowDeleteConfirmModal(false);
}}
>
你确定要删除这个模型吗？
</Modal>
<Form
form={form}
labelCol={{span: 4}}
wrapperCol={{span: 14}}
layout='horizontal'
initialValues={{
...initValue
确认删除
</Button>
<Button
onClick={() => {
setShowDeleteConfirmModal(false);
}}
>
取消
</Button>
</div>
}
>
你确定要删除这个模型吗？
</Modal>
<Form
form={form}
labelCol={{ span: 4 }}
wrapperCol={{ span: 14 }}
layout="horizontal"
initialValues={{
...initValue
}}
onFinish={handleFormSubmit}
clearOnDestroy={true}
disabled={editMode}
>
<Form.Item<ICreateLLMField>
label={"模型名称"}
name={"name"}
rules={[{ required: true, message: "该项为必填项哦～" }]}
>
<Input
placeholder={"为自己的大模型取个好听的名字～"}
style={{ width: 260 }}
></Input>
</Form.Item>
<Form.Item<ICreateLLMField>
label={"模型供应商"}
name={"model_provider"}
rules={[{ required: true, message: "该项为必填项哦～" }]}
>
<Select
style={{ width: 120 }}
onChange={() => {}}
options={requesterNameList}
/>
</Form.Item>
<Form.Item<ICreateLLMField>
label={"请求URL"}
name={"url"}
rules={[{ required: true, message: "该项为必填项哦～" }]}
>
<Input
placeholder="请求地址，一般是API提供商提供的URL"
style={{ width: 500 }}
></Input>
</Form.Item>
<Form.Item<ICreateLLMField>
label={"API Key"}
name={"api_key"}
rules={[{ required: true, message: "该项为必填项哦～" }]}
>
<Input placeholder="你的API Key" style={{ width: 500 }}></Input>
</Form.Item>
<Form.Item<ICreateLLMField> label={"开启能力"} name={"abilities"}>
<Select
mode="tags"
style={{ width: 500 }}
placeholder="选择模型能力，输入回车可自定义能力"
onChange={handleAbilitiesChange}
options={abilityOptions}
/>
</Form.Item>
<Form.Item<ICreateLLMField> label={"其他参数"} name={"extra_args"}>
<Select
mode="tags"
style={{ width: 500 }}
placeholder="输入后回车可自定义其他参数，例 key:value"
onChange={handleAbilitiesChange}
options={extraOptions}
/>
</Form.Item>
<Form.Item wrapperCol={{ offset: 4, span: 14 }}>
<Space>
{!editMode && (
<Button type="primary" htmlType="submit">
提交
</Button>
)}
{editMode && (
<Button
color="danger"
variant="solid"
onClick={() => {
setShowDeleteConfirmModal(true);
}}
onFinish={handleFormSubmit}
clearOnDestroy={true}
disabled={editMode}
disabled={false}
>
删除
</Button>
)}
<Button
htmlType="button"
onClick={() => {
onFormCancel(form.getFieldsValue());
}}
disabled={false}
>
<Form.Item<ICreateLLMField>
label={"模型名称"}
name={"name"}
rules={[{required: true, message: "该项为必填项哦～"}]}
>
<Input
placeholder={"为自己的大模型取个好听的名字～"}
style={{width: 260}}
></Input>
</Form.Item>
<Form.Item<ICreateLLMField>
label={"模型供应商"}
name={"model_provider"}
rules={[{required: true, message: "该项为必填项哦～"}]}
>
<Select
style={{width: 120}}
onChange={() => {
}}
options={requesterNameList}
/>
</Form.Item>
<Form.Item<ICreateLLMField>
label={"请求URL"}
name={"url"}
rules={[{required: true, message: "该项为必填项哦～"}]}
>
<Input
placeholder="请求地址，一般是API提供商提供的URL"
style={{width: 500}}
></Input>
</Form.Item>
<Form.Item<ICreateLLMField>
label={"API Key"}
name={"api_key"}
rules={[{required: true, message: "该项为必填项哦～"}]}
>
<Input
placeholder="你的API Key"
style={{width: 500}}
></Input>
</Form.Item>
<Form.Item<ICreateLLMField>
label={"开启能力"}
name={"abilities"}
>
<Select
mode="tags"
style={{width: 500}}
placeholder="选择模型能力，输入回车可自定义能力"
onChange={handleAbilitiesChange}
options={abilityOptions}
/>
</Form.Item>
<Form.Item<ICreateLLMField>
label={"其他参数"}
name={"extra_args"}
>
<Select
mode="tags"
style={{width: 500}}
placeholder="输入后回车可自定义其他参数，例 key:value"
onChange={handleAbilitiesChange}
options={extraOptions}
/>
</Form.Item>
<Form.Item
wrapperCol={{offset: 4, span: 14}}
>
<Space>
{
!editMode &&
<Button type="primary" htmlType="submit">
提交
</Button>
}
{
editMode &&
<Button
color="danger"
variant="solid"
onClick={() => {setShowDeleteConfirmModal(true)}}
disabled={false}
>
删除
</Button>
}
<Button
htmlType="button"
onClick={() => {
onFormCancel(form.getFieldsValue())
}}
disabled={false}
>
取消
</Button>
</Space>
</Form.Item>
</Form>
</div>
)
}
取消
</Button>
</Space>
</Form.Item>
</Form>
</div>
);
}

27
web_ui/src/app/home/pipelines/components/pipeline-form/PipelineChildFormEntity.ts
View File

@@ -1,20 +1,19 @@
import {DynamicFormItemConfig} from "@/app/home/components/dynamic-form/DynamicFormItemConfig";
import { DynamicFormItemConfig } from "@/app/home/components/dynamic-form/DynamicFormItemConfig";
export interface IPipelineChildFormEntity {
name: string;
label: string;
formItems: DynamicFormItemConfig[]
name: string;
label: string;
formItems: DynamicFormItemConfig[];
}
export class PipelineChildFormEntity implements IPipelineChildFormEntity {
formItems: DynamicFormItemConfig[];
label: string;
name: string;
formItems: DynamicFormItemConfig[];
label: string;
name: string;
constructor(props: IPipelineChildFormEntity) {
this.form = props.form;
this.label = props.label;
this.name = props.name;
this.formItems = props.formItems;
}
}
constructor(props: IPipelineChildFormEntity) {
this.label = props.label;
this.name = props.name;
this.formItems = props.formItems;
}
}

1169
web_ui/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx
View File

File diff suppressed because it is too large Load Diff

122
web_ui/src/app/home/pipelines/page.tsx
View File

@@ -1,68 +1,78 @@
"use client"
import {Modal} from "antd";
import {useState, useEffect} from "react";
"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";
import {httpClient} from "@/app/infra/http/HttpClient";
import {PipelineCardVO} from "@/app/home/pipelines/components/pipeline-card/PipelineCardVO";
import { httpClient } from "@/app/infra/http/HttpClient";
import { PipelineCardVO } from "@/app/home/pipelines/components/pipeline-card/PipelineCardVO";
import PipelineCardComponent from "@/app/home/pipelines/components/pipeline-card/PipelineCardComponent";
export default function PluginConfigPage() {
const [modalOpen, setModalOpen] = useState<boolean>(false);
const [isEditForm, setIsEditForm] = useState(false)
const [pipelineList, setPipelineList] = useState<PipelineCardVO[]>([])
const [modalOpen, setModalOpen] = useState<boolean>(false);
const [isEditForm] = useState(false);
const [pipelineList, setPipelineList] = useState<PipelineCardVO[]>([]);
useEffect(() => {
getPipelines()
}, [])
useEffect(() => {
getPipelines();
}, []);
function getPipelines() {
httpClient
.getPipelines()
.then((value) => {
const pipelineList = value.pipelines.map((pipeline) => {
return new PipelineCardVO({
createTime: pipeline.created_at,
description: pipeline.description,
id: pipeline.uuid,
name: pipeline.name,
version: pipeline.for_version
});
});
setPipelineList(pipelineList);
})
.catch((error) => {
// TODO toast
console.log(error);
});
}
function getPipelines() {
httpClient.getPipelines().then(value => {
const pipelineList = value.pipelines.map(pipeline => {
return new PipelineCardVO({
createTime: pipeline.created_at,
description: pipeline.description,
id: pipeline.uuid,
name: pipeline.name,
version: pipeline.for_version
})
})
setPipelineList(pipelineList)
}).catch(error => {
// TODO toast
console.log(error)
})
}
return (
<div className={``}>
<Modal
title={isEditForm ? "编辑流水线" : "创建流水线"}
centered
open={modalOpen}
onOk={() => setModalOpen(false)}
onCancel={() => setModalOpen(false)}
width={700}
footer={null}
>
<PipelineFormComponent
onFinish={() => {
getPipelines();
setModalOpen(false);
}}
/>
</Modal>
return (
{pipelineList.length > 0 && (
<div className={``}>
<Modal
title={isEditForm ? "编辑流水线" : "创建流水线"}
centered
open={modalOpen}
onOk={() => setModalOpen(false)}
onCancel={() => setModalOpen(false)}
width={700}
footer={null}
>
<PipelineFormComponent
onFinish={() => {
getPipelines()
setModalOpen(false)
}}
onCancel={() => {}}/>
</Modal>
{
pipelineList.length > 0 &&
<div className={``}>
{pipelineList.map(pipeline => {
return <PipelineCardComponent cardVO={pipeline}/>
})}
</div>
}
<CreateCardComponent width={360} height={200} plusSize={90} onClick={() => {setModalOpen(true)}}/>
{pipelineList.map((pipeline) => {
return (
<PipelineCardComponent key={pipeline.id} cardVO={pipeline} />
);
})}
</div>
);
)}
<CreateCardComponent
width={360}
height={200}
plusSize={90}
onClick={() => {
setModalOpen(true);
}}
/>
</div>
);
}

183
web_ui/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx
View File

@@ -1,104 +1,107 @@
"use client"
"use client";
import CreateCardComponent from "@/app/infra/basic-component/create-card-component/CreateCardComponent";
import {PluginCardVO} from "@/app/home/plugins/plugin-installed/PluginCardVO";
import {useEffect, useState} from "react";
import { PluginCardVO } from "@/app/home/plugins/plugin-installed/PluginCardVO";
import { useEffect, useState } from "react";
import PluginCardComponent from "@/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent";
import styles from "@/app/home/plugins/plugins.module.css";
import {Modal, Input} from "antd";
import {GithubOutlined} from "@ant-design/icons";
import {httpClient} from "@/app/infra/http/HttpClient";
import { Modal, Input } from "antd";
import { GithubOutlined } from "@ant-design/icons";
import { httpClient } from "@/app/infra/http/HttpClient";
export default function PluginInstalledComponent () {
const [pluginList, setPluginList] = useState<PluginCardVO[]>([])
const [modalOpen, setModalOpen] = useState(false)
const [githubURL, setGithubURL] = useState("")
export default function PluginInstalledComponent() {
const [pluginList, setPluginList] = useState<PluginCardVO[]>([]);
const [modalOpen, setModalOpen] = useState(false);
const [githubURL, setGithubURL] = useState("");
useEffect(() => {
initData();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
initData()
}, [])
function initData() {
getPluginList();
}
function initData() {
getPluginList()
}
function getPluginList() {
httpClient.getPlugins().then((value) => {
setPluginList(value.plugins.map(plugin => {
return new PluginCardVO({
author: plugin.author,
description: plugin.description.zh_CN,
handlerCount: 0,
name: plugin.name,
version: plugin.version,
isInitialized: plugin.status === "initialized",
})
}))
function getPluginList() {
httpClient.getPlugins().then((value) => {
setPluginList(
value.plugins.map((plugin) => {
return new PluginCardVO({
author: plugin.author,
description: plugin.description.zh_CN,
handlerCount: 0,
name: plugin.name,
version: plugin.version,
isInitialized: plugin.status === "initialized"
});
})
}
);
});
}
function handleModalConfirm() {
installPlugin(githubURL)
setModalOpen(false)
}
function handleModalConfirm() {
installPlugin(githubURL);
setModalOpen(false);
}
function installPlugin(url: string) {
httpClient.installPluginFromGithub(url).then(res => {
// 安装后重新拉取
getPluginList()
}).catch(err => {
console.log("error when install plugin:", err)
})
}
return (
<div className={`${styles.pluginListContainer}`}>
<Modal
title={
<div className={`${styles.modalTitle}`}>
<GithubOutlined
style={{
fontSize: '30px',
marginRight: '20px'
}}
type="setting"
/>
<span>从 GitHub 安装插件</span>
</div>
}
centered
open={modalOpen}
onOk={() => handleModalConfirm()}
onCancel={() => setModalOpen(false)}
width={500}
destroyOnClose={true}
>
<div className={`${styles.modalBody}`}>
<div>
目前仅支持从 GitHub 安装
</div>
<Input
placeholder="请输入插件的Github链接"
value={githubURL}
onChange={(e) => setGithubURL(e.target.value)}
/>
</div>
</Modal>
{
pluginList.map((vo, index) => {
return <div key={index}>
<PluginCardComponent cardVO={vo}/>
</div>
})
}
<CreateCardComponent
width={360}
height={140}
plusSize={90}
onClick={() => {
setModalOpen(true)
}}
function installPlugin(url: string) {
httpClient
.installPluginFromGithub(url)
.then(() => {
// 安装后重新拉取
getPluginList();
})
.catch((err) => {
console.log("error when install plugin:", err);
});
}
return (
<div className={`${styles.pluginListContainer}`}>
<Modal
title={
<div className={`${styles.modalTitle}`}>
<GithubOutlined
style={{
fontSize: "30px",
marginRight: "20px"
}}
type="setting"
/>
<span>从 GitHub 安装插件</span>
</div>
}
centered
open={modalOpen}
onOk={() => handleModalConfirm()}
onCancel={() => setModalOpen(false)}
width={500}
destroyOnClose={true}
>
<div className={`${styles.modalBody}`}>
<div>目前仅支持从 GitHub 安装</div>
<Input
placeholder="请输入插件的Github链接"
value={githubURL}
onChange={(e) => setGithubURL(e.target.value)}
/>
</div>
)
</Modal>
{pluginList.map((vo, index) => {
return (
<div key={index}>
<PluginCardComponent cardVO={vo} />
</div>
);
})}
<CreateCardComponent
width={360}
height={140}
plusSize={90}
onClick={() => {
setModalOpen(true);
}}
/>
</div>
);
}

119
web_ui/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx
View File

@@ -1,68 +1,65 @@
import styles from "./pluginCard.module.css"
import {PluginCardVO} from "@/app/home/plugins/plugin-installed/PluginCardVO";
import {GithubOutlined, LinkOutlined, ToolOutlined} from '@ant-design/icons';
import {Switch, Tag} from 'antd'
import {useState} from "react";
import {httpClient} from "@/app/infra/http/HttpClient";
import styles from "./pluginCard.module.css";
import { PluginCardVO } from "@/app/home/plugins/plugin-installed/PluginCardVO";
import { GithubOutlined, LinkOutlined, ToolOutlined } from "@ant-design/icons";
import { Switch, Tag } from "antd";
import { useState } from "react";
import { httpClient } from "@/app/infra/http/HttpClient";
export default function PluginCardComponent({
cardVO
cardVO
}: {
cardVO: PluginCardVO
cardVO: PluginCardVO;
}) {
const [initialized, setInitialized] = useState(cardVO.isInitialized)
const [switchEnable, setSwitchEnable] = useState(true)
const [initialized, setInitialized] = useState(cardVO.isInitialized);
const [switchEnable, setSwitchEnable] = useState(true);
function handleEnable() {
setSwitchEnable(false)
httpClient.togglePlugin(cardVO.author, cardVO.name, !initialized).then(result => {
setInitialized(!initialized)
}).catch(err => {
console.log("error: ", err)
}).finally(() => {
setSwitchEnable(true)
})
}
return (
<div className={`${styles.cardContainer}`}>
{/* header */}
<div className={`${styles.cardHeader}`}>
{/* left author */}
<div className={`${styles.fontGray}`}>{cardVO.author}</div>
{/* right icon & version */}
<div className={`${styles.iconVersionContainer}`}>
<GithubOutlined
style={{fontSize: '26px'}}
type="setting"
/>
<Tag color="#108ee9">v{cardVO.version}</Tag>
</div>
</div>
{/* content */}
<div className={`${styles.cardContent}`}>
<div className={`${styles.boldFont}`}>{cardVO.name}</div>
<div className={`${styles.fontGray}`}>{cardVO.description}</div>
</div>
{/* footer */}
<div className={`${styles.cardFooter}`}>
<div className={`${styles.linkSettingContainer}`}>
<div className={`${styles.link}`}>
<LinkOutlined
style={{fontSize: '22px'}}
/>
<span>1</span>
</div>
<ToolOutlined
style={{fontSize: '22px'}}
/>
</div>
<Switch
value={initialized}
onClick={handleEnable}
disabled={!switchEnable}
/>
</div>
function handleEnable() {
setSwitchEnable(false);
httpClient
.togglePlugin(cardVO.author, cardVO.name, !initialized)
.then(() => {
setInitialized(!initialized);
})
.catch((err) => {
console.log("error: ", err);
})
.finally(() => {
setSwitchEnable(true);
});
}
return (
<div className={`${styles.cardContainer}`}>
{/* header */}
<div className={`${styles.cardHeader}`}>
{/* left author */}
<div className={`${styles.fontGray}`}>{cardVO.author}</div>
{/* right icon & version */}
<div className={`${styles.iconVersionContainer}`}>
<GithubOutlined style={{ fontSize: "26px" }} type="setting" />
<Tag color="#108ee9">v{cardVO.version}</Tag>
</div>
);
</div>
{/* content */}
<div className={`${styles.cardContent}`}>
<div className={`${styles.boldFont}`}>{cardVO.name}</div>
<div className={`${styles.fontGray}`}>{cardVO.description}</div>
</div>
{/* footer */}
<div className={`${styles.cardFooter}`}>
<div className={`${styles.linkSettingContainer}`}>
<div className={`${styles.link}`}>
<LinkOutlined style={{ fontSize: "22px" }} />
<span>1</span>
</div>
<ToolOutlined style={{ fontSize: "22px" }} />
</div>
<Switch
value={initialized}
onClick={handleEnable}
disabled={!switchEnable}
/>
</div>
</div>
);
}

144
web_ui/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx
View File

@@ -1,79 +1,87 @@
"use client"
"use client";
import {useCallback, useEffect, useState} from "react";
import { useEffect, useState } from "react";
import styles from "@/app/home/plugins/plugins.module.css";
import {PluginMarketCardVO} from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO";
import { PluginMarketCardVO } from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO";
import PluginMarketCardComponent from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent";
import {Input, Pagination} from "antd";
import {debounce} from "lodash"
import {httpClient, spaceClient} from "@/app/infra/http/HttpClient";
import { Input, Pagination } from "antd";
import { spaceClient } from "@/app/infra/http/HttpClient";
export default function PluginMarketComponent () {
const [marketPluginList, setMarketPluginList] = useState<PluginMarketCardVO[]>([])
const [totalCount, setTotalCount] = useState(0)
const [nowPage, setNowPage] = useState(1)
const [searchKeyword, setSearchKeyword] = useState("")
export default function PluginMarketComponent() {
const [marketPluginList, setMarketPluginList] = useState<
PluginMarketCardVO[]
>([]);
const [totalCount, setTotalCount] = useState(0);
const [nowPage, setNowPage] = useState(1);
const [searchKeyword, setSearchKeyword] = useState("");
useEffect(() => {
initData()
}, [])
useEffect(() => {
initData();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
function initData() {
getPluginList()
}
function initData() {
getPluginList();
}
function onInputSearchKeyword(keyword: string) {
// 这里记得加防抖，暂时没加
setSearchKeyword(keyword)
setNowPage(1)
getPluginList(1, keyword)
}
function onInputSearchKeyword(keyword: string) {
// 这里记得加防抖，暂时没加
setSearchKeyword(keyword);
setNowPage(1);
getPluginList(1, keyword);
}
function getPluginList(
page: number = nowPage,
keyword: string = searchKeyword
) {
spaceClient.getMarketPlugins(page, 10, keyword).then((res) => {
setMarketPluginList(
res.plugins.map(
(marketPlugin) =>
new PluginMarketCardVO({
author: marketPlugin.author,
description: marketPlugin.description,
githubURL: marketPlugin.repository,
name: marketPlugin.name,
pluginId: String(marketPlugin.ID),
starCount: marketPlugin.stars
})
)
);
setTotalCount(res.total);
console.log("market plugins:", res);
});
}
function getPluginList(page: number = nowPage, keyword: string = searchKeyword) {
spaceClient.getMarketPlugins(page, 10, keyword).then(res => {
setMarketPluginList(res.plugins.map(marketPlugin => new PluginMarketCardVO({
author: marketPlugin.author,
description: marketPlugin.description,
githubURL: marketPlugin.repository,
name: marketPlugin.name,
pluginId: String(marketPlugin.ID),
starCount: marketPlugin.stars,
})))
setTotalCount(res.total)
console.log("market plugins:", res)
})
}
return (
<div className={`${styles.marketComponentBody}`}>
<Input
style={{
width: '300px',
marginTop: '10px',
}}
value={searchKeyword}
placeholder="搜索插件"
onChange={(e) => onInputSearchKeyword(e.target.value)}
/>
<div className={`${styles.pluginListContainer}`}>
{
marketPluginList.map((vo, index) => {
return <div key={index}>
<PluginMarketCardComponent cardVO={vo}/>
</div>
})
}
return (
<div className={`${styles.marketComponentBody}`}>
<Input
style={{
width: "300px",
marginTop: "10px"
}}
value={searchKeyword}
placeholder="搜索插件"
onChange={(e) => onInputSearchKeyword(e.target.value)}
/>
<div className={`${styles.pluginListContainer}`}>
{marketPluginList.map((vo, index) => {
return (
<div key={index}>
<PluginMarketCardComponent cardVO={vo} />
</div>
<Pagination
defaultCurrent={1}
total={totalCount}
onChange={(pageNumber) => {
setNowPage(pageNumber)
getPluginList(pageNumber)
}}
/>
</div>
)
);
})}
</div>
<Pagination
defaultCurrent={1}
total={totalCount}
onChange={(pageNumber) => {
setNowPage(pageNumber);
getPluginList(pageNumber);
}}
/>
</div>
);
}

227
web_ui/src/app/infra/api/api-types/index.ts
View File

@@ -1,204 +1,217 @@
export interface ApiResponse<T> {
code: number;
data: T;
msg: string;
code: number;
data: T;
msg: string;
}
export interface I18nText {
en_US: string;
zh_CN: string;
en_US: string;
zh_CN: string;
}
export interface AsyncTaskCreatedResp {
task_id: number;
task_id: number;
}
export interface ApiRespProviderRequesters {
requesters: Requester[];
requesters: Requester[];
}
export interface ApiRespProviderRequester {
requester: Requester;
requester: Requester;
}
export interface Requester {
name: string;
label: I18nText;
description: I18nText;
icon?: string;
spec: object;
name: string;
label: I18nText;
description: I18nText;
icon?: string;
spec: object;
}
export interface ApiRespProviderLLMModels {
models: LLMModel[];
models: LLMModel[];
}
export interface ApiRespProviderLLMModel {
model: LLMModel;
model: LLMModel;
}
export interface LLMModel {
name: string;
description: string;
uuid: string;
requester: string;
requester_config: object;
extra_args: object;
api_keys: string[];
abilities: string[];
// created_at: string;
// updated_at: string;
name: string;
description: string;
uuid: string;
requester: string;
requester_config: {
base_url: string;
timeout: number;
};
extra_args: object;
api_keys: string[];
abilities: string[];
// created_at: string;
// updated_at: string;
}
export interface ApiRespPipelines {
pipelines: Pipeline[];
pipelines: Pipeline[];
}
export interface ApiRespPipeline {
pipeline: Pipeline;
pipeline: Pipeline;
}
export interface Pipeline {
uuid: string;
name: string;
description: string;
for_version: string;
config: object;
stages: string[];
created_at: string;
updated_at: string;
uuid: string;
name: string;
description: string;
for_version: string;
config: object;
stages: string[];
created_at: string;
updated_at: string;
}
export interface ApiRespPlatformAdapters {
adapters: Adapter[];
adapters: Adapter[];
}
export interface ApiRespPlatformAdapter {
adapter: Adapter;
adapter: Adapter;
}
export interface Adapter {
name: string;
label: I18nText;
description: I18nText;
icon?: string;
spec: object;
name: string;
label: I18nText;
description: I18nText;
icon?: string;
spec: {
config: AdapterSpecConfig[];
};
}
export interface AdapterSpecConfig {
default: string | number | boolean | Array<unknown>;
label: I18nText;
name: string;
required: boolean;
type: string;
}
export interface ApiRespPlatformBots {
bots: Bot[];
bots: Bot[];
}
export interface ApiRespPlatformBot {
bot: Bot;
bot: Bot;
}
export interface Bot {
uuid?: string;
name: string;
description: string;
enable?: boolean;
adapter: string;
adapter_config: object;
use_pipeline_name?: string;
use_pipeline_uuid?: string;
created_at?: string;
updated_at?: string;
uuid?: string;
name: string;
description: string;
enable?: boolean;
adapter: string;
adapter_config: object;
use_pipeline_name?: string;
use_pipeline_uuid?: string;
created_at?: string;
updated_at?: string;
}
// plugins
export interface ApiRespPlugins {
plugins: Plugin[];
plugins: Plugin[];
}
export interface ApiRespPlugin {
plugin: Plugin;
plugin: Plugin;
}
export interface Plugin {
author: string;
name: string;
description: I18nText;
label: I18nText;
version: string;
enabled: boolean;
priority: number;
status: string;
tools: object[];
event_handlers: object;
main_file: string;
pkg_path: string;
repository: string;
config_schema: object;
author: string;
name: string;
description: I18nText;
label: I18nText;
version: string;
enabled: boolean;
priority: number;
status: string;
tools: object[];
event_handlers: object;
main_file: string;
pkg_path: string;
repository: string;
config_schema: object;
}
export interface ApiRespPluginConfig {
config: object;
config: object;
}
export interface PluginReorderElement {
author: string;
name: string;
priority: number;
author: string;
name: string;
priority: number;
}
// system
export interface ApiRespSystemInfo {
debug: boolean;
version: string;
debug: boolean;
version: string;
}
export interface ApiRespAsyncTasks {
tasks: AsyncTask[];
tasks: AsyncTask[];
}
export interface ApiRespAsyncTask {
task: AsyncTask;
task: AsyncTask;
}
export interface AsyncTaskRuntimeInfo {
done: boolean;
exception?: string;
result?: object;
state: string;
done: boolean;
exception?: string;
result?: object;
state: string;
}
export interface AsyncTaskTaskContext {
current_action: string;
log: string;
current_action: string;
log: string;
}
export interface AsyncTask {
id: number;
kind: string;
name: string;
task_type: string; // system or user
runtime: AsyncTaskRuntimeInfo;
task_context: AsyncTaskTaskContext;
id: number;
kind: string;
name: string;
task_type: string; // system or user
runtime: AsyncTaskRuntimeInfo;
task_context: AsyncTaskTaskContext;
}
export interface ApiRespUserToken {
token: string;
token: string;
}
export interface MarketPlugin {
ID: number
CreatedAt: string // ISO 8601 格式日期
UpdatedAt: string
DeletedAt: string | null
name: string
author: string
description: string
repository: string // GitHub 仓库路径
artifacts_path: string
stars: number
downloads: number
status: "initialized" | "mounted" // 可根据实际状态值扩展联合类型
synced_at: string
pushed_at: string // 最后一次代码推送时间
ID: number;
CreatedAt: string; // ISO 8601 格式日期
UpdatedAt: string;
DeletedAt: string | null;
name: string;
author: string;
description: string;
repository: string; // GitHub 仓库路径
artifacts_path: string;
stars: number;
downloads: number;
status: "initialized" | "mounted"; // 可根据实际状态值扩展联合类型
synced_at: string;
pushed_at: string; // 最后一次代码推送时间
}
export interface MarketPluginResponse {
plugins: MarketPlugin[]
total: number
plugins: MarketPlugin[];
total: number;
}

57
web_ui/src/app/infra/api/api-types/pipelines/GetMetaDataResponse.ts
View File

@@ -1,47 +1,46 @@
export interface GetMetaDataResponse {
configs: Config[]
configs: Config[];
}
interface Label {
en_US: string;
zh_CN: string;
en_US: string;
zh_CN: string;
}
interface Option {
label: Label;
name: string;
label: Label;
name: string;
}
interface ConfigItem {
default?: boolean | Array<unknown> | number | string;
description?: Label;
items?: {
type?: string;
properties?: {
[key: string]: {
type: string;
default?: any;
};
};
default?: boolean | Array<unknown> | number | string;
description?: Label;
items?: {
type?: string;
properties?: {
[key: string]: {
type: string;
default?: object | string;
};
};
label: Label;
name: string;
options?: Option[];
required: boolean;
scope?: string;
type: string;
};
label: Label;
name: string;
options?: Option[];
required: boolean;
scope?: string;
type: string;
}
interface Stage {
config: ConfigItem[];
description?: Label;
label: Label;
name: string;
config: ConfigItem[];
description?: Label;
label: Label;
name: string;
}
interface Config {
label: Label;
name: string;
stages: Stage[];
label: Label;
name: string;
stages: Stage[];
}

358
web_ui/src/app/login/page.tsx
View File

@@ -1,194 +1,204 @@
'use client';
import { Button, Input, Form, Checkbox, Divider } from 'antd';
import {GoogleOutlined, AppleOutlined, LockOutlined, UserOutlined, QqCircleFilled, QqOutlined} from '@ant-design/icons';
import styles from './login.module.css';
import {useEffect, useState} from 'react';
import {httpClient} from "@/app/infra/http/HttpClient";
import '@ant-design/v5-patch-for-react-19';
import {useRouter} from "next/navigation";
"use client";
import { Button, Input, Form, Checkbox, Divider } from "antd";
import {
GoogleOutlined,
LockOutlined,
UserOutlined,
QqOutlined
} from "@ant-design/icons";
import styles from "./login.module.css";
import { useEffect, useState } from "react";
import { httpClient } from "@/app/infra/http/HttpClient";
import "@ant-design/v5-patch-for-react-19";
import { useRouter } from "next/navigation";
export default function Home() {
const router = useRouter();
const [form] = Form.useForm<LoginField>();
const [rememberMe, setRememberMe] = useState(false);
const [isRegisterMode, setIsRegisterMode] = useState(false);
const [isInitialized, setIsInitialized] = useState(false)
const router = useRouter();
const [form] = Form.useForm<LoginField>();
const [rememberMe, setRememberMe] = useState(false);
const [isRegisterMode, setIsRegisterMode] = useState(false);
const [isInitialized, setIsInitialized] = useState(false);
useEffect(() => {
getIsInitialized()
}, [])
useEffect(() => {
getIsInitialized();
}, []);
// 检查是否为首次启动项目，只为首次启动的用户提供注册资格
function getIsInitialized() {
httpClient
.checkIfInited()
.then((res) => {
setIsInitialized(res.initialized);
})
.catch((err) => {
console.log("error at getIsInitialized: ", err);
});
}
// 检查是否为首次启动项目，只为首次启动的用户提供注册资格
function getIsInitialized() {
httpClient.checkIfInited().then(res => {
setIsInitialized(res.initialized)
}).catch(err => {
console.log("error at getIsInitialized: ", err)
})
function handleFormSubmit(formField: LoginField) {
if (isRegisterMode) {
handleRegister(formField.email, formField.password);
} else {
handleLogin(formField.email, formField.password);
}
}
function handleFormSubmit(formField: LoginField) {
if (isRegisterMode) {
handleRegister(formField.email, formField.password);
} else {
handleLogin(formField.email, formField.password)
}
}
function handleRegister(username: string, password: string) {
httpClient
.initUser(username, password)
.then((res) => {
console.log("init user success: ", res);
})
.catch((err) => {
console.log("init user error: ", err);
});
}
function handleRegister(username: string, password: string) {
httpClient.initUser(username, password).then(res => {
console.log("init user success: ", res)
}).catch(err => {
console.log("init user error: ", err)
})
}
function handleLogin(username: string, password: string) {
httpClient
.authUser(username, password)
.then((res) => {
localStorage.setItem("token", res.token);
console.log("login success: ", res);
router.push("/home");
})
.catch((err) => {
console.log("login error: ", err);
});
}
function handleLogin(username: string, password: string) {
httpClient.authUser(username, password).then(res => {
localStorage.setItem("token", res.token)
console.log("login success: ", res)
router.push("/home")
}).catch(err => {
console.log("login error: ", err)
})
}
return (
// 使用 Ant Design 的组件库，使用 antd 的样式
// 仅前端样式，无交互功能。
<div className={styles.container}>
{/* login 类是整个 container，使用 flex 左右布局 */}
<div className={styles.login}>
{/* left 为注册的表单，需要填入的内容有：邮箱，密码 */}
<div className={styles.left}>
<div className={styles.loginForm}>
{isRegisterMode && (
<h1 className={styles.title}>注册 LangBot 账号</h1>
)}
{!isRegisterMode && (
<h1 className={styles.title}>欢迎回到 LangBot</h1>
)}
<Form
form={form}
layout="vertical"
onFinish={(values) => {
handleFormSubmit(values);
}}
>
<Form.Item
name="email"
rules={[
{ required: true, message: "请输入邮箱!" },
{ type: "email", message: "请输入有效的邮箱地址!" }
]}
>
<Input
placeholder="输入邮箱地址"
size="large"
prefix={<UserOutlined />}
/>
</Form.Item>
return (
// 使用 Ant Design 的组件库，使用 antd 的样式
// 仅前端样式，无交互功能。
<Form.Item
name="password"
rules={[{ required: true, message: "请输入密码!" }]}
>
<Input.Password
placeholder="输入密码"
size="large"
prefix={<LockOutlined />}
/>
</Form.Item>
<div className={styles.container}>
{/* login 类是整个 container，使用 flex 左右布局 */}
<div className={styles.login}>
{/* left 为注册的表单，需要填入的内容有：邮箱，密码 */}
<div className={styles.left}>
<div className={styles.loginForm}>
{
isRegisterMode &&
<h1 className={styles.title}>注册 LangBot 账号</h1>
}
{
!isRegisterMode &&
<h1 className={styles.title}>欢迎回到 LangBot</h1>
}
<Form
form={form}
layout="vertical"
onFinish={(values) => {
handleFormSubmit(values)
}}
>
<Form.Item
name="email"
rules={[
{ required: true, message: '请输入邮箱!' },
{ type: 'email', message: '请输入有效的邮箱地址!' }
]}
>
<Input
placeholder="输入邮箱地址"
size="large"
prefix={<UserOutlined />}
/>
</Form.Item>
<div className={styles.rememberMe}>
<Checkbox
checked={rememberMe}
onChange={(e) => setRememberMe(e.target.checked)}
>
30天内自动登录
</Checkbox>
<span>
<a href="#" className={`${styles.forgetPassword}`}>
忘记密码?
</a>
{!isRegisterMode && (
<a
href=""
onClick={(event) => {
setIsRegisterMode(true);
event.preventDefault();
}}
>
去注册？
</a>
)}
{isRegisterMode && (
<a
href=""
onClick={(event) => {
setIsRegisterMode(false);
event.preventDefault();
}}
>
去登录
</a>
)}
</span>
</div>
<Form.Item
name="password"
rules={[
{ required: true, message: '请输入密码!' }
]}
>
<Input.Password
placeholder="输入密码"
size="large"
prefix={<LockOutlined />}
/>
</Form.Item>
<Button
type="primary"
size="large"
className={styles.loginButton}
block
htmlType="submit"
disabled={isRegisterMode && isInitialized}
>
{isRegisterMode
? isInitialized
? "暂不提供注册"
: "注册"
: "登录"}
</Button>
<div className={styles.rememberMe}>
<Checkbox
checked={rememberMe}
onChange={(e) => setRememberMe(e.target.checked)}
>
30天内自动登录
</Checkbox>
<span>
<a href="#" className={`${styles.forgetPassword}`}>忘记密码?</a>
{
!isRegisterMode &&
<a href=""
onClick={(event) => {
setIsRegisterMode(true)
event.preventDefault()
}}
>去注册？</a>
}
{
isRegisterMode &&
<a href=""
onClick={(event) => {
setIsRegisterMode(false)
event.preventDefault()
}}
>去登录</a>
}
</span>
</div>
<Divider className={styles.divider}>或</Divider>
<Button
type="primary"
size="large"
className={styles.loginButton}
block
htmlType="submit"
disabled={isRegisterMode && isInitialized}
>
{
isRegisterMode ? (
isInitialized ? "暂不提供注册" : "注册"
) : "登录"
}
</Button>
<Divider className={styles.divider}>或</Divider>
<div className={styles.socialLogin}>
<Button
className={styles.socialButton}
icon={<GoogleOutlined />}
size="large"
disabled={true}
>
使用谷歌账号登录
</Button>
</div>
<div style={{ height: '10px' }}></div>
<div className={styles.socialLogin}>
<Button
className={styles.socialButton}
icon={<QqOutlined />}
size="large"
disabled={true}
>
使用QQ账号登录
</Button>
</div>
</Form>
</div>
</div>
</div>
<div className={styles.socialLogin}>
<Button
className={styles.socialButton}
icon={<GoogleOutlined />}
size="large"
disabled={true}
>
使用谷歌账号登录
</Button>
</div>
<div style={{ height: "10px" }}></div>
<div className={styles.socialLogin}>
<Button
className={styles.socialButton}
icon={<QqOutlined />}
size="large"
disabled={true}
>
使用QQ账号登录
</Button>
</div>
</Form>
</div>
</div>
);
</div>
</div>
);
}
interface LoginField {
email: string;
password: string;
}
email: string;
password: string;
}