quivr/frontend/app/studio/[brainId]/BrainManagementTabs/BrainManagementTabs.tsx
Antoine Dewez 8fc8c5e3ed
fix(frontend): revamp quivr studio (#2274)
# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):
2024-02-28 16:42:14 -08:00

69 lines
1.9 KiB
TypeScript

/* eslint-disable max-lines */
import { useState } from "react";
import Spinner from "@/lib/components/ui/Spinner";
import { Tabs } from "@/lib/components/ui/Tabs/Tabs";
import { Tab } from "@/lib/types/Tab";
import { KnowledgeTab } from "./components/KnowledgeTab/KnowledgeTab";
import { PeopleTab } from "./components/PeopleTab/PeopleTab";
import { SettingsTab } from "./components/SettingsTab/SettingsTab";
import { useBrainFetcher } from "./hooks/useBrainFetcher";
import { useBrainManagementTabs } from "./hooks/useBrainManagementTabs";
export const BrainManagementTabs = (): JSX.Element => {
const [selectedTab, setSelectedTab] = useState("Settings");
const { brainId, hasEditRights } = useBrainManagementTabs();
const { brain, isLoading } = useBrainFetcher({
brainId,
});
const brainManagementTabs: Tab[] = [
{
label: "Settings",
isSelected: selectedTab === "Settings",
onClick: () => setSelectedTab("Settings"),
iconName: "settings",
},
{
label: "People",
isSelected: selectedTab === "People",
onClick: () => setSelectedTab("People"),
iconName: "user",
disabled: !hasEditRights,
},
{
label: "Knowledge",
isSelected: selectedTab === "Knowledge",
onClick: () => setSelectedTab("Knowledge"),
iconName: "file",
disabled: !hasEditRights || brain?.brain_type !== "doc",
},
];
if (!brainId) {
return <div />;
}
if (isLoading) {
return (
<div className="flex w-full h-full justify-center items-center">
<Spinner />
</div>
);
}
return (
<>
<Tabs tabList={brainManagementTabs} />
{selectedTab === "Settings" && <SettingsTab brainId={brainId} />}
{selectedTab === "People" && <PeopleTab brainId={brainId} />}
{selectedTab === "Knowledge" && (
<KnowledgeTab brainId={brainId} hasEditRights={hasEditRights} />
)}
</>
);
};