From d902e78ffa0cbbcc8db0bd98e26d9063c6e8c9ce Mon Sep 17 00:00:00 2001
From: Mamadou DICKO <63923024+mamadoudicko@users.noreply.github.com>
Date: Mon, 20 Nov 2023 18:22:06 +0100
Subject: [PATCH] feat(apiBrain): improve ux (#1672)

Demo:


https://github.com/StanGirard/quivr/assets/63923024/71efe888-285a-41ed-aa89-44e5f0b99162
---
 backend/models/brain_entity.py                |  1 +
 backend/models/databases/supabase/brains.py   |  8 +++--
 .../BrainListItem/BrainListItem.tsx           |  8 +++--
 .../PublicBrainItem/PublicBrainItem.tsx       | 22 ++++++++++++--
 .../components/SecretsDefinitionFields.tsx    |  2 +-
 .../ActionsBar/components/ChatInput/index.tsx |  6 ++--
 .../getKnowledgeCardIconFromBrainType.tsx     | 19 ------------
 .../mapBackendMinimalBrainToMinimalBrain.ts   |  1 +
 frontend/lib/context/BrainProvider/types.ts   |  1 +
 .../lib/helpers/getBrainIconFromBrainType.tsx | 30 +++++++++++++++++++
 10 files changed, 68 insertions(+), 30 deletions(-)
 delete mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/utils/getKnowledgeCardIconFromBrainType.tsx
 create mode 100644 frontend/lib/helpers/getBrainIconFromBrainType.tsx

diff --git a/backend/models/brain_entity.py b/backend/models/brain_entity.py
index dd011458f..e251c4a8f 100644
--- a/backend/models/brain_entity.py
+++ b/backend/models/brain_entity.py
@@ -43,6 +43,7 @@ class MinimalBrainEntity(BaseModel):
     name: str
     rights: RoleEnum
     status: str
+    brain_type: BrainType
 
 
 class PublicBrain(BaseModel):
diff --git a/backend/models/databases/supabase/brains.py b/backend/models/databases/supabase/brains.py
index da1b03c0e..7fb536282 100644
--- a/backend/models/databases/supabase/brains.py
+++ b/backend/models/databases/supabase/brains.py
@@ -73,7 +73,7 @@ class Brain(Repository):
     def get_user_brains(self, user_id) -> list[MinimalBrainEntity]:
         response = (
             self.db.from_("brains_users")
-            .select("id:brain_id, rights, brains (brain_id, name, status)")
+            .select("id:brain_id, rights, brains (brain_id, name, status, brain_type)")
             .filter("user_id", "eq", user_id)
             .execute()
         )
@@ -85,6 +85,7 @@ class Brain(Repository):
                     name=item["brains"]["name"],
                     rights=item["rights"],
                     status=item["brains"]["status"],
+                    brain_type=item["brains"]["brain_type"],
                 )
             )
             user_brains[-1].rights = item["rights"]
@@ -120,7 +121,9 @@ class Brain(Repository):
     def get_brain_for_user(self, user_id, brain_id) -> MinimalBrainEntity | None:
         response = (
             self.db.from_("brains_users")
-            .select("id:brain_id, rights, brains (id: brain_id, status, name)")
+            .select(
+                "id:brain_id, rights, brains (id: brain_id, status, name, brain_type)"
+            )
             .filter("user_id", "eq", user_id)
             .filter("brain_id", "eq", brain_id)
             .execute()
@@ -134,6 +137,7 @@ class Brain(Repository):
             name=brain_data["brains"]["name"],
             rights=brain_data["rights"],
             status=brain_data["brains"]["status"],
+            brain_type=brain_data["brains"]["brain_type"],
         )
 
     def get_brain_details(self, brain_id):
diff --git a/frontend/app/brains-management/[brainId]/components/BrainsList/components/BrainListItem/BrainListItem.tsx b/frontend/app/brains-management/[brainId]/components/BrainsList/components/BrainListItem/BrainListItem.tsx
index cec5bc37c..5175a1088 100644
--- a/frontend/app/brains-management/[brainId]/components/BrainsList/components/BrainListItem/BrainListItem.tsx
+++ b/frontend/app/brains-management/[brainId]/components/BrainsList/components/BrainListItem/BrainListItem.tsx
@@ -1,9 +1,10 @@
 import Link from "next/link";
 import { useTranslation } from "react-i18next";
-import { FaBrain } from "react-icons/fa";
+import { CgFileDocument } from "react-icons/cg";
 
 import { Chip } from "@/lib/components/ui/Chip";
 import { MinimalBrainForUser } from "@/lib/context/BrainProvider/types";
+import { getBrainIconFromBrainType } from "@/lib/helpers/getBrainIconFromBrainType";
 import { cn } from "@/lib/utils";
 
 import { useBrainListItem } from "./hooks/useBrainListItem";
@@ -33,7 +34,10 @@ export const BrainListItem = ({ brain }: BrainsListItemProps): JSX.Element => {
       >
         <div className="flex flex-row flex-1 w-max">
           <div className="flex items-center gap-2">
-            <FaBrain className="text-xl" />
+            {getBrainIconFromBrainType(brain.brain_type, {
+              iconSize: 24,
+              DocBrainIcon: CgFileDocument,
+            })}
             <p>{brain.name}</p>
           </div>
           {brain.status === "public" && (
diff --git a/frontend/app/brains-management/library/components/PublicBrainItem/PublicBrainItem.tsx b/frontend/app/brains-management/library/components/PublicBrainItem/PublicBrainItem.tsx
index 16981e708..49c8e3e55 100644
--- a/frontend/app/brains-management/library/components/PublicBrainItem/PublicBrainItem.tsx
+++ b/frontend/app/brains-management/library/components/PublicBrainItem/PublicBrainItem.tsx
@@ -1,9 +1,11 @@
 import { useTranslation } from "react-i18next";
+import { CgFileDocument } from "react-icons/cg";
 import { MdAdd, MdLink } from "react-icons/md";
 
 import Button from "@/lib/components/ui/Button";
 import { Modal } from "@/lib/components/ui/Modal";
 import { PublicBrain } from "@/lib/context/BrainProvider/types";
+import { getBrainIconFromBrainType } from "@/lib/helpers/getBrainIconFromBrainType";
 
 import { SecretsDefinitionFields } from "./components/SecretsDefinitionFields";
 import { usePublicBrainItem } from "./hooks/usePublicBrainItem";
@@ -61,7 +63,15 @@ export const PublicBrainItem = ({
       Trigger={
         <div className="flex p-5 justify-center items-center flex-col flex-1 w-full h-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl overflow-hidden bg-white dark:bg-black border border-black/10 dark:border-white/25 md:p-5 cursor-pointer">
           <div>
-            <p className="font-bold mb-5 text-xl line-clamp-1">{brain.name}</p>
+            <p className="font-bold mb-5 text-xl line-clamp-1 flex items-center">
+              <span className="mr-2">
+                {getBrainIconFromBrainType(brain.brain_type, {
+                  iconSize: 24,
+                  DocBrainIcon: CgFileDocument,
+                })}
+              </span>
+              {brain.name}
+            </p>
           </div>
           <div className="flex-1">
             <p
@@ -77,7 +87,15 @@ export const PublicBrainItem = ({
       }
     >
       <div>
-        <p className="text-2xl font-bold text-center mb-10">{brain.name}</p>
+        <p className="text-2xl font-bold text-center mb-10 flex items-center justify-center">
+          <span className="mr-2">
+            {getBrainIconFromBrainType(brain.brain_type, {
+              iconSize: 30,
+              DocBrainIcon: CgFileDocument,
+            })}
+          </span>
+          {brain.name}
+        </p>
         <p className={`mb-10 ${isBrainDescriptionEmpty && "text-gray-400"}`}>
           {brainDescription}
         </p>
diff --git a/frontend/app/brains-management/library/components/PublicBrainItem/components/SecretsDefinitionFields.tsx b/frontend/app/brains-management/library/components/PublicBrainItem/components/SecretsDefinitionFields.tsx
index 129c2cd31..30d34bf55 100644
--- a/frontend/app/brains-management/library/components/PublicBrainItem/components/SecretsDefinitionFields.tsx
+++ b/frontend/app/brains-management/library/components/PublicBrainItem/components/SecretsDefinitionFields.tsx
@@ -31,7 +31,7 @@ export const SecretsDefinitionFields = ({
           <div className="flex flex-col">
             <input
               type="text"
-              className="w-full outline-dotted"
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
               placeholder={secret.description}
               {...register(`secrets.${secret.name}`)}
             />
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
index c55531931..c1d382aca 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
@@ -9,7 +9,7 @@ import { OnboardingQuestions } from "./components";
 import { ChatBar } from "./components/ChatBar/ChatBar";
 import { ConfigModal } from "./components/ConfigModal";
 import { useChatInput } from "./hooks/useChatInput";
-import { getKnowledgeCardIconFromBrainType } from "./utils/getKnowledgeCardIconFromBrainType";
+import { getBrainIconFromBrainType } from "../../../../../../../lib/helpers/getBrainIconFromBrainType";
 
 type ChatInputProps = {
   shouldDisplayFeedOrSecretsCard: boolean;
@@ -46,9 +46,7 @@ export const ChatInput = ({
               onClick={() => setShouldDisplayFeedCard(true)}
               tooltip={t("add_content_card_button_tooltip")}
             >
-              {getKnowledgeCardIconFromBrainType(
-                currentBrainDetails?.brain_type
-              )}
+              {getBrainIconFromBrainType(currentBrainDetails?.brain_type)}
             </Button>
           )}
 
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/utils/getKnowledgeCardIconFromBrainType.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/utils/getKnowledgeCardIconFromBrainType.tsx
deleted file mode 100644
index 7fb595724..000000000
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/utils/getKnowledgeCardIconFromBrainType.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { LuBrain } from "react-icons/lu";
-import { PiPaperclipFill } from "react-icons/pi";
-import { TbWorld } from "react-icons/tb";
-
-import { BrainType } from "@/lib/types/brainConfig";
-
-export const getKnowledgeCardIconFromBrainType = (
-  brainType?: BrainType
-): JSX.Element => {
-  const iconSize = 38;
-  if (brainType === undefined) {
-    return <TbWorld size={iconSize} />;
-  }
-  if (brainType === "api") {
-    return <LuBrain size={iconSize} />;
-  }
-
-  return <PiPaperclipFill size={iconSize} />;
-};
diff --git a/frontend/lib/api/brain/utils/mapBackendMinimalBrainToMinimalBrain.ts b/frontend/lib/api/brain/utils/mapBackendMinimalBrainToMinimalBrain.ts
index 9baf7077f..a9fb5252e 100644
--- a/frontend/lib/api/brain/utils/mapBackendMinimalBrainToMinimalBrain.ts
+++ b/frontend/lib/api/brain/utils/mapBackendMinimalBrainToMinimalBrain.ts
@@ -10,4 +10,5 @@ export const mapBackendMinimalBrainToMinimalBrain = (
   name: backendMinimalBrain.name,
   role: backendMinimalBrain.rights,
   status: backendMinimalBrain.status,
+  brain_type: backendMinimalBrain.brain_type,
 });
diff --git a/frontend/lib/context/BrainProvider/types.ts b/frontend/lib/context/BrainProvider/types.ts
index 97bec19c1..76ada3cab 100644
--- a/frontend/lib/context/BrainProvider/types.ts
+++ b/frontend/lib/context/BrainProvider/types.ts
@@ -28,6 +28,7 @@ export type MinimalBrainForUser = {
   name: string;
   role: BrainRoleType;
   status: BrainAccessStatus;
+  brain_type: BrainType;
 };
 
 //TODO: rename rights to role in Backend and use MinimalBrainForUser instead of BackendMinimalBrainForUser
diff --git a/frontend/lib/helpers/getBrainIconFromBrainType.tsx b/frontend/lib/helpers/getBrainIconFromBrainType.tsx
new file mode 100644
index 000000000..d815acdbc
--- /dev/null
+++ b/frontend/lib/helpers/getBrainIconFromBrainType.tsx
@@ -0,0 +1,30 @@
+import { IconType } from "react-icons/lib";
+import { LuBrain } from "react-icons/lu";
+import { PiPaperclipFill } from "react-icons/pi";
+import { TbWorld } from "react-icons/tb";
+
+import { BrainType } from "@/lib/types/brainConfig";
+type GetBrainIconFromBrainTypeOptions = {
+  iconSize?: number;
+  ApiBrainIcon?: IconType;
+  DocBrainIcon?: IconType;
+};
+
+export const getBrainIconFromBrainType = (
+  brainType?: BrainType,
+  options?: GetBrainIconFromBrainTypeOptions
+): JSX.Element => {
+  const iconSize = options?.iconSize ?? 38;
+
+  const ApiBrainIcon = options?.ApiBrainIcon ?? TbWorld;
+  const DocBrainIcon = options?.DocBrainIcon ?? PiPaperclipFill;
+
+  if (brainType === undefined) {
+    return <LuBrain size={iconSize} />;
+  }
+  if (brainType === "api") {
+    return <ApiBrainIcon size={iconSize} />;
+  }
+
+  return <DocBrainIcon size={iconSize} />;
+};