mirror of
https://github.com/csunny/DB-GPT.git
synced 2025-09-11 13:58:58 +00:00
feat: Remove unused code for agent, models, and knowledge chunk pages (#1873)
This commit is contained in:
Dreammy23
GitHub
@@ -1,34 +0,0 @@
|
||||
import MarketPlugins from '@/components/agent/market-plugins';
|
||||
import MyPlugins from '@/components/agent/my-plugins';
|
||||
import { Tabs } from 'antd';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
function Agent() {
|
||||
const { t } = useTranslation();
|
||||
const [activeKey, setActiveKey] = useState('market');
|
||||
|
||||
const items: Required<Parameters<typeof Tabs>[0]['items']> = useMemo(
|
||||
() => [
|
||||
{
|
||||
key: 'market',
|
||||
label: t('Market_Plugins'),
|
||||
children: <MarketPlugins />,
|
||||
},
|
||||
{
|
||||
key: 'my',
|
||||
label: t('My_Plugins'),
|
||||
children: activeKey === 'market' ? null : <MyPlugins />,
|
||||
},
|
||||
],
|
||||
[t, activeKey],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="h-screen p-4 md:p-6 overflow-y-auto">
|
||||
<Tabs activeKey={activeKey} items={items} onChange={setActiveKey} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Agent;
|
||||
@@ -1,114 +0,0 @@
|
||||
import AppModal from '@/components/app/app-modal';
|
||||
import AppCard from '@/components/app/app-card';
|
||||
import { Button, Spin, Tabs, TabsProps } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { apiInterceptors, getAppList } from '@/client/api';
|
||||
import { IApp } from '@/types/app';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import MyEmpty from '@/components/common/MyEmpty';
|
||||
|
||||
type TabKey = 'app' | 'collected';
|
||||
|
||||
type ModalType = 'edit' | 'add';
|
||||
|
||||
export default function App() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
const [spinning, setSpinning] = useState<boolean>(false);
|
||||
const [activeKey, setActiveKey] = useState<TabKey>('app');
|
||||
const [apps, setApps] = useState<IApp[]>([]);
|
||||
const [curApp, setCurApp] = useState<IApp>();
|
||||
const [modalType, setModalType] = useState<ModalType>('add');
|
||||
|
||||
const handleCreate = () => {
|
||||
setModalType('add');
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleEdit = (app: any) => {
|
||||
setModalType('edit');
|
||||
setCurApp(app);
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleTabChange = (activeKey: string) => {
|
||||
setActiveKey(activeKey as TabKey);
|
||||
if (activeKey === 'collected') {
|
||||
initData({ is_collected: true });
|
||||
} else {
|
||||
initData();
|
||||
}
|
||||
};
|
||||
|
||||
const initData = async (params = {}) => {
|
||||
setSpinning(true);
|
||||
const [error, data] = await apiInterceptors(getAppList(params));
|
||||
if (error) {
|
||||
setSpinning(false);
|
||||
return;
|
||||
}
|
||||
if (!data) return;
|
||||
|
||||
setApps(data.app_list || []);
|
||||
setSpinning(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
initData();
|
||||
}, []);
|
||||
|
||||
const renderAppList = (data: { isCollected: boolean }) => {
|
||||
const isNull = data.isCollected ? apps.every((item) => !item.is_collected) : apps.length === 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{!data.isCollected && (
|
||||
<Button onClick={handleCreate} type="primary" className="mb-4" icon={<PlusOutlined />}>
|
||||
{t('create')}
|
||||
</Button>
|
||||
)}
|
||||
{!isNull ? (
|
||||
<div className=" w-full flex flex-wrap pb-0 gap-4">
|
||||
{apps.map((app, index) => {
|
||||
return <AppCard handleEdit={handleEdit} key={index} app={app} updateApps={initData} isCollected={activeKey === 'collected'} />;
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<MyEmpty />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const items: TabsProps['items'] = [
|
||||
{
|
||||
key: 'app',
|
||||
label: t('App'),
|
||||
children: renderAppList({ isCollected: false }),
|
||||
},
|
||||
{
|
||||
key: 'collected',
|
||||
label: t('collected'),
|
||||
children: renderAppList({ isCollected: true }),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Spin spinning={spinning}>
|
||||
<div className="h-screen w-full p-4 md:p-6 overflow-y-auto">
|
||||
<Tabs defaultActiveKey="app" items={items} onChange={handleTabChange} />
|
||||
{open && (
|
||||
<AppModal app={modalType === 'edit' ? curApp : {}} type={modalType} updateApps={initData} open={open} handleCancel={handleCancel} />
|
||||
)}
|
||||
</div>
|
||||
</Spin>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,233 +0,0 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { useAsyncEffect } from 'ahooks';
|
||||
import { Badge, Button, Card, Drawer, Empty, Modal, message, Spin } from 'antd';
|
||||
import FormDialog from '@/components/database/form-dialog';
|
||||
import { apiInterceptors, getDbList, getDbSupportType, postDbDelete, postDbRefresh } from '@/client/api';
|
||||
import { DeleteFilled, EditFilled, PlusOutlined, RedoOutlined } from '@ant-design/icons';
|
||||
import { DBOption, DBType, DbListResponse, DbSupportTypeResponse } from '@/types/db';
|
||||
import MuiLoading from '@/components/common/loading';
|
||||
import { dbMapper } from '@/utils';
|
||||
import GPTCard from '@/components/common/gpt-card';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
type DBItem = DbListResponse[0];
|
||||
|
||||
export function isFileDb(dbTypeList: DBOption[], dbType: DBType) {
|
||||
return dbTypeList.find((item) => item.value === dbType)?.isFileDb;
|
||||
}
|
||||
|
||||
function Database() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [dbList, setDbList] = useState<DbListResponse>([]);
|
||||
const [dbSupportList, setDbSupportList] = useState<DbSupportTypeResponse>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [modal, setModal] = useState<{ open: boolean; info?: DBItem; dbType?: DBType }>({ open: false });
|
||||
const [draw, setDraw] = useState<{ open: boolean; dbList?: DbListResponse; name?: string; type?: DBType }>({ open: false });
|
||||
const [refreshLoading, setRefreshLoading] = useState(false);
|
||||
|
||||
const getDbSupportList = async () => {
|
||||
const [, data] = await apiInterceptors(getDbSupportType());
|
||||
setDbSupportList(data ?? []);
|
||||
};
|
||||
|
||||
const refreshDbList = async () => {
|
||||
setLoading(true);
|
||||
const [, data] = await apiInterceptors(getDbList());
|
||||
setDbList(data ?? []);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const dbTypeList = useMemo(() => {
|
||||
const supportDbList = dbSupportList.map((item) => {
|
||||
const { db_type, is_file_db } = item;
|
||||
|
||||
return { ...dbMapper[db_type], value: db_type, isFileDb: is_file_db };
|
||||
}) as DBOption[];
|
||||
const unSupportDbList = Object.keys(dbMapper)
|
||||
.filter((item) => !supportDbList.some((db) => db.value === item))
|
||||
.map((item) => ({ ...dbMapper[item], value: dbMapper[item].label, disabled: true })) as DBOption[];
|
||||
return [...supportDbList, ...unSupportDbList];
|
||||
}, [dbSupportList]);
|
||||
|
||||
const onModify = (item: DBItem) => {
|
||||
setModal({ open: true, info: item });
|
||||
};
|
||||
|
||||
const onDelete = (item: DBItem) => {
|
||||
Modal.confirm({
|
||||
title: 'Tips',
|
||||
content: `Do you Want to delete the ${item.db_name}?`,
|
||||
onOk() {
|
||||
return new Promise<void>(async (resolve, reject) => {
|
||||
try {
|
||||
const [err] = await apiInterceptors(postDbDelete(item.db_name));
|
||||
if (err) {
|
||||
message.error(err.message);
|
||||
reject();
|
||||
return;
|
||||
}
|
||||
message.success('success');
|
||||
refreshDbList();
|
||||
resolve();
|
||||
} catch (e: any) {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const onRefresh = async (item: DBItem) => {
|
||||
setRefreshLoading(true);
|
||||
const [, res] = await apiInterceptors(postDbRefresh({ db_name: item.db_name, db_type: item.db_type }));
|
||||
if (res) message.success(t('refreshSuccess'));
|
||||
setRefreshLoading(false);
|
||||
};
|
||||
|
||||
const dbListByType = useMemo(() => {
|
||||
const mapper = dbTypeList.reduce((acc, item) => {
|
||||
acc[item.value] = dbList.filter((dbConn) => dbConn.db_type === item.value);
|
||||
return acc;
|
||||
}, {} as Record<DBType, DbListResponse>);
|
||||
return mapper;
|
||||
}, [dbList, dbTypeList]);
|
||||
|
||||
useAsyncEffect(async () => {
|
||||
await refreshDbList();
|
||||
await getDbSupportList();
|
||||
}, []);
|
||||
|
||||
const handleDbTypeClick = (info: DBOption) => {
|
||||
const dbItems = dbList.filter((item) => item.db_type === info.value);
|
||||
setDraw({ open: true, dbList: dbItems, name: info.label, type: info.value });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative p-4 md:p-6 min-h-full overflow-y-auto">
|
||||
<MuiLoading visible={loading} />
|
||||
<div className="mb-4">
|
||||
<Button
|
||||
type="primary"
|
||||
className="flex items-center"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
setModal({ open: true });
|
||||
}}
|
||||
>
|
||||
{t('create')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 md:gap-4">
|
||||
{dbTypeList.map((item) => (
|
||||
<Badge key={item.value} count={dbListByType[item.value].length} className="min-h-fit">
|
||||
<GPTCard
|
||||
className="h-full"
|
||||
title={item.label}
|
||||
desc={item.desc ?? ''}
|
||||
disabled={item.disabled}
|
||||
icon={item.icon}
|
||||
onClick={() => {
|
||||
if (item.disabled) return;
|
||||
handleDbTypeClick(item);
|
||||
}}
|
||||
/>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
<FormDialog
|
||||
open={modal.open}
|
||||
dbTypeList={dbTypeList}
|
||||
choiceDBType={modal.dbType}
|
||||
editValue={modal.info}
|
||||
dbNames={dbList.map((item) => item.db_name)}
|
||||
onSuccess={() => {
|
||||
setModal({ open: false });
|
||||
refreshDbList();
|
||||
}}
|
||||
onClose={() => {
|
||||
setModal({ open: false });
|
||||
}}
|
||||
/>
|
||||
<Drawer
|
||||
title={draw.name}
|
||||
placement="right"
|
||||
onClose={() => {
|
||||
setDraw({ open: false });
|
||||
}}
|
||||
open={draw.open}
|
||||
>
|
||||
{draw.type && dbListByType[draw.type] && dbListByType[draw.type].length ? (
|
||||
<Spin spinning={refreshLoading}>
|
||||
<Button
|
||||
type="primary"
|
||||
className="mb-4 flex items-center"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
setModal({ open: true, dbType: draw.type });
|
||||
}}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
{dbListByType[draw.type].map((item) => (
|
||||
<Card
|
||||
key={item.db_name}
|
||||
title={item.db_name}
|
||||
extra={
|
||||
<div className="flex items-center gap-3">
|
||||
<RedoOutlined
|
||||
style={{ color: 'gray' }}
|
||||
onClick={() => {
|
||||
onRefresh(item);
|
||||
}}
|
||||
/>
|
||||
<EditFilled
|
||||
className="mr-2"
|
||||
style={{ color: '#1b7eff' }}
|
||||
onClick={() => {
|
||||
onModify(item);
|
||||
}}
|
||||
/>
|
||||
<DeleteFilled
|
||||
style={{ color: '#ff1b2e' }}
|
||||
onClick={() => {
|
||||
onDelete(item);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
className="mb-4"
|
||||
>
|
||||
{item.db_path ? (
|
||||
<p>path: {item.db_path}</p>
|
||||
) : (
|
||||
<>
|
||||
<p>host: {item.db_host}</p>
|
||||
<p>username: {item.db_user}</p>
|
||||
<p>port: {item.db_port}</p>
|
||||
</>
|
||||
)}
|
||||
<p>remark: {item.comment}</p>
|
||||
</Card>
|
||||
))}
|
||||
</Spin>
|
||||
) : (
|
||||
<Empty image={Empty.PRESENTED_IMAGE_DEFAULT}>
|
||||
<Button
|
||||
type="primary"
|
||||
className="flex items-center mx-auto"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
setModal({ open: true, dbType: draw.type });
|
||||
}}
|
||||
>
|
||||
Create Now
|
||||
</Button>
|
||||
</Empty>
|
||||
)}
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Database;
|
||||
@@ -1,246 +0,0 @@
|
||||
import { apiInterceptors, getFlowById, importFlow } from '@/client/api';
|
||||
import MuiLoading from '@/components/common/loading';
|
||||
import AddNodes from '@/components/flow/add-nodes';
|
||||
import ButtonEdge from '@/components/flow/button-edge';
|
||||
import CanvasNode from '@/components/flow/canvas-node';
|
||||
import { IFlowData, IFlowUpdateParam } from '@/types/flow';
|
||||
import { checkFlowDataRequied, getUniqueNodeId, mapUnderlineToHump } from '@/utils/flow';
|
||||
import { ExportOutlined, FrownOutlined, ImportOutlined, SaveOutlined } from '@ant-design/icons';
|
||||
import { Divider, Space, Tooltip, message, notification } from 'antd';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import React, { DragEvent, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import ReactFlow, { Background, Connection, Controls, ReactFlowProvider, addEdge, useEdgesState, useNodesState, useReactFlow, Node } from 'reactflow';
|
||||
import 'reactflow/dist/style.css';
|
||||
import { SaveFlowModal, ExportFlowModal, ImportFlowModal } from '@/components/flow/canvas-modal';
|
||||
|
||||
interface Props {
|
||||
// Define your component props here
|
||||
}
|
||||
const nodeTypes = { customNode: CanvasNode };
|
||||
const edgeTypes = { buttonedge: ButtonEdge };
|
||||
|
||||
const Canvas: React.FC<Props> = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const id = searchParams?.get('id') || '';
|
||||
const reactFlow = useReactFlow();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [nodes, setNodes, onNodesChange] = useNodesState([]);
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
|
||||
const reactFlowWrapper = useRef<HTMLDivElement>(null);
|
||||
const [flowInfo, setFlowInfo] = useState<IFlowUpdateParam>();
|
||||
const [isSaveFlowModalOpen, setIsSaveFlowModalOpen] = useState(false);
|
||||
const [isExportFlowModalOpen, setIsExportFlowModalOpen] = useState(false);
|
||||
const [isImportModalOpen, setIsImportFlowModalOpen] = useState(false);
|
||||
|
||||
async function getFlowData() {
|
||||
setLoading(true);
|
||||
const [_, data] = await apiInterceptors(getFlowById(id));
|
||||
if (data) {
|
||||
const flowData = mapUnderlineToHump(data.flow_data);
|
||||
setFlowInfo(data);
|
||||
setNodes(flowData.nodes);
|
||||
setEdges(flowData.edges);
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
id && getFlowData();
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleBeforeUnload = (event: BeforeUnloadEvent) => {
|
||||
event.returnValue = message;
|
||||
};
|
||||
|
||||
window.addEventListener('beforeunload', handleBeforeUnload);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('beforeunload', handleBeforeUnload);
|
||||
};
|
||||
}, []);
|
||||
|
||||
function onNodesClick(event: any, clickedNode: Node) {
|
||||
reactFlow.setNodes((nds) =>
|
||||
nds.map((node) => {
|
||||
if (node.id === clickedNode.id) {
|
||||
node.data = {
|
||||
...node.data,
|
||||
selected: true,
|
||||
};
|
||||
} else {
|
||||
node.data = {
|
||||
...node.data,
|
||||
selected: false,
|
||||
};
|
||||
}
|
||||
return node;
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
function onConnect(connection: Connection) {
|
||||
const newEdge = {
|
||||
...connection,
|
||||
type: 'buttonedge',
|
||||
id: `${connection.source}|${connection.target}`,
|
||||
};
|
||||
setEdges((eds) => addEdge(newEdge, eds));
|
||||
}
|
||||
|
||||
const onDrop = useCallback(
|
||||
(event: DragEvent) => {
|
||||
event.preventDefault();
|
||||
const reactFlowBounds = reactFlowWrapper.current!.getBoundingClientRect();
|
||||
let nodeStr = event.dataTransfer.getData('application/reactflow');
|
||||
if (!nodeStr || typeof nodeStr === 'undefined') {
|
||||
return;
|
||||
}
|
||||
const nodeData = JSON.parse(nodeStr);
|
||||
const position = reactFlow.screenToFlowPosition({
|
||||
x: event.clientX - reactFlowBounds.left,
|
||||
y: event.clientY - reactFlowBounds.top,
|
||||
});
|
||||
const nodeId = getUniqueNodeId(nodeData, reactFlow.getNodes());
|
||||
nodeData.id = nodeId;
|
||||
const newNode = {
|
||||
id: nodeId,
|
||||
position,
|
||||
type: 'customNode',
|
||||
data: nodeData,
|
||||
};
|
||||
setNodes((nds) =>
|
||||
nds.concat(newNode).map((node) => {
|
||||
if (node.id === newNode.id) {
|
||||
node.data = {
|
||||
...node.data,
|
||||
selected: true,
|
||||
};
|
||||
} else {
|
||||
node.data = {
|
||||
...node.data,
|
||||
selected: false,
|
||||
};
|
||||
}
|
||||
return node;
|
||||
}),
|
||||
);
|
||||
},
|
||||
[reactFlow],
|
||||
);
|
||||
|
||||
const onDragOver = useCallback((event: DragEvent) => {
|
||||
event.preventDefault();
|
||||
event.dataTransfer.dropEffect = 'move';
|
||||
}, []);
|
||||
|
||||
function onSave() {
|
||||
const flowData = reactFlow.toObject() as IFlowData;
|
||||
const [check, node, message] = checkFlowDataRequied(flowData);
|
||||
if (!check && message) {
|
||||
setNodes((nds) =>
|
||||
nds.map((item) => {
|
||||
if (item.id === node?.id) {
|
||||
item.data = {
|
||||
...item.data,
|
||||
invalid: true,
|
||||
};
|
||||
} else {
|
||||
item.data = {
|
||||
...item.data,
|
||||
invalid: false,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
}),
|
||||
);
|
||||
return notification.error({ message: 'Error', description: message, icon: <FrownOutlined className="text-red-600" /> });
|
||||
}
|
||||
setIsSaveFlowModalOpen(true);
|
||||
}
|
||||
|
||||
function onExport() {
|
||||
setIsExportFlowModalOpen(true);
|
||||
}
|
||||
|
||||
function onImport() {
|
||||
setIsImportFlowModalOpen(true);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<MuiLoading visible={loading} />
|
||||
<Space className="my-2 mx-4 flex flex-row justify-end">
|
||||
{[
|
||||
{ title: 'import', icon: <ImportOutlined className="block text-xl" onClick={onImport} /> },
|
||||
{ title: 'export', icon: <ExportOutlined className="block text-xl" onClick={onExport} /> },
|
||||
{ title: 'save', icon: <SaveOutlined className="block text-xl" onClick={onSave} /> },
|
||||
].map(({ title, icon }) => (
|
||||
<Tooltip
|
||||
key={title}
|
||||
title={title}
|
||||
className="w-8 h-8 rounded-md bg-stone-300 dark:bg-zinc-700 dark:text-zinc-200 hover:text-blue-500 dark:hover:text-zinc-100"
|
||||
>
|
||||
{icon}
|
||||
</Tooltip>
|
||||
))}
|
||||
</Space>
|
||||
|
||||
<Divider className="mt-0 mb-0" />
|
||||
<div className="h-[calc(100vh-60px)] w-full" ref={reactFlowWrapper}>
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
nodeTypes={nodeTypes}
|
||||
edgeTypes={edgeTypes}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onNodeClick={onNodesClick}
|
||||
onConnect={onConnect}
|
||||
onDrop={onDrop}
|
||||
onDragOver={onDragOver}
|
||||
minZoom={0.1}
|
||||
fitView
|
||||
deleteKeyCode={['Backspace', 'Delete']}
|
||||
>
|
||||
<Controls className="flex flex-row items-center" position="bottom-center" />
|
||||
<Background color="#aaa" gap={16} />
|
||||
<AddNodes />
|
||||
</ReactFlow>
|
||||
</div>
|
||||
|
||||
<SaveFlowModal
|
||||
reactFlow={reactFlow}
|
||||
flowInfo={flowInfo}
|
||||
isSaveFlowModalOpen={isSaveFlowModalOpen}
|
||||
setIsSaveFlowModalOpen={setIsSaveFlowModalOpen}
|
||||
/>
|
||||
|
||||
<ExportFlowModal
|
||||
reactFlow={reactFlow}
|
||||
flowInfo={flowInfo}
|
||||
isExportFlowModalOpen={isExportFlowModalOpen}
|
||||
setIsExportFlowModalOpen={setIsExportFlowModalOpen}
|
||||
/>
|
||||
|
||||
<ImportFlowModal
|
||||
setNodes={setNodes}
|
||||
setEdges={setEdges}
|
||||
isImportModalOpen={isImportModalOpen}
|
||||
setIsImportFlowModalOpen={setIsImportFlowModalOpen}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default function CanvasWrapper() {
|
||||
return (
|
||||
<ReactFlowProvider>
|
||||
<Canvas />
|
||||
</ReactFlowProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,143 +0,0 @@
|
||||
import { apiInterceptors, getFlows, addFlow } from '@/client/api';
|
||||
import MyEmpty from '@/components/common/MyEmpty';
|
||||
import MuiLoading from '@/components/common/loading';
|
||||
import FlowCard from '@/components/flow/flow-card';
|
||||
import { IFlow, IFlowUpdateParam } from '@/types/flow';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { Button, Checkbox, Form, Input, Modal, message, Pagination, PaginationProps } from 'antd';
|
||||
import Link from 'next/link';
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
function Flow() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [flowList, setFlowList] = useState<Array<IFlow>>([]);
|
||||
const [deploy, setDeploy] = useState(false);
|
||||
const [page, setPage] = useState<number>(1);
|
||||
const [pageSize, setPageSize] = useState<number>(10);
|
||||
const [total, setTotal] = useState<number>(0);
|
||||
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [form] = Form.useForm<Pick<IFlow, 'label' | 'name'>>();
|
||||
const copyFlowTemp = useRef<IFlow>();
|
||||
|
||||
async function getFlowList() {
|
||||
setLoading(true);
|
||||
const [_, data] = await apiInterceptors(getFlows(page, pageSize));
|
||||
setTotal(data?.total_count ?? 0);
|
||||
setLoading(false);
|
||||
setFlowList(data?.items ?? []);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getFlowList();
|
||||
}, [page, pageSize]);
|
||||
|
||||
function updateFlowList(uid: string) {
|
||||
setFlowList((flows) => flows.filter((flow) => flow.uid !== uid));
|
||||
}
|
||||
|
||||
const handleCopy = (flow: IFlow) => {
|
||||
copyFlowTemp.current = flow;
|
||||
form.setFieldValue('label', `${flow.label} Copy`);
|
||||
form.setFieldValue('name', `${flow.name}_copy`);
|
||||
setDeploy(false);
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const onFinish = async (val: { name: string; label: string }) => {
|
||||
if (!copyFlowTemp.current) return;
|
||||
const { source, uid, dag_id, gmt_created, gmt_modified, state, ...params } = copyFlowTemp.current;
|
||||
const data: IFlowUpdateParam = {
|
||||
...params,
|
||||
editable: true,
|
||||
state: deploy ? 'deployed' : 'developing',
|
||||
...val,
|
||||
};
|
||||
const [err] = await apiInterceptors(addFlow(data));
|
||||
if (!err) {
|
||||
messageApi.success(t('save_flow_success'));
|
||||
setShowModal(false);
|
||||
getFlowList();
|
||||
}
|
||||
};
|
||||
|
||||
const onPageChange: PaginationProps['onChange'] = (page: number, pageSize: number) => {
|
||||
setPage(page);
|
||||
setPageSize(pageSize);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col justify-between relative p-4 md:p-6 min-h-full overflow-y-auto">
|
||||
{contextHolder}
|
||||
<MuiLoading visible={loading} />
|
||||
|
||||
<div className="mb-4">
|
||||
<Link href="/flow/canvas">
|
||||
<Button type="primary" className="flex items-center" icon={<PlusOutlined />}>
|
||||
New AWEL Flow
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-between flex-1">
|
||||
<div className="flex flex-wrap gap-2 md:gap-4 justify-start items-stretch">
|
||||
{flowList.map((flow) => (
|
||||
<FlowCard key={flow.uid} flow={flow} deleteCallback={updateFlowList} onCopy={handleCopy} />
|
||||
))}
|
||||
{flowList.length === 0 && <MyEmpty description="No flow found" />}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end mt-6">
|
||||
<Pagination
|
||||
showQuickJumper
|
||||
showSizeChanger
|
||||
defaultPageSize={10}
|
||||
defaultCurrent={1}
|
||||
current={page}
|
||||
total={total}
|
||||
showTotal={(total) => `Total ${total} items`}
|
||||
onChange={onPageChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
open={showModal}
|
||||
title="Copy AWEL Flow"
|
||||
onCancel={() => {
|
||||
setShowModal(false);
|
||||
}}
|
||||
footer={false}
|
||||
>
|
||||
<Form form={form} onFinish={onFinish} className="mt-6">
|
||||
<Form.Item name="name" label="Name" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="label" label="Label" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label="Deploy">
|
||||
<Checkbox
|
||||
value={deploy}
|
||||
onChange={(e) => {
|
||||
const val = e.target.checked;
|
||||
setDeploy(val);
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<div className="flex justify-end">
|
||||
<Button type="primary" htmlType="submit">
|
||||
{t('Submit')}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Flow;
|
||||
@@ -1,106 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import { Breadcrumb, Card, Empty, Pagination, Spin } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { apiInterceptors, getChunkList } from '@/client/api';
|
||||
import DocIcon from '@/components/knowledge/doc-icon';
|
||||
|
||||
const DEDAULT_PAGE_SIZE = 10;
|
||||
|
||||
function ChunkList() {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
const [chunkList, setChunkList] = useState<any>([]);
|
||||
const [total, setTotal] = useState<number>(0);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const {
|
||||
query: { id, spaceName },
|
||||
} = useRouter();
|
||||
|
||||
const fetchChunks = async () => {
|
||||
const [_, data] = await apiInterceptors(
|
||||
getChunkList(spaceName as string, {
|
||||
document_id: id as string,
|
||||
page: 1,
|
||||
page_size: DEDAULT_PAGE_SIZE,
|
||||
}),
|
||||
);
|
||||
|
||||
setChunkList(data?.data);
|
||||
setTotal(data?.total!);
|
||||
};
|
||||
|
||||
const loaderMore = async (page: number, page_size: number) => {
|
||||
setLoading(true);
|
||||
const [_, data] = await apiInterceptors(
|
||||
getChunkList(spaceName as string, {
|
||||
document_id: id as string,
|
||||
page,
|
||||
page_size,
|
||||
}),
|
||||
);
|
||||
setChunkList(data?.data || []);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
spaceName && id && fetchChunks();
|
||||
}, [id, spaceName]);
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-scroll relative px-2">
|
||||
<Breadcrumb
|
||||
className="m-6"
|
||||
items={[
|
||||
{
|
||||
title: 'Knowledge',
|
||||
onClick() {
|
||||
router.back();
|
||||
},
|
||||
path: '/knowledge',
|
||||
},
|
||||
{
|
||||
title: spaceName,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Spin spinning={loading}>
|
||||
<div className="flex justify-center flex-col">
|
||||
{chunkList?.length > 0 ? (
|
||||
chunkList?.map((chunk: any) => {
|
||||
return (
|
||||
<Card
|
||||
key={chunk.id}
|
||||
className="mt-2"
|
||||
title={
|
||||
<>
|
||||
<DocIcon type={chunk.doc_type} />
|
||||
<span>{chunk.doc_name}</span>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<p className="font-semibold">{t('Content')}:</p>
|
||||
<p>{chunk?.content}</p>
|
||||
<p className="font-semibold">{t('Meta_Data')}: </p>
|
||||
<p>{chunk?.meta_info}</p>
|
||||
</Card>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Empty image={Empty.PRESENTED_IMAGE_DEFAULT}></Empty>
|
||||
)}
|
||||
</div>
|
||||
</Spin>
|
||||
<Pagination
|
||||
className="mx-2 my-4 float-right right-6 bottom-4"
|
||||
defaultCurrent={1}
|
||||
defaultPageSize={DEDAULT_PAGE_SIZE}
|
||||
total={total}
|
||||
showTotal={(total) => `Total ${total} items`}
|
||||
onChange={loaderMore}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChunkList;
|
||||
@@ -1,137 +0,0 @@
|
||||
import React, { useEffect,useRef, useState } from 'react';
|
||||
import cytoscape from 'cytoscape';
|
||||
import euler from 'cytoscape-euler';
|
||||
import { Button } from 'antd';
|
||||
import { RollbackOutlined } from '@ant-design/icons';
|
||||
cytoscape.use(euler)
|
||||
import { apiInterceptors,getGraphVis } from '@/client/api';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
const LAYOUTCONFIG = {
|
||||
name: 'euler',
|
||||
springLength: 340,
|
||||
fit: false,
|
||||
springCoeff: 0.0008,
|
||||
mass: 20,
|
||||
dragCoeff: 1,
|
||||
gravity: -20,
|
||||
pull: 0.009,
|
||||
randomize: false,
|
||||
padding: 0,
|
||||
maxIterations: 1000,
|
||||
maxSimulationTime: 4000,
|
||||
}
|
||||
|
||||
function GraphVis() {
|
||||
const myRef = useRef<HTMLDivElement>(null);
|
||||
const LIMIT = 500
|
||||
const router = useRouter();
|
||||
const fetchGraphVis = async () => {
|
||||
const [_, data] = await apiInterceptors(getGraphVis(spaceName as string,{limit:LIMIT}))
|
||||
if(myRef.current && data){
|
||||
let processedData = processResult(data)
|
||||
renderGraphVis(processedData)
|
||||
}
|
||||
}
|
||||
const processResult = (data:{nodes:Array<any>,edges:Array<any>}) => {
|
||||
let nodes:any[] = []
|
||||
let edges:any[] = []
|
||||
data.nodes.forEach((node:any)=>{
|
||||
let n = {
|
||||
data:{
|
||||
id:node.vid,
|
||||
displayName:node.vid,
|
||||
}
|
||||
}
|
||||
nodes.push(n)
|
||||
})
|
||||
data.edges.forEach((edge:any)=>{
|
||||
let e = {
|
||||
data:{
|
||||
id:edge.src+'_'+edge.dst+'_'+edge.label,
|
||||
source:edge.src,
|
||||
target:edge.dst,
|
||||
displayName:edge.label
|
||||
}
|
||||
}
|
||||
edges.push(e)
|
||||
})
|
||||
return {
|
||||
nodes,
|
||||
edges
|
||||
}
|
||||
}
|
||||
const renderGraphVis = (data:any)=> {
|
||||
let dom = myRef.current as HTMLDivElement
|
||||
let cy = cytoscape(
|
||||
{
|
||||
container:myRef.current,
|
||||
elements:data,
|
||||
zoom:0.3,
|
||||
pixelRatio: 'auto',
|
||||
style:[
|
||||
{
|
||||
selector: 'node',
|
||||
style: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
color: '#fff',
|
||||
'text-outline-color': '#37D4BE',
|
||||
'text-outline-width': 2,
|
||||
'text-valign': 'center',
|
||||
'text-halign': 'center',
|
||||
'background-color': '#37D4BE',
|
||||
'label': 'data(displayName)'
|
||||
}
|
||||
},
|
||||
{
|
||||
selector: 'edge',
|
||||
style: {
|
||||
'width': 1,
|
||||
color: '#fff',
|
||||
'label': 'data(displayName)',
|
||||
'line-color': '#66ADFF',
|
||||
'font-size': 14,
|
||||
'target-arrow-shape': 'vee',
|
||||
'control-point-step-size': 40,
|
||||
'curve-style': 'bezier',
|
||||
'text-background-opacity': 1,
|
||||
'text-background-color': '#66ADFF',
|
||||
'target-arrow-color': '#66ADFF',
|
||||
'text-background-shape': 'roundrectangle',
|
||||
'text-border-color': '#000',
|
||||
'text-wrap': 'wrap',
|
||||
'text-valign': 'top',
|
||||
'text-halign': 'center',
|
||||
'text-background-padding':'5',
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
cy.layout(LAYOUTCONFIG).run()
|
||||
cy.pan({
|
||||
x: dom.clientWidth / 2,
|
||||
y: dom.clientHeight / 2
|
||||
})
|
||||
}
|
||||
const back = ()=>{
|
||||
router.push(`/knowledge`);
|
||||
}
|
||||
const {
|
||||
query: { spaceName },
|
||||
} = useRouter();
|
||||
useEffect(()=>{
|
||||
spaceName && fetchGraphVis()
|
||||
})
|
||||
return (
|
||||
<div className="p-4 h-full overflow-y-scroll relative px-2">
|
||||
<div>
|
||||
<Button onClick={back} icon={<RollbackOutlined />}> Back </Button>
|
||||
</div>
|
||||
<div className='h-full w-full' ref={myRef}></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default GraphVis;
|
||||
@@ -1,123 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { Button, Modal, Steps } from 'antd';
|
||||
import SpaceCard from '@/components/knowledge/space-card';
|
||||
import { File, ISpace, StepChangeParams, IStorage, SpaceConfig } from '@/types/knowledge';
|
||||
import { apiInterceptors, getSpaceList, getSpaceConfig } from '@/client/api';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import DocUploadForm from '@/components/knowledge/doc-upload-form';
|
||||
import SpaceForm from '@/components/knowledge/space-form';
|
||||
import DocTypeForm from '@/components/knowledge/doc-type-form';
|
||||
import Segmentation from '@/components/knowledge/segmentation';
|
||||
import classNames from 'classnames';
|
||||
|
||||
const Knowledge = () => {
|
||||
const [spaceList, setSpaceList] = useState<Array<ISpace> | null>([]);
|
||||
const [isAddShow, setIsAddShow] = useState<boolean>(false);
|
||||
const [activeStep, setActiveStep] = useState<number>(0);
|
||||
const [spaceName, setSpaceName] = useState<string>('');
|
||||
const [files, setFiles] = useState<Array<File>>([]);
|
||||
const [docType, setDocType] = useState<string>('');
|
||||
const [spaceConfig, setSpaceConfig] = useState<IStorage | null>(null);
|
||||
|
||||
const { t } = useTranslation();
|
||||
const addKnowledgeSteps = [
|
||||
{ title: t('Knowledge_Space_Config') },
|
||||
{ title: t('Choose_a_Datasource_type') },
|
||||
{ title: t('Upload') },
|
||||
{ title: t('Segmentation') },
|
||||
];
|
||||
|
||||
async function getSpaces() {
|
||||
const [_, data] = await apiInterceptors(getSpaceList());
|
||||
setSpaceList(data);
|
||||
}
|
||||
|
||||
async function getSpaceConfigs() {
|
||||
const [_, data] = await apiInterceptors(getSpaceConfig());
|
||||
if (!data) return null;
|
||||
setSpaceConfig(data.storage);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getSpaces();
|
||||
getSpaceConfigs();
|
||||
}, []);
|
||||
|
||||
const handleStepChange = ({ label, spaceName, docType = '', files, pace = 1 }: StepChangeParams) => {
|
||||
if (label === 'finish') {
|
||||
setIsAddShow(false);
|
||||
getSpaces();
|
||||
setSpaceName('');
|
||||
setDocType('');
|
||||
} else if (label === 'forward') {
|
||||
activeStep === 0 && getSpaces();
|
||||
setActiveStep((step) => step + pace);
|
||||
} else {
|
||||
setActiveStep((step) => step - pace);
|
||||
}
|
||||
files && setFiles(files);
|
||||
spaceName && setSpaceName(spaceName);
|
||||
docType && setDocType(docType);
|
||||
};
|
||||
|
||||
function onAddDoc(spaceName: string) {
|
||||
const space = spaceList?.find((item) => item?.name === spaceName);
|
||||
setSpaceName(spaceName);
|
||||
setActiveStep(space?.domain_type === 'FinancialReport' ? 2 : 1);
|
||||
setIsAddShow(true);
|
||||
if (space?.domain_type === 'FinancialReport') {
|
||||
setDocType('DOCUMENT');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-[#FAFAFA] dark:bg-transparent w-full h-full">
|
||||
<div className="page-body p-4 md:p-6 h-full overflow-auto">
|
||||
<Button
|
||||
type="primary"
|
||||
className="flex items-center"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
setIsAddShow(true);
|
||||
}}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
<div className="flex flex-wrap mt-4 gap-2 md:gap-4">
|
||||
{spaceList?.map((space: ISpace) => (
|
||||
<SpaceCard key={space.id} space={space} onAddDoc={onAddDoc} getSpaces={getSpaces} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
title="Add Knowledge"
|
||||
centered
|
||||
open={isAddShow}
|
||||
destroyOnClose={true}
|
||||
onCancel={() => {
|
||||
setIsAddShow(false);
|
||||
}}
|
||||
width={1000}
|
||||
afterClose={() => {
|
||||
setActiveStep(0);
|
||||
getSpaces();
|
||||
}}
|
||||
footer={null}
|
||||
>
|
||||
<Steps current={activeStep} items={addKnowledgeSteps} />
|
||||
{activeStep === 0 && <SpaceForm handleStepChange={handleStepChange} spaceConfig={spaceConfig} />}
|
||||
{activeStep === 1 && <DocTypeForm handleStepChange={handleStepChange} />}
|
||||
<DocUploadForm
|
||||
className={classNames({ hidden: activeStep !== 2 })}
|
||||
spaceName={spaceName}
|
||||
docType={docType}
|
||||
handleStepChange={handleStepChange}
|
||||
/>
|
||||
{activeStep === 3 && <Segmentation spaceName={spaceName} docType={docType} uploadFiles={files} handleStepChange={handleStepChange} />}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Knowledge;
|
||||
@@ -1,62 +0,0 @@
|
||||
import { apiInterceptors, getModelList } from '@/client/api';
|
||||
import ModelCard from '@/components/model/model-card';
|
||||
import ModelForm from '@/components/model/model-form';
|
||||
import { IModelData } from '@/types/model';
|
||||
import { Button, Modal } from 'antd';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
function Models() {
|
||||
const { t } = useTranslation();
|
||||
const [models, setModels] = useState<Array<IModelData>>([]);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
async function getModels() {
|
||||
const [, res] = await apiInterceptors(getModelList());
|
||||
setModels(res ?? []);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getModels();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="p-4 md:p-6 overflow-y-auto">
|
||||
<Button
|
||||
className="mb-4"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
>
|
||||
{t('create_model')}
|
||||
</Button>
|
||||
<div className="flex flex-wrap gap-2 md:gap-4">
|
||||
{models.map((item) => (
|
||||
<ModelCard info={item} key={item.model_name} />
|
||||
))}
|
||||
</div>
|
||||
<Modal
|
||||
width={800}
|
||||
open={isModalOpen}
|
||||
title={t('create_model')}
|
||||
onCancel={() => {
|
||||
setIsModalOpen(false);
|
||||
}}
|
||||
footer={null}
|
||||
>
|
||||
<ModelForm
|
||||
onCancel={() => {
|
||||
setIsModalOpen(false);
|
||||
}}
|
||||
onSuccess={() => {
|
||||
setIsModalOpen(false);
|
||||
getModels();
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Models;
|
||||
@@ -1,181 +0,0 @@
|
||||
import { useState, useEffect, useRef, Ref } from 'react';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import type { FormInstance, MenuProps } from 'antd';
|
||||
import { Menu, Table, Button, Tooltip, Modal } from 'antd';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import GroupsIcon from '@mui/icons-material/Groups';
|
||||
import PersonIcon from '@mui/icons-material/Person';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { addPrompt, apiInterceptors, getPromptList, postScenes, updatePrompt } from '@/client/api';
|
||||
import { IPrompt } from '@/types/prompt';
|
||||
import PromptForm from '@/components/prompt/prompt-form';
|
||||
import { TFunction } from 'i18next';
|
||||
|
||||
const getItems = (t: TFunction) => [
|
||||
{
|
||||
label: t('Public') + ' Prompts',
|
||||
key: 'common',
|
||||
icon: <GroupsIcon />,
|
||||
},
|
||||
{
|
||||
label: t('Private') + ' Prompts',
|
||||
key: 'private',
|
||||
icon: <PersonIcon />,
|
||||
},
|
||||
];
|
||||
|
||||
const getColumns = (t: TFunction, handleEdit: (prompt: IPrompt) => void): ColumnsType<IPrompt> => [
|
||||
{
|
||||
title: t('Prompt_Info_Name'),
|
||||
dataIndex: 'prompt_name',
|
||||
key: 'prompt_name',
|
||||
},
|
||||
{
|
||||
title: t('Prompt_Info_Scene'),
|
||||
dataIndex: 'chat_scene',
|
||||
key: 'chat_scene',
|
||||
},
|
||||
{
|
||||
title: t('Prompt_Info_Sub_Scene'),
|
||||
dataIndex: 'sub_chat_scene',
|
||||
key: 'sub_chat_scene',
|
||||
},
|
||||
{
|
||||
title: t('Prompt_Info_Content'),
|
||||
dataIndex: 'content',
|
||||
key: 'content',
|
||||
render: (content) => (
|
||||
<Tooltip placement="topLeft" title={content}>
|
||||
{content}
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t('Operation'),
|
||||
dataIndex: 'operate',
|
||||
key: 'operate',
|
||||
render: (_, record) => (
|
||||
<Button
|
||||
onClick={() => {
|
||||
handleEdit(record);
|
||||
}}
|
||||
type="primary"
|
||||
>
|
||||
{t('Edit')}
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
type FormType = Ref<FormInstance<any>> | undefined;
|
||||
|
||||
const Prompt = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [promptType, setPromptType] = useState<string>('common');
|
||||
const [promptList, setPromptList] = useState<Array<IPrompt>>();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [prompt, setPrompt] = useState<IPrompt>();
|
||||
const [showModal, setShowModal] = useState<boolean>(false);
|
||||
const [scenes, setScenes] = useState<Array<Record<string, string>>>();
|
||||
const formRef = useRef<FormType>();
|
||||
|
||||
const getPrompts = async () => {
|
||||
setLoading(true);
|
||||
const body = {
|
||||
prompt_type: promptType,
|
||||
current: 1,
|
||||
pageSize: 1000,
|
||||
hideOnSinglePage: true,
|
||||
showQuickJumper: true,
|
||||
};
|
||||
const [_, data] = await apiInterceptors(getPromptList(body));
|
||||
setPromptList(data!);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const getScenes = async () => {
|
||||
const [, res] = await apiInterceptors(postScenes());
|
||||
setScenes(res?.map((scene) => ({ value: scene.chat_scene, label: scene.scene_name })));
|
||||
};
|
||||
|
||||
const onFinish = async (newPrompt: IPrompt) => {
|
||||
if (prompt) {
|
||||
await apiInterceptors(updatePrompt({ ...newPrompt, prompt_type: promptType }));
|
||||
} else {
|
||||
await apiInterceptors(addPrompt({ ...newPrompt, prompt_type: promptType }));
|
||||
}
|
||||
getPrompts();
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const handleEditBtn = (prompt: IPrompt) => {
|
||||
setPrompt(prompt);
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const handleAddBtn = () => {
|
||||
setShowModal(true);
|
||||
setPrompt(undefined);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setShowModal(false);
|
||||
};
|
||||
|
||||
const handleMenuChange: MenuProps['onClick'] = (e) => {
|
||||
const type = e.key;
|
||||
setPromptType(type);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getPrompts();
|
||||
}, [promptType]);
|
||||
|
||||
useEffect(() => {
|
||||
getScenes();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Menu onClick={handleMenuChange} selectedKeys={[promptType]} mode="horizontal" items={getItems(t)} />
|
||||
<div className="px-6 py-4">
|
||||
<div className="flex flex-row-reverse mb-4">
|
||||
<Button className="flex items-center" onClick={handleAddBtn}>
|
||||
<PlusOutlined />
|
||||
{t('Add')} Prompts
|
||||
</Button>
|
||||
{promptType === 'common' && (
|
||||
<Button className="mr-2 flex items-center" disabled>
|
||||
<PlusOutlined />
|
||||
{t('Add')} Prompts {t('template')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Table
|
||||
columns={getColumns(t, handleEditBtn)}
|
||||
dataSource={promptList}
|
||||
loading={loading}
|
||||
rowKey={(record) => record.prompt_name}
|
||||
scroll={{ y: 600 }}
|
||||
/>
|
||||
</div>
|
||||
<Modal
|
||||
title={`${prompt ? t('Edit') : t('Add')} Prompts`}
|
||||
destroyOnClose
|
||||
open={showModal}
|
||||
onCancel={handleClose}
|
||||
cancelText={t('cancel')}
|
||||
okText={t('submit')}
|
||||
onOk={() => {
|
||||
// @ts-ignore
|
||||
formRef.current?.submit();
|
||||
}}
|
||||
>
|
||||
<PromptForm scenes={scenes} ref={formRef as FormType} prompt={prompt} onFinish={onFinish} />
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Prompt;
|
||||
Reference in New Issue
Block a user