feat: add brain sharing button

QuivrHQ · Aug 25, 2023 · f55c523 · f55c523
1 parent 399fb38
commit f55c523
Show file tree

Hide file tree

Showing 16 changed files with 124 additions and 64 deletions.
diff --git a/...tionsBar/components/ChatInput/components/ChatBar/components/MentionInput/MentionInput.tsx b/...tionsBar/components/ChatInput/components/ChatBar/components/MentionInput/MentionInput.tsx
@@ -1,19 +1,32 @@
 import Editor from "@draft-js-plugins/editor";
-import { ReactElement } from "react";
+import { PopoverProps } from "@draft-js-plugins/mention/lib/MentionSuggestions/Popover";
+import { ComponentType, ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
 import "@draft-js-plugins/mention/lib/plugin.css";
 import "draft-js/dist/Draft.css";
 
+import { MentionTriggerType } from "@/app/chat/[chatId]/components/ActionsBar/types";
+
+import { BrainSuggestionsContainer } from "./components/BrainSuggestionsContainer";
+import { PromptSuggestionsContainer } from "./components/PromptSuggestionsContainer";
 import { SuggestionRow } from "./components/SuggestionRow";
-import { SuggestionsContainer } from "./components/SuggestionsContainer";
 import { useMentionInput } from "./hooks/useMentionInput";
 
 type MentionInputProps = {
   onSubmit: () => void;
   setMessage: (text: string) => void;
   message: string;
 };
+
+const triggerToSuggestionsContainer: Record<
+  MentionTriggerType,
+  ComponentType<PopoverProps>
+> = {
+  "@": BrainSuggestionsContainer,
+  "#": PromptSuggestionsContainer,
+};
+
 export const MentionInput = ({
   onSubmit,
   setMessage,
@@ -31,6 +44,7 @@ export const MentionInput = ({
     suggestions,
     onAddMention,
     handleEditorChange,
+    currentTrigger,
   } = useMentionInput({
     message,
     onSubmit,
@@ -55,7 +69,7 @@ export const MentionInput = ({
         onOpenChange={onOpenChange}
         suggestions={suggestions}
         onSearchChange={onSearchChange}
-        popoverContainer={SuggestionsContainer}
+        popoverContainer={triggerToSuggestionsContainer[currentTrigger]}
         onAddMention={onAddMention}
         entryComponent={SuggestionRow}
       />

diff --git a/...nts/ChatInput/components/ChatBar/components/MentionInput/components/AddNewBrainButton.tsx b/...nts/ChatInput/components/ChatBar/components/MentionInput/components/AddNewBrainButton.tsx
@@ -1,22 +1,17 @@
 import Link from "next/link";
 import { useTranslation } from "react-i18next";
-
-import Button from "@/lib/components/ui/Button";
+import { MdAdd } from "react-icons/md";
 
 export const AddNewBrainButton = (): JSX.Element => {
   const { t } = useTranslation(["chat"]);
 
   return (
     <Link
       href={"/brains-management"}
-      onClick={(event) => {
-        event.preventDefault();
-        event.stopPropagation();
-      }}
+      className="flex px-5 py-3 text-sm decoration-none text-center w-full justify-between items-center"
     >
-      <Button className="px-5 py-2 text-sm" variant={"tertiary"}>
-        {t("new_brain")}
-      </Button>
+      {t("new_brain")}
+      <MdAdd />
     </Link>
   );
 };
diff --git a/...ts/ChatInput/components/ChatBar/components/MentionInput/components/AddNewPromptButton.tsx b/...ts/ChatInput/components/ChatBar/components/MentionInput/components/AddNewPromptButton.tsx
@@ -0,0 +1,17 @@
+import Link from "next/link";
+import { useTranslation } from "react-i18next";
+import { MdAdd } from "react-icons/md";
+
+export const AddNewPromptButton = (): JSX.Element => {
+  const { t } = useTranslation(["chat"]);
+
+  return (
+    <Link
+      href={"/brains-management"}
+      className="flex px-5 py-3 text-sm decoration-none text-center w-full justify-between items-center"
+    >
+      {t("new_prompt")}
+      <MdAdd />
+    </Link>
+  );
+};
diff --git a/...nents/ChatInput/components/ChatBar/components/MentionInput/components/BrainSuggestion.tsx b/...nents/ChatInput/components/ChatBar/components/MentionInput/components/BrainSuggestion.tsx
@@ -1,23 +1,8 @@
 type BrainSuggestionProps = {
   content: string;
-  id: string;
 };
 export const BrainSuggestion = ({
   content,
-  id,
 }: BrainSuggestionProps): JSX.Element => {
-  //TODO: use this id for ShareBrain component
-  console.log({ id });
-
-  return (
-    <div className="relative flex group items-center">
-      <div
-        className={
-          "flex flex-1 items-center gap-2 w-full text-left px-5 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"
-        }
-      >
-        <span className="flex-1">{content}</span>
-      </div>
-    </div>
-  );
+  return <span>{content}</span>;
 };
diff --git a/...Input/components/SuggestionsContainer.tsx → .../components/BrainSuggestionsContainer.tsx b/...Input/components/SuggestionsContainer.tsx → .../components/BrainSuggestionsContainer.tsx
@@ -1,27 +1,21 @@
 import { Popover } from "@draft-js-plugins/mention";
 import { PopoverProps } from "@draft-js-plugins/mention/lib/MentionSuggestions/Popover";
 
-export const SuggestionsContainer = ({
+import { AddNewBrainButton } from "./AddNewBrainButton";
+
+export const BrainSuggestionsContainer = ({
   children,
   ...popoverProps
 }: PopoverProps): JSX.Element => (
   <Popover {...popoverProps}>
     <div
       style={{
-        maxWidth: "max-content",
+        width: "max-content",
       }}
       className="bg-white dark:bg-black border border-black/10 dark:border-white/25 rounded-md shadow-md overflow-y-auto"
     >
       {children}
-      <button
-        style={{ height: 30 }}
-        onClick={() => {
-          console.log("hellooo");
-          alert("Hello");
-        }}
-      >
-        Add new prompt
-      </button>
+      <AddNewBrainButton />
     </div>
   </Popover>
 );
diff --git a/...ents/ChatInput/components/ChatBar/components/MentionInput/components/PromptSuggestion.tsx b/...ents/ChatInput/components/ChatBar/components/MentionInput/components/PromptSuggestion.tsx
@@ -0,0 +1,14 @@
+type PromptSuggestionProps = {
+  content: string;
+};
+export const PromptSuggestion = ({
+  content,
+}: PromptSuggestionProps): JSX.Element => {
+  return (
+    <div className="flex flex-1 flex-row gap-2 w-full text-left px-5 py-2 text-sm text-gray-900 dark:text-gray-300">
+      <div className="flex flex-1">
+        <span>{content}</span>
+      </div>
+    </div>
+  );
+};
diff --git a/...nput/components/ChatBar/components/MentionInput/components/PromptSuggestionsContainer.tsx b/...nput/components/ChatBar/components/MentionInput/components/PromptSuggestionsContainer.tsx
@@ -0,0 +1,21 @@
+import { Popover } from "@draft-js-plugins/mention";
+import { PopoverProps } from "@draft-js-plugins/mention/lib/MentionSuggestions/Popover";
+
+import { AddNewPromptButton } from "./AddNewPromptButton";
+
+export const PromptSuggestionsContainer = ({
+  children,
+  ...popoverProps
+}: PopoverProps): JSX.Element => (
+  <Popover {...popoverProps}>
+    <div
+      style={{
+        width: "max-content",
+      }}
+      className="bg-white dark:bg-black border border-black/10 dark:border-white/25 rounded-md shadow-md overflow-y-auto"
+    >
+      {children}
+      <AddNewPromptButton />
+    </div>
+  </Popover>
+);
diff --git a/...ponents/ChatInput/components/ChatBar/components/MentionInput/components/SuggestionRow.tsx b/...ponents/ChatInput/components/ChatBar/components/MentionInput/components/SuggestionRow.tsx
@@ -1,23 +1,32 @@
 import { EntryComponentProps } from "@draft-js-plugins/mention/lib/MentionSuggestions/Entry/Entry";
+import { UUID } from "crypto";
+
+import { MentionTriggerType } from "@/app/chat/[chatId]/components/ActionsBar/types";
+import { ShareBrain } from "@/lib/components/ShareBrain";
 
 import { BrainSuggestion } from "./BrainSuggestion";
+import { PromptSuggestion } from "./PromptSuggestion";
 
 export const SuggestionRow = ({
   mention,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  className,
   ...otherProps
-}: EntryComponentProps): JSX.Element => (
-  <div {...otherProps}>
-    <BrainSuggestion id={mention.id as string} content={mention.name} />
-    <button
-      onClick={() => {
-        console.log("helloo");
-        alert("test");
-      }}
-    >
-      {" "}
-      test
-    </button>
-  </div>
-);
+}: EntryComponentProps): JSX.Element => {
+  if ((mention.trigger as MentionTriggerType) === "@") {
+    return (
+      <div {...otherProps}>
+        <div className="relative flex group px-4">
+          <BrainSuggestion content={mention.name} />
+          <div className="absolute right-0 flex flex-row">
+            <ShareBrain brainId={mention.id as UUID} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div {...otherProps}>
+      <PromptSuggestion content={mention.name} />
+    </div>
+  );
+};
diff --git a/...components/ChatInput/components/ChatBar/components/MentionInput/hooks/useMentionInput.tsx b/...components/ChatInput/components/ChatBar/components/MentionInput/hooks/useMentionInput.tsx
@@ -8,6 +8,7 @@ import { UUID } from "crypto";
 import { EditorState, getDefaultKeyBinding } from "draft-js";
 import { useCallback, useEffect, useRef, useState } from "react";
 
+import { MentionTriggerType } from "@/app/chat/[chatId]/components/ActionsBar/types";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 
 import "@draft-js-plugins/mention/lib/plugin.css";
@@ -51,6 +52,8 @@ export const useMentionInput = ({
     setEditorState,
   });
 
+  const [currentTrigger, setCurrentTrigger] = useState<MentionTriggerType>("@");
+
   const { MentionSuggestions, plugins } = useMentionPlugin();
 
   const mentionInputRef = useRef<Editor>(null);
@@ -80,7 +83,7 @@ export const useMentionInput = ({
     trigger,
     value,
   }: {
-    trigger: string;
+    trigger: MentionTriggerType;
     value: string;
   }) => {
     if (currentBrainId !== null && trigger === "@") {
@@ -94,6 +97,8 @@ export const useMentionInput = ({
       return;
     }
 
+    setCurrentTrigger(trigger);
+
     setSuggestions(defaultSuggestionsFilter(value, mentionItems, trigger));
   };
 
@@ -146,5 +151,6 @@ export const useMentionInput = ({
     handleEditorChange,
     keyBindingFn,
     publicPrompts,
+    currentTrigger,
   };
 };
diff --git a/frontend/lib/components/ShareBrain/ShareBrain.tsx b/frontend/lib/components/ShareBrain/ShareBrain.tsx
@@ -36,10 +36,9 @@ export const ShareBrain = ({ brainId }: ShareBrainModalProps): JSX.Element => {
     canAddNewRow,
   } = useShareBrain(brainId);
 
-  const { allBrains } = useBrainContext();
-
   const { t } = useTranslation(["translation", "brain"]);
 
+  const { allBrains } = useBrainContext();
   const correspondingBrain = allBrains.find((brain) => brain.id === brainId);
 
   if (

diff --git a/frontend/public/locales/en/chat.json b/frontend/public/locales/en/chat.json
@@ -33,5 +33,6 @@
   "empty_brain_title_suffix": "and chat with them",
   "actions_bar_placeholder": "Ask a question to @brains or /files and choose your #prompt",
   "missing_brain": "Please select a brain to chat with",
-  "new_brain": "Create new brain"
+  "new_brain": "Create new brain",
+  "new_prompt": "Create new prompt"
 }
diff --git a/frontend/public/locales/es/chat.json b/frontend/public/locales/es/chat.json
@@ -34,5 +34,6 @@
   "thinking": "Pensando...",
   "title": "Conversa con {{brain}}",
   "missing_brain": "No hay cerebro seleccionado",
-  "new_brain": "Crear nuevo cerebro"
+  "new_brain": "Crear nuevo cerebro",
+  "new_prompt": "Crear nueva instrucción"
 }
diff --git a/frontend/public/locales/fr/chat.json b/frontend/public/locales/fr/chat.json
@@ -34,5 +34,6 @@
   "thinking": "Réflexion...",
   "title": "Discuter avec {{brain}}",
   "missing_brain": "Veuillez selectionner un cerveau pour discuter",
-  "new_brain": "Créer un nouveau cerveau"
+  "new_brain": "Créer un nouveau cerveau",
+  "new_prompt": "Créer un nouveau prompt"
 }
diff --git a/frontend/public/locales/pt-br/chat.json b/frontend/public/locales/pt-br/chat.json
@@ -34,5 +34,6 @@
   "thinking": "Pensando...",
   "title": "Converse com {{brain}}",
   "missing_brain": "Cérebro não encontrado",
-  "new_brain": "Criar novo cérebro"
+  "new_brain": "Criar novo cérebro",
+  "new_prompt": "Criar novo prompt"
 }
diff --git a/frontend/public/locales/ru/chat.json b/frontend/public/locales/ru/chat.json
@@ -34,5 +34,6 @@
   "thinking": "Думаю...",
   "title": "Чат с {{brain}}",
   "missing_brain": "Мозг не найден",
-  "new_brain": "Создать новый мозг"
+  "new_brain": "Создать новый мозг",
+  "new_prompt": "Создать новый запрос"
 }
diff --git a/frontend/public/locales/zh-cn/chat.json b/frontend/public/locales/zh-cn/chat.json
@@ -34,5 +34,6 @@
   "empty_brain_title_suffix": "和他们聊天",
   "actions_bar_placeholder": "向 @brains 或 /files 提问，并选择您的 #prompt",
   "missing_brain": "请选择一个大脑进行聊天",
-  "new_brain": "新大脑"
+  "new_brain": "新大脑",
+  "new_prompt": "新提示"
 }