feat(frontend): uniformize behaviour for metadata panel (#2124)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## 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/app/chat/[chatId]/components/DataPanel/components/RelatedBrains/RelatedBrains.module.scss

@@ -13,38 +13,24 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    padding-left: Spacings.$spacing03;
-    padding-right: Spacings.$spacing05;
+    padding-inline: Spacings.$spacing05;
     overflow: hidden;
 
-    .left {
-      display: flex;
-      align-items: center;
-      gap: Spacings.$spacing03;
-      overflow: hidden;
+    .brain_name {
+      @include Typography.EllipsisOverflow;
+      cursor: pointer;
 
-      .copy_icon {
-        visibility: hidden;
+      &.current {
+        color: Colors.$primary;
       }
 
-      .brain_name {
-        @include Typography.EllipsisOverflow;
-
-        &.current {
-          color: Colors.$primary;
-        }
+      &:hover {
+        color: Colors.$primary;
       }
     }
 
     .similarity_score {
       cursor: help;
     }
-
-    &:hover {
-      .left .copy_icon {
-        visibility: visible;
-        cursor: pointer;
-      }
-    }
   }
 }

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

@@ -1,8 +1,9 @@
+import { UUID } from "crypto";
 import { useEffect, useState } from "react";
 
 import { FoldableSection } from "@/lib/components/ui/FoldableSection/FoldableSection";
-import Icon from "@/lib/components/ui/Icon/Icon";
 import { useChatContext } from "@/lib/context";
+import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 import { CloseBrain } from "@/lib/types/MessageMetadata";
 
 import styles from "./RelatedBrains.module.scss";
@@ -17,6 +18,7 @@ interface CloseBrainProps {
 }
 
 const RelatedBrains = ({ closeBrains }: RelatedBrainsProps): JSX.Element => {
+  const { setCurrentBrainId } = useBrainContext();
   const [closeBrainsProps, setCloseBrainProps] = useState<CloseBrainProps[]>(
     []
   );
@@ -44,6 +46,16 @@ const RelatedBrains = ({ closeBrains }: RelatedBrainsProps): JSX.Element => {
     }
   }, [closeBrains, messages.length]);
 
+  const setCurrentBrain = (index: number) => {
+    if (closeBrains?.[index]) {
+      setCurrentBrainId(closeBrains[index].id as UUID);
+      closeBrainsProps.forEach((_closeBrains, closeBrainIndex) => {
+        closeBrainsProps[closeBrainIndex].isCurrentBrain =
+          index === closeBrainIndex;
+      });
+    }
+  };
+
   return (
     <FoldableSection
       label="Related Brains (Beta)"
@@ -53,20 +65,8 @@ const RelatedBrains = ({ closeBrains }: RelatedBrainsProps): JSX.Element => {
       <div className={styles.close_brains_wrapper}>
         {closeBrains?.map((brain, index) => (
           <div className={styles.brain_line} key={index}>
-            <div className={styles.left}>
-              <div className={styles.copy_icon}>
-                <Icon
-                  name="copy"
-                  size="normal"
-                  color="black"
-                  handleHover={true}
-                  onClick={() =>
-                    void navigator.clipboard.writeText("@" + brain.name)
-                  }
-                ></Icon>
-              </div>
-              <p
-                className={`
+            <span
+              className={`
               ${styles.brain_name ?? ""} 
               ${
                 closeBrainsProps[index]?.isCurrentBrain
@@ -74,10 +74,10 @@ const RelatedBrains = ({ closeBrains }: RelatedBrainsProps): JSX.Element => {
                   : ""
               }
               `}
-              >
-                @{brain.name}
-              </p>
-            </div>
+              onClick={() => void setCurrentBrain(index)}
+            >
+              {brain.name}
+            </span>
             <div
               className={styles.similarity_score}
               title="Similarity score"