interstellar_ai/app/InputBackend.tsx

import React, { useState } from 'react';
import InputFrontend from './InputFrontend';
import ConversationFrontend from './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);
        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
        messages={messages}
        onResendClick={handleResendClick}
        onEditClick={handleEditClick}
        onCopyClick={handleCopyClick}
        />
      <InputFrontend
        message=""
        onSendClick={handleSendClick}
        onMicClick={handleMicClick}
        />
    </div>
  );
};

export default InputBackend;