File size: 3,682 Bytes
7c6cf75 596e145 503735c 68ed806 e68f488 68ed806 c39b5d3 596e145 6b85a7f 5769711 503735c af3ef26 53f091c af3ef26 7c4aa10 af3ef26 5769711 15052fd 53f091c aa396c5 e441caf 24ea1d7 c39b5d3 596e145 7c6cf75 aa396c5 e441caf aa396c5 af3ef26 503735c aa396c5 af3ef26 6b85a7f af3ef26 657bc8a af3ef26 896abbe af3ef26 53f091c af3ef26 53f091c 6b85a7f af3ef26 503735c af3ef26 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
import { ReactComponent as FileIcon } from '@/assets/svg/file-management.svg';
import { ReactComponent as GraphIcon } from '@/assets/svg/graph.svg';
import { ReactComponent as KnowledgeBaseIcon } from '@/assets/svg/knowledge-base.svg';
import { useTranslate } from '@/hooks/common-hooks';
import { useFetchAppConf } from '@/hooks/logic-hooks';
import { useNavigateWithFromState } from '@/hooks/route-hook';
import { MessageOutlined, SearchOutlined } from '@ant-design/icons';
import { Flex, Layout, Radio, Space, theme } from 'antd';
import { MouseEventHandler, useCallback, useMemo } from 'react';
import { useLocation } from 'umi';
import Toolbar from '../right-toolbar';
import { useTheme } from '@/components/theme-provider';
import styles from './index.less';
const { Header } = Layout;
const RagHeader = () => {
const {
token: { colorBgContainer },
} = theme.useToken();
const navigate = useNavigateWithFromState();
const { pathname } = useLocation();
const { t } = useTranslate('header');
const appConf = useFetchAppConf();
const { theme: themeRag } = useTheme();
const tagsData = useMemo(
() => [
{ path: '/knowledge', name: t('knowledgeBase'), icon: KnowledgeBaseIcon },
{ path: '/chat', name: t('chat'), icon: MessageOutlined },
{ path: '/search', name: t('search'), icon: SearchOutlined },
{ path: '/flow', name: t('flow'), icon: GraphIcon },
{ path: '/file', name: t('fileManager'), icon: FileIcon },
],
[t],
);
const currentPath = useMemo(() => {
return (
tagsData.find((x) => pathname.startsWith(x.path))?.name || 'knowledge'
);
}, [pathname, tagsData]);
const handleChange = useCallback(
(path: string): MouseEventHandler =>
(e) => {
e.preventDefault();
navigate(path);
},
[navigate],
);
const handleLogoClick = useCallback(() => {
navigate('/');
}, [navigate]);
return (
<Header
style={{
padding: '0 16px',
background: colorBgContainer,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
height: '72px',
}}
>
<a href={window.location.origin}>
<Space
size={12}
onClick={handleLogoClick}
className={styles.logoWrapper}
>
<img src="/logo.svg" alt="" className={styles.appIcon} />
<span className={styles.appName}>{appConf.appName}</span>
</Space>
</a>
<Space size={[0, 8]} wrap>
<Radio.Group
defaultValue="a"
buttonStyle="solid"
className={
themeRag === 'dark' ? styles.radioGroupDark : styles.radioGroup
}
value={currentPath}
>
{tagsData.map((item, index) => (
<Radio.Button
className={`${themeRag === 'dark' ? 'dark' : 'light'} ${index === 0 ? 'first' : ''} ${index === tagsData.length - 1 ? 'last' : ''}`}
value={item.name}
key={item.name}
>
<a href={item.path}>
<Flex
align="center"
gap={8}
onClick={handleChange(item.path)}
className="cursor-pointer"
>
<item.icon
className={styles.radioButtonIcon}
stroke={item.name === currentPath ? 'black' : 'white'}
></item.icon>
{item.name}
</Flex>
</a>
</Radio.Button>
))}
</Radio.Group>
</Space>
<Toolbar></Toolbar>
</Header>
);
};
export default RagHeader;
|