feat: add chat history to Actions modal (#1877)

Issue: https://github.com/StanGirard/quivr/issues/1865

Demo:


https://github.com/StanGirard/quivr/assets/63923024/e7a2fec9-0eac-4f92-9e99-a0bf3cec8e73

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

@@ -10,6 +10,7 @@ import {
 } from "@/lib/components/ui/Popover";
 
 import { ChangeBrainButton } from "./components/ChangeBrainButton";
+import { ChatHistoryButton } from "./components/ChatHistoryButton/ChatHistoryButton";
 import { ConfigModal } from "./components/ConfigModal";
 import { NewDiscussionButton } from "./components/NewDiscussionButton";
 import { SelectedBrainTag } from "./components/SelectedBrainTag";
@@ -39,6 +40,7 @@ export const ActionsModal = (): JSX.Element => {
         >
           <SelectedBrainTag />
           <NewDiscussionButton />
+          <ChatHistoryButton />
           <ConfigModal />
           <ChangeBrainButton />
         </PopoverContent>

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

@@ -0,0 +1,34 @@
+import { useTranslation } from "react-i18next";
+import { LuChevronRight, LuHistory } from "react-icons/lu";
+
+import { ChatHistory } from "@/lib/components/ChatHistory/ChatHistory";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/lib/components/ui/Popover";
+
+import { Button } from "../Button";
+
+export const ChatHistoryButton = (): JSX.Element => {
+  const { t } = useTranslation("chat");
+
+  return (
+    <Popover>
+      <PopoverTrigger className="w-full">
+        <Button
+          label={t("history")}
+          className="w-full"
+          startIcon={<LuHistory size={18} />}
+          endIcon={<LuChevronRight size={18} />}
+        />
+      </PopoverTrigger>
+      <PopoverContent
+        align="center"
+        className="min-h-[200px] w-[250px] max-h-[500px] overflow-auto"
+      >
+        <ChatHistory />
+      </PopoverContent>
+    </Popover>
+  );
+};

frontend/app/chat/components/ChatsList/components/WelcomeChat/WelcomeChat.tsx

@@ -1,7 +1,7 @@
+import { ChatsListItem } from "@/lib/components/ChatsListItem";
 import { useOnboardingTracker } from "@/lib/hooks/useOnboardingTracker";
 
 import { useWelcomeChat } from "./hooks/useWelcomeChat";
-import { ChatsListItem } from "../ChatsListItem";
 
 export const WelcomeChat = (): JSX.Element => {
   const { chat, handleWelcomeChatDelete } = useWelcomeChat();

frontend/app/chat/components/ChatsList/index.tsx

@@ -1,9 +1,9 @@
 "use client";
 
+import { ChatHistory } from "@/lib/components/ChatHistory/ChatHistory";
 import { Sidebar } from "@/lib/components/Sidebar/Sidebar";
 import { useOnboarding } from "@/lib/hooks/useOnboarding";
 
-import { ChatHistory } from "./components/ChatHistory";
 import { NewChatButton } from "./components/NewChatButton";
 import { WelcomeChat } from "./components/WelcomeChat";
 import { useChatNotificationsSync } from "./hooks/useChatNotificationsSync";
@@ -15,7 +15,7 @@ export const ChatsList = (): JSX.Element => {
   const { shouldDisplayWelcomeChat } = useOnboarding();
 
   return (
-    <Sidebar showButtons={["myBrains","marketplace", "upgradeToPlus", "user"]}>
+    <Sidebar showButtons={["myBrains", "marketplace", "upgradeToPlus", "user"]}>
       <div className="flex flex-col flex-1 h-full" data-testid="chats-list">
         <div className="pt-2">
           <NewChatButton />

frontend/lib/components/ChatHistory/ChatHistory.tsx

@@ -1,15 +1,18 @@
+import { useTranslation } from "react-i18next";
+
+import { ChatsListItem } from "@/lib/components/ChatsListItem";
 import { useChatsContext } from "@/lib/context/ChatsProvider/hooks/useChatsContext";
 
-import { ChatsListItem } from "./ChatsListItem/ChatsListItem";
 import {
   isToday,
   isWithinLast30Days,
   isWithinLast7Days,
   isYesterday,
-} from "../utils";
+} from "./utils";
 
 export const ChatHistory = (): JSX.Element => {
   const { allChats } = useChatsContext();
+  const { t } = useTranslation("chat");
   const todayChats = allChats.filter((chat) =>
     isToday(new Date(chat.creation_time))
   );
@@ -30,7 +33,7 @@ export const ChatHistory = (): JSX.Element => {
     >
       {todayChats.length > 0 && (
         <div className="bg-gray-100 text-black rounded-md px-3 py-1 mt-2">
-          Today
+          {t("today")}
         </div>
       )}
       {todayChats.map((chat) => (
@@ -39,7 +42,7 @@ export const ChatHistory = (): JSX.Element => {
 
       {yesterdayChats.length > 0 && (
         <div className="bg-gray-100 text-black rounded-md px-3 py-1 mt-2">
-          Yesterday
+          {t("yesterday")}
         </div>
       )}
       {yesterdayChats.map((chat) => (
@@ -48,7 +51,7 @@ export const ChatHistory = (): JSX.Element => {
 
       {last7DaysChats.length > 0 && (
         <div className="bg-gray-100 text-black rounded-md px-3 py-1 mt-2">
-          Previous 7 Days
+          {t("last7Days")}
         </div>
       )}
       {last7DaysChats.map((chat) => (
@@ -57,7 +60,7 @@ export const ChatHistory = (): JSX.Element => {
 
       {last30DaysChats.length > 0 && (
         <div className="bg-gray-100 text-black rounded-md px-3 py-1 mt-2">
-          Previous 30 Days
+          {t("last30Days")}
         </div>
       )}
       {last30DaysChats.map((chat) => (

frontend/public/locales/en/chat.json

@@ -16,7 +16,10 @@
   "errorParsingData": "Error parsing data",
   "feed_brain_placeholder": "Choose which @brain you want to feed with these files",
   "feedingBrain": "Your newly added knowledge is being processed, you can keep chatting in the meantime !",
+  "history": "History",
   "keyboard_shortcuts": "Keyboard shortcuts",
+  "last30Days": "Previous 30 days",
+  "last7Days": "Previous 7 days",
   "limit_reached": "You have reached the limit of requests, please try again later",
   "missing_brain": "Please select a brain to chat with",
   "new_discussion": "New discussion",
@@ -52,6 +55,8 @@
   "subtitle": "Talk to a language model about your uploaded data",
   "thinking": "Thinking...",
   "title": "Chat with {{brain}}",
+  "today": "Today",
   "tooManyRequests": "You have exceeded the number of requests per day. To continue chatting, please enter an OpenAI API key in your profile or in used brain.",
-  "welcome": "Welcome"
+  "welcome": "Welcome",
+  "yesterday": "Yesterday"
 }

frontend/public/locales/es/chat.json

@@ -16,7 +16,10 @@
   "errorParsingData": "Error al transformar datos",
   "feed_brain_placeholder": "Elige cuál @cerebro quieres alimentar con estos archivos",
   "feedingBrain": "Su conocimiento recién agregado se está procesando, ¡puede seguir chateando mientras tanto!",
+  "history": "Historia",
   "keyboard_shortcuts": "Atajos de teclado",
+  "last30Days": "Últimos 30 días",
+  "last7Days": "Últimos 7 días",
   "limit_reached": "Has alcanzado el límite de peticiones, intente de nuevo más tarde",
   "missing_brain": "No hay cerebro seleccionado",
   "new_discussion": "Nueva discusión",
@@ -52,6 +55,8 @@
   "subtitle": "Habla con un modelo de lenguaje acerca de tus datos subidos",
   "thinking": "Pensando...",
   "title": "Conversa con {{brain}}",
+  "today": "Hoy",
   "tooManyRequests": "Has excedido el número de solicitudes por día. Para continuar chateando, por favor ingresa una clave de API de OpenAI en tu perfil o en el cerebro utilizado.",
-  "welcome": "Bienvenido"
+  "welcome": "Bienvenido",
+  "yesterday": "Ayer"
 }

frontend/public/locales/fr/chat.json

@@ -16,7 +16,10 @@
   "errorParsingData": "Erreur lors de l'analyse des données",
   "feed_brain_placeholder": "Choisissez le @cerveau que vous souhaitez nourrir avec ces fichiers",
   "feedingBrain": "Vos nouvelles connaissances sont en cours de traitement. Vous pouvez continuer à discuter en attendant !",
+  "history": "Histoire",
   "keyboard_shortcuts": "Raccourcis clavier",
+  "last30Days": "30 derniers jours",
+  "last7Days": "7 derniers jours",
   "limit_reached": "Vous avez atteint la limite de requêtes, veuillez réessayer plus tard",
   "missing_brain": "Veuillez selectionner un cerveau pour discuter",
   "new_discussion": "Nouvelle discussion",
@@ -52,6 +55,8 @@
   "subtitle": "Parlez à un modèle linguistique de vos données téléchargées",
   "thinking": "Réflexion...",
   "title": "Discuter avec {{brain}}",
+  "today": "Aujourd'hui",
   "tooManyRequests": "Vous avez dépassé le nombre de requêtes par jour. Pour continuer à discuter, veuillez entrer une clé d'API OpenAI dans votre profil ou dans le cerveau utilisé.",
-  "welcome": "Bienvenue"
+  "welcome": "Bienvenue",
+  "yesterday": "Hier"
 }

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

@@ -16,7 +16,10 @@
   "errorParsingData": "Erro ao analisar os dados",
   "feed_brain_placeholder": "Escolha qual @cérebro você deseja alimentar com esses arquivos",
   "feedingBrain": "Seu conhecimento recém-adicionado está sendo processado, você pode continuar conversando enquanto isso!",
+  "history": "História",
   "keyboard_shortcuts": "Atalhos do teclado",
+  "last30Days": "Últimos 30 dias",
+  "last7Days": "Últimos 7 dias",
   "limit_reached": "Você atingiu o limite de solicitações, por favor, tente novamente mais tarde",
   "missing_brain": "Cérebro não encontrado",
   "new_discussion": "Nova discussão",
@@ -52,6 +55,8 @@
   "subtitle": "Converse com um modelo de linguagem sobre seus dados enviados",
   "thinking": "Pensando...",
   "title": "Converse com {{brain}}",
+  "today": "Hoje",
   "tooManyRequests": "Você excedeu o número de solicitações por dia. Para continuar conversando, insira uma chave de API da OpenAI em seu perfil ou no cérebro utilizado.",
-  "welcome": "Bem-vindo"
+  "welcome": "Bem-vindo",
+  "yesterday": "Ontem"
 }

frontend/public/locales/ru/chat.json

@@ -16,7 +16,10 @@
   "errorParsingData": "Ошибка при разборе данных",
   "feed_brain_placeholder": "Выберите, какой @мозг вы хотите питать этими файлами",
   "feedingBrain": "Ваш недавно добавленный знаний обрабатывается, вы можете продолжить общение в это время!",
+  "history": "История",
   "keyboard_shortcuts": "Сочетания клавиш",
+  "last30Days": "Последние 30 дней",
+  "last7Days": "Последние 7 дней",
   "limit_reached": "Вы достигли лимита запросов, пожалуйста, попробуйте позже",
   "missing_brain": "Мозг не найден",
   "new_discussion": "Новое обсуждение",
@@ -52,6 +55,8 @@
   "subtitle": "Общайтесь с языковой моделью о ваших загруженных данных",
   "thinking": "Думаю...",
   "title": "Чат с {{brain}}",
+  "today": "Сегодня",
   "tooManyRequests": "Вы превысили количество запросов в день. Чтобы продолжить чат, введите ключ OpenAI API в вашем профиле или в использованном мозге.",
-  "welcome": "Добро пожаловать"
+  "welcome": "Добро пожаловать",
+  "yesterday": "Вчера"
 }

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

@@ -17,7 +17,10 @@
   "errorParsingData": "解析数据时发生错误",
   "feed_brain_placeholder": "选择要用这些文件充实的 @大脑",
   "feedingBrain": "您新添加的知识正在处理中，不影响您继续聊天！",
+  "history": "历史",
   "keyboard_shortcuts": "键盘快捷键",
+  "last30Days": "过去30天",
+  "last7Days": "过去7天",
   "limit_reached": "您已达到请求限制，请稍后再试",
   "missing_brain": "请选择一个大脑进行聊天",
   "new_discussion": "新讨论",
@@ -53,6 +56,8 @@
   "subtitle": "与语言模型讨论您上传的数据",
   "thinking": "思考中…",
   "title": "与 {{brain}} 聊天",
+  "today": "今天",
   "tooManyRequests": "您已超过每天的请求次数。想要继续聊天，请在您的个人资料中或为当前大脑配置 OpenAI API 密钥。",
-  "welcome": "欢迎"
+  "welcome": "欢迎",
+  "yesterday": "昨天"
 }