feat(frontend): better UI/UX on select brain

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

@@ -1,4 +1,4 @@
-import { Editor } from "./components/Editor/Editor";
+import { Editor } from "./Editor/Editor";
 
 type ChatEditorProps = {
   onSubmit: () => void;

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

@@ -0,0 +1,24 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Radius.module.scss";
+@use "@/styles/Spacings.module.scss";
+@use "@/styles/Typography.module.scss";
+
+.mention_item_wrapper {
+  display: flex;
+  cursor: pointer;
+  gap: Spacings.$spacing03;
+  align-items: center;
+  border-radius: Radius.$normal;
+  overflow: hidden;
+  padding: Spacings.$spacing02;
+
+  &:hover,
+  &.selected {
+    background-color: Colors.$primary-light;
+    font-weight: 550;
+  }
+
+  .brain_name {
+    @include Typography.EllipsisOverflow;
+  }
+}

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

@@ -0,0 +1,37 @@
+import Image from "next/image";
+
+import Icon from "@/lib/components/ui/Icon/Icon";
+
+import styles from "./MentionItem.module.scss";
+
+import { SuggestionDataType, SuggestionItem } from "../../types";
+
+type MentionItemProps = {
+  item: SuggestionItem;
+  type: SuggestionDataType;
+  isSelected: boolean;
+  onClick: () => void;
+};
+
+export const MentionItem = ({
+  item,
+  onClick,
+  isSelected,
+}: MentionItemProps): JSX.Element => {
+  return (
+    <span
+      className={`${styles.mention_item_wrapper} ${
+        isSelected ? styles.selected : ""
+      }`}
+      key={item.id}
+      onClick={onClick}
+    >
+      {item.iconUrl ? (
+        <Image src={item.iconUrl} width={18} height={18} alt="logo_url" />
+      ) : (
+        <Icon color="primary" size="normal" name="brain" />
+      )}
+      <span className={styles.brain_name}>{item.label}</span>
+    </span>
+  );
+};

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionsList.module.scss

@@ -0,0 +1,23 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Radius.module.scss";
+@use "@/styles/Spacings.module.scss";
+
+.mentions_list_wrapper {
+  display: flex;
+  background-color: Colors.$white;
+  flex-direction: column;
+  padding: Spacings.$spacing03;
+  box-shadow: 0 1px 2px rgb(0, 0, 0, 0.25);
+  border-radius: Radius.$normal;
+  gap: Spacings.$spacing03;
+  max-width: 300px;
+  position: relative;
+  overflow: hidden;
+
+  .mentions_list {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: Spacings.$spacing02;
+  }
+}

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

@@ -1,14 +1,12 @@
 import { SuggestionKeyDownProps } from "@tiptap/suggestion";
 import { forwardRef } from "react";
-import { FaAngleDoubleDown } from "react-icons/fa";
 
 import { useBrainCreationContext } from "@/lib/components/AddBrainModal/brainCreation-provider";
-import TextButton from "@/lib/components/ui/TextButton/TextButton";
+import QuivrButton from "@/lib/components/ui/QuivrButton/QuivrButton";
 
-import { AddNewPromptButton } from "./components/AddNewPromptButton";
-import { MentionItem } from "./components/MentionItem/MentionItem";
+import { MentionItem } from "./MentionItem/MentionItem";
+import styles from "./MentionsList.module.scss";
 import { useMentionList } from "./hooks/useMentionList";
-import { useSuggestionsOverflowHandler } from "./hooks/useSuggestionsOverflowHandler";
 import { MentionListProps } from "./types";
 
 export type MentionListRef = {
@@ -17,13 +15,11 @@ export type MentionListRef = {
 
 export const MentionList = forwardRef<MentionListRef, MentionListProps>(
   (props, ref) => {
-    const { selectItem, selectedIndex, isBrain, isPrompt } = useMentionList({
+    const { selectItem, selectedIndex, isBrain } = useMentionList({
       ...props,
       ref,
     });
 
-    const { suggestionsRef, shouldShowScrollToBottomIcon, scrollToBottom } =
-      useSuggestionsOverflowHandler();
     const { setIsBrainCreationModalOpened } = useBrainCreationContext();
 
     const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -32,14 +28,8 @@ export const MentionList = forwardRef<MentionListRef, MentionListProps>(
     };
 
     return (
-      <div
-        className="items flex flex-1 flex-col p-2 px-4 bg-gray-50 rounded-md shadow-md z-40 max-h-[200px]"
-        onClick={handleClick}
-      >
-        <div
-          className="flex flex-1 flex-col overflow-y-auto"
-          ref={suggestionsRef}
-        >
+      <div className={styles.mentions_list_wrapper} onClick={handleClick}>
+        <div className={styles.mentions_list}>
           {props.suggestionData.items.map((item, index) => (
             <MentionItem
               key={item.id}
@@ -50,23 +40,15 @@ export const MentionList = forwardRef<MentionListRef, MentionListProps>(
             />
           ))}
         </div>
-        <div className="relative flex justify-center items-center py-1">
-          {shouldShowScrollToBottomIcon && (
-            <FaAngleDoubleDown
-              size={20}
-              className="animate-bounce cursor-pointer absolute right-1 top-0 hover:text-primary"
-              onClick={scrollToBottom}
-            />
-          )}
+        <div>
           {isBrain && (
-            <TextButton
+            <QuivrButton
               label="Create Brain"
               iconName="add"
-              color="black"
+              color="primary"
               onClick={() => setIsBrainCreationModalOpened(true)}
             />
           )}
-          {isPrompt && <AddNewPromptButton />}
         </div>
       </div>
     );

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/components/MentionsList/types.ts → frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/MentionsList/types.ts

@@ -1,4 +1,4 @@
-import { SuggestionData, SuggestionItem } from "../../types";
+import { SuggestionData, SuggestionItem } from "../types";
 
 export type MentionListProps = {
   suggestionData: SuggestionData;

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/hooks/useBrainMention.ts → frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/hooks/useBrainMention.ts

@@ -12,6 +12,7 @@ export const useBrainMention = () => {
     id: brain.id,
     label: brain.name,
     type: "brain",
+    iconUrl: brain.integration_logo_url,
   }));
 
   const { Mention: BrainMention } = useMentionConfig({

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/hooks/useCreateEditorState.ts → frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/hooks/useCreateEditorState.ts

@@ -7,13 +7,11 @@ import { Extension, useEditor } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
 
 import { useBrainMention } from "./useBrainMention";
-import { usePromptMention } from "./usePromptSuggestionsConfig";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useCreateEditorState = (placeholder?: string) => {
   const { t } = useTranslation(["chat"]);
   const { BrainMention, items } = useBrainMention();
-  const { PromptMention } = usePromptMention();
 
   const PreventEnter = Extension.create({
     addKeyboardShortcuts: () => {
@@ -39,7 +37,6 @@ export const useCreateEditorState = (placeholder?: string) => {
         Document,
         Text,
         Paragraph,
-        PromptMention,
         BrainMention,
         HardBreak,
       ],

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/hooks/useMentionConfig.ts → frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/hooks/useMentionConfig.ts

@@ -5,11 +5,8 @@ import { SuggestionOptions } from "@tiptap/suggestion";
 import { RefAttributes, useMemo } from "react";
 import tippy, { Instance } from "tippy.js";
 
-import {
-  MentionList,
-  MentionListRef,
-} from "../components/MentionsList/MentionsList";
-import { MentionListProps } from "../components/MentionsList/types";
+import { MentionList, MentionListRef } from "../MentionsList/MentionsList";
+import { MentionListProps } from "../MentionsList/types";
 import { SuggestionData, SuggestionItem } from "../types";
 
 type UseMentionConfigProps = {
@@ -61,6 +58,7 @@ export const useMentionConfig = ({
               editor: props.editor,
             });
             popup = tippy("body", {
+              zIndex: 1030,
               getReferenceClientRect: () => {
                 const rect = props.clientRect?.();
 

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/types.ts → frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/Editor/types.ts

@@ -3,6 +3,7 @@ export type SuggestionDataType = "prompt" | "brain";
 export type SuggestionItem = {
   id: string;
   label: string;
+  iconUrl?: string;
 };
 
 export type SuggestionData = {