ChatGPT/FastGPT
1
0
Fork 0
mirror of https://github.com/labring/FastGPT.git synced 2025-08-02 12:48:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

4.8 test fix (#1385)

Browse Source 
* fix: tool name cannot startwith number

* fix: chatbox update

* fix: chatbox

* perf: drag ui

* perf: drag component

* drag component
This commit is contained in:
Archer
2024-05-07 18:41:34 +08:00
committed by GitHub
parent 2a99e46353
commit fef1a1702b
16 changed files with 203 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,8 @@
import { Box, Button, Flex } from '@chakra-ui/react';
import { DraggableProvided, DraggableStateSnapshot } from 'react-beautiful-dnd';
import {
DraggableProvided,
DraggableStateSnapshot
} from '@fastgpt/web/components/common/DndDrag/index';
import Container from '../../components/Container';
import { DragHandleIcon, MinusIcon, SmallAddIcon } from '@chakra-ui/icons';
import { IfElseListItemType } from '@fastgpt/global/core/workflow/template/system/ifElse/type';
@@ -25,6 +28,7 @@ import { getElseIFLabel, getHandleId } from '@fastgpt/global/core/workflow/utils
import { SourceHandle } from '../render/Handle';
import { Position, useReactFlow } from 'reactflow';
import { getReferenceDataValueType } from '@/web/core/workflow/utils';
import DragIcon from '@fastgpt/web/components/common/DndDrag/DragIcon';
const ListItem = ({
provided,
@@ -63,11 +67,7 @@ const ListItem = ({
>
<Container w={snapshot.isDragging ? '' : 'full'} className="nodrag">
<Flex mb={4} alignItems={'center'}>
{ifElseList.length > 1 && (
<Box {...provided.dragHandleProps}>
<DragHandleIcon color={'blackAlpha.600'} />
</Box>
)}
{ifElseList.length > 1 && <DragIcon provided={provided} />}
<Box color={'black'} fontSize={'lg'} ml={2}>
{getElseIFLabel(conditionIndex)}
</Box>

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

@@ -9,7 +9,7 @@ import { IfElseListItemType } from '@fastgpt/global/core/workflow/template/syste
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../../context';
import Container from '../../components/Container';
import { DragDropContext, DragStart, Draggable, DropResult, Droppable } from 'react-beautiful-dnd';
import DndDrag, { Draggable, DropResult } from '@fastgpt/web/components/common/DndDrag/index';
import { SourceHandle } from '../render/Handle';
import { getHandleId } from '@fastgpt/global/core/workflow/utils';
import ListItem from './ListItem';
@@ -20,8 +20,6 @@ const NodeIfElse = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
const { nodeId, inputs = [] } = data;
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const [draggingItemHeight, setDraggingItemHeight] = useState(0);
const ifElseList = useMemo(
() =>
(inputs.find((input) => input.key === NodeInputKeyEnum.ifElseList)
@@ -47,73 +45,49 @@ const NodeIfElse = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
[inputs, nodeId, onChangeNode]
);
const reorder = (list: IfElseListItemType[], startIndex: number, endIndex: number) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
const onDragStart = (start: DragStart) => {
const draggingNode = document.querySelector(`[data-rbd-draggable-id="${start.draggableId}"]`);
setDraggingItemHeight(draggingNode?.getBoundingClientRect().height || 0);
};
const onDragEnd = (result: DropResult) => {
if (!result.destination) {
return;
}
const newList = reorder(ifElseList, result.source.index, result.destination.index);
onUpdateIfElseList(newList);
setDraggingItemHeight(0);
};
return (
<NodeCard selected={selected} maxW={'1000px'} {...data}>
<Box px={4}>
<DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
<Droppable
droppableId="droppable"
renderClone={(provided, snapshot, rubric) => (
<ListItem
provided={provided}
snapshot={snapshot}
conditionItem={ifElseList[rubric.source.index]}
conditionIndex={rubric.source.index}
ifElseList={ifElseList}
onUpdateIfElseList={onUpdateIfElseList}
nodeId={nodeId}
/>
)}
>
{(provided, snapshot) => (
<Box {...provided.droppableProps} ref={provided.innerRef}>
{ifElseList.map((conditionItem, conditionIndex) => (
<Draggable
key={conditionIndex}
draggableId={conditionIndex.toString()}
index={conditionIndex}
>
{(provided, snapshot) => (
<ListItem
provided={provided}
snapshot={snapshot}
conditionItem={conditionItem}
conditionIndex={conditionIndex}
ifElseList={ifElseList}
onUpdateIfElseList={onUpdateIfElseList}
nodeId={nodeId}
/>
)}
</Draggable>
))}
{snapshot.isDraggingOver && <Box height={draggingItemHeight} />}
</Box>
)}
</Droppable>
</DragDropContext>
<Box px={4} cursor={'default'}>
<DndDrag<IfElseListItemType>
onDragEndCb={(list) => onUpdateIfElseList(list)}
dataList={ifElseList}
renderClone={(provided, snapshot, rubric) => (
<ListItem
provided={provided}
snapshot={snapshot}
conditionItem={ifElseList[rubric.source.index]}
conditionIndex={rubric.source.index}
ifElseList={ifElseList}
onUpdateIfElseList={onUpdateIfElseList}
nodeId={nodeId}
/>
)}
>
{(provided) => (
<Box {...provided.droppableProps} ref={provided.innerRef}>
{ifElseList.map((conditionItem, conditionIndex) => (
<Draggable
key={conditionIndex}
draggableId={conditionIndex.toString()}
index={conditionIndex}
>
{(provided, snapshot) => (
<ListItem
provided={provided}
snapshot={snapshot}
conditionItem={conditionItem}
conditionIndex={conditionIndex}
ifElseList={ifElseList}
onUpdateIfElseList={onUpdateIfElseList}
nodeId={nodeId}
/>
)}
</Draggable>
))}
</Box>
)}
</DndDrag>
<Container position={'relative'}>
<Flex alignItems={'center'}>
<Box color={'black'} fontSize={'lg'} ml={2}>