interstellar_ai/app/components/InputFrontend.tsx

import React, { useState, ForwardedRef } from 'react';

interface InputProps {
  message: string;
  onSendClick: (message: string) => void;
  onMicClick: () => void;
}

const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
  ({ message, onSendClick, onMicClick }, ref: ForwardedRef<HTMLDivElement>) => {
    const [inputValue, setInputValue] = useState('');

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      setInputValue(e.target.value);
    };

    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
      if (event.key === 'Enter') {
        onSendClick(inputValue); // Call the function passed via props
        setInputValue(''); // Optionally clear input after submission
        event.preventDefault(); // Prevent default action (e.g., form submission)
      }
    };

    return (
      <div className="input" id="inputForm" ref={ref}>
        <input
          type="text"
          name="user_message"
          placeholder="Type your message here..."
          value={inputValue}
          onChange={handleInputChange}
          onKeyDown={handleKeyDown}
        />
        <button type="button" onClick={() => onSendClick(inputValue)}>
          <img src="/img/send.svg" alt="send" />
        </button>
        <button type="button" onClick={onMicClick}>
          <img src="/img/microphone.svg" alt="microphone" />
        </button>
      </div>
    );
  }
);

export default InputFrontend;