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

Issue: https://github.com/StanGirard/quivr/issues/1881 Demo: https://github.com/StanGirard/quivr/assets/63923024/348c7b17-84ca-46a3-89e3-3a00a621af69
2024-11-23 12:26:03 +03:00 · 2023-12-14 09:48:46 +01:00 · 2023-12-14 09:48:46 +01:00 · 9eb6120c6f
commit 9eb6120c6f
parent 35bc5bc971
15 changed files with 88 additions and 40 deletions
--- a/frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx
+++ b/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>
    </>
  );
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/ActionsModal.tsx
+++ b/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 />
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/FeedCardTrigger/FeedCardTrigger.tsx
+++ b/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)}
+    />
+  );
+};
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/FeedCardTrigger/hooks/useFeedCardTrigger.ts
+++ b/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,
+  };
+};
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/FeedCardTrigger/hooks/useFeedCardTriggerUtils.ts
+++ b/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,
+  };
+};
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/FeedCardTrigger/index.ts
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/FeedCardTrigger/index.ts
@ -0,0 +1 @@
+export * from "./FeedCardTrigger";
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
@ -2,9 +2,6 @@
 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";
@ -12,19 +9,11 @@ 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
--- a/frontend/app/chat/[chatId]/components/ActionsBar/hooks/useActionBar.ts
+++ b/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,8 +9,6 @@ export const useActionBar = () => {
  const [hasPendingRequests, setHasPendingRequests] = useState(false);
  const { notifications } = useChatContext();

-  const { shouldDisplayFeedCard } = useKnowledgeToFeedContext();
-
  useEffect(() => {
    setHasPendingRequests(checkIfHasPendingRequest(notifications));
  }, [notifications]);
@ -19,6 +16,5 @@ export const useActionBar = () => {
  return {
    hasPendingRequests,
    setHasPendingRequests,
-    shouldDisplayFeedCard,
  };
 };
--- a/frontend/lib/helpers/getBrainIconFromBrainType.tsx
+++ b/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} />;
 };
--- a/frontend/public/locales/en/chat.json
+++ b/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",
--- a/frontend/public/locales/es/chat.json
+++ b/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",
--- a/frontend/public/locales/fr/chat.json
+++ b/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",
--- a/frontend/public/locales/pt-br/chat.json
+++ b/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",
--- a/frontend/public/locales/ru/chat.json
+++ b/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": "мозг",
--- a/frontend/public/locales/zh-cn/chat.json
+++ b/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": "在这里开始对话…",