interstellar_ai/app/components/InputFrontend.tsx

import React, { useState, ForwardedRef, useEffect } from 'react';
import "../styles/variables.css"

interface InputProps {
  message: string;
  onSendClick: (message: string, override: boolean) => void;
  onMicClick: () => void;
  inputDisabled: boolean;
  isRecording: boolean
}

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

    useEffect(() => {
      setInputValue(message);
    }, [message]);

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

    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
      if (!inputDisabled) {
        if (event.key === 'Enter') {
          onSendClick(inputValue, false); // 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, false)} disabled={inputDisabled ? true : false}>
          <img src="/img/send.svg" alt="send" />
        </button>
        <button className={`microphone-button ${isRecording ? "red" : "var(--input-button-color)"}`} type="button" onClick={onMicClick}>
          <img src="/img/microphone.svg" alt="microphone" />
        </button>
      </div>
    );
  }
);

export default InputFrontend;