mirror of
https://github.com/labring/FastGPT.git
synced 2025-08-05 06:35:39 +00:00
V4.6.6-1 (#656)
This commit is contained in:
@@ -66,7 +66,7 @@ const AIChatSettingsModal = ({
|
||||
fontSize: ['sm', 'md']
|
||||
};
|
||||
const selectTemplateBtn: BoxProps = {
|
||||
color: 'blue.500',
|
||||
color: 'primary.500',
|
||||
cursor: 'pointer'
|
||||
};
|
||||
|
||||
@@ -229,7 +229,7 @@ const AIChatSettingsModal = ({
|
||||
)}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button variant={'base'} onClick={onClose}>
|
||||
<Button variant={'whiteBase'} onClick={onClose}>
|
||||
{t('Cancel')}
|
||||
</Button>
|
||||
<Button ml={4} onClick={handleSubmit(onSuccess)}>
|
||||
|
@@ -141,7 +141,7 @@ const DatasetParamsModal = ({
|
||||
)}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button variant={'base'} mr={3} onClick={onClose}>
|
||||
<Button variant={'whiteBase'} mr={3} onClick={onClose}>
|
||||
{t('common.Close')}
|
||||
</Button>
|
||||
<Button
|
||||
|
@@ -82,7 +82,7 @@ export const DatasetSelectModal = ({
|
||||
p={3}
|
||||
border={theme.borders.base}
|
||||
boxShadow={'sm'}
|
||||
bg={'blue.200'}
|
||||
bg={'primary.200'}
|
||||
>
|
||||
<Flex alignItems={'center'} h={'38px'}>
|
||||
<Avatar src={item.avatar} w={['24px', '28px']}></Avatar>
|
||||
|
@@ -104,9 +104,9 @@ const ChatTest = (
|
||||
<MyTooltip label={'重置'}>
|
||||
<IconButton
|
||||
className="chat"
|
||||
size={'sm'}
|
||||
size={'smSquare'}
|
||||
icon={<MyIcon name={'clear'} w={'14px'} />}
|
||||
variant={'base'}
|
||||
variant={'whiteDanger'}
|
||||
borderRadius={'md'}
|
||||
aria-label={'delete'}
|
||||
onClick={(e) => {
|
||||
|
@@ -48,7 +48,7 @@ export type useFlowProviderStoreType = {
|
||||
onDelNode: (nodeId: string) => void;
|
||||
onChangeNode: (e: FlowNodeChangeProps) => void;
|
||||
onCopyNode: (nodeId: string) => void;
|
||||
onResetNode: (id: string, module: FlowModuleTemplateType) => void;
|
||||
onResetNode: (e: { id: string; module: FlowModuleTemplateType }) => void;
|
||||
onDelEdge: (e: {
|
||||
moduleId: string;
|
||||
sourceHandle?: string | undefined;
|
||||
@@ -58,6 +58,13 @@ export type useFlowProviderStoreType = {
|
||||
onConnect: ({ connect }: { connect: Connection }) => any;
|
||||
initData: (modules: ModuleItemType[]) => void;
|
||||
};
|
||||
type requestEventType =
|
||||
| 'onChangeNode'
|
||||
| 'onCopyNode'
|
||||
| 'onResetNode'
|
||||
| 'onDelNode'
|
||||
| 'onDelConnect'
|
||||
| 'setNodes';
|
||||
|
||||
const StateContext = createContext<useFlowProviderStoreType>({
|
||||
reactFlowWrapper: null,
|
||||
@@ -107,7 +114,7 @@ const StateContext = createContext<useFlowProviderStoreType>({
|
||||
initData: function (modules: ModuleItemType[]): void {
|
||||
throw new Error('Function not implemented.');
|
||||
},
|
||||
onResetNode: function (id: string, module: FlowModuleTemplateType): void {
|
||||
onResetNode: function (e): void {
|
||||
throw new Error('Function not implemented.');
|
||||
}
|
||||
});
|
||||
@@ -350,7 +357,7 @@ export const FlowProvider = ({
|
||||
|
||||
// reset a node data. delete edge and replace it
|
||||
const onResetNode = useCallback(
|
||||
(id: string, module: FlowModuleTemplateType) => {
|
||||
({ id, module }: { id: string; module: FlowModuleTemplateType }) => {
|
||||
setNodes((state) =>
|
||||
state.map((node) => {
|
||||
if (node.id === id) {
|
||||
@@ -379,8 +386,7 @@ export const FlowProvider = ({
|
||||
const initData = useCallback(
|
||||
(modules: ModuleItemType[]) => {
|
||||
const edges = appModule2FlowEdge({
|
||||
modules,
|
||||
onDelete: onDelConnect
|
||||
modules
|
||||
});
|
||||
setEdges(edges);
|
||||
|
||||
@@ -388,19 +394,54 @@ export const FlowProvider = ({
|
||||
|
||||
onFixView();
|
||||
},
|
||||
[onDelConnect, setEdges, setNodes, onFixView]
|
||||
[setEdges, setNodes, onFixView]
|
||||
);
|
||||
|
||||
// use eventbus to avoid refresh ReactComponents
|
||||
useEffect(() => {
|
||||
const update = (e: FlowNodeChangeProps) => {
|
||||
onChangeNode(e);
|
||||
};
|
||||
eventBus.on(EventNameEnum.updaterNode, update);
|
||||
eventBus.on(
|
||||
EventNameEnum.requestFlowEvent,
|
||||
({ type, data }: { type: requestEventType; data: any }) => {
|
||||
switch (type) {
|
||||
case 'onChangeNode':
|
||||
onChangeNode(data);
|
||||
return;
|
||||
case 'onCopyNode':
|
||||
onCopyNode(data);
|
||||
return;
|
||||
case 'onResetNode':
|
||||
onResetNode(data);
|
||||
return;
|
||||
case 'onDelNode':
|
||||
onDelNode(data);
|
||||
return;
|
||||
case 'onDelConnect':
|
||||
onDelConnect(data);
|
||||
return;
|
||||
case 'setNodes':
|
||||
setNodes(data);
|
||||
return;
|
||||
}
|
||||
}
|
||||
);
|
||||
return () => {
|
||||
eventBus.off(EventNameEnum.updaterNode);
|
||||
eventBus.off(EventNameEnum.requestFlowEvent);
|
||||
};
|
||||
}, [onChangeNode]);
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
eventBus.on(EventNameEnum.requestFlowStore, () => {
|
||||
eventBus.emit('receiveFlowStore', {
|
||||
nodes,
|
||||
edges,
|
||||
mode,
|
||||
filterAppIds,
|
||||
reactFlowWrapper
|
||||
});
|
||||
});
|
||||
return () => {
|
||||
eventBus.off(EventNameEnum.requestFlowStore);
|
||||
};
|
||||
}, [edges, filterAppIds, mode, nodes]);
|
||||
|
||||
const value = {
|
||||
reactFlowWrapper,
|
||||
@@ -429,5 +470,53 @@ export const FlowProvider = ({
|
||||
export default React.memo(FlowProvider);
|
||||
|
||||
export const onChangeNode = (e: FlowNodeChangeProps) => {
|
||||
eventBus.emit(EventNameEnum.updaterNode, e);
|
||||
eventBus.emit(EventNameEnum.requestFlowEvent, {
|
||||
type: 'onChangeNode',
|
||||
data: e
|
||||
});
|
||||
};
|
||||
export const onCopyNode = (nodeId: string) => {
|
||||
eventBus.emit(EventNameEnum.requestFlowEvent, {
|
||||
type: 'onCopyNode',
|
||||
data: nodeId
|
||||
});
|
||||
};
|
||||
export const onResetNode = (e: Parameters<useFlowProviderStoreType['onResetNode']>[0]) => {
|
||||
eventBus.emit(EventNameEnum.requestFlowEvent, {
|
||||
type: 'onResetNode',
|
||||
data: e
|
||||
});
|
||||
};
|
||||
export const onDelNode = (nodeId: string) => {
|
||||
eventBus.emit(EventNameEnum.requestFlowEvent, {
|
||||
type: 'onDelNode',
|
||||
data: nodeId
|
||||
});
|
||||
};
|
||||
export const onDelConnect = (e: Parameters<useFlowProviderStoreType['onDelConnect']>[0]) => {
|
||||
eventBus.emit(EventNameEnum.requestFlowEvent, {
|
||||
type: 'onDelConnect',
|
||||
data: e
|
||||
});
|
||||
};
|
||||
export const onSetNodes = (e: useFlowProviderStoreType['nodes']) => {
|
||||
eventBus.emit(EventNameEnum.requestFlowEvent, {
|
||||
type: 'setNodes',
|
||||
data: e
|
||||
});
|
||||
};
|
||||
|
||||
export const getFlowStore = () =>
|
||||
new Promise<{
|
||||
nodes: useFlowProviderStoreType['nodes'];
|
||||
edges: useFlowProviderStoreType['edges'];
|
||||
mode: useFlowProviderStoreType['mode'];
|
||||
filterAppIds: useFlowProviderStoreType['filterAppIds'];
|
||||
reactFlowWrapper: useFlowProviderStoreType['reactFlowWrapper'];
|
||||
}>((resolve) => {
|
||||
eventBus.on('receiveFlowStore', (data: any) => {
|
||||
resolve(data);
|
||||
eventBus.off('receiveFlowStore');
|
||||
});
|
||||
eventBus.emit(EventNameEnum.requestFlowStore);
|
||||
});
|
||||
|
@@ -3,24 +3,16 @@ import { Textarea, Button, ModalBody, ModalFooter } from '@chakra-ui/react';
|
||||
import MyModal from '@/components/MyModal';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useToast } from '@/web/common/hooks/useToast';
|
||||
import { useFlowProviderStore, type useFlowProviderStoreType } from './FlowProvider';
|
||||
import { useFlowProviderStore } from './FlowProvider';
|
||||
|
||||
type Props = {
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const ImportSettings = ({
|
||||
onClose,
|
||||
setNodes,
|
||||
setEdges,
|
||||
initData
|
||||
}: Props & {
|
||||
setNodes: useFlowProviderStoreType['setNodes'];
|
||||
setEdges: useFlowProviderStoreType['setEdges'];
|
||||
initData: useFlowProviderStoreType['initData'];
|
||||
}) => {
|
||||
const ImportSettings = ({ onClose }: Props) => {
|
||||
const { t } = useTranslation();
|
||||
const { toast } = useToast();
|
||||
const { setNodes, setEdges, initData } = useFlowProviderStore();
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
return (
|
||||
@@ -41,7 +33,7 @@ const ImportSettings = ({
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button
|
||||
variant="base"
|
||||
variant="whiteBase"
|
||||
onClick={() => {
|
||||
if (!value) {
|
||||
return onClose();
|
||||
@@ -68,8 +60,4 @@ const ImportSettings = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(function (props: Props) {
|
||||
const { setNodes, setEdges, initData } = useFlowProviderStore();
|
||||
|
||||
return <ImportSettings {...props} setNodes={setNodes} setEdges={setEdges} initData={initData} />;
|
||||
});
|
||||
export default React.memo(ImportSettings);
|
||||
|
@@ -7,11 +7,10 @@ import type {
|
||||
import { useViewport, XYPosition } from 'reactflow';
|
||||
import { useSystemStore } from '@/web/common/system/useSystemStore';
|
||||
import Avatar from '@/components/Avatar';
|
||||
import { useFlowProviderStore, type useFlowProviderStoreType } from './FlowProvider';
|
||||
import { getFlowStore, onSetNodes } from './FlowProvider';
|
||||
import { customAlphabet } from 'nanoid';
|
||||
import { appModule2FlowNode } from '@/utils/adapt';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useRouter } from 'next/router';
|
||||
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);
|
||||
import EmptyTip from '@/components/EmptyTip';
|
||||
import { FlowNodeTypeEnum } from '@fastgpt/global/core/module/node/constant';
|
||||
@@ -19,7 +18,6 @@ import { getPreviewPluginModule } from '@/web/core/plugin/api';
|
||||
import { useToast } from '@/web/common/hooks/useToast';
|
||||
import { getErrText } from '@fastgpt/global/common/error/utils';
|
||||
import { moduleTemplatesList } from '@/web/core/modules/template/system';
|
||||
import { ModuleTemplateTypeEnum } from '@fastgpt/global/core/module/constants';
|
||||
|
||||
export type ModuleTemplateProps = {
|
||||
templates: FlowModuleTemplateType[];
|
||||
@@ -32,20 +30,9 @@ type ModuleTemplateListProps = ModuleTemplateProps & {
|
||||
type RenderListProps = {
|
||||
templates: FlowModuleTemplateType[];
|
||||
onClose: () => void;
|
||||
setNodes: useFlowProviderStoreType['setNodes'];
|
||||
reactFlowWrapper: useFlowProviderStoreType['reactFlowWrapper'];
|
||||
};
|
||||
|
||||
const ModuleTemplateList = ({
|
||||
templates,
|
||||
isOpen,
|
||||
onClose,
|
||||
setNodes,
|
||||
reactFlowWrapper
|
||||
}: ModuleTemplateListProps & {
|
||||
setNodes: useFlowProviderStoreType['setNodes'];
|
||||
reactFlowWrapper: useFlowProviderStoreType['reactFlowWrapper'];
|
||||
}) => {
|
||||
const ModuleTemplateList = ({ templates, isOpen, onClose }: ModuleTemplateListProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
@@ -77,31 +64,16 @@ const ModuleTemplateList = ({
|
||||
transition={'.2s ease'}
|
||||
userSelect={'none'}
|
||||
>
|
||||
<RenderList
|
||||
templates={templates}
|
||||
onClose={onClose}
|
||||
setNodes={setNodes}
|
||||
reactFlowWrapper={reactFlowWrapper}
|
||||
/>
|
||||
<RenderList templates={templates} onClose={onClose} />
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(function (props: ModuleTemplateListProps) {
|
||||
const { setNodes, reactFlowWrapper } = useFlowProviderStore();
|
||||
export default React.memo(ModuleTemplateList);
|
||||
|
||||
return <ModuleTemplateList {...props} setNodes={setNodes} reactFlowWrapper={reactFlowWrapper} />;
|
||||
});
|
||||
|
||||
const RenderList = React.memo(function RenderList({
|
||||
templates,
|
||||
onClose,
|
||||
setNodes,
|
||||
reactFlowWrapper
|
||||
}: RenderListProps) {
|
||||
const RenderList = React.memo(function RenderList({ templates, onClose }: RenderListProps) {
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const { isPc } = useSystemStore();
|
||||
const { x, y, zoom } = useViewport();
|
||||
const { setLoading } = useSystemStore();
|
||||
@@ -119,6 +91,7 @@ const RenderList = React.memo(function RenderList({
|
||||
|
||||
const onAddNode = useCallback(
|
||||
async ({ template, position }: { template: FlowModuleTemplateType; position: XYPosition }) => {
|
||||
const { reactFlowWrapper, nodes } = await getFlowStore();
|
||||
if (!reactFlowWrapper?.current) return;
|
||||
|
||||
const templateModule = await (async () => {
|
||||
@@ -145,8 +118,8 @@ const RenderList = React.memo(function RenderList({
|
||||
const mouseX = (position.x - reactFlowBounds.left - x) / zoom - 100;
|
||||
const mouseY = (position.y - reactFlowBounds.top - y) / zoom;
|
||||
|
||||
setNodes((state) =>
|
||||
state.concat(
|
||||
onSetNodes(
|
||||
nodes.concat(
|
||||
appModule2FlowNode({
|
||||
item: {
|
||||
...templateModule,
|
||||
@@ -157,7 +130,7 @@ const RenderList = React.memo(function RenderList({
|
||||
)
|
||||
);
|
||||
},
|
||||
[reactFlowWrapper, setLoading, setNodes, t, toast, x, y, zoom]
|
||||
[setLoading, t, toast, x, y, zoom]
|
||||
);
|
||||
|
||||
return templates.length === 0 ? (
|
||||
|
@@ -60,7 +60,7 @@ const SelectAppModal = ({
|
||||
cursor={'pointer'}
|
||||
{...(selectedApps.includes(app._id)
|
||||
? {
|
||||
bg: 'blue.100',
|
||||
bg: 'primary.100',
|
||||
onClick: () => {
|
||||
setSelectedApps(selectedApps.filter((e) => e !== app._id));
|
||||
}
|
||||
@@ -83,7 +83,7 @@ const SelectAppModal = ({
|
||||
))}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button variant={'base'} onClick={onClose}>
|
||||
<Button variant={'whiteBase'} onClick={onClose}>
|
||||
{t('Cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
|
@@ -1,19 +1,10 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
BezierEdge,
|
||||
getBezierPath,
|
||||
EdgeLabelRenderer,
|
||||
EdgeProps,
|
||||
getSmoothStepPath
|
||||
} from 'reactflow';
|
||||
import { BezierEdge, getBezierPath, EdgeLabelRenderer, EdgeProps } from 'reactflow';
|
||||
import { onDelConnect } from '../../FlowProvider';
|
||||
import { Flex } from '@chakra-ui/react';
|
||||
import MyIcon from '@/components/Icon';
|
||||
|
||||
const ButtonEdge = (
|
||||
props: EdgeProps<{
|
||||
onDelete: (id: string) => void;
|
||||
}>
|
||||
) => {
|
||||
const ButtonEdge = (props: EdgeProps) => {
|
||||
const {
|
||||
id,
|
||||
sourceX,
|
||||
@@ -22,7 +13,6 @@ const ButtonEdge = (
|
||||
targetY,
|
||||
sourcePosition,
|
||||
targetPosition,
|
||||
data,
|
||||
selected,
|
||||
style = {}
|
||||
} = props;
|
||||
@@ -67,12 +57,12 @@ const ButtonEdge = (
|
||||
_hover={{
|
||||
boxShadow: '0 0 6px 2px rgba(0, 0, 0, 0.08)'
|
||||
}}
|
||||
onClick={() => data?.onDelete(id)}
|
||||
onClick={() => onDelConnect(id)}
|
||||
>
|
||||
<MyIcon
|
||||
name="closeSolid"
|
||||
w={'100%'}
|
||||
color={selected ? 'blue.700' : 'myGray.500'}
|
||||
color={selected ? 'primary.700' : 'myGray.500'}
|
||||
></MyIcon>
|
||||
</Flex>
|
||||
</EdgeLabelRenderer>
|
||||
|
@@ -133,7 +133,8 @@ const TTSSelect = ({
|
||||
<Image src="/icon/speaking.gif" w={'24px'} alt={''} />
|
||||
<Button
|
||||
ml={2}
|
||||
variant={'gray'}
|
||||
variant={'grayBase'}
|
||||
color={'primary.600'}
|
||||
isLoading={audioLoading}
|
||||
leftIcon={<MyIcon name={'core/chat/stopSpeech'} w={'16px'} />}
|
||||
onClick={() => {
|
||||
|
@@ -289,7 +289,7 @@ const VariableEdit = ({
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<Button variant={'base'} mr={3} onClick={onCloseEdit}>
|
||||
<Button variant={'whiteBase'} mr={3} onClick={onCloseEdit}>
|
||||
{t('common.Close')}
|
||||
</Button>
|
||||
<Button
|
||||
|
@@ -6,7 +6,7 @@ import Container from '../modules/Container';
|
||||
import RenderInput from '../render/RenderInput';
|
||||
import RenderOutput from '../render/RenderOutput';
|
||||
|
||||
const NodeAnswer = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
const NodeAnswer = React.memo(function NodeAnswer({ data }: { data: FlowModuleItemType }) {
|
||||
const { moduleId, inputs, outputs } = data;
|
||||
return (
|
||||
<NodeCard minW={'400px'} {...data}>
|
||||
@@ -16,5 +16,7 @@ const NodeAnswer = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
</Container>
|
||||
</NodeCard>
|
||||
);
|
||||
};
|
||||
export default React.memo(NodeAnswer);
|
||||
});
|
||||
export default function Node({ data }: NodeProps<FlowModuleItemType>) {
|
||||
return <NodeAnswer data={data} />;
|
||||
}
|
||||
|
@@ -17,7 +17,7 @@ import SourceHandle from '../render/SourceHandle';
|
||||
import MyTooltip from '@/components/MyTooltip';
|
||||
import { onChangeNode } from '../../FlowProvider';
|
||||
|
||||
const NodeCQNode = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
const NodeCQNode = React.memo(function NodeCQNode({ data }: { data: FlowModuleItemType }) {
|
||||
const { t } = useTranslation();
|
||||
const { moduleId, inputs } = data;
|
||||
|
||||
@@ -136,5 +136,7 @@ const NodeCQNode = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
</Container>
|
||||
</NodeCard>
|
||||
);
|
||||
};
|
||||
export default React.memo(NodeCQNode);
|
||||
});
|
||||
export default function Node({ data }: NodeProps<FlowModuleItemType>) {
|
||||
return <NodeCQNode data={data} />;
|
||||
}
|
||||
|
@@ -3,7 +3,10 @@ import { NodeProps } from 'reactflow';
|
||||
import NodeCard from '../render/NodeCard';
|
||||
import { FlowModuleItemType } from '@fastgpt/global/core/module/type.d';
|
||||
|
||||
const NodeAnswer = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
const NodeAnswer = React.memo(function NodeAnswer({ data }: { data: FlowModuleItemType }) {
|
||||
return <NodeCard {...data}></NodeCard>;
|
||||
};
|
||||
export default React.memo(NodeAnswer);
|
||||
});
|
||||
|
||||
export default function Node({ data }: NodeProps<FlowModuleItemType>) {
|
||||
return <NodeAnswer data={data} />;
|
||||
}
|
||||
|
@@ -73,7 +73,7 @@ const ExtractFieldModal = ({
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<Button variant={'base'} mr={3} onClick={onClose}>
|
||||
<Button variant={'whiteBase'} mr={3} onClick={onClose}>
|
||||
{t('common.Close')}
|
||||
</Button>
|
||||
<Button onClick={handleSubmit(onSubmit)}>{t('common.Confirm')}</Button>
|
||||
|
@@ -17,7 +17,7 @@ import { FlowNodeOutputTypeEnum } from '@fastgpt/global/core/module/node/constan
|
||||
import { ModuleIOValueTypeEnum } from '@fastgpt/global/core/module/constants';
|
||||
import { onChangeNode } from '../../../FlowProvider';
|
||||
|
||||
const NodeExtract = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
const NodeExtract = React.memo(function NodeExtract({ data }: { data: FlowModuleItemType }) {
|
||||
const { inputs, outputs, moduleId } = data;
|
||||
const { t } = useTranslation();
|
||||
const [editExtractFiled, setEditExtractField] = useState<ContextExtractAgentItemType>();
|
||||
@@ -39,7 +39,7 @@ const NodeExtract = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
<Box pt={2}>
|
||||
<Box position={'absolute'} top={0} right={0}>
|
||||
<Button
|
||||
variant={'base'}
|
||||
variant={'whitePrimary'}
|
||||
leftIcon={<AddIcon fontSize={'10px'} />}
|
||||
onClick={() => setEditExtractField(defaultField)}
|
||||
>
|
||||
@@ -183,6 +183,8 @@ const NodeExtract = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
)}
|
||||
</NodeCard>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default React.memo(NodeExtract);
|
||||
export default function Node({ data }: NodeProps<FlowModuleItemType>) {
|
||||
return <NodeExtract data={data} />;
|
||||
}
|
||||
|
@@ -17,7 +17,7 @@ import { ModuleIOValueTypeEnum } from '@fastgpt/global/core/module/constants';
|
||||
import { customAlphabet } from 'nanoid';
|
||||
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);
|
||||
|
||||
const NodeHttp = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
const NodeHttp = React.memo(function NodeHttp({ data }: { data: FlowModuleItemType }) {
|
||||
const { moduleId, inputs, outputs } = data;
|
||||
|
||||
return (
|
||||
@@ -31,5 +31,7 @@ const NodeHttp = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
</Container>
|
||||
</NodeCard>
|
||||
);
|
||||
};
|
||||
export default React.memo(NodeHttp);
|
||||
});
|
||||
export default function Node({ data }: NodeProps<FlowModuleItemType>) {
|
||||
return <NodeHttp data={data} />;
|
||||
}
|
||||
|
@@ -41,7 +41,11 @@ const createEditField = {
|
||||
inputType: true
|
||||
};
|
||||
|
||||
const NodePluginInput = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
const NodePluginInput = React.memo(function NodePluginInput({
|
||||
data
|
||||
}: {
|
||||
data: FlowModuleItemType;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const { moduleId, inputs, outputs } = data;
|
||||
const [createField, setCreateField] = useState<EditNodeFieldType>();
|
||||
@@ -65,7 +69,7 @@ const NodePluginInput = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
w={'14px'}
|
||||
cursor={'pointer'}
|
||||
mr={3}
|
||||
_hover={{ color: 'blue.500' }}
|
||||
_hover={{ color: 'primary.500' }}
|
||||
onClick={() =>
|
||||
setEditField({
|
||||
inputType: item.type,
|
||||
@@ -121,7 +125,7 @@ const NodePluginInput = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
))}
|
||||
<Box textAlign={'right'} mt={5}>
|
||||
<Button
|
||||
variant={'base'}
|
||||
variant={'whitePrimary'}
|
||||
leftIcon={<SmallAddIcon />}
|
||||
onClick={() => {
|
||||
setCreateField(defaultCreateField);
|
||||
@@ -253,5 +257,7 @@ const NodePluginInput = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
)}
|
||||
</NodeCard>
|
||||
);
|
||||
};
|
||||
export default React.memo(NodePluginInput);
|
||||
});
|
||||
export default function Node({ data }: NodeProps<FlowModuleItemType>) {
|
||||
return <NodePluginInput data={data} />;
|
||||
}
|
||||
|
@@ -42,7 +42,11 @@ const createEditField = {
|
||||
inputType: false
|
||||
};
|
||||
|
||||
const NodePluginOutput = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
const NodePluginOutput = React.memo(function NodePluginOutput({
|
||||
data
|
||||
}: {
|
||||
data: FlowModuleItemType;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const { moduleId, inputs, outputs } = data;
|
||||
const [createField, setCreateField] = useState<EditNodeFieldType>();
|
||||
@@ -84,7 +88,7 @@ const NodePluginOutput = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
w={'14px'}
|
||||
cursor={'pointer'}
|
||||
ml={3}
|
||||
_hover={{ color: 'blue.500' }}
|
||||
_hover={{ color: 'primary.500' }}
|
||||
onClick={() =>
|
||||
setEditField({
|
||||
inputType: item.type,
|
||||
@@ -121,7 +125,7 @@ const NodePluginOutput = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
))}
|
||||
<Box textAlign={'left'} mt={5}>
|
||||
<Button
|
||||
variant={'base'}
|
||||
variant={'whitePrimary'}
|
||||
leftIcon={<SmallAddIcon />}
|
||||
onClick={() => {
|
||||
setCreateField(defaultCreateField);
|
||||
@@ -233,5 +237,8 @@ const NodePluginOutput = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
)}
|
||||
</NodeCard>
|
||||
);
|
||||
};
|
||||
export default React.memo(NodePluginOutput);
|
||||
});
|
||||
|
||||
export default function Node({ data }: NodeProps<FlowModuleItemType>) {
|
||||
return <NodePluginOutput data={data} />;
|
||||
}
|
||||
|
@@ -6,7 +6,11 @@ import Container from '../modules/Container';
|
||||
|
||||
import RenderOutput from '../render/RenderOutput';
|
||||
|
||||
const QuestionInputNode = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
const QuestionInputNode = React.memo(function QuestionInputNode({
|
||||
data
|
||||
}: {
|
||||
data: FlowModuleItemType;
|
||||
}) {
|
||||
const { moduleId, outputs } = data;
|
||||
|
||||
return (
|
||||
@@ -16,5 +20,8 @@ const QuestionInputNode = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
</Container>
|
||||
</NodeCard>
|
||||
);
|
||||
};
|
||||
export default React.memo(QuestionInputNode);
|
||||
});
|
||||
|
||||
export default function Node({ data }: NodeProps<FlowModuleItemType>) {
|
||||
return <QuestionInputNode data={data} />;
|
||||
}
|
||||
|
@@ -7,7 +7,7 @@ import Container from '../modules/Container';
|
||||
import RenderInput from '../render/RenderInput';
|
||||
import RenderOutput from '../render/RenderOutput';
|
||||
|
||||
const NodeRunAPP = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
const NodeRunAPP = React.memo(function NodeRunAPP({ data }: { data: FlowModuleItemType }) {
|
||||
const { moduleId, inputs, outputs } = data;
|
||||
|
||||
return (
|
||||
@@ -21,5 +21,7 @@ const NodeRunAPP = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
</Container>
|
||||
</NodeCard>
|
||||
);
|
||||
};
|
||||
export default React.memo(NodeRunAPP);
|
||||
});
|
||||
export default function Node({ data }: NodeProps<FlowModuleItemType>) {
|
||||
return <NodeRunAPP data={data} />;
|
||||
}
|
||||
|
@@ -7,7 +7,7 @@ import Container from '../modules/Container';
|
||||
import RenderInput from '../render/RenderInput';
|
||||
import RenderOutput from '../render/RenderOutput';
|
||||
|
||||
const NodeSimple = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
const NodeSimple = React.memo(function NodeSimple({ data }: { data: FlowModuleItemType }) {
|
||||
const { moduleId, inputs, outputs } = data;
|
||||
|
||||
return (
|
||||
@@ -30,5 +30,7 @@ const NodeSimple = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
)}
|
||||
</NodeCard>
|
||||
);
|
||||
};
|
||||
export default React.memo(NodeSimple);
|
||||
});
|
||||
export default function Node({ data }: NodeProps<FlowModuleItemType>) {
|
||||
return <NodeSimple data={data} />;
|
||||
}
|
||||
|
@@ -30,7 +30,7 @@ import QGSwitch from '@/components/core/module/Flow/components/modules/QGSwitch'
|
||||
import TTSSelect from '@/components/core/module/Flow/components/modules/TTSSelect';
|
||||
import { splitGuideModule } from '@fastgpt/global/core/module/utils';
|
||||
|
||||
const NodeUserGuide = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
const NodeUserGuide = React.memo(function NodeUserGuide({ data }: { data: FlowModuleItemType }) {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<>
|
||||
@@ -50,9 +50,11 @@ const NodeUserGuide = ({ data }: NodeProps<FlowModuleItemType>) => {
|
||||
</NodeCard>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default React.memo(NodeUserGuide);
|
||||
});
|
||||
|
||||
export default function Node({ data }: NodeProps<FlowModuleItemType>) {
|
||||
return <NodeUserGuide data={data} />;
|
||||
}
|
||||
export function WelcomeText({ data }: { data: FlowModuleItemType }) {
|
||||
const { inputs, moduleId } = data;
|
||||
|
||||
|
@@ -221,7 +221,7 @@ const FieldEditModal = ({
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<Button variant={'base'} mr={3} onClick={onClose}>
|
||||
<Button variant={'whiteBase'} mr={3} onClick={onClose}>
|
||||
{t('common.Close')}
|
||||
</Button>
|
||||
<Button
|
||||
|
@@ -8,11 +8,7 @@ import { QuestionOutlineIcon } from '@chakra-ui/icons';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useEditTitle } from '@/web/common/hooks/useEditTitle';
|
||||
import { useToast } from '@/web/common/hooks/useToast';
|
||||
import {
|
||||
useFlowProviderStore,
|
||||
onChangeNode,
|
||||
type useFlowProviderStoreType
|
||||
} from '../../FlowProvider';
|
||||
import { onChangeNode, onCopyNode, onResetNode, onDelNode } from '../../FlowProvider';
|
||||
import { FlowNodeTypeEnum } from '@fastgpt/global/core/module/node/constant';
|
||||
import { ModuleInputKeyEnum } from '@fastgpt/global/core/module/constants';
|
||||
import { useSystemStore } from '@/web/common/system/useSystemStore';
|
||||
@@ -27,13 +23,7 @@ type Props = FlowModuleItemType & {
|
||||
isPreview?: boolean;
|
||||
};
|
||||
|
||||
const NodeCard = (
|
||||
props: Props & {
|
||||
onCopyNode: useFlowProviderStoreType['onCopyNode'];
|
||||
onResetNode: useFlowProviderStoreType['onResetNode'];
|
||||
onDelNode: useFlowProviderStoreType['onDelNode'];
|
||||
}
|
||||
) => {
|
||||
const NodeCard = (props: Props) => {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
children,
|
||||
@@ -44,11 +34,9 @@ const NodeCard = (
|
||||
moduleId,
|
||||
flowType,
|
||||
inputs,
|
||||
isPreview,
|
||||
onCopyNode,
|
||||
onResetNode,
|
||||
onDelNode
|
||||
isPreview
|
||||
} = props;
|
||||
|
||||
const theme = useTheme();
|
||||
const { toast } = useToast();
|
||||
const { setLoading } = useSystemStore();
|
||||
@@ -77,7 +65,10 @@ const NodeCard = (
|
||||
try {
|
||||
setLoading(true);
|
||||
const pluginModule = await getPreviewPluginModule(pluginId);
|
||||
onResetNode(moduleId, pluginModule);
|
||||
onResetNode({
|
||||
id: moduleId,
|
||||
module: pluginModule
|
||||
});
|
||||
} catch (e) {
|
||||
return toast({
|
||||
status: 'error',
|
||||
@@ -130,20 +121,7 @@ const NodeCard = (
|
||||
onClick: () => {}
|
||||
}
|
||||
],
|
||||
[
|
||||
flowType,
|
||||
inputs,
|
||||
moduleId,
|
||||
name,
|
||||
onCopyNode,
|
||||
onDelNode,
|
||||
onOpenModal,
|
||||
onResetNode,
|
||||
openConfirm,
|
||||
setLoading,
|
||||
t,
|
||||
toast
|
||||
]
|
||||
[flowType, inputs, moduleId, name, onOpenModal, openConfirm, setLoading, t, toast]
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -198,10 +176,4 @@ const NodeCard = (
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(function (props: Props) {
|
||||
const { onCopyNode, onResetNode, onDelNode } = useFlowProviderStore();
|
||||
|
||||
return (
|
||||
<NodeCard {...props} onCopyNode={onCopyNode} onResetNode={onResetNode} onDelNode={onDelNode} />
|
||||
);
|
||||
});
|
||||
export default React.memo(NodeCard);
|
||||
|
@@ -1,11 +1,7 @@
|
||||
import { EditNodeFieldType, FlowNodeInputItemType } from '@fastgpt/global/core/module/node/type';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import {
|
||||
onChangeNode,
|
||||
useFlowProviderStore,
|
||||
useFlowProviderStoreType
|
||||
} from '../../../FlowProvider';
|
||||
import { onChangeNode, useFlowProviderStoreType } from '../../../FlowProvider';
|
||||
import { FlowNodeInputTypeEnum } from '@fastgpt/global/core/module/node/constant';
|
||||
import { Box, Flex } from '@chakra-ui/react';
|
||||
import MyTooltip from '@/components/MyTooltip';
|
||||
@@ -20,16 +16,10 @@ const FieldEditModal = dynamic(() => import('../FieldEditModal'));
|
||||
type Props = FlowNodeInputItemType & {
|
||||
moduleId: string;
|
||||
inputKey: string;
|
||||
mode: useFlowProviderStoreType['mode'];
|
||||
};
|
||||
|
||||
const InputLabel = ({
|
||||
moduleId,
|
||||
inputKey,
|
||||
mode,
|
||||
...item
|
||||
}: Props & {
|
||||
mode: useFlowProviderStoreType['mode'];
|
||||
}) => {
|
||||
const InputLabel = ({ moduleId, inputKey, mode, ...item }: Props) => {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
required = false,
|
||||
@@ -41,6 +31,7 @@ const InputLabel = ({
|
||||
showTargetInApp,
|
||||
showTargetInPlugin
|
||||
} = item;
|
||||
|
||||
const [editField, setEditField] = useState<EditNodeFieldType>();
|
||||
|
||||
const targetHandle = useMemo(() => {
|
||||
@@ -81,7 +72,7 @@ const InputLabel = ({
|
||||
w={'14px'}
|
||||
cursor={'pointer'}
|
||||
ml={3}
|
||||
_hover={{ color: 'blue.500' }}
|
||||
_hover={{ color: 'primary.500' }}
|
||||
onClick={() =>
|
||||
setEditField({
|
||||
inputType: type,
|
||||
@@ -153,8 +144,4 @@ const InputLabel = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(function (props: Props) {
|
||||
const { mode } = useFlowProviderStore();
|
||||
|
||||
return <InputLabel {...props} mode={mode} />;
|
||||
});
|
||||
export default React.memo(InputLabel);
|
||||
|
@@ -1,4 +1,4 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import type { FlowNodeInputItemType } from '@fastgpt/global/core/module/node/type';
|
||||
import { Box } from '@chakra-ui/react';
|
||||
import { FlowNodeInputTypeEnum } from '@fastgpt/global/core/module/node/constant';
|
||||
@@ -6,7 +6,7 @@ import dynamic from 'next/dynamic';
|
||||
|
||||
import InputLabel from './Label';
|
||||
import type { RenderInputProps } from './type.d';
|
||||
import { useFlowProviderStore, type useFlowProviderStoreType } from '../../../FlowProvider';
|
||||
import { getFlowStore, type useFlowProviderStoreType } from '../../../FlowProvider';
|
||||
|
||||
const RenderList: {
|
||||
types: `${FlowNodeInputTypeEnum}`[];
|
||||
@@ -71,14 +71,9 @@ type Props = {
|
||||
moduleId: string;
|
||||
CustomComponent?: Record<string, (e: FlowNodeInputItemType) => React.ReactNode>;
|
||||
};
|
||||
const RenderInput = ({
|
||||
flowInputList,
|
||||
moduleId,
|
||||
CustomComponent = {},
|
||||
mode
|
||||
}: Props & {
|
||||
mode: useFlowProviderStoreType['mode'];
|
||||
}) => {
|
||||
const RenderInput = ({ flowInputList, moduleId, CustomComponent = {} }: Props) => {
|
||||
const [mode, setMode] = useState<useFlowProviderStoreType['mode']>('app');
|
||||
|
||||
const sortInputs = useMemo(
|
||||
() =>
|
||||
flowInputList.sort((a, b) => {
|
||||
@@ -108,6 +103,13 @@ const RenderInput = ({
|
||||
[mode, sortInputs]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
async () => {
|
||||
const { mode } = await getFlowStore();
|
||||
setMode(mode);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{filterInputs.map((input) => {
|
||||
@@ -124,7 +126,9 @@ const RenderInput = ({
|
||||
return (
|
||||
input.type !== FlowNodeInputTypeEnum.hidden && (
|
||||
<Box key={input.key} _notLast={{ mb: 7 }} position={'relative'}>
|
||||
{!!input.label && <InputLabel moduleId={moduleId} inputKey={input.key} {...input} />}
|
||||
{!!input.label && (
|
||||
<InputLabel moduleId={moduleId} inputKey={input.key} mode={mode} {...input} />
|
||||
)}
|
||||
{!!RenderComponent && (
|
||||
<Box mt={2} className={'nodrag'}>
|
||||
{RenderComponent}
|
||||
@@ -138,7 +142,4 @@ const RenderInput = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(function (props: Props) {
|
||||
const { mode } = useFlowProviderStore();
|
||||
return <RenderInput {...props} mode={mode} />;
|
||||
});
|
||||
export default React.memo(RenderInput);
|
||||
|
@@ -16,7 +16,7 @@ const AddInputParam = ({ inputs = [], item, moduleId }: RenderInputProps) => {
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant={'base'}
|
||||
variant={'whitePrimary'}
|
||||
leftIcon={<SmallAddIcon />}
|
||||
onClick={() => {
|
||||
setEditField(item.defaultEditField || {});
|
||||
|
@@ -26,7 +26,7 @@ const AiSettingRender = ({ inputs = [], moduleId }: RenderInputProps) => {
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant={'base'}
|
||||
variant={'whitePrimary'}
|
||||
leftIcon={<MyIcon name={'settingLight'} w={'14px'} />}
|
||||
onClick={onOpenAIChatSetting}
|
||||
>
|
||||
|
@@ -1,23 +1,14 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { RenderInputProps } from '../type';
|
||||
import {
|
||||
onChangeNode,
|
||||
useFlowProviderStore,
|
||||
type useFlowProviderStoreType
|
||||
} from '../../../../FlowProvider';
|
||||
import { getFlowStore, onChangeNode, useFlowProviderStoreType } from '../../../../FlowProvider';
|
||||
import { Box, Button, Flex, useDisclosure, useTheme } from '@chakra-ui/react';
|
||||
import { SelectAppItemType } from '@fastgpt/global/core/module/type';
|
||||
import Avatar from '@/components/Avatar';
|
||||
import SelectAppModal from '../../../../SelectAppModal';
|
||||
|
||||
const SelectAppRender = ({
|
||||
item,
|
||||
moduleId,
|
||||
filterAppIds
|
||||
}: RenderInputProps & {
|
||||
filterAppIds: useFlowProviderStoreType['filterAppIds'];
|
||||
}) => {
|
||||
const SelectAppRender = ({ item, moduleId }: RenderInputProps) => {
|
||||
const theme = useTheme();
|
||||
const [filterAppIds, setFilterAppIds] = useState<useFlowProviderStoreType['filterAppIds']>([]);
|
||||
|
||||
const {
|
||||
isOpen: isOpenSelectApp,
|
||||
@@ -27,11 +18,18 @@ const SelectAppRender = ({
|
||||
|
||||
const value = item.value as SelectAppItemType | undefined;
|
||||
|
||||
useEffect(() => {
|
||||
async () => {
|
||||
const { filterAppIds } = await getFlowStore();
|
||||
setFilterAppIds(filterAppIds);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box onClick={onOpenSelectApp}>
|
||||
{!value ? (
|
||||
<Button variant={'base'} w={'100%'}>
|
||||
<Button variant={'whitePrimary'} w={'100%'}>
|
||||
选择应用
|
||||
</Button>
|
||||
) : (
|
||||
@@ -66,7 +64,4 @@ const SelectAppRender = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(function (props: RenderInputProps) {
|
||||
const { filterAppIds } = useFlowProviderStore();
|
||||
return <SelectAppRender {...props} filterAppIds={filterAppIds} />;
|
||||
});
|
||||
export default React.memo(SelectAppRender);
|
||||
|
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import type { RenderInputProps } from '../type';
|
||||
import { onChangeNode, useFlowProviderStore } from '../../../../FlowProvider';
|
||||
import { getFlowStore, onChangeNode, useFlowProviderStoreType } from '../../../../FlowProvider';
|
||||
import { Button, useDisclosure } from '@chakra-ui/react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { DatasetSearchModeEnum } from '@fastgpt/global/core/dataset/constant';
|
||||
@@ -11,7 +11,7 @@ import MyIcon from '@/components/Icon';
|
||||
import DatasetParamsModal from '@/components/core/module/DatasetParamsModal';
|
||||
|
||||
const SelectDatasetParam = ({ inputs = [], moduleId }: RenderInputProps) => {
|
||||
const { nodes } = useFlowProviderStore();
|
||||
const [nodes, setNodes] = useState<useFlowProviderStoreType['nodes']>([]);
|
||||
|
||||
const { t } = useTranslation();
|
||||
const [data, setData] = useState({
|
||||
@@ -51,10 +51,17 @@ const SelectDatasetParam = ({ inputs = [], moduleId }: RenderInputProps) => {
|
||||
});
|
||||
}, [inputs]);
|
||||
|
||||
useEffect(() => {
|
||||
async () => {
|
||||
const { nodes } = await getFlowStore();
|
||||
setNodes(nodes);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant={'base'}
|
||||
variant={'whitePrimary'}
|
||||
leftIcon={<MyIcon name={'settingLight'} w={'14px'} />}
|
||||
onClick={onOpen}
|
||||
>
|
||||
|
@@ -41,7 +41,7 @@ const OutputLabel = ({
|
||||
w={'14px'}
|
||||
cursor={'pointer'}
|
||||
mr={3}
|
||||
_hover={{ color: 'blue.500' }}
|
||||
_hover={{ color: 'primary.500' }}
|
||||
onClick={() =>
|
||||
setEditField({
|
||||
key: outputKey,
|
||||
|
@@ -17,7 +17,7 @@ const AddOutputParam = ({ outputs = [], item, moduleId }: RenderOutputProps) =>
|
||||
return (
|
||||
<Box textAlign={'right'}>
|
||||
<Button
|
||||
variant={'base'}
|
||||
variant={'whitePrimary'}
|
||||
leftIcon={<SmallAddIcon />}
|
||||
onClick={() => {
|
||||
setEditField(item.defaultEditField || {});
|
||||
|
@@ -28,7 +28,7 @@ const SourceHandle = ({ handleKey, valueType, ...props }: Props) => {
|
||||
<Box
|
||||
position={'absolute'}
|
||||
top={'50%'}
|
||||
right={'-16px'}
|
||||
right={'-18px'}
|
||||
transform={'translate(50%,-50%)'}
|
||||
{...props}
|
||||
>
|
||||
@@ -40,8 +40,8 @@ const SourceHandle = ({ handleKey, valueType, ...props }: Props) => {
|
||||
>
|
||||
<Handle
|
||||
style={{
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
width: '14px',
|
||||
height: '14px',
|
||||
...valueStyle
|
||||
}}
|
||||
type="source"
|
||||
|
@@ -9,10 +9,9 @@ import { ModuleIOValueTypeEnum } from '@fastgpt/global/core/module/constants';
|
||||
interface Props extends BoxProps {
|
||||
handleKey: string;
|
||||
valueType?: `${ModuleIOValueTypeEnum}`;
|
||||
onConnect?: OnConnect;
|
||||
}
|
||||
|
||||
const TargetHandle = ({ handleKey, valueType, onConnect, ...props }: Props) => {
|
||||
const TargetHandle = ({ handleKey, valueType, ...props }: Props) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const valType = valueType ?? ModuleIOValueTypeEnum.any;
|
||||
@@ -28,7 +27,7 @@ const TargetHandle = ({ handleKey, valueType, onConnect, ...props }: Props) => {
|
||||
<Box
|
||||
position={'absolute'}
|
||||
top={'50%'}
|
||||
left={'-16px'}
|
||||
left={'-18px'}
|
||||
transform={'translate(50%,-50%)'}
|
||||
{...props}
|
||||
>
|
||||
@@ -40,8 +39,8 @@ const TargetHandle = ({ handleKey, valueType, onConnect, ...props }: Props) => {
|
||||
>
|
||||
<Handle
|
||||
style={{
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
width: '14px',
|
||||
height: '14px',
|
||||
...valueStyle
|
||||
}}
|
||||
type="target"
|
||||
|
@@ -11,7 +11,6 @@ import ModuleTemplateList, { type ModuleTemplateProps } from './ModuleTemplateLi
|
||||
import { useFlowProviderStore } from './FlowProvider';
|
||||
|
||||
import 'reactflow/dist/style.css';
|
||||
import type { ModuleItemType } from '@fastgpt/global/core/module/type.d';
|
||||
|
||||
const NodeSimple = dynamic(() => import('./components/nodes/NodeSimple'));
|
||||
const nodeTypes: Record<`${FlowNodeTypeEnum}`, any> = {
|
||||
@@ -34,106 +33,96 @@ const nodeTypes: Record<`${FlowNodeTypeEnum}`, any> = {
|
||||
const edgeTypes = {
|
||||
[EDGE_TYPE]: ButtonEdge
|
||||
};
|
||||
type Props = {
|
||||
modules: ModuleItemType[];
|
||||
Header: React.ReactNode;
|
||||
} & ModuleTemplateProps;
|
||||
|
||||
const Container = React.memo(function Container(props: Props) {
|
||||
const { modules = [], Header, templates } = props;
|
||||
const Container = React.memo(function Container() {
|
||||
const { reactFlowWrapper, nodes, onNodesChange, edges, onEdgesChange, onConnect } =
|
||||
useFlowProviderStore();
|
||||
|
||||
return (
|
||||
<ReactFlow
|
||||
ref={reactFlowWrapper}
|
||||
fitView
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
minZoom={0.1}
|
||||
maxZoom={1.5}
|
||||
defaultEdgeOptions={{
|
||||
animated: true,
|
||||
zIndex: 0
|
||||
}}
|
||||
elevateEdgesOnSelect
|
||||
connectionLineStyle={{ strokeWidth: 2, stroke: '#5A646Es' }}
|
||||
nodeTypes={nodeTypes}
|
||||
edgeTypes={edgeTypes}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onConnect={(connect) => {
|
||||
connect.sourceHandle &&
|
||||
connect.targetHandle &&
|
||||
onConnect({
|
||||
connect
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Background />
|
||||
<Controls position={'bottom-right'} style={{ display: 'flex' }} showInteractive={false} />
|
||||
</ReactFlow>
|
||||
);
|
||||
});
|
||||
|
||||
const Flow = ({
|
||||
Header,
|
||||
templates,
|
||||
...data
|
||||
}: ModuleTemplateProps & { Header: React.ReactNode }) => {
|
||||
const {
|
||||
isOpen: isOpenTemplate,
|
||||
onOpen: onOpenTemplate,
|
||||
onClose: onCloseTemplate
|
||||
} = useDisclosure();
|
||||
|
||||
const { reactFlowWrapper, nodes, onNodesChange, edges, onEdgesChange, onConnect, initData } =
|
||||
useFlowProviderStore();
|
||||
|
||||
useEffect(() => {
|
||||
initData(JSON.parse(JSON.stringify(modules)));
|
||||
}, [modules.length]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* header */}
|
||||
{Header}
|
||||
<Box
|
||||
minH={'400px'}
|
||||
flex={'1 0 0'}
|
||||
w={'100%'}
|
||||
h={0}
|
||||
position={'relative'}
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}}
|
||||
>
|
||||
{/* open module template */}
|
||||
<IconButton
|
||||
position={'absolute'}
|
||||
top={5}
|
||||
left={5}
|
||||
w={'38px'}
|
||||
h={'38px'}
|
||||
borderRadius={'50%'}
|
||||
icon={<SmallCloseIcon fontSize={'26px'} />}
|
||||
transform={isOpenTemplate ? '' : 'rotate(135deg)'}
|
||||
transition={'0.2s ease'}
|
||||
aria-label={''}
|
||||
zIndex={1}
|
||||
boxShadow={'2px 2px 6px #85b1ff'}
|
||||
onClick={() => {
|
||||
isOpenTemplate ? onCloseTemplate() : onOpenTemplate();
|
||||
}}
|
||||
/>
|
||||
|
||||
<ReactFlow
|
||||
ref={reactFlowWrapper}
|
||||
fitView
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
minZoom={0.1}
|
||||
maxZoom={1.5}
|
||||
defaultEdgeOptions={{
|
||||
animated: true,
|
||||
zIndex: 0
|
||||
}}
|
||||
elevateEdgesOnSelect
|
||||
connectionLineStyle={{ strokeWidth: 2, stroke: '#5A646Es' }}
|
||||
nodeTypes={nodeTypes}
|
||||
edgeTypes={edgeTypes}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onConnect={(connect) => {
|
||||
connect.sourceHandle &&
|
||||
connect.targetHandle &&
|
||||
onConnect({
|
||||
connect
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Background />
|
||||
<Controls position={'bottom-right'} style={{ display: 'flex' }} showInteractive={false} />
|
||||
</ReactFlow>
|
||||
|
||||
<ModuleTemplateList
|
||||
templates={templates}
|
||||
isOpen={isOpenTemplate}
|
||||
onClose={onCloseTemplate}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
const Flow = (data: Props) => {
|
||||
return (
|
||||
<Box h={'100%'} position={'fixed'} zIndex={999} top={0} left={0} right={0} bottom={0}>
|
||||
<ReactFlowProvider>
|
||||
<Flex h={'100%'} flexDirection={'column'} bg={'#fff'}>
|
||||
<Container {...data} />
|
||||
{Header}
|
||||
<Box
|
||||
minH={'400px'}
|
||||
flex={'1 0 0'}
|
||||
w={'100%'}
|
||||
h={0}
|
||||
position={'relative'}
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}}
|
||||
>
|
||||
{/* open module template */}
|
||||
<IconButton
|
||||
position={'absolute'}
|
||||
top={5}
|
||||
left={5}
|
||||
size={'mdSquare'}
|
||||
borderRadius={'50%'}
|
||||
icon={<SmallCloseIcon fontSize={'26px'} />}
|
||||
transform={isOpenTemplate ? '' : 'rotate(135deg)'}
|
||||
transition={'0.2s ease'}
|
||||
aria-label={''}
|
||||
zIndex={1}
|
||||
boxShadow={'2px 2px 6px #85b1ff'}
|
||||
onClick={() => {
|
||||
isOpenTemplate ? onCloseTemplate() : onOpenTemplate();
|
||||
}}
|
||||
/>
|
||||
|
||||
<Container {...data} />
|
||||
|
||||
<ModuleTemplateList
|
||||
templates={templates}
|
||||
isOpen={isOpenTemplate}
|
||||
onClose={onCloseTemplate}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
</ReactFlowProvider>
|
||||
</Box>
|
||||
|
Reference in New Issue
Block a user