gitea/FastGPT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

4.8-preview fix (#1324)

Browse Source 
* feishu app release (#85)

* Revert "lafAccount add pat & re request when token invalid (#76)" (#77)

This reverts commit 83d85dfe37adcaef4833385ea52ee79fd84720be.

* perf: workflow ux

* system config

* feat: feishu app release

* chore: sovle the conflicts files; fix the feishu entry

* fix: rename Feishu interface to FeishuType

* fix: fix type problem in app.ts

* fix: type problem

* fix: style problem

---------

Co-authored-by: Archer <545436317@qq.com>

* perf: publish channel code

* change system variable position (#94)

* perf: workflow context

* perf: variable select

* hide publish

* perf: simple edit auto refresh

* perf: simple edit data refresh

* fix: target handle

---------

Co-authored-by: Finley Ge <32237950+FinleyGe@users.noreply.github.com>
Co-authored-by: heheer <71265218+newfish-cmyk@users.noreply.github.com>
This commit is contained in:
Archer
2024-04-29 11:13:10 +08:00
committed by GitHub
parent 5ca4049757
commit a0c1320d47
89 changed files with 1794 additions and 1047 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
projects/app/src/components/common/HiddenInput/index.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
import { Button, Input, InputGroup, InputRightElement } from '@chakra-ui/react';
import { ViewOffIcon, ViewIcon } from '@chakra-ui/icons';
function HiddenInput(props: any) {
const [show, setShow] = React.useState(false);
return (
<>
<InputGroup>
<Input {...props} type={show ? 'text' : 'password'} />
<InputRightElement width="4.5rem">
<Button h="1.75rem" size="sm" onClick={() => setShow(!show)}>
{show ? <ViewOffIcon /> : <ViewIcon />}
</Button>
</InputRightElement>
</InputGroup>
</>
);
}
export default HiddenInput;

2
projects/app/src/components/core/app/VariableEdit.tsx
View File

@@ -13,7 +13,6 @@ import {
Switch,
Input,
FormControl,
Image,
Table,
Thead,
Tbody,
@@ -21,7 +20,6 @@ import {
Th,
Td,
TableContainer,
BoxProps,
useDisclosure
} from '@chakra-ui/react';
import { QuestionOutlineIcon, SmallAddIcon } from '@chakra-ui/icons';

6
projects/app/src/components/core/workflow/Flow/ImportSettings.tsx
View File

@@ -3,7 +3,8 @@ import { Textarea, Button, ModalBody, ModalFooter } from '@chakra-ui/react';
import MyModal from '@fastgpt/web/components/common/MyModal';
import { useTranslation } from 'next-i18next';
import { useToast } from '@fastgpt/web/hooks/useToast';
import { useFlowProviderStore } from './FlowProvider';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../context';
type Props = {
onClose: () => void;
@@ -12,7 +13,8 @@ type Props = {
const ImportSettings = ({ onClose }: Props) => {
const { t } = useTranslation();
const { toast } = useToast();
const { setNodes, setEdges, initData } = useFlowProviderStore();
const initData = useContextSelector(WorkflowContext, (v) => v.initData);
const [value, setValue] = useState('');
return (

270
projects/app/src/components/core/workflow/Flow/NodeTemplatesModal.tsx
View File

@@ -1,14 +1,5 @@
import React, { useCallback, useMemo, useState } from 'react';
import {
Box,
Card,
Flex,
IconButton,
Input,
InputGroup,
InputLeftElement,
css
} from '@chakra-ui/react';
import { Box, Flex, IconButton, Input, InputGroup, InputLeftElement, css } from '@chakra-ui/react';
import type {
FlowNodeTemplateType,
nodeTemplateListType
@@ -16,8 +7,6 @@ import type {
import { useViewport, XYPosition } from 'reactflow';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import Avatar from '@/components/Avatar';
import { useFlowProviderStore } from './FlowProvider';
import { customAlphabet } from 'nanoid';
import { nodeTemplate2FlowNode } from '@/web/core/workflow/utils';
import { useTranslation } from 'next-i18next';
import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
@@ -36,6 +25,9 @@ import { PluginTypeEnum } from '@fastgpt/global/core/plugin/constants';
import { useQuery } from '@tanstack/react-query';
import { debounce } from 'lodash';
import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../context';
import { useCreation } from 'ahooks';
type ModuleTemplateListProps = {
isOpen: boolean;
@@ -62,7 +54,9 @@ const NodeTemplatesModal = ({ isOpen, onClose }: ModuleTemplateListProps) => {
const [currentParent, setCurrentParent] = useState<RenderListProps['currentParent']>();
const [searchKey, setSearchKey] = useState('');
const { feConfigs } = useSystemStore();
const { nodes, basicNodeTemplates, hasToolNode } = useFlowProviderStore();
const basicNodeTemplates = useContextSelector(WorkflowContext, (v) => v.basicNodeTemplates);
const hasToolNode = useContextSelector(WorkflowContext, (v) => v.hasToolNode);
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
const {
systemNodeTemplates,
@@ -72,12 +66,12 @@ const NodeTemplatesModal = ({ isOpen, onClose }: ModuleTemplateListProps) => {
} = useWorkflowStore();
const [templateType, setTemplateType] = useState(TemplateTypeEnum.basic);
const templatesString = useMemo(() => {
const templates = useCreation(() => {
const map = {
[TemplateTypeEnum.basic]: basicNodeTemplates.filter((item) => {
// unique node filter
if (item.unique) {
const nodeExist = nodes.some((node) => node.data.flowNodeType === item.flowNodeType);
const nodeExist = nodeList.some((node) => node.flowNodeType === item.flowNodeType);
if (nodeExist) {
return false;
}
@@ -97,12 +91,12 @@ const NodeTemplatesModal = ({ isOpen, onClose }: ModuleTemplateListProps) => {
searchKey ? item.pluginType !== PluginTypeEnum.folder : true
)
};
return JSON.stringify(map[templateType]);
return map[templateType];
}, [
basicNodeTemplates,
feConfigs.lafEnv,
hasToolNode,
nodes,
nodeList,
searchKey,
systemNodeTemplates,
teamPluginNodeTemplates,
@@ -132,135 +126,120 @@ const NodeTemplatesModal = ({ isOpen, onClose }: ModuleTemplateListProps) => {
})
);
const Render = useMemo(() => {
const parseTemplates = JSON.parse(templatesString) as FlowNodeTemplateType[];
return (
<>
<Box
zIndex={2}
display={isOpen ? 'block' : 'none'}
position={'absolute'}
top={0}
left={0}
bottom={0}
w={`${sliderWidth}px`}
onClick={onClose}
/>
<Flex
zIndex={3}
flexDirection={'column'}
position={'absolute'}
top={'10px'}
left={0}
pt={'20px'}
pb={4}
h={isOpen ? 'calc(100% - 20px)' : '0'}
w={isOpen ? ['100%', `${sliderWidth}px`] : '0'}
bg={'white'}
boxShadow={'3px 0 20px rgba(0,0,0,0.2)'}
borderRadius={'0 20px 20px 0'}
transition={'.2s ease'}
userSelect={'none'}
overflow={isOpen ? 'none' : 'hidden'}
>
<Box mb={2} pl={'20px'} pr={'10px'} whiteSpace={'nowrap'} overflow={'hidden'}>
<Flex flex={'1 0 0'} alignItems={'center'} gap={3}>
<RowTabs
list={[
{
icon: 'core/modules/basicNode',
label: t('core.module.template.Basic Node'),
value: TemplateTypeEnum.basic
},
{
icon: 'core/modules/systemPlugin',
label: t('core.module.template.System Plugin'),
value: TemplateTypeEnum.systemPlugin
},
{
icon: 'core/modules/teamPlugin',
label: t('core.module.template.Team Plugin'),
value: TemplateTypeEnum.teamPlugin
}
]}
py={'5px'}
value={templateType}
onChange={onChangeTab}
/>
{/* close icon */}
<IconButton
size={'sm'}
icon={<MyIcon name={'common/backFill'} w={'14px'} color={'myGray.700'} />}
w={'26px'}
h={'26px'}
borderColor={'myGray.300'}
variant={'grayBase'}
aria-label={''}
onClick={onClose}
return (
<>
<Box
zIndex={2}
display={isOpen ? 'block' : 'none'}
position={'absolute'}
top={0}
left={0}
bottom={0}
w={`${sliderWidth}px`}
onClick={onClose}
/>
<Flex
zIndex={3}
flexDirection={'column'}
position={'absolute'}
top={'10px'}
left={0}
pt={'20px'}
pb={4}
h={isOpen ? 'calc(100% - 20px)' : '0'}
w={isOpen ? ['100%', `${sliderWidth}px`] : '0'}
bg={'white'}
boxShadow={'3px 0 20px rgba(0,0,0,0.2)'}
borderRadius={'0 20px 20px 0'}
transition={'.2s ease'}
userSelect={'none'}
overflow={isOpen ? 'none' : 'hidden'}
>
<Box mb={2} pl={'20px'} pr={'10px'} whiteSpace={'nowrap'} overflow={'hidden'}>
<Flex flex={'1 0 0'} alignItems={'center'} gap={3}>
<RowTabs
list={[
{
icon: 'core/modules/basicNode',
label: t('core.module.template.Basic Node'),
value: TemplateTypeEnum.basic
},
{
icon: 'core/modules/systemPlugin',
label: t('core.module.template.System Plugin'),
value: TemplateTypeEnum.systemPlugin
},
{
icon: 'core/modules/teamPlugin',
label: t('core.module.template.Team Plugin'),
value: TemplateTypeEnum.teamPlugin
}
]}
py={'5px'}
value={templateType}
onChange={onChangeTab}
/>
{/* close icon */}
<IconButton
size={'sm'}
icon={<MyIcon name={'common/backFill'} w={'14px'} color={'myGray.700'} />}
w={'26px'}
h={'26px'}
borderColor={'myGray.300'}
variant={'grayBase'}
aria-label={''}
onClick={onClose}
/>
</Flex>
{templateType === TemplateTypeEnum.teamPlugin && (
<Flex mt={2} alignItems={'center'} h={10}>
<InputGroup mr={4} h={'full'}>
<InputLeftElement h={'full'} alignItems={'center'} display={'flex'}>
<MyIcon name={'common/searchLight'} w={'16px'} color={'myGray.500'} ml={3} />
</InputLeftElement>
<Input
h={'full'}
bg={'myGray.50'}
placeholder={t('plugin.Search plugin')}
onChange={debounce((e) => setSearchKey(e.target.value), 200)}
/>
</InputGroup>
<Box flex={1} />
<Flex
alignItems={'center'}
cursor={'pointer'}
_hover={{
color: 'primary.600'
}}
onClick={() => router.push('/plugin/list')}
>
<Box>去创建</Box>
<MyIcon name={'common/rightArrowLight'} w={'14px'} />
</Flex>
</Flex>
)}
{templateType === TemplateTypeEnum.teamPlugin && !searchKey && currentParent && (
<Flex alignItems={'center'} mt={2}>
<ParentPaths
paths={[currentParent]}
FirstPathDom={null}
onClick={() => {
setCurrentParent(undefined);
}}
fontSize="md"
/>
</Flex>
{templateType === TemplateTypeEnum.teamPlugin && (
<Flex mt={2} alignItems={'center'} h={10}>
<InputGroup mr={4} h={'full'}>
<InputLeftElement h={'full'} alignItems={'center'} display={'flex'}>
<MyIcon name={'common/searchLight'} w={'16px'} color={'myGray.500'} ml={3} />
</InputLeftElement>
<Input
h={'full'}
bg={'myGray.50'}
placeholder={t('plugin.Search plugin')}
onChange={debounce((e) => setSearchKey(e.target.value), 200)}
/>
</InputGroup>
<Box flex={1} />
<Flex
alignItems={'center'}
cursor={'pointer'}
_hover={{
color: 'primary.600'
}}
onClick={() => router.push('/plugin/list')}
>
<Box>去创建</Box>
<MyIcon name={'common/rightArrowLight'} w={'14px'} />
</Flex>
</Flex>
)}
{templateType === TemplateTypeEnum.teamPlugin && !searchKey && currentParent && (
<Flex alignItems={'center'} mt={2}>
<ParentPaths
paths={[currentParent]}
FirstPathDom={null}
onClick={() => {
setCurrentParent(undefined);
}}
fontSize="md"
/>
</Flex>
)}
</Box>
<RenderList
templates={parseTemplates}
onClose={onClose}
currentParent={currentParent}
setCurrentParent={setCurrentParent}
/>
</Flex>
</>
);
}, [
currentParent,
isOpen,
onChangeTab,
onClose,
router,
searchKey,
t,
templateType,
templatesString
]);
return Render;
)}
</Box>
<RenderList
templates={templates}
onClose={onClose}
currentParent={currentParent}
setCurrentParent={setCurrentParent}
/>
</Flex>
</>
);
};
export default React.memo(NodeTemplatesModal);
@@ -276,7 +255,8 @@ const RenderList = React.memo(function RenderList({
const { x, y, zoom } = useViewport();
const { setLoading } = useSystemStore();
const { toast } = useToast();
const { reactFlowWrapper, setNodes } = useFlowProviderStore();
const reactFlowWrapper = useContextSelector(WorkflowContext, (v) => v.reactFlowWrapper);
const setNodes = useContextSelector(WorkflowContext, (v) => v.setNodes);
const formatTemplates = useMemo<nodeTemplateListType>(() => {
const copy: nodeTemplateListType = JSON.parse(JSON.stringify(moduleTemplatesList));

8
projects/app/src/components/core/workflow/Flow/components/ButtonEdge.tsx
View File

@@ -1,12 +1,16 @@
import React, { useCallback, useMemo } from 'react';
import { BezierEdge, getBezierPath, EdgeLabelRenderer, EdgeProps } from 'reactflow';
import { useFlowProviderStore } from '../FlowProvider';
import { Flex } from '@chakra-ui/react';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { NodeOutputKeyEnum, RuntimeEdgeStatusEnum } from '@fastgpt/global/core/workflow/constants';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../context';
const ButtonEdge = (props: EdgeProps) => {
const { nodes, setEdges, workflowDebugData } = useFlowProviderStore();
const nodes = useContextSelector(WorkflowContext, (v) => v.nodes);
const setEdges = useContextSelector(WorkflowContext, (v) => v.setEdges);
const workflowDebugData = useContextSelector(WorkflowContext, (v) => v.workflowDebugData);
const {
id,
sourceX,

8
projects/app/src/components/core/workflow/Flow/hooks/useDebug.tsx
View File

@@ -2,7 +2,6 @@ import { storeNodes2RuntimeNodes } from '@fastgpt/global/core/workflow/runtime/u
import { StoreNodeItemType } from '@fastgpt/global/core/workflow/type';
import { RuntimeEdgeItemType, StoreEdgeItemType } from '@fastgpt/global/core/workflow/type/edge';
import { useCallback, useState } from 'react';
import { getWorkflowStore, useFlowProviderStore } from '../FlowProvider';
import { checkWorkflowNodeAndConnection } from '@/web/core/workflow/utils';
import { useTranslation } from 'next-i18next';
import { useToast } from '@fastgpt/web/hooks/useToast';
@@ -25,6 +24,8 @@ import {
import { useForm } from 'react-hook-form';
import { WorkflowIOValueTypeEnum } from '@fastgpt/global/core/workflow/constants';
import { checkInputIsReference } from '@fastgpt/global/core/workflow/utils';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext, getWorkflowStore } from '../../context';
const MyRightDrawer = dynamic(
() => import('@fastgpt/web/components/common/MyDrawer/MyRightDrawer')
@@ -35,7 +36,10 @@ export const useDebug = () => {
const { t } = useTranslation();
const { toast } = useToast();
const { edges, setNodes, onStartNodeDebug, onUpdateNodeError } = useFlowProviderStore();
const setNodes = useContextSelector(WorkflowContext, (v) => v.setNodes);
const onUpdateNodeError = useContextSelector(WorkflowContext, (v) => v.onUpdateNodeError);
const edges = useContextSelector(WorkflowContext, (v) => v.edges);
const onStartNodeDebug = useContextSelector(WorkflowContext, (v) => v.onStartNodeDebug);
const [runtimeNodeId, setRuntimeNodeId] = useState<string>();
const [runtimeNodes, setRuntimeNodes] = useState<RuntimeNodeItemType[]>();

6
projects/app/src/components/core/workflow/Flow/hooks/useKeyboard.tsx
View File

@@ -1,14 +1,15 @@
import { useCallback, useEffect, useState } from 'react';
import { getWorkflowStore, useFlowProviderStore } from '../FlowProvider';
import { getNanoid } from '@fastgpt/global/common/string/tools';
import { useCopyData } from '@/web/common/hooks/useCopyData';
import { useTranslation } from 'next-i18next';
import { Node } from 'reactflow';
import { FlowNodeItemType } from '@fastgpt/global/core/workflow/type';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext, getWorkflowStore } from '../../context';
export const useKeyboard = () => {
const { t } = useTranslation();
const { setNodes } = useFlowProviderStore();
const setNodes = useContextSelector(WorkflowContext, (v) => v.setNodes);
const { copyData } = useCopyData();
const [isDowningCtrl, setIsDowningCtrl] = useState(false);
@@ -29,6 +30,7 @@ export const useKeyboard = () => {
const onCopy = useCallback(async () => {
if (hasInputtingElement()) return;
const { nodes } = await getWorkflowStore();
const selectedNodes = nodes.filter(
(node) => node.selected && !node.data?.isError && node.data?.unique !== true
);

20
projects/app/src/components/core/workflow/Flow/index.tsx
View File

@@ -21,7 +21,6 @@ import dynamic from 'next/dynamic';
import ButtonEdge from './components/ButtonEdge';
import NodeTemplatesModal from './NodeTemplatesModal';
import { useFlowProviderStore } from './FlowProvider';
import 'reactflow/dist/style.css';
import { useToast } from '@fastgpt/web/hooks/useToast';
@@ -32,6 +31,8 @@ import MyTooltip from '@/components/MyTooltip';
import { connectionLineStyle, defaultEdgeOptions } from '../constants';
import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
import { useKeyboard } from './hooks/useKeyboard';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../context';
const NodeSimple = dynamic(() => import('./nodes/NodeSimple'));
const nodeTypes: Record<`${FlowNodeTypeEnum}`, any> = {
@@ -71,16 +72,13 @@ const Container = React.memo(function Container() {
});
const { isDowningCtrl } = useKeyboard();
const {
reactFlowWrapper,
nodes,
onNodesChange,
edges,
setEdges,
onEdgesChange,
setConnectingEdge
} = useFlowProviderStore();
const setConnectingEdge = useContextSelector(WorkflowContext, (v) => v.setConnectingEdge);
const reactFlowWrapper = useContextSelector(WorkflowContext, (v) => v.reactFlowWrapper);
const nodes = useContextSelector(WorkflowContext, (v) => v.nodes);
const onNodesChange = useContextSelector(WorkflowContext, (v) => v.onNodesChange);
const edges = useContextSelector(WorkflowContext, (v) => v.edges);
const setEdges = useContextSelector(WorkflowContext, (v) => v.setEdges);
const onEdgesChange = useContextSelector(WorkflowContext, (v) => v.onEdgesChange);
/* node */
const handleNodesChange = useCallback(

7
projects/app/src/components/core/workflow/Flow/nodes/NodeAnswer.tsx
View File

@@ -4,15 +4,16 @@ import NodeCard from './render/NodeCard';
import { FlowNodeItemType } from '@fastgpt/global/core/workflow/type/index.d';
import Container from '../components/Container';
import RenderInput from './render/RenderInput';
import { useFlowProviderStore } from '../FlowProvider';
import RenderToolInput from './render/RenderToolInput';
import { useTranslation } from 'next-i18next';
import IOTitle from '../components/IOTitle';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../context';
const NodeAnswer = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
const { t } = useTranslation();
const { nodeId, inputs, outputs } = data;
const { splitToolInputs } = useFlowProviderStore();
const { nodeId, inputs } = data;
const splitToolInputs = useContextSelector(WorkflowContext, (ctx) => ctx.splitToolInputs);
const { toolInputs, commonInputs } = splitToolInputs(inputs, nodeId);
return (

6
projects/app/src/components/core/workflow/Flow/nodes/NodeCQNode.tsx
View File

@@ -11,16 +11,16 @@ import { NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
import { useTranslation } from 'next-i18next';
import MyTooltip from '@/components/MyTooltip';
import { FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io.d';
import { useFlowProviderStore } from '../FlowProvider';
import { getNanoid } from '@fastgpt/global/common/string/tools';
import { SourceHandle } from './render/Handle';
import IOTitle from '../components/IOTitle';
import { getHandleId } from '@fastgpt/global/core/workflow/utils';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../context';
const NodeCQNode = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
const { t } = useTranslation();
const { nodeId, inputs } = data;
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const CustomComponent = useMemo(
() => ({

6
projects/app/src/components/core/workflow/Flow/nodes/NodeDatasetConcat.tsx
View File

@@ -9,19 +9,21 @@ import { useTranslation } from 'next-i18next';
import { SmallAddIcon } from '@chakra-ui/icons';
import { WorkflowIOValueTypeEnum, NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
import { getOneQuoteInputTemplate } from '@fastgpt/global/core/workflow/template/system/datasetConcat';
import { useFlowProviderStore } from '../FlowProvider';
import { FlowNodeTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import MySlider from '@/components/Slider';
import { FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io.d';
import RenderOutput from './render/RenderOutput';
import IOTitle from '../components/IOTitle';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../context';
const NodeDatasetConcat = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
const { t } = useTranslation();
const { llmModelList } = useSystemStore();
const { nodeList, onChangeNode } = useFlowProviderStore();
const { nodeId, inputs, outputs } = data;
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const quotes = useMemo(
() => inputs.filter((item) => item.valueType === WorkflowIOValueTypeEnum.datasetQuote),

10
projects/app/src/components/core/workflow/Flow/nodes/NodeExtract/index.tsx
View File

@@ -26,7 +26,6 @@ import ExtractFieldModal, { defaultField } from './ExtractFieldModal';
import { NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
import { FlowNodeOutputTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
import { WorkflowIOValueTypeEnum } from '@fastgpt/global/core/workflow/constants';
import { useFlowProviderStore } from '../../FlowProvider';
import RenderToolInput from '../render/RenderToolInput';
import {
FlowNodeInputItemType,
@@ -34,12 +33,17 @@ import {
} from '@fastgpt/global/core/workflow/type/io.d';
import { getNanoid } from '@fastgpt/global/common/string/tools';
import IOTitle from '../../components/IOTitle';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../../context';
const NodeExtract = ({ data }: NodeProps<FlowNodeItemType>) => {
const { inputs, outputs, nodeId } = data;
const { splitToolInputs, onChangeNode } = useFlowProviderStore();
const { toolInputs, commonInputs } = splitToolInputs(inputs, nodeId);
const { t } = useTranslation();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const splitToolInputs = useContextSelector(WorkflowContext, (ctx) => ctx.splitToolInputs);
const { toolInputs, commonInputs } = splitToolInputs(inputs, nodeId);
const [editExtractFiled, setEditExtractField] = useState<ContextExtractAgentItemType>();
const CustomComponent = useMemo(

6
projects/app/src/components/core/workflow/Flow/nodes/NodeHttp/CurlImportModal.tsx
View File

@@ -7,7 +7,8 @@ import { FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io.d';
import { useToast } from '@fastgpt/web/hooks/useToast';
import { useForm } from 'react-hook-form';
import parse from '@bany/curl-to-json';
import { useFlowProviderStore } from '../../FlowProvider';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../../context';
type RequestMethod = 'get' | 'post' | 'put' | 'delete' | 'patch';
const methodMap: { [K in RequestMethod]: string } = {
@@ -28,7 +29,8 @@ const CurlImportModal = ({
onClose: () => void;
}) => {
const { t } = useTranslation();
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const { register, handleSubmit } = useForm({
defaultValues: {
curlContent: ''

22
projects/app/src/components/core/workflow/Flow/nodes/NodeHttp/index.tsx
View File

@@ -20,7 +20,6 @@ import {
useDisclosure
} from '@chakra-ui/react';
import { NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
import { useFlowProviderStore } from '../../FlowProvider';
import { useTranslation } from 'next-i18next';
import Tabs from '@/components/Tabs';
import MyIcon from '@fastgpt/web/components/common/Icon';
@@ -41,6 +40,9 @@ import MySelect from '@fastgpt/web/components/common/MySelect';
import RenderToolInput from '../render/RenderToolInput';
import IOTitle from '../../components/IOTitle';
import { getSystemVariables } from '@/web/core/app/utils';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../../context';
import { getWorkflowGlobalVariables } from '@/web/core/workflow/utils';
const CurlImportModal = dynamic(() => import('./CurlImportModal'));
export const HttpHeaders = [
@@ -105,7 +107,7 @@ const RenderHttpMethodAndUrl = React.memo(function RenderHttpMethodAndUrl({
const { t } = useTranslation();
const { toast } = useToast();
const [_, startSts] = useTransition();
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const { isOpen: isOpenCurl, onOpen: onOpenCurl, onClose: onCloseCurl } = useDisclosure();
@@ -277,7 +279,7 @@ export function RenderHttpProps({
}) {
const { t } = useTranslation();
const [selectedTab, setSelectedTab] = useState(TabEnum.params);
const { nodeList } = useFlowProviderStore();
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
const requestMethods = inputs.find((item) => item.key === NodeInputKeyEnum.httpMethod)?.value;
const params = inputs.find((item) => item.key === NodeInputKeyEnum.httpParams);
@@ -289,11 +291,7 @@ export function RenderHttpProps({
// get variable
const variables = useMemo(() => {
const globalVariables = formatEditorVariablePickerIcon(
splitGuideModule(getGuideModule(nodeList))?.variableModules || []
);
const systemVariables = getSystemVariables(t);
const globalVariables = getWorkflowGlobalVariables(nodeList, t);
const moduleVariables = formatEditorVariablePickerIcon(
inputs
@@ -304,7 +302,7 @@ export function RenderHttpProps({
}))
);
return [...moduleVariables, ...globalVariables, ...systemVariables];
return [...moduleVariables, ...globalVariables];
}, [inputs, nodeList, t]);
const variableText = useMemo(() => {
@@ -407,7 +405,7 @@ const RenderForm = ({
}) => {
const { t } = useTranslation();
const { toast } = useToast();
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const [list, setList] = useState<PropsArrType[]>(input.value || []);
const [updateTrigger, setUpdateTrigger] = useState(false);
@@ -601,7 +599,7 @@ const RenderJson = ({
variables: EditorVariablePickerType[];
}) => {
const { t } = useTranslation();
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const [_, startSts] = useTransition();
const Render = useMemo(() => {
@@ -650,7 +648,7 @@ const RenderPropsItem = ({ text, num }: { text: string; num: number }) => {
const NodeHttp = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
const { t } = useTranslation();
const { nodeId, inputs, outputs } = data;
const { splitToolInputs } = useFlowProviderStore();
const splitToolInputs = useContextSelector(WorkflowContext, (v) => v.splitToolInputs);
const { toolInputs, commonInputs, isTool } = splitToolInputs(inputs, nodeId);
const CustomComponents = useMemo(

9
projects/app/src/components/core/workflow/Flow/nodes/NodeIfElse.tsx
View File

@@ -1,7 +1,6 @@
import React, { useCallback, useMemo } from 'react';
import NodeCard from './render/NodeCard';
import { useTranslation } from 'next-i18next';
import { useFlowProviderStore } from '../FlowProvider';
import { Box, Button, Flex, background } from '@chakra-ui/react';
import { SmallAddIcon } from '@chakra-ui/icons';
import MyIcon from '@fastgpt/web/components/common/Icon';
@@ -25,11 +24,13 @@ import {
import { stringConditionList } from '@fastgpt/global/core/workflow/template/system/ifElse/constant';
import MySelect from '@fastgpt/web/components/common/MySelect';
import MyInput from '@/components/MyInput';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../context';
const NodeIfElse = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
const { t } = useTranslation();
const { nodeId, inputs = [], outputs } = data;
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const condition = useMemo(
() =>
@@ -274,7 +275,7 @@ const ConditionSelect = ({
variable?: ReferenceValueProps;
onSelect: (e: VariableConditionEnum) => void;
}) => {
const { nodeList } = useFlowProviderStore();
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
// get condition type
const valueType = useMemo(() => {
@@ -337,7 +338,7 @@ const ConditionValueInput = ({
condition?: VariableConditionEnum;
onChange: (e: string) => void;
}) => {
const { nodeList } = useFlowProviderStore();
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
// get value type
const valueType = useMemo(() => {

7
projects/app/src/components/core/workflow/Flow/nodes/NodeLaf.tsx
View File

@@ -5,7 +5,6 @@ import { FlowNodeItemType } from '@fastgpt/global/core/workflow/type/index.d';
import Container from '../components/Container';
import { Box, Button, Center, Flex, useDisclosure } from '@chakra-ui/react';
import { WorkflowIOValueTypeEnum, NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
import { useFlowProviderStore } from '../FlowProvider';
import { useTranslation } from 'next-i18next';
import { getLafAppDetail } from '@/web/support/laf/api';
import MySelect from '@fastgpt/web/components/common/MySelect';
@@ -32,6 +31,8 @@ import {
} from '@fastgpt/global/core/workflow/type/io';
import { getNanoid } from '@fastgpt/global/common/string/tools';
import IOTitle from '../components/IOTitle';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../context';
const LafAccountModal = dynamic(() => import('@/components/support/laf/LafAccountModal'));
@@ -42,7 +43,7 @@ const NodeLaf = (props: NodeProps<FlowNodeItemType>) => {
const { data, selected } = props;
const { nodeId, inputs, outputs } = data;
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const requestUrl = inputs.find((item) => item.key === NodeInputKeyEnum.httpReqUrl);
@@ -293,7 +294,7 @@ const ConfigLaf = () => {
const RenderIO = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
const { t } = useTranslation();
const { nodeId, inputs, outputs } = data;
const { splitToolInputs } = useFlowProviderStore();
const splitToolInputs = useContextSelector(WorkflowContext, (ctx) => ctx.splitToolInputs);
const { commonInputs, toolInputs, isTool } = splitToolInputs(inputs, nodeId);
return (

6
projects/app/src/components/core/workflow/Flow/nodes/NodePluginInput.tsx
View File

@@ -2,7 +2,6 @@ import React, { useMemo, useState } from 'react';
import { NodeProps } from 'reactflow';
import NodeCard from './render/NodeCard';
import { FlowNodeItemType } from '@fastgpt/global/core/workflow/type/index.d';
import dynamic from 'next/dynamic';
import { Box, Button, Flex } from '@chakra-ui/react';
import { SmallAddIcon } from '@chakra-ui/icons';
import {
@@ -17,7 +16,6 @@ import type {
EditNodeFieldType
} from '@fastgpt/global/core/workflow/node/type.d';
import { useTranslation } from 'next-i18next';
import { useFlowProviderStore } from '../FlowProvider';
import { WorkflowIOValueTypeEnum } from '@fastgpt/global/core/workflow/constants';
import {
FlowNodeInputMap,
@@ -26,6 +24,8 @@ import {
} from '@fastgpt/global/core/workflow/node/constant';
import { FlowValueTypeMap } from '@/web/core/workflow/constants/dataType';
import VariableTable from '../nodes/render/VariableTable';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../context';
const defaultCreateField: EditNodeFieldType = {
label: '',
@@ -50,7 +50,7 @@ const NodePluginInput = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
const { t } = useTranslation();
const { nodeId, inputs, outputs } = data;
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const [createField, setCreateField] = useState<EditNodeFieldType>();
const [editField, setEditField] = useState<EditNodeFieldType>();

5
projects/app/src/components/core/workflow/Flow/nodes/NodePluginOutput.tsx
View File

@@ -11,8 +11,9 @@ import { EditInputFieldMapType, EditNodeFieldType } from '@fastgpt/global/core/w
import { FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io';
import { WorkflowIOValueTypeEnum } from '@fastgpt/global/core/workflow/constants';
import { useTranslation } from 'next-i18next';
import { useFlowProviderStore } from '../FlowProvider';
import RenderInput from './render/RenderInput';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../context';
const FieldEditModal = dynamic(() => import('./render/FieldEditModal'));
@@ -31,7 +32,7 @@ const createEditField: EditInputFieldMapType = {
const NodePluginOutput = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
const { t } = useTranslation();
const { nodeId, inputs } = data;
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const [createField, setCreateField] = useState<EditNodeFieldType>();

5
projects/app/src/components/core/workflow/Flow/nodes/NodeSimple.tsx
View File

@@ -7,9 +7,10 @@ import RenderInput from './render/RenderInput';
import RenderOutput from './render/RenderOutput';
import RenderToolInput from './render/RenderToolInput';
import { useTranslation } from 'next-i18next';
import { useFlowProviderStore } from '../FlowProvider';
import { FlowNodeOutputTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
import IOTitle from '../components/IOTitle';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../context';
const NodeSimple = ({
data,
@@ -18,7 +19,7 @@ const NodeSimple = ({
maxW
}: NodeProps<FlowNodeItemType> & { minW?: string | number; maxW?: string | number }) => {
const { t } = useTranslation();
const { splitToolInputs } = useFlowProviderStore();
const splitToolInputs = useContextSelector(WorkflowContext, (ctx) => ctx.splitToolInputs);
const { nodeId, inputs, outputs } = data;
const { toolInputs, commonInputs } = splitToolInputs(inputs, nodeId);

59
projects/app/src/components/core/workflow/Flow/nodes/NodeSystemConfig.tsx
View File

@@ -1,24 +1,31 @@
import React, { useCallback, useMemo, useTransition } from 'react';
import React, { useMemo, useTransition } from 'react';
import { NodeProps } from 'reactflow';
import { Box, Flex, Textarea, useTheme } from '@chakra-ui/react';
import { QuestionOutlineIcon } from '@chakra-ui/icons';
import { FlowNodeItemType, StoreNodeItemType } from '@fastgpt/global/core/workflow/type/index.d';
import { NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
import { NodeInputKeyEnum, WorkflowIOValueTypeEnum } from '@fastgpt/global/core/workflow/constants';
import { welcomeTextTip } from '@fastgpt/global/core/workflow/template/tip';
import type { VariableItemType } from '@fastgpt/global/core/app/type.d';
import QGSwitch from '@/components/core/app/QGSwitch';
import TTSSelect from '@/components/core/app/TTSSelect';
import WhisperConfig from '@/components/core/app/WhisperConfig';
import { splitGuideModule } from '@fastgpt/global/core/workflow/utils';
import { useTranslation } from 'next-i18next';
import { TTSTypeEnum } from '@/constants/app';
import { useFlowProviderStore } from '../FlowProvider';
import VariableEdit from '../../../app/VariableEdit';
import MyIcon from '@fastgpt/web/components/common/Icon';
import MyTooltip from '@/components/MyTooltip';
import NodeCard from './render/NodeCard';
import ScheduledTriggerConfig from '@/components/core/app/ScheduledTriggerConfig';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../context';
import { VariableItemType } from '@fastgpt/global/core/app/type';
import { useMemoizedFn } from 'ahooks';
import VariableEdit from '@/components/core/app/VariableEdit';
import {
FlowNodeOutputTypeEnum,
FlowNodeTypeEnum
} from '@fastgpt/global/core/workflow/node/constant';
import { FlowNodeOutputItemType } from '@fastgpt/global/core/workflow/type/io';
const NodeUserGuide = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
const theme = useTheme();
@@ -38,10 +45,10 @@ const NodeUserGuide = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
>
<Box px={4} py={'10px'} position={'relative'} borderRadius={'md'} className="nodrag">
<WelcomeText data={data} />
<Box pt={4} pb={2}>
<Box pt={4}>
<ChatStartVariable data={data} />
</Box>
<Box pt={3} borderTop={theme.borders.base}>
<Box mt={3} pt={3} borderTop={theme.borders.base}>
<TTSGuide data={data} />
</Box>
<Box mt={3} pt={3} borderTop={theme.borders.base}>
@@ -65,7 +72,7 @@ function WelcomeText({ data }: { data: FlowNodeItemType }) {
const { t } = useTranslation();
const { inputs, nodeId } = data;
const [, startTst] = useTransition();
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const welcomeText = inputs.find((item) => item.key === NodeInputKeyEnum.welcomeText);
@@ -108,7 +115,7 @@ function WelcomeText({ data }: { data: FlowNodeItemType }) {
function ChatStartVariable({ data }: { data: FlowNodeItemType }) {
const { inputs, nodeId } = data;
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const variables = useMemo(
() =>
@@ -117,27 +124,25 @@ function ChatStartVariable({ data }: { data: FlowNodeItemType }) {
[inputs]
);
const updateVariables = useCallback(
(value: VariableItemType[]) => {
onChangeNode({
nodeId,
key: NodeInputKeyEnum.variables,
type: 'updateInput',
value: {
...inputs.find((item) => item.key === NodeInputKeyEnum.variables),
value
}
});
},
[inputs, nodeId, onChangeNode]
);
const updateVariables = useMemoizedFn((value: VariableItemType[]) => {
// update system config node
onChangeNode({
nodeId,
key: NodeInputKeyEnum.variables,
type: 'updateInput',
value: {
...inputs.find((item) => item.key === NodeInputKeyEnum.variables),
value
}
});
});
return <VariableEdit variables={variables} onChange={(e) => updateVariables(e)} />;
}
function QuestionGuide({ data }: { data: FlowNodeItemType }) {
const { inputs, nodeId } = data;
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const questionGuide = useMemo(
() =>
@@ -168,7 +173,7 @@ function QuestionGuide({ data }: { data: FlowNodeItemType }) {
function TTSGuide({ data }: { data: FlowNodeItemType }) {
const { inputs, nodeId } = data;
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const { ttsConfig } = splitGuideModule({ inputs } as StoreNodeItemType);
return (
@@ -191,7 +196,7 @@ function TTSGuide({ data }: { data: FlowNodeItemType }) {
function WhisperGuide({ data }: { data: FlowNodeItemType }) {
const { inputs, nodeId } = data;
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const { ttsConfig, whisperConfig } = splitGuideModule({ inputs } as StoreNodeItemType);
return (
@@ -215,7 +220,7 @@ function WhisperGuide({ data }: { data: FlowNodeItemType }) {
function ScheduledTrigger({ data }: { data: FlowNodeItemType }) {
const { inputs, nodeId } = data;
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const { scheduledTriggerConfig } = splitGuideModule({ inputs } as StoreNodeItemType);
return (

26
projects/app/src/components/core/workflow/Flow/nodes/NodeWorkflowStart.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useMemo } from 'react';
import { NodeProps } from 'reactflow';
import NodeCard from './render/NodeCard';
import { FlowNodeItemType } from '@fastgpt/global/core/workflow/type/index.d';
@@ -6,10 +6,30 @@ import Container from '../components/Container';
import RenderOutput from './render/RenderOutput';
import IOTitle from '../components/IOTitle';
import { useTranslation } from 'next-i18next';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../context';
import { useCreation } from 'ahooks';
import { getWorkflowGlobalVariables } from '@/web/core/workflow/utils';
import { FlowNodeOutputItemType } from '@fastgpt/global/core/workflow/type/io';
import { FlowNodeOutputTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
import { WorkflowIOValueTypeEnum } from '@fastgpt/global/core/workflow/constants';
const NodeStart = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
const { t } = useTranslation();
const { nodeId, outputs } = data;
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
const variablesOutputs = useCreation(() => {
const variables = getWorkflowGlobalVariables(nodeList, t);
return variables.map<FlowNodeOutputItemType>((item) => ({
id: item.key,
type: FlowNodeOutputTypeEnum.static,
key: item.key,
valueType: item.valueType || WorkflowIOValueTypeEnum.any,
label: item.label
}));
}, [nodeList, t]);
return (
<NodeCard
@@ -26,6 +46,10 @@ const NodeStart = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
<IOTitle text={t('common.Output')} />
<RenderOutput nodeId={nodeId} flowOutputList={outputs} />
</Container>
<Container>
<IOTitle text={t('core.module.Variable')} />
<RenderOutput nodeId={nodeId} flowOutputList={variablesOutputs} />
</Container>
</NodeCard>
);
};

10
projects/app/src/components/core/workflow/Flow/nodes/render/Handle/ConnectionHandle.tsx
View File

@@ -1,12 +1,15 @@
import React, { useMemo } from 'react';
import { Position } from 'reactflow';
import { useFlowProviderStore } from '../../../FlowProvider';
import { SourceHandle, TargetHandle } from '.';
import { getHandleId } from '@fastgpt/global/core/workflow/utils';
import { NodeOutputKeyEnum } from '@fastgpt/global/core/workflow/constants';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
export const ConnectionSourceHandle = ({ nodeId }: { nodeId: string }) => {
const { nodeList, edges, connectingEdge } = useFlowProviderStore();
const connectingEdge = useContextSelector(WorkflowContext, (ctx) => ctx.connectingEdge);
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
const edges = useContextSelector(WorkflowContext, (v) => v.edges);
const node = useMemo(() => nodeList.find((node) => node.nodeId === nodeId), [nodeList, nodeId]);
@@ -102,7 +105,8 @@ export const ConnectionSourceHandle = ({ nodeId }: { nodeId: string }) => {
};
export const ConnectionTargetHandle = ({ nodeId }: { nodeId: string }) => {
const { nodeList, connectingEdge } = useFlowProviderStore();
const connectingEdge = useContextSelector(WorkflowContext, (ctx) => ctx.connectingEdge);
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
const node = useMemo(() => nodeList.find((node) => node.nodeId === nodeId), [nodeList, nodeId]);

15
projects/app/src/components/core/workflow/Flow/nodes/render/Handle/ToolHandle.tsx
View File

@@ -1,15 +1,12 @@
import MyTooltip from '@/components/MyTooltip';
import { FlowValueTypeMap } from '@/web/core/workflow/constants/dataType';
import { Box, BoxProps } from '@chakra-ui/react';
import {
WorkflowIOValueTypeEnum,
NodeOutputKeyEnum
} from '@fastgpt/global/core/workflow/constants';
import { NodeOutputKeyEnum } from '@fastgpt/global/core/workflow/constants';
import { useTranslation } from 'next-i18next';
import { Connection, Handle, Position } from 'reactflow';
import { useFlowProviderStore } from '../../../FlowProvider';
import { useCallback, useMemo } from 'react';
import { getHandleId } from '@fastgpt/global/core/workflow/utils';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
const handleSize = '14px';
type ToolHandleProps = BoxProps & {
@@ -17,7 +14,9 @@ type ToolHandleProps = BoxProps & {
};
export const ToolTargetHandle = ({ nodeId }: ToolHandleProps) => {
const { t } = useTranslation();
const { connectingEdge, edges } = useFlowProviderStore();
const connectingEdge = useContextSelector(WorkflowContext, (ctx) => ctx.connectingEdge);
const edges = useContextSelector(WorkflowContext, (v) => v.edges);
const handleId = NodeOutputKeyEnum.selectedTools;
const connected = edges.some((edge) => edge.target === nodeId && edge.targetHandle === handleId);
@@ -62,7 +61,7 @@ export const ToolTargetHandle = ({ nodeId }: ToolHandleProps) => {
export const ToolSourceHandle = ({ nodeId }: ToolHandleProps) => {
const { t } = useTranslation();
const { setEdges } = useFlowProviderStore();
const setEdges = useContextSelector(WorkflowContext, (v) => v.setEdges);
/* onConnect edge, delete tool input and switch */
const onConnect = useCallback(

20
projects/app/src/components/core/workflow/Flow/nodes/render/Handle/index.tsx
View File

@@ -1,9 +1,10 @@
import React, { useMemo } from 'react';
import { Handle, Position } from 'reactflow';
import { useFlowProviderStore } from '../../../FlowProvider';
import { SmallAddIcon } from '@chakra-ui/icons';
import { handleHighLightStyle, sourceCommonStyle, handleConnectedStyle, handleSize } from './style';
import { NodeOutputKeyEnum } from '@fastgpt/global/core/workflow/constants';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
type Props = {
nodeId: string;
@@ -23,7 +24,11 @@ const MySourceHandle = React.memo(function MySourceHandle({
highlightStyle: Record<string, any>;
connectedStyle: Record<string, any>;
}) {
const { nodes, hoverNodeId, edges, connectingEdge } = useFlowProviderStore();
const connectingEdge = useContextSelector(WorkflowContext, (ctx) => ctx.connectingEdge);
const edges = useContextSelector(WorkflowContext, (v) => v.edges);
const nodes = useContextSelector(WorkflowContext, (v) => v.nodes);
const hoverNodeId = useContextSelector(WorkflowContext, (v) => v.hoverNodeId);
const node = useMemo(() => nodes.find((node) => node.data.nodeId === nodeId), [nodes, nodeId]);
const connected = edges.some((edge) => edge.sourceHandle === handleId);
@@ -136,8 +141,10 @@ const MyTargetHandle = React.memo(function MyTargetHandle({
highlightStyle: Record<string, any>;
connectedStyle: Record<string, any>;
}) {
const { nodeList, edges, connectingEdge } = useFlowProviderStore();
const connectingEdge = useContextSelector(WorkflowContext, (ctx) => ctx.connectingEdge);
const edges = useContextSelector(WorkflowContext, (v) => v.edges);
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
const node = useMemo(() => nodeList.find((node) => node.nodeId === nodeId), [nodeList, nodeId]);
const connected = edges.some((edge) => edge.targetHandle === handleId);
const connectedEdges = edges.filter((edge) => edge.target === nodeId);
@@ -194,12 +201,13 @@ const MyTargetHandle = React.memo(function MyTargetHandle({
return false;
}
if (connectingEdge?.handleId && !connectingEdge.handleId?.includes('source')) return false;
// Same source node
if (connectedEdges.some((item) => item.sourceHandle === connectingEdge?.handleId)) return false;
// Same source node
if (connectedEdges.some((item) => item.target === nodeId && item.targetHandle !== handleId))
return false;
return true;
}, [connectedEdges, connectingEdge?.handleId, edges, node, nodeId]);
}, [connectedEdges, connectingEdge?.handleId, edges, handleId, node, nodeId]);
const RenderHandle = useMemo(() => {
return (

93
projects/app/src/components/core/workflow/Flow/nodes/render/NodeCard.tsx
View File

@@ -6,7 +6,6 @@ import type { FlowNodeItemType } from '@fastgpt/global/core/workflow/type/index.
import { useTranslation } from 'next-i18next';
import { useEditTitle } from '@/web/common/hooks/useEditTitle';
import { useToast } from '@fastgpt/web/hooks/useToast';
import { useFlowProviderStore } from '../../FlowProvider';
import { FlowNodeTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
@@ -21,6 +20,8 @@ import { getPreviewPluginModule } from '@/web/core/plugin/api';
import { getErrText } from '@fastgpt/global/common/error/utils';
import { storeNode2FlowNode } from '@/web/core/workflow/utils';
import { getNanoid } from '@fastgpt/global/common/string/tools';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../../context';
type Props = FlowNodeItemType & {
children?: React.ReactNode | React.ReactNode[] | string;
@@ -55,7 +56,9 @@ const NodeCard = (props: Props) => {
pluginId
} = props;
const { nodeList, setHoverNodeId, onUpdateNodeError } = useFlowProviderStore();
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
const setHoverNodeId = useContextSelector(WorkflowContext, (v) => v.setHoverNodeId);
const onUpdateNodeError = useContextSelector(WorkflowContext, (v) => v.onUpdateNodeError);
const showToolHandle = useMemo(
() => isTool && !!nodeList.find((item) => item?.flowNodeType === FlowNodeTypeEnum.tools),
@@ -105,44 +108,40 @@ const NodeCard = (props: Props) => {
intro
]);
const Render = useMemo(() => {
return (
<Box
minW={minW}
maxW={maxW}
bg={'white'}
borderWidth={'1px'}
borderRadius={'md'}
boxShadow={'1'}
_hover={{
boxShadow: '4',
'& .controller-menu': {
display: 'flex'
},
'& .controller-debug': {
display: 'block'
return (
<Box
minW={minW}
maxW={maxW}
bg={'white'}
borderWidth={'1px'}
borderRadius={'md'}
boxShadow={'1'}
_hover={{
boxShadow: '4',
'& .controller-menu': {
display: 'flex'
},
'& .controller-debug': {
display: 'block'
}
}}
onMouseEnter={() => setHoverNodeId(nodeId)}
onMouseLeave={() => setHoverNodeId(undefined)}
{...(isError
? {
borderColor: 'red.500',
onMouseDownCapture: () => onUpdateNodeError(nodeId, false)
}
}}
onMouseEnter={() => setHoverNodeId(nodeId)}
onMouseLeave={() => setHoverNodeId(undefined)}
{...(isError
? {
borderColor: 'red.500',
onMouseDownCapture: () => onUpdateNodeError(nodeId, false)
}
: {
borderColor: selected ? 'primary.600' : 'borderColor.base'
})}
>
{Header}
{children}
<ConnectionSourceHandle nodeId={nodeId} />
<ConnectionTargetHandle nodeId={nodeId} />
</Box>
);
}, [Header, children, isError, maxW, minW, nodeId, onUpdateNodeError, selected, setHoverNodeId]);
return Render;
: {
borderColor: selected ? 'primary.600' : 'borderColor.base'
})}
>
{Header}
{children}
<ConnectionSourceHandle nodeId={nodeId} />
<ConnectionTargetHandle nodeId={nodeId} />
</Box>
);
};
export default React.memo(NodeCard);
@@ -180,7 +179,10 @@ const MenuRender = React.memo(function MenuRender({
type: 'delete'
});
const { setNodes, setEdges, onResetNode, onChangeNode } = useFlowProviderStore();
const setNodes = useContextSelector(WorkflowContext, (v) => v.setNodes);
const onResetNode = useContextSelector(WorkflowContext, (v) => v.onResetNode);
const setEdges = useContextSelector(WorkflowContext, (v) => v.setEdges);
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const onCopyNode = useCallback(
(nodeId: string) => {
@@ -383,7 +385,8 @@ const NodeIntro = React.memo(function NodeIntro({
intro?: string;
}) {
const { t } = useTranslation();
const { onChangeNode, splitToolInputs } = useFlowProviderStore();
const splitToolInputs = useContextSelector(WorkflowContext, (ctx) => ctx.splitToolInputs);
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const moduleIsTool = useMemo(() => {
const { isTool } = splitToolInputs([], nodeId);
@@ -442,8 +445,12 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({
debugResult: FlowNodeItemType['debugResult'];
}) {
const { t } = useTranslation();
const { onChangeNode, onStopNodeDebug, onNextNodeDebug, workflowDebugData } =
useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const onStopNodeDebug = useContextSelector(WorkflowContext, (v) => v.onStopNodeDebug);
const onNextNodeDebug = useContextSelector(WorkflowContext, (v) => v.onNextNodeDebug);
const workflowDebugData = useContextSelector(WorkflowContext, (v) => v.workflowDebugData);
const { openConfirm, ConfirmModal } = useConfirm({
content: t('core.workflow.Confirm stop debug')
});

8
projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/Label.tsx
View File

@@ -1,7 +1,6 @@
import { FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io.d';
import React, { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { useFlowProviderStore } from '../../../FlowProvider';
import { Box, Flex } from '@chakra-ui/react';
import MyTooltip from '@/components/MyTooltip';
import { QuestionOutlineIcon } from '@chakra-ui/icons';
@@ -13,17 +12,20 @@ import dynamic from 'next/dynamic';
import { EditNodeFieldType } from '@fastgpt/global/core/workflow/node/type';
import { FlowNodeInputTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
import ValueTypeLabel from '../ValueTypeLabel';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
const FieldEditModal = dynamic(() => import('../FieldEditModal'));
type Props = {
nodeId: string;
input: FlowNodeInputItemType;
mode?: 'app' | 'plugin';
};
const InputLabel = ({ nodeId, input }: Props) => {
const { t } = useTranslation();
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const {
description,
toolDescription,

7
projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/AddInputParam.tsx
View File

@@ -5,18 +5,21 @@ import { SmallAddIcon } from '@chakra-ui/icons';
import { useTranslation } from 'next-i18next';
import { EditNodeFieldType } from '@fastgpt/global/core/workflow/node/type';
import dynamic from 'next/dynamic';
import { useFlowProviderStore } from '../../../../FlowProvider';
import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
import { FlowNodeInputTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
import { FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io';
import Reference from './Reference';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
const FieldEditModal = dynamic(() => import('../../FieldEditModal'));
const AddInputParam = (props: RenderInputProps) => {
const { item, inputs, nodeId } = props;
const { t } = useTranslation();
const { onChangeNode, mode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const mode = useContextSelector(WorkflowContext, (ctx) => ctx.mode);
const inputValue = useMemo(() => (item.value || []) as FlowNodeInputItemType[], [item.value]);
const [editField, setEditField] = useState<EditNodeFieldType>();

23
projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/JsonEditor.tsx
View File

@@ -1,21 +1,22 @@
import React, { useCallback, useMemo } from 'react';
import type { RenderInputProps } from '../type';
import { useFlowProviderStore } from '../../../../FlowProvider';
import JSONEditor from '@fastgpt/web/components/common/Textarea/JsonEditor';
import {
formatEditorVariablePickerIcon,
getGuideModule,
splitGuideModule
} from '@fastgpt/global/core/workflow/utils';
import { formatEditorVariablePickerIcon } from '@fastgpt/global/core/workflow/utils';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
import { getWorkflowGlobalVariables } from '@/web/core/workflow/utils';
import { useCreation } from 'ahooks';
import { useTranslation } from 'next-i18next';
const JsonEditor = ({ inputs = [], item, nodeId }: RenderInputProps) => {
const { nodeList, onChangeNode } = useFlowProviderStore();
const { t } = useTranslation();
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
// get variable
const variables = useMemo(() => {
const globalVariables = formatEditorVariablePickerIcon(
splitGuideModule(getGuideModule(nodeList))?.variableModules || []
);
const variables = useCreation(() => {
const globalVariables = getWorkflowGlobalVariables(nodeList, t);
const moduleVariables = formatEditorVariablePickerIcon(
inputs
.filter((input) => input.canEdit)

5
projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/NumberInput.tsx
View File

@@ -7,10 +7,11 @@ import {
NumberInputField,
NumberInputStepper
} from '@chakra-ui/react';
import { useFlowProviderStore } from '../../../../FlowProvider';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
const NumberInputRender = ({ item, nodeId }: RenderInputProps) => {
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const Render = useMemo(() => {
return (

49
projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/Reference.tsx
View File

@@ -1,16 +1,19 @@
import React, { useCallback, useMemo } from 'react';
import type { RenderInputProps } from '../type';
import { Flex, Box, ButtonProps } from '@chakra-ui/react';
import { useFlowProviderStore } from '../../../../FlowProvider';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { computedNodeInputReference } from '@/web/core/workflow/utils';
import { useTranslation } from 'next-i18next';
import {
NodeOutputKeyEnum,
VARIABLE_NODE_ID,
WorkflowIOValueTypeEnum
} from '@fastgpt/global/core/workflow/constants';
import type { ReferenceValueProps } from '@fastgpt/global/core/workflow/type/io';
import dynamic from 'next/dynamic';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
import { FlowNodeTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
const MultipleRowSelect = dynamic(
() => import('@fastgpt/web/components/common/MySelect/MultipleRowSelect')
@@ -34,21 +37,37 @@ type SelectProps = {
const Reference = ({ item, nodeId }: RenderInputProps) => {
const { t } = useTranslation();
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
const onSelect = useCallback(
(e: any) => {
onChangeNode({
nodeId,
type: 'updateInput',
key: item.key,
value: {
...item,
value: e
}
});
const workflowStartNode = nodeList.find(
(node) => node.flowNodeType === FlowNodeTypeEnum.workflowStart
);
if (e[0] === workflowStartNode?.id && e[1] !== NodeOutputKeyEnum.userChatInput) {
onChangeNode({
nodeId,
type: 'updateInput',
key: item.key,
value: {
...item,
value: [VARIABLE_NODE_ID, e[1]]
}
});
} else {
onChangeNode({
nodeId,
type: 'updateInput',
key: item.key,
value: {
...item,
value: e
}
});
}
},
[item, nodeId, onChangeNode]
[item, nodeId, nodeList, onChangeNode]
);
const { referenceList, formatValue } = useReference({
@@ -79,13 +98,15 @@ export const useReference = ({
value?: any;
}) => {
const { t } = useTranslation();
const { nodeList, edges } = useFlowProviderStore();
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
const edges = useContextSelector(WorkflowContext, (v) => v.edges);
const referenceList = useMemo(() => {
const sourceNodes = computedNodeInputReference({
nodeId,
nodes: nodeList,
edges: edges
edges: edges,
t
});
if (!sourceNodes) return [];

5
projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/Select.tsx
View File

@@ -1,10 +1,11 @@
import React, { useMemo } from 'react';
import type { RenderInputProps } from '../type';
import { useFlowProviderStore } from '../../../../FlowProvider';
import MySelect from '@fastgpt/web/components/common/MySelect';
import { WorkflowContext } from '@/components/core/workflow/context';
import { useContextSelector } from 'use-context-selector';
const SelectRender = ({ item, nodeId }: RenderInputProps) => {
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const Render = useMemo(() => {
return (

8
projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/SelectApp.tsx
View File

@@ -1,16 +1,18 @@
import React, { useMemo } from 'react';
import type { RenderInputProps } from '../type';
import { useFlowProviderStore } from '../../../../FlowProvider';
import { Box, Button, Flex, useDisclosure, useTheme } from '@chakra-ui/react';
import { SelectAppItemType } from '@fastgpt/global/core/workflow/type/index.d';
import Avatar from '@/components/Avatar';
import SelectAppModal from '../../../../SelectAppModal';
import { useTranslation } from 'next-i18next';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
const SelectAppRender = ({ item, nodeId }: RenderInputProps) => {
const { t } = useTranslation();
const theme = useTheme();
const { filterAppIds, onChangeNode } = useFlowProviderStore();
const filterAppIds = useContextSelector(WorkflowContext, (ctx) => ctx.filterAppIds);
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const {
isOpen: isOpenSelectApp,
@@ -20,7 +22,7 @@ const SelectAppRender = ({ item, nodeId }: RenderInputProps) => {
const value = item.value as SelectAppItemType | undefined;
const filterAppString = useMemo(() => filterAppIds.join(','), [filterAppIds]);
const filterAppString = useMemo(() => filterAppIds?.join(',') || '', [filterAppIds]);
const Render = useMemo(() => {
return (

9
projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/SelectDataset.tsx
View File

@@ -1,6 +1,5 @@
import React, { useEffect, useMemo, useState } from 'react';
import type { RenderInputProps } from '../type';
import { useFlowProviderStore } from '../../../../FlowProvider';
import { Box, Button, Flex, Grid, useDisclosure, useTheme } from '@chakra-ui/react';
import { useDatasetStore } from '@/web/core/dataset/store/dataset';
import { SelectedDatasetType } from '@fastgpt/global/core/workflow/api';
@@ -8,19 +7,19 @@ import Avatar from '@/components/Avatar';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'next-i18next';
import { DatasetSearchModeEnum } from '@fastgpt/global/core/dataset/constants';
import { FlowNodeTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
import { NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import dynamic from 'next/dynamic';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
const DatasetSelectModal = dynamic(() => import('@/components/core/app/DatasetSelectModal'));
const SelectDatasetRender = ({ inputs = [], item, nodeId }: RenderInputProps) => {
const { t } = useTranslation();
const theme = useTheme();
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const [data, setData] = useState({
searchMode: DatasetSearchModeEnum.embedding,
limit: 5,

7
projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/SelectDatasetParams.tsx
View File

@@ -1,6 +1,5 @@
import React, { useEffect, useMemo, useState } from 'react';
import type { RenderInputProps } from '../type';
import { useFlowProviderStore } from '../../../../FlowProvider';
import { Box, Button, Flex, useDisclosure } from '@chakra-ui/react';
import { useTranslation } from 'next-i18next';
import { DatasetSearchModeEnum } from '@fastgpt/global/core/dataset/constants';
@@ -10,9 +9,13 @@ import MyIcon from '@fastgpt/web/components/common/Icon';
import DatasetParamsModal, { DatasetParamsProps } from '@/components/core/app/DatasetParamsModal';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import SearchParamsTip from '@/components/core/dataset/SearchParamsTip';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
const SelectDatasetParam = ({ inputs = [], nodeId }: RenderInputProps) => {
const { nodeList, onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
const { t } = useTranslation();
const { llmModelList } = useSystemStore();

5
projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/SelectLLMModel.tsx
View File

@@ -3,11 +3,12 @@ import type { RenderInputProps } from '../type';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import { llmModelTypeFilterMap } from '@fastgpt/global/core/ai/constants';
import AIModelSelector from '@/components/Select/AIModelSelector';
import { useFlowProviderStore } from '../../../../FlowProvider';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
const SelectAiModelRender = ({ item, nodeId }: RenderInputProps) => {
const { llmModelList } = useSystemStore();
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const modelList = useMemo(
() =>

5
projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/SettingLLMModel.tsx
View File

@@ -1,12 +1,13 @@
import React, { useCallback, useMemo } from 'react';
import type { RenderInputProps } from '../type';
import { useFlowProviderStore } from '../../../../FlowProvider';
import type { SettingAIDataType } from '@fastgpt/global/core/app/type.d';
import SettingLLMModel from '@/components/core/ai/SettingLLMModel';
import { NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
const SelectAiModelRender = ({ item, inputs = [], nodeId }: RenderInputProps) => {
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const onChangeModel = useCallback(
(e: SettingAIDataType) => {

19
projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/SettingQuotePrompt.tsx
View File

@@ -1,7 +1,6 @@
import React, { useCallback, useMemo, useState } from 'react';
import type { RenderInputProps } from '../type';
import { Box, BoxProps, Button, Flex, ModalFooter, useDisclosure } from '@chakra-ui/react';
import { useFlowProviderStore } from '../../../../FlowProvider';
import MyModal from '@fastgpt/web/components/common/MyModal';
import { useForm } from 'react-hook-form';
import { PromptTemplateItem } from '@fastgpt/global/core/ai/type';
@@ -25,6 +24,10 @@ import MyIcon from '@fastgpt/web/components/common/Icon';
import Reference from './Reference';
import { getSystemVariables } from '@/web/core/app/utils';
import ValueTypeLabel from '../../ValueTypeLabel';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
import { getWorkflowGlobalVariables } from '@/web/core/workflow/utils';
import { useCreation } from 'ahooks';
const LabelStyles: BoxProps = {
fontSize: ['sm', 'md']
@@ -38,7 +41,9 @@ const SettingQuotePrompt = (props: RenderInputProps) => {
const { inputs = [], nodeId } = props;
const { t } = useTranslation();
const { isOpen, onOpen, onClose } = useDisclosure();
const { nodeList, onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
const { watch, setValue, handleSubmit } = useForm({
defaultValues: {
quoteTemplate: inputs.find((input) => input.key === 'quoteTemplate')?.value || '',
@@ -48,14 +53,10 @@ const SettingQuotePrompt = (props: RenderInputProps) => {
const aiChatQuoteTemplate = watch('quoteTemplate');
const aiChatQuotePrompt = watch('quotePrompt');
const variables = useMemo(() => {
const globalVariables = formatEditorVariablePickerIcon(
splitGuideModule(getGuideModule(nodeList))?.variableModules || []
);
const variables = useCreation(() => {
const globalVariables = getWorkflowGlobalVariables(nodeList, t);
const systemVariables = getSystemVariables(t);
return [...globalVariables, ...systemVariables];
return globalVariables;
}, [nodeList, t]);
const [selectTemplateData, setSelectTemplateData] = useState<{

5
projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/Slider.tsx
View File

@@ -1,13 +1,14 @@
import React, { useMemo } from 'react';
import type { RenderInputProps } from '../type';
import { useFlowProviderStore } from '../../../../FlowProvider';
import { useTranslation } from 'next-i18next';
import { Box } from '@chakra-ui/react';
import MySlider from '@/components/Slider';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
const SliderRender = ({ item, nodeId }: RenderInputProps) => {
const { t } = useTranslation();
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const Render = useMemo(() => {
return (

5
projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/Switch.tsx
View File

@@ -1,10 +1,11 @@
import React, { useMemo } from 'react';
import type { RenderInputProps } from '../type';
import { Switch } from '@chakra-ui/react';
import { useFlowProviderStore } from '../../../../FlowProvider';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
const SwitchRender = ({ item, nodeId }: RenderInputProps) => {
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const Render = useMemo(() => {
return (

5
projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/TextInput.tsx
View File

@@ -1,10 +1,11 @@
import React, { useMemo } from 'react';
import type { RenderInputProps } from '../type';
import { Input } from '@chakra-ui/react';
import { useFlowProviderStore } from '../../../../FlowProvider';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
const TextInput = ({ item, nodeId }: RenderInputProps) => {
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const Render = useMemo(() => {
return (

26
projects/app/src/components/core/workflow/Flow/nodes/render/RenderInput/templates/Textarea.tsx
View File

@@ -1,24 +1,22 @@
import React, { useCallback, useMemo } from 'react';
import type { RenderInputProps } from '../type';
import { useFlowProviderStore } from '../../../../FlowProvider';
import { useTranslation } from 'next-i18next';
import PromptEditor from '@fastgpt/web/components/common/Textarea/PromptEditor';
import {
formatEditorVariablePickerIcon,
getGuideModule,
splitGuideModule
} from '@fastgpt/global/core/workflow/utils';
import { getSystemVariables } from '@/web/core/app/utils';
import { formatEditorVariablePickerIcon } from '@fastgpt/global/core/workflow/utils';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
import { getWorkflowGlobalVariables } from '@/web/core/workflow/utils';
import { useCreation } from 'ahooks';
const TextareaRender = ({ inputs = [], item, nodeId }: RenderInputProps) => {
const { t } = useTranslation();
const { nodeList, onChangeNode } = useFlowProviderStore();
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
// get variable
const variables = useMemo(() => {
const globalVariables = formatEditorVariablePickerIcon(
splitGuideModule(getGuideModule(nodeList))?.variableModules || []
);
const variables = useCreation(() => {
const globalVariables = getWorkflowGlobalVariables(nodeList, t);
const moduleVariables = formatEditorVariablePickerIcon(
inputs
.filter((input) => input.canEdit)
@@ -28,9 +26,7 @@ const TextareaRender = ({ inputs = [], item, nodeId }: RenderInputProps) => {
}))
);
const systemVariables = getSystemVariables(t);
return [...globalVariables, ...moduleVariables, ...systemVariables];
return [...globalVariables, ...moduleVariables];
}, [nodeList, inputs, t]);
const onChange = useCallback(

5
projects/app/src/components/core/workflow/Flow/nodes/render/RenderOutput/index.tsx
View File

@@ -11,7 +11,8 @@ import VariableTable from '../VariableTable';
import { EditNodeFieldType } from '@fastgpt/global/core/workflow/node/type';
import { FlowValueTypeMap } from '@/web/core/workflow/constants/dataType';
import { getNanoid } from '@fastgpt/global/common/string/tools';
import { useFlowProviderStore } from '../../../FlowProvider';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
const RenderList: {
types: `${FlowNodeOutputTypeEnum}`[];
@@ -26,7 +27,7 @@ const RenderOutput = ({
flowOutputList: FlowNodeOutputItemType[];
}) => {
const { t } = useTranslation();
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const outputString = useMemo(() => JSON.stringify(flowOutputList), [flowOutputList]);
const copyOutputs = useMemo(() => {

5
projects/app/src/components/core/workflow/Flow/nodes/render/RenderToolInput/EditFieldModal.tsx
View File

@@ -17,8 +17,9 @@ import { defaultEditFormData } from './constants';
import MySelect from '@fastgpt/web/components/common/MySelect';
import { useRequest } from '@fastgpt/web/hooks/useRequest';
import { useToast } from '@fastgpt/web/hooks/useToast';
import { useFlowProviderStore } from '../../../FlowProvider';
import { FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io.d';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
const EditFieldModal = ({
defaultValue = defaultEditFormData,
@@ -27,7 +28,7 @@ const EditFieldModal = ({
}: EditFieldModalProps) => {
const { t } = useTranslation();
const { toast } = useToast();
const { onChangeNode } = useFlowProviderStore();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const { register, setValue, handleSubmit, watch } = useForm<FlowNodeInputItemType>({
defaultValues: defaultValue

10
projects/app/src/components/core/workflow/Flow/nodes/render/RenderToolInput/index.tsx
View File

@@ -1,4 +1,4 @@
import React, { useMemo } from 'react';
import React, { useMemo, useState } from 'react';
import type {
FlowNodeInputItemType,
FlowNodeOutputItemType
@@ -19,7 +19,8 @@ import { useTranslation } from 'next-i18next';
import MyIcon from '@fastgpt/web/components/common/Icon';
import dynamic from 'next/dynamic';
import { defaultEditFormData } from './constants';
import { useFlowProviderStore } from '../../../FlowProvider';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '@/components/core/workflow/context';
const EditFieldModal = dynamic(() => import('./EditFieldModal'));
const RenderToolInput = ({
@@ -32,8 +33,9 @@ const RenderToolInput = ({
canEdit?: boolean;
}) => {
const { t } = useTranslation();
const { onChangeNode } = useFlowProviderStore();
const [editField, setEditField] = React.useState<FlowNodeInputItemType>();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const [editField, setEditField] = useState<FlowNodeInputItemType>();
return (
<>

626
projects/app/src/components/core/workflow/Flow/FlowProvider.tsx → projects/app/src/components/core/workflow/context.tsx
View File

@@ -1,58 +1,89 @@
import {
type Node,
type NodeChange,
type Edge,
type EdgeChange,
useNodesState,
useEdgesState,
OnConnectStartParams
} from 'reactflow';
import type {
FlowNodeItemType,
FlowNodeTemplateType
} from '@fastgpt/global/core/workflow/type/index.d';
import type { FlowNodeChangeProps } from '@fastgpt/global/core/workflow/type/fe.d';
import { FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io.d';
import React, {
type SetStateAction,
type Dispatch,
useContext,
useCallback,
createContext,
useRef,
useMemo,
useState,
useEffect
} from 'react';
import { storeEdgesRenderEdge, storeNode2FlowNode } from '@/web/core/workflow/utils';
import { useToast } from '@fastgpt/web/hooks/useToast';
import { FlowNodeTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
import { NodeOutputKeyEnum, RuntimeEdgeStatusEnum } from '@fastgpt/global/core/workflow/constants';
import { StoreNodeItemType } from '@fastgpt/global/core/workflow/type/index.d';
import { RuntimeEdgeItemType, StoreEdgeItemType } from '@fastgpt/global/core/workflow/type/edge';
import { RuntimeNodeItemType } from '@fastgpt/global/core/workflow/runtime/type';
import { defaultRunningStatus } from '../constants';
import { postWorkflowDebug } from '@/web/core/workflow/api';
import { storeEdgesRenderEdge, storeNode2FlowNode } from '@/web/core/workflow/utils';
import { getErrText } from '@fastgpt/global/common/error/utils';
import { NodeOutputKeyEnum, RuntimeEdgeStatusEnum } from '@fastgpt/global/core/workflow/constants';
import { FlowNodeTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
import { RuntimeNodeItemType } from '@fastgpt/global/core/workflow/runtime/type';
import {
FlowNodeItemType,
FlowNodeTemplateType,
StoreNodeItemType
} from '@fastgpt/global/core/workflow/type';
import { RuntimeEdgeItemType, StoreEdgeItemType } from '@fastgpt/global/core/workflow/type/edge';
import { FlowNodeChangeProps } from '@fastgpt/global/core/workflow/type/fe';
import { FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io';
import { useToast } from '@fastgpt/web/hooks/useToast';
import { useCreation, useMemoizedFn } from 'ahooks';
import React, {
Dispatch,
SetStateAction,
useCallback,
useEffect,
useMemo,
useRef,
useState
} from 'react';
import {
Edge,
EdgeChange,
Node,
NodeChange,
OnConnectStartParams,
useEdgesState,
useNodesState
} from 'reactflow';
import { createContext } from 'use-context-selector';
import { defaultRunningStatus } from './constants';
import { checkNodeRunStatus } from '@fastgpt/global/core/workflow/runtime/utils';
import { EventNameEnum, eventBus } from '@/web/common/utils/eventbus';
import { delay } from '@fastgpt/global/common/system/utils';
type OnChange<ChangesType> = (changes: ChangesType[]) => void;
export type useFlowProviderStoreType = {
// connect
connectingEdge: OnConnectStartParams | undefined;
setConnectingEdge: React.Dispatch<React.SetStateAction<OnConnectStartParams | undefined>>;
// nodes
basicNodeTemplates: FlowNodeTemplateType[];
reactFlowWrapper: null | React.RefObject<HTMLDivElement>;
type WorkflowContextType = {
mode: 'app' | 'plugin';
filterAppIds: string[];
basicNodeTemplates: FlowNodeTemplateType[];
filterAppIds?: string[];
reactFlowWrapper: React.RefObject<HTMLDivElement> | null;
// nodes
nodes: Node<FlowNodeItemType, string | undefined>[];
nodeList: FlowNodeItemType[];
setNodes: Dispatch<SetStateAction<Node<FlowNodeItemType, string | undefined>[]>>;
onNodesChange: OnChange<NodeChange>;
hasToolNode: boolean;
hoverNodeId?: string;
setHoverNodeId: React.Dispatch<React.SetStateAction<string | undefined>>;
onUpdateNodeError: (node: string, isError: Boolean) => void;
onResetNode: (e: { id: string; module: FlowNodeTemplateType }) => void;
onChangeNode: (e: FlowNodeChangeProps) => void;
// edges
edges: Edge<any>[];
setEdges: Dispatch<SetStateAction<Edge<any>[]>>;
onEdgesChange: OnChange<EdgeChange>;
onDelEdge: (e: {
nodeId: string;
sourceHandle?: string | undefined;
targetHandle?: string | undefined;
}) => void;
// connect
connectingEdge?: OnConnectStartParams;
setConnectingEdge: React.Dispatch<React.SetStateAction<OnConnectStartParams | undefined>>;
// common function
onFixView: () => void;
splitToolInputs: (
inputs: FlowNodeInputItemType[],
nodeId: string
) => {
isTool: boolean;
toolInputs: FlowNodeInputItemType[];
commonInputs: FlowNodeInputItemType[];
};
initData: (e: { nodes: StoreNodeItemType[]; edges: StoreEdgeItemType[] }) => Promise<void>;
// debug
// debug
workflowDebugData:
| {
@@ -72,67 +103,66 @@ export type useFlowProviderStoreType = {
runtimeEdges: RuntimeEdgeItemType[];
}) => Promise<void>;
onStopNodeDebug: () => void;
edges: Edge<any>[];
setEdges: Dispatch<SetStateAction<Edge<any>[]>>;
onEdgesChange: OnChange<EdgeChange>;
onFixView: () => void;
onChangeNode: (e: FlowNodeChangeProps) => void;
onResetNode: (e: { id: string; module: FlowNodeTemplateType }) => void;
onDelEdge: (e: {
nodeId: string;
sourceHandle?: string | undefined;
targetHandle?: string | undefined;
}) => void;
initData: (e: { nodes: StoreNodeItemType[]; edges: StoreEdgeItemType[] }) => Promise<void>;
splitToolInputs: (
inputs: FlowNodeInputItemType[],
nodeId: string
) => {
isTool: boolean;
toolInputs: FlowNodeInputItemType[];
commonInputs: FlowNodeInputItemType[];
};
hasToolNode: boolean;
hoverNodeId: string | undefined;
setHoverNodeId: React.Dispatch<React.SetStateAction<string | undefined>>;
onUpdateNodeError: (node: string, isError: Boolean) => void;
};
const StateContext = createContext<useFlowProviderStoreType>({
reactFlowWrapper: null,
type ContextValueProps = Pick<
WorkflowContextType,
'mode' | 'basicNodeTemplates' | 'filterAppIds'
> & {
appId?: string;
pluginId?: string;
};
type DebugDataType = {
runtimeNodes: RuntimeNodeItemType[];
runtimeEdges: RuntimeEdgeItemType[];
nextRunNodes: RuntimeNodeItemType[];
};
export const WorkflowContext = createContext<WorkflowContextType>({
mode: 'app',
filterAppIds: [],
setConnectingEdge: function (
value: React.SetStateAction<OnConnectStartParams | undefined>
): void {
throw new Error('Function not implemented.');
},
onFixView: function (): void {
throw new Error('Function not implemented.');
},
basicNodeTemplates: [],
reactFlowWrapper: null,
nodes: [],
nodeList: [],
setNodes: function (
value: React.SetStateAction<Node<FlowNodeItemType, string | undefined>[]>
): void {
return;
throw new Error('Function not implemented.');
},
onNodesChange: function (changes: NodeChange[]): void {
return;
throw new Error('Function not implemented.');
},
hasToolNode: false,
setHoverNodeId: function (value: React.SetStateAction<string | undefined>): void {
throw new Error('Function not implemented.');
},
onUpdateNodeError: function (node: string, isError: Boolean): void {
throw new Error('Function not implemented.');
},
edges: [],
setEdges: function (value: React.SetStateAction<Edge<any>[]>): void {
return;
throw new Error('Function not implemented.');
},
onEdgesChange: function (changes: EdgeChange[]): void {
return;
throw new Error('Function not implemented.');
},
onFixView: function (): void {
return;
},
onChangeNode: function (e: FlowNodeChangeProps): void {
return;
onResetNode: function (e: { id: string; module: FlowNodeTemplateType }): void {
throw new Error('Function not implemented.');
},
onDelEdge: function (e: {
nodeId: string;
sourceHandle?: string | undefined;
targetHandle?: string | undefined;
}): void {
return;
},
onResetNode: function (e): void {
throw new Error('Function not implemented.');
},
splitToolInputs: function (
@@ -145,23 +175,12 @@ const StateContext = createContext<useFlowProviderStoreType>({
} {
throw new Error('Function not implemented.');
},
hasToolNode: false,
connectingEdge: undefined,
basicNodeTemplates: [],
initData: function (e: {
nodes: StoreNodeItemType[];
edges: StoreEdgeItemType[];
}): Promise<void> {
throw new Error('Function not implemented.');
},
hoverNodeId: undefined,
setHoverNodeId: function (value: React.SetStateAction<string | undefined>): void {
throw new Error('Function not implemented.');
},
onUpdateNodeError: function (nodeId: string, isError: Boolean): void {
throw new Error('Function not implemented.');
},
nodeList: [],
workflowDebugData: undefined,
onNextNodeDebug: function (): Promise<void> {
throw new Error('Function not implemented.');
@@ -180,55 +199,24 @@ const StateContext = createContext<useFlowProviderStoreType>({
onStopNodeDebug: function (): void {
throw new Error('Function not implemented.');
},
setConnectingEdge: function (
value: React.SetStateAction<OnConnectStartParams | undefined>
): void {
onChangeNode: function (e: FlowNodeChangeProps): void {
throw new Error('Function not implemented.');
}
});
export const useFlowProviderStore = () => useContext(StateContext);
export const FlowProvider = ({
mode,
basicNodeTemplates = [],
filterAppIds = [],
const WorkflowContextProvider = ({
children,
appId,
pluginId
value
}: {
mode: useFlowProviderStoreType['mode'];
basicNodeTemplates: FlowNodeTemplateType[];
filterAppIds?: string[];
children: React.ReactNode;
appId?: string;
pluginId?: string;
value: ContextValueProps;
}) => {
const reactFlowWrapper = useRef<HTMLDivElement>(null);
const { appId, pluginId } = value;
const { toast } = useToast();
const [nodes = [], setNodes, onNodesChange] = useNodesState<FlowNodeItemType>([]);
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
const [hoverNodeId, setHoverNodeId] = useState<string>();
const [connectingEdge, setConnectingEdge] = useState<OnConnectStartParams>();
const stringifyNodes = useMemo(() => JSON.stringify(nodes.map((node) => node.data)), [nodes]);
const nodeList = useMemo(
() => JSON.parse(stringifyNodes) as FlowNodeItemType[],
[stringifyNodes]
);
const hasToolNode = useMemo(() => {
return !!nodes.find((node) => node.data.flowNodeType === FlowNodeTypeEnum.tools);
}, [nodes]);
const onFixView = useCallback(() => {
const btn = document.querySelector('.custom-workflow-fix_view') as HTMLButtonElement;
setTimeout(() => {
btn && btn.click();
}, 100);
}, []);
const reactFlowWrapper = useRef<HTMLDivElement>(null);
/* edge */
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
const onDelEdge = useCallback(
({
nodeId,
@@ -252,9 +240,34 @@ export const FlowProvider = ({
[setEdges]
);
/* connect */
const [connectingEdge, setConnectingEdge] = useState<OnConnectStartParams>();
/* node */
const [nodes = [], setNodes, onNodesChange] = useNodesState<FlowNodeItemType>([]);
const [hoverNodeId, setHoverNodeId] = useState<string>();
const nodeList = useCreation(() => nodes.map((node) => node.data), [nodes]);
const hasToolNode = useMemo(() => {
return !!nodes.find((node) => node.data.flowNodeType === FlowNodeTypeEnum.tools);
}, [nodes]);
const onUpdateNodeError = useMemoizedFn((nodeId: string, isError: Boolean) => {
setNodes((nodes) => {
return nodes.map((item) => {
if (item.data?.nodeId === nodeId) {
item.selected = true;
//@ts-ignore
item.data.isError = isError;
}
return item;
});
});
});
// reset a node data. delete edge and replace it
const onResetNode = useCallback(
const onResetNode = useMemoizedFn(
({ id, module }: { id: string; module: FlowNodeTemplateType }) => {
setNodes((state) =>
state.map((node) => {
@@ -277,131 +290,142 @@ export const FlowProvider = ({
return node;
})
);
},
[onDelEdge, setNodes]
}
);
const onChangeNode = useCallback(
(props: FlowNodeChangeProps) => {
const { nodeId, type } = props;
setNodes((nodes) =>
nodes.map((node) => {
if (node.id !== nodeId) return node;
const updateObj: Record<string, any> = {};
const onChangeNode = useMemoizedFn((props: FlowNodeChangeProps) => {
const { nodeId, type } = props;
setNodes((nodes) =>
nodes.map((node) => {
if (node.id !== nodeId) return node;
if (type === 'attr') {
if (props.key) {
updateObj[props.key] = props.value;
}
} else if (type === 'updateInput') {
updateObj.inputs = node.data.inputs.map((item) =>
item.key === props.key ? props.value : item
);
} else if (type === 'replaceInput') {
onDelEdge({ nodeId, targetHandle: props.key });
const oldInputIndex = node.data.inputs.findIndex((item) => item.key === props.key);
updateObj.inputs = node.data.inputs.filter((item) => item.key !== props.key);
setTimeout(() => {
onChangeNode({
nodeId,
type: 'addInput',
index: oldInputIndex,
value: props.value
});
});
} else if (type === 'addInput') {
const input = node.data.inputs.find((input) => input.key === props.value.key);
if (input) {
toast({
status: 'warning',
title: 'key 重复'
});
updateObj.inputs = node.data.inputs;
} else {
if (props.index !== undefined) {
const inputs = [...node.data.inputs];
inputs.splice(props.index, 0, props.value);
updateObj.inputs = inputs;
} else {
updateObj.inputs = node.data.inputs.concat(props.value);
}
}
} else if (type === 'delInput') {
onDelEdge({ nodeId, targetHandle: props.key });
updateObj.inputs = node.data.inputs.filter((item) => item.key !== props.key);
} else if (type === 'updateOutput') {
updateObj.outputs = node.data.outputs.map((item) =>
item.key === props.key ? props.value : item
);
} else if (type === 'replaceOutput') {
onDelEdge({ nodeId, sourceHandle: props.key });
const oldOutputIndex = node.data.outputs.findIndex((item) => item.key === props.key);
updateObj.outputs = node.data.outputs.filter((item) => item.key !== props.key);
console.log(props.value);
setTimeout(() => {
onChangeNode({
nodeId,
type: 'addOutput',
index: oldOutputIndex,
value: props.value
});
});
} else if (type === 'addOutput') {
const output = node.data.outputs.find((output) => output.key === props.value.key);
if (output) {
toast({
status: 'warning',
title: 'key 重复'
});
updateObj.outputs = node.data.outputs;
} else {
if (props.index !== undefined) {
const outputs = [...node.data.outputs];
outputs.splice(props.index, 0, props.value);
updateObj.outputs = outputs;
} else {
updateObj.outputs = node.data.outputs.concat(props.value);
}
}
} else if (type === 'delOutput') {
onDelEdge({ nodeId, sourceHandle: props.key });
updateObj.outputs = node.data.outputs.filter((item) => item.key !== props.key);
const updateObj: Record<string, any> = {};
if (type === 'attr') {
if (props.key) {
updateObj[props.key] = props.value;
}
return {
...node,
data: {
...node.data,
...updateObj
} else if (type === 'updateInput') {
updateObj.inputs = node.data.inputs.map((item) =>
item.key === props.key ? props.value : item
);
} else if (type === 'replaceInput') {
onDelEdge({ nodeId, targetHandle: props.key });
const oldInputIndex = node.data.inputs.findIndex((item) => item.key === props.key);
updateObj.inputs = node.data.inputs.filter((item) => item.key !== props.key);
setTimeout(() => {
onChangeNode({
nodeId,
type: 'addInput',
index: oldInputIndex,
value: props.value
});
});
} else if (type === 'addInput') {
const input = node.data.inputs.find((input) => input.key === props.value.key);
if (input) {
toast({
status: 'warning',
title: 'key 重复'
});
updateObj.inputs = node.data.inputs;
} else {
if (props.index !== undefined) {
const inputs = [...node.data.inputs];
inputs.splice(props.index, 0, props.value);
updateObj.inputs = inputs;
} else {
updateObj.inputs = node.data.inputs.concat(props.value);
}
};
})
);
},
[onDelEdge, setNodes, toast]
);
const onUpdateNodeError = useCallback(
(nodeId: string, isError: Boolean) => {
setNodes((nodes) => {
return nodes.map((item) => {
if (item.data?.nodeId === nodeId) {
item.selected = true;
//@ts-ignore
item.data.isError = isError;
}
return item;
});
});
},
[setNodes]
} else if (type === 'delInput') {
onDelEdge({ nodeId, targetHandle: props.key });
updateObj.inputs = node.data.inputs.filter((item) => item.key !== props.key);
} else if (type === 'updateOutput') {
updateObj.outputs = node.data.outputs.map((item) =>
item.key === props.key ? props.value : item
);
} else if (type === 'replaceOutput') {
onDelEdge({ nodeId, sourceHandle: props.key });
const oldOutputIndex = node.data.outputs.findIndex((item) => item.key === props.key);
updateObj.outputs = node.data.outputs.filter((item) => item.key !== props.key);
console.log(props.value);
setTimeout(() => {
onChangeNode({
nodeId,
type: 'addOutput',
index: oldOutputIndex,
value: props.value
});
});
} else if (type === 'addOutput') {
const output = node.data.outputs.find((output) => output.key === props.value.key);
if (output) {
toast({
status: 'warning',
title: 'key 重复'
});
updateObj.outputs = node.data.outputs;
} else {
if (props.index !== undefined) {
const outputs = [...node.data.outputs];
outputs.splice(props.index, 0, props.value);
updateObj.outputs = outputs;
} else {
updateObj.outputs = node.data.outputs.concat(props.value);
}
}
} else if (type === 'delOutput') {
onDelEdge({ nodeId, sourceHandle: props.key });
updateObj.outputs = node.data.outputs.filter((item) => item.key !== props.key);
}
return {
...node,
data: {
...node.data,
...updateObj
}
};
})
);
});
/* function */
const onFixView = useMemoizedFn(() => {
const btn = document.querySelector('.custom-workflow-fix_view') as HTMLButtonElement;
setTimeout(() => {
btn && btn.click();
}, 100);
});
/* If the module is connected by a tool, the tool input and the normal input are separated */
const splitToolInputs = useMemoizedFn((inputs: FlowNodeInputItemType[], nodeId: string) => {
const isTool = !!edges.find(
(edge) => edge.targetHandle === NodeOutputKeyEnum.selectedTools && edge.target === nodeId
);
return {
isTool,
toolInputs: inputs.filter((item) => isTool && item.toolDescription),
commonInputs: inputs.filter((item) => {
if (!isTool) return true;
return !item.toolDescription;
})
};
});
const initData = useMemoizedFn(
async (e: { nodes: StoreNodeItemType[]; edges: StoreEdgeItemType[] }) => {
setNodes(e.nodes?.map((item) => storeNode2FlowNode({ item })));
setEdges(e.edges?.map((item) => storeEdgesRenderEdge({ edge: item })));
}
);
/* Run workflow debug and get next runtime data */
const [workflowDebugData, setWorkflowDebugData] = useState<{
runtimeNodes: RuntimeNodeItemType[];
runtimeEdges: RuntimeEdgeItemType[];
nextRunNodes: RuntimeNodeItemType[];
}>();
/* debug */
const [workflowDebugData, setWorkflowDebugData] = useState<DebugDataType>();
const onNextNodeDebug = useCallback(
async (debugData = workflowDebugData) => {
if (!debugData) return;
@@ -592,36 +616,6 @@ export const FlowProvider = ({
[onNextNodeDebug, onStopNodeDebug]
);
/* If the module is connected by a tool, the tool input and the normal input are separated */
const splitToolInputs = useCallback(
(inputs: FlowNodeInputItemType[], nodeId: string) => {
const isTool = !!edges.find(
(edge) => edge.targetHandle === NodeOutputKeyEnum.selectedTools && edge.target === nodeId
);
return {
isTool,
toolInputs: inputs.filter((item) => isTool && item.toolDescription),
commonInputs: inputs.filter((item) => {
if (!isTool) return true;
return !item.toolDescription;
})
};
},
[edges]
);
const initData = useCallback(
async (e: { nodes: StoreNodeItemType[]; edges: StoreEdgeItemType[] }) => {
setNodes(e.nodes?.map((item) => storeNode2FlowNode({ item })));
setEdges(e.edges?.map((item) => storeEdgesRenderEdge({ edge: item })));
await delay(200);
},
[setEdges, setNodes]
);
useEffect(() => {
eventBus.on(EventNameEnum.requestWorkflowStore, () => {
eventBus.emit(EventNameEnum.receiveWorkflowStore, {
@@ -633,43 +627,49 @@ export const FlowProvider = ({
};
}, [nodes]);
const value = {
reactFlowWrapper,
mode,
filterAppIds,
edges,
setEdges,
onEdgesChange,
// nodes
nodes,
nodeList,
setNodes,
onNodesChange,
hoverNodeId,
setHoverNodeId,
onUpdateNodeError,
workflowDebugData,
onNextNodeDebug,
onStartNodeDebug,
onStopNodeDebug,
return (
<WorkflowContext.Provider
value={{
reactFlowWrapper,
...value,
// node
nodes,
setNodes,
onNodesChange,
nodeList,
hasToolNode,
hoverNodeId,
setHoverNodeId,
onUpdateNodeError,
onResetNode,
onChangeNode,
basicNodeTemplates,
// connect
connectingEdge,
setConnectingEdge,
onFixView,
onChangeNode,
onResetNode,
onDelEdge,
initData,
splitToolInputs,
hasToolNode
};
// edge
edges,
setEdges,
onEdgesChange,
connectingEdge,
setConnectingEdge,
onDelEdge,
return <StateContext.Provider value={value}>{children}</StateContext.Provider>;
// function
onFixView,
splitToolInputs,
initData,
// debug
workflowDebugData,
onNextNodeDebug,
onStartNodeDebug,
onStopNodeDebug
}}
>
{children}
</WorkflowContext.Provider>
);
};
export default React.memo(FlowProvider);
export default WorkflowContextProvider;
type GetWorkflowStoreResponse = {
nodes: Node<FlowNodeItemType>[];

4
projects/app/src/components/support/laf/LafAccountModal.tsx
View File

@@ -108,7 +108,9 @@ const LafAccountModal = ({
</Box>
<Box>
<Link textDecoration={'underline'} href={`${feConfigs.lafEnv}/`} isExternal>
{t('support.user.Go laf env', { env: feConfigs.lafEnv })}
{t('support.user.Go laf env', {
env: feConfigs.lafEnv?.split('//')[1]
})}
</Link>
</Box>
</Box>

28
projects/app/src/constants/app.ts
View File

@@ -1,5 +1,5 @@
import { AppDetailType } from '@fastgpt/global/core/app/type.d';
import type { OutLinkEditType } from '@fastgpt/global/support/outLink/type.d';
import type { FeishuType, OutLinkEditType } from '@fastgpt/global/support/outLink/type.d';
export const defaultApp: AppDetailType = {
_id: '',
@@ -28,6 +28,32 @@ export const defaultOutLinkForm: OutLinkEditType = {
}
};
// export const defaultWecomOutLinkForm: OutLinkConfigEditType = {
// name: '',
// wecomConfig: {
// ReplyLimit: false,
// defaultResponse: '',
// immediateResponse: false,
// WXWORK_TOKEN: '',
// WXWORK_AESKEY: '',
// WXWORK_SECRET: '',
// WXWORD_ID: ''
// },
// limit: {
// QPM: 100,
// maxUsagePoints: -1
// }
// };
export const defaultFeishuOutLinkForm: OutLinkEditType<FeishuType> = {
name: '',
limit: {
QPM: 100,
maxUsagePoints: -1
},
responseDetail: false
};
export enum TTSTypeEnum {
none = 'none',
web = 'web',

5
projects/app/src/pages/account/components/Individuation.tsx
View File

@@ -1,8 +1,7 @@
import { Box, Card, Flex, Select } from '@chakra-ui/react';
import React, { useCallback, useRef } from 'react';
import { Box, Card, Flex } from '@chakra-ui/react';
import React, { useCallback } from 'react';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { useTranslation } from 'next-i18next';
import { timezoneList } from '@fastgpt/global/common/time/timezone';
import { useUserStore } from '@/web/support/user/useUserStore';
import { UserType } from '@fastgpt/global/support/user/type';
import { useToast } from '@fastgpt/web/hooks/useToast';

4
projects/app/src/pages/api/core/plugin/update.ts
View File

@@ -28,10 +28,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
avatar: props.avatar,
parentId: props.parentId,
version: 'v2',
...(modules && {
...(modules?.length && {
modules: modules
}),
...(edges && { edges }),
...(edges?.length && { edges }),
metadata: props.metadata
};

4
projects/app/src/pages/api/lafApi/[...path].ts
View File

@@ -2,8 +2,6 @@ import type { NextApiRequest, NextApiResponse } from 'next';
import { jsonRes } from '@fastgpt/service/common/response';
import { connectToDatabase } from '@/service/mongo';
import { request } from 'https';
import { FastGPTProUrl } from '@fastgpt/service/common/system/constants';
import url from 'url';
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try {
@@ -25,7 +23,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
throw new Error('lafEnv is empty');
}
const parsedUrl = url.parse(lafEnv);
const parsedUrl = new URL(lafEnv);
delete req.headers?.cookie;
delete req.headers?.host;
delete req.headers?.origin;

5
projects/app/src/pages/api/proApi/[...path].ts
View File

@@ -3,7 +3,6 @@ import { jsonRes } from '@fastgpt/service/common/response';
import { connectToDatabase } from '@/service/mongo';
import { request } from 'http';
import { FastGPTProUrl } from '@fastgpt/service/common/system/constants';
import url from 'url';
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try {
@@ -15,8 +14,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
throw new Error('url is empty');
}
const parsedUrl = url.parse(FastGPTProUrl);
const parsedUrl = new URL(FastGPTProUrl);
delete req.headers?.rootkey;
const requestResult = request({
@@ -37,6 +35,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
response.statusCode && res.writeHead(response.statusCode);
response.pipe(res);
});
requestResult.on('error', (e) => {
res.send(e);
res.end();

11
projects/app/src/pages/api/support/outLink/create.ts
View File

@@ -5,17 +5,18 @@ import { MongoOutLink } from '@fastgpt/service/support/outLink/schema';
import { authApp } from '@fastgpt/service/support/permission/auth/app';
import type { OutLinkEditType } from '@fastgpt/global/support/outLink/type.d';
import { customAlphabet } from 'nanoid';
import { OutLinkTypeEnum } from '@fastgpt/global/support/outLink/constant';
import { PublishChannelEnum } from '@fastgpt/global/support/outLink/constant';
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 24);
/* create a shareChat */
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try {
await connectToDatabase();
const { appId, ...props } = req.body as OutLinkEditType & {
appId: string;
type: `${OutLinkTypeEnum}`;
};
const { appId, ...props } = req.body as OutLinkEditType &
OutLinkEditType & {
appId: string;
type: PublishChannelEnum;
};
const { teamId, tmbId } = await authApp({ req, authToken: true, appId, per: 'w' });

6
projects/app/src/pages/api/support/outLink/list.ts
View File

@@ -9,15 +9,17 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
try {
await connectToDatabase();
const { appId } = req.query as {
const { appId, type } = req.query as {
appId: string;
type: string;
};
const { teamId, tmbId, isOwner } = await authApp({ req, authToken: true, appId, per: 'w' });
const data = await MongoOutLink.find({
appId,
...(isOwner ? { teamId } : { tmbId })
...(isOwner ? { teamId } : { tmbId }),
type: type
}).sort({
_id: -1
});

14
projects/app/src/pages/app/detail/components/FlowEdit/Header.tsx
View File

@@ -9,10 +9,6 @@ import dynamic from 'next/dynamic';
import MyIcon from '@fastgpt/web/components/common/Icon';
import ChatTest, { type ChatTestComponentRef } from '@/components/core/workflow/Flow/ChatTest';
import {
getWorkflowStore,
useFlowProviderStore
} from '@/components/core/workflow/Flow/FlowProvider';
import { flowNode2StoreNodes } from '@/components/core/workflow/utils';
import { useAppStore } from '@/web/core/app/store/useAppStore';
import { useToast } from '@fastgpt/web/hooks/useToast';
@@ -28,6 +24,8 @@ import { useBeforeunload } from '@fastgpt/web/hooks/useBeforeunload';
import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
import { useQuery } from '@tanstack/react-query';
import { formatTime2HM } from '@fastgpt/global/common/string/time';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext, getWorkflowStore } from '@/components/core/workflow/context';
const ImportSettings = dynamic(() => import('@/components/core/workflow/Flow/ImportSettings'));
@@ -59,9 +57,11 @@ const RenderHeaderContainer = React.memo(function RenderHeaderContainer({
});
const { isOpen: isOpenImport, onOpen: onOpenImport, onClose: onCloseImport } = useDisclosure();
const { publishApp, updateAppDetail } = useAppStore();
const { edges, onUpdateNodeError } = useFlowProviderStore();
const edges = useContextSelector(WorkflowContext, (v) => v.edges);
const [isSaving, setIsSaving] = useState(false);
const [saveLabel, setSaveLabel] = useState(t('core.app.Onclick to save'));
const onUpdateNodeError = useContextSelector(WorkflowContext, (v) => v.onUpdateNodeError);
const flowData2StoreDataAndCheck = useCallback(async () => {
const { nodes } = await getWorkflowStore();
@@ -101,13 +101,13 @@ const RenderHeaderContainer = React.memo(function RenderHeaderContainer({
time: formatTime2HM()
})
);
ChatTestRef.current?.resetChatTest();
// ChatTestRef.current?.resetChatTest();
} catch (error) {}
setIsSaving(false);
return null;
}, [updateAppDetail, app._id, edges, ChatTestRef, t]);
}, [updateAppDetail, app._id, edges, t]);
const onclickPublish = useCallback(async () => {
setIsSaving(true);

19
projects/app/src/pages/app/detail/components/FlowEdit/index.tsx
View File

@@ -2,10 +2,11 @@ import React, { useEffect, useMemo } from 'react';
import { AppSchema } from '@fastgpt/global/core/app/type.d';
import Header from './Header';
import Flow from '@/components/core/workflow/Flow';
import FlowProvider, { useFlowProviderStore } from '@/components/core/workflow/Flow/FlowProvider';
import { appSystemModuleTemplates } from '@fastgpt/global/core/workflow/template/constants';
import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
import { v1Workflow2V2 } from '@/web/core/workflow/adapt';
import WorkflowContextProvider, { WorkflowContext } from '@/components/core/workflow/context';
import { useContextSelector } from 'use-context-selector';
type Props = { app: AppSchema; onClose: () => void };
@@ -17,7 +18,7 @@ const Render = ({ app, onClose }: Props) => {
'检测到您的高级编排为旧版，系统将为您自动格式化成新版工作流。\n\n由于版本差异较大，会导致许多工作流无法正常排布，请重新手动连接工作流。如仍异常，可尝试删除对应节点后重新添加。\n\n你可以直接点击测试进行调试，无需点击保存，点击保存为新版工作流。'
});
const { initData } = useFlowProviderStore();
const initData = useContextSelector(WorkflowContext, (v) => v.initData);
const workflowStringData = JSON.stringify({
nodes: app.modules || [],
@@ -53,13 +54,15 @@ export default React.memo(function FlowEdit(props: Props) {
const filterAppIds = useMemo(() => [props.app._id], [props.app._id]);
return (
<FlowProvider
appId={props.app._id}
mode={'app'}
filterAppIds={filterAppIds}
basicNodeTemplates={appSystemModuleTemplates}
<WorkflowContextProvider
value={{
appId: props.app._id,
mode: 'app',
filterAppIds,
basicNodeTemplates: appSystemModuleTemplates
}}
>
<Render {...props} />
</FlowProvider>
</WorkflowContextProvider>
);
});

58
projects/app/src/pages/app/detail/components/OutLink/index.tsx
View File

@@ -1,58 +0,0 @@
import React, { useState } from 'react';
import { Box, useTheme } from '@chakra-ui/react';
import { OutLinkTypeEnum } from '@fastgpt/global/support/outLink/constant';
import dynamic from 'next/dynamic';
import MyRadio from '@/components/common/MyRadio';
import Share from './Share';
import { useTranslation } from 'next-i18next';
const API = dynamic(() => import('./API'));
const OutLink = ({ appId }: { appId: string }) => {
const { t } = useTranslation();
const theme = useTheme();
const [linkType, setLinkType] = useState<`${OutLinkTypeEnum}`>(OutLinkTypeEnum.share);
return (
<Box pt={[1, 5]}>
<Box fontWeight={'bold'} fontSize={['md', 'xl']} mb={2} px={[4, 8]}>
{t('core.app.navbar.Publish app')}
</Box>
<Box pb={[5, 7]} px={[4, 8]} borderBottom={theme.borders.base}>
<MyRadio
gridTemplateColumns={['repeat(1,1fr)', 'repeat(auto-fill, minmax(0, 400px))']}
iconSize={'20px'}
list={[
{
icon: '/imgs/modal/shareFill.svg',
title: t('core.app.Share link'),
desc: t('core.app.Share link desc'),
value: OutLinkTypeEnum.share
},
{
icon: 'support/outlink/apikeyFill',
title: t('core.app.Api request'),
desc: t('core.app.Api request desc'),
value: OutLinkTypeEnum.apikey
}
// {
// icon: 'support/outlink/iframeLight',
// title: '网页嵌入',
// desc: '嵌入到已有网页中，右下角会生成对话按键',
// value: OutLinkTypeEnum.iframe
// }
]}
value={linkType}
onChange={(e) => setLinkType(e as `${OutLinkTypeEnum}`)}
/>
</Box>
{linkType === OutLinkTypeEnum.share && <Share appId={appId} />}
{linkType === OutLinkTypeEnum.apikey && <API appId={appId} />}
</Box>
);
};
export default OutLink;

0
projects/app/src/pages/app/detail/components/OutLink/API.tsx → projects/app/src/pages/app/detail/components/Publish/API/index.tsx
View File

211
projects/app/src/pages/app/detail/components/Publish/FeiShu/FeiShuEditModal.tsx Normal file
View File

@@ -0,0 +1,211 @@
import React, { useMemo } from 'react';
import { Flex, Box, Button, ModalFooter, ModalBody, Input } from '@chakra-ui/react';
import MyModal from '@fastgpt/web/components/common/MyModal';
import { QuestionOutlineIcon } from '@chakra-ui/icons';
import MyTooltip from '@/components/MyTooltip';
import { PublishChannelEnum } from '@fastgpt/global/support/outLink/constant';
import type { FeishuType, OutLinkEditType } from '@fastgpt/global/support/outLink/type';
import { useTranslation } from 'next-i18next';
import { useForm } from 'react-hook-form';
import { useRequest } from '@/web/common/hooks/useRequest';
import dayjs from 'dayjs';
import { createShareChat, updateShareChat } from '@/web/support/outLink/api';
const FeiShuEditModal = ({
appId,
defaultData,
onClose,
onCreate,
onEdit
}: {
appId: string;
defaultData: OutLinkEditType<FeishuType>;
onClose: () => void;
onCreate: (id: string) => void;
onEdit: () => void;
}) => {
const { t } = useTranslation();
const {
register,
setValue,
handleSubmit: submitShareChat
} = useForm({
defaultValues: defaultData
});
const isEdit = useMemo(() => !!defaultData?._id, [defaultData]);
const { mutate: onclickCreate, isLoading: creating } = useRequest({
mutationFn: async (e: OutLinkEditType<FeishuType>) => {
createShareChat({
...e,
appId,
type: PublishChannelEnum.feishu
});
},
errorToast: t('common.Create Failed'),
onSuccess: onCreate
});
const { mutate: onclickUpdate, isLoading: updating } = useRequest({
mutationFn: (e: OutLinkEditType<FeishuType>) => {
return updateShareChat(e);
},
errorToast: t('common.Update Failed'),
onSuccess: onEdit
});
return (
<MyModal
isOpen={true}
iconSrc="/imgs/modal/shareFill.svg"
title={isEdit ? t('outlink.Edit Link') : t('outlink.Create Link')}
>
<ModalBody>
<Flex alignItems={'center'}>
<Box flex={'0 0 90px'}>{t('Name')}</Box>
<Input
placeholder={t('outlink.Feishu name') || 'Link Name'} // TODO: i18n
maxLength={20}
{...register('name', {
required: t('common.Name is empty') || 'Name is empty'
})}
/>
</Flex>
<Flex alignItems={'center'} mt={4}>
<Flex flex={'0 0 90px'} alignItems={'center'}>
QPM
<MyTooltip label={t('outlink.QPM Tips' || '')}>
<QuestionOutlineIcon ml={1} />
</MyTooltip>
</Flex>
<Input
max={1000}
{...register('limit.QPM', {
min: 0,
max: 1000,
valueAsNumber: true,
required: t('outlink.QPM is empty') || ''
})}
/>
</Flex>
<Flex alignItems={'center'} mt={4}>
<Flex flex={'0 0 90px'} alignItems={'center'}>
{t('support.outlink.Max usage points')}
<MyTooltip label={t('support.outlink.Max usage points tip')}>
<QuestionOutlineIcon ml={1} />
</MyTooltip>
</Flex>
<Input
{...register('limit.maxUsagePoints', {
min: -1,
max: 10000000,
valueAsNumber: true,
required: true
})}
/>
</Flex>
<Flex alignItems={'center'} mt={4}>
<Flex flex={'0 0 90px'} alignItems={'center'}>
{t('common.Expired Time')}
</Flex>
<Input
type="datetime-local"
defaultValue={
defaultData.limit?.expiredTime
? dayjs(defaultData.limit?.expiredTime).format('YYYY-MM-DDTHH:mm')
: ''
}
onChange={(e) => {
setValue('limit.expiredTime', new Date(e.target.value));
}}
/>
</Flex>
<Flex alignItems={'center'} mt={4}>
<Flex flex={'0 0 90px'} alignItems={'center'}>
默认回复
{/* TODO: i18n */}
</Flex>
<Input
placeholder={t('outlink.Default Response') || 'Link Name'}
maxLength={20}
{...register('defaultResponse', {
required: t('common.default Response is empty') || 'Name is empty'
})}
/>
</Flex>
<Flex alignItems={'center'} mt={4}>
<Flex flex={'0 0 90px'} alignItems={'center'}>
立即回复
{/* TODO: i18n */}
</Flex>
<Input
placeholder={t('outlink.Default Response') || 'Link Name'}
maxLength={20}
{...register('immediateResponse', {
required: t('common.default Response is empty') || 'Name is empty'
})}
/>
</Flex>
<Flex alignItems={'center'} mt={4}>
<Box flex={'0 0 90px'}>{t('core.module.http.AppId')}</Box>
<Input
placeholder={t('core.module.http.appId') || 'Link Name'}
// maxLength={20}
{...register('app.appId', {
required: t('common.Name is empty') || 'Name is empty'
})}
/>
</Flex>
<Flex alignItems={'center'} mt={4}>
<Box flex={'0 0 90px'}>{t('core.module.http.AppSecret')}</Box>
<Input
placeholder={t('outlink.AppSecret') || 'Link Name'}
// maxLength={20}
{...register('app.appSecret', {
required: t('common.Name is empty') || 'Name is empty'
})}
/>
</Flex>
<Flex alignItems={'center'} mt={4}>
<Box flex={'0 0 90px'}>Encrypt Key</Box>
<Input
placeholder="Encrypt Key"
// maxLength={20}
{...register('app.encryptKey', {
required: t('common.Name is empty') || 'Name is empty'
})}
/>
</Flex>
<Flex alignItems={'center'} mt={4}>
<Box flex={'0 0 90px'}>Verification Token</Box>
<Input
placeholder="Verification Token"
// maxLength={20}
{...register('app.verificationToken', {
required: t('common.Name is empty') || 'Name is empty'
})}
/>
</Flex>
{/* <Flex alignItems={'center'} mt={4}> */}
{/* <Flex flex={'0 0 90px'} alignItems={'center'}> */}
{/* 限制回复 */}
{/* </Flex> */}
{/* <Switch {...register('wecomConfig.ReplyLimit')} size={'lg'} /> */}
{/* </Flex> */}
</ModalBody>
<ModalFooter>
<Button variant={'whiteBase'} mr={3} onClick={onClose}>
{t('common.Close')}
</Button>
<Button
isLoading={creating || updating}
onClick={submitShareChat((data) => (isEdit ? onclickUpdate(data) : onclickCreate(data)))}
>
{t('common.Confirm')}
</Button>
</ModalFooter>
</MyModal>
);
};
export default FeiShuEditModal;

193
projects/app/src/pages/app/detail/components/Publish/FeiShu/index.tsx Normal file
View File

@@ -0,0 +1,193 @@
import React, { useState } from 'react';
import {
Flex,
Box,
Button,
TableContainer,
Table,
Thead,
Tr,
Th,
Td,
Tbody
} from '@chakra-ui/react';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { useLoading } from '@fastgpt/web/hooks/useLoading';
import { useQuery } from '@tanstack/react-query';
import { getShareChatList, delShareChatById } from '@/web/support/outLink/api';
import { formatTimeToChatTime } from '@/utils/tools';
import { useCopyData } from '@/web/common/hooks/useCopyData';
import { defaultFeishuOutLinkForm } from '@/constants/app';
import type { FeishuType, OutLinkEditType } from '@fastgpt/global/support/outLink/type.d';
import { PublishChannelEnum } from '@fastgpt/global/support/outLink/constant';
import { useTranslation } from 'next-i18next';
import { useToast } from '@fastgpt/web/hooks/useToast';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import dayjs from 'dayjs';
import dynamic from 'next/dynamic';
import MyMenu from '@fastgpt/web/components/common/MyMenu';
const FeiShuEditModal = dynamic(() => import('./FeiShuEditModal'));
const FeiShu = ({ appId }: { appId: string }) => {
const { t } = useTranslation();
const { Loading, setIsLoading } = useLoading();
const { feConfigs } = useSystemStore();
const { copyData } = useCopyData();
const [editFeiShuLinkData, setEditFeiShuLinkData] = useState<OutLinkEditType<FeishuType>>();
const { toast } = useToast();
const {
isFetching,
data: shareChatList = [],
refetch: refetchShareChatList
} = useQuery(['initShareChatList', appId], () =>
getShareChatList<FeishuType>({ appId, type: PublishChannelEnum.feishu })
);
return (
<Box position={'relative'} pt={3} px={5} minH={'50vh'}>
<Flex justifyContent={'space-between'}>
<Box fontWeight={'bold'} fontSize={['md', 'xl']}>
{t('core.app.publish.Fei shu bot publish')}
</Box>
<Button
variant={'whitePrimary'}
colorScheme={'blue'}
size={['sm', 'md']}
{...(shareChatList.length >= 10
? {
isDisabled: true,
title: t('core.app.share.Amount limit tip')
}
: {})}
onClick={() => setEditFeiShuLinkData(defaultFeishuOutLinkForm)}
>
{t('core.app.share.Create link')}
</Button>
</Flex>
<TableContainer mt={3}>
<Table variant={'simple'} w={'100%'} overflowX={'auto'} fontSize={'sm'}>
<Thead>
<Tr>
<Th>{t('common.Name')}</Th>
<Th>{t('support.outlink.Usage points')}</Th>
{feConfigs?.isPlus && (
<>
<Th>{t('core.app.share.Ip limit title')}</Th>
<Th>{t('common.Expired Time')}</Th>
</>
)}
<Th>{t('common.Last use time')}</Th>
<Th></Th>
</Tr>
</Thead>
<Tbody>
{shareChatList.map((item) => (
<Tr key={item._id}>
<Td>{item.name}</Td>
<Td>
{Math.round(item.usagePoints)}
{feConfigs?.isPlus
? `${
item.limit?.maxUsagePoints && item.limit.maxUsagePoints > -1
? ` / ${item.limit.maxUsagePoints}`
: ` / ${t('common.Unlimited')}`
}`
: ''}
</Td>
{feConfigs?.isPlus && (
<>
<Td>{item?.limit?.QPM || '-'}</Td>
<Td>
{item?.limit?.expiredTime
? dayjs(item.limit?.expiredTime).format('YYYY/MM/DD\nHH:mm')
: '-'}
</Td>
</>
)}
<Td>
{item.lastTime ? t(formatTimeToChatTime(item.lastTime)) : t('common.Un used')}
</Td>
<Td display={'flex'} alignItems={'center'}>
<MyMenu
Button={
<MyIcon
name={'more'}
_hover={{ bg: 'myGray.100 ' }}
cursor={'pointer'}
borderRadius={'md'}
w={'14px'}
p={2}
/>
}
menuList={[
{
label: t('common.Edit'),
icon: 'edit',
onClick: () =>
setEditFeiShuLinkData({
_id: item._id,
name: item.name,
limit: item.limit,
app: item.app,
responseDetail: item.responseDetail,
defaultResponse: item.defaultResponse,
immediateResponse: item.immediateResponse
})
},
{
label: t('common.Delete'),
icon: 'delete',
onClick: async () => {
setIsLoading(true);
try {
await delShareChatById(item._id);
refetchShareChatList();
} catch (error) {
console.log(error);
}
setIsLoading(false);
}
}
]}
/>
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
{editFeiShuLinkData && (
<FeiShuEditModal
appId={appId}
// type={'feishu' as PublishChannelEnum}
defaultData={editFeiShuLinkData}
onCreate={(id) => {
refetchShareChatList();
setEditFeiShuLinkData(undefined);
}}
onEdit={() => {
toast({
status: 'success',
title: t('common.Update Successful')
});
refetchShareChatList();
setEditFeiShuLinkData(undefined);
}}
onClose={() => setEditFeiShuLinkData(undefined)}
/>
)}
{shareChatList.length === 0 && !isFetching && (
<Flex h={'100%'} flexDirection={'column'} alignItems={'center'} pt={'10vh'}>
<MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
<Box mt={2} color={'myGray.500'}>
{t('core.app.share.Not share link')}
</Box>
</Flex>
)}
<Loading loading={isFetching} fixed={false} />
</Box>
);
};
export default React.memo(FeiShu);

0
projects/app/src/pages/app/detail/components/OutLink/SelectUsingWayModal.tsx → projects/app/src/pages/app/detail/components/Publish/Link/SelectUsingWayModal.tsx
View File

70
projects/app/src/pages/app/detail/components/OutLink/Share.tsx → projects/app/src/pages/app/detail/components/Publish/Link/index.tsx
View File

@@ -32,8 +32,8 @@ import { useCopyData } from '@/web/common/hooks/useCopyData';
import { useForm } from 'react-hook-form';
import { defaultOutLinkForm } from '@/constants/app';
import type { OutLinkEditType, OutLinkSchema } from '@fastgpt/global/support/outLink/type.d';
import { useRequest } from '@fastgpt/web/hooks/useRequest';
import { OutLinkTypeEnum } from '@fastgpt/global/support/outLink/constant';
import { useRequest } from '@/web/common/hooks/useRequest';
import { PublishChannelEnum } from '@fastgpt/global/support/outLink/constant';
import { useTranslation } from 'next-i18next';
import { useToast } from '@fastgpt/web/hooks/useToast';
import { useSystemStore } from '@/web/common/system/useSystemStore';
@@ -47,7 +47,7 @@ import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
const SelectUsingWayModal = dynamic(() => import('./SelectUsingWayModal'));
const Share = ({ appId }: { appId: string }) => {
const Share = ({ appId }: { appId: string; type: PublishChannelEnum }) => {
const { t } = useTranslation();
const { Loading, setIsLoading } = useLoading();
const { feConfigs } = useSystemStore();
@@ -64,7 +64,9 @@ const Share = ({ appId }: { appId: string }) => {
isFetching,
data: shareChatList = [],
refetch: refetchShareChatList
} = useQuery(['initShareChatList', appId], () => getShareChatList(appId));
} = useQuery(['initShareChatList', appId], () =>
getShareChatList({ appId, type: PublishChannelEnum.share })
);
return (
<Box position={'relative'} pt={3} px={5} minH={'50vh'}>
@@ -95,12 +97,16 @@ const Share = ({ appId }: { appId: string }) => {
<Thead>
<Tr>
<Th>{t('common.Name')}</Th>
{feConfigs?.isPlus && (
<>
<Th>{t('common.Expired Time')}</Th>
</>
)}
<Th>{t('support.outlink.Usage points')}</Th>
<Th>{t('core.app.share.Is response quote')}</Th>
{feConfigs?.isPlus && (
<>
<Th>{t('core.app.share.Ip limit title')}</Th>
<Th>{t('common.Expired Time')}</Th>
<Th>{t('core.app.share.Role check')}</Th>
</>
)}
@@ -112,6 +118,15 @@ const Share = ({ appId }: { appId: string }) => {
{shareChatList.map((item) => (
<Tr key={item._id}>
<Td>{item.name}</Td>
{feConfigs?.isPlus && (
<>
<Td>
{item.limit?.expiredTime
? dayjs(item.limit.expiredTime).format('YYYY-MM-DD HH:mm')
: '-'}
</Td>
</>
)}
<Td>
{Math.round(item.usagePoints)}
{feConfigs?.isPlus
@@ -126,18 +141,14 @@ const Share = ({ appId }: { appId: string }) => {
{feConfigs?.isPlus && (
<>
<Td>{item?.limit?.QPM || '-'}</Td>
<Td>
{item?.limit?.expiredTime
? dayjs(item.limit?.expiredTime).format('YYYY/MM/DD\nHH:mm')
: '-'}
</Td>
<Th>{item?.limit?.hookUrl ? '✔' : '✖'}</Th>
</>
)}
<Td>{item.lastTime ? formatTimeToChatTime(item.lastTime) : t('common.Un used')}</Td>
<Td display={'flex'} alignItems={'center'}>
<Button
onClick={() => setSelectedLinkData(item)}
onClick={() => setSelectedLinkData(item as OutLinkSchema)}
size={'sm'}
mr={3}
variant={'whitePrimary'}
@@ -201,7 +212,7 @@ const Share = ({ appId }: { appId: string }) => {
{!!editLinkData && (
<EditLinkModal
appId={appId}
type={'share'}
type={PublishChannelEnum.share}
defaultData={editLinkData}
onCreate={(id) => {
const url = `${location.origin}/chat/share?shareId=${id}`;
@@ -242,7 +253,7 @@ function EditLinkModal({
onEdit
}: {
appId: string;
type: `${OutLinkTypeEnum}`;
type: PublishChannelEnum;
defaultData: OutLinkEditType;
onClose: () => void;
onCreate: (id: string) => void;
@@ -297,6 +308,22 @@ function EditLinkModal({
</Flex>
{feConfigs?.isPlus && (
<>
<Flex alignItems={'center'} mt={4}>
<Flex flex={'0 0 90px'} alignItems={'center'}>
{t('common.Expired Time')}
</Flex>
<Input
type="datetime-local"
defaultValue={
defaultData.limit?.expiredTime
? dayjs(defaultData.limit?.expiredTime).format('YYYY-MM-DDTHH:mm')
: ''
}
onChange={(e) => {
setValue('limit.expiredTime', new Date(e.target.value));
}}
/>
</Flex>
<Flex alignItems={'center'} mt={4}>
<Flex flex={'0 0 90px'} alignItems={'center'}>
QPM
@@ -330,22 +357,7 @@ function EditLinkModal({
})}
/>
</Flex>
<Flex alignItems={'center'} mt={4}>
<Flex flex={'0 0 90px'} alignItems={'center'}>
{t('common.Expired Time')}
</Flex>
<Input
type="datetime-local"
defaultValue={
defaultData.limit?.expiredTime
? dayjs(defaultData.limit?.expiredTime).format('YYYY-MM-DDTHH:mm')
: ''
}
onChange={(e) => {
setValue('limit.expiredTime', new Date(e.target.value));
}}
/>
</Flex>
<Flex alignItems={'center'} mt={4}>
<Flex flex={'0 0 90px'} alignItems={'center'}>
{t('outlink.token auth')}

64
projects/app/src/pages/app/detail/components/Publish/index.tsx Normal file
View File

@@ -0,0 +1,64 @@
import React, { useRef, useState } from 'react';
import { Box, useTheme } from '@chakra-ui/react';
import { PublishChannelEnum } from '@fastgpt/global/support/outLink/constant';
import dynamic from 'next/dynamic';
import MyRadio from '@/components/common/MyRadio';
import { useTranslation } from 'next-i18next';
import Link from './Link';
const API = dynamic(() => import('./API'));
const FeiShu = dynamic(() => import('./FeiShu'));
const OutLink = ({ appId }: { appId: string }) => {
const { t } = useTranslation();
const theme = useTheme();
const publishList = useRef([
{
icon: '/imgs/modal/shareFill.svg',
title: t('core.app.Share link'),
desc: t('core.app.Share link desc'),
value: PublishChannelEnum.share
},
{
icon: 'support/outlink/apikeyFill',
title: t('core.app.Api request'),
desc: t('core.app.Api request desc'),
value: PublishChannelEnum.apikey
}
// {
// icon: 'core/app/publish/lark',
// title: t('core.app.publish.Fei shu bot'),
// desc: t('core.app.publish.Fei Shu Bot Desc'),
// value: PublishChannelEnum.feishu
// }
]);
const [linkType, setLinkType] = useState<PublishChannelEnum>(PublishChannelEnum.share);
return (
<Box pt={[1, 5]}>
<Box fontWeight={'bold'} fontSize={['md', 'xl']} mb={2} px={[4, 8]}>
{t('core.app.navbar.Publish app')}
</Box>
<Box pb={[5, 7]} px={[4, 8]} borderBottom={theme.borders.base}>
<MyRadio
gridTemplateColumns={['repeat(1,1fr)', 'repeat(auto-fill, minmax(0, 300px))']}
iconSize={'20px'}
list={publishList.current}
value={linkType}
onChange={(e) => setLinkType(e as PublishChannelEnum)}
/>
</Box>
{linkType === PublishChannelEnum.share && (
<Link appId={appId} type={PublishChannelEnum.share} />
)}
{linkType === PublishChannelEnum.apikey && <API appId={appId} />}
{linkType === PublishChannelEnum.feishu && <FeiShu appId={appId} />}
</Box>
);
};
export default OutLink;

58
projects/app/src/pages/app/detail/components/SimpleEdit/ChatTest.tsx
View File

@@ -1,11 +1,9 @@
import { useAppStore } from '@/web/core/app/store/useAppStore';
import { useUserStore } from '@/web/support/user/useUserStore';
import { Box, Flex, IconButton } from '@chakra-ui/react';
import { useTranslation } from 'next-i18next';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import React, { useCallback, useEffect, useRef } from 'react';
import ChatBox from '@/components/ChatBox';
import type { ComponentRef, StartChatFnProps } from '@/components/ChatBox/type.d';
import { StoreNodeItemType } from '@fastgpt/global/core/workflow/type/index.d';
import { NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
import { streamFetch } from '@/web/common/api/fetch';
import MyTooltip from '@/components/MyTooltip';
@@ -13,27 +11,41 @@ import MyIcon from '@fastgpt/web/components/common/Icon';
import { getGuideModule } from '@fastgpt/global/core/workflow/utils';
import { checkChatSupportSelectFileByModules } from '@/web/core/chat/utils';
import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
import { StoreEdgeItemType } from '@fastgpt/global/core/workflow/type/edge';
import {
getDefaultEntryNodeIds,
initWorkflowEdgeStatus,
storeNodes2RuntimeNodes
} from '@fastgpt/global/core/workflow/runtime/utils';
import { useCreation, useMemoizedFn, useSafeState } from 'ahooks';
import { UseFormReturn } from 'react-hook-form';
import { AppSimpleEditFormType } from '@fastgpt/global/core/app/type';
import { useAppStore } from '@/web/core/app/store/useAppStore';
import { form2AppWorkflow } from '@/web/core/app/utils';
const ChatTest = ({ appId }: { appId: string }) => {
const ChatTest = ({
editForm,
appId
}: {
editForm: UseFormReturn<AppSimpleEditFormType, any>;
appId: string;
}) => {
const { t } = useTranslation();
const { userInfo } = useUserStore();
const { appDetail } = useAppStore();
const ChatBoxRef = useRef<ComponentRef>(null);
const [workflowData, setWorkflowData] = useState<{
nodes: StoreNodeItemType[];
edges: StoreEdgeItemType[];
}>({
nodes: [],
edges: []
});
const { appDetail } = useAppStore();
const startChat = useCallback(
const { watch } = editForm;
const [workflowData, setWorkflowData] = useSafeState({
nodes: appDetail.modules || [],
edges: appDetail.edges || []
});
const userGuideModule = useCreation(
() => getGuideModule(workflowData.nodes),
[workflowData.nodes]
);
const startChat = useMemoizedFn(
async ({ chatList, controller, generatingMessage, variables }: StartChatFnProps) => {
if (!workflowData) return Promise.reject('workflowData is empty');
@@ -72,8 +84,7 @@ const ChatTest = ({ appId }: { appId: string }) => {
});
return { responseText, responseData };
},
[workflowData, appId, appDetail.name]
}
);
const resetChatBox = useCallback(() => {
@@ -82,12 +93,15 @@ const ChatTest = ({ appId }: { appId: string }) => {
}, []);
useEffect(() => {
resetChatBox();
setWorkflowData({
nodes: appDetail.modules || [],
edges: appDetail.edges || []
const wat = watch((data) => {
const { nodes, edges } = form2AppWorkflow(data as AppSimpleEditFormType);
setWorkflowData({ nodes, edges });
});
}, [appDetail, resetChatBox]);
return () => {
wat.unsubscribe();
};
}, []);
return (
<Flex
@@ -124,7 +138,7 @@ const ChatTest = ({ appId }: { appId: string }) => {
appAvatar={appDetail.avatar}
userAvatar={userInfo?.avatar}
showMarkIcon
userGuideModule={getGuideModule(workflowData.nodes)}
userGuideModule={userGuideModule}
showFileSelector={checkChatSupportSelectFileByModules(workflowData.nodes)}
onStartChat={startChat}
onDelMessage={() => {}}

73
projects/app/src/pages/app/detail/components/SimpleEdit/EditForm.tsx
View File

@@ -1,10 +1,8 @@
import React, { useMemo, useState, useTransition } from 'react';
import React, { useMemo, useTransition } from 'react';
import { Box, Flex, Grid, BoxProps, useTheme, useDisclosure, Button } from '@chakra-ui/react';
import { useQuery } from '@tanstack/react-query';
import { AddIcon, QuestionOutlineIcon, SmallAddIcon } from '@chakra-ui/icons';
import { useForm, useFieldArray } from 'react-hook-form';
import { useFieldArray, UseFormReturn } from 'react-hook-form';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import { appWorkflow2Form, getDefaultAppForm } from '@fastgpt/global/core/app/utils';
import type { AppSimpleEditFormType } from '@fastgpt/global/core/app/type.d';
import { welcomeTextTip } from '@fastgpt/global/core/workflow/template/tip';
import { useRequest } from '@fastgpt/web/hooks/useRequest';
@@ -51,26 +49,24 @@ const LabelStyles: BoxProps = {
};
const EditForm = ({
editForm,
divRef,
isSticky
}: {
editForm: UseFormReturn<AppSimpleEditFormType, any>;
divRef: React.RefObject<HTMLDivElement>;
isSticky: boolean;
}) => {
const theme = useTheme();
const router = useRouter();
const { t } = useTranslation();
const { appDetail, publishApp } = useAppStore();
const { publishApp, appDetail } = useAppStore();
const { loadAllDatasets, allDatasets } = useDatasetStore();
const { isPc, llmModelList } = useSystemStore();
const [refresh, setRefresh] = useState(false);
const { allDatasets } = useDatasetStore();
const { llmModelList } = useSystemStore();
const [, startTst] = useTransition();
const { setValue, getValues, reset, handleSubmit, control, watch } =
useForm<AppSimpleEditFormType>({
defaultValues: getDefaultAppForm()
});
const { setValue, getValues, handleSubmit, control, watch } = editForm;
const { fields: datasets, replace: replaceKbList } = useFieldArray({
control,
@@ -107,6 +103,9 @@ const EditForm = ({
[t, variables]
);
const searchMode = watch('dataset.searchMode');
const tts = getValues('userGuide.tts');
const whisperConfig = getValues('userGuide.whisper');
const postQuestionGuide = getValues('userGuide.questionGuide');
const selectDatasets = useMemo(
() => allDatasets.filter((item) => datasets.find((dataset) => dataset.datasetId === item._id)),
@@ -118,7 +117,7 @@ const EditForm = ({
}, [selectLLMModel, llmModelList]);
/* on save app */
const { mutate: onSubmitSave, isLoading: isSaving } = useRequest({
const { mutate: onSubmitPublish, isLoading: isSaving } = useRequest({
mutationFn: async (data: AppSimpleEditFormType) => {
const { nodes, edges } = form2AppWorkflow(data);
@@ -132,22 +131,6 @@ const EditForm = ({
errorToast: t('common.Save Failed')
});
useQuery(
['init', appDetail],
() => {
const formatVal = appWorkflow2Form({
nodes: appDetail.modules
});
reset(formatVal);
setRefresh(!refresh);
return formatVal;
},
{
enabled: !!appDetail._id
}
);
useQuery(['loadAllDatasets'], loadAllDatasets);
return (
<Box>
{/* title */}
@@ -177,16 +160,23 @@ const EditForm = ({
<Button
isLoading={isSaving}
size={['sm', 'md']}
leftIcon={
appDetail.type === AppTypeEnum.simple ? (
<MyIcon name={'common/publishFill'} w={['14px', '16px']} />
) : undefined
}
variant={appDetail.type === AppTypeEnum.simple ? 'primary' : 'whitePrimary'}
onClick={() => {
if (appDetail.type !== AppTypeEnum.simple) {
openConfirmSave(handleSubmit((data) => onSubmitSave(data)))();
openConfirmSave(handleSubmit((data) => onSubmitPublish(data)))();
} else {
handleSubmit((data) => onSubmitSave(data))();
handleSubmit((data) => onSubmitPublish(data))();
}
}}
>
{isPc ? t('core.app.Save and preview') : t('common.Save')}
{appDetail.type !== AppTypeEnum.simple
? t('core.app.Change to simple mode')
: t('core.app.Publish')}
</Button>
</Flex>
@@ -272,7 +262,7 @@ const EditForm = ({
{t('common.Params')}
</Button>
</Flex>
{getValues('dataset.datasets').length > 0 && (
{datasetSearchSetting.datasets?.length > 0 && (
<Box my={3}>
<SearchParamsTip
searchMode={searchMode}
@@ -382,7 +372,6 @@ const EditForm = ({
variables={variables}
onChange={(e) => {
setValue('userGuide.variables', e);
setRefresh(!refresh);
}}
/>
</Box>
@@ -411,10 +400,9 @@ const EditForm = ({
{/* tts */}
<Box {...BoxStyles}>
<TTSSelect
value={getValues('userGuide.tts')}
value={tts}
onChange={(e) => {
setValue('userGuide.tts', e);
setRefresh((state) => !state);
}}
/>
</Box>
@@ -422,11 +410,10 @@ const EditForm = ({
{/* whisper */}
<Box {...BoxStyles}>
<WhisperConfig
isOpenAudio={getValues('userGuide.tts').type !== TTSTypeEnum.none}
value={getValues('userGuide.whisper')}
isOpenAudio={tts.type !== TTSTypeEnum.none}
value={whisperConfig}
onChange={(e) => {
setValue('userGuide.whisper', e);
setRefresh((state) => !state);
}}
/>
</Box>
@@ -434,12 +421,10 @@ const EditForm = ({
{/* question guide */}
<Box {...BoxStyles} borderBottom={'none'}>
<QGSwitch
isChecked={getValues('userGuide.questionGuide')}
isChecked={postQuestionGuide}
size={'lg'}
onChange={(e) => {
const value = e.target.checked;
setValue('userGuide.questionGuide', value);
setRefresh((state) => !state);
setValue('userGuide.questionGuide', e.target.checked);
}}
/>
</Box>
@@ -468,8 +453,6 @@ const EditForm = ({
...getValues('dataset'),
...e
});
setRefresh((state) => !state);
}}
/>
)}

23
projects/app/src/pages/app/detail/components/SimpleEdit/index.tsx
View File

@@ -2,14 +2,33 @@ import React from 'react';
import { Box, Grid } from '@chakra-ui/react';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import { useSticky } from '@/web/common/hooks/useSticky';
import { useMount } from 'ahooks';
import { useDatasetStore } from '@/web/core/dataset/store/dataset';
import { useAppStore } from '@/web/core/app/store/useAppStore';
import { useForm } from 'react-hook-form';
import { appWorkflow2Form } from '@fastgpt/global/core/app/utils';
import ChatTest from './ChatTest';
import AppCard from './AppCard';
import EditForm from './EditForm';
import { AppSimpleEditFormType } from '@fastgpt/global/core/app/type';
const SimpleEdit = ({ appId }: { appId: string }) => {
const { isPc } = useSystemStore();
const { parentRef, divRef, isSticky } = useSticky();
const { loadAllDatasets } = useDatasetStore();
const { appDetail } = useAppStore();
const editForm = useForm<AppSimpleEditFormType>({
defaultValues: appWorkflow2Form({
nodes: appDetail.modules
})
});
// show selected dataset
useMount(() => {
loadAllDatasets();
});
return (
<Grid gridTemplateColumns={['1fr', '560px 1fr']} h={'100%'}>
@@ -25,10 +44,10 @@ const SimpleEdit = ({ appId }: { appId: string }) => {
<AppCard appId={appId} />
<Box mt={2}>
<EditForm divRef={divRef} isSticky={isSticky} />
<EditForm editForm={editForm} divRef={divRef} isSticky={isSticky} />
</Box>
</Box>
{isPc && <ChatTest appId={appId} />}
{isPc && <ChatTest editForm={editForm} appId={appId} />}
</Grid>
);
};

164
projects/app/src/pages/app/detail/index.tsx
View File

@@ -21,7 +21,7 @@ import { useTranslation } from 'next-i18next';
const FlowEdit = dynamic(() => import('./components/FlowEdit'), {
loading: () => <Loading />
});
const OutLink = dynamic(() => import('./components/OutLink'), {});
const Publish = dynamic(() => import('./components/Publish'), {});
const Logs = dynamic(() => import('./components/Logs'), {});
enum TabEnum {
@@ -39,7 +39,7 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
const { feConfigs } = useSystemStore();
const { toast } = useToast();
const { appId } = router.query as { appId: string };
const { appDetail, loadAppDetail, clearAppModules } = useAppStore();
const { appDetail, loadAppDetail } = useAppStore();
const setCurrentTab = useCallback(
(tab: `${TabEnum}`) => {
@@ -82,7 +82,7 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
const onCloseFlowEdit = useCallback(() => setCurrentTab(TabEnum.simpleEdit), [setCurrentTab]);
useQuery([appId], () => loadAppDetail(appId, true), {
const { isSuccess, isLoading } = useQuery([appId], () => loadAppDetail(appId, true), {
onError(err: any) {
toast({
title: err?.message || t('core.app.error.Get app failed'),
@@ -100,88 +100,90 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
<Head>
<title>{appDetail.name}</title>
</Head>
<PageContainer>
<Flex flexDirection={['column', 'row']} h={'100%'}>
{/* pc tab */}
<Box
display={['none', 'flex']}
flexDirection={'column'}
p={4}
w={'180px'}
borderRight={theme.borders.base}
>
<Flex mb={4} alignItems={'center'}>
<Avatar src={appDetail.avatar} w={'34px'} borderRadius={'md'} />
<Box ml={2} fontWeight={'bold'}>
<PageContainer isLoading={isLoading}>
{isSuccess && (
<Flex flexDirection={['column', 'row']} h={'100%'}>
{/* pc tab */}
<Box
display={['none', 'flex']}
flexDirection={'column'}
p={4}
w={'180px'}
borderRight={theme.borders.base}
>
<Flex mb={4} alignItems={'center'}>
<Avatar src={appDetail.avatar} w={'34px'} borderRadius={'md'} />
<Box ml={2} fontWeight={'bold'}>
{appDetail.name}
</Box>
</Flex>
<SideTabs
flex={1}
mx={'auto'}
mt={2}
w={'100%'}
list={tabList}
activeId={currentTab}
onChange={(e: any) => {
if (e === 'startChat') {
router.push(`/chat?appId=${appId}`);
} else {
setCurrentTab(e);
}
}}
/>
<Flex
alignItems={'center'}
cursor={'pointer'}
py={2}
px={3}
borderRadius={'md'}
_hover={{ bg: 'myGray.100' }}
onClick={() => router.replace('/app/list')}
>
<IconButton
mr={3}
icon={<MyIcon name={'common/backFill'} w={'18px'} color={'primary.500'} />}
bg={'white'}
boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
size={'smSquare'}
borderRadius={'50%'}
aria-label={''}
/>
{t('app.My Apps')}
</Flex>
</Box>
{/* phone tab */}
<Box display={['block', 'none']} textAlign={'center'} py={3}>
<Box className="textlg" fontSize={'xl'} fontWeight={'bold'}>
{appDetail.name}
</Box>
</Flex>
<SideTabs
flex={1}
mx={'auto'}
mt={2}
w={'100%'}
list={tabList}
activeId={currentTab}
onChange={(e: any) => {
if (e === 'startChat') {
router.push(`/chat?appId=${appId}`);
} else {
setCurrentTab(e);
}
}}
/>
<Flex
alignItems={'center'}
cursor={'pointer'}
py={2}
px={3}
borderRadius={'md'}
_hover={{ bg: 'myGray.100' }}
onClick={() => router.replace('/app/list')}
>
<IconButton
mr={3}
icon={<MyIcon name={'common/backFill'} w={'18px'} color={'primary.500'} />}
bg={'white'}
boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
size={'smSquare'}
borderRadius={'50%'}
aria-label={''}
<Tabs
mx={'auto'}
mt={2}
w={'100%'}
list={tabList}
size={'sm'}
activeId={currentTab}
onChange={(e: any) => {
if (e === 'startChat') {
router.push(`/chat?appId=${appId}`);
} else {
setCurrentTab(e);
}
}}
/>
{t('app.My Apps')}
</Flex>
</Box>
{/* phone tab */}
<Box display={['block', 'none']} textAlign={'center'} py={3}>
<Box className="textlg" fontSize={'xl'} fontWeight={'bold'}>
{appDetail.name}
</Box>
<Tabs
mx={'auto'}
mt={2}
w={'100%'}
list={tabList}
size={'sm'}
activeId={currentTab}
onChange={(e: any) => {
if (e === 'startChat') {
router.push(`/chat?appId=${appId}`);
} else {
setCurrentTab(e);
}
}}
/>
</Box>
<Box flex={'1 0 0'} h={[0, '100%']} overflow={['overlay', '']}>
{currentTab === TabEnum.simpleEdit && <SimpleEdit appId={appId} />}
{currentTab === TabEnum.adEdit && appDetail && (
<FlowEdit app={appDetail} onClose={onCloseFlowEdit} />
)}
{currentTab === TabEnum.logs && <Logs appId={appId} />}
{currentTab === TabEnum.publish && <OutLink appId={appId} />}
</Box>
</Flex>
<Box flex={'1 0 0'} h={[0, '100%']} overflow={['overlay', '']}>
{currentTab === TabEnum.simpleEdit && <SimpleEdit appId={appId} />}
{currentTab === TabEnum.adEdit && appDetail && (
<FlowEdit app={appDetail} onClose={onCloseFlowEdit} />
)}
{currentTab === TabEnum.logs && <Logs appId={appId} />}
{currentTab === TabEnum.publish && <Publish appId={appId} />}
</Box>
</Flex>
)}
</PageContainer>
</>
);

10
projects/app/src/pages/plugin/edit/Header.tsx
View File

@@ -11,14 +11,12 @@ import { flowNode2StoreNodes } from '@/components/core/workflow/utils';
import { putUpdatePlugin } from '@/web/core/plugin/api';
import { useToast } from '@fastgpt/web/hooks/useToast';
import MyMenu from '@fastgpt/web/components/common/MyMenu';
import {
getWorkflowStore,
useFlowProviderStore
} from '@/components/core/workflow/Flow/FlowProvider';
import {
checkWorkflowNodeAndConnection,
filterSensitiveNodesData
} from '@/web/core/workflow/utils';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext, getWorkflowStore } from '@/components/core/workflow/context';
const ImportSettings = dynamic(() => import('@/components/core/workflow/Flow/ImportSettings'));
@@ -29,11 +27,13 @@ const Header = ({ plugin, onClose }: Props) => {
const { t } = useTranslation();
const { toast } = useToast();
const { copyData } = useCopyData();
const { edges, onUpdateNodeError } = useFlowProviderStore();
const edges = useContextSelector(WorkflowContext, (v) => v.edges);
const onUpdateNodeError = useContextSelector(WorkflowContext, (v) => v.onUpdateNodeError);
const { isOpen: isOpenImport, onOpen: onOpenImport, onClose: onCloseImport } = useDisclosure();
const flowData2StoreDataAndCheck = useCallback(async () => {
const { nodes } = await getWorkflowStore();
const checkResults = checkWorkflowNodeAndConnection({ nodes, edges });
if (!checkResults) {
const storeNodes = flowNode2StoreNodes({ nodes, edges });

11
projects/app/src/pages/plugin/edit/index.tsx
View File

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
import { useRouter } from 'next/router';
import Header from './Header';
import Flow from '@/components/core/workflow/Flow';
import FlowProvider, { useFlowProviderStore } from '@/components/core/workflow/Flow/FlowProvider';
import { pluginSystemModuleTemplates } from '@fastgpt/global/core/workflow/template/constants';
import { serviceSideProps } from '@/web/common/utils/i18n';
import { useQuery } from '@tanstack/react-query';
@@ -14,6 +13,8 @@ import { useTranslation } from 'next-i18next';
import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
import { v1Workflow2V2 } from '@/web/core/workflow/adapt';
import { useBeforeunload } from '@fastgpt/web/hooks/useBeforeunload';
import WorkflowContextProvider, { WorkflowContext } from '@/components/core/workflow/context';
import { useContextSelector } from 'use-context-selector';
type Props = { pluginId: string };
@@ -21,7 +22,7 @@ const Render = ({ pluginId }: Props) => {
const { t } = useTranslation();
const router = useRouter();
const { toast } = useToast();
const { initData } = useFlowProviderStore();
const initData = useContextSelector(WorkflowContext, (v) => v.initData);
const { data: pluginDetail } = useQuery(
['getOnePlugin', pluginId],
@@ -78,9 +79,11 @@ const Render = ({ pluginId }: Props) => {
export default function FlowEdit(props: any) {
return (
<FlowProvider mode={'plugin'} basicNodeTemplates={pluginSystemModuleTemplates}>
<WorkflowContextProvider
value={{ mode: 'plugin', basicNodeTemplates: pluginSystemModuleTemplates }}
>
<Render {...props} />
</FlowProvider>
</WorkflowContextProvider>
);
}

5
projects/app/src/web/common/utils/voice.ts
View File

@@ -6,6 +6,7 @@ import { TTSTypeEnum } from '@/constants/app';
import { useTranslation } from 'next-i18next';
import type { OutLinkChatAuthProps } from '@fastgpt/global/support/permission/chat.d';
import { getToken } from '@/web/support/user/auth';
import { useMount } from 'ahooks';
const contentType = 'audio/mpeg';
const splitMarker = 'SPLIT_MARKER';
@@ -329,7 +330,7 @@ export const useAudioPlay = (props?: OutLinkChatAuthProps & { ttsConfig?: AppTTS
);
// listen audio status
useEffect(() => {
useMount(() => {
const audio = new Audio();
audioRef.current = audio;
@@ -357,7 +358,7 @@ export const useAudioPlay = (props?: OutLinkChatAuthProps & { ttsConfig?: AppTTS
audio.remove();
window.removeEventListener('beforeunload', listen);
};
}, []);
});
return {
audio: audioRef.current,

15
projects/app/src/web/context/useInitApp.ts
View File

@@ -1,10 +1,11 @@
import { useCallback, useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { clientInitData } from '@/web/common/system/staticData';
import { useTranslation } from 'next-i18next';
import { useRouter } from 'next/router';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import type { FastGPTFeConfigsType } from '@fastgpt/global/common/system/types/index.d';
import { change2DefaultLng, setLngStore } from '@/web/common/utils/i18n';
import { useMemoizedFn, useMount } from 'ahooks';
export const useInitApp = () => {
const router = useRouter();
@@ -14,7 +15,7 @@ export const useInitApp = () => {
const [scripts, setScripts] = useState<FastGPTFeConfigsType['scripts']>([]);
const [title, setTitle] = useState(process.env.SYSTEM_NAME || 'AI');
const initFetch = useCallback(async () => {
const initFetch = useMemoizedFn(async () => {
const {
feConfigs: { scripts, isPlus, show_git, systemTitle }
} = await clientInitData();
@@ -35,18 +36,18 @@ export const useInitApp = () => {
setScripts(scripts || []);
setInitd();
}, [loadGitStar, setInitd]);
});
const initUserLanguage = useCallback(() => {
const initUserLanguage = useMemoizedFn(() => {
// get default language
const targetLng = change2DefaultLng(i18n.language);
if (targetLng) {
setLngStore(targetLng);
router.replace(router.asPath, undefined, { locale: targetLng });
}
}, []);
});
useEffect(() => {
useMount(() => {
initFetch();
initUserLanguage();
@@ -67,7 +68,7 @@ export const useInitApp = () => {
return () => {
window.removeEventListener('error', errorTrack);
};
}, []);
});
useEffect(() => {
hiId && localStorage.setItem('inviterId', hiId);

17
projects/app/src/web/core/app/utils.ts
View File

@@ -704,7 +704,7 @@ export function form2AppWorkflow(data: AppSimpleEditFormType): WorkflowType {
...pluginTool.map((tool) => tool.edges).flat()
]
};
console.log(config);
return config;
}
@@ -724,23 +724,28 @@ export const getSystemVariables = (t: TFunction): EditorVariablePickerType[] =>
return [
{
key: 'appId',
label: t('core.module.http.AppId')
label: t('core.module.http.AppId'),
valueType: WorkflowIOValueTypeEnum.string
},
{
key: 'chatId',
label: t('core.module.http.ChatId')
label: t('core.module.http.ChatId'),
valueType: WorkflowIOValueTypeEnum.string
},
{
key: 'responseChatItemId',
label: t('core.module.http.ResponseChatItemId')
label: t('core.module.http.ResponseChatItemId'),
valueType: WorkflowIOValueTypeEnum.string
},
{
key: 'histories',
label: t('core.module.http.Histories')
label: t('core.module.http.Histories'),
valueType: WorkflowIOValueTypeEnum.chatHistory
},
{
key: 'cTime',
label: t('core.module.http.Current time')
label: t('core.module.http.Current time'),
valueType: WorkflowIOValueTypeEnum.string
}
];
};

14
projects/app/src/web/core/workflow/adapt.ts
View File

@@ -16,7 +16,7 @@ import {
StoreNodeItemType
} from '@fastgpt/global/core/workflow/type';
import { VARIABLE_NODE_ID } from '@fastgpt/global/core/workflow/constants';
import { getHandleId, splitGuideModule } from '@fastgpt/global/core/workflow/utils';
import { getHandleId } from '@fastgpt/global/core/workflow/utils';
import { StoreEdgeItemType } from '@fastgpt/global/core/workflow/type/edge';
import { LLMModelTypeEnum } from '@fastgpt/global/core/ai/constants';
import {
@@ -24,8 +24,10 @@ import {
FlowNodeOutputItemType
} from '@fastgpt/global/core/workflow/type/io';
import { PluginTypeEnum } from '@fastgpt/global/core/plugin/constants';
import { getWorkflowGlobalVariables } from './utils';
import { TFunction } from 'next-i18next';
export const systemConfigNode2VariableNode = (node: FlowNodeItemType) => {
export const getGlobalVariableNode = (nodes: FlowNodeItemType[], t: TFunction) => {
const template: FlowNodeTemplateType = {
id: FlowNodeTypeEnum.globalVariable,
templateType: FlowNodeTemplateTypeEnum.other,
@@ -41,17 +43,17 @@ export const systemConfigNode2VariableNode = (node: FlowNodeItemType) => {
outputs: []
};
const { variableModules } = splitGuideModule(node);
const globalVariables = getWorkflowGlobalVariables(nodes, t);
const variableNode: FlowNodeItemType = {
nodeId: VARIABLE_NODE_ID,
...template,
outputs: variableModules.map((item) => ({
outputs: globalVariables.map((item) => ({
id: item.key,
type: FlowNodeOutputTypeEnum.dynamic,
type: FlowNodeOutputTypeEnum.static,
label: item.label,
key: item.key,
valueType: WorkflowIOValueTypeEnum.any
valueType: item.valueType || WorkflowIOValueTypeEnum.any
}))
};

37
projects/app/src/web/core/workflow/utils.ts
View File

@@ -13,9 +13,17 @@ import {
import { EmptyNode } from '@fastgpt/global/core/workflow/template/system/emptyNode';
import { StoreEdgeItemType } from '@fastgpt/global/core/workflow/type/edge';
import { getNanoid } from '@fastgpt/global/common/string/tools';
import { systemConfigNode2VariableNode } from './adapt';
import { getGlobalVariableNode } from './adapt';
import { VARIABLE_NODE_ID } from '@fastgpt/global/core/workflow/constants';
import { NodeInputKeyEnum, NodeOutputKeyEnum } from '@fastgpt/global/core/workflow/constants';
import { EditorVariablePickerType } from '@fastgpt/web/components/common/Textarea/PromptEditor/type';
import {
formatEditorVariablePickerIcon,
getGuideModule,
splitGuideModule
} from '@fastgpt/global/core/workflow/utils';
import { getSystemVariables } from '../app/utils';
import { TFunction } from 'next-i18next';
export const nodeTemplate2FlowNode = ({
template,
@@ -97,11 +105,13 @@ export const storeEdgesRenderEdge = ({ edge }: { edge: StoreEdgeItemType }) => {
export const computedNodeInputReference = ({
nodeId,
nodes,
edges
edges,
t
}: {
nodeId: string;
nodes: FlowNodeItemType[];
edges: Edge[];
t: TFunction;
}) => {
// get current node
const node = nodes.find((item) => item.nodeId === nodeId);
@@ -126,14 +136,7 @@ export const computedNodeInputReference = ({
};
findSourceNode(nodeId);
// add system config node
const systemConfigNode = nodes.find(
(item) => item.flowNodeType === FlowNodeTypeEnum.systemConfig
);
if (systemConfigNode) {
sourceNodes.unshift(systemConfigNode2VariableNode(systemConfigNode));
}
sourceNodes.unshift(getGlobalVariableNode(nodes, t));
return sourceNodes;
};
@@ -232,3 +235,17 @@ export const filterSensitiveNodesData = (nodes: StoreNodeItemType[]) => {
});
return cloneNodes;
};
/* get workflowStart output to global variables */
export const getWorkflowGlobalVariables = (
nodes: FlowNodeItemType[],
t: TFunction
): EditorVariablePickerType[] => {
const globalVariables = formatEditorVariablePickerIcon(
splitGuideModule(getGuideModule(nodes))?.variableModules || []
);
const systemVariables = getSystemVariables(t);
return [...globalVariables, ...systemVariables];
};

44
projects/app/src/web/support/outLink/api.ts
View File

@@ -1,26 +1,40 @@
import { GET, POST, DELETE } from '@/web/common/api/request';
import type { OutLinkEditType, OutLinkSchema } from '@fastgpt/global/support/outLink/type.d';
/**
* create a shareChat
*/
export const createShareChat = (
data: OutLinkEditType & {
// create a shareChat
export function createShareChat<T>(
data: OutLinkEditType<T> & {
appId: string;
type: OutLinkSchema['type'];
}
) => POST<string>(`/support/outLink/create`, data);
) {
return POST<string>(`/support/outLink/create`, data);
}
export const putShareChat = (data: OutLinkEditType) =>
POST<string>(`/support/outLink/update`, data);
/**
* get shareChat
*/
export const getShareChatList = (appId: string) =>
GET<OutLinkSchema[]>(`/support/outLink/list`, { appId });
// get shareChat
export function getShareChatList<T>(data: { appId: string; type: OutLinkSchema<T>['type'] }) {
return GET<OutLinkSchema<T>[]>(`/support/outLink/list`, data);
}
/**
* delete a shareChat
*/
export const delShareChatById = (id: string) => DELETE(`/support/outLink/delete?id=${id}`);
// delete a shareChat
export function delShareChatById(id: string) {
return DELETE(`/support/outLink/delete?id=${id}`);
}
// update a shareChat
export function updateShareChat<T>(data: OutLinkEditType<T>) {
return POST<string>(`/support/outLink/update`, data);
}
// /**
// * create a shareChat
// */
// export const createWecomLinkChat = (
// data: OutLinkConfigEditType & {
// appId: string;
// type: OutLinkSchema['type'];
// }
// ) => POST<string>(`/support/outLink/create`, data);

2
projects/app/src/web/support/user/hooks/useSendCode.ts
View File

@@ -57,7 +57,7 @@ export const useSendCode = () => {
}
setCodeSending(false);
},
[codeCountDown, toast]
[codeCountDown, feConfigs?.googleClientVerKey, toast]
);
return {