Merge branch 'sageTheDm-main'

app/components/InputFrontend.tsx

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