feat(frontend): brain Catalogue

backend/modules/brain/entity/integration_brain.py

@@ -10,15 +10,27 @@ class IntegrationType(str, Enum):
     SYNC = "sync"
     DOC = "doc"
 
+class IntegrationBrainTag(str, Enum):
+    NEW = "new"
+    RECOMMENDED = "recommended"
+    MOST_POPULAR = "most_popular"
+    PREMIUM = "premium"
+    COMING_SOON = "coming_soon"
+    COMMUNITY = "community"
+    DEPRECATED = "deprecated"
+
 
 class IntegrationDescriptionEntity(BaseModel):
     id: UUID
     integration_name: str
     integration_logo_url: Optional[str] = None
     connection_settings: Optional[dict] = None
     integration_type: IntegrationType
+    tags: Optional[list[IntegrationBrainTag]] = []
+    information: Optional[str] = None
     description: str
     max_files: int
+    allow_model_change: bool
 
 
 class IntegrationEntity(BaseModel):

frontend/app/studio/[brainId]/BrainManagementTabs/components/SettingsTab/SettingsTab.tsx

@@ -59,7 +59,7 @@ export const SettingsTabContent = ({
               <div className={styles.general_information}>
                 <GeneralInformation hasEditRights={hasEditRights} />
               </div>
-              {brain?.brain_type === "doc" && (
+              {brain?.integration_description?.allow_model_change && (
                 <div className={styles.model_information}>
                   <ModelSelection
                     accessibleModels={accessibleModels}

frontend/lib/api/brain/types.ts

@@ -53,7 +53,7 @@ export type ApiBrainDefinition = {
 
 export type IntegrationSettings = {
   integration_id?: string;
-  settings?: { [x: string]: object | undefined };
+  settings?: { [x: string]: string | undefined };
 };
 
 export type CreateBrainInput = {
@@ -71,14 +71,26 @@ export type CreateBrainInput = {
   integration?: IntegrationSettings;
 };
 
+enum IntegrationBrainTag {
+  NEW = "new",
+  RECOMMENDED = "recommended",
+  MOST_POPULAR = "most_popular",
+  PREMIUM = "premium",
+  COMING_SOON = "coming_soon",
+  COMMUNITY = "community",
+  DEPRECATED = "deprecated",
+}
+
 export type IntegrationBrains = {
   id: UUID;
   integration_name: string;
   integration_logo_url: string;
-  connections_settings: Record<string, unknown>;
+  connection_settings: string;
   integration_type: "custom" | "sync";
   description: string;
   max_files: number;
+  tags: IntegrationBrainTag[];
+  information: string;
 };
 
 export type UpdateBrainInput = Partial<CreateBrainInput>;

frontend/lib/api/brain/utils/mapBackendMinimalBrainToMinimalBrain.ts

@@ -14,4 +14,5 @@ export const mapBackendMinimalBrainToMinimalBrain = (
   description: backendMinimalBrain.description,
   integration_logo_url: backendMinimalBrain.integration_logo_url,
   max_files: backendMinimalBrain.max_files,
+  allow_model_change: backendMinimalBrain.allow_model_change,
 });

frontend/lib/components/AddBrainModal/AddBrainModal.tsx

@@ -19,7 +19,7 @@ export const AddBrainModal = (): JSX.Element => {
   const {
     isBrainCreationModalOpened,
     setIsBrainCreationModalOpened,
-    setCurrentIntegrationBrain,
+    setCurrentSelectedBrain,
   } = useBrainCreationContext();
 
   const defaultValues: CreateBrainProps = {
@@ -33,7 +33,7 @@ export const AddBrainModal = (): JSX.Element => {
   });
 
   useEffect(() => {
-    setCurrentIntegrationBrain(undefined);
+    setCurrentSelectedBrain(undefined);
   }, [isBrainCreationModalOpened]);
 
   return (

frontend/lib/components/AddBrainModal/brainCreation-provider.tsx

@@ -7,8 +7,8 @@ interface BrainCreationContextProps {
   setIsBrainCreationModalOpened: React.Dispatch<React.SetStateAction<boolean>>;
   creating: boolean;
   setCreating: React.Dispatch<React.SetStateAction<boolean>>;
-  currentIntegrationBrain: IntegrationBrains | undefined;
-  setCurrentIntegrationBrain: React.Dispatch<
+  currentSelectedBrain: IntegrationBrains | undefined;
+  setCurrentSelectedBrain: React.Dispatch<
     React.SetStateAction<IntegrationBrains | undefined>
   >;
 }
@@ -24,7 +24,7 @@ export const BrainCreationProvider = ({
 }): JSX.Element => {
   const [isBrainCreationModalOpened, setIsBrainCreationModalOpened] =
     useState<boolean>(false);
-  const [currentIntegrationBrain, setCurrentIntegrationBrain] =
+  const [currentSelectedBrain, setCurrentSelectedBrain] =
     useState<IntegrationBrains>();
   const [creating, setCreating] = useState<boolean>(false);
 
@@ -35,8 +35,8 @@ export const BrainCreationProvider = ({
         setIsBrainCreationModalOpened,
         creating,
         setCreating,
-        currentIntegrationBrain,
-        setCurrentIntegrationBrain,
+        currentSelectedBrain,
+        setCurrentSelectedBrain,
       }}
     >
       {children}

frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainCatalogue/BrainCatalogue.module.scss

@@ -0,0 +1,60 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Radius.module.scss";
+@use "@/styles/ScreenSizes.module.scss";
+@use "@/styles/Spacings.module.scss";
+@use "@/styles/Typography.module.scss";
+
+.cards_wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: Spacings.$spacing05;
+
+  .title {
+    @include Typography.H2;
+  }
+
+  .brains_grid {
+    display: flex;
+    gap: Spacings.$spacing03;
+    flex-wrap: wrap;
+
+    .brain_card_container {
+      display: flex;
+      flex-direction: column;
+      gap: Spacings.$spacing02;
+
+      .tag_wrapper {
+        height: 2rem;
+      }
+
+      .brain_card_wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border-radius: Radius.$normal;
+        gap: Spacings.$spacing03;
+        padding: Spacings.$spacing04;
+        width: fit-content;
+        cursor: pointer;
+        width: 120px;
+
+        .brain_title {
+          font-size: Typography.$medium;
+          font-weight: 500;
+        }
+
+        &:hover,
+        &.selected {
+          border-color: Colors.$primary;
+          background-color: Colors.$primary-lightest;
+
+          .brain_title {
+            color: Colors.$primary;
+          }
+        }
+      }
+    }
+  }
+}

frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/CustomBrainList/CustomBrainList.tsx → frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainCatalogue/BrainCatalogue.tsx

@@ -1,38 +1,49 @@
+import { capitalCase } from "change-case";
 import Image from "next/image";
 
 import { IntegrationBrains } from "@/lib/api/brain/types";
 import { MessageInfoBox } from "@/lib/components/ui/MessageInfoBox/MessageInfoBox";
+import { Tag } from "@/lib/components/ui/Tag/Tag";
 import Tooltip from "@/lib/components/ui/Tooltip/Tooltip";
 
-import styles from "./CustomBrainList.module.scss";
+import styles from "./BrainCatalogue.module.scss";
 
 import { useBrainCreationContext } from "../../../brainCreation-provider";
 
-export const CustomBrainList = ({
-  customBrainList,
+export const BrainCatalogue = ({
+  brains,
+  next,
 }: {
-  customBrainList: IntegrationBrains[];
+  brains: IntegrationBrains[];
+  next: () => void;
 }): JSX.Element => {
-  const { setCurrentIntegrationBrain, currentIntegrationBrain } =
+  const { setCurrentSelectedBrain, currentSelectedBrain } =
     useBrainCreationContext();
 
   return (
     <div className={styles.cards_wrapper}>
       <MessageInfoBox type="info">
-        More custom brains are coming!
+        <span>
+          A Brain is a specialized AI tool designed to interact with specific
+          use cases or data sources.
+        </span>
       </MessageInfoBox>
-      <span className={styles.title}>Choose a custom brain</span>
-      <div>
-        {customBrainList.map((brain) => {
+      <span className={styles.title}>Choose a brain type</span>
+      <div className={styles.brains_grid}>
+        {brains.map((brain) => {
           return (
             <div
               key={brain.id}
-              onClick={() => setCurrentIntegrationBrain(brain)}
+              className={styles.brain_card_container}
+              onClick={() => {
+                next();
+                setCurrentSelectedBrain(brain);
+              }}
             >
               <Tooltip tooltip={brain.description}>
                 <div
                   className={`${styles.brain_card_wrapper} ${
-                    currentIntegrationBrain === brain ? styles.selected : ""
+                    currentSelectedBrain === brain ? styles.selected : ""
                   }`}
                 >
                   <Image
@@ -44,6 +55,11 @@ export const CustomBrainList = ({
                   <span className={styles.brain_title}>
                     {brain.integration_name}
                   </span>
+                  <div className={styles.tag_wrapper}>
+                    {brain.tags[0] && (
+                      <Tag color="primary" name={capitalCase(brain.tags[0])} />
+                    )}
+                  </div>
                 </div>
               </Tooltip>
             </div>