From 94074b7007680ed3b5284993fdfe2f633147cc4a Mon Sep 17 00:00:00 2001
From: Debanjum <debanjum@gmail.com>
Date: Sun, 27 Oct 2024 22:54:55 -0700
Subject: [PATCH] Focus chat input on toggle research mode. v-align it with
 send button

---
 .../components/chatInputArea/chatInputArea.tsx  | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index e0583aec..14eaed1e 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -556,20 +556,19 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                         <TooltipTrigger asChild>
                             <Button
                                 variant="ghost"
-                                className="float-right justify-center flex items-center p-0"
-                                onClick={() => setUseResearchMode(!useResearchMode)}
+                                className="float-right justify-center gap-1 flex items-center p-0 mr-2"
+                                onClick={() => {
+                                    setUseResearchMode(!useResearchMode);
+                                    chatInputRef?.current?.focus();
+                                }}
                             >
-                                <span className="text-muted-foreground text-sm mr-1">
-                                    Research Mode
-                                </span>
+                                <span className="text-muted-foreground text-sm">Research Mode</span>
                                 {useResearchMode ? (
                                     <ToggleRight
-                                        className={`w-6 h-6 inline-block mr-1 ${props.agentColor ? convertColorToTextClass(props.agentColor) : convertColorToTextClass("orange")} rounded-full`}
+                                        className={`w-6 h-6 inline-block ${props.agentColor ? convertColorToTextClass(props.agentColor) : convertColorToTextClass("orange")} rounded-full`}
                                     />
                                 ) : (
-                                    <ToggleLeft
-                                        className={`w-6 h-6 inline-block mr-1 rounded-full`}
-                                    />
+                                    <ToggleLeft className={`w-6 h-6 inline-block rounded-full`} />
                                 )}
                             </Button>
                         </TooltipTrigger>