Generate action functions

app/web/src/components/Ai/GenerateAwsFunctionPanel.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="flex flex-row gap-xs items-end p-xs justify-end w-full">
+    <VormInput
+      label="CLI"
+      type="text"
+      disabled
+      defaultValue="aws"
+      :maxLength="3"
+      @enterPressed="generateAwsFunction"
+    />
+    <VormInput
+      v-model="awsCommand.command"
+      label="Command"
+      type="text"
+      :disabled="generating"
+      @enterPressed="generateAwsFunction"
+    />
+    <VormInput
+      v-model="awsCommand.subcommand"
+      label="Subcommand"
+      type="text"
+      :disabled="generating"
+      @enterPressed="generateAwsFunction"
+    />
+    <VButton
+      v-tooltip="'Generate Schema From AWS Command'"
+      class="mb-[2px]"
+      :loading="generating"
+      loadingIcon="sparkles"
+      loadingText="Generating ..."
+      :requestStatus="generateRequestStatus"
+      label="Generate"
+      size="sm"
+      @click="generateAwsFunction"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, PropType, computed } from "vue";
+import { VormInput, VButton } from "@si/vue-lib/design-system";
+import { useFuncStore, AwsCliCommand } from "@/store/func/funcs.store";
+import { SchemaVariantId } from "@/api/sdf/dal/schema";
+import { FuncId } from "@/api/sdf/dal/func";
+
+const funcStore = useFuncStore();
+
+const props = defineProps({
+  funcId: { type: String as PropType<FuncId>, required: true },
+  schemaVariantId: {
+    type: String as PropType<SchemaVariantId>,
+    required: true,
+  },
+  generatingCommand: { type: Object as PropType<AwsCliCommand> },
+});
+
+/** The AWS command entered in the form */
+const awsCommand = reactive({
+  command: props.generatingCommand?.command ?? "sqs",
+  subcommand: props.generatingCommand?.subcommand ?? "create-queue",
+});
+
+/** Status of the request */
+const generateRequestStatus = funcStore.getRequestStatus(
+  "GENERATE_AWS_FUNCTION",
+  props.funcId,
+);
+const generating = computed(
+  () => generateRequestStatus.value.isPending || !!props.generatingCommand,
+);
+
+/** Actually trigger schema generation */
+const generateAwsFunction = async () => {
+  if (generating.value) {
+    return;
+  }
+  await funcStore.GENERATE_AWS_FUNCTION(
+    props.funcId,
+    awsCommand,
+    props.schemaVariantId,
+  );
+};
+</script>

app/web/src/components/AssetEditorHeader.vue

@@ -54,16 +54,12 @@
         :color="selectedAsset.color"
       />
       <IconButton
-        v-if="featureFlagsStore.AI_GENERATOR"
+        v-if="!!generateAwsFunctionPanelKind"
         icon="sparkles"
         size="lg"
-        :tooltip="
-          showAwsAssetSchemaGeneratorPanel
-            ? 'Close'
-            : 'Generate AWS Asset Schema'
-        "
-        :selected="showAwsAssetSchemaGeneratorPanel"
-        @click="toggleAwsAssetSchemaGeneratorPanel"
+        :tooltip="generateAwsFunctionPanelTooltip"
+        :selected="generateAwsFunctionPanelVisible"
+        @click="toggleGenerateAwsFunctionPanel"
       />
     </div>
     <!-- openable AI generator panel extension -->
@@ -78,15 +74,19 @@
       :onBeforeLeave="captureHeight"
       :onAfterLeave="clearHeight"
     >
-      <div v-show="showAwsAssetSchemaGeneratorPanel" ref="transitionRef">
-        <GenerateAwsAssetSchemaPanel :asset="selectedAsset" />
+      <div v-show="generateAwsFunctionPanelVisible" ref="transitionRef">
+        <GenerateAwsFunctionPanel
+          :funcId="resolvedFuncId"
+          :schemaVariantId="selectedAsset.schemaVariantId"
+          :generatingCommand="generateAwsFunctionPanelGeneratingCommand"
+        />
       </div>
     </Transition>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { PropType, computed, ref } from "vue";
+import { PropType, computed, ref, watchEffect } from "vue";
 import {
   IconButton,
   Timestamp,
@@ -96,19 +96,21 @@ import {
 import clsx from "clsx";
 import { schemaVariantDisplayName, useAssetStore } from "@/store/asset.store";
 import { useFeatureFlagsStore } from "@/store/feature_flags.store";
+import { useFuncStore } from "@/store/func/funcs.store";
 import { SchemaVariant } from "@/api/sdf/dal/schema";
 import { FuncSummary } from "@/api/sdf/dal/func";
 import EditingPill from "./EditingPill.vue";
 import NodeSkeleton from "./NodeSkeleton.vue";
-import GenerateAwsAssetSchemaPanel from "./Ai/GenerateAwsAssetSchemaPanel.vue";
+import GenerateAwsFunctionPanel from "./Ai/GenerateAwsFunctionPanel.vue";
 
 const assetStore = useAssetStore();
 const featureFlagsStore = useFeatureFlagsStore();
+const funcStore = useFuncStore();
 
 const truncateRef1 = ref<InstanceType<typeof TruncateWithTooltip>>();
 const truncateRef2 = ref<InstanceType<typeof TruncateWithTooltip>>();
 
-defineProps({
+const props = defineProps({
   selectedAsset: { type: Object as PropType<SchemaVariant>, required: true },
   selectedFunc: { type: Object as PropType<FuncSummary> },
 });
@@ -121,11 +123,46 @@ const showTooltip = computed(() => {
   return truncateRef1.value?.tooltipActive || truncateRef2.value?.tooltipActive;
 });
 
-const showAwsAssetSchemaGeneratorPanel = ref(false);
-const toggleAwsAssetSchemaGeneratorPanel = () => {
-  showAwsAssetSchemaGeneratorPanel.value =
-    !showAwsAssetSchemaGeneratorPanel.value;
+// Generator panel button
+const generateAwsFunctionPanelKind = computed(() => {
+  if (!featureFlagsStore.AI_GENERATOR) {
+    return undefined;
+  }
+  switch (props.selectedFunc?.kind) {
+    case undefined:
+      return "schema";
+    case "Action":
+      return "action";
+    default:
+      return undefined;
+  }
+});
+const resolvedFuncId = computed(
+  () => props.selectedFunc?.funcId ?? props.selectedAsset.assetFuncId,
+);
+const generateAwsFunctionPanelGeneratingCommand = computed(
+  () => funcStore.generatingFuncCode[resolvedFuncId.value],
+);
+const generateAwsFunctionPanelTooltip = computed(() => {
+  switch (generateAwsFunctionPanelKind.value) {
+    case "schema":
+      return "Generate AWS Asset Schema";
+    case "action":
+      return "Generate AWS Action Function";
+    default:
+      return undefined;
+  }
+});
+const generateAwsFunctionPanelVisible = ref(false);
+const toggleGenerateAwsFunctionPanel = () => {
+  generateAwsFunctionPanelVisible.value =
+    !generateAwsFunctionPanelVisible.value;
 };
+// When we start or stop generating, make sure the panel is toggled on/off (but let the user toggle it back off if they want)
+watchEffect(() => {
+  generateAwsFunctionPanelVisible.value =
+    !!generateAwsFunctionPanelGeneratingCommand.value;
+});
 
 const transitionRef = ref<HTMLDivElement>();
 

app/web/src/components/FuncEditor/FuncEditor.vue

@@ -23,7 +23,9 @@
     <CodeEditor
       :id="`func-${selectedFuncCode.funcId}`"
       v-model="editingFunc"
-      :disabled="selectedFuncSummary?.isLocked"
+      :disabled="
+        selectedFuncSummary?.isLocked || !!funcStore.generatingFuncCode[funcId]
+      "
       :recordId="selectedFuncSummary?.funcId || ''"
       :typescript="selectedFuncSummary?.types || ''"
       @change="updateFuncCode"

app/web/src/store/asset.store.ts

@@ -564,23 +564,6 @@ export const useAssetStore = (forceChangeSetId?: ChangeSetId) => {
             },
           });
         },
-
-        async GENERATE_AWS_ASSET_SCHEMA(
-          id: SchemaVariantId,
-          command: string,
-          subcommand: string,
-        ) {
-          if (changeSetStore.creatingChangeSet)
-            throw new Error("race, wait until the change set is created");
-          if (changeSetStore.headSelected)
-            changeSetStore.creatingChangeSet = true;
-
-          return new ApiRequest<SchemaVariant>({
-            url: API_PREFIX.concat([id, "generate_aws_asset_schema"]),
-            params: { command, subcommand },
-            keyRequestStatusBy: id,
-          });
-        },
       },
       async onActivated() {
         await Promise.all([