✨ AddKnowledge in knowledge tab

QuivrHQ · Sep 28, 2023 · af2f8e6 · af2f8e6
1 parent 9f27303
commit af2f8e6
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 31 deletions.
diff --git a/...agement/[brainId]/components/BrainManagementTabs/components/KnowledgeTab/AddKnowledge.tsx b/...agement/[brainId]/components/BrainManagementTabs/components/KnowledgeTab/AddKnowledge.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
+
+import { KnowledgeToFeedInput } from "@/lib/components/KnowledgeToFeedInput";
+import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
+
+import { useKnowledge } from "./hooks/useKnowledge";
+
+export const AddKnowledge = (): JSX.Element => {
+  const { t } = useTranslation(["knowledge"]);
+
+  const [shouldDiplayModal, setShouldDisplayModal] = useState(false);
+  const [hasPendingRequests, setHasPendingRequests] = useState(false);
+  const { currentBrain } = useBrainContext();
+  const { invalidateKnowledgeDataKey } = useKnowledge({
+    brainId: currentBrain?.id,
+  });
+
+  useEffect(() => {
+    if (!hasPendingRequests) {
+      invalidateKnowledgeDataKey();
+    }
+  }, [hasPendingRequests, invalidateKnowledgeDataKey]);
+
+  return (
+    <>
+      <button
+        className="flex flex-1 items-center justify-center rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-2 md:p-6"
+        onClick={() => setShouldDisplayModal(true)}
+      >
+        <div className="flex flex-lin items-center">
+          <span className="text-2xl md:text-3xl">+</span>
+        </div>
+      </button>
+      {hasPendingRequests && (
+        <div className="flex mt-1 flex-col md:flex-row  shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-2 md:p-6 pl-6">
+          <AiOutlineLoading3Quarters className="animate-spin text-2xl md:text-3xl self-center" />
+        </div>
+      )}
+      {shouldDiplayModal && (
+        <KnowledgeToFeedInput
+          closeFeedInput={() => setShouldDisplayModal(false)}
+          dispatchHasPendingRequests={() => setHasPendingRequests(true)}
+        />
+      )}
+    </>
+  );
+};
diff --git a/...ins-management/[brainId]/components/BrainManagementTabs/components/KnowledgeTab/index.tsx b/...ins-management/[brainId]/components/BrainManagementTabs/components/KnowledgeTab/index.tsx
@@ -4,50 +4,59 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
 
 import Spinner from "@/lib/components/ui/Spinner";
-import { KnowledgeProvider } from "@/lib/context";
+import { ChatProvider, KnowledgeProvider } from "@/lib/context";
 
+import { AddKnowledge } from "./AddKnowledge";
 import { KnowledgeTable } from "./KnowledgeTable";
-import { useKnowledgeTab } from "./hooks/useKnowledgeTab";
+import { useKnowledge } from "./hooks/useKnowledge";
 
 type KnowledgeTabProps = {
   brainId: UUID;
 };
 export const KnowledgeTab = ({ brainId }: KnowledgeTabProps): JSX.Element => {
   const { t } = useTranslation(["translation", "explore"]);
-  const { isPending, allKnowledge } = useKnowledgeTab({
+  const { isPending, allKnowledge } = useKnowledge({
     brainId,
   });
 
   return (
     <KnowledgeProvider>
-      <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" })}
-            </h1>
-            <h2 className="opacity-50">{t("subtitle", { ns: "explore" })}</h2>
-          </div>
-          {isPending ? (
-            <Spinner />
-          ) : (
-            <motion.div layout className="w-full max-w-xl flex flex-col gap-5">
-              {allKnowledge.length !== 0 ? (
-                <AnimatePresence mode="popLayout">
-                  <KnowledgeTable knowledgeList={allKnowledge} />
-                </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("feed_brain_instructions", { ns: "explore" })}
-                  </p>
-                </div>
-              )}
-            </motion.div>
-          )}
-        </section>
-      </main>
+      <ChatProvider>
+        <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" })}
+              </h1>
+              <h2 className="opacity-50">{t("subtitle", { ns: "explore" })}</h2>
+            </div>
+            <AddKnowledge />
+            {isPending ? (
+              <Spinner />
+            ) : (
+              <motion.div
+                layout
+                className="w-full max-w-xl flex flex-col gap-5"
+              >
+                {allKnowledge.length !== 0 ? (
+                  <AnimatePresence mode="popLayout">
+                    <KnowledgeTable knowledgeList={allKnowledge} />
+                  </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("feed_brain_instructions", { ns: "explore" })}
+                    </p>
+                  </div>
+                )}
+              </motion.div>
+            )}
+          </section>
+        </main>
+      </ChatProvider>
     </KnowledgeProvider>
   );
 };