From 7ec543ab76f3617a39bdd90457c23ffe0eca156f Mon Sep 17 00:00:00 2001
From: stack72 <public@paulstack.co.uk>
Date: Tue, 17 Dec 2024 00:04:08 +0000
Subject: [PATCH] feat(web): Add a modal overlay when prompt is executing

https://jam.dev/c/1acf7e4b-25c5-444e-8146-b06d379cccf5

Without this, it wasn't apparent that a prompt was actually generating
---
 .../Workspace/WorkspaceCustomizeAssets.vue      | 17 +++++++++++++++++
 app/web/src/store/func/funcs.store.ts           |  9 +++++++++
 2 files changed, 26 insertions(+)

diff --git a/app/web/src/components/Workspace/WorkspaceCustomizeAssets.vue b/app/web/src/components/Workspace/WorkspaceCustomizeAssets.vue
index 83216e1f81..0c12365ea1 100644
--- a/app/web/src/components/Workspace/WorkspaceCustomizeAssets.vue
+++ b/app/web/src/components/Workspace/WorkspaceCustomizeAssets.vue
@@ -1,5 +1,13 @@
 <!-- eslint-disable vue/no-multiple-template-root -->
 <template>
+  <div
+    v-if="generatingPrompt"
+    class="text-center text-2xl z-100 absolute w-full h-full bg-black bg-opacity-50 flex flex-row justify-center items-center"
+  >
+    <div class="bg-black text-white w-1/5 rounded-lg">
+      <LoadingMessage>Executing Prompt...</LoadingMessage>
+    </div>
+  </div>
   <component
     :is="ResizablePanel"
     ref="leftResizablePanelRef"
@@ -138,6 +146,7 @@ import {
   Stack,
   DropdownMenu,
   DropdownMenuItemObjectDef,
+  LoadingMessage,
 } from "@si/vue-lib/design-system";
 import { useRoute } from "vue-router";
 import { useAssetStore } from "@/store/asset.store";
@@ -263,4 +272,12 @@ const tabContentSlug = computed<"assets" | "newassets">(() => {
       return "assets";
   }
 });
+
+const generatingPrompt = ref(false);
+watch(
+  () => funcStore.executingPrompt,
+  () => {
+    generatingPrompt.value = funcStore.executingPrompt;
+  },
+);
 </script>
diff --git a/app/web/src/store/func/funcs.store.ts b/app/web/src/store/func/funcs.store.ts
index e6b6aacaea..3c39809317 100644
--- a/app/web/src/store/func/funcs.store.ts
+++ b/app/web/src/store/func/funcs.store.ts
@@ -204,6 +204,7 @@ export const useFuncStore = () => {
         generatingFuncCode: {} as Record<FuncId, AwsCliCommand>,
         /** Whether the "generate AWS function" panel is toggled open */
         generateAwsFunctionPanelToggled: false,
+        executingPrompt: false,
         // So we can ignore websocket update originated by this client
         clientUlid: ulid(),
       }),
@@ -715,6 +716,8 @@ export const useFuncStore = () => {
           if (changeSetsStore.headSelected)
             changeSetsStore.creatingChangeSet = true;
 
+          this.executingPrompt = true;
+
           return new ApiRequest<{
             command: string;
             subcommand: string;
@@ -723,6 +726,12 @@ export const useFuncStore = () => {
             url: API_PREFIX.concat([funcId, "generate_aws_function"]),
             params: { command, subcommand, schemaVariantId },
             keyRequestStatusBy: funcId,
+            onSuccess: (response) => {
+              this.executingPrompt = false;
+            },
+            onFail: () => {
+              this.executingPrompt = false;
+            },
           });
         },