Started changes the file structure

app/components/InputFrontend.tsx

@@ -0,0 +1,37 @@
+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;