forked from React-Group/interstellar_ai
86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
import React, { useState } from 'react';
|
||
import InputFrontend from '../components/InputFrontend';
|
||
import ConversationFrontend from '../components/ConversationFrontend';
|
||
import { Mistral } from '@mistralai/mistralai';
|
||
|
||
|
||
|
||
const handleMicClick = () => {
|
||
console.log('Mic clicked!');
|
||
// Do something when the mic button is clicked
|
||
};
|
||
|
||
|
||
const handleResendClick = () => {
|
||
console.log('Resend button clicked');
|
||
// Handle resend action
|
||
};
|
||
|
||
const handleEditClick = () => {
|
||
console.log('Edit button clicked');
|
||
// Handle edit action
|
||
};
|
||
|
||
const handleCopyClick = () => {
|
||
console.log('Copy button clicked');
|
||
// Handle copy action
|
||
};
|
||
|
||
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);
|
||
}
|
||
} else {
|
||
console.error('Error: Unexpected API response:', chatResponse);
|
||
}
|
||
}
|
||
|
||
const handleSendClick = (message: string) => {
|
||
var system = "You are a helpful assistant. The following is the chat history."
|
||
for (let index = 0; index < messages.length; index++) {
|
||
system += messages[index] + " ";
|
||
};
|
||
|
||
addMessage('User: ' + message);
|
||
prompt_mistral("mistral-large-latest", message, system)
|
||
};
|
||
|
||
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
|
||
messages={messages}
|
||
onResendClick={handleResendClick}
|
||
onEditClick={handleEditClick}
|
||
onCopyClick={handleCopyClick}
|
||
/>
|
||
<InputFrontend
|
||
message=""
|
||
onSendClick={handleSendClick}
|
||
onMicClick={handleMicClick}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default InputBackend;
|