feat: update header and remove prompt / brain on backspace (#1052)

* feat: update header

* feat: remove selected prompt / brain on backspace

* feat(chat): update suggestions component

* refactor: add getAxiosErrorParams

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

@@ -69,7 +69,7 @@ export const MentionInput = ({
           // `open` should be directly passed to the MentionSuggestions component.
           // However, it is not working as expected since we are not able to click on button in custom suggestion renderer.
           // So, we are using this hack to make it work.
-          visibility: open ? "visible" : "hidden",
+          opacity: open ? 1 : 0,
         }}
       >
         <MentionSuggestions

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/hooks/helpers/MentionPlugin.tsx

@@ -21,7 +21,9 @@ export const useMentionPlugin = () => {
                 minWidth: "auto",
                 backgroundColor: "transparent",
                 padding: "0",
-                marginBottom: "5",
+                // We are adding a bottom margin to the suggestions container since it is overlapping with mention remove icon
+                // Please, do not remove!
+                marginBottom: "20px",
               };
             },
           },

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/hooks/useMentionInput.tsx

@@ -127,10 +127,21 @@ export const useMentionInput = ({
       return getDefaultKeyBinding(e);
     }
 
-    if (
+    if (e.key === "Backspace" || e.key === "Delete") {
-      (e.key === "Backspace" || e.key === "Delete") &&
+      if (!(getEditorText(editorState) === "")) {
-      getEditorText(editorState) === ""
+        return getDefaultKeyBinding(e);
-    ) {
+      }
+      if (currentPromptId !== null) {
+        setCurrentPromptId(null);
+
+        return "backspace";
+      }
+      if (currentBrainId !== null) {
+        setCurrentBrainId(null);
+
+        return "backspace";
+      }
+
       return "backspace";
     }
 

frontend/app/invitation/[brainId]/hooks/useInvitation.ts

@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { useSubscriptionApi } from "@/lib/api/subscription/useSubscriptionApi";
-import { BrainRoleType } from "@/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types";
+import { BrainRoleType } from "@/lib/components/BrainUsers/types";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 import { useToast } from "@/lib/hooks";
 import { useEventTracking } from "@/services/analytics/useEventTracking";

frontend/app/upload/page.tsx

@@ -2,7 +2,7 @@
 import Link from "next/link";
 import { useTranslation } from "react-i18next";
 
-import { BrainRoleType } from "@/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types";
+import { BrainRoleType } from "@/lib/components/BrainUsers/types";
 import Button from "@/lib/components/ui/Button";
 import { Divider } from "@/lib/components/ui/Divider";
 import PageHeading from "@/lib/components/ui/PageHeading";

frontend/lib/api/brain/brain.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines */
 import { AxiosInstance } from "axios";
 
-import { BrainRoleType } from "@/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types";
+import { BrainRoleType } from "@/lib/components/BrainUsers/types";
 import {
   BackendMinimalBrainForUser,
   Brain,

frontend/lib/api/brain/types.ts

@@ -1,4 +1,4 @@
-import { BrainRoleType } from "@/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types";
+import { BrainRoleType } from "@/lib/components/BrainUsers/types";
 
 export type SubscriptionUpdatableProperties = {
   role: BrainRoleType | null;

frontend/lib/api/brain/utils/mapSubscriptionToBackendSubscription.ts

@@ -1,4 +1,4 @@
-import { BrainRoleType } from "@/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types";
+import { BrainRoleType } from "@/lib/components/BrainUsers/types";
 
 import { Subscription } from "../brain";
 

frontend/lib/api/brain/utils/mapSubscriptionUpdatablePropertiesToBackendSubscriptionUpdatableProperties.ts

@@ -1,4 +1,4 @@
-import { BrainRoleType } from "@/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types";
+import { BrainRoleType } from "@/lib/components/BrainUsers/types";
 
 import { SubscriptionUpdatableProperties } from "../types";
 

frontend/lib/api/subscription/subscription.ts

@@ -1,7 +1,7 @@
 import { AxiosInstance } from "axios";
 import { UUID } from "crypto";
 
-import { BrainRoleType } from "@/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types";
+import { BrainRoleType } from "@/lib/components/BrainUsers/types";
 
 export const acceptInvitation = async (
   brainId: UUID,

frontend/lib/components/BrainUsers/components/BrainUser/BrainUser.tsx

@@ -7,7 +7,7 @@ import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainConte
 
 import { RemoveAccessIcon } from "./components/RemoveAccessIcon";
 import { useBrainUser } from "./hooks/useBrainUser";
-import { BrainRoleType } from "../../../NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types";
+import { BrainRoleType } from "../../types";
 type BrainUserProps = {
   email: string;
   role: BrainRoleType;

frontend/lib/components/BrainUsers/components/BrainUser/hooks/useBrainUser.ts

@@ -1,13 +1,12 @@
-import axios, { AxiosResponse } from "axios";
 import { useState } from "react";
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from "react-i18next";
 
 import { useBrainApi } from "@/lib/api/brain/useBrainApi";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
+import { getAxiosErrorParams } from "@/lib/helpers/getAxiosErrorParams";
 import { useToast } from "@/lib/hooks";
 
-import { BrainRoleType } from "../../../../NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types";
+import { BrainRoleType } from "../../../types";
-
 type UseBrainUserProps = {
   fetchBrainUsers: () => Promise<void>;
   role: BrainRoleType;
@@ -26,61 +25,63 @@ export const useBrainUser = ({
   const [selectedRole, setSelectedRole] = useState<BrainRoleType>(role);
   const [isRemovingAccess, setIsRemovingAccess] = useState(false);
   const { currentBrain } = useBrainContext();
-  const { t } = useTranslation(['translation','brain']);
+  const { t } = useTranslation(["translation", "brain"]);
   const updateSelectedRole = async (newRole: BrainRoleType) => {
     setSelectedRole(newRole);
     try {
       await updateBrainAccess(brainId, email, {
         role: newRole,
       });
-      publish({ variant: "success", text: t('userRoleUpdated', { email: email, role: newRole, ns: 'brain' }) });
+      publish({
+        variant: "success",
+        text: t("userRoleUpdated", {
+          email: email,
+          role: newRole,
+          ns: "brain",
+        }),
+      });
       void fetchBrainUsers();
     } catch (e) {
-      if (axios.isAxiosError(e) && e.response?.status === 403) {
+      const axiosError = getAxiosErrorParams(e);
+      if (axiosError !== undefined && axiosError.status === 403) {
         publish({
           variant: "danger",
-          text: `${JSON.stringify(
+          text: axiosError.message,
-            (
-              e.response as {
-                data: { detail: string };
-              }
-            ).data.detail
-          )}`,
         });
       } else {
         publish({
           variant: "danger",
-          text: t('userRoleUpdateFailed', { email: email, role: newRole, ns: 'brain' })
+          text: t("userRoleUpdateFailed", {
+            email: email,
+            role: newRole,
+            ns: "brain",
+          }),
         });
       }
     }
   };
-
   const removeUserAccess = async () => {
     setIsRemovingAccess(true);
     try {
       await updateBrainAccess(brainId, email, {
         role: null,
       });
-      publish({ 
+      publish({
-        variant: "success", 
+        variant: "success",
-        text: t('userRemoved', { email: email, ns: 'brain' })
+        text: t("userRemoved", { email: email, ns: "brain" }),
       });
       void fetchBrainUsers();
     } catch (e) {
-      if (axios.isAxiosError(e) && e.response?.data !== undefined) {
+      const axiosError = getAxiosErrorParams(e);
+      if (axiosError !== undefined) {
         publish({
           variant: "danger",
-          text: (
+          text: axiosError.message,
-            e.response as AxiosResponse<{
-              detail: string;
-            }>
-          ).data.detail,
         });
       } else {
         publish({
           variant: "danger",
-          text: t('userRemoveFailed', { email: email, ns: 'brain' })
+          text: t("userRemoveFailed", { email: email, ns: "brain" }),
         });
       }
     } finally {
@@ -94,6 +95,6 @@ export const useBrainUser = ({
     removeUserAccess,
     updateSelectedRole,
     selectedRole,
-    canRemoveAccess
+    canRemoveAccess,
   };
 };

frontend/lib/components/NavBar/components/NavItems/components/BrainManagementButton.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { MdSettings } from "react-icons/md";
+import { FaBrain } from "react-icons/fa";
 
 import Button from "@/lib/components/ui/Button";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
@@ -14,7 +14,7 @@ export const BrainManagementButton = (): JSX.Element => {
         className="focus:outline-none text-2xl"
         aria-label="Settings"
       >
-        <MdSettings />
+        <FaBrain className="w-6 h-6" />
       </Button>
     </Link>
   );

frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/BrainsDropDown.tsx

@@ -1,89 +0,0 @@
-import { useState } from "react";
-import { useTranslation } from 'react-i18next'
-import { FaBrain } from "react-icons/fa";
-import { MdCheck } from "react-icons/md";
-
-import Field from "@/lib/components/ui/Field";
-import Popover from "@/lib/components/ui/Popover";
-import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
-
-import { BrainActions } from "./components/BrainActions/BrainActions";
-import { AddBrainModal } from "../../../../../AddBrainModal/AddBrainModal";
-
-export const BrainsDropDown = (): JSX.Element => {
-  const [searchQuery, setSearchQuery] = useState("");
-  const { allBrains, isFetchingBrains, setActiveBrain, currentBrain } =
-    useBrainContext();
-  const { t } = useTranslation(['translation','brain']);
-
-  return (
-    <>
-      {/* Add the brain icon and dropdown */}
-      <div className="relative ml-auto px-4 py-2">
-        <Popover
-          Trigger={
-            <button
-              type="button"
-              className="flex items-center focus:outline-none"
-            >
-              <FaBrain className="w-6 h-6" />
-            </button>
-          }
-          ActionTrigger={<AddBrainModal />}
-          CloseTrigger={false}
-        >
-          <div>
-            <Field
-              name="brainsearch"
-              placeholder= {t('searchBrain',{ns:'brain'})}
-              autoFocus
-              autoComplete="off"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-            />
-            <div className="overflow-auto scrollbar flex flex-col h-48 mt-5">
-              {/* List of brains */}
-              {isFetchingBrains && (
-                <div className="flex items-center justify-center h-full">
-                  <p className="text-gray-500">{t('loading')}</p>
-                </div>
-              )}
-              {allBrains.map((brain) => {
-                if (brain.name.includes(searchQuery)) {
-                  return (
-                    <div
-                      key={brain.id}
-                      className="relative flex group items-center"
-                    >
-                      <button
-                        type="button"
-                        className={`flex flex-1 items-center gap-2 w-full text-left px-4 py-2 text-sm leading-5 text-gray-900 dark:text-gray-300 group-hover:bg-gray-100 dark:group-hover:bg-gray-700 group-focus:bg-gray-100 dark:group-focus:bg-gray-700 group-focus:outline-none transition-colors`}
-                        onClick={() => {
-                          setActiveBrain({ ...brain });
-                          setSearchQuery("");
-                        }}
-                      >
-                        <span>
-                          <MdCheck
-                            style={{
-                              opacity: currentBrain?.id === brain.id ? 1 : 0,
-                            }}
-                            className="text-xl transition-opacity"
-                            width={32}
-                            height={32}
-                          />
-                        </span>
-                        <span className="flex-1">{brain.name}</span>
-                      </button>
-                      <BrainActions brain={brain} />
-                    </div>
-                  );
-                }
-              })}
-            </div>
-          </div>
-        </Popover>
-      </div>
-    </>
-  );
-};

frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/BrainActions.tsx

@@ -1,17 +0,0 @@
-import { ShareBrain } from "@/lib/components/ShareBrain";
-import { MinimalBrainForUser } from "@/lib/context/BrainProvider/types";
-
-import { DeleteBrain } from "./components";
-
-type BrainActionsProps = {
-  brain: MinimalBrainForUser;
-};
-
-export const BrainActions = ({ brain }: BrainActionsProps): JSX.Element => {
-  return (
-    <div className="absolute right-0 flex flex-row">
-      <ShareBrain brainId={brain.id} />
-      <DeleteBrain brainId={brain.id} />
-    </div>
-  );
-};

frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/components/DeleteBrain.tsx

@@ -1,19 +0,0 @@
-import { UUID } from "crypto";
-import { MdDelete } from "react-icons/md";
-
-import Button from "@/lib/components/ui/Button";
-import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
-
-export const DeleteBrain = ({ brainId }: { brainId: UUID }): JSX.Element => {
-  const { deleteBrain } = useBrainContext();
-
-  return (
-    <Button
-      className="group-hover:visible invisible hover:text-red-500 transition-[colors,opacity] p-1"
-      onClick={() => void deleteBrain(brainId)}
-      variant={"tertiary"}
-    >
-      <MdDelete className="text-xl" />
-    </Button>
-  );
-};

frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/components/index.ts

@@ -1 +0,0 @@
-export * from "./DeleteBrain";

frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/index.ts

@@ -1 +0,0 @@
-export * from "./BrainActions";

frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/index.ts

@@ -1,2 +0,0 @@
-export * from "@/lib/components/AddBrainModal/AddBrainModal";
-export * from "./BrainActions";

frontend/lib/components/NavBar/components/NavItems/components/BrainsDropDown/index.ts

@@ -1 +0,0 @@
-export * from "./BrainsDropDown";

frontend/lib/components/NavBar/components/NavItems/index.tsx

@@ -9,7 +9,6 @@ import { cn } from "@/lib/utils";
 
 import { AuthButtons } from "./components/AuthButtons";
 import { BrainManagementButton } from "./components/BrainManagementButton";
-import { BrainsDropDown } from "./components/BrainsDropDown";
 import { DarkModeToggle } from "./components/DarkModeToggle";
 import { LanguageDropDown } from "./components/LanguageDropDown";
 import { NavLink } from "./components/NavLink";
@@ -25,7 +24,7 @@ export const NavItems = ({
 }: NavItemsProps): JSX.Element => {
   const { session } = useSupabase();
   const isUserLoggedIn = session?.user !== undefined;
-  const {t} = useTranslation();
+  const { t } = useTranslation();
 
   return (
     <ul
@@ -60,7 +59,6 @@ export const NavItems = ({
       <div className="flex sm:flex-1 sm:justify-end flex-col items-center justify-center sm:flex-row gap-5 sm:gap-2">
         {isUserLoggedIn && (
           <>
-            <BrainsDropDown />
             <BrainManagementButton />
             <Link aria-label="account" className="" href={"/user"}>
               <MdPerson className="text-2xl" />

frontend/lib/components/ShareBrain/ShareBrain.tsx

@@ -14,7 +14,7 @@ import { Modal } from "@/lib/components/ui/Modal";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 import { useShareBrain } from "@/lib/hooks/useShareBrain";
 
-import { BrainRoleType } from "../NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types";
+import { BrainRoleType } from "../BrainUsers/types";
 
 type ShareBrainModalProps = {
   brainId: UUID;

frontend/lib/components/ShareBrain/types/index.ts

@@ -1,4 +1,4 @@
-import { BrainRoleType } from "../../NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types";
+import { BrainRoleType } from "../../BrainUsers/types";
 
 export type SelectOptionsProps = {
   label: string;

frontend/lib/components/ShareBrain/utils/generateBrainAssignation.ts

@@ -1,4 +1,4 @@
-import { BrainRoleAssignation } from "../../NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types";
+import { BrainRoleAssignation } from "../../BrainUsers/types";
 
 export const generateBrainAssignation = (): BrainRoleAssignation => {
   return {

frontend/lib/components/UserToInvite.tsx

@@ -6,10 +6,7 @@ import Field from "@/lib/components/ui/Field";
 import { Select } from "@/lib/components/ui/Select";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 
-import {
+import { BrainRoleAssignation, BrainRoleType } from "./BrainUsers/types";
-  BrainRoleAssignation,
-  BrainRoleType,
-} from "./NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types";
 import { userRoleToAssignableRoles } from "./ShareBrain/types";
 
 type UserToInviteProps = {

frontend/lib/context/BrainProvider/types.ts

@@ -1,6 +1,6 @@
 import { UUID } from "crypto";
 
-import { BrainRoleType } from "@/lib/components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types";
+import { BrainRoleType } from "@/lib/components/BrainUsers/types";
 import { Document } from "@/lib/types/Document";
 
 import { useBrainProvider } from "./hooks/useBrainProvider";

frontend/lib/helpers/getAxiosErrorParams.ts

@@ -0,0 +1,22 @@
+import { AxiosResponse, isAxiosError } from "axios";
+
+type AxiosErrorParams = {
+  message: string;
+  status: number;
+};
+export const getAxiosErrorParams = (
+  e: unknown
+): AxiosErrorParams | undefined => {
+  if (isAxiosError(e) && e.response?.data !== undefined) {
+    return {
+      message: (
+        e.response as AxiosResponse<{
+          detail: string;
+        }>
+      ).data.detail,
+      status: e.response.status,
+    };
+  }
+
+  return undefined;
+};

frontend/lib/hooks/useShareBrain.ts

@@ -10,7 +10,7 @@ import { useToast } from "@/lib/hooks";
 import {
   BrainRoleAssignation,
   BrainRoleType,
-} from "../components/NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types";
+} from "../components/BrainUsers/types";
 import { generateBrainAssignation } from "../components/ShareBrain/utils/generateBrainAssignation";
 import { useBrainContext } from "../context/BrainProvider/hooks/useBrainContext";