Merge pull request #5142 from systeminit/fix-prompt

feat(web): Add a modal overlay when prompt is executing
systeminit · Dec 17, 2024 · 68eca14 · 68eca14
2 parents 5899bf0 + 7ec543a
commit 68eca14
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git 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
@@ -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;
+            },
           });
         },