fix convo fr fr

app/ConversationFrontend.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef } from 'react';
+import React, { ForwardedRef, useEffect, useRef } from 'react';
 
 interface ConversationProps {
   messages: string[];
@@ -9,22 +9,32 @@ interface ConversationProps {
 
 const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
   ({ messages, onResendClick, onEditClick, onCopyClick }, ref: ForwardedRef<HTMLDivElement>) => {
+    const endOfMessagesRef = useRef<HTMLDivElement>(null);
+
+    // Auto-scroll to the bottom of the conversation whenever a new message is added
+    useEffect(() => {
+      if (endOfMessagesRef.current) {
+        endOfMessagesRef.current.scrollIntoView({ behavior: 'smooth' });
+      }
+    }, [messages]); // Triggers the effect whenever the 'messages' array changes
+
     return (
       <div className="output">
         <div className="conversation resize" id="conversation" ref={ref}>
           {messages.map((message, index) => {
             const isUserMessage = message.startsWith('User:');
+            console.log("output: "+messages)
             return (
               <div
                 key={index}
                 className={isUserMessage ? 'user-message' : 'ai-message'}
               >
-                <p>
+                <p> {message}</p>
-                {message}
-                </p>
               </div>
             );
           })}
+          {/* Dummy div to mark the end of the conversation for auto-scrolling */}
+          <div ref={endOfMessagesRef} />
           <div className="button-container">
             <button type="button" onClick={onResendClick}>
               <img src="/img/resend.svg" alt="resend" />

app/InputBackend.tsx

@@ -1,40 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import InputFrontend from './InputFrontend';
 import ConversationFrontend from './ConversationFrontend';
 import { Mistral } from '@mistralai/mistralai';
 
-var messages = [
-  'User: Hello!',
-  'AI: Hi there!',
-  'User: How are you?',
-  'AI: I’m good, thank you!'
-];
 
-async function prompt_mistral(model: string, prompt: string, system: string) {
-  const apiKey = "m3kZRjN8DRSIo88r8Iti9hmKGWIklrLY";
-
-  const client = new Mistral({ apiKey: apiKey });
-
-  var chatResponse = await client.chat.complete({
-    model: model,
-    messages: [{ role: 'user', content: prompt }, { role: 'system', content: system, }],
-  });
-
-  if (chatResponse && chatResponse.choices && chatResponse.choices.length > 0) {
-    if (chatResponse.choices[0].message.content) {
-      messages.push('AI: ' + chatResponse.choices[0].message.content);
-      console.error('Error: Brain Not Found');
-      console.log(messages)
-    }
-  } else {
-    console.error('Error: Unexpected API response:', chatResponse);
-  }
-}
-
-const handleSendClick = (message: string) => {
-  messages.push('User: ' + message);
-  prompt_mistral("mistral-large-latest", message, "You are a helpful assistant.")
-};
 
 const handleMicClick = () => {
   console.log('Mic clicked!');
@@ -57,7 +26,42 @@ const handleCopyClick = () => {
   // Handle copy action
 };
 
-const InputBackend = () => {
+const InputBackend:React.FC = () => {
+  async function prompt_mistral(model: string, prompt: string, system: string) {
+    const apiKey = "m3kZRjN8DRSIo88r8Iti9hmKGWIklrLY";
+    
+    const client = new Mistral({ apiKey: apiKey });
+    
+    var chatResponse = await client.chat.complete({
+      model: model,
+      messages: [{ role: 'user', content: prompt }, { role: 'system', content: system, }],
+    });
+    
+    if (chatResponse && chatResponse.choices && chatResponse.choices.length > 0) {
+      if (chatResponse.choices[0].message.content) {
+        addMessage('AI: ' + chatResponse.choices[0].message.content);
+        console.error('Error: Brain Not Found');
+        console.log(messages)
+      }
+    } else {
+      console.error('Error: Unexpected API response:', chatResponse);
+    }
+  }
+  
+  const handleSendClick = (message: string) => {
+    addMessage('User: ' + message);
+    prompt_mistral("mistral-large-latest", message, "You are a helpful assistant.")
+  };
+  const [messages, setMessages] = useState([
+    'User: Hello!',
+    'AI: Hi there!',
+    'User: How are you?',
+    'AI: I’m good, thank you!'
+  ]);
+  
+  const addMessage = (message: string) => {
+    setMessages((prevMessages) => [...prevMessages, message]);
+  };
   return (
     <div>
       <ConversationFrontend