fix(frontend): using dark mode in tiptap (#2616)

# Description

Applying dark mode to icons in tiptap.

## Checklist before requesting a review

Please delete options that are not relevant.

- [X] My code follows the style guidelines of this project
- [X] I have performed a self-review of my code

## Screenshots:
<img width="906" alt="image"
src="https://github.com/QuivrHQ/quivr/assets/33584382/c8d86fa2-0f58-4c44-82d2-5162a5e025cd">

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

@@ -21,4 +21,8 @@
   .brain_name {
     @include Typography.EllipsisOverflow;
   }
-}
+
+  .dark_image {
+    filter: invert(100%);
+  }
+}

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

@@ -1,6 +1,7 @@
 import Image from "next/image";
 
 import Icon from "@/lib/components/ui/Icon/Icon";
+import { useUserSettingsContext } from "@/lib/context/UserSettingsProvider/hooks/useUserSettingsContext";
 
 import styles from "./MentionItem.module.scss";
 
@@ -18,16 +19,18 @@ export const MentionItem = ({
   onClick,
   isSelected,
 }: MentionItemProps): JSX.Element => {
+
+  const { isDarkMode } = useUserSettingsContext();
+
   return (
     <span
-      className={`${styles.mention_item_wrapper} ${
-        isSelected ? styles.selected : ""
-      }`}
+      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" />
+        <Image src={item.iconUrl} width={18} height={18} alt="logo_url" className={isDarkMode ? styles.dark_image : ""} />
       ) : (
         <Icon color="primary" size="normal" name="brain" />
       )}