Added playback cancellation

webview/js/main.js

@@ -1,6 +1,6 @@
 const vscode = window.acquireVsCodeApi();
 
-const promises = new Map();
+const assistantPlaybacks = new Map();
 
 window.addEventListener('message', handleEvent);
 
@@ -74,23 +74,35 @@ function handleAssistantResponse(completion) {
 
 function handleAssistantSpeechResponse(id, audio) {
     const resolvePromise = () => {
-        const promise = promises.get(id);
-        if (promise) {
-            promises.delete(id);
-            promise();
+        const playback = assistantPlaybacks.get(id);
+        if (playback) {
+            assistantPlaybacks.delete(id);
+            playback.complete();
         }
     };
 
     try {
+        const playback = assistantPlaybacks.get(id);
+        if (!playback) {
+            return;
+        }
+
         const buffer = Uint8Array.from(atob(audio), c => c.charCodeAt(0));
         const url = window.URL.createObjectURL(new Blob([buffer], { type: 'audio/mp3' }));
         const player = new Audio(url);
         player.autoplay = true;
-        player.addEventListener('ended', () => {
+        ['ended'].forEach(event => {
+            player.addEventListener(event, () => {
+                resolvePromise();
+                window.URL.revokeObjectURL(url);
+            });
+        });
+        player.play();
+        playback.cancelled.then(() => {
+            player.pause();
             resolvePromise();
             window.URL.revokeObjectURL(url);
         });
-        player.play();
     } catch (error) {
         resolvePromise();
     }
@@ -182,16 +194,34 @@ function createMessageElement(sender, message) {
         controlsElement.appendChild(copyButtonElement);
 
         equalizerButtonElement.addEventListener('click', function(event) {
-            const id = message.messageId;            
+            const id = message.messageId;
+
+            const audioPlayback = assistantPlaybacks.get(id);
+            if (audioPlayback) {
+                audioPlayback.cancellation();
+                return;
+            }
+
             equalizerButtonElement.src = window.resolveMediaFile("pause.svg");
 
-            const promise = new Promise((resolve, reject) => {
-                promises.set(id, resolve);
-            });
-            promise.then(() => {
+            let complete;
+            const completePromise = new Promise((resolve, reject) => {
+                complete = resolve;
+            }).then(() => {                
                 equalizerButtonElement.src = window.resolveMediaFile("equalizer.svg");
             });
 
+            let cancellation;
+            let cancelled = new Promise((resolve, reject) => {
+                cancellation = resolve;
+            });
+
+            assistantPlaybacks.set(id, {
+                complete,
+                cancellation,
+                cancelled
+            });
+
             vscode.postMessage({
                 command: 'assistantSpeechRequest',
                 id: id,