Merge branch 'main' into main

app/components/InputFrontend.tsx

@@ -1,16 +1,19 @@
-import React, { useState, ForwardedRef } from 'react';
+import React, { useState, ForwardedRef, useEffect } from 'react';
 
 interface InputProps {
   message: string;
-  onSendClick: (message: string) => void;
+  onSendClick: (message: string, override: boolean) => void;
   onMicClick: () => void;
-  inputDisabled:boolean
+  inputDisabled: boolean
 }
 
 const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
   ({ message, onSendClick, onMicClick, inputDisabled }, ref: ForwardedRef<HTMLDivElement>) => {
     const [inputValue, setInputValue] = useState('');
-    
+
+    useEffect(() => {
+      setInputValue(message);
+    }, [message]);
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       setInputValue(e.target.value);
@@ -19,7 +22,7 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
     const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
       if (!inputDisabled) {
         if (event.key === 'Enter') {
-          onSendClick(inputValue); // Call the function passed via props
+          onSendClick(inputValue, false); // Call the function passed via props
           setInputValue(''); // Optionally clear input after submission
           event.preventDefault(); // Prevent default action (e.g., form submission)
         }
@@ -36,7 +39,7 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
           onChange={handleInputChange}
           onKeyDown={handleKeyDown}
         />
-        <button type="button" onClick={() => onSendClick(inputValue)} disabled={inputDisabled?true:false}>
+        <button type="button" onClick={() => onSendClick(inputValue, false)} disabled={inputDisabled ? true : false}>
           <img src="/img/send.svg" alt="send" />
         </button>
         <button type="button" onClick={onMicClick}>