feat: add new chat bar (#896)

* feat: add ActionsBar

* feat: add brain trigger

frontend/app/v2/chat/[chatId]/components/ActionsBar/ActionsBar.tsx

@@ -0,0 +1,52 @@
+import { useTranslation } from "react-i18next";
+import { Mention } from "react-mentions"; // Import the required components
+
+import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
+
+import { MentionItem, MentionsInput } from "./components";
+import { useActionsBar } from "./hooks/useActionsBar";
+
+export const ActionsBar = (): JSX.Element => {
+  const { t } = useTranslation(["chat"]);
+  const { allBrains } = useBrainContext();
+  const {
+    handleAddMention,
+    handleChange,
+    handleRemoveMention,
+    mentions,
+    value,
+  } = useActionsBar();
+
+  return (
+    <div className="flex flex-row 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-6">
+      <div className="flex flex-row">
+        {mentions.map((mention) => (
+          <MentionItem
+            key={mention.id}
+            text={mention.display}
+            onRemove={() => handleRemoveMention(mention.id)}
+            prefix="@"
+          />
+        ))}
+      </div>
+      <div className="flex flex-1 flex-col">
+        <MentionsInput
+          onChange={handleChange}
+          value={value}
+          placeholder={t("actions_bar_placeholder")}
+          disabled={mentions.length !== 0}
+        >
+          <Mention
+            trigger="@"
+            data={allBrains.map(({ id, name }) => ({ id, display: name }))}
+            renderSuggestion={(_, __, content) => (
+              <p className="mb-2">{content}</p>
+            )}
+            onAdd={(id, display) => handleAddMention(String(id), display)}
+            displayTransform={() => ""}
+          />
+        </MentionsInput>
+      </div>
+    </div>
+  );
+};

frontend/app/v2/chat/[chatId]/components/ActionsBar/components/MentionItem.tsx

@@ -0,0 +1,25 @@
+import { MdRemoveCircleOutline } from "react-icons/md";
+
+type MentionItemProps = {
+  text: string;
+  onRemove: () => void;
+  prefix?: string;
+};
+
+export const MentionItem = ({
+  text,
+  prefix = "",
+  onRemove,
+}: MentionItemProps): JSX.Element => {
+  return (
+    <div className="relative">
+      <div className="flex items-center bg-gray-300 mr-2 text-gray-600 rounded-2xl py-1 px-2">
+        <span className="flex-grow">{`${prefix}${text}`}</span>
+        <MdRemoveCircleOutline
+          className="cursor-pointer absolute top-[-10px] right-[5px]"
+          onClick={onRemove}
+        />
+      </div>
+    </div>
+  );
+};

frontend/app/v2/chat/[chatId]/components/ActionsBar/components/MentionsInput.tsx

@@ -0,0 +1,74 @@
+import {
+  MentionProps,
+  MentionsInput as ReactMentionsInput,
+} from "react-mentions";
+
+type StyleMentionsInputProps = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  children:
+    | React.ReactElement<MentionProps>
+    | Array<React.ReactElement<MentionProps>>;
+  disabled?: boolean;
+};
+
+export const MentionsInput = ({
+  children,
+  onChange,
+  placeholder,
+  value,
+  disabled = false,
+}: StyleMentionsInputProps): JSX.Element => {
+  if (disabled) {
+    return (
+      <input
+        autoFocus
+        placeholder={placeholder}
+        onChange={(event) => onChange(event.target.value)}
+        value={value}
+        className="focus:outline-none focus:border-none"
+      />
+    );
+  }
+
+  return (
+    <ReactMentionsInput
+      placeholder={placeholder}
+      value={value}
+      autoFocus
+      onChange={(_, __, newValue) => onChange(newValue)}
+      forceSuggestionsAboveCursor
+      style={{
+        input: {
+          outline: "none",
+          border: "none",
+          "&:focus": {
+            outline: "none",
+            border: "none",
+          },
+        },
+        suggestions: {
+          zIndex: 99999,
+          boxShadow:
+            "0px 4px 6px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06)",
+          "@media (prefers-color-scheme: dark)": {
+            boxShadow:
+              "0px 4px 6px rgba(255, 255, 255, 0.25), 0px 2px 4px rgba(255, 255, 255, 0.125)",
+          },
+          "&:hover": {
+            boxShadow:
+              "0px 10px 15px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.06)",
+          },
+          transition: "box-shadow 0.3s ease",
+          borderRadius: "0.75rem",
+          background: "white",
+          border: "1px solid rgba(0, 0, 0, 0.1)",
+          padding: "1.5rem",
+        },
+      }}
+    >
+      {children}
+    </ReactMentionsInput>
+  );
+};

frontend/app/v2/chat/[chatId]/components/ActionsBar/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./MentionItem";
+export * from "./MentionsInput";

frontend/app/v2/chat/[chatId]/components/ActionsBar/hooks/useActionsBar.tsx

@@ -0,0 +1,33 @@
+import { useState } from "react";
+
+import { MentionType } from "../types";
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useActionsBar = () => {
+  const [value, setValue] = useState("");
+  const [mentions, setMentions] = useState<MentionType[]>([]); // Store the list of mentions
+
+  const handleChange = (newPlainTextValue: string) => {
+    setValue(newPlainTextValue);
+  };
+
+  const handleAddMention: (id: string, display: string) => void = (
+    id,
+    display
+  ) => {
+    setMentions([...mentions, { id, display }]);
+  };
+
+  const handleRemoveMention = (id: string) => {
+    const updatedMentions = mentions.filter((m) => m.id !== id);
+    setMentions(updatedMentions);
+  };
+
+  return {
+    mentions,
+    handleAddMention,
+    handleRemoveMention,
+    handleChange,
+    value,
+  };
+};

frontend/app/v2/chat/[chatId]/components/ActionsBar/index.ts

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

frontend/app/v2/chat/[chatId]/components/ActionsBar/types.ts

@@ -0,0 +1 @@
+export type MentionType = { id: string; display: string };

frontend/app/v2/chat/[chatId]/components/ShortCuts/ShortCuts.tsx

@@ -31,7 +31,7 @@ export const ShortCuts = (): JSX.Element => {
   ];
 
   return (
-    <div className="flex-1 flex flex-col mt-32 w-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl overflow-hidden bg-white dark:bg-black border border-black/10 dark:border-white/25 p-4 pt-10">
+    <>
       <div className="flex items-center justify-center">
         <MdKeyboardCommandKey className="text-4xl mr-2" />
         <span className="font-bold text-2xl">{t("keyboard_shortcuts")}</span>
@@ -43,6 +43,6 @@ export const ShortCuts = (): JSX.Element => {
           ))}
         </div>
       </div>
-    </div>
+    </>
   );
 };

frontend/app/v2/chat/[chatId]/components/index.ts

@@ -1,2 +1,2 @@
-export * from "./ColoredText";
+export * from "./ActionsBar";
 export * from "./ShortCuts";

frontend/app/v2/chat/[chatId]/page.tsx

@@ -2,7 +2,7 @@
 
 import { useTranslation } from "react-i18next";
 
-import { ShortCuts } from "./components";
+import { ActionsBar, ShortCuts } from "./components";
 
 const SelectedChatPage = (): JSX.Element => {
   const { t } = useTranslation(["chat"]);
@@ -21,8 +21,12 @@ const SelectedChatPage = (): JSX.Element => {
             {t("empty_brain_title_suffix")}
           </h1>
         </div>
-
-        <ShortCuts />
+        <div className="flex-1 flex flex-col mt-8 w-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl overflow-hidden bg-white dark:bg-black border border-black/10 dark:border-white/25 p-12 pt-10">
+          <div className="flex flex-1 flex-col">
+            <ShortCuts />
+          </div>
+          <ActionsBar />
+        </div>
       </section>
     </main>
   );

frontend/package.json

@@ -36,6 +36,7 @@
     "@types/node": "20.1.7",
     "@types/react": "18",
     "@types/react-dom": "18",
+    "@types/react-mentions": "^4.1.8",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@vercel/analytics": "^1.0.1",
     "autoprefixer": "10.4.14",
@@ -61,6 +62,7 @@
     "react-hook-form": "^7.44.3",
     "react-i18next": "^13.0.3",
     "react-markdown": "^8.0.7",
+    "react-mentions": "^4.4.10",
     "react-use": "^17.4.0",
     "rehype-highlight": "^6.0.0",
     "sharp": "^0.32.4",

frontend/public/locales/en/chat.json

@@ -30,5 +30,6 @@
     "shortcut_go_to_shortcuts": "CMDK: Go to shortcuts",
     "empty_brain_title_intro": "Chat with your",
     "empty_brain_title_prefix": "Upload files in a",
-    "empty_brain_title_suffix": "and chat with them"
+    "empty_brain_title_suffix": "and chat with them",
+    "actions_bar_placeholder": "Ask a question to @brains or /files and choose your #prompt"
 }

frontend/public/locales/es/chat.json

@@ -30,5 +30,6 @@
     "shortcut_go_to_shortcuts": "CMDK: Ir a los atajos",
     "empty_brain_title_intro": "Chatea con tus",
     "empty_brain_title_prefix": "Carga archivos en un",
-    "empty_brain_title_suffix": "y chatea con ellos"
+    "empty_brain_title_suffix": "y chatea con ellos",
+    "actions_bar_placeholder": "Haz una pregunta a @brains o /files y elige tu #indicación"
 }

frontend/public/locales/fr/chat.json

@@ -30,5 +30,6 @@
     "shortcut_go_to_shortcuts": "CMDK: Accéder aux raccourcis",
      "empty_brain_title_intro": "Discutez avec vos",
     "empty_brain_title_prefix": "Téléchargez des fichiers dans un",
-    "empty_brain_title_suffix": "et discutez avec eux"
+    "empty_brain_title_suffix": "et discutez avec eux",
+    "actions_bar_placeholder": "Posez une question à @brains ou /files et choisissez votre #invite"
 }