Function ProjectHome

frontend/src/views/projectHome/index.tsx:31–326

()

import { useDispatch, useSelector } from 'react-redux';
const { Header, Content, Sider } = Layout;
const ProjectHome = () => {
    const { search, pathname } = useLocation();

    const navigate = useNavigate();
    const dispatch = useDispatch();
    const { playgroundType } = useSelector((state: any) => state.playgroundType)
    const { assistantPlaygroundId } = useSelector((state: any) => state.assistantId)
    const location = useLocation()
    const { modelName, modelId } = useSelector((state: any) => state.modelId)
    const keyReverseValue: Record<string, string> = {
        ['/project']: 'Home',
        ['/project/models']: 'Models',
        ['/project/home']: 'Home',
        ['/project/assistants']: 'Assistants',
        ['/project/collections']: 'Retrieval',
        ['/project/playground']: 'Playground',
        ['/project/tools']: 'Plugins',
        ['/project/tools/actions']: 'Actions',
        ['/project/tools/plugins']: 'Plugins',
        ['/project/apikeys']: 'API Keys',
    }
    const subMenuItems = [
        { key: '/project/tools/plugins', icon: <LogoutOutlined />, text: 'Plugins', path: `/project/tools/plugins` },
        { key: '/project/tools/actions', icon: <LogoutOutlined />, text: 'Actions', path: `/project/tools/actions` },
    ];
    const [key, setKey] = useState('')
    const filteredKeys = [location.pathname === `/project` || location.pathname === `/project/` ? `/project/home` : location.pathname, location.pathname.includes('tools') && `/project/tools`, !location.pathname.includes('tools/actions') && location.pathname.includes('tools') && `/project/tools/plugins`]

    const [selectedKey, setSelectedKey] = useState(filteredKeys.filter(item => Boolean(item)) as string[])
    const [isOpen, setOpen] = useState(selectedKey.filter(item => typeof item === 'string').some(item => (item as string).includes('tools')))
    const [collapsed, setCollapsed] = useState(false);
    const [showTaskingAi, setShowTaskingAi] = useState(true);
    const [logoutOpen, setLogoutOpen] = useState(false)
    const [assistantParams, setAssistantParams] = useState('')

    useEffect(() => {
        const queryParams: any = new URLSearchParams(search);
        const assistantId = queryParams.get('assistant_id')

        if (location.pathname === `/project/playground` && assistantId && playgroundType === 'assistant') {
            setAssistantParams(`assistant_id=${assistantId}`)
        } else if (playgroundType === 'chat_completion' && modelId) {
            setAssistantParams(`model_id=${modelId}&model_name=${modelName}`)
        }
        const key = location.pathname
        setSelectedKey([key])
        setKey(key)
        if (key === `/project/tools`) {
            setSelectedKey([key, `/project/tools/plugins`])
            setOpen(true)
        } else {
            if (key === `/project/tools/plugins` || key === `/project/tools/actions`) {
                setOpen(true)
                setSelectedKey([key, `/project/tools`])
            } else {
                setOpen(false)
                setSelectedKey([key])
            }