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

# 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):
QuivrHQ · Mar 4, 2024 · 6efe1be · 6efe1be
1 parent 1613b7a
commit 6efe1be
Show file tree

Hide file tree

Showing 26 changed files with 105 additions and 208 deletions.
diff --git a/.../[chatId]/components/ActionsBar/components/ChatInput/components/ChatEditor/ChatEditor.tsx b/.../[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;

diff --git a/...s/ChatEditor/components/Editor/Editor.tsx → ...t/components/ChatEditor/Editor/Editor.tsx b/...s/ChatEditor/components/Editor/Editor.tsx → ...t/components/ChatEditor/Editor/Editor.tsx
diff --git a/...s/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.module.scss b/...s/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;
+  }
+}
diff --git a/...omponents/ChatInput/components/ChatEditor/Editor/MentionsList/MentionItem/MentionItem.tsx b/...omponents/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>
+  );
+};
diff --git a/...r/components/ChatInput/components/ChatEditor/Editor/MentionsList/MentionsList.module.scss b/...r/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;
+  }
+}
diff --git a/.../components/MentionsList/MentionsList.tsx → ...itor/Editor/MentionsList/MentionsList.tsx b/.../components/MentionsList/MentionsList.tsx → ...itor/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>
     );

diff --git a/...ents/MentionsList/hooks/useMentionList.ts → ...itor/MentionsList/hooks/useMentionList.ts b/...ents/MentionsList/hooks/useMentionList.ts → ...itor/MentionsList/hooks/useMentionList.ts
diff --git a/...s/Editor/components/MentionsList/types.ts → ...s/ChatEditor/Editor/MentionsList/types.ts b/...s/Editor/components/MentionsList/types.ts → ...s/ChatEditor/Editor/MentionsList/types.ts
@@ -1,4 +1,4 @@
-import { SuggestionData, SuggestionItem } from "../../types";
+import { SuggestionData, SuggestionItem } from "../types";
 
 export type MentionListProps = {
   suggestionData: SuggestionData;

diff --git a/...omponents/Editor/hooks/useBrainMention.ts → ...hatEditor/Editor/hooks/useBrainMention.ts b/...omponents/Editor/hooks/useBrainMention.ts → ...hatEditor/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({

diff --git a/...nents/Editor/hooks/useChatStateUpdater.ts → ...ditor/Editor/hooks/useChatStateUpdater.ts b/...nents/Editor/hooks/useChatStateUpdater.ts → ...ditor/Editor/hooks/useChatStateUpdater.ts
diff --git a/...ents/Editor/hooks/useCreateEditorState.ts → ...itor/Editor/hooks/useCreateEditorState.ts b/...ents/Editor/hooks/useCreateEditorState.ts → ...itor/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,
       ],

diff --git a/...itor/components/Editor/hooks/useEditor.ts → ...ents/ChatEditor/Editor/hooks/useEditor.ts b/...itor/components/Editor/hooks/useEditor.ts → ...ents/ChatEditor/Editor/hooks/useEditor.ts
diff --git a/...mponents/Editor/hooks/useMentionConfig.ts → ...atEditor/Editor/hooks/useMentionConfig.ts b/...mponents/Editor/hooks/useMentionConfig.ts → ...atEditor/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?.();
 

diff --git a/...s/ChatEditor/components/Editor/styles.css → ...t/components/ChatEditor/Editor/styles.css b/...s/ChatEditor/components/Editor/styles.css → ...t/components/ChatEditor/Editor/styles.css
diff --git a/...nts/ChatEditor/components/Editor/types.ts → ...put/components/ChatEditor/Editor/types.ts b/...nts/ChatEditor/components/Editor/types.ts → ...put/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 = {

diff --git a/.../getChatInputAttributesFromEditorState.ts → .../getChatInputAttributesFromEditorState.ts b/.../getChatInputAttributesFromEditorState.ts → .../getChatInputAttributesFromEditorState.ts
diff --git a/.../utils/removeExistingMentionFromEditor.ts → .../utils/removeExistingMentionFromEditor.ts b/.../utils/removeExistingMentionFromEditor.ts → .../utils/removeExistingMentionFromEditor.ts
diff --git a/...ts/ChatEditor/components/Editor/components/MentionsList/components/AddNewPromptButton.tsx b/...ts/ChatEditor/components/Editor/components/MentionsList/components/AddNewPromptButton.tsx
diff --git a/...atEditor/components/Editor/components/MentionsList/components/MentionItem/MentionItem.tsx b/...atEditor/components/Editor/components/MentionsList/components/MentionItem/MentionItem.tsx
diff --git a/...ponents/Editor/components/MentionsList/components/MentionItem/hooks/useMentionItemIcon.ts b/...ponents/Editor/components/MentionsList/components/MentionItem/hooks/useMentionItemIcon.ts
diff --git a/...atEditor/components/Editor/components/MentionsList/hooks/useSuggestionsOverflowHandler.ts b/...atEditor/components/Editor/components/MentionsList/hooks/useSuggestionsOverflowHandler.ts