Implement model selection for Grok and remove redundant Escape key events from reasoning effort handlers

- grok should have two models: 'Fast' and 'Expert'. Model selector show up on pointer down on button#model-select-trigger. popup with Fast and Expert options: [Pasted text]
- never use this pattern with escape key: [Pasted text], just do nothing

├── apps
│   └── browser
│       └── src
│           └── content-scripts
│               └── send-prompt-content-script
│                   └── chatbots
│                       ├── ai-studio.ts
│                       ├── arena.ts
│                       ├── chatgpt.ts
│                       ├── claude.ts
│                       ├── copilot.ts
│                       ├── deepseek.ts
│                       ├── doubao.ts
│                       ├── gemini.ts
│                       ├── github-copilot.ts
│                       ├── grok.ts
│                       ├── hugging-chat.ts
│                       ├── index.ts
│                       ├── kimi.ts
│                       ├── meta.ts
│                       ├── mistral.ts
│                       ├── open-webui.ts
│                       ├── openrouter.ts
│                       ├── qwen.ts
│                       ├── together.ts
│                       ├── yuanbao.ts
│                       └── z-ai.ts
└── packages
    └── shared
        └── src
            └── constants
                └── chatbots.ts

Author: robertpiosik

apps/browser/src/content-scripts/send-prompt-content-script/chatbots/chatgpt.ts

@@ -129,16 +129,6 @@ export const chatgpt: Chatbot = {
 
       await new Promise((resolve) => requestAnimationFrame(resolve))
     }
-
-    slider_control.dispatchEvent(
-      new KeyboardEvent('keydown', {
-        key: 'Escape',
-        bubbles: true,
-        cancelable: true
-      })
-    )
-
-    await new Promise((resolve) => requestAnimationFrame(resolve))
   },
   set_options: async (chat) => {
     const options = chat.options

apps/browser/src/content-scripts/send-prompt-content-script/chatbots/gemini.ts

@@ -118,21 +118,12 @@ export const gemini: Chatbot = {
         reasoning_effort.toLowerCase()
     ) as HTMLElement
 
-    if (!target_item) {
-      document.dispatchEvent(
-        new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
-      )
-      return
-    }
+    if (!target_item) return
 
     const is_selected = target_item.classList.contains('selected')
 
     if (!is_selected) {
       target_item.click()
-    } else {
-      document.dispatchEvent(
-        new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
-      )
     }
 
     await new Promise((resolve) => requestAnimationFrame(resolve))

apps/browser/src/content-scripts/send-prompt-content-script/chatbots/grok.ts

@@ -19,6 +19,52 @@ export const grok: Chatbot = {
       check_for_element()
     })
   },
+  set_model: async (chat) => {
+    const model = chat.model
+    if (model && CHATBOTS['Grok'].models && model in CHATBOTS['Grok'].models) {
+      const model_selector_trigger = document.querySelector(
+        'button#model-select-trigger'
+      ) as HTMLButtonElement
+      if (!model_selector_trigger) {
+        report_initialization_error({
+          function_name: 'set_model',
+          log_message: 'Model selector trigger not found'
+        })
+        return
+      }
+
+      const model_label = CHATBOTS['Grok'].models[model].label
+      const target_label_lower = model_label.toLowerCase()
+
+      model_selector_trigger.click()
+      await new Promise((r) => requestAnimationFrame(r))
+
+      const menu_items = Array.from(
+        document.querySelectorAll(
+          '[data-radix-menu-content] [role="menuitemradio"]'
+        )
+      )
+      let found = false
+      for (const item of menu_items) {
+        const text = item.textContent?.trim().toLowerCase()
+        if (text && text.includes(target_label_lower)) {
+          const is_checked = item.getAttribute('aria-checked') == 'true'
+          if (!is_checked) {
+            ;(item as HTMLElement).click()
+          }
+          found = true
+          break
+        }
+      }
+      if (!found) {
+        report_initialization_error({
+          function_name: 'set_model',
+          log_message: `Model option for "${model_label}" not found`
+        })
+      }
+      await new Promise((r) => requestAnimationFrame(r))
+    }
+  },
   set_options: async (chat) => {
     const options = chat.options
     if (!options) return

apps/browser/src/content-scripts/send-prompt-content-script/chatbots/hugging-chat.ts

@@ -80,9 +80,6 @@ export const hugging_chat: Chatbot = {
         function_name: 'hugging_chat.set_reasoning_effort',
         log_message: `Reasoning effort option "${reasoning_effort}" not found`
       })
-      document.dispatchEvent(
-        new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
-      )
     }
     await new Promise((resolve) => setTimeout(resolve, 250))
   },

packages/shared/src/constants/chatbots.ts

@@ -111,7 +111,11 @@ export const CHATBOTS = {
     supports_url_override: true,
     url_override_label: 'Project URL',
     url_override_disabled_options: ['private'],
-    supported_options: { private: 'Private' }
+    supported_options: { private: 'Private' },
+    models: {
+      fast: { label: 'Fast' },
+      expert: { label: 'Expert' }
+    }
   } as Chatbot,
   HuggingChat: {
     url: 'https://huggingface.co/chat/',