feat: add new chat page (#890)

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

@@ -0,0 +1,14 @@
+type ColoredTextProps = {
+  color: string;
+  text: string;
+  className?: string;
+};
+
+// color should be a valid tailwind class
+export const ColoredText = ({
+  color,
+  text,
+  className = "",
+}: ColoredTextProps): JSX.Element => (
+  <span className={`${className} ${color}`}>{text}</span>
+);

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

@@ -0,0 +1,48 @@
+import { useTranslation } from "react-i18next";
+import { MdKeyboardCommandKey } from "react-icons/md";
+
+import { ShortcutItem } from "./components";
+
+export const ShortCuts = (): JSX.Element => {
+  const { t } = useTranslation(["chat"]);
+
+  const shortcuts = [
+    {
+      content: [
+        t("shortcut_select_brain"),
+        t("shortcut_select_file"),
+        t("shortcut_choose_prompt"),
+      ],
+    },
+    {
+      content: [
+        t("shortcut_create_brain"),
+        t("shortcut_feed_brain"),
+        t("shortcut_create_prompt"),
+      ],
+    },
+    {
+      content: [
+        t("shortcut_manage_brains"),
+        t("shortcut_go_to_user_page"),
+        t("shortcut_go_to_shortcuts"),
+      ],
+    },
+  ];
+
+  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>
+      </div>
+      <div className="flex-1 flex items-center justify-center">
+        <div className="flex flex-row space-x-4">
+          {shortcuts.map((shortcut, index) => (
+            <ShortcutItem key={index} content={shortcut.content} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,15 @@
+type ShortcutItemProps = {
+  content: string[];
+};
+
+export const ShortcutItem = ({ content }: ShortcutItemProps): JSX.Element => {
+  return (
+    <div className="bg-gray-100 rounded-lg p-4 flex-grow">
+      {content.map((text, index) => (
+        <p className="text-gray-500" key={index}>
+          {text}
+        </p>
+      ))}
+    </div>
+  );
+};

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

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

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

@@ -0,0 +1 @@
+export * from './ShortCuts';

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

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

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

@@ -0,0 +1,31 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+
+import { ShortCuts } from "./components";
+
+const SelectedChatPage = (): JSX.Element => {
+  const { t } = useTranslation(["chat"]);
+
+  return (
+    <main className="flex flex-col w-full pt-10" data-testid="chat-page">
+      <section className="flex flex-col flex-1 items-center w-full h-full min-h-[70vh]">
+        <div className="flex flex-col items-center justify-center px-5">
+          <h1 className="text-3xl font-bold text-center">
+            {t("empty_brain_title_intro")}{" "}
+            <span className="text-purple-500">{t("brains")}</span>
+            {" !! "}
+            <br />
+            {t("empty_brain_title_prefix")}{" "}
+            <span className="text-purple-500">{t("brain")}</span>{" "}
+            {t("empty_brain_title_suffix")}
+          </h1>
+        </div>
+
+        <ShortCuts />
+      </section>
+    </main>
+  );
+};
+
+export default SelectedChatPage;

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

@@ -0,0 +1,22 @@
+import { UUID } from "crypto";
+
+export type ChatQuestion = {
+  model?: string;
+  question?: string;
+  temperature?: number;
+  max_tokens?: number;
+};
+export type ChatHistory = {
+  chat_id: string;
+  message_id: string;
+  user_message: string;
+  assistant: string;
+  message_time: string;
+};
+
+export type ChatEntity = {
+  chat_id: UUID;
+  user_id: string;
+  creation_time: string;
+  chat_name: string;
+};

frontend/app/v2/chat/layout.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { ReactNode } from "react";
+
+import { ChatsList } from "@/app/chat/components";
+import { ChatsProvider } from "@/lib/context/ChatsProvider/chats-provider";
+import { useSupabase } from "@/lib/context/SupabaseProvider";
+import { redirectToLogin } from "@/lib/router/redirectToLogin";
+
+interface LayoutProps {
+  children?: ReactNode;
+}
+
+const Layout = ({ children }: LayoutProps): JSX.Element => {
+  const { session } = useSupabase();
+  if (session === null) {
+    redirectToLogin();
+  }
+
+  return (
+    <ChatsProvider>
+      <div className="relative h-full w-full flex justify-stretch items-stretch">
+        <ChatsList />
+        {children}
+      </div>
+    </ChatsProvider>
+  );
+};
+
+export default Layout;

frontend/app/v2/chat/page.tsx

@@ -0,0 +1,4 @@
+"use client";
+import ChatPage from "./[chatId]/page";
+
+export default ChatPage;

frontend/public/locales/en/chat.json

@@ -1,5 +1,8 @@
 {
     "title": "Chat with {{brain}}",
+    "brain":"brain",
+    "keyboard_shortcuts": "Keyboard shortcuts",
+    "brains":"brains",
     "subtitle": "Talk to a language model about your uploaded data",
     "limit_reached": "You have reached the limit of requests, please try again later",
     "error_occurred": "Error occurred while getting answer",
@@ -15,5 +18,17 @@
     "errorFetching": "Error occurred while fetching your chats",
     "chatDeleted": "Chat sucessfully deleted. Id: {{id}}",
     "errorDeleting": "Error deleting chat: {{error}}",
-    "chatNameUpdated": "Chat name updated"
+    "chatNameUpdated": "Chat name updated",
+    "shortcut_select_brain": "@: Select a brain to talk",
+    "shortcut_select_file": "/: Select a file to talk to",
+    "shortcut_choose_prompt": "#: Choose a specific prompt",
+    "shortcut_create_brain": "@+: Create a new brain",
+    "shortcut_feed_brain": "/+: Feed a brain with knowledge",
+    "shortcut_create_prompt": "#+: Create a new custom prompt",
+    "shortcut_manage_brains": "CMDB: Manage your brains",
+    "shortcut_go_to_user_page": "CMDU: Go to user page",
+    "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"
 }

frontend/public/locales/es/chat.json

@@ -1,5 +1,8 @@
 {
     "title": "Conversa con {{brain}}",
+    "knowledge": "conocimiento",
+    "keyboard_shortcuts": "Atajos de teclado",
+    "brains": "cerebros",
     "subtitle": "Habla con un modelo de lenguaje acerca de tus datos subidos",
     "limit_reached": "Has alcanzado el límite de peticiones, intente de nuevo más tarde",
     "error_occurred": "Error al obtener respuesta",
@@ -15,5 +18,17 @@
     "errorFetching": "Error al obtener tus chats",
     "chatDeleted": "Chat borrado correstamente. Id: {{id}}",
     "errorDeleting": "Error al borrar chat: {{error}}",
-    "chatNameUpdated": "Nombre de chat actualizado"
+    "chatNameUpdated": "Nombre de chat actualizado",
+    "shortcut_select_brain": "@: Seleccionar un cerebro para hablar",
+    "shortcut_select_file": "/: Seleccionar un archivo para hablar",
+    "shortcut_choose_prompt": "#: Elegir una instrucción específica",
+    "shortcut_create_brain": "@+: Crear un nuevo cerebro",
+    "shortcut_feed_brain": "/+: Alimentar un cerebro con conocimiento",
+    "shortcut_create_prompt": "#+: Crear una nueva instrucción personalizada",
+    "shortcut_manage_brains": "CMDB: Administrar tus cerebros",
+    "shortcut_go_to_user_page": "CMDU: Ir a la página de usuario",
+    "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"
 }

frontend/public/locales/fr/chat.json

@@ -1,5 +1,8 @@
 {
     "title": "Discuter avec {{brain}}",
+    "knowledge": "connaissances",
+    "keyboard_shortcuts": "Raccourcis clavier",
+    "brains": "cerveaux",
     "subtitle": "Parlez à un modèle linguistique de vos données téléchargées",
     "limit_reached": "Vous avez atteint la limite de requêtes, veuillez réessayer plus tard",
     "error_occurred": "Une erreur s'est produite lors de l'obtention de la réponse",
@@ -15,5 +18,17 @@
     "errorFetching": "Erreur lors de la récupération de vos chats",
     "chatDeleted": "Chat supprimé avec succès. Id : {{id}}",
     "errorDeleting": "Erreur lors de la suppression du chat : {{error}}",
-    "chatNameUpdated": "Nom du chat mis à jour"
+    "chatNameUpdated": "Nom du chat mis à jour",
+    "shortcut_select_brain": "@: Sélectionner un cerveau pour discuter",
+    "shortcut_select_file": "/: Sélectionner un fichier pour discuter",
+    "shortcut_choose_prompt": "#: Choisir une directive spécifique",
+    "shortcut_create_brain": "@+: Créer un nouveau cerveau",
+    "shortcut_feed_brain": "/+: Alimenter un cerveau avec des connaissances",
+    "shortcut_create_prompt": "#+: Créer une nouvelle directive personnalisée",
+    "shortcut_manage_brains": "CMDB: Gérer vos cerveaux",
+    "shortcut_go_to_user_page": "CMDU: Accéder à la page utilisateur",
+    "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"
 }