function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); function sendMessage() { if (inputMessage.trim() === '') return; setIsLoading(true); setInputMessage(''); const newMessage = { role: 'user', content: inputMessage }; setMessages((currentMessages) => [...currentMessages, newMessage]); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: messages.concat(newMessage), system_prompt: 'Respond as if you are an expert in the french language, but you only speak english' }), headers: { 'Content-Type': 'application/json' } }) .then((response) => response.json()) .then((data) => { if (data.status) { setMessages((msgs) => [...msgs, { role: 'assistant', content: data.result }]); } }) .finally(() => { setIsLoading(false); }); } function handleInputChange(e) { setInputMessage(e.target.value); } function handleKeyPress(e) { if (e.key === 'Enter') { sendMessage(); } } const loadingIndicator = isLoading ? (

) : null; return (

{messages.map((msg, index) => (

{msg.content}

))} {loadingIndicator}

); }