Add Gemini 3 Flash model to Perplexity, refactor API manager for race condition handling, and adjust UI styling for prompt field and API manager modal

Author: robertpiosik

packages/shared/src/constants/chatbots.ts

@@ -192,6 +192,9 @@ export const CHATBOTS = {
         label: 'Gemini 3 Pro',
         disabled_options: ['with-reasoning']
       },
+      'gemini-3-flash': {
+        label: 'Gemini 3 Flash'
+      },
       'grok-4.1': { label: 'Grok 4.1' },
       'kimi-k2-thinking': {
         label: 'Kimi K2 Thinking',

packages/ui/src/components/editor/panel/PromptField/PromptField.module.scss

@@ -237,7 +237,6 @@
 
 .footer {
   display: flex;
-  gap: 4px;
   padding: 6px 10px 6px 6px;
   justify-content: space-between;
   position: relative;
@@ -274,21 +273,22 @@
     flex: 1;
     display: flex;
     align-items: center;
-    gap: 10px;
+    justify-content: flex-end;
+    gap: 8px;
     pointer-events: none;
 
     &__edit-format {
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: flex-end;
-      gap: 4px;
 
       &__button {
         font-size: 11px;
         pointer-events: all;
         position: relative;
         color: var(--vscode-foreground);
+        padding: 0 2px;
 
         &__spacer {
           visibility: hidden;

packages/ui/src/components/editor/panel/modals/ApiManagerModal/ApiManagerModal.module.scss

@@ -6,7 +6,7 @@
   height: 100%;
   display: flex;
   align-items: flex-end;
-  justify-content: center;
+  justify-content: flex-end;
   padding: 0 12px 48px 12px;
   pointer-events: none;
 }
@@ -73,6 +73,8 @@
   background-color: var(--vscode-quickInput-background);
   border: 1px solid var(--vscode-widget-border);
   box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
+  width: 100%;
+  max-width: 260px;
 }
 
 .requests-container {

packages/ui/src/components/editor/settings/Item/Item.stories.tsx

@@ -25,17 +25,14 @@ type Story = StoryObj<typeof Item>
 export const Default: Story = {
   args: {
     title: 'Model Provider',
-    description: 'Select the model provider to use for this configuration.',
-    slot: <div>slot</div>
+    description: 'Select the model provider to use for this configuration.'
   }
 }
 
 export const SlotBelow: Story = {
   args: {
     title: 'API Key',
     description:
-      'Enter your API key for the selected model provider. It will be stored securely.',
-    slot: <div>slot</div>,
-    slot_placement: 'below'
+      'Enter your API key for the selected model provider. It will be stored securely.'
   }
 }

packages/vscode/src/services/api-manager.ts

@@ -6,15 +6,17 @@ import { Logger } from '@shared/utils/logger'
 
 export class ApiManager {
   private cancel_token_sources: Map<string, CancelTokenSource> = new Map()
+  private next_allowed_finish_time = 0
 
   constructor(private panel_provider: PanelProvider) {}
 
   public async get(params: {
     endpoint_url: string
     api_key?: string
     body: any
+    request_id?: string
   }): Promise<{ response: string; thoughts?: string } | null> {
-    const request_id = randomUUID()
+    const request_id = params.request_id || randomUUID()
     const cancel_token_source = axios.CancelToken.source()
     this.cancel_token_sources.set(request_id, cancel_token_source)
 
@@ -51,25 +53,34 @@ export class ApiManager {
     } catch (error) {
       if (axios.isCancel(error)) {
         Logger.info({
-          function_name: 'make_api_call',
+          function_name: 'get',
           message: 'API call cancelled by user'
         })
         throw error // Re-throw cancellation error to be handled by caller
       }
 
       Logger.error({
-        function_name: 'make_api_call',
+        function_name: 'get',
         message: 'API call error',
         data: error
       })
-      // Error messages are shown by make_api_request, so no need to show one here.
       return null
     } finally {
       this.panel_provider.send_message({
         command: 'HIDE_API_MANAGER_PROGRESS',
         id: request_id
       })
       this.cancel_token_sources.delete(request_id)
+
+      // Prevent race conditions of the applyChatResponse command when invoked in short successions
+      const now = Date.now()
+      const wait_until = Math.max(now, this.next_allowed_finish_time)
+      const delay = wait_until - now
+      this.next_allowed_finish_time = wait_until + 500
+
+      if (delay > 0) {
+        await new Promise((resolve) => setTimeout(resolve, delay))
+      }
     }
   }
 

packages/vscode/src/views/panel/backend/message-handlers/handle-code-completion.ts

@@ -1,6 +1,5 @@
 import * as vscode from 'vscode'
 import axios from 'axios'
-import { make_api_request } from '@/utils/make-api-request'
 import { code_completion_instructions_for_panel } from '@/constants/instructions'
 import { FilesCollector } from '@/utils/files-collector'
 import {
@@ -15,6 +14,7 @@ import { PanelProvider } from '@/views/panel/backend/panel-provider'
 import { CodeCompletionMessage } from '@/views/panel/types/messages'
 import { apply_reasoning_effort } from '@/utils/apply-reasoning-effort'
 import { dictionary } from '@shared/constants/dictionary'
+import { randomUUID } from 'crypto'
 
 const get_code_completion_config = async (
   api_providers_manager: ModelProvidersManager,
@@ -211,7 +211,7 @@ const perform_code_completion = async (params: {
   show_quick_pick?: boolean
   completion_instructions?: string
   config_id?: string
-  panel_provider?: PanelProvider
+  panel_provider: PanelProvider
 }): Promise<void> => {
   const api_providers_manager = new ModelProvidersManager(params.context)
 
@@ -296,7 +296,7 @@ const perform_code_completion = async (params: {
       )
       return
     }
-    const cancel_token_source = axios.CancelToken.source()
+    const request_id = randomUUID()
     const document = editor.document
     const position = editor.selection.active
 
@@ -357,37 +357,19 @@ const perform_code_completion = async (params: {
     const cursor_listener = vscode.window.onDidChangeTextEditorSelection(
       (e) => {
         if (e.textEditor === editor) {
-          cancel_token_source.cancel(
-            'User moved the cursor, cancelling request.'
-          )
+          params.panel_provider.api_manager.cancel_api_call(request_id)
         }
       }
     )
 
     let response_for_apply: string | undefined
 
-    if (params.panel_provider) {
-      params.panel_provider.api_call_cancel_token_source = cancel_token_source
-      params.panel_provider.send_message({
-        command: 'SHOW_PROGRESS',
-        title: `${dictionary.api_call.WAITING_FOR_RESPONSE}...`
-      })
-    }
-
     try {
-      const result = await make_api_request({
+      const result = await params.panel_provider.api_manager.get({
         endpoint_url,
         api_key: provider.api_key,
         body,
-        cancellation_token: cancel_token_source.token,
-        on_thinking_chunk: () => {
-          if (params.panel_provider) {
-            params.panel_provider.send_message({
-              command: 'SHOW_PROGRESS',
-              title: `${dictionary.api_call.THINKING}...`
-            })
-          }
-        }
+        request_id
       })
 
       if (result) {
@@ -406,10 +388,6 @@ const perform_code_completion = async (params: {
         dictionary.error_message.CODE_COMPLETION_ERROR
       )
     } finally {
-      if (params.panel_provider) {
-        params.panel_provider.send_message({ command: 'HIDE_PROGRESS' })
-        params.panel_provider.api_call_cancel_token_source = null
-      }
       cursor_listener.dispose()
     }