File size: 2,516 Bytes
af3ef26 503735c af3ef26 503735c af3ef26 7c4aa10 657bc8a 7c4aa10 af3ef26 7c4aa10 af3ef26 aa396c5 405c9f9 aa396c5 af3ef26 503735c aa396c5 af3ef26 657bc8a af3ef26 657bc8a af3ef26 cfbf213 af3ef26 503735c af3ef26 503735c 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 |
import { ReactComponent as StarIon } from '@/assets/svg/chat-star.svg';
import { ReactComponent as KnowledgeBaseIcon } from '@/assets/svg/knowledge-base.svg';
import { ReactComponent as Logo } from '@/assets/svg/logo.svg';
import { Layout, Radio, Space, theme } from 'antd';
import Toolbar from '../right-toolbar';
import styles from './index.less';
import { useNavigateWithFromState } from '@/hooks/routeHook';
import { useCallback, useMemo } from 'react';
import { useLocation } from 'umi';
const { Header } = Layout;
const RagHeader = () => {
const {
token: { colorBgContainer },
} = theme.useToken();
const navigate = useNavigateWithFromState();
const { pathname } = useLocation();
const tagsData = useMemo(
() => [
{ path: '/knowledge', name: 'Knowledge Base', icon: KnowledgeBaseIcon },
{ path: '/chat', name: 'Chat', icon: StarIon },
// { path: '/file', name: 'File Management', icon: FileIcon },
],
[],
);
const currentPath = useMemo(() => {
return (
tagsData.find((x) => pathname.startsWith(x.path))?.name || 'knowledge'
);
}, [pathname, tagsData]);
const handleChange = (path: string) => {
navigate(path);
};
const handleLogoClick = useCallback(() => {
navigate('/');
}, [navigate]);
return (
<Header
style={{
padding: '0 16px',
background: colorBgContainer,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
height: '72px',
}}
>
<Space size={12} onClick={handleLogoClick} className={styles.logoWrapper}>
<Logo className={styles.appIcon}></Logo>
<span className={styles.appName}>RAGFlow</span>
</Space>
<Space size={[0, 8]} wrap>
<Radio.Group
defaultValue="a"
buttonStyle="solid"
className={styles.radioGroup}
value={currentPath}
>
{tagsData.map((item) => (
<Radio.Button
value={item.name}
onClick={() => handleChange(item.path)}
key={item.name}
>
<Space>
<item.icon
className={styles.radioButtonIcon}
stroke={item.name === currentPath ? 'black' : 'white'}
></item.icon>
{item.name}
</Space>
</Radio.Button>
))}
</Radio.Group>
</Space>
<Toolbar></Toolbar>
</Header>
);
};
export default RagHeader;
|