feat: add knowledge tab on brains settings page (#1163)

* feat: add Knowledge tab

* feat: use tanstack query for knowledges fetching

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/BrainManagementTabs.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 
 import Button from "@/lib/components/ui/Button";
 
-import { BrainTabTrigger, PeopleTab } from "./components";
+import { BrainTabTrigger, KnowledgeTab, PeopleTab } from "./components";
 import ConfirmationDeleteModal from "./components/Modals/ConfirmationDeleteModal";
 import { SettingsTab } from "./components/SettingsTab/SettingsTab";
 import { useBrainManagementTabs } from "./hooks/useBrainManagementTabs";
@@ -60,7 +60,7 @@ export const BrainManagementTabs = (): JSX.Element => {
           <PeopleTab brainId={brainId} />
         </Content>
         <Content value="knowledge">
-          <p>{t("comingSoon")}</p>
+          <KnowledgeTab brainId={brainId} />
         </Content>
       </div>
       <div className="flex justify-center">

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/KnowledgeTab/DocumentItem/DocumentData.tsx

@@ -5,7 +5,7 @@ import { useAxios } from "@/lib/hooks";
 
 import { useEventTracking } from "@/services/analytics/useEventTracking";
 import { useTranslation } from "react-i18next";
-import { useSupabase } from "../../../lib/context/SupabaseProvider";
+import { useSupabase } from "../../../../../../../../lib/context/SupabaseProvider";
 
 interface DocumentDataProps {
   documentName: string;

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/KnowledgeTab/hooks/useFileManagementTab.ts

@@ -0,0 +1,34 @@
+import { useQuery } from "@tanstack/react-query";
+import { UUID } from "crypto";
+import { useEffect, useState } from "react";
+
+import { getBrainKnowledgeDataKey } from "@/lib/api/brain/config";
+import { useBrainApi } from "@/lib/api/brain/useBrainApi";
+import { Document } from "@/lib/types/Document";
+
+type useKnowledgeTabProps = {
+  brainId: UUID;
+};
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useKnowledgeTab = ({ brainId }: useKnowledgeTabProps) => {
+  const [documents, setDocuments] = useState<Document[]>([]);
+
+  const { getBrainDocuments } = useBrainApi();
+  const { data: brainDocuments, isLoading: isPending } = useQuery({
+    queryKey: [getBrainKnowledgeDataKey(brainId)],
+    queryFn: () => getBrainDocuments(brainId),
+  });
+
+  useEffect(() => {
+    if (brainDocuments === undefined) {
+      return;
+    }
+    setDocuments(brainDocuments);
+  }, [brainDocuments]);
+
+  return {
+    isPending,
+    documents,
+    setDocuments,
+  };
+};

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/KnowledgeTab/index.tsx

@@ -1,45 +1,32 @@
 "use client";
+import { UUID } from "crypto";
 import { AnimatePresence, motion } from "framer-motion";
 import Link from "next/link";
 import { useTranslation } from "react-i18next";
 
 import Button from "@/lib/components/ui/Button";
 import Spinner from "@/lib/components/ui/Spinner";
-import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
-import { useSupabase } from "@/lib/context/SupabaseProvider";
-import { redirectToLogin } from "@/lib/router/redirectToLogin";
 
 import DocumentItem from "./DocumentItem";
-import { useExplore } from "./hooks/useExplore";
+import { useKnowledgeTab } from "./hooks/useFileManagementTab";
 
-const ExplorePage = (): JSX.Element => {
-  const {t} = useTranslation(["translation","explore"]);
-  const { session } = useSupabase();
-  const { documents, setDocuments, isPending } = useExplore();
-  const { currentBrain } = useBrainContext();
-  if (session === null) {
-    redirectToLogin();
-  }
-  if (currentBrain === undefined) {
-    return (
-      <div className="flex flex-col items-center justify-center mt-10 gap-1">
-        <p className="text-center">
-          {"You need to select a brain first. 🧠💡🥲"}
-        </p>
-      </div>
-    );
-  }
+type KnowledgeTabProps = {
+  brainId: UUID;
+};
+export const KnowledgeTab = ({ brainId }: KnowledgeTabProps): JSX.Element => {
+  const { t } = useTranslation(["translation", "explore"]);
+  const { documents, setDocuments, isPending } = useKnowledgeTab({
+    brainId,
+  });
 
   return (
     <main>
       <section className="w-full outline-none pt-10 flex flex-col gap-5 items-center justify-center p-6">
         <div className="flex flex-col items-center justify-center">
           <h1 className="text-3xl font-bold text-center">
-            {t("title",{ns:"explore"})}
+            {t("title", { ns: "explore" })}
           </h1>
-          <h2 className="opacity-50">
-            {t("subtitle",{ns:"explore"})}
-          </h2>
+          <h2 className="opacity-50">{t("subtitle", { ns: "explore" })}</h2>
         </div>
         {isPending ? (
           <Spinner />
@@ -57,7 +44,7 @@ const ExplorePage = (): JSX.Element => {
               </AnimatePresence>
             ) : (
               <div className="flex flex-col items-center justify-center mt-10 gap-1">
-                <p className="text-center">{t("empty",{ns:"explore"})}</p>
+                <p className="text-center">{t("empty", { ns: "explore" })}</p>
                 <Link href="/upload">
                   <Button>{t("uploadButton")}</Button>
                 </Link>
@@ -69,5 +56,3 @@ const ExplorePage = (): JSX.Element => {
     </main>
   );
 };
-
-export default ExplorePage;

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/index.ts

@@ -1,2 +1,3 @@
 export * from "./BrainTabTrigger";
+export * from "./KnowledgeTab";
 export * from "./PeopleTab";

frontend/app/explore/hooks/useExplore.ts

@@ -1,44 +0,0 @@
-import { UUID } from "crypto";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-import { useBrainApi } from "@/lib/api/brain/useBrainApi";
-import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
-import { useSupabase } from "@/lib/context/SupabaseProvider";
-import { useAxios } from "@/lib/hooks";
-import { Document } from "@/lib/types/Document";
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const useExplore = () => {
-  const [documents, setDocuments] = useState<Document[]>([]);
-  const [isPending, setIsPending] = useState(true);
-  const { session } = useSupabase();
-  const { axiosInstance } = useAxios();
-  const { currentBrainId } = useBrainContext();
-  const { getBrainDocuments } = useBrainApi();
-  const {t} = useTranslation(["translation","explore"]);
-
-  useEffect(() => {
-    const fetchDocuments = async (brainId: UUID | null) => {
-      setIsPending(true);
-      try {
-        if (brainId === null) {
-          throw new Error(t("noBrain",{"ns":"explore"}));
-        }
-        const brainDocuments = await getBrainDocuments(brainId);
-        setDocuments(brainDocuments);
-      } catch (error) {
-        console.error("Error fetching documents", error);
-        setDocuments([]);
-      }
-      setIsPending(false);
-    };
-    void fetchDocuments(currentBrainId);
-  }, [session?.access_token, axiosInstance, currentBrainId]);
-
-  return {
-    isPending,
-    documents,
-    setDocuments,
-  };
-};

frontend/lib/api/brain/config.ts

@@ -2,3 +2,6 @@ const brainDataKey = "quivr-brains";
 
 export const getBrainDataKey = (brainId: string): string =>
   `${brainDataKey}-${brainId}`;
+
+export const getBrainKnowledgeDataKey = (brainId: string): string =>
+  `${brainDataKey}-${brainId}-knowledge`;