Add confirmation prompt (#2251)

Whenever the copilot is going to do something that might cost money or
lose data, it's a good idea to confirm with the user first. Added this
for job submission for now.

Author: billti

vscode/src/copilot/azqTools.ts

@@ -18,6 +18,7 @@ import { getJobFiles, submitJob } from "../azure/workspaceActions.js";
 import { HistogramData } from "./shared.js";
 import { getQirForVisibleQs } from "../qirGeneration.js";
 import { CopilotToolError, ToolResult, ToolState } from "./tools.js";
+import { CopilotWebviewViewProvider as CopilotView } from "./webviewViewProvider.js";
 
 /**
  * These tool definitions correspond to the ones declared
@@ -410,6 +411,13 @@ async function submitToTarget(
 
   const quantumUris = new QuantumUris(workspace.endpointUri, workspace.id);
 
+  const confirmed = await CopilotView.getConfirmation(
+    `Submit job "${jobName}" to ${target.id} for ${numberOfShots} shots?`,
+  );
+  if (!confirmed) {
+    return { result: "Job submission was cancelled by the user" };
+  }
+
   try {
     const token = await getTokenForWorkspace(workspace);
     if (!token) {

vscode/src/copilot/shared.d.ts

@@ -9,6 +9,10 @@ export type CopilotCommand =
       command: "submitUserMessage";
       request: string;
     }
+  | {
+      command: "confirmation";
+      confirmed: boolean;
+    }
   | {
       command: "restartChat";
       history: ChatElement[];
@@ -38,7 +42,8 @@ export type CopilotUpdate =
   | {
       kind: "appendDelta";
       payload: { delta: string; status: Status };
-    };
+    }
+  | { kind: "showConfirmation"; payload: { confirmText: string } };
 
 export type QuantumChatMessage = UserMessage | AssistantMessage | ToolMessage;
 
@@ -86,6 +91,10 @@ type Status =
       status: "executingTool";
       toolName: string;
     }
+  | {
+      status: "awaitingConfirmation";
+      confirmText: string;
+    }
   | {
       status: "assistantConnectionError";
     };

vscode/src/copilot/webview/copilot.css

@@ -42,7 +42,8 @@ h1 {
   justify-content: flex-end;
   flex-wrap: wrap;
   align-content: center;
-  height: 28px;
+  align-items: center;
+  margin: 0.6em 0;
   font-style: italic;
   font-size: 0.9em;
 }
@@ -94,7 +95,7 @@ h1 {
 .user-message,
 .assistant-message {
   padding: 0 16px;
-  margin-bottom: 16px;
+  margin-top: 16px;
   border: 1px solid #ccc;
   border-radius: 0.5em;
 }
@@ -168,7 +169,7 @@ pre code {
 
 .histogram-container {
   width: 100%;
-  margin-bottom: 10px;
+  margin-top: 1em;
 }
 
 /* If not specified it defaults to the 'pre code' default monospace font  */
@@ -341,3 +342,16 @@ code.hljs {
   color: gray;
   margin-top: 0.8em;
 }
+
+.confirm-button {
+  background-color: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+  border: none;
+  border-radius: 4px;
+  padding: 0.3em 0.6em;
+  margin-top: 0.4em;
+  margin-bottom: 0.2em;
+  margin-left: 0.6em;
+  margin-right: 0;
+  cursor: pointer;
+}

vscode/src/copilot/webview/copilot.tsx

@@ -293,6 +293,26 @@ function StatusIndicator({ status }: { status: Status }) {
         </>
       ) : status.status === "assistantConnectionError" ? (
         "There was an error communicating with Azure Quantum Copilot. Please check your Internet connection and try again."
+      ) : status.status === "awaitingConfirmation" ? (
+        <>
+          <div>{status.confirmText}</div>
+          <div>
+            <button
+              type="button"
+              class="confirm-button"
+              onClick={() => submitConfirmation(true)}
+            >
+              Yes
+            </button>
+            <button
+              type="button"
+              class="confirm-button"
+              onClick={() => submitConfirmation(false)}
+            >
+              No
+            </button>
+          </div>
+        </>
       ) : (
         ""
       )}
@@ -464,6 +484,10 @@ function submitUserMessage(content: string) {
   });
 }
 
+function submitConfirmation(confirmed: boolean) {
+  postMessageToExtension({ command: "confirmation", confirmed });
+}
+
 /**
  * Copilot command to restart the chat with a new history.
  * The service backend can be changed here as well.
@@ -515,6 +539,12 @@ function onMessage(event: MessageEvent<CopilotUpdate>) {
       model.debugUi = message.payload.debugUi;
       vscodeApi.setState(message.payload.history);
       break;
+    case "showConfirmation":
+      model.status = {
+        status: "awaitingConfirmation",
+        confirmText: message.payload.confirmText,
+      };
+      break;
     default:
       console.error("Unknown message kind: ", (message as any).kind);
       return;

vscode/src/copilot/webviewViewProvider.ts

@@ -13,7 +13,7 @@ import {
   window,
 } from "vscode";
 import { Copilot, CopilotUpdateHandler } from "./copilot";
-import { CopilotCommand } from "./shared";
+import { CopilotCommand, CopilotUpdate } from "./shared";
 import { qsharpExtensionId } from "../common";
 
 export function registerCopilotPanel(context: ExtensionContext): void {
@@ -34,12 +34,40 @@ export function registerCopilotPanel(context: ExtensionContext): void {
   );
 }
 
-class CopilotWebviewViewProvider implements WebviewViewProvider {
+export class CopilotWebviewViewProvider implements WebviewViewProvider {
   public static readonly viewType = "quantum-copilot";
 
+  // The below two static properties are for tools to ask the current panel to show
+  // a confirmation prompt, and to call the tool back with the result.
+  // The Copilot webview is a singleton, and only one confirmation prompt can be shown at a time,
+  // so this avoid having to traffic state for the current webview etc. around to the tools.
+  public static current: CopilotWebviewViewProvider | undefined;
+  public static confirmationResolver:
+    | undefined
+    | ((confirmed: boolean) => void);
+
   private view?: WebviewView;
 
-  constructor(private readonly extensionUri: Uri) {}
+  constructor(private readonly extensionUri: Uri) {
+    CopilotWebviewViewProvider.current = this;
+  }
+
+  public static async getConfirmation(confirmText: string): Promise<boolean> {
+    const view = CopilotWebviewViewProvider.current?.view;
+    if (!view) throw "Quantum Copilot panel is unavailable";
+
+    const confirmationPromise = new Promise<boolean>((resolver) => {
+      CopilotWebviewViewProvider.confirmationResolver = resolver;
+      const msg: CopilotUpdate = {
+        kind: "showConfirmation",
+        payload: { confirmText },
+      };
+
+      view.webview.postMessage(msg);
+    });
+
+    return confirmationPromise;
+  }
 
   private copilot: Copilot | undefined;
   private _streamCallback: CopilotUpdateHandler | undefined;
@@ -124,6 +152,14 @@ class CopilotWebviewViewProvider implements WebviewViewProvider {
         this.copilot.restartChat(message.history, message.service);
         break;
       }
+      case "confirmation": {
+        CopilotWebviewViewProvider.confirmationResolver?.(message.confirmed);
+        CopilotWebviewViewProvider.confirmationResolver = undefined;
+        break;
+      }
+      default:
+        log.error("Unknown message from webview: ", message);
+        break;
     }
   }
 }