forked from React-Group/interstellar_ai
37 lines
1 KiB
TypeScript
37 lines
1 KiB
TypeScript
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);
|
|
};
|
|
|
|
return (
|
|
<div className="input" id="inputForm">
|
|
<input
|
|
type="text"
|
|
name="user_message"
|
|
placeholder="Type your message here..."
|
|
value={inputValue}
|
|
onChange={handleInputChange}
|
|
/>
|
|
<button type="submit" onClick={() => onSendClick(inputValue)}>
|
|
<img src="/img/send.svg" alt="send" />
|
|
</button>
|
|
<button type="submit" onClick={onMicClick}>
|
|
<img src="/img/microphone.svg" alt="microphone" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
export default InputFrontend;
|