Refactor: UmiJs -> Vite (#12410)

### What problem does this PR solve?

Refactor: UmiJs -> Vite+React

### Type of change

- [x] Refactoring

---------

Co-authored-by: Liu An <asiro@qq.com>

web/src/pages/agent/canvas/context-menu/index.tsx

@@ -1,7 +1,7 @@
 import { NodeMouseHandler, useReactFlow } from '@xyflow/react';
 import { useCallback, useRef, useState } from 'react';
 
-import styles from './index.less';
+import styles from './index.module.less';
 
 export interface INodeContextMenu {
   id: string;

web/src/pages/agent/canvas/index.tsx

@@ -50,7 +50,7 @@ import { useStopMessageUnmount } from '../hooks/use-stop-message';
 import { LogSheet } from '../log-sheet';
 import RunSheet from '../run-sheet';
 import { ButtonEdge } from './edge';
-import styles from './index.less';
+import styles from './index.module.less';
 import { RagNode } from './node';
 import { AgentNode } from './node/agent-node';
 import { BeginNode } from './node/begin-node';

web/src/pages/agent/canvas/node/begin-node.tsx

@@ -18,7 +18,7 @@ import OperatorIcon from '../../operator-icon';
 import { LabelCard } from './card';
 import { CommonHandle } from './handle';
 import { RightHandleStyle } from './handle-icon';
-import styles from './index.less';
+import styles from './index.module.less';
 import { NodeWrapper } from './node-wrapper';
 
 function InnerBeginNode({

web/src/pages/agent/canvas/node/file-node.tsx

@@ -14,7 +14,7 @@ import { BeginQuery } from '../../interface';
 import OperatorIcon from '../../operator-icon';
 import { CommonHandle } from './handle';
 import { RightHandleStyle } from './handle-icon';
-import styles from './index.less';
+import styles from './index.module.less';
 import { NodeWrapper } from './node-wrapper';
 
 // TODO: do not allow other nodes to connect to this node

web/src/pages/agent/canvas/node/keyword-node.tsx

@@ -6,7 +6,7 @@ import { get } from 'lodash';
 import { memo } from 'react';
 import { LLMLabelCard } from './card';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import styles from './index.less';
+import styles from './index.module.less';
 import NodeHeader from './node-header';
 
 export function InnerKeywordNode({

web/src/pages/agent/canvas/node/message-node.tsx

@@ -8,7 +8,7 @@ import { get } from 'lodash';
 import { memo } from 'react';
 import { LabelCard } from './card';
 import { LeftEndHandle } from './handle';
-import styles from './index.less';
+import styles from './index.module.less';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
 import { ToolBar } from './toolbar';
@@ -17,7 +17,6 @@ import { VariableDisplay } from './variable-display';
 function InnerMessageNode({ id, data, selected }: NodeProps<IMessageNode>) {
   const messages: string[] = get(data, 'form.content', []);
   const { getLabel } = useGetVariableLabelOrTypeByValue({ nodeId: id });
-
   return (
     <ToolBar selected={selected} id={id} label={data.label}>
       <NodeWrapper selected={selected} id={id}>

web/src/pages/agent/canvas/node/retrieval-node.tsx

@@ -12,7 +12,7 @@ import { RetrievalFormSchemaType } from '../../form/retrieval-form/next';
 import { useGetVariableLabelOrTypeByValue } from '../../hooks/use-get-begin-query';
 import { LabelCard } from './card';
 import { CommonHandle, LeftEndHandle } from './handle';
-import styles from './index.less';
+import styles from './index.module.less';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
 import { ToolBar } from './toolbar';

web/src/pages/agent/canvas/node/rewrite-node.tsx

@@ -6,7 +6,7 @@ import { get } from 'lodash';
 import { memo } from 'react';
 import { LLMLabelCard } from './card';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import styles from './index.less';
+import styles from './index.module.less';
 import NodeHeader from './node-header';
 
 function InnerRewriteNode({

web/src/pages/agent/chat/box.tsx

@@ -15,7 +15,7 @@ import {
 import { useFetchUserInfo } from '@/hooks/use-user-setting-request';
 import { buildMessageUuidWithRole } from '@/utils/chat';
 import { memo, useCallback, useContext } from 'react';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import { AgentChatContext } from '../context';
 import DebugContent from '../debug-content';
 import { useAwaitCompentData } from '../hooks/use-chat-logic';

web/src/pages/agent/chat/use-send-agent-message.ts

@@ -26,7 +26,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import { v4 as uuid } from 'uuid';
 import { BeginId } from '../constant';
 import { AgentChatLogContext } from '../context';

web/src/pages/agent/hooks/use-build-webhook-url.ts

@@ -1,4 +1,4 @@
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 
 export function useBuildWebhookUrl() {
   const { id } = useParams();

web/src/pages/agent/hooks/use-is-pipeline.ts

@@ -1,5 +1,5 @@
 import { AgentCategory, AgentQuery } from '@/constants/agent';
-import { useSearchParams } from 'umi';
+import { useSearchParams } from 'react-router';
 
 export function useIsPipeline() {
   const [queryParameters] = useSearchParams();

web/src/pages/agent/hooks/use-run-dataflow.ts

@@ -3,7 +3,7 @@ import { useSendMessageBySSE } from '@/hooks/use-send-message';
 import api from '@/utils/api';
 import { get } from 'lodash';
 import { useCallback, useState } from 'react';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import { UseFetchLogReturnType } from './use-fetch-pipeline-log';
 import { useSaveGraph } from './use-save-graph';
 

web/src/pages/agent/hooks/use-save-graph.ts

@@ -8,7 +8,7 @@ import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { formatDate } from '@/utils/date';
 import { useDebounceEffect } from 'ahooks';
 import { useCallback, useEffect, useState } from 'react';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import useGraphStore from '../store';
 import { useBuildDslData } from './use-build-dsl';
 

web/src/pages/agent/hooks/use-send-shared-message.ts

@@ -9,7 +9,7 @@ import {
 import { isEmpty } from 'lodash';
 import trim from 'lodash/trim';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useSearchParams } from 'umi';
+import { useSearchParams } from 'react-router';
 import { AgentDialogueMode } from '../constant';
 
 export const useSendButtonDisabled = (value: string) => {

web/src/pages/agent/index.tsx

@@ -35,7 +35,7 @@ import {
 } from 'lucide-react';
 import { ComponentPropsWithoutRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import AgentCanvas from './canvas';
 import { DropdownProvider } from './canvas/context';
 import { Operator } from './constant';

web/src/pages/agent/operator-icon.tsx

@@ -1,18 +1,5 @@
-import { ReactComponent as ArxivIcon } from '@/assets/svg/arxiv.svg';
-import { ReactComponent as BingIcon } from '@/assets/svg/bing.svg';
-import { ReactComponent as CrawlerIcon } from '@/assets/svg/crawler.svg';
-import { ReactComponent as DuckIcon } from '@/assets/svg/duck.svg';
-import { ReactComponent as GithubIcon } from '@/assets/svg/github.svg';
-import { ReactComponent as GoogleScholarIcon } from '@/assets/svg/google-scholar.svg';
-import { ReactComponent as GoogleIcon } from '@/assets/svg/google.svg';
-import { ReactComponent as PubMedIcon } from '@/assets/svg/pubmed.svg';
-import { ReactComponent as SearXNGIcon } from '@/assets/svg/searxng.svg';
-import { ReactComponent as TavilyIcon } from '@/assets/svg/tavily.svg';
-import { ReactComponent as WenCaiIcon } from '@/assets/svg/wencai.svg';
-import { ReactComponent as WikipediaIcon } from '@/assets/svg/wikipedia.svg';
-import { ReactComponent as YahooFinanceIcon } from '@/assets/svg/yahoo-finance.svg';
-
 import { IconFontFill } from '@/components/icon-font';
+import SvgIcon from '@/components/svg-icon';
 import { cn } from '@/lib/utils';
 import {
   FileCode,
@@ -21,6 +8,7 @@ import {
   Infinity as InfinityIcon,
   LogOut,
 } from 'lucide-react';
+import { Component } from 'react';
 import { Operator } from './constant';
 
 interface IProps {
@@ -49,20 +37,20 @@ export const OperatorIconMap = {
 };
 
 export const SVGIconMap = {
-  [Operator.ArXiv]: ArxivIcon,
-  [Operator.GitHub]: GithubIcon,
-  [Operator.Bing]: BingIcon,
-  [Operator.DuckDuckGo]: DuckIcon,
-  [Operator.Google]: GoogleIcon,
-  [Operator.GoogleScholar]: GoogleScholarIcon,
-  [Operator.PubMed]: PubMedIcon,
-  [Operator.SearXNG]: SearXNGIcon,
-  [Operator.TavilyExtract]: TavilyIcon,
-  [Operator.TavilySearch]: TavilyIcon,
-  [Operator.Wikipedia]: WikipediaIcon,
-  [Operator.YahooFinance]: YahooFinanceIcon,
-  [Operator.WenCai]: WenCaiIcon,
-  [Operator.Crawler]: CrawlerIcon,
+  [Operator.ArXiv]: 'arxiv',
+  [Operator.GitHub]: 'github',
+  [Operator.Bing]: 'bing',
+  [Operator.DuckDuckGo]: 'duck',
+  [Operator.Google]: 'google',
+  [Operator.GoogleScholar]: 'google-scholar',
+  [Operator.PubMed]: 'pubmed',
+  [Operator.SearXNG]: 'searxng',
+  [Operator.TavilyExtract]: 'tavily',
+  [Operator.TavilySearch]: 'tavily',
+  [Operator.Wikipedia]: 'wikipedia',
+  [Operator.YahooFinance]: 'yahoo-finance',
+  [Operator.WenCai]: 'wencai',
+  [Operator.Crawler]: 'crawler',
 };
 export const LucideIconMap = {
   [Operator.DataOperations]: FileCode,
@@ -75,9 +63,28 @@ const Empty = () => {
   return <div className="hidden"></div>;
 };
 
+class SvgErrorBoundary extends Component<{
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}> {
+  state = { hasError: false };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback || <Empty />;
+    }
+
+    return this.props.children;
+  }
+}
+
 const OperatorIcon = ({ name, className }: IProps) => {
   const Icon = OperatorIconMap[name as keyof typeof OperatorIconMap];
-  const SvgIcon = SVGIconMap[name as keyof typeof SVGIconMap];
+  const svgIcon = SVGIconMap[name as keyof typeof SVGIconMap];
   const LucideIcon = LucideIconMap[name as keyof typeof LucideIconMap];
 
   if (name === Operator.Begin) {
@@ -95,19 +102,33 @@ const OperatorIcon = ({ name, className }: IProps) => {
 
   if (Icon) {
     return (
-      <IconFontFill
-        name={Icon}
-        className={cn('size-5 ', className)}
-      ></IconFontFill>
+      <SvgErrorBoundary fallback={<Empty />}>
+        <IconFontFill
+          name={Icon}
+          className={cn('size-5 ', className)}
+        ></IconFontFill>
+      </SvgErrorBoundary>
     );
   }
 
   if (LucideIcon) {
-    return <LucideIcon className={cn('size-5', className)} />;
+    return (
+      <SvgErrorBoundary fallback={<Empty />}>
+        <LucideIcon className={cn('size-5', className)} />
+      </SvgErrorBoundary>
+    );
   }
 
-  if (SvgIcon) {
-    return <SvgIcon className={cn('size-5 fill-current', className)}></SvgIcon>;
+  if (svgIcon) {
+    return (
+      <SvgErrorBoundary fallback={<Empty />}>
+        <SvgIcon
+          name={svgIcon}
+          width={'100%'}
+          className={cn('size-5 fill-current', className)}
+        ></SvgIcon>
+      </SvgErrorBoundary>
+    );
   }
 
   return <Empty></Empty>;

web/src/pages/agent/pipeline-log-sheet/index.tsx

@@ -18,8 +18,8 @@ import {
   SquareArrowOutUpRight,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router';
 import 'react18-json-view/src/style.css';
-import { useParams } from 'umi';
 import {
   isEndOutputEmpty,
   useDownloadOutput,

web/src/pages/agent/store.ts

@@ -540,13 +540,13 @@ const useGraphStore = create<RFState>()(
           (x) => x.component_name === name,
         );
         const lastIndex = tools.length
-          ? tools
+          ? (tools
               .map((x) => {
                 const idx = x.name.match(/(\d+)$/)?.[1];
                 return idx && isNaN(idx) ? -1 : Number(idx);
               })
               .sort((a, b) => a - b)
-              .at(-1) ?? -1
+              .at(-1) ?? -1)
           : -1;
 
         return `${name}_${lastIndex + 1}`;

web/src/pages/agent/utils.ts

@@ -836,7 +836,7 @@ export function buildBeginQueryWithObject(
 }
 
 export function getArrayElementType(type: string) {
-  return typeof type === 'string' ? type.match(/<([^>]+)>/)?.at(1) ?? '' : '';
+  return typeof type === 'string' ? (type.match(/<([^>]+)>/)?.at(1) ?? '') : '';
 }
 
 export function buildConversationVariableSelectOptions() {

web/src/pages/agent/webhook-sheet/index.tsx

@@ -13,7 +13,7 @@ import { cn } from '@/lib/utils';
 import { upperFirst } from 'lodash';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import { BeginId } from '../constant';
 import { JsonViewer } from '../form/components/json-viewer';
 import { WorkFlowTimeline } from './timeline';