From b91c1c2508b07c4222da84ed200e832d89948187 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Tue, 16 Jun 2026 11:06:02 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A4=20fix:=20Keep=20Microphone=20Icon?=
 =?UTF-8?q?=20Visible=20On=20Initial=20Chat=20Render=20(#13788)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🎤 fix: Keep Microphone Icon Visible On Initial Chat Render

AudioRecorder returned null while the parent ChatForm's textAreaRef was still null on first paint, hiding the mic icon until an unrelated re-render. Render the button disabled instead so the icon is always present.

Closes #13786

* 🎤 refactor: Drop Unused textAreaRef Dependency From AudioRecorder

Per Codex review: deriving the button's disabled state from textAreaRef.current could leave the mic permanently disabled until an unrelated re-render, since assigning a ref does not trigger one. The handlers never read the ref, so remove the dependency entirely along with the now-unused prop.
---
 client/src/components/Chat/Input/AudioRecorder.tsx | 6 ------
 client/src/components/Chat/Input/ChatForm.tsx      | 1 -
 2 files changed, 7 deletions(-)

diff --git a/client/src/components/Chat/Input/AudioRecorder.tsx b/client/src/components/Chat/Input/AudioRecorder.tsx
index 30373a908a..3eaefcdcc8 100644
--- a/client/src/components/Chat/Input/AudioRecorder.tsx
+++ b/client/src/components/Chat/Input/AudioRecorder.tsx
@@ -11,13 +11,11 @@ export default memo(function AudioRecorder({
   disabled,
   ask,
   methods,
-  textAreaRef,
   isSubmitting,
 }: {
   disabled: boolean;
   ask: TAskFunction;
   methods: ReturnType<typeof useChatFormContext>;
-  textAreaRef: React.RefObject<HTMLTextAreaElement>;
   isSubmitting: boolean;
 }) {
   const { setValue, reset, getValues } = methods;
@@ -82,10 +80,6 @@ export default memo(function AudioRecorder({
     onTranscriptionComplete,
   );
 
-  if (!textAreaRef.current) {
-    return null;
-  }
-
   const handleStartRecording = async () => {
     existingTextRef.current = getValues('text') || '';
     startRecording();
diff --git a/client/src/components/Chat/Input/ChatForm.tsx b/client/src/components/Chat/Input/ChatForm.tsx
index c1efba72fc..baed7ba4a2 100644
--- a/client/src/components/Chat/Input/ChatForm.tsx
+++ b/client/src/components/Chat/Input/ChatForm.tsx
@@ -385,7 +385,6 @@ const ChatForm = memo(function ChatForm({
                 <AudioRecorder
                   methods={methods}
                   ask={submitMessage}
-                  textAreaRef={textAreaRef}
                   disabled={disableInputs || isNotAppendable}
                   isSubmitting={isSubmitting}
                 />