fix(frontend): clean related Brains useEffect (#2091)

# Description

- Select current Brain from brain_id instead of brain_name
- Avoid multiple calls of useEffect

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/.eslintrc.js

@@ -129,6 +129,7 @@ module.exports = {
       },
       rules: {
         "@typescript-eslint/prefer-optional-chain": "error",
+        "react-hooks/exhaustive-deps": "off",
         "no-shadow": "off",
         "@typescript-eslint/no-shadow": "error",
         "@typescript-eslint/prefer-nullish-coalescing": "error",

frontend/app/chat/[chatId]/components/DataPanel/components/RelatedBrains/RelatedBrains.tsx

@@ -32,12 +32,12 @@ const RelatedBrains = ({ closeBrains }: RelatedBrainsProps): JSX.Element => {
       const g = Math.round(lerp(211, 43, t));
       const b = Math.round(lerp(211, 226, t));
       const isCurrentBrain =
-        brain.name === messages[messages.length - 1].brain_name;
+        brain.id === messages[messages.length - 1].brain_id;
 
       return { color: `rgb(${r}, ${g}, ${b})`, isCurrentBrain: isCurrentBrain };
     });
     setCloseBrainProps(newProps);
-  }, [closeBrains, messages]);
+  }, [closeBrains, messages.length]);
 
   if (closeBrains.length === 0) {
     return <></>;

frontend/app/chat/[chatId]/page.module.scss

@@ -5,7 +5,8 @@
   display: flex;
   flex: 1 1 0%;
   background-color: Colors.$white;
-  padding: Spacings.$spacing06;
+  padding-block: Spacings.$spacing06;
+  padding-inline: Spacings.$spacing09;
   display: flex;
   gap: Spacings.$spacing09;
 

frontend/app/chat/[chatId]/types/index.ts

@@ -18,6 +18,7 @@ export type ChatMessage = {
   message_time: string;
   prompt_title?: string;
   brain_name?: string;
+  brain_id?: UUID;
   metadata?: {
     sources?: [string];
     close_brains?: CloseBrain[];