feat(frontend): display which brain you are talking to (#2137)

# 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 · Feb 2, 2024 · 9f10ed3 · 9f10ed3
1 parent fd8bc92
commit 9f10ed3
Show file tree

Hide file tree

Showing 22 changed files with 246 additions and 82 deletions.
diff --git a/...onents/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/Editor.tsx b/...onents/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/Editor.tsx
@@ -22,7 +22,13 @@ export const Editor = ({
   const { editor } = useCreateEditorState(placeholder);
 
   useEffect(() => {
-    if (message === "") {
+    const htmlString = editor?.getHTML();
+    if (
+      message === "" ||
+      (htmlString &&
+        new DOMParser().parseFromString(htmlString, "text/html").body
+          .textContent === " ")
+    ) {
       editor?.commands.clearContent();
     }
   }, [message, editor]);

diff --git a/...components/ChatInput/components/ChatEditor/components/Editor/hooks/useChatStateUpdater.ts b/...components/ChatInput/components/ChatEditor/components/Editor/hooks/useChatStateUpdater.ts
@@ -32,7 +32,7 @@ export const useChatStateUpdater = ({
 
       if (brainId !== currentBrainId) {
         if (brainId === "") {
-          setCurrentBrainId(null);
+          return;
         } else {
           if (currentBrainId !== null) {
             removeExistingMentionFromEditor(editorNewState, "mention@");

diff --git a/...ar/components/ChatInput/components/ChatEditor/components/Editor/hooks/useMentionConfig.ts b/...ar/components/ChatInput/components/ChatEditor/components/Editor/hooks/useMentionConfig.ts
@@ -109,8 +109,9 @@ export const useMentionConfig = ({
       class: "mention",
     },
     suggestion: suggestionsConfig,
-    renderLabel: ({ options, node }) =>
-      `${options.suggestion.char ?? ""}${node.attrs.label as string}`,
+    renderLabel: () => {
+      return "";
+    },
   });
 
   return {

diff --git a/...onents/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/styles.css b/...onents/ActionsBar/components/ChatInput/components/ChatEditor/components/Editor/styles.css
@@ -6,7 +6,5 @@
     height: 0;
 }
 .mention {
-    background-color: #E0DDFC;
-    border-radius: 4px;
-    padding: 2px 4px;
+    display: none;
 }
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.module.scss b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.module.scss
@@ -0,0 +1,22 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Radius.module.scss";
+@use "@/styles/Spacings.module.scss";
+
+.chat_container {
+  display: flex;
+  flex-direction: column;
+  background-color: Colors.$white;
+  gap: Spacings.$spacing03;
+  border-radius: Radius.$big;
+  border: 1px solid Colors.$lighter-grey;
+  overflow: hidden;
+
+  .chat_wrapper {
+    display: flex;
+    padding: Spacings.$spacing05;
+
+    &.with_brain {
+      padding-top: 0;
+    }
+  }
+}
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
@@ -1,15 +1,19 @@
 "use client";
 
+import { CurrentBrain } from "@/lib/components/CurrentBrain/CurrentBrain";
 import Icon from "@/lib/components/ui/Icon/Icon";
 import { LoaderIcon } from "@/lib/components/ui/LoaderIcon/LoaderIcon";
+import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 
 import { OnboardingQuestions } from "./components";
 import { ChatEditor } from "./components/ChatEditor/ChatEditor";
 import { useChatInput } from "./hooks/useChatInput";
+import styles from "./index.module.scss";
 
 export const ChatInput = (): JSX.Element => {
   const { setMessage, submitQuestion, generatingAnswer, message } =
     useChatInput();
+  const { currentBrain } = useBrainContext();
 
   const handleSubmitQuestion = () => {
     if (message.trim() !== "") {
@@ -20,36 +24,42 @@ export const ChatInput = (): JSX.Element => {
   return (
     <>
       <OnboardingQuestions />
-      <div className="flex mt-1 flex-col w-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-2">
-        <form
-          data-testid="chat-input-form"
-          onSubmit={(e) => {
-            e.preventDefault();
-            handleSubmitQuestion();
-          }}
-          className="sticky bottom-0 bg-white dark:bg-black w-full flex items-center gap-2 z-20 p-2"
-        >
-          <div className="flex flex-1">
+
+      <form
+        data-testid="chat-input-form"
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleSubmitQuestion();
+        }}
+      >
+        <div className={styles.chat_container}>
+          <CurrentBrain />
+          <div
+            className={`
+            ${styles.chat_wrapper}
+            ${currentBrain ? styles.with_brain : ""}
+          `}
+          >
             <ChatEditor
               message={message}
               setMessage={setMessage}
               onSubmit={handleSubmitQuestion}
             />
+            {generatingAnswer ? (
+              <LoaderIcon size="large" color="accent" />
+            ) : (
+              <Icon
+                name="followUp"
+                size="large"
+                color="accent"
+                disabled={!message}
+                handleHover={true}
+                onClick={handleSubmitQuestion}
+              />
+            )}
           </div>
-          {generatingAnswer ? (
-            <LoaderIcon size="large" color="accent" />
-          ) : (
-            <Icon
-              name="followUp"
-              size="large"
-              color="accent"
-              disabled={!message}
-              handleHover={true}
-              onClick={handleSubmitQuestion}
-            />
-          )}
-        </form>
-      </div>
+        </div>
+      </form>
     </>
   );
 };
diff --git a/...components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss b/...components/ChatDialogue/components/QADisplay/components/MessageRow/MessageRow.module.scss
@@ -1,4 +1,5 @@
 @use "@/styles/Colors.module.scss";
+@use "@/styles/Radius.module.scss";
 @use "@/styles/Spacings.module.scss";
 
 .message_row_container {
@@ -10,7 +11,7 @@
 
   .message_row_content {
     align-self: flex-end;
-    border-radius: 12px;
+    border-radius: Radius.$big;
     width: fit-content;
     padding-block: Spacings.$spacing03;
     padding-inline: Spacings.$spacing05;

diff --git a/frontend/app/chat/[chatId]/components/DataPanel/DataPanel.tsx b/frontend/app/chat/[chatId]/components/DataPanel/DataPanel.tsx
@@ -29,7 +29,6 @@ const DataPanel = (): JSX.Element => {
       const updatedSources: Source[] = [];
 
       newSources.forEach((newSource) => {
-        console.info(newSource.source_url.length);
         const existingSourceIndex = updatedSources.findIndex(
           (source) => source.name.trim() === newSource.name.trim()
         );

diff --git a/frontend/app/chat/[chatId]/components/DataPanel/components/RelatedBrains/RelatedBrains.tsx b/frontend/app/chat/[chatId]/components/DataPanel/components/RelatedBrains/RelatedBrains.tsx
@@ -60,7 +60,8 @@ const RelatedBrains = ({ closeBrains }: RelatedBrainsProps): JSX.Element => {
     <FoldableSection
       label="Related Brains (Beta)"
       icon="brain"
-      foldedByDefault={closeBrains?.length === 0}
+      // When related brains are fixed, foldedByDefault={closeBrains?.length === 0}
+      foldedByDefault={true}
     >
       <div className={styles.close_brains_wrapper}>
         {closeBrains?.map((brain, index) => (

diff --git a/frontend/app/search/page.module.scss b/frontend/app/search/page.module.scss
@@ -1,5 +1,6 @@
 @use "@/styles/Colors.module.scss";
 @use "@/styles/IconSizes.module.scss";
+@use "@/styles/Radius.module.scss";
 @use "@/styles/ScreenSizes.module.scss";
 @use "@/styles/Spacings.module.scss";
 @use "@/styles/Typography.module.scss";
@@ -12,6 +13,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
 
   .main_container {
     display: flex;
@@ -24,7 +26,7 @@
 
     @media (max-width: ScreenSizes.$small) {
       width: 100%;
-      margin-inline: Spacings.$spacing07;
+      padding-inline: Spacings.$spacing07;
     }
 
     .quivr_logo_wrapper {
@@ -43,10 +45,20 @@
     }
   }
 
-  .add_brain_wrapper {
-    position: absolute;
-    bottom: Spacings.$spacing05;
-    left: 50%;
-    transform: translateX(-50%);
+  .shortcuts_card_wrapper {
+    background-color: Colors.$lightest-grey;
+    padding: Spacings.$spacing05;
+    gap: Spacings.$spacing03;
+    border-radius: Radius.$big;
+
+    .shortcut_wrapper {
+      display: flex;
+      align-items: center;
+      gap: Spacings.$spacing03;
+
+      .shortcut {
+        color: Colors.$primary;
+      }
+    }
   }
 }
diff --git a/frontend/app/search/page.tsx b/frontend/app/search/page.tsx
@@ -33,6 +33,16 @@ const Search = (): JSX.Element => {
           <SearchBar />
         </div>
       </div>
+      <div className={styles.shortcuts_card_wrapper}>
+        <div className={styles.shortcut_wrapper}>
+          <span className={styles.shortcut}>@</span>
+          <span>Select a brain</span>
+        </div>
+        <div className={styles.shortcut_wrapper}>
+          <span className={styles.shortcut}>#</span>
+          <span>Select a prompt</span>
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/frontend/lib/components/CurrentBrain/CurrentBrain.module.scss b/frontend/lib/components/CurrentBrain/CurrentBrain.module.scss
@@ -0,0 +1,33 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/Spacings.module.scss";
+@use "@/styles/Typography.module.scss";
+
+.current_brain_wrapper {
+  background-color: Colors.$lightest-grey;
+  padding-inline: Spacings.$spacing05;
+  padding-block: Spacings.$spacing01;
+  font-size: Typography.$small;
+  color: Colors.$normal-grey;
+
+  .brain_infos {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .left {
+      display: flex;
+      gap: Spacings.$spacing02;
+      align-items: center;
+
+      .brain_name_wrapper {
+        display: flex;
+        gap: Spacings.$spacing02;
+        align-items: center;
+
+        .brain_name {
+          color: Colors.$black;
+        }
+      }
+    }
+  }
+}
diff --git a/frontend/lib/components/CurrentBrain/CurrentBrain.tsx b/frontend/lib/components/CurrentBrain/CurrentBrain.tsx
@@ -0,0 +1,39 @@
+import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
+
+import styles from "./CurrentBrain.module.scss";
+
+import { Icon } from "../ui/Icon/Icon";
+
+export const CurrentBrain = (): JSX.Element => {
+  const { currentBrain, setCurrentBrainId } = useBrainContext();
+
+  const removeCurrentBrain = (): void => {
+    setCurrentBrainId(null);
+  };
+
+  if (!currentBrain) {
+    return <></>;
+  }
+
+  return (
+    <div className={styles.current_brain_wrapper}>
+      <div className={styles.brain_infos}>
+        <div className={styles.left}>
+          <span>Talking to</span>
+          <div className={styles.brain_name_wrapper}>
+            <Icon size="small" name="brain" color="primary" />
+            <span className={styles.brain_name}>{currentBrain.name}</span>
+          </div>
+        </div>
+        <div
+          onClick={(event) => {
+            event.nativeEvent.stopImmediatePropagation();
+            removeCurrentBrain();
+          }}
+        >
+          <Icon size="normal" name="close" color="black" handleHover={true} />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/lib/components/Menu/components/DiscussionButton/DiscussionButton.module.scss b/frontend/lib/components/Menu/components/DiscussionButton/DiscussionButton.module.scss
@@ -1,5 +1,6 @@
 @use "@/styles/Colors.module.scss";
 @use "@/styles/IconSizes.module.scss";
+@use "@/styles/Radius.module.scss";
 @use "@/styles/Spacings.module.scss";
 
 .button_wrapper {
@@ -8,7 +9,7 @@
   justify-content: space-between;
   align-items: center;
   border: 1px solid Colors.$lighter-grey;
-  border-radius: 12px;
+  border-radius: Radius.$big;
   background-color: Colors.$white;
   cursor: pointer;
   color: Colors.$dark-grey;
@@ -30,7 +31,7 @@
         justify-content: center;
         font-size: 12px;
         border: 1px solid Colors.$lighter-grey;
-        border-radius: 3px;
+        border-radius: Radius.$small;
         width: 16px;
         height: 16px;
       }

diff --git a/...ts/Menu/components/HistoryButton/ChatsSection/ChatHistoryItem/ChatHistoryItem.module.scss b/...ts/Menu/components/HistoryButton/ChatsSection/ChatHistoryItem/ChatHistoryItem.module.scss
@@ -1,4 +1,5 @@
 @use "@/styles/Colors.module.scss";
+@use "@/styles/Radius.module.scss";
 @use "@/styles/Spacings.module.scss";
 @use "@/styles/Typography.module.scss";
 
@@ -20,7 +21,7 @@
     padding: 0;
     font-size: Typography.$small;
     background-color: Colors.$lighter-grey;
-    border-radius: 2px;
+    border-radius: Radius.$small;
 
     &:focus {
       box-shadow: none;

diff --git a/frontend/lib/components/Menu/components/MenuButton/MenuButton.module.scss b/frontend/lib/components/Menu/components/MenuButton/MenuButton.module.scss
@@ -1,4 +1,5 @@
 @use "@/styles/Colors.module.scss";
+@use "@/styles/Radius.module.scss";
 @use "@/styles/Spacings.module.scss";
 @use "@/styles/Typography.module.scss";
 
@@ -8,13 +9,13 @@
   align-items: center;
   cursor: pointer;
   padding: Spacings.$spacing03;
-  border-radius: 5px;
+  border-radius: Radius.$normal;
   overflow: hidden;
   border-left: 2px solid transparent;
 
   &.selected {
     border-left: 2px solid Colors.$primary;
-    border-radius: 0 5px 5px 0;
+    border-radius: 0 Radius.$normal Radius.$normal 0;
   }
 
   .left {