4.8 test fix (#1385)

* fix: tool name cannot startwith number

* fix: chatbox update

* fix: chatbox

* perf: drag ui

* perf: drag component

* drag component

packages/web/components/common/DndDrag/DragIcon.tsx

@@ -0,0 +1,14 @@
+import { DragHandleIcon } from '@chakra-ui/icons';
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+import { DraggableProvided } from 'react-beautiful-dnd';
+
+const DragIcon = ({ provided }: { provided: DraggableProvided }) => {
+  return (
+    <Box {...provided.dragHandleProps}>
+      <DragHandleIcon color={'myGray.500'} _hover={{ color: 'primary.600' }} />
+    </Box>
+  );
+};
+
+export default DragIcon;

packages/web/components/common/DndDrag/index.tsx

@@ -0,0 +1,61 @@
+import { Box } from '@chakra-ui/react';
+import React, { useState } from 'react';
+import {
+  DragDropContext,
+  DroppableProps,
+  Droppable,
+  DraggableChildrenFn,
+  DragStart,
+  DropResult
+} from 'react-beautiful-dnd';
+
+type Props<T = any> = {
+  onDragEndCb: (result: T[]) => void;
+  renderClone?: DraggableChildrenFn;
+  children: DroppableProps['children'];
+  dataList: T[];
+};
+
+function DndDrag<T>({ children, renderClone, onDragEndCb, dataList }: Props<T>) {
+  const [draggingItemHeight, setDraggingItemHeight] = useState(0);
+
+  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;
+    }
+    setDraggingItemHeight(0);
+
+    const startIndex = result.source.index;
+    const endIndex = result.destination.index;
+
+    const list = Array.from(dataList);
+    const [removed] = list.splice(startIndex, 1);
+    list.splice(endIndex, 0, removed);
+
+    onDragEndCb(list);
+  };
+
+  return (
+    <DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
+      <Droppable droppableId="droppable" renderClone={renderClone}>
+        {(provided, snapshot) => {
+          return (
+            <Box {...provided.droppableProps} ref={provided.innerRef}>
+              {children(provided, snapshot)}
+              {snapshot.isDraggingOver && <Box height={draggingItemHeight} />}
+            </Box>
+          );
+        }}
+      </Droppable>
+    </DragDropContext>
+  );
+}
+
+export default DndDrag;
+
+export * from 'react-beautiful-dnd';

packages/web/package.json

@@ -31,12 +31,14 @@
     "react": "18.2.0",
     "react-day-picker": "^8.7.1",
     "react-dom": "18.2.0",
-    "react-i18next": "13.5.0"
+    "react-i18next": "13.5.0",
+    "react-beautiful-dnd": "^13.1.1"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.191",
     "@types/papaparse": "^5.3.7",
     "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.0"
+    "@types/react-dom": "18.2.0",
+    "@types/react-beautiful-dnd": "^13.1.8"
   }
 }