Implement automatic focus and text selection for the chat input upon mode changes or new chat initiation

Author: robertpiosik

packages/ui/src/components/editor/ChatInput/ChatInput.tsx

@@ -39,6 +39,7 @@ type Props = {
   }
   caret_position_to_set?: number
   on_caret_position_set?: () => void
+  focus_key?: number
 }
 
 const format_token_count = (count?: number) => {
@@ -76,8 +77,9 @@ export const ChatInput: React.FC<Props> = (props) => {
   useEffect(() => {
     if (textarea_ref.current) {
       textarea_ref.current.focus()
+      textarea_ref.current.select()
     }
-  }, [props.value])
+  }, [props.focus_key])
 
   const get_highlighted_text = (text: string) => {
     if (props.is_in_code_completions_mode) {

packages/vscode/package.json

@@ -2,7 +2,7 @@
   "name": "gemini-coder",
   "displayName": "Code Web Chat (CWC)",
   "description": "Free AI pair programming",
-  "version": "1.307.0",
+  "version": "1.308.0",
   "scripts": {
     "build": "npx vsce package --no-dependencies",
     "vscode:prepublish": "rimraf out && npm run compile",

packages/vscode/src/view/frontend/View.tsx

@@ -44,6 +44,7 @@ export const View = () => {
   const [home_view_type, set_home_view_type] = useState<HomeViewType>()
   const [web_mode, set_web_mode] = useState<WebMode>()
   const [api_mode, set_api_mode] = useState<ApiMode>()
+  const [chat_input_focus_key, set_chat_input_focus_key] = useState(0)
 
   const handle_mouse_enter = () => {
     post_message(vscode, {
@@ -146,6 +147,7 @@ export const View = () => {
 
   const handle_web_mode_change = (new_mode: WebMode) => {
     set_web_mode(new_mode)
+    set_chat_input_focus_key((k) => k + 1)
     post_message(vscode, {
       command: 'SAVE_WEB_MODE',
       mode: new_mode
@@ -157,6 +159,7 @@ export const View = () => {
 
   const handle_api_mode_change = (new_mode: ApiMode) => {
     set_api_mode(new_mode)
+    set_chat_input_focus_key((k) => k + 1)
     post_message(vscode, {
       command: 'SAVE_API_MODE',
       mode: new_mode
@@ -344,6 +347,7 @@ export const View = () => {
           has_active_selection={has_active_selection}
           on_web_mode_change={handle_web_mode_change}
           on_api_mode_change={handle_api_mode_change}
+          chat_input_focus_key={chat_input_focus_key}
         />
       </div>
       <div
@@ -356,11 +360,13 @@ export const View = () => {
             set_active_view('home')
             handle_home_view_type_change(HOME_VIEW_TYPES.WEB)
             handle_web_mode_change('edit-context')
+            set_chat_input_focus_key((k) => k + 1)
           }}
           on_api_call={() => {
             set_active_view('home')
             handle_home_view_type_change(HOME_VIEW_TYPES.API)
             handle_api_mode_change('edit-context')
+            set_chat_input_focus_key((k) => k + 1)
           }}
           version={version}
         />

packages/vscode/src/view/frontend/home/Home.tsx

@@ -37,6 +37,7 @@ type Props = {
   on_api_mode_change: (mode: ApiMode) => void
   has_active_editor: boolean
   has_active_selection: boolean
+  chat_input_focus_key: number
 }
 
 export const Home: React.FC<Props> = (props) => {
@@ -576,6 +577,7 @@ export const Home: React.FC<Props> = (props) => {
       }
       caret_position_to_set={caret_position_to_set}
       on_caret_position_set={() => set_caret_position_to_set(undefined)}
+      chat_input_focus_key={props.chat_input_focus_key}
     />
   )
 }

packages/vscode/src/view/frontend/home/HomeView/HomeView.tsx

@@ -73,6 +73,7 @@ type Props = {
   on_code_completion_with_quick_pick_click: () => void
   caret_position_to_set?: number
   on_caret_position_set?: () => void
+  chat_input_focus_key: number
 }
 
 const web_mode_labels: Record<WebMode, string> = {
@@ -359,6 +360,7 @@ export const HomeView: React.FC<Props> = (props) => {
               }}
               caret_position_to_set={props.caret_position_to_set}
               on_caret_position_set={props.on_caret_position_set}
+              focus_key={props.chat_input_focus_key}
             />
           </div>