feat: allow user to feed brain from Actions bar (#1882)

Issue: #1881

Demo:



https://github.com/StanGirard/quivr/assets/63923024/348c7b17-84ca-46a3-89e3-3a00a621af69

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

@@ -2,12 +2,14 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
 
+import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
+
 import { ChatInput, KnowledgeToFeed } from "./components";
 import { useActionBar } from "./hooks/useActionBar";
 
 export const ActionsBar = (): JSX.Element => {
-  const { hasPendingRequests, setHasPendingRequests, shouldDisplayFeedCard } =
-    useActionBar();
+  const { hasPendingRequests, setHasPendingRequests } = useActionBar();
+  const { shouldDisplayFeedCard } = useKnowledgeToFeedContext();
 
   const { t } = useTranslation(["chat"]);
 
@@ -39,9 +41,7 @@ export const ActionsBar = (): JSX.Element => {
             </motion.div>
           </AnimatePresence>
         )}
-        {!shouldDisplayFeedCard && (
-          <ChatInput shouldDisplayFeedOrSecretsCard={shouldDisplayFeedCard} />
-        )}
+        {!shouldDisplayFeedCard && <ChatInput />}
       </div>
     </>
   );

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

@@ -12,6 +12,7 @@ import {
 import { ChangeBrainButton } from "./components/ChangeBrainButton";
 import { ChatHistoryButton } from "./components/ChatHistoryButton/ChatHistoryButton";
 import { ConfigModal } from "./components/ConfigModal";
+import { FeedCardTrigger } from "./components/FeedCardTrigger";
 import { NewDiscussionButton } from "./components/NewDiscussionButton";
 import { SelectedBrainTag } from "./components/SelectedBrainTag";
 
@@ -40,6 +41,7 @@ export const ActionsModal = (): JSX.Element => {
         >
           <SelectedBrainTag />
           <NewDiscussionButton />
+          <FeedCardTrigger />
           <ChatHistoryButton />
           <ConfigModal />
           <ChangeBrainButton />

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/FeedCardTrigger/FeedCardTrigger.tsx

@@ -0,0 +1,21 @@
+import { LuChevronRight } from "react-icons/lu";
+
+import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
+
+import { useFeedCardTrigger } from "./hooks/useFeedCardTrigger";
+import { Button } from "../Button";
+
+export const FeedCardTrigger = (): JSX.Element => {
+  const { setShouldDisplayFeedCard } = useKnowledgeToFeedContext();
+  const { label, Icon } = useFeedCardTrigger();
+
+  return (
+    <Button
+      label={label}
+      startIcon={<Icon size={18} />}
+      endIcon={<LuChevronRight size={18} />}
+      className="w-full"
+      onClick={() => setShouldDisplayFeedCard(true)}
+    />
+  );
+};

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/FeedCardTrigger/hooks/useFeedCardTrigger.ts

@@ -0,0 +1,20 @@
+import { Fragment } from "react";
+
+import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
+
+import { useFeedCardTriggerUtils } from "./useFeedCardTriggerUtils";
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useFeedCardTrigger = () => {
+  const { brainTypeToIcon, brainTypeToLabel } = useFeedCardTriggerUtils();
+  const { currentBrain } = useBrainContext();
+
+  const isBrainTypeDefined = currentBrain?.brain_type !== undefined;
+
+  return {
+    label: isBrainTypeDefined ? brainTypeToLabel[currentBrain.brain_type] : "",
+    Icon: isBrainTypeDefined
+      ? brainTypeToIcon[currentBrain.brain_type]
+      : Fragment,
+  };
+};

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/FeedCardTrigger/hooks/useFeedCardTriggerUtils.ts

@@ -0,0 +1,27 @@
+import { useTranslation } from "react-i18next";
+import { IconType } from "react-icons/lib";
+import { LuBot, LuFilePlus, LuUnlock } from "react-icons/lu";
+
+import { BrainType } from "@/lib/types/brainConfig";
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useFeedCardTriggerUtils = () => {
+  const { t } = useTranslation(["chat", "brain"]);
+
+  const brainTypeToLabel: Record<BrainType, string> = {
+    doc: t("chat:add_document"),
+    api: t("brain:update_secrets_button"),
+    composite: t("brain:manage_brain"),
+  };
+
+  const brainTypeToIcon: Record<BrainType, IconType> = {
+    doc: LuFilePlus,
+    api: LuUnlock,
+    composite: LuBot,
+  };
+
+  return {
+    brainTypeToIcon,
+    brainTypeToLabel,
+  };
+};

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/FeedCardTrigger/index.ts

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

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

@@ -2,29 +2,18 @@
 import { useTranslation } from "react-i18next";
 
 import Button from "@/lib/components/ui/Button";
-import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
-import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
-import { getBrainIconFromBrainType } from "@/lib/helpers/getBrainIconFromBrainType";
 
 import { OnboardingQuestions } from "./components";
 import { ActionsModal } from "./components/ActionsModal/ActionsModal";
 import { ChatEditor } from "./components/ChatEditor/ChatEditor";
 import { MenuControlButton } from "./components/MenuControlButton";
 import { useChatInput } from "./hooks/useChatInput";
 
-type ChatInputProps = {
-  shouldDisplayFeedOrSecretsCard: boolean;
-};
-
-export const ChatInput = ({
-  shouldDisplayFeedOrSecretsCard,
-}: ChatInputProps): JSX.Element => {
+export const ChatInput = (): JSX.Element => {
   const { setMessage, submitQuestion, generatingAnswer, message } =
     useChatInput();
 
   const { t } = useTranslation(["chat"]);
-  const { currentBrainDetails } = useBrainContext();
-  const { setShouldDisplayFeedCard } = useKnowledgeToFeedContext();
 
   return (
     <>
@@ -39,18 +28,6 @@ export const ChatInput = ({
           className="sticky bottom-0 bg-white dark:bg-black w-full flex items-center gap-2 z-20 p-2"
         >
           <MenuControlButton />
-          {!shouldDisplayFeedOrSecretsCard && (
-            <Button
-              className="p-0"
-              variant={"tertiary"}
-              data-testid="feed-button"
-              type="button"
-              onClick={() => setShouldDisplayFeedCard(true)}
-              tooltip={t("add_content_card_button_tooltip")}
-            >
-              {getBrainIconFromBrainType(currentBrainDetails?.brain_type)}
-            </Button>
-          )}
 
           <div className="flex flex-1">
             <ChatEditor

frontend/app/chat/[chatId]/components/ActionsBar/hooks/useActionBar.ts

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 
 import { useChatContext } from "@/lib/context";
-import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
 
 import { checkIfHasPendingRequest } from "../utils/checkIfHasPendingRequest";
 
@@ -10,15 +9,12 @@ export const useActionBar = () => {
   const [hasPendingRequests, setHasPendingRequests] = useState(false);
   const { notifications } = useChatContext();
 
-  const { shouldDisplayFeedCard } = useKnowledgeToFeedContext();
-
   useEffect(() => {
     setHasPendingRequests(checkIfHasPendingRequest(notifications));
   }, [notifications]);
 
   return {
     hasPendingRequests,
     setHasPendingRequests,
-    shouldDisplayFeedCard,
   };
 };

frontend/lib/helpers/getBrainIconFromBrainType.tsx

@@ -1,5 +1,5 @@
 import { IconType } from "react-icons/lib";
-import { LuBrain } from "react-icons/lu";
+import { LuBot, LuBrain } from "react-icons/lu";
 import { PiPaperclipFill } from "react-icons/pi";
 import { TbWorld } from "react-icons/tb";
 
@@ -26,5 +26,9 @@ export const getBrainIconFromBrainType = (
     return <ApiBrainIcon size={iconSize} />;
   }
 
+  if (brainType === "composite") {
+    return <LuBot size={iconSize} />;
+  }
+
   return <DocBrainIcon size={iconSize} />;
 };

frontend/public/locales/en/chat.json

@@ -1,6 +1,6 @@
 {
   "actions_bar_placeholder": "Ask a question to a @brain and choose your #prompt",
-  "add_content_card_button_tooltip": "Add knowledge to a brain",
+  "add_document": "Add document",
   "ask": "Ask a question, or describe a task.",
   "back_to_chat": "Back to chat",
   "brain": "brain",

frontend/public/locales/es/chat.json

@@ -1,6 +1,6 @@
 {
   "actions_bar_placeholder": "Haz una pregunta a un @cerebro y elige tu #prompt",
-  "add_content_card_button_tooltip": "Agregar conocimiento a un cerebro",
+  "add_document": "Agregar documento",
   "ask": "Has una pregunta o describe un tarea.",
   "back_to_chat": "Volver al chat",
   "brain": "cerebro",

frontend/public/locales/fr/chat.json

@@ -1,6 +1,6 @@
 {
   "actions_bar_placeholder": "Posez une question à un @cerveau et sélectionnez un #prompt ",
-  "add_content_card_button_tooltip": "Ajouter des connaissances à un cerveau",
+  "add_document": "Ajouter un document",
   "ask": "Posez une question ou décrivez une tâche.",
   "back_to_chat": "Retour au chat",
   "brain": "cerveau",

frontend/public/locales/pt-br/chat.json

@@ -1,6 +1,6 @@
 {
   "actions_bar_placeholder": "Faça uma pergunta a um @cérebro e escolha sua #prompt",
-  "add_content_card_button_tooltip": "Adicionar conhecimento a um cérebro",
+  "add_document": "Adicionar documento",
   "ask": "Faça uma pergunta ou descreva uma tarefa.",
   "back_to_chat": "Voltar para o chat",
   "brain": "cérebro",

frontend/public/locales/ru/chat.json

@@ -1,6 +1,6 @@
 {
   "actions_bar_placeholder": "Задайте вопрос @мозгу и выберите свой #подсказка",
-  "add_content_card_button_tooltip": "Добавить знаний в мозг",
+  "add_document": "Добавить документ",
   "ask": "Задайте вопрос или опишите задачу.",
   "back_to_chat": "Вернуться к чату",
   "brain": "мозг",

frontend/public/locales/zh-cn/chat.json

@@ -1,6 +1,6 @@
 {
   "actions_bar_placeholder": "向 @大脑 提问，选择您的 #提示",
-  "add_content_card_button_tooltip": "向大脑添加知识",
+  "add_document": "添加文件",
   "ask": "提一个问题，或描述一个任务。",
   "back_to_chat": "返回聊天",
   "begin_conversation_placeholder": "在这里开始对话…",