69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import ReactFlow, { Background, ReactFlowProvider, useNodesState } from 'reactflow';
|
|
import { FlowModuleItemType, ModuleItemType } from '@fastgpt/global/core/module/type';
|
|
import { FlowNodeTypeEnum } from '@fastgpt/global/core/module/node/constant';
|
|
import dynamic from 'next/dynamic';
|
|
import { formatPluginIOModules } from '@fastgpt/global/core/module/utils';
|
|
import MyModal from '@/components/MyModal';
|
|
import { Box } from '@chakra-ui/react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { PluginItemSchema } from '@fastgpt/global/core/plugin/type';
|
|
import { appModule2FlowNode } from '@/utils/adapt';
|
|
|
|
const nodeTypes = {
|
|
[FlowNodeTypeEnum.pluginModule]: dynamic(
|
|
() => import('@/components/core/module/Flow/components/nodes/NodePreviewPlugin')
|
|
)
|
|
};
|
|
|
|
const PreviewPlugin = ({
|
|
plugin,
|
|
modules,
|
|
onClose
|
|
}: {
|
|
plugin: PluginItemSchema;
|
|
modules: ModuleItemType[];
|
|
onClose: () => void;
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const [nodes = [], setNodes, onNodesChange] = useNodesState<FlowModuleItemType>([]);
|
|
|
|
useEffect(() => {
|
|
setNodes([
|
|
appModule2FlowNode({
|
|
item: {
|
|
moduleId: 'plugin',
|
|
flowType: FlowNodeTypeEnum.pluginModule,
|
|
logo: plugin.avatar,
|
|
name: plugin.name,
|
|
description: plugin.intro,
|
|
intro: plugin.intro,
|
|
...formatPluginIOModules(plugin._id, modules)
|
|
}
|
|
})
|
|
]);
|
|
}, [modules, plugin, setNodes]);
|
|
|
|
return (
|
|
<MyModal isOpen title={t('module.Preview Plugin')} onClose={onClose} isCentered>
|
|
<Box h={'400px'} w={'400px'}>
|
|
<ReactFlowProvider>
|
|
<ReactFlow
|
|
fitView
|
|
nodes={nodes}
|
|
edges={[]}
|
|
minZoom={0.1}
|
|
maxZoom={1.5}
|
|
nodeTypes={nodeTypes}
|
|
onNodesChange={onNodesChange}
|
|
>
|
|
<Background />
|
|
</ReactFlow>
|
|
</ReactFlowProvider>
|
|
</Box>
|
|
</MyModal>
|
|
);
|
|
};
|
|
|
|
export default React.memo(PreviewPlugin);
|