From 24c1957fb95e93da7baa3597ca5a8df41615a38c Mon Sep 17 00:00:00 2001 From: YasinOnm08 <onmazyasin4@gmail.com> Date: Wed, 18 Sep 2024 15:52:51 +0200 Subject: [PATCH] fix convo fr fr --- app/ConversationFrontend.tsx | 18 +++++++-- app/InputBackend.tsx | 74 +++++++++++++++++++----------------- 2 files changed, 53 insertions(+), 39 deletions(-) diff --git a/app/ConversationFrontend.tsx b/app/ConversationFrontend.tsx index d268bfb..b6bd312 100644 --- a/app/ConversationFrontend.tsx +++ b/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> - {message} - </p> + <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" /> diff --git a/app/InputBackend.tsx b/app/InputBackend.tsx index 796fd88..ed02d47 100644 --- a/app/InputBackend.tsx +++ b/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 @@ -65,12 +69,12 @@ const InputBackend = () => { onResendClick={handleResendClick} onEditClick={handleEditClick} onCopyClick={handleCopyClick} - /> + /> <InputFrontend message="" onSendClick={handleSendClick} onMicClick={handleMicClick} - /> + /> </div> ); };