fix(frontend): logo design of models (#2992)

# 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/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.module.scss

@@ -20,6 +20,10 @@
     color: var(--primary-0);
   }
 
+  .brain_image {
+    border-radius: Radius.$normal;
+  }
+
   .brain_name {
     @include Typography.EllipsisOverflow;
     font-size: Typography.$small;

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.tsx

@@ -26,11 +26,17 @@ export const MentionItem = ({
       onClick={onClick}
     >
       {item.iconUrl ? (
-        <Image src={item.iconUrl} alt="Brain or Model" width={14} height={14} />
+        <Image
+          className={styles.brain_image}
+          src={item.iconUrl}
+          alt="Brain or Model"
+          width={18}
+          height={18}
+        />
       ) : (
         <Icon
           name="brain"
-          size="small"
+          size="normal"
           color={selected ? "primary" : "black"}
         />
       )}

frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.module.scss

@@ -9,6 +9,10 @@
   color: var(--text-3);
   overflow: hidden;
 
+  .brain_image {
+    border-radius: Radius.$normal;
+  }
+
   .brain_name {
     @include Typography.EllipsisOverflow;
   }

frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatItem/QADisplay/components/MessageRow/components/QuestionBrain/QuestionBrain.tsx

@@ -20,7 +20,13 @@ export const QuestionBrain = ({
   return (
     <div data-testid="brain-tags" className={styles.brain_name_wrapper}>
       {imageUrl ? (
-        <Image src={imageUrl} alt="" width={18} height={18} />
+        <Image
+          className={styles.brain_image}
+          src={imageUrl}
+          alt=""
+          width={24}
+          height={24}
+        />
       ) : (
         <Icon name="brain" size="normal" color="black" />
       )}

frontend/app/search/BrainsList/BrainButton/BrainButton.module.scss

@@ -25,6 +25,10 @@
     width: 100%;
     align-items: center;
 
+    .brain_image {
+      border-radius: Radius.$normal;
+    }
+
     .name {
       @include Typography.EllipsisOverflow;
       font-size: Typography.$small;
@@ -39,7 +43,7 @@
     font-style: italic;
     overflow: hidden;
     display: -webkit-box;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     text-overflow: ellipsis;
   }

frontend/app/search/BrainsList/BrainButton/BrainButton.tsx

@@ -40,13 +40,14 @@ const BrainButton = ({
       <div className={styles.header}>
         {brainOrModel.image_url ? (
           <Image
+            className={styles.brain_image}
             src={brainOrModel.image_url}
             alt="Brain or Model"
-            width={16}
-            height={16}
+            width={24}
+            height={24}
           />
         ) : (
-          <Icon name="brain" size="normal" color="black" />
+          <Icon name="brain" size="large" color="black" />
         )}
         <span className={styles.name}>
           {brainOrModel.display_name ?? brainOrModel.name}

frontend/lib/components/CurrentBrain/CurrentBrain.module.scss

@@ -1,3 +1,4 @@
+@use "styles/Radius.module.scss";
 @use "styles/Spacings.module.scss";
 @use "styles/Typography.module.scss";
 
@@ -43,6 +44,10 @@
           filter: invert(100%);
         }
 
+        .brain_image {
+          border-radius: Radius.$normal;
+        }
+
         .brain_name {
           @include textColor(text-3);
           @include Typography.EllipsisOverflow;

frontend/lib/components/CurrentBrain/CurrentBrain.tsx

@@ -25,7 +25,13 @@ const BrainNameAndImage = ({
   return (
     <>
       {currentBrain.image_url ? (
-        <Image src={currentBrain.image_url} alt="" width={18} height={18} />
+        <Image
+          className={styles.brain_image}
+          src={currentBrain.image_url}
+          alt=""
+          width={18}
+          height={18}
+        />
       ) : (
         <Icon name="brain" size="normal" color="black" />
       )}

frontend/styles/_Variables.module.scss

@@ -1,4 +1,4 @@
 $searchBarHeight: 62px;
 $pageHeaderHeight: 48px;
 $menuWidth: 230px;
-$brainButtonHeight: 80px;
+$brainButtonHeight: 105px;