feat: add brains library layout

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

@@ -31,7 +31,7 @@ export const BrainListItem = ({ brain }: BrainsListItemProps): JSX.Element => {
  href={`/brains-management/${brain.id}`}
  key={brain.id}
  >
- <div className="flex flex-row flex-1">
+ <div className="flex flex-row flex-1 w-max">
  <div className="flex items-center gap-2">
  <FaBrain className="text-xl" />
  <p>{brain.name}</p>

frontend/app/brains-management/[brainId]/hooks/useBrainsList.ts

@@ -36,10 +36,14 @@ export const useBrainsList = () => {
  return;
  }
 
- if (currentBrainId !== null) {
+ if (
+ currentBrainId !== null &&
+ pathname !== null &&
+ !pathname.includes("library")
+ ) {
  redirect(`/brains-management/${currentBrainId}`);
  }
- }, [currentBrainId]);
+ }, [brainId, currentBrainId, pathname]);
 
  return {
  open,

frontend/app/brains-management/library/components/PublicBrainItem.tsx

@@ -0,0 +1,26 @@
+import { useTranslation } from "react-i18next";
+import { MdAdd } from "react-icons/md";
+
+import Button from "@/lib/components/ui/Button";
+import { Brain } from "@/lib/context/BrainProvider/types";
+
+type PublicBrainItemProps = {
+ brain: Brain;
+};
+
+export const PublicBrainItem = ({
+ brain,
+}: PublicBrainItemProps): JSX.Element => {
+ const { t } = useTranslation("brain");
+
+ return (
+ <div className="flex justify-center items-center flex-col 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">
+ <p className="font-bold mb-5 text-xl">{brain.name}</p>
+ <p className="line-clamp-2 text-center px-5">{brain.description ?? ""}</p>
+ <Button className="bg-purple-600 text-white p-0 px-3 rounded-xl border-0 w-content mt-3">
+ {t("public_brain_subscribe_button_label")}
+ <MdAdd className="text-md" />
+ </Button>
+ </div>
+ );
+};

frontend/app/brains-management/library/hooks/useBrainsLibrary.tsx

@@ -0,0 +1,43 @@
+import { useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+
+import { PUBLIC_BRAINS_KEY } from "@/lib/api/brain/config";
+import { useBrainApi } from "@/lib/api/brain/useBrainApi";
+import { Brain } from "@/lib/context/BrainProvider/types";
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useBrainsLibrary = () => {
+ const [searchBarText, setSearchBarText] = useState("");
+ const { getPublicBrains } = useBrainApi();
+ const { data: publicBrains = [] } = useQuery({
+ queryKey: [PUBLIC_BRAINS_KEY],
+ queryFn: getPublicBrains,
+ });
+
+ const [displayingPublicBrains, setDisplayingPublicBrains] = useState<Brain[]>(
+ []
+ );
+
+ useEffect(() => {
+ setDisplayingPublicBrains(publicBrains);
+ }, [publicBrains]);
+
+ useEffect(() => {
+ if (searchBarText === "") {
+ setDisplayingPublicBrains(publicBrains);
+
+ return;
+ }
+ setDisplayingPublicBrains(
+ publicBrains.filter((brain) =>
+ brain.name.toLowerCase().includes(searchBarText.toLowerCase())
+ )
+ );
+ }, [publicBrains, searchBarText]);
+
+ return {
+ displayingPublicBrains,
+ searchBarText,
+ setSearchBarText,
+ };
+};

frontend/app/brains-management/library/page.tsx

@@ -1,11 +1,35 @@
 "use client";
+
+import { useTranslation } from "react-i18next";
+
+import Field from "@/lib/components/ui/Field";
+
+import { PublicBrainItem } from "./components/PublicBrainItem";
+import { useBrainsLibrary } from "./hooks/useBrainsLibrary";
+
 const BrainsLibrary = (): JSX.Element => {
+ const { displayingPublicBrains, searchBarText, setSearchBarText } =
+ useBrainsLibrary();
+ const { t } = useTranslation("brain");
+
  return (
- <div className="container">
- <div className="row">
- <div className="col-12">
- <h1>Brains Library</h1>
- </div>
+ <div className="flex flex-1 flex-col items-center m-20 border-2 border-gray-100 border-solid rounded-xl">
+ <div className="flex">
+ <Field
+ value={searchBarText}
+ onChange={(e) => setSearchBarText(e.target.value)}
+ name="search"
+ inputClassName="w-max lg:min-w-[300px] md:min-w-[200px] min-w-[100px] mt-10 rounded-3xl bg-white"
+ placeholder={t("public_brains_search_bar_placeholder")}
+ />
+ </div>
+
+ <div className="flex flex-wrap justify-stretch w-full">
+ {displayingPublicBrains.map((brain) => (
+ <div key={brain.id} className="lg:w-1/3 md:w-1/2 w-1 md:p-5">
+ <PublicBrainItem brain={brain} />
+ </div>
+ ))}
  </div>
  </div>
  );

frontend/lib/api/brain/config.ts

@@ -1,7 +1,9 @@
-const brainDataKey = "quivr-brains";
+const BRAIN_DATA_KEY = "quivr-brains";
 
 export const getBrainDataKey = (brainId: string): string =>
- `${brainDataKey}-${brainId}`;
+ `${BRAIN_DATA_KEY}-${brainId}`;
 
 export const getBrainKnowledgeDataKey = (brainId: string): string =>
- `${brainDataKey}-${brainId}-knowledge`;
+ `${BRAIN_DATA_KEY}-${brainId}-knowledge`;
+
+export const PUBLIC_BRAINS_KEY = "quivr-public-brains";

frontend/public/locales/en/brain.json

@@ -34,5 +34,7 @@
  "set_brain_status_to_public_modal_description": "Every Quivr user will be able to:<br/>- Subscribe to your brain in the 'brains library'.<br/>- Use this brain and check the prompt and model configurations.<br/><br/>They won't have access to your uploaded files and people section.",
  "confirm_set_brain_status_to_public": "Yes, set as public",
  "cancel_set_brain_status_to_public": "No, keep it private",
- "brain_library_button_label":"Brains library"
+ "brain_library_button_label":"Brains library",
+ "public_brains_search_bar_placeholder":"Search public brains",
+ "public_brain_subscribe_button_label":"Subscribe"
 }

frontend/public/locales/es/brain.json

@@ -34,5 +34,7 @@
  "set_brain_status_to_public_modal_description": "Cada usuario de Quivr podrá:<br/>- Suscribirse a tu cerebro en la 'biblioteca de cerebros'.<br/>- Usar este cerebro y comprobar las configuraciones de las indicaciones y el modelo.<br/><br/>No tendrán acceso a tus archivos cargados ni a la sección de personas.",
  "confirm_set_brain_status_to_public": "Sí, establecer como público",
  "cancel_set_brain_status_to_public": "No, mantenerlo privado",
- "brain_library_button_label": "Biblioteca de cerebros"
+ "brain_library_button_label": "Biblioteca de cerebros",
+ "public_brains_search_bar_placeholder": "Buscar cerebros públicos",
+ "public_brain_subscribe_button_label": "Suscribirse"
 }

frontend/public/locales/fr/brain.json

@@ -34,5 +34,7 @@
  "set_brain_status_to_public_modal_description": "Chaque utilisateur de Quivr pourra :<br/>- S'abonner à votre cerveau dans la 'bibliothèque des cerveaux'.<br/>- Utiliser ce cerveau et vérifier les configurations de prompts et de modèles.<br/><br/>Ils n'auront pas accès à vos fichiers téléchargés et à la section des personnes.",
  "confirm_set_brain_status_to_public": "Oui, définir comme public",
  "cancel_set_brain_status_to_public": "Non, le garder privé",
- "brain_library_button_label": "Bibliothèque des cerveaux"
+ "brain_library_button_label": "Bibliothèque des cerveaux",
+ "public_brains_search_bar_placeholder": "Rechercher des cerveaux publics",
+ "public_brain_subscribe_button_label": "S'abonner"
 }

frontend/public/locales/pt-br/brain.json

@@ -34,5 +34,7 @@
  "set_brain_status_to_public_modal_description": "Cada usuário do Quivr poderá:<br/>- Se inscrever em seu cérebro na 'biblioteca de cérebros'.<br/>- Usar este cérebro e verificar as configurações de prompts e modelos.<br/><br/>Eles não terão acesso aos seus arquivos enviados e à seção de pessoas.",
  "confirm_set_brain_status_to_public": "Sim, definir como público",
  "cancel_set_brain_status_to_public": "Não, mantê-lo privado",
- "brain_library_button_label": "Biblioteca de cérebros"
+ "brain_library_button_label": "Biblioteca de cérebros",
+ "public_brains_search_bar_placeholder": "Pesquisar cérebros públicos",
+ "public_brain_subscribe_button_label": "Inscrever-se"
 }

frontend/public/locales/ru/brain.json

@@ -34,5 +34,7 @@
  "set_brain_status_to_public_modal_description": "Каждый пользователь Quivr сможет:<br/>- Подписаться на ваш мозг в 'библиотеке мозгов'.<br/>- Использовать этот мозг и проверить настройки подсказок и модели.<br/><br/>У них не будет доступа к вашим загруженным файлам и разделу 'люди'.",
  "confirm_set_brain_status_to_public": "Да, установить как публичный",
  "cancel_set_brain_status_to_public": "Нет, оставить приватным",
- "brain_library_button_label": "Библиотека мозгов"
+ "brain_library_button_label": "Библиотека мозгов",
+ "public_brains_search_bar_placeholder": "Поиск общественных мозгов",
+ "public_brain_subscribe_button_label": "Подписаться"
 }

frontend/public/locales/zh-cn/brain.json

@@ -34,5 +34,7 @@
  "set_brain_status_to_public_modal_description": "每个 Quivr 用户将能够：<br/>- 在 '大脑库' 中订阅您的大脑。<br/>- 使用此大脑并检查提示和模型配置。<br/><br/>他们将无法访问您上传的文件和人员部分。",
  "confirm_set_brain_status_to_public": "是的，设为公共",
  "cancel_set_brain_status_to_public": "不，保持私密",
- "brain_library_button_label": "大脑库"
+ "brain_library_button_label": "大脑库",
+ "public_brains_search_bar_placeholder": "搜索公共大脑",
+ "public_brain_subscribe_button_label": "订阅"
 }