feat(frontend): Add Brain On Search Page (#2067)

# Description

- Implement Icon Component
- Implement TextButton Component
- Change Add Brain Button And Set it in the Search Page
- Fix Errors When sending empty message
- Change EsLint rules

## 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/.eslintrc.js

@@ -41,7 +41,9 @@ module.exports = {
           ["external", "builtin"],
           "unknown",
           "internal",
-          ["parent", "sibling", "index"],
+          "sibling",
+          "parent",
+          "index",
         ],
         alphabetize: {
           order: "asc",

frontend/app/(auth)/login/components/EmailLogin/index.tsx

@@ -9,6 +9,7 @@ import { useAuthModes } from "@/lib/hooks/useAuthModes";
 import { EmailInput } from "./components/EmailInput";
 import { MagicLinkLogin } from "./components/MagicLinkLogin/MaginLinkLogin";
 import { PasswordLogin } from "./components/PasswordLogin/PasswordLogin";
+
 import { EmailAuthContextType } from "../../types";
 
 export const EmailLogin = (): JSX.Element => {

frontend/app/(home)/components/TestimonialsSection/components/TestimonialCard.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 
 import { Avatar } from "@/lib/components/ui/Avatar";
-import { Testimonial } from "@/lib/types/testimonial";
+import { Testimonial } from "@/lib/types/Testimonial";
 
 import { socialMediaToIcon } from "../utils/socialMediaToIcon";
 

frontend/app/(home)/components/TestimonialsSection/utils/socialMediaToIcon.tsx

@@ -1,7 +1,7 @@
 import { AiFillLinkedin } from "react-icons/ai";
 import { RiTwitterXFill } from "react-icons/ri";
 
-import { Testimonial } from "@/lib/types/testimonial";
+import { Testimonial } from "@/lib/types/Testimonial";
 
 export const socialMediaToIcon: Record<
   Testimonial["socialMedia"],

frontend/app/(home)/components/UseCases/UseCases.tsx

@@ -5,6 +5,7 @@ import { LuChevronRight } from "react-icons/lu";
 import Button from "@/lib/components/ui/Button";
 
 import { UseCasesListing } from "./components/UseCasesListing/UseCasesListing";
+
 import { useHomepageTracking } from "../../hooks/useHomepageTracking";
 
 export const UseCases = (): JSX.Element => {

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/KnowledgeOrSecretsTab/components/AddKnowledge/hooks/useAddKnowledge.ts

@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { useUrlBrain } from "@/lib/hooks/useBrainIdFromUrl";
 
 import { useFeedBrain } from "./useFeedBrain";
+
 import { useKnowledge } from "../../../hooks/useKnowledge";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/KnowledgeOrSecretsTab/components/AddedKnowledge/AddedKnowledge.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import Spinner from "@/lib/components/ui/Spinner";
 
 import { useAddedKnowledge } from "./hooks/useAddedKnowledge";
+
 import { KnowledgeTable } from "../KnowledgeTable/KnowledgeTable";
 
 type AddedKnowledgeProps = {

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/KnowledgeOrSecretsTab/index.tsx

@@ -8,6 +8,7 @@ import { KnowledgeToFeedProvider } from "@/lib/context";
 
 import { AddKnowledge } from "./components/AddKnowledge/AddKnowledge";
 import { AddedKnowledge } from "./components/AddedKnowledge/AddedKnowledge";
+
 import { useBrainFetcher } from "../../hooks/useBrainFetcher";
 import { NoAccess } from "../NoAccess";
 

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/SettingsTab/components/GeneralInformation/GeneralInformation.tsx

@@ -12,6 +12,7 @@ import { TextArea } from "@/lib/components/ui/TextArea";
 
 import { BrainAccess } from "./components/BrainAccess/BrainAccess";
 import { useGeneralInformation } from "./hooks/useGeneralInformation";
+
 import { useBrainFormState } from "../../hooks/useBrainFormState";
 
 type GeneralInformationProps = {

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/SettingsTab/components/GeneralInformation/components/BrainAccess/BrainAccess.tsx

@@ -2,7 +2,7 @@ import { UseFormSetValue } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { LuLock, LuUnlock } from "react-icons/lu";
 
-import { BrainConfig, BrainStatus } from "@/lib/types/brainConfig";
+import { BrainConfig, BrainStatus } from "@/lib/types/BrainConfig";
 
 import { BrainAccessRadio } from "./components/BrainAccessRadio";
 

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/SettingsTab/components/GeneralInformation/hooks/useGeneralInformation.ts

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
 
-import { BrainType } from "@/lib/types/brainConfig";
+import { BrainType } from "@/lib/types/BrainConfig";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useGeneralInformation = () => {

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/SettingsTab/hooks/useBrainFormState.ts

@@ -6,7 +6,7 @@ import { useFormContext } from "react-hook-form";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 import { Brain } from "@/lib/context/BrainProvider/types";
 import { useUrlBrain } from "@/lib/hooks/useBrainIdFromUrl";
-import { BrainConfig } from "@/lib/types/brainConfig";
+import { BrainConfig } from "@/lib/types/BrainConfig";
 
 import { useBrainFetcher } from "../../../hooks/useBrainFetcher";
 

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/SettingsTab/hooks/useSettingsTab.ts

@@ -12,6 +12,7 @@ import { useToast } from "@/lib/hooks";
 import { useUserData } from "@/lib/hooks/useUserData";
 
 import { useBrainFormState } from "./useBrainFormState";
+
 import { isBrainDescriptionValid } from "../utils/isBrainDescriptionValid";
 import { isBrainNameValid } from "../utils/isBrainNameValid";
 

frontend/app/brains-management/components/BrainsTabs/BrainsTabs.tsx

@@ -6,6 +6,7 @@ import { Tabs, TabsContent, TabsList } from "@/lib/components/ui/Tabs";
 import { BrainSearchBar } from "./components/BrainSearchBar";
 import { BrainsList } from "./components/BrainsList";
 import { useBrainsTabs } from "./hooks/useBrainsTabs";
+
 import { StyledTabsTrigger } from "../StyledTabsTrigger";
 
 export const BrainsTabs = (): JSX.Element => {

frontend/app/brains-management/page.tsx

@@ -11,8 +11,8 @@ const BrainsManagement = (): JSX.Element => {
   const { t } = useTranslation("chat");
 
   return (
-    <div className="flex flex-col flex-1">
-      <div className="w-full h-full p-6 bg-highlight flex flex-col flex-1 overflow-auto">
+    <div className="flex flex-col flex-1 bg-highlight">
+      <div className="w-full h-full p-6 flex flex-col flex-1 overflow-auto">
         <div className="w-full mb-10">
           <div className="flex flex-row justify-center items-center gap-2">
             <LuBrain size={20} className="text-primary" />
@@ -24,7 +24,7 @@ const BrainsManagement = (): JSX.Element => {
         <BrainsTabs />
       </div>
       <div className="w-full flex justify-center py-4">
-        <AddBrainModal triggerClassName="bg-primary text-white font-normal" />
+        <AddBrainModal />
       </div>
     </div>
   );

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

@@ -40,7 +40,7 @@ export const MentionList = forwardRef<MentionListRef, MentionListProps>(
             />
           ))}
         </div>
-        <div className="relative">
+        <div className="relative flex justify-center items-center py-1">
           {shouldShowScrollToBottomIcon && (
             <FaAngleDoubleDown
               size={20}

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

@@ -1,6 +1,7 @@
 import { cn } from "@/lib/utils";
 
 import { useMentionItemIcon } from "./hooks/useMentionItemIcon";
+
 import { SuggestionDataType, SuggestionItem } from "../../../../types";
 
 type MentionItemProps = {

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

@@ -1,6 +1,7 @@
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 
 import { useMentionConfig } from "./useMentionConfig";
+
 import { SuggestionItem } from "../types";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types

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

@@ -28,9 +28,7 @@ export const useChatStateUpdater = ({
       const { text, brainId, promptId } =
         getChatInputAttributesFromEditorState(editorNewState);
 
-      if (text !== "") {
-        setMessage(text);
-      }
+      setMessage(text);
 
       if (brainId !== currentBrainId) {
         if (brainId === "") {

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

@@ -1,6 +1,7 @@
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 
 import { useMentionConfig } from "./useMentionConfig";
+
 import { SuggestionItem } from "../types";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types

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

@@ -3,6 +3,7 @@ import { Fragment } from "react";
 import { useOnboarding } from "@/lib/hooks/useOnboarding";
 
 import { useOnboardingQuestion } from "./hooks/useOnboardingQuestion";
+
 import { QuestionId } from "../../types";
 
 type OnboardingQuestionsProps = {

frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/Onboarding.tsx

@@ -7,6 +7,7 @@ import { useOnboardingTracker } from "@/lib/hooks/useOnboardingTracker";
 import { useStreamText } from "@/lib/hooks/useStreamText";
 
 import { stepsContainerStyle } from "./styles";
+
 import { MessageRow } from "../QADisplay";
 
 export const Onboarding = (): JSX.Element => {

frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/index.tsx

@@ -10,6 +10,7 @@ import {
   chatItemContainerClassName,
 } from "./styles";
 import { getKeyFromChatItem } from "./utils/getKeyFromChatItem";
+
 import { ChatItemWithGroupedNotifications } from "../../types";
 
 type MessagesDialogueProps = {

frontend/app/chat/[chatId]/hooks/useChat.ts

@@ -17,6 +17,7 @@ import { useEventTracking } from "@/services/analytics/june/useEventTracking";
 
 import { useLocalStorageChatConfig } from "./useLocalStorageChatConfig";
 import { useQuestion } from "./useQuestion";
+
 import { ChatQuestion } from "../types";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types

frontend/app/chat/[chatId]/hooks/useQuestion.ts

@@ -5,6 +5,7 @@ import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainConte
 import { useFetch, useToast } from "@/lib/hooks";
 
 import { useHandleStream } from "./useHandleStream";
+
 import { ChatQuestion } from "../types";
 import { generatePlaceHolderMessage } from "../utils/generatePlaceHolderMessage";
 

frontend/app/contact/page.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import Card from "@/lib/components/ui/Card";
 
 import { ContactForm } from "./components";
+
 import {
   FooterSection,
   HomeHeader,

frontend/app/search/page.module.scss

@@ -1,43 +1,52 @@
-@use '@/styles/Colors.module.scss';
-@use '@/styles/IconSizes.module.scss';
-@use '@/styles/ScreenSizes.module.scss';
-@use '@/styles/Spacings.module.scss';
-@use '@/styles/Typography.module.scss';
+@use "@/styles/Colors.module.scss";
+@use "@/styles/IconSizes.module.scss";
+@use "@/styles/ScreenSizes.module.scss";
+@use "@/styles/Spacings.module.scss";
+@use "@/styles/Typography.module.scss";
+@use "@/styles/Variables.module.scss";
 
 .search_page_container {
-    background-color: Colors.$ivory;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  background-color: Colors.$ivory;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-    .main_container {
-        display: flex;
-        flex-direction: column;
-        row-gap: Spacings.$spacing05;
-        position: relative;
-        width: 50vw;
-        margin-inline: auto;
+  .main_container {
+    display: flex;
+    flex-direction: column;
+    row-gap: Spacings.$spacing05;
+    position: relative;
+    width: 50%;
+    margin-inline: auto;
+    transform: translateY(-#{Variables.$searchBarHeight});
 
-        @media (max-width: ScreenSizes.$small) {
-            width: 100%;
-            margin-inline: Spacings.$spacing07;
-        }
+    @media (max-width: ScreenSizes.$small) {
+      width: 100%;
+      margin-inline: Spacings.$spacing07;
+    }
 
-        .quivr_logo_wrapper {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
+    .quivr_logo_wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
 
-            .quivr_text {
-                @include Typography.H1;
+      .quivr_text {
+        @include Typography.H1;
 
-                .quivr_text_primary {
-                    color: Colors.$primary;
-                }
-            }
+        .quivr_text_primary {
+          color: Colors.$primary;
         }
+      }
     }
-}
+  }
+
+  .add_brain_wrapper {
+    position: absolute;
+    bottom: Spacings.$spacing05;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}

frontend/app/search/page.tsx

@@ -3,44 +3,50 @@ import { usePathname } from "next/navigation";
 import { useEffect } from "react";
 
 import { QuivrLogo } from "@/lib/assets/QuivrLogo";
+import { AddBrainModal } from "@/lib/components/AddBrainModal";
 import { SearchBar } from "@/lib/components/ui/SearchBar/SearchBar";
 import { useMenuContext } from "@/lib/context/MenuProvider/hooks/useMenuContext";
 import { useSupabase } from "@/lib/context/SupabaseProvider";
 import { redirectToLogin } from "@/lib/router/redirectToLogin";
 
-import { useChatsList } from "../chat/[chatId]/hooks/useChatsList";
-// eslint-disable-next-line import/order
 import styles from "./page.module.scss";
 
+import { useChatsList } from "../chat/[chatId]/hooks/useChatsList";
+
 
 const Search = (): JSX.Element => {
-    const {setIsOpened} = useMenuContext();
-    const pathname = usePathname()
-    const { session } = useSupabase();
-
-    useEffect(() => {
-        if (session === null) {
-            redirectToLogin();
-        } 
-        setIsOpened(false)
-    }, [pathname, session, setIsOpened]);
-
-    useChatsList();
-
-    return (
-        <div className={styles.search_page_container}>
-            <div className={styles.main_container}>
-                <div className={styles.quivr_logo_wrapper}>
-                    <QuivrLogo size={80} color="black" />
-                    <div className={styles.quivr_text}>
-                        <span>Talk to </span>
-                        <span className={styles.quivr_text_primary}>Quivr</span>
-                    </div>
-                </div>
-                <SearchBar />
-            </div>
-        </div >
-    );
+  const { setIsOpened } = useMenuContext();
+  const pathname = usePathname();
+  const { session } = useSupabase();
+
+  useEffect(() => {
+    if (session === null) {
+      redirectToLogin();
+    }
+    setIsOpened(false);
+  }, [pathname, session, setIsOpened]);
+
+  useChatsList();
+
+  return (
+    <div className={styles.search_page_container}>
+      <div className={styles.main_container}>
+        <div className={styles.quivr_logo_wrapper}>
+          <QuivrLogo size={80} color="black" />
+          <div className={styles.quivr_text}>
+            <span>Talk to </span>
+            <span className={styles.quivr_text_primary}>Quivr</span>
+          </div>
+        </div>
+        <div className={styles.search_bar_wrapper}>
+          <SearchBar />
+        </div>
+      </div>
+      <div className={styles.add_brain_wrapper}>
+        <AddBrainModal />
+      </div>
+    </div>
+  );
 };
 
 export default Search;