Skip to content

Commit f2a1d59

Browse files
dcc123456dcc123456
authored
Refactor: Remove ant design component (#13143)
### What problem does this PR solve? _Briefly describe what this PR aims to solve. Include background context that will help reviewers understand the purpose of the PR._ ### Type of change - [x] Refactoring
1 parent bc9ed24 commit f2a1d59

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+1073
-1483
lines changed

‎web/src/app.tsx‎

Lines changed: 16 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,21 @@
11
import { Toaster as Sonner } from '@/components/ui/sonner';
22
import { Toaster } from '@/components/ui/toaster';
3-
import i18n from '@/locales/config';
3+
import i18n, { changeLanguageAsync } from '@/locales/config';
44
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
55
import { configResponsive } from 'ahooks';
6-
import { App, ConfigProvider, ConfigProviderProps, theme } from 'antd';
7-
import pt_BR from 'antd/lib/locale/pt_BR';
8-
import deDE from 'antd/locale/de_DE';
9-
import enUS from 'antd/locale/en_US';
10-
import ru_RU from 'antd/locale/ru_RU';
11-
import vi_VN from 'antd/locale/vi_VN';
12-
import zhCN from 'antd/locale/zh_CN';
13-
import zh_HK from 'antd/locale/zh_HK';
146
import dayjs from 'dayjs';
157
import advancedFormat from 'dayjs/plugin/advancedFormat';
168
import customParseFormat from 'dayjs/plugin/customParseFormat';
179
import localeData from 'dayjs/plugin/localeData';
1810
import weekOfYear from 'dayjs/plugin/weekOfYear';
1911
import weekYear from 'dayjs/plugin/weekYear';
2012
import weekday from 'dayjs/plugin/weekday';
21-
import React, { useEffect, useState } from 'react';
13+
import React, { useEffect } from 'react';
2214
import { RouterProvider } from 'react-router';
23-
import { ThemeProvider, useTheme } from './components/theme-provider';
15+
import { ThemeProvider } from './components/theme-provider';
2416
import { SidebarProvider } from './components/ui/sidebar';
2517
import { TooltipProvider } from './components/ui/tooltip';
2618
import { ThemeEnum } from './constants/common';
27-
// import { getRouter } from './routes';
2819
import { routers } from './routes';
2920
import storage from './utils/authorization-util';
3021

@@ -47,24 +38,6 @@ dayjs.extend(localeData);
4738
dayjs.extend(weekOfYear);
4839
dayjs.extend(weekYear);
4940

50-
const AntLanguageMap = {
51-
en: enUS,
52-
zh: zhCN,
53-
'zh-TRADITIONAL': zh_HK,
54-
ru: ru_RU,
55-
vi: vi_VN,
56-
'pt-BR': pt_BR,
57-
de: deDE,
58-
};
59-
60-
// if (process.env.NODE_ENV === 'development') {
61-
// const whyDidYouRender = require('@welldone-software/why-did-you-render');
62-
// whyDidYouRender(React, {
63-
// trackAllPureComponents: true,
64-
// trackExtraHooks: [],
65-
// logOnDifferentValues: true,
66-
// });
67-
// }
6841
if (process.env.NODE_ENV === 'development') {
6942
import('@welldone-software/why-did-you-render').then(
7043
(whyDidYouRenderModule) => {
@@ -78,6 +51,7 @@ if (process.env.NODE_ENV === 'development') {
7851
},
7952
);
8053
}
54+
8155
const queryClient = new QueryClient({
8256
defaultOptions: {
8357
queries: {
@@ -87,53 +61,31 @@ const queryClient = new QueryClient({
8761
},
8862
});
8963

90-
type Locale = ConfigProviderProps['locale'];
91-
9264
function Root({ children }: React.PropsWithChildren) {
93-
const { theme: themeragflow } = useTheme();
94-
const getLocale = (lng: string) =>
95-
AntLanguageMap[lng as keyof typeof AntLanguageMap] ?? enUS;
96-
97-
const [locale, setLocal] = useState<Locale>(getLocale(storage.getLanguage()));
65+
useEffect(() => {
66+
const lng = storage.getLanguage();
67+
if (lng) {
68+
document.documentElement.lang = lng;
69+
}
70+
}, []);
9871

9972
i18n.on('languageChanged', function (lng: string) {
10073
storage.setLanguage(lng);
101-
setLocal(getLocale(lng));
102-
// Should reflect to <html lang="...">
10374
document.documentElement.lang = lng;
10475
});
10576

10677
return (
107-
<>
108-
<ConfigProvider
109-
theme={{
110-
token: {
111-
fontFamily: 'Inter',
112-
},
113-
algorithm:
114-
themeragflow === 'dark'
115-
? theme.darkAlgorithm
116-
: theme.defaultAlgorithm,
117-
}}
118-
locale={locale}
119-
>
120-
<SidebarProvider className="h-full">
121-
<App className="w-full h-dvh relative">{children}</App>
122-
</SidebarProvider>
123-
<Sonner position={'top-right'} expand richColors closeButton></Sonner>
124-
<Toaster />
125-
</ConfigProvider>
126-
{/* <ReactQueryDevtools buttonPosition={'top-left'} initialIsOpen={false} /> */}
127-
</>
78+
<SidebarProvider className="h-full">
79+
<div className="w-full h-dvh relative">{children}</div>
80+
</SidebarProvider>
12881
);
12982
}
13083

13184
const RootProvider = ({ children }: React.PropsWithChildren) => {
13285
useEffect(() => {
133-
// Because the language is saved in the backend, a token is required to obtain the api. However, the login page cannot obtain the language through the getUserInfo api, so the language needs to be saved in localstorage.
13486
const lng = storage.getLanguage();
13587
if (lng) {
136-
i18n.changeLanguage(lng);
88+
changeLanguageAsync(lng);
13789
}
13890
}, []);
13991

@@ -145,6 +97,8 @@ const RootProvider = ({ children }: React.PropsWithChildren) => {
14597
storageKey="ragflow-ui-theme"
14698
>
14799
<Root>{children}</Root>
100+
<Sonner position={'top-right'} expand richColors closeButton></Sonner>
101+
<Toaster />
148102
</ThemeProvider>
149103
</QueryClientProvider>
150104
</TooltipProvider>
@@ -159,16 +113,6 @@ const RouterProviderWrapper: React.FC<{ router: typeof routers }> = ({
159113
RouterProviderWrapper.whyDidYouRender = false;
160114

161115
export default function AppContainer() {
162-
// const [router, setRouter] = useState<any>(null);
163-
164-
// useEffect(() => {
165-
// getRouter().then(setRouter);
166-
// }, []);
167-
168-
// if (!router) {
169-
// return <div>Loading...</div>;
170-
// }
171-
172116
return (
173117
<RootProvider>
174118
<RouterProviderWrapper router={routers} />

‎web/src/components/document-preview/hooks.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,3 +165,24 @@ export const useFetchDocx = (filePath: string) => {
165165

166166
return { succeed, containerRef, error };
167167
};
168+
169+
export const useCatchDocumentError = (url: string) => {
170+
const httpHeaders = useMemo(() => {
171+
return {
172+
[Authorization]: getAuthorization(),
173+
};
174+
}, []);
175+
const [error, setError] = useState<string>('');
176+
177+
const fetchDocument = useCallback(async () => {
178+
const { data } = await axios.get(url, { headers: httpHeaders });
179+
if (data.code !== 0) {
180+
setError(data?.message);
181+
}
182+
}, [url, httpHeaders]);
183+
useEffect(() => {
184+
fetchDocument();
185+
}, [fetchDocument]);
186+
187+
return error;
188+
};

‎web/src/components/document-preview/pdf-preview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { Spin } from '@/components/ui/spin';
1313
import { Authorization } from '@/constants/authorization';
1414
import FileError from '@/pages/document-viewer/file-error';
1515
import { getAuthorization } from '@/utils/authorization-util';
16-
import { useCatchDocumentError } from '../pdf-previewer/hooks';
16+
import { useCatchDocumentError } from './hooks';
1717
import styles from './index.module.less';
1818
type PdfLoaderProps = React.ComponentProps<typeof PdfLoader> & {
1919
httpHeaders?: Record<string, string>;

‎web/src/components/floating-chat-widget.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useClickDrawer } from '@/components/pdf-drawer/hooks';
33
import { MessageType, SharedFrom } from '@/constants/chat';
44
import { useFetchExternalAgentInputs } from '@/hooks/use-agent-request';
55
import { useFetchExternalChatInfo } from '@/hooks/use-chat-request';
6-
import i18n from '@/locales/config';
6+
import i18n, { changeLanguageAsync } from '@/locales/config';
77
import { useSendNextSharedMessage } from '@/pages/agent/hooks/use-send-shared-message';
88
import { MessageCircle, Minimize2, Send, X } from 'lucide-react';
99
import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -136,7 +136,7 @@ const FloatingChatWidget = () => {
136136
}, 50);
137137

138138
if (locale && i18n.language !== locale) {
139-
i18n.changeLanguage(locale);
139+
changeLanguageAsync(locale);
140140
}
141141

142142
return () => clearTimeout(timer);

‎web/src/components/message-item/group-button.tsx‎

Lines changed: 53 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import { PromptIcon } from '@/assets/icon/next-icon';
22
import CopyToClipboard from '@/components/copy-to-clipboard';
3+
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
4+
import {
5+
Tooltip,
6+
TooltipContent,
7+
TooltipTrigger,
8+
} from '@/components/ui/tooltip';
39
import { useSetModalState } from '@/hooks/common-hooks';
410
import { IRemoveMessageById } from '@/hooks/logic-hooks';
511
import {
@@ -10,7 +16,6 @@ import {
1016
SoundOutlined,
1117
SyncOutlined,
1218
} from '@ant-design/icons';
13-
import { Radio, Tooltip } from 'antd';
1419
import { useCallback } from 'react';
1520
import { useTranslation } from 'react-i18next';
1621
import FeedbackDialog from '../feedback-dialog';
@@ -50,34 +55,44 @@ export const AssistantGroupButton = ({
5055

5156
return (
5257
<>
53-
<Radio.Group size="small">
54-
<Radio.Button value="a">
58+
<ToggleGroup
59+
type="single"
60+
size="sm"
61+
variant="outline"
62+
className="space-x-1"
63+
>
64+
<ToggleGroupItem value="a">
5565
<CopyToClipboard text={content}></CopyToClipboard>
56-
</Radio.Button>
66+
</ToggleGroupItem>
5767
{showLoudspeaker && (
58-
<Radio.Button value="b" onClick={handleRead}>
59-
<Tooltip title={t('chat.read')}>
60-
{isPlaying ? <PauseCircleOutlined /> : <SoundOutlined />}
68+
<ToggleGroupItem value="b" onClick={handleRead}>
69+
<Tooltip>
70+
<TooltipTrigger asChild>
71+
<span>
72+
{isPlaying ? <PauseCircleOutlined /> : <SoundOutlined />}
73+
</span>
74+
</TooltipTrigger>
75+
<TooltipContent>{t('chat.read')}</TooltipContent>
6176
</Tooltip>
6277
<audio src="" ref={ref}></audio>
63-
</Radio.Button>
78+
</ToggleGroupItem>
6479
)}
6580
{showLikeButton && (
6681
<>
67-
<Radio.Button value="c" onClick={handleLike}>
82+
<ToggleGroupItem value="c" onClick={handleLike}>
6883
<LikeOutlined />
69-
</Radio.Button>
70-
<Radio.Button value="d" onClick={showModal}>
84+
</ToggleGroupItem>
85+
<ToggleGroupItem value="d" onClick={showModal}>
7186
<DislikeOutlined />
72-
</Radio.Button>
87+
</ToggleGroupItem>
7388
</>
7489
)}
7590
{prompt && (
76-
<Radio.Button value="e" onClick={showPromptModal}>
91+
<ToggleGroupItem value="e" onClick={showPromptModal}>
7792
<PromptIcon style={{ fontSize: '16px' }} />
78-
</Radio.Button>
93+
</ToggleGroupItem>
7994
)}
80-
</Radio.Group>
95+
</ToggleGroup>
8196
{visible && (
8297
<FeedbackDialog
8398
visible={visible}
@@ -118,28 +133,39 @@ export const UserGroupButton = ({
118133
const { t } = useTranslation();
119134

120135
return (
121-
<Radio.Group size="small">
122-
<Radio.Button value="a">
136+
<ToggleGroup
137+
type="single"
138+
size="sm"
139+
variant="outline"
140+
className="space-x-1"
141+
>
142+
<ToggleGroupItem value="a">
123143
<CopyToClipboard text={content}></CopyToClipboard>
124-
</Radio.Button>
144+
</ToggleGroupItem>
125145
{regenerateMessage && (
126-
<Radio.Button
146+
<ToggleGroupItem
127147
value="b"
128148
onClick={regenerateMessage}
129149
disabled={sendLoading}
130150
>
131-
<Tooltip title={t('chat.regenerate')}>
132-
<SyncOutlined spin={sendLoading} />
151+
<Tooltip>
152+
<TooltipTrigger asChild>
153+
<SyncOutlined spin={sendLoading} />
154+
</TooltipTrigger>
155+
<TooltipContent>{t('chat.regenerate')}</TooltipContent>
133156
</Tooltip>
134-
</Radio.Button>
157+
</ToggleGroupItem>
135158
)}
136159
{removeMessageById && (
137-
<Radio.Button value="c" onClick={onRemoveMessage} disabled={loading}>
138-
<Tooltip title={t('common.delete')}>
139-
<DeleteOutlined spin={loading} />
160+
<ToggleGroupItem value="c" onClick={onRemoveMessage} disabled={loading}>
161+
<Tooltip>
162+
<TooltipTrigger asChild>
163+
<DeleteOutlined spin={loading} />
164+
</TooltipTrigger>
165+
<TooltipContent>{t('common.delete')}</TooltipContent>
140166
</Tooltip>
141-
</Radio.Button>
167+
</ToggleGroupItem>
142168
)}
143-
</Radio.Group>
169+
</ToggleGroup>
144170
);
145171
};

0 commit comments

Comments
 (0)