feat(frontend): handle mentions in search bar (#2049)

# Description - Handle mentions in search bar - Add a Loader Icon component and use it in Search Bar - Custom Placeholder possible on Editor Component - Remove unused useEditorStateUpdater - Fix Bug when Enter was typed ## 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 · Jan 22, 2024 · 1cf0e1a · 1cf0e1a
1 parent 9cd7cca
commit 1cf0e1a
Show file tree

Hide file tree

Showing 12 changed files with 142 additions and 166 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
@@ -4,39 +4,34 @@ import "./styles.css";
 import { useChatStateUpdater } from "./hooks/useChatStateUpdater";
 import { useCreateEditorState } from "./hooks/useCreateEditorState";
 import { useEditor } from "./hooks/useEditor";
-import { useEditorStateUpdater } from "./hooks/useEditorStateUpdater";
 
 type EditorProps = {
   onSubmit: () => void;
   setMessage: (text: string) => void;
   message: string;
+  placeholder?: string;
 };
 
 export const Editor = ({
   setMessage,
-  message,
   onSubmit,
+  placeholder,
 }: EditorProps): JSX.Element => {
-  const { editor } = useCreateEditorState();
+  const { editor } = useCreateEditorState(placeholder);
 
   useChatStateUpdater({
     editor,
     setMessage,
   });
 
-  useEditorStateUpdater({
-    editor,
-    message,
-  });
-
   const { submitOnEnter } = useEditor({
     onSubmit,
   });
 
   return (
     <EditorContent
-      className="w-full"
-      onKeyDown={submitOnEnter}
+      className="w-full caret-accent"
+      onKeyDown={(event) => void submitOnEnter(event)}
       editor={editor}
     />
   );

diff --git a/...omponents/ChatInput/components/ChatEditor/components/Editor/hooks/useCreateEditorState.ts b/...omponents/ChatInput/components/ChatEditor/components/Editor/hooks/useCreateEditorState.ts
@@ -1,30 +1,39 @@
-import Document from "@tiptap/extension-document";
-import HardBreak from "@tiptap/extension-hard-break";
-import Paragraph from "@tiptap/extension-paragraph";
-import Placeholder from "@tiptap/extension-placeholder";
-import Text from "@tiptap/extension-text";
-import { useEditor } from "@tiptap/react";
+import { Document } from "@tiptap/extension-document";
+import { HardBreak } from "@tiptap/extension-hard-break";
+import { Paragraph } from "@tiptap/extension-paragraph";
+import { Placeholder } from "@tiptap/extension-placeholder";
+import { Text } from "@tiptap/extension-text";
+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 = () => {
+export const useCreateEditorState = (placeholder?: string) => {
   const { t } = useTranslation(["chat"]);
   const { BrainMention, items } = useBrainMention();
   const { PromptMention } = usePromptMention();
 
+  const PreventEnter = Extension.create({
+    addKeyboardShortcuts: () => {
+      return {
+        Enter: () => true,
+      };
+    },
+  });
+
   const editor = useEditor(
     {
       autofocus: true,
       onFocus: () => {
         editor?.commands.focus("end");
       },
       extensions: [
+        PreventEnter,
         Placeholder.configure({
           showOnlyWhenEditable: true,
-          placeholder: t("actions_bar_placeholder"),
+          placeholder: placeholder ?? t("actions_bar_placeholder"),
         }),
         Document,
         Text,

diff --git a/...ctionsBar/components/ChatInput/components/ChatEditor/components/Editor/hooks/useEditor.ts b/...ctionsBar/components/ChatInput/components/ChatEditor/components/Editor/hooks/useEditor.ts
@@ -7,8 +7,7 @@ type UseEditorProps = {
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useEditor = ({ onSubmit }: UseEditorProps) => {
   const submitOnEnter = (ev: KeyboardEvent<HTMLDivElement>) => {
-    if (ev.key === "Enter" && !ev.shiftKey) {
-      ev.preventDefault();
+    if (ev.key === "Enter" && !ev.shiftKey && !ev.metaKey) {
       onSubmit();
     }
   };

diff --git a/...mponents/ChatInput/components/ChatEditor/components/Editor/hooks/useEditorStateUpdater.ts b/...mponents/ChatInput/components/ChatEditor/components/Editor/hooks/useEditorStateUpdater.ts
diff --git a/...ctionsBar/components/ChatInput/components/MenuControlButton/MenuControlButton.module.scss b/...ctionsBar/components/ChatInput/components/MenuControlButton/MenuControlButton.module.scss
@@ -1,13 +1,13 @@
-@use '@/styles/Colors.module.scss';
-@use '@/styles/IconSizes.module.scss';
-@use '@/styles/Spacings.module.scss';
+@use "@/styles/Colors.module.scss";
+@use "@/styles/IconSizes.module.scss";
+@use "@/styles/Spacings.module.scss";
 
 .menu_icon {
-    width: IconSizes.$medium;
-    height: IconSizes.$medium;
-    cursor: pointer;
+  width: IconSizes.$large;
+  height: IconSizes.$large;
+  cursor: pointer;
 
-    &:hover {
-        color: Colors.$accent;
-    }
-}
+  &:hover {
+    color: Colors.$accent;
+  }
+}
diff --git a/frontend/lib/components/ui/Button.tsx b/frontend/lib/components/ui/Button.tsx
@@ -7,9 +7,9 @@ import {
 } from "@radix-ui/react-tooltip";
 import { cva, type VariantProps } from "class-variance-authority";
 import { ButtonHTMLAttributes, Ref, RefAttributes, forwardRef } from "react";
-import { FaSpinner } from "react-icons/fa";
 
 import { cn } from "@/lib/utils";
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
 
 const ButtonVariants = cva(
   "px-8 py-3 text-sm disabled:opacity-80 text-center font-medium rounded-md focus:ring ring-primary/10 outline-none flex items-center justify-center gap-2 transition-opacity focus:ring-0",
@@ -65,7 +65,8 @@ const Button = forwardRef(
 
     const buttonChildren = (
       <>
-        {children} {isLoading && <FaSpinner className="animate-spin" />}
+        {children}{" "}
+        {isLoading && <AiOutlineLoading3Quarters className="animate-spin" />}
       </>
     );
 

diff --git a/frontend/lib/components/ui/LoaderIcon/LoaderIcon.module.scss b/frontend/lib/components/ui/LoaderIcon/LoaderIcon.module.scss
@@ -0,0 +1,38 @@
+@use "@/styles/Colors.module.scss";
+@use "@/styles/IconSizes.module.scss";
+
+.loader_icon {
+  animation: spin 1s linear infinite;
+  width: IconSizes.$big;
+  height: IconSizes.$big;
+  color: Colors.$accent;
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  &.small {
+    width: IconSizes.$small;
+    height: IconSizes.$small;
+  }
+
+  &.normal {
+    width: IconSizes.$normal;
+    height: IconSizes.$normal;
+  }
+
+  &.large {
+    width: IconSizes.$large;
+    height: IconSizes.$large;
+  }
+
+  &.big {
+    width: IconSizes.$big;
+    height: IconSizes.$big;
+  }
+}
diff --git a/frontend/lib/components/ui/LoaderIcon/LoaderIcon.tsx b/frontend/lib/components/ui/LoaderIcon/LoaderIcon.tsx
@@ -0,0 +1,17 @@
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
+
+import { IconSize } from "@/lib/types/Icons";
+
+import styles from "./LoaderIcon.module.scss";
+
+interface LoaderIconProps {
+  size: IconSize;
+}
+
+export const LoaderIcon = (props: LoaderIconProps): JSX.Element => {
+  return (
+    <AiOutlineLoading3Quarters
+      className={`${styles.loader_icon ?? ""} ${styles[props.size] ?? ""}`}
+    />
+  );
+};
diff --git a/frontend/lib/components/ui/SearchBar/SearchBar.module.scss b/frontend/lib/components/ui/SearchBar/SearchBar.module.scss
@@ -1,41 +1,32 @@
-@use '@/styles/Colors.module.scss';
-@use '@/styles/IconSizes.module.scss';
-@use '@/styles/Spacings.module.scss';
+@use "@/styles/Colors.module.scss";
+@use "@/styles/IconSizes.module.scss";
+@use "@/styles/Spacings.module.scss";
 
 .search_bar_wrapper {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: Spacings.$spacing03;
-    background-color: Colors.$white;
-    padding: Spacings.$spacing05;
-    border-radius: 12px;
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: Spacings.$spacing03;
+  background-color: Colors.$white;
+  padding: Spacings.$spacing05;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 
-    &:hover {
-        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-    }
-
-    .search_input {
-        border: none;
-        flex: 1;
-        caret-color: Colors.$accent;
-
-        &:focus {
-            box-shadow: none;
-        }
-    }
+  &:hover {
+    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+      0 8px 10px -6px rgb(0 0 0 / 0.1);
+  }
 
-    .search_icon {
-        width: IconSizes.$big;
-        height: IconSizes.$big;
-        color: Colors.$accent;
-        cursor: pointer;
+  .search_icon {
+    width: IconSizes.$big;
+    height: IconSizes.$big;
+    color: Colors.$accent;
+    cursor: pointer;
 
-        &.disabled {
-            color: Colors.$black;
-            pointer-events: none;
-            opacity: 0.2;
-        }
+    &.disabled {
+      color: Colors.$black;
+      pointer-events: none;
+      opacity: 0.2;
     }
-}
+  }
+}