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/404.tsx

@@ -1,7 +1,7 @@
 import { Routes } from '@/routes';
+import { history } from '@/utils/simple-history-util';
 import { Button, Result } from 'antd';
-import { history, useLocation } from 'umi';
-
+import { useLocation } from 'react-router';
 const NoFoundPage = () => {
   const location = useLocation();
 

web/src/pages/admin/layouts/navigation-layout.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { NavLink, Outlet, useNavigate } from 'umi';
+import { NavLink, Outlet, useNavigate } from 'react-router';
 
 import { useMutation, useQuery } from '@tanstack/react-query';
 

web/src/pages/admin/layouts/root-layout.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from 'umi';
+import { Outlet } from 'react-router';
 
 const AdminRootLayout = () => {
   return <Outlet />;

web/src/pages/admin/login.tsx

@@ -2,7 +2,7 @@ import { type AxiosResponseHeaders } from 'axios';
 import { useEffect, useId } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'umi';
+import { useNavigate } from 'react-router';
 
 import { useMutation } from '@tanstack/react-query';
 

web/src/pages/admin/user-detail.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate, useParams } from 'umi';
+import { useNavigate, useParams } from 'react-router';
 
 import { LucideArrowLeft, LucideDot } from 'lucide-react';
 

web/src/pages/admin/users.tsx

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'umi';
+import { useNavigate } from 'react-router';
 
 import {
   createColumnHelper,

web/src/pages/admin/wrappers/authorized.tsx

@@ -1,6 +1,6 @@
 import { Routes } from '@/routes';
 import authorizationUtil from '@/utils/authorization-util';
-import { Navigate, Outlet } from 'umi';
+import { Navigate, Outlet } from 'react-router';
 
 export default function AuthorizedAdminWrapper() {
   const isLogin = !!authorizationUtil.getAuthorization();

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';

web/src/pages/agents/agent-log-page.tsx

@@ -20,7 +20,7 @@ import {
 import { IReferenceObject } from '@/interfaces/database/chat';
 import { useQueryClient } from '@tanstack/react-query';
 import React, { useEffect, useState } from 'react';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import { DateRange } from '../../components/originui/calendar/index';
 import {
   Table,

web/src/pages/agents/index.tsx

@@ -17,7 +17,7 @@ import { t } from 'i18next';
 import { pick } from 'lodash';
 import { Clipboard, ClipboardPlus, FileInput, Plus } from 'lucide-react';
 import { useCallback, useEffect } from 'react';
-import { useSearchParams } from 'umi';
+import { useSearchParams } from 'react-router';
 import { AgentCard } from './agent-card';
 import { CreateAgentDialog } from './create-agent-dialog';
 import { useCreateAgentOrPipeline } from './hooks/use-create-agent';

web/src/pages/chunk/index.tsx

@@ -16,7 +16,7 @@ import {
 import { Routes } from '@/routes';
 import { EllipsisVertical, Save } from 'lucide-react';
 import { useMemo } from 'react';
-import { Outlet, useLocation } from 'umi';
+import { Outlet, useLocation } from 'react-router';
 
 export default function ChunkPage() {
   const { navigateToDataset, getQueryString, navigateToChunk } =

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx

@@ -16,7 +16,7 @@ import DOMPurify from 'dompurify';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChunkTextMode } from '../../constant';
-import styles from './index.less';
+import styles from './index.module.less';
 
 interface IProps {
   item: IChunk;

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-toolbar/index.tsx

@@ -1,4 +1,4 @@
-import { ReactComponent as FilterIcon } from '@/assets/filter.svg';
+import FilterIcon from '@/assets/filter.svg';
 import { KnowledgeRouteKey } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import {
@@ -32,16 +32,15 @@ import {
   Typography,
 } from 'antd';
 import { useCallback, useMemo, useState } from 'react';
-import { Link } from 'umi';
+import { Link } from 'react-router';
 import { ChunkTextMode } from '../../constant';
 
 const { Text } = Typography;
 
-interface IProps
-  extends Pick<
-    IChunkListResult,
-    'searchString' | 'handleInputChange' | 'available' | 'handleSetAvailable'
-  > {
+interface IProps extends Pick<
+  IChunkListResult,
+  'searchString' | 'handleInputChange' | 'available' | 'handleSetAvailable'
+> {
   checked: boolean;
   selectAllChunk: (checked: boolean) => void;
   createChunk: () => void;

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx

@@ -42,7 +42,7 @@ import {
   useNavigatePage,
 } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-request';
-import styles from './index.less';
+import styles from './index.module.less';
 
 const Chunk = () => {
   const [selectedChunkIds, setSelectedChunkIds] = useState<string[]>([]);

web/src/pages/chunk/parsed-result/add-knowledge/index.tsx

@@ -8,10 +8,10 @@ import { Breadcrumb } from 'antd';
 import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, Outlet } from 'umi';
+import { Link, Outlet } from 'react-router';
 import Siderbar from './components/knowledge-sidebar';
 import { KnowledgeDatasetRouteKey, KnowledgeRouteKey } from './constant';
-import styles from './index.less';
+import styles from './index.module.less';
 
 const KnowledgeAdding = () => {
   const knowledgeBaseId = useKnowledgeBaseId();

web/src/pages/dataflow-result/chunker.tsx

@@ -23,7 +23,7 @@ import {
   useHandleChunkCardClick,
   useUpdateChunk,
 } from './hooks';
-import styles from './index.less';
+import styles from './index.module.less';
 
 interface IProps {
   isChange: boolean;

web/src/pages/dataflow-result/components/chunk-card/index.tsx

@@ -14,7 +14,7 @@ import classNames from 'classnames';
 import DOMPurify from 'dompurify';
 import { useEffect, useState } from 'react';
 import { ChunkTextMode } from '../../constant';
-import styles from './index.less';
+import styles from './index.module.less';
 
 interface IProps {
   item: IChunk;

web/src/pages/dataflow-result/components/chunk-toolbar/index.tsx

@@ -1,4 +1,4 @@
-import { ReactComponent as FilterIcon } from '@/assets/filter.svg';
+import FilterIcon from '@/assets/filter.svg';
 import { KnowledgeRouteKey } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import {
@@ -32,16 +32,15 @@ import {
   Typography,
 } from 'antd';
 import { useCallback, useMemo, useState } from 'react';
-import { Link } from 'umi';
+import { Link } from 'react-router';
 import { ChunkTextMode } from '../../constant';
 
 const { Text } = Typography;
 
-interface IProps
-  extends Pick<
-    IChunkListResult,
-    'searchString' | 'handleInputChange' | 'available' | 'handleSetAvailable'
-  > {
+interface IProps extends Pick<
+  IChunkListResult,
+  'searchString' | 'handleInputChange' | 'available' | 'handleSetAvailable'
+> {
   checked: boolean;
   selectAllChunk: (checked: boolean) => void;
   createChunk: () => void;

web/src/pages/dataflow-result/components/parse-editer/json-parser.tsx

@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils';
 import { isArray } from 'lodash';
 import { useCallback, useEffect, useMemo } from 'react';
 import { ChunkTextMode } from '../../constant';
-import styles from '../../index.less';
+import styles from '../../index.module.less';
 import { IChunk } from '../../interface';
 import { useParserInit } from './hook';
 import { IJsonContainerProps } from './interface';

web/src/pages/dataflow-result/components/parse-editer/object-parser.tsx

@@ -1,7 +1,7 @@
 import { cn } from '@/lib/utils';
 import { useCallback, useEffect } from 'react';
 import { ChunkTextMode } from '../../constant';
-import styles from '../../index.less';
+import styles from '../../index.module.less';
 import { IChunk } from '../../interface';
 import { useParserInit } from './hook';
 import { IObjContainerProps } from './interface';

web/src/pages/dataflow-result/hooks.ts

@@ -12,7 +12,7 @@ import { t } from 'i18next';
 import { camelCase, upperFirst } from 'lodash';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { IHighlight } from 'react-pdf-highlighter';
-import { useParams, useSearchParams } from 'umi';
+import { useParams, useSearchParams } from 'react-router';
 import { ITimelineNodeObj, TimelineNodeObj } from './components/time-line';
 import {
   ChunkTextMode,

web/src/pages/dataflow-result/index.tsx

@@ -35,7 +35,7 @@ import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useGetKnowledgeSearchParams } from '@/hooks/route-hook';
 import TimelineDataFlow from './components/time-line';
 import { TimelineNodeType } from './constant';
-import styles from './index.less';
+import styles from './index.module.less';
 import { IDslComponent, IPipelineFileLogDetail } from './interface';
 import ParserContainer from './parser';
 

web/src/pages/dataset/components/metedata/hooks/use-manage-modal.ts

@@ -12,7 +12,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { TFunction } from 'i18next';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import {
   IMetaDataReturnJSONSettings,
   IMetaDataReturnJSONType,

web/src/pages/dataset/components/metedata/manage-modal.tsx

@@ -341,7 +341,7 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
           <div className="flex flex-col gap-2">
             <div className="flex items-center justify-between">
               <div>{t('knowledgeDetails.metadata.metadata')}</div>
-              {metadataType === MetadataType.Manage && false && (
+              {metadataType === MetadataType.Manage && (
                 <Button
                   variant={'ghost'}
                   className="border border-border-button"

web/src/pages/dataset/dataset-overview/hook.ts

@@ -9,7 +9,7 @@ import kbService, {
 } from '@/services/knowledge-service';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useState } from 'react';
-import { useParams, useSearchParams } from 'umi';
+import { useParams, useSearchParams } from 'react-router';
 import { LogTabs } from './dataset-common';
 import { IFileLogList, IOverviewTotal } from './interface';
 

web/src/pages/dataset/dataset-overview/overview-table.tsx

@@ -42,7 +42,7 @@ import {
 import { TFunction } from 'i18next';
 import { ArrowUpDown, ClipboardList, Eye, MonitorUp } from 'lucide-react';
 import { FC, useMemo, useState } from 'react';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import { RunningStatus } from '../dataset/constant';
 import ProcessLogModal from '../process-log-modal';
 import { LogTabs, ProcessingType, ProcessingTypeMap } from './dataset-common';

web/src/pages/dataset/dataset-setting/configuration/common-item.tsx

@@ -23,6 +23,7 @@ import { LlmModelType } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useComposeLlmOptionsByModelTypes } from '@/hooks/use-llm-request';
 import { cn } from '@/lib/utils';
+import { history } from '@/utils/simple-history-util';
 import { t } from 'i18next';
 import { Settings } from 'lucide-react';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
@@ -31,7 +32,7 @@ import {
   FieldValues,
   useFormContext,
 } from 'react-hook-form';
-import { history, useLocation } from 'umi';
+import { useLocation } from 'react-router';
 import { DataSetContext } from '..';
 import {
   MetadataType,

web/src/pages/dataset/dataset-setting/hooks.ts

@@ -9,7 +9,7 @@ import { useIsFetching } from '@tanstack/react-query';
 import { pick } from 'lodash';
 import { useCallback, useEffect, useState } from 'react';
 import { UseFormReturn } from 'react-hook-form';
-import { useParams, useSearchParams } from 'umi';
+import { useParams, useSearchParams } from 'react-router';
 import { z } from 'zod';
 import { formSchema } from './form-schema';
 

web/src/pages/dataset/dataset-setting/permission-form-field.tsx

@@ -14,18 +14,16 @@ export function PermissionFormField() {
   }, [t]);
 
   return (
-    <div className="items-center">
-      <RAGFlowFormItem
-        name="permission"
-        label={t('knowledgeConfiguration.permissions')}
-        tooltip={t('knowledgeConfiguration.permissionsTip')}
-        horizontal={true}
-      >
-        <SelectWithSearch
-          options={teamOptions}
-          triggerClassName="w-full"
-        ></SelectWithSearch>
-      </RAGFlowFormItem>
-    </div>
+    <RAGFlowFormItem
+      name="permission"
+      label={t('knowledgeConfiguration.permissions')}
+      tooltip={t('knowledgeConfiguration.permissionsTip')}
+      horizontal
+    >
+      <SelectWithSearch
+        options={teamOptions}
+        triggerClassName="w-full"
+      ></SelectWithSearch>
+    </RAGFlowFormItem>
   );
 }

web/src/pages/dataset/dataset-setting/saving-button.tsx

@@ -3,7 +3,7 @@ import { useUpdateKnowledge } from '@/hooks/use-knowledge-request';
 import { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 
 export function GeneralSavingButton() {
   const form = useFormContext();

web/src/pages/dataset/dataset/generate-button/hook.ts

@@ -4,7 +4,7 @@ import kbService, { deletePipelineTask } from '@/services/knowledge-service';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { t } from 'i18next';
 import { useEffect, useState } from 'react';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import { ProcessingType } from '../../dataset-overview/dataset-common';
 import { GenerateType, GenerateTypeMap } from './generate';
 export const generateStatus = {

web/src/pages/dataset/index.tsx

@@ -10,7 +10,7 @@ import {
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-request';
 import { useTranslation } from 'react-i18next';
-import { Outlet } from 'umi';
+import { Outlet } from 'react-router';
 import { SideBar } from './sidebar';
 
 export default function DatasetWrapper() {

web/src/pages/dataset/knowledge-graph/force-graph.tsx

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { buildNodesAndCombos } from './util';
 
 import { useIsDarkTheme } from '@/components/theme-provider';
-import styles from './index.less';
+import styles from './index.module.less';
 
 const TooltipColorMap = {
   combo: 'red',

web/src/pages/dataset/knowledge-graph/use-delete-graph.ts

@@ -1,7 +1,7 @@
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useRemoveKnowledgeGraph } from '@/hooks/use-knowledge-request';
 import { useCallback } from 'react';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 
 export function useDeleteKnowledgeGraph() {
   const { removeKnowledgeGraph, loading } = useRemoveKnowledgeGraph();

web/src/pages/dataset/sidebar/hooks.tsx

@@ -1,6 +1,6 @@
 import { Routes } from '@/routes';
 import { useCallback } from 'react';
-import { useNavigate, useParams } from 'umi';
+import { useNavigate, useParams } from 'react-router';
 
 export const useHandleMenuClick = () => {
   const navigate = useNavigate();

web/src/pages/dataset/testing/testing-form.tsx

@@ -37,7 +37,7 @@ import { trim } from 'lodash';
 import { Send } from 'lucide-react';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 
 type TestingFormProps = Pick<
   ReturnType<typeof useTestRetrieval>,

web/src/pages/datasets/index.tsx

@@ -11,7 +11,7 @@ import { pick } from 'lodash';
 import { Plus } from 'lucide-react';
 import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSearchParams } from 'umi';
+import { useSearchParams } from 'react-router';
 import { DatasetCard } from './dataset-card';
 import { DatasetCreatingDialog } from './dataset-creating-dialog';
 import { useSaveKnowledge } from './hooks';

web/src/pages/document-viewer/index.tsx

@@ -1,6 +1,6 @@
 import { Images } from '@/constants/common';
 import { api_host } from '@/utils/api';
-import { useParams, useSearchParams } from 'umi';
+import { useParams, useSearchParams } from 'react-router';
 // import Docx from './docx';
 // import Excel from './excel';
 // import Image from './image';

web/src/pages/files/file-breadcrumb.tsx

@@ -5,7 +5,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb';
-import { useNavigate } from 'umi';
+import { useNavigate } from 'react-router';
 import { useSelectBreadcrumbItems } from './use-navigate-to-folder';
 
 export function FileBreadcrumb() {

web/src/pages/files/hooks.ts

@@ -3,7 +3,7 @@ import { useConnectToKnowledge, useRenameFile } from '@/hooks/use-file-request';
 import { IFile } from '@/interfaces/database/file-manager';
 import { TableRowSelection } from 'antd/es/table/interface';
 import { useCallback, useMemo, useState } from 'react';
-import { useNavigate, useSearchParams } from 'umi';
+import { useNavigate, useSearchParams } from 'react-router';
 
 export const useGetFolderId = () => {
   const [searchParams] = useSearchParams();

web/src/pages/home/applications.tsx

@@ -6,7 +6,7 @@ import { Segmented, SegmentedValue } from '@/components/ui/segmented';
 import { Routes } from '@/routes';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'umi';
+import { useNavigate } from 'react-router';
 import { Agents } from './agent-list';
 import { SeeAllAppCard } from './application-card';
 import { ChatList } from './chat-list';

web/src/pages/login-next/index.tsx

@@ -10,7 +10,7 @@ import { useSystemConfig } from '@/hooks/use-system-request';
 import { rsaPsw } from '@/utils';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'umi';
+import { useNavigate } from 'react-router';
 
 import Spotlight from '@/components/spotlight';
 import { Button, ButtonLoading } from '@/components/ui/button';

web/src/pages/memories/hooks.ts

@@ -10,7 +10,7 @@ import { useDebounce } from 'ahooks';
 import { omit } from 'lodash';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams, useSearchParams } from 'umi';
+import { useParams, useSearchParams } from 'react-router';
 import {
   CreateMemoryResponse,
   DeleteMemoryProps,

web/src/pages/memories/index.tsx

@@ -8,7 +8,7 @@ import { useTranslate } from '@/hooks/common-hooks';
 import { pick } from 'lodash';
 import { Plus } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
-import { useSearchParams } from 'umi';
+import { useSearchParams } from 'react-router';
 import { AddOrEditModal } from './add-or-edit-modal';
 import { defaultMemoryFields } from './constants';
 import { useFetchMemoryList, useRenameMemory } from './hooks';

web/src/pages/memory/hooks/use-memory-setting.ts

@@ -2,7 +2,7 @@ import { useHandleSearchChange } from '@/hooks/logic-hooks';
 import { IMemory } from '@/pages/memories/interface';
 import memoryService from '@/services/memory-service';
 import { useQuery } from '@tanstack/react-query';
-import { useParams, useSearchParams } from 'umi';
+import { useParams, useSearchParams } from 'react-router';
 import { MemoryApiAction } from '../constant';
 
 export const useFetchMemoryBaseConfiguration = () => {

web/src/pages/memory/index.tsx

@@ -1,5 +1,5 @@
 import Spotlight from '@/components/spotlight';
-import { Outlet } from 'umi';
+import { Outlet } from 'react-router';
 import { SideBar } from './sidebar';
 
 export default function DatasetWrapper() {

web/src/pages/memory/memory-message/hook.ts

@@ -4,7 +4,7 @@ import memoryService, { getMemoryDetailById } from '@/services/memory-service';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { t } from 'i18next';
 import { useCallback, useState } from 'react';
-import { useParams, useSearchParams } from 'umi';
+import { useParams, useSearchParams } from 'react-router';
 import { MemoryApiAction } from '../constant';
 import {
   IMessageContentProps,

web/src/pages/memory/sidebar/hooks.tsx

@@ -1,6 +1,6 @@
 import { Routes } from '@/routes';
 import { useCallback } from 'react';
-import { useNavigate, useParams } from 'umi';
+import { useNavigate, useParams } from 'react-router';
 
 export const useHandleMenuClick = () => {
   const navigate = useNavigate();

web/src/pages/next-chats/chat/app-settings/chat-settings.tsx

@@ -13,7 +13,7 @@ import { X } from 'lucide-react';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import { z } from 'zod';
 import ChatBasicSetting from './chat-basic-settings';
 import { ChatModelSettings } from './chat-model-settings';

web/src/pages/next-chats/chat/chat-box/multiple-chat-box.tsx

@@ -28,7 +28,7 @@ import { isEmpty, omit } from 'lodash';
 import { ListCheck, Plus, Trash2 } from 'lucide-react';
 import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import { z } from 'zod';
 import {
   useGetSendButtonDisabled,

web/src/pages/next-chats/chat/index.tsx

@@ -27,7 +27,7 @@ import { isEmpty } from 'lodash';
 import { ArrowUpRight, LogOut, Send } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import { useHandleClickConversationCard } from '../hooks/use-click-card';
 import { ChatSettings } from './app-settings/chat-settings';
 import { MultipleChatBox } from './chat-box/multiple-chat-box';

web/src/pages/next-chats/hooks/use-button-disabled.tsx

@@ -1,5 +1,5 @@
 import { trim } from 'lodash';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 
 export const useGetSendButtonDisabled = () => {
   const { id: dialogId } = useParams();

web/src/pages/next-chats/hooks/use-chat-url.ts

@@ -3,7 +3,7 @@ import { useGetChatSearchParams } from '@/hooks/use-chat-request';
 import { IMessage } from '@/interfaces/database/chat';
 import { generateConversationId } from '@/utils/chat';
 import { useCallback, useMemo } from 'react';
-import { useSearchParams } from 'umi';
+import { useSearchParams } from 'react-router';
 import { useSetConversation } from './use-set-conversation';
 
 /**

web/src/pages/next-chats/hooks/use-create-conversation.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import { useChatUrlParams } from './use-chat-url';
 import { useSetConversation } from './use-set-conversation';
 

web/src/pages/next-chats/hooks/use-select-conversation-list.ts

@@ -7,7 +7,7 @@ import {
 import { IConversation } from '@/interfaces/database/chat';
 import { generateConversationId } from '@/utils/chat';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import { useChatUrlParams } from './use-chat-url';
 
 export const useFindPrologueFromDialogList = () => {

web/src/pages/next-chats/hooks/use-send-chat-message.ts

@@ -10,7 +10,7 @@ import { IMessage } from '@/interfaces/database/chat';
 import api from '@/utils/api';
 import { trim } from 'lodash';
 import { useCallback, useEffect } from 'react';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 import { v4 as uuid } from 'uuid';
 import { useCreateConversationBeforeSendMessage } from './use-chat-url';
 import { useFindPrologueFromDialogList } from './use-select-conversation-list';
@@ -100,7 +100,7 @@ export const useSendMessage = (controller: AbortController) => {
           messages: [
             ...(Array.isArray(messages) && messages?.length > 0
               ? messages
-              : derivedMessages ?? []),
+              : (derivedMessages ?? [])),
             message,
           ],
         },

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

@@ -10,7 +10,7 @@ import { message } from 'antd';
 import { get } from 'lodash';
 import trim from 'lodash/trim';
 import { useCallback, useEffect, useState } from 'react';
-import { useSearchParams } from 'umi';
+import { useSearchParams } from 'react-router';
 import { v4 as uuid } from 'uuid';
 
 const isCompletionError = (res: any) =>

web/src/pages/next-chats/hooks/use-set-conversation.ts

@@ -1,7 +1,7 @@
 import { MessageType } from '@/constants/chat';
 import { useUpdateConversation } from '@/hooks/use-chat-request';
 import { useCallback } from 'react';
-import { useParams } from 'umi';
+import { useParams } from 'react-router';
 
 export const useSetConversation = () => {
   const { id: dialogId } = useParams();

web/src/pages/next-chats/index.tsx

@@ -10,7 +10,7 @@ import { pick } from 'lodash';
 import { Plus } from 'lucide-react';
 import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSearchParams } from 'umi';
+import { useSearchParams } from 'react-router';
 import { ChatCard } from './chat-card';
 import { useRenameChat } from './hooks/use-rename-chat';
 

web/src/pages/next-search/hooks.ts

@@ -29,7 +29,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useSearchParams } from 'umi';
+import { useSearchParams } from 'react-router';
 import { ISearchAppDetailProps } from '../next-searches/hooks';
 import { useClickDrawer } from './document-preview-modal/hooks';
 

web/src/pages/next-searches/hooks.ts

@@ -9,7 +9,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from 'ahooks';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams, useSearchParams } from 'umi';
+import { useParams, useSearchParams } from 'react-router';
 interface CreateSearchProps {
   name: string;
   description?: string;

web/src/pages/next-searches/index.tsx

@@ -9,7 +9,7 @@ import { useTranslate } from '@/hooks/common-hooks';
 import { pick } from 'lodash';
 import { Plus } from 'lucide-react';
 import { useCallback, useEffect } from 'react';
-import { useSearchParams } from 'umi';
+import { useSearchParams } from 'react-router';
 import { useFetchSearchList, useRenameSearch } from './hooks';
 import { SearchCard } from './search-card';
 

web/src/pages/user-setting/data-source/component/box-token-field.tsx

@@ -98,8 +98,8 @@ const BoxTokenField = ({ value, onChange }: BoxTokenFieldProps) => {
     () =>
       Boolean(
         parsed?.access_token ||
-          parsed?.refresh_token ||
-          parsed?.authorization_code,
+        parsed?.refresh_token ||
+        parsed?.authorization_code,
       ),
     [parsed],
   );

web/src/pages/user-setting/data-source/data-source-detail-page/log-table.tsx

@@ -32,7 +32,7 @@ import { t } from 'i18next';
 import { pick } from 'lodash';
 import { Eye } from 'lucide-react';
 import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'umi';
+import { useNavigate } from 'react-router';
 import { useLogListDataSource } from '../hooks';
 
 const columns = ({

web/src/pages/user-setting/data-source/hooks.ts

@@ -11,7 +11,7 @@ import dataSourceService, {
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { t } from 'i18next';
 import { useCallback, useMemo, useState } from 'react';
-import { useParams, useSearchParams } from 'umi';
+import { useParams, useSearchParams } from 'react-router';
 import { DataSourceKey, useDataSourceInfo } from './constant';
 import { IDataSorceInfo, IDataSource, IDataSourceBase } from './interface';
 

web/src/pages/user-setting/index.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from 'umi';
+import { Outlet } from 'react-router';
 import { SideBar } from './sidebar';
 
 import { PageHeader } from '@/components/page-header';
@@ -14,7 +14,7 @@ import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { cn } from '@/lib/utils';
 import { House } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import styles from './index.less';
+import styles from './index.module.less';
 
 const UserSetting = () => {
   const { t } = useTranslation();

web/src/pages/user-setting/setting-api/index.tsx

@@ -1,6 +1,6 @@
 import ApiContent from '@/components/api-service/chat-overview-modal/api-content';
 
-import styles from './index.less';
+import styles from './index.module.less';
 
 const ApiPage = () => {
   return (

web/src/pages/user-setting/setting-model/hooks.tsx

@@ -474,7 +474,8 @@ export const useSubmitMinerU = () => {
     async (payload: MinerUFormValues) => {
       const cfg: any = {
         ...payload,
-        mineru_delete_output: payload.mineru_delete_output ?? true ? '1' : '0',
+        mineru_delete_output:
+          (payload.mineru_delete_output ?? true) ? '1' : '0',
       };
       if (payload.mineru_backend !== 'vlm-http-client') {
         delete cfg.mineru_server_url;

web/src/pages/user-setting/sidebar/hooks.tsx

@@ -1,7 +1,7 @@
 import { useLogout } from '@/hooks/use-login-request';
 import { Routes } from '@/routes';
 import { useCallback, useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'umi';
+import { useLocation, useNavigate } from 'react-router';
 
 export const useHandleMenuClick = () => {
   const navigate = useNavigate();