fix: react function rendering always to insert mode

frontend/src/components/ChatInterface.tsx

@@ -801,7 +801,7 @@ export function ChatInterface() {
     );
   };
 
-  const ChatInputPanel = ({
+  const renderInputPanel = ({
     menuSide,
     menuOffsetClass,
     recordingWaveKeyPrefix,
@@ -1382,11 +1382,11 @@ export function ChatInterface() {
 
               {/* Input Area */}
               <div className="w-full px-4">
-                <ChatInputPanel
+                {renderInputPanel({
-                  menuSide="bottom"
+                  menuSide: "bottom",
-                  menuOffsetClass="mt-2"
+                  menuOffsetClass: "mt-2",
-                  recordingWaveKeyPrefix="empty"
+                  recordingWaveKeyPrefix: "empty",
-                />
+                })}
                 <div className="mt-4 flex flex-wrap justify-center gap-2">
                   {/* Common Questions or suggestions could go here */}
                 </div>
@@ -1636,12 +1636,12 @@ export function ChatInterface() {
       {/* Floating Input for Chat State */}
       {messages.length > 0 && (
         <div className="px-4 pb-6 pt-3 border-t border-border bg-background">
-          <ChatInputPanel
+          {renderInputPanel({
-            menuSide="top"
+            menuSide: "top",
-            menuOffsetClass="mb-2"
+            menuOffsetClass: "mb-2",
-            recordingWaveKeyPrefix="chat"
+            recordingWaveKeyPrefix: "chat",
-            showDisclaimer
+            showDisclaimer: true,
-          />
+          })}
         </div>
       )}
       <Dialog open={Boolean(artifactPreview)} onOpenChange={(open) => {