From 78004e8de937f8b9c7e20a1c868d2be3cff4514a Mon Sep 17 00:00:00 2001
From: Antoine Dewez <44063631+Zewed@users.noreply.github.com>
Date: Mon, 8 Jul 2024 11:56:22 +0200
Subject: [PATCH] feat(frontend): Uniformize brain icon (#2802)

# 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):
---
 .../MentionItem/MentionItem.module.scss       | 14 +++----
 .../MentionsList/MentionItem/MentionItem.tsx  | 17 +--------
 .../Editor/MentionsList/MentionsList.tsx      |  3 +-
 .../ChatItem/QADisplay/QADisplay.tsx          | 12 +-----
 .../components/MessageRow/MessageRow.tsx      |  4 +-
 .../QuestionBrain/QuestionBrain.module.scss   |  6 +--
 .../QuestionBrain/QuestionBrain.tsx           | 37 ++-----------------
 .../components/CurrentBrain/CurrentBrain.tsx  | 16 +-------
 8 files changed, 17 insertions(+), 92 deletions(-)

diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.module.scss b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.module.scss
index 2fb2887fe33..12921cabedf 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.module.scss
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.module.scss
@@ -12,17 +12,15 @@
   padding: Spacings.$spacing02;
   min-height: 2rem;
 
-  &:hover,
+  &:hover {
+    background-color: var(--background-3);
+  }
+
   &.selected {
-    background-color: var(--background-special-1);
-    font-weight: 550;
+    color: var(--primary-0);
   }
 
   .brain_name {
     @include Typography.EllipsisOverflow;
   }
-
-  .dark_image {
-    filter: invert(100%);
-  }
-}
\ No newline at end of file
+}
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.tsx
index 78869e3f274..b36691fadcb 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.tsx
@@ -1,7 +1,4 @@
-import Image from "next/image";
-
 import Icon from "@/lib/components/ui/Icon/Icon";
-import { useUserSettingsContext } from "@/lib/context/UserSettingsProvider/hooks/useUserSettingsContext";
 
 import styles from "./MentionItem.module.scss";
 
@@ -10,30 +7,20 @@ import { SuggestionDataType, SuggestionItem } from "../../types";
 type MentionItemProps = {
   item: SuggestionItem;
   type: SuggestionDataType;
-  isSelected: boolean;
   onClick: () => void;
 };
 
 export const MentionItem = ({
   item,
   onClick,
-  isSelected,
 }: MentionItemProps): JSX.Element => {
-
-  const { isDarkMode } = useUserSettingsContext();
-
   return (
     <span
-      className={`${styles.mention_item_wrapper} ${isSelected ? styles.selected : ""
-        }`}
+      className={styles.mention_item_wrapper}
       key={item.id}
       onClick={onClick}
     >
-      {item.iconUrl ? (
-        <Image src={item.iconUrl} width={18} height={18} alt="logo_url" className={isDarkMode ? styles.dark_image : ""} />
-      ) : (
-        <Icon color="primary" size="normal" name="brain" />
-      )}
+      <Icon name="brain" size="normal" color={"black"} />
       <span className={styles.brain_name}>{item.label}</span>
     </span>
   );
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionsList.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionsList.tsx
index 901d247d2ac..455fb312f0a 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionsList.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionsList.tsx
@@ -12,7 +12,7 @@ export type MentionListRef = {
 
 export const MentionList = forwardRef<MentionListRef, MentionListProps>(
   (props, ref) => {
-    const { selectItem, selectedIndex } = useMentionList({
+    const { selectItem } = useMentionList({
       ...props,
       ref,
     });
@@ -29,7 +29,6 @@ export const MentionList = forwardRef<MentionListRef, MentionListProps>(
             <MentionItem
               key={item.id}
               item={item}
-              isSelected={index === selectedIndex}
               onClick={() => selectItem(index)}
               type={props.suggestionData.type}
             />
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/QADisplay.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/QADisplay.tsx
index a6aeb7b9c9c..4b2ed23d0e4 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/QADisplay.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/QADisplay.tsx
@@ -13,15 +13,8 @@ export const QADisplay = ({
   index,
   lastMessage,
 }: QADisplayProps): JSX.Element => {
-  const {
-    assistant,
-    message_id,
-    user_message,
-    brain_name,
-    metadata,
-    brain_id,
-    thumbs,
-  } = content;
+  const { assistant, message_id, user_message, brain_name, metadata, thumbs } =
+    content;
 
   return (
     <>
@@ -36,7 +29,6 @@ export const QADisplay = ({
         speaker={"assistant"}
         text={assistant}
         brainName={brain_name}
-        brainId={brain_id}
         index={index}
         metadata={metadata} // eslint-disable-line @typescript-eslint/no-unsafe-assignment
         messageId={message_id}
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/MessageRow.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/MessageRow.tsx
index b9f2bae7066..1973764c550 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/MessageRow.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/MessageRow.tsx
@@ -25,7 +25,6 @@ type MessageRowProps = {
     thoughts?: string;
     followup_questions?: string[];
   };
-  brainId?: string;
   index?: number;
   messageId?: string;
   thumbs?: boolean;
@@ -37,7 +36,6 @@ export const MessageRow = ({
   text,
   brainName,
   children,
-  brainId,
   messageId,
   thumbs: initialThumbs,
   metadata,
@@ -102,7 +100,7 @@ export const MessageRow = ({
       return (
         <div className={styles.message_header_wrapper}>
           <div className={styles.message_header}>
-            <QuestionBrain brainName={brainName} brainId={brainId} />
+            <QuestionBrain brainName={brainName} />
           </div>
         </div>
       );
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss
index c873753b052..ae6bbfb9173 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss
@@ -9,11 +9,7 @@
   color: var(--text-3);
   overflow: hidden;
 
-  .dark_image {
-    filter: invert(100%);
-  }
-
   .brain_name {
     @include Typography.EllipsisOverflow;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx
index df2a59fe947..173eb65bd43 100644
--- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx
@@ -1,53 +1,22 @@
-import Image from "next/image";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment } from "react";
 
-import { useBrainApi } from "@/lib/api/brain/useBrainApi";
-import { useUserSettingsContext } from "@/lib/context/UserSettingsProvider/hooks/useUserSettingsContext";
+import Icon from "@/lib/components/ui/Icon/Icon";
 
 import styles from "./QuestionBrain.module.scss";
 
 type QuestionBrainProps = {
   brainName?: string | null;
-  brainId?: string;
 };
 export const QuestionBrain = ({
   brainName,
-  brainId,
 }: QuestionBrainProps): JSX.Element => {
-  const [brainLogoUrl, setBrainLogoUrl] = useState<string | undefined>(
-    undefined
-  );
-  const { isDarkMode } = useUserSettingsContext();
-  const { getBrain } = useBrainApi();
-
-  const getBrainLogoUrl = async () => {
-    if (brainId) {
-      try {
-        const brain = await getBrain(brainId.toString());
-        setBrainLogoUrl(brain?.integration_description?.integration_logo_url);
-      } catch (error) {
-        console.error(error);
-      }
-    }
-  };
-
-  useEffect(() => {
-    void getBrainLogoUrl();
-  }, [brainId]);
-
   if (brainName === undefined || brainName === null) {
     return <Fragment />;
   }
 
   return (
     <div data-testid="brain-tags" className={styles.brain_name_wrapper}>
-      <Image
-        className={isDarkMode ? styles.dark_image : ""}
-        src={brainLogoUrl ? brainLogoUrl : "/default_brain_image.png"}
-        alt="logo_image"
-        width={18}
-        height={18}
-      />
+      <Icon name="brain" size="normal" color="black" />
       <span className={styles.brain_name}>{brainName}</span>
     </div>
   );
diff --git a/frontend/lib/components/CurrentBrain/CurrentBrain.tsx b/frontend/lib/components/CurrentBrain/CurrentBrain.tsx
index edf86cb206e..d795c4f4dde 100644
--- a/frontend/lib/components/CurrentBrain/CurrentBrain.tsx
+++ b/frontend/lib/components/CurrentBrain/CurrentBrain.tsx
@@ -1,7 +1,4 @@
-import Image from "next/image";
-
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
-import { useUserSettingsContext } from "@/lib/context/UserSettingsProvider/hooks/useUserSettingsContext";
 
 import styles from "./CurrentBrain.module.scss";
 
@@ -17,7 +14,6 @@ export const CurrentBrain = ({
   remainingCredits,
 }: CurrentBrainProps): JSX.Element => {
   const { currentBrain, setCurrentBrainId } = useBrainContext();
-  const { isDarkMode } = useUserSettingsContext();
   const removeCurrentBrain = (): void => {
     setCurrentBrainId(null);
   };
@@ -48,17 +44,7 @@ export const CurrentBrain = ({
         <div className={styles.left}>
           <span className={styles.title}>Talking to</span>
           <div className={styles.brain_name_wrapper}>
-            <Image
-              className={isDarkMode ? styles.dark_image : ""}
-              src={
-                currentBrain.integration_logo_url
-                  ? currentBrain.integration_logo_url
-                  : "/default_brain_image.png"
-              }
-              alt="logo_image"
-              width={18}
-              height={18}
-            />
+            <Icon name="brain" size="small" color="black" />
             <span className={styles.brain_name}>{currentBrain.name}</span>
           </div>
         </div>