fix: Conversation history

apps/web/app/components/Chat/Chat.tsx

@@ -24,7 +24,7 @@ const Chat = ({ messages, addMessage }: { messages: Message[], addMessage: (mess
             <div className={ `${styles.messages} ${ messages.length > 0 ? styles.active : '' } ${ isLoading ? styles.loading : '' }` }>
                 { messages.length > 0 ? <Messages messages={ messages } /> : null }
             </div>
-            <Prompt addMessage={ addMessage }/>
+            <Prompt addMessage={ addMessage } messages={ messages }/>
         </div>
     )
 }

apps/web/app/components/Chat/Prompt/Prompt.module.css

@@ -83,4 +83,8 @@
 
 .bar audio {
     visibility: none;
-}
+}
+
+.hidden {
+    display: none;
+}

apps/web/app/components/Chat/Prompt/Prompt.tsx

@@ -4,7 +4,7 @@ import { useFetcher } from '@remix-run/react';
 import { Message, Sender } from '../type';
 import { v4 as uuidv4 } from 'uuid';
 
-const Prompt = ({ addMessage }: { addMessage: (message: Message) => void }) => {
+const Prompt = ({ addMessage, messages }: { addMessage: (message: Message) => void, messages: Message[] }) => {
   const $form = useRef<HTMLFormElement>(null)
   const $audio = useRef<HTMLFormElement>(null)
   const fetcher = useFetcher({ key: 'chat' })
@@ -73,6 +73,9 @@ const Prompt = ({ addMessage }: { addMessage: (message: Message) => void }) => {
           <input name="message" type="text" placeholder="Type a message" />
           <button type="submit">Invoque</button>
         </div>
+        <div className={ styles.hidden }>
+          <textarea name="messages" defaultValue={ messages.map(({ id, text, sender }) => `${sender}: ${text}\n`) } />
+        </div>
       </fetcher.Form>
       <audio ref={ $audio } volume={ 0 } src="/holy.mp3" />
     </>

apps/web/app/routes/_landing._index/route.tsx

@@ -18,7 +18,7 @@ export default function Index() {
   const [messages, setMessages] = useState([]);
 
   const addMessage = (message: Message) => {
-    setMessages([...messages, message])
+    setMessages(messages => [...messages, message])
   }
 
   return (
@@ -33,6 +33,7 @@ export async function action({
   request,
 }: ActionFunctionArgs) {
   const formData = await request.formData();
+  const messages = formData.get('messages') as string;
   const message = formData.get('message') as string;
   const profile = formData.get('profile') as string;
 
@@ -48,6 +49,10 @@ export async function action({
       system: `
         ${prompts[profile]}
 
+        Voici l'historique de conversation (tes réponses commencent par "system: " et celles de ton interlocuteur par "user: "):
+        ${ messages }
+        Fin de l'historique.
+
         Tu as accès aux informations suivante :
 
         ${documents.hits.map((hit) => hit.document.content).join("\n\n")}.`,