Replace preview ongoing modal with a non-blocking implementation to prevent duplicate modals

Author: robertpiosik

packages/shared/src/constants/dictionary.ts

@@ -108,7 +108,6 @@ export const dictionary = {
   },
 
   warning_message: {
-    PREVIEW_ONGOING: 'A new response has been received, switch now?',
     SKIPPING_INVALID_PATH: (file_path: string) =>
       `Skipping applying change to invalid path: ${file_path}.`,
     CODE_COMPLETIONS_NO_SELECTION:

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

@@ -41,7 +41,7 @@
   text-align: center;
   font-weight: 500;
   font-size: 14px;
-  padding: 9px 12px 0 12px;
+  padding: 10px 12px 0 12px;
 
   &--with-icon {
     padding-top: 6px;

packages/vscode/src/commands/apply-chat-response-command/apply-chat-response-command.ts

@@ -84,10 +84,21 @@ export const apply_chat_response_command = (params: {
           command: 'RESPONSE_HISTORY',
           history
         })
-        const choice = await vscode.window.showInformationMessage(
-          dictionary.warning_message.PREVIEW_ONGOING,
-          'Switch'
-        )
+
+        if (params.panel_provider.preview_switch_choice_resolver) {
+          // The "switch preview" modal is already visible for a previous
+          // response. The current response has been added to the history,
+          // so we can just return and avoid showing a second modal.
+          return
+        }
+
+        const choice = await new Promise<'Switch' | undefined>((resolve) => {
+          params.panel_provider.preview_switch_choice_resolver = resolve
+          params.panel_provider.send_message({
+            command: 'SHOW_PREVIEW_ONGOING_MODAL'
+          })
+        })
+        params.panel_provider.preview_switch_choice_resolver = undefined
 
         if (choice == 'Switch') {
           placeholder_created_at_for_update = new_item.created_at

packages/vscode/src/views/panel/backend/panel-provider.ts

@@ -3,7 +3,7 @@ import * as path from 'path'
 import { WebSocketManager } from '@/services/websocket-manager'
 import { FrontendMessage, BackendMessage } from '../types/messages'
 import { ApiManager } from '@/services/api-manager'
-import { WebsitesProvider } from '@/context/providers/websites-provider'
+import { WebsitesProvider } from '@/context/providers/websites/websites-provider'
 import { OpenEditorsProvider } from '@/context/providers/open-editors/open-editors-provider'
 import { WorkspaceProvider } from '@/context/providers/workspace/workspace-provider'
 import { token_count_emitter } from '@/context/context-initialization'
@@ -126,6 +126,10 @@ export class PanelProvider implements vscode.WebviewViewProvider {
     timestamp: number
   } | null = null
 
+  public preview_switch_choice_resolver:
+    | ((choice: 'Switch' | undefined) => void)
+    | undefined = undefined
+
   public set_api_manager(api_manager: ApiManager) {
     this.api_manager = api_manager
   }
@@ -637,6 +641,10 @@ export class PanelProvider implements vscode.WebviewViewProvider {
             handle_get_collapsed_states(this)
           } else if (message.command == 'SAVE_COMPONENT_COLLAPSED_STATE') {
             await handle_save_component_collapsed_state(this, message)
+          } else if (message.command == 'PREVIEW_SWITCH_CHOICE') {
+            if (this.preview_switch_choice_resolver) {
+              this.preview_switch_choice_resolver(message.choice)
+            }
           }
         } catch (error: any) {
           Logger.error({

packages/vscode/src/views/panel/frontend/Panel.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { Main } from './Main'
+import { Button as UiButton } from '@ui/components/editor/common/Button'
 import { Page as UiPage } from '@ui/components/editor/panel/Page'
 import { EditPresetForm } from '@/views/panel/frontend/components/edit-preset-form/EditPresetForm'
 import { TextButton as UiTextButton } from '@ui/components/editor/panel/TextButton'
@@ -9,6 +10,7 @@ import styles from './Panel.module.scss'
 import cn from 'classnames'
 import { post_message } from './utils/post_message'
 import { ResponsePreview as UiResponsePreview } from '@ui/components/editor/panel/ResponsePreview'
+import { Modal as UiModal } from '@ui/components/editor/panel/modals/Modal'
 import { ProgressModal as UiProgressModal } from '@ui/components/editor/panel/modals/ProgressModal'
 import { ApiManagerModal as UiApiManagerModal } from '@ui/components/editor/panel/modals/ApiManagerModal'
 import { QRCodeModal as UiQRCodeModal } from '@ui/components/editor/panel/modals/QRCodeModal'
@@ -81,6 +83,8 @@ export const Panel = () => {
     can_undo,
     context_file_paths,
     presets_collapsed,
+    is_preview_ongoing_modal_visible,
+    set_is_preview_ongoing_modal_visible,
     configurations_collapsed,
     handle_instructions_change,
     edit_preset_back_click_handler,
@@ -526,6 +530,51 @@ export const Panel = () => {
           </div>
         )}
 
+        {is_preview_ongoing_modal_visible && (
+          <div className={styles.slot}>
+            <UiModal
+              title="New response received"
+              content_slot={
+                <div>
+                  Would you like to switch to the new response? You can do it
+                  later by going back or rejecting.
+                </div>
+              }
+              on_background_click={() => {
+                set_is_preview_ongoing_modal_visible(false)
+                post_message(vscode, {
+                  command: 'PREVIEW_SWITCH_CHOICE',
+                  choice: undefined
+                })
+              }}
+              footer_slot={
+                <>
+                  <UiButton
+                    is_secondary
+                    on_click={() => {
+                      set_is_preview_ongoing_modal_visible(false)
+                      post_message(vscode, { command: 'PREVIEW_SWITCH_CHOICE' })
+                    }}
+                  >
+                    Close
+                  </UiButton>
+                  <UiButton
+                    on_click={() => {
+                      set_is_preview_ongoing_modal_visible(false)
+                      post_message(vscode, {
+                        command: 'PREVIEW_SWITCH_CHOICE',
+                        choice: 'Switch'
+                      })
+                    }}
+                  >
+                    Switch
+                  </UiButton>
+                </>
+              }
+            />
+          </div>
+        )}
+
         {progress_state && (
           <div className={styles.slot}>
             <UiProgressModal

packages/vscode/src/views/panel/frontend/hooks/use-panel.ts

@@ -109,6 +109,10 @@ export const use_panel = (vscode: any) => {
   const [context_file_paths, set_context_file_paths] = useState<string[]>([])
   const [presets_collapsed_by_web_mode, set_presets_collapsed_by_web_mode] =
     useState<{ [mode in WebPromptType]?: boolean }>({})
+  const [
+    is_preview_ongoing_modal_visible,
+    set_is_preview_ongoing_modal_visible
+  ] = useState(false)
   const [
     configurations_collapsed_by_api_mode,
     set_configurations_collapsed_by_api_mode
@@ -271,6 +275,8 @@ export const use_panel = (vscode: any) => {
         set_has_changes_to_commit(message.has_changes_to_commit)
       } else if (message.command == 'CAN_UNDO_CHANGED') {
         set_can_undo(message.can_undo)
+      } else if (message.command == 'SHOW_PREVIEW_ONGOING_MODAL') {
+        set_is_preview_ongoing_modal_visible(true)
       }
     }
     window.addEventListener('message', handle_message)
@@ -452,6 +458,8 @@ export const use_panel = (vscode: any) => {
     configurations_collapsed: api_prompt_type
       ? (configurations_collapsed_by_api_mode[api_prompt_type] ?? false)
       : false,
+    is_preview_ongoing_modal_visible,
+    set_is_preview_ongoing_modal_visible,
     handle_instructions_change,
     edit_preset_back_click_handler,
     edit_preset_save_handler,

packages/vscode/src/views/panel/types/messages.ts

@@ -391,6 +391,11 @@ export interface ClearAllCheckpointsMessage extends BaseMessage {
   command: 'CLEAR_ALL_CHECKPOINTS'
 }
 
+export interface PreviewSwitchChoiceMessage extends BaseMessage {
+  command: 'PREVIEW_SWITCH_CHOICE'
+  choice?: 'Switch'
+}
+
 export type FrontendMessage =
   | GetInstructionsMessage
   | SaveInstructionsMessage
@@ -463,6 +468,7 @@ export type FrontendMessage =
   | UpdateCheckpointDescriptionMessage
   | DeleteCheckpointMessage
   | ClearAllCheckpointsMessage
+  | PreviewSwitchChoiceMessage
 
 // === FROM BACKEND TO FRONTEND ===
 export interface InstructionsMessage extends BaseMessage {
@@ -697,6 +703,10 @@ export interface CurrentlyOpenFileTextMessage extends BaseMessage {
   text?: string
 }
 
+export interface ShowPreviewOngoingModalMessage extends BaseMessage {
+  command: 'SHOW_PREVIEW_ONGOING_MODAL'
+}
+
 export type BackendMessage =
   | InstructionsMessage
   | FocusPromptFieldMessage
@@ -740,3 +750,4 @@ export type BackendMessage =
   | CollapsedStatesMessage
   | CheckpointsMessage
   | CurrentlyOpenFileTextMessage
+  | ShowPreviewOngoingModalMessage