@processmaker/modeler 1.43.3 → 1.43.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.43.3",
+  "version": "1.43.5",
   "scripts": {
     "serve": "vue-cli-service serve --mode development",
     "test:unit": "vue-cli-service test:unit",

package/src/components/aiMessages/CreateAssetsFailCard.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="customAlert mx-auto mt-2">
-    <b-alert show dismissible variant="warning">
+    <b-alert
+      show
+      dismissible
+      variant="warning"
+      @dismissed="onDismiss()"
+    >
       {{ $t("Generation of assets was not able to complete. Try again") }}
     </b-alert>
   </div>
@@ -11,6 +16,11 @@ export default {
   data() {
     return {};
   },
+  methods: {
+    onDismiss() {
+      this.$emit('onDismiss');
+    },
+  },
 };
 </script>
 <style scoped>

package/src/components/aiMessages/GeneratingAssetsCard.vue

@@ -11,7 +11,7 @@
         <div class="p-0">
           <button
             class="h-100 px-3 cancel-btn btn btn-secondary"
-            @click="onClose()"
+            @click="onStop()"
           >
             {{ $t("STOP") }}
           </button>
@@ -34,7 +34,7 @@ export default {
     };
   },
   methods: {
-    onClose() {
+    onStop() {
       this.$emit('stopAssetGeneration');
     },
   },

package/src/components/modeler/Modeler.vue

@@ -25,6 +25,7 @@
       @clearSelection="clearSelection"
       :players="filteredPlayers"
       @action="handleToolbarAction"
+      @onGenerateAssets="generateAssets()"
     />
     <b-row class="modeler h-100">
       <b-tooltip
@@ -60,23 +61,25 @@
         ref="createAssetsCard"
         v-if="isAiGenerated"
         @onGenerateAssets="generateAssets()"
-        @closeCreateAssets="onCloseCreateAssets()"
+        @closeCreateAssets="isAiGenerated = false"
       />
 
       <GeneratingAssetsCard
         ref="generatingAssetsCard"
-        v-if="generatingAi"
+        v-if="loadingAI"
+        @stopAssetGeneration="onStopAssetGeneration()"
       />
       
       <AssetsCreatedCard
         ref="assetsCreatedCard"
         v-if="assetsCreated"
-        @closeAssetsCreated="onCloseAssetsCreated()"
+        @closeAssetsCreated="assetsCreated = false"
       />
 
       <CreateAssetsFailCard
         ref="createAssetsFailCard"
-        v-if="false"
+        v-if="assetFail"
+        @onDismiss="assetFail = false"
       />
 
       <InspectorButton
@@ -166,7 +169,7 @@
       />
 
       <RailBottom
-        v-if="!generatingAi"
+        v-if="!loadingAI"
         :nodeTypes="nodeTypes"
         :paper-manager="paperManager"
         :graph="graph"
@@ -199,9 +202,7 @@
 </template>
 
 <script>
-
 import Vue from 'vue';
-
 import _ from 'lodash';
 import { dia } from 'jointjs';
 import boundaryEventConfig from '../nodes/boundaryEvent';
@@ -387,11 +388,12 @@ export default {
       currentCursorPosition: 0,
       previewPanelWidth: 600,
       isAiGenerated: window.ProcessMaker?.modeler?.isAiGenerated,
-      generatingAi: false,
       assetsCreated: false,
-      // ^ TODO: To be changed depending on microservice response
+      assetFail: false,
       currentNonce: null,
       promptSessionId: '',
+      loadingAI: false,
+      cancelledJobs: [],
       flowTypes: [
         'processmaker-modeler-sequence-flow',
         'processmaker-modeler-message-flow',
@@ -1845,7 +1847,7 @@ export default {
 
       let params = {
         server: window.location.host,
-        processId: this.processId,
+        processId: window.ProcessMaker?.modeler?.process?.id,
       };
 
       if (this.promptSessionId && this.promptSessionId !== null && this.promptSessionId !== '') {
@@ -1860,9 +1862,8 @@ export default {
           this.promptSessionId = (response.data.promptSessionId);
           localStorage.promptSessionId = (response.data.promptSessionId);
         }).catch((error) => {
-          const errorMsg = error.response?.data?.message || error.message;
-
-          if (error.response.status === 404) {
+          const errorMsg = error.message;
+          if (error === 404) {
             this.removePromptSessionForUser();
             localStorage.promptSessionId = '';
             this.promptSessionId = '';
@@ -1874,7 +1875,7 @@ export default {
     generateAssets() {
       this.getNonce();
 
-      // TODO: Add endpoint to get the promprSessionId
+      this.fetchHistory();
 
       const params = {
         promptSessionId: this.promptSessionId,
@@ -1886,17 +1887,87 @@ export default {
 
       window.ProcessMaker.apiClient.post(url, params)
         .then(() => {
+          // Response
         })
         .catch((error) => {
           const errorMsg = error.response?.data?.message || error.message;
           window.ProcessMaker.alert(errorMsg, 'danger');
+          this.assetFail = true;
         });
     },
-    onCloseCreateAssets() {
-      this.isAiGenerated = false;
+    highlightTaskArrays(data) {
+      if (data) {
+        this.addAiHighlights(data.tasks);
+        this.addAiHighlights(data.serviceTasks);
+        this.addAiHighlights(data.scriptTasks);
+      }
     },
-    onCloseAssetsCreated() {
-      this.assetsCreated = false;
+    unhighlightTaskArrays(data) {
+      if (data) {
+        this.removeAiHighlights(data.tasks);
+        this.removeAiHighlights(data.serviceTasks);
+        this.removeAiHighlights(data.scriptTasks);
+      }
+    },
+    addAiHighlights(taskArray) {
+      let self = this;
+      taskArray.forEach(task => {
+        const taskNode = self.getElementByNodeId(task.id);
+        taskNode.component.setAiStatusHighlight(task.status);
+      });
+    },
+    removeAiHighlights(taskArray) {
+      let self = this;
+      taskArray.forEach(task => {
+        const taskNode = self.getElementByNodeId(task.id);
+        taskNode.component.unsetHighlights();
+      });
+    },
+    subscribeToProgress() {
+      const channel = `ProcessMaker.Models.User.${window.ProcessMaker?.modeler?.process?.user_id}`;
+      const streamProgressEvent = '.ProcessMaker\\Package\\PackageAi\\Events\\GenerateArtifactsProgressEvent';
+      window.Echo.private(channel).listen(
+        streamProgressEvent,
+        (response) => {
+          if (response.data.promptSessionId !== this.promptSessionId) {
+            this.unhighlightTaskArrays(response.data);
+            return;
+          }
+
+          if (this.cancelledJobs.some((element) => element === response.data.nonce)) {
+            this.unhighlightTaskArrays(response.data);
+            return;
+          }
+
+          if (response.data) {
+            if (response.data.progress.status === 'running') {
+              this.loadingAI = true;
+              this.highlightTaskArrays(response.data);
+            } else if (response.data.progress.status === 'error') {
+              this.loadingAI = false;
+              window.ProcessMaker.alert(response.data.message, 'danger');
+              // Stop and show error
+              this.assetFail = true;
+            } else {
+              this.setPromptSessions(response.data.promptSessionId);
+              // Successful generation 
+              this.assetsCreated = true;
+              this.unhighlightTaskArrays(response.data);
+              this.fetchHistory();
+              setTimeout(() => {
+                this.loadingAI = false;
+              }, 500);
+            }
+          }
+        },
+      );
+    },
+    onStopAssetGeneration() {
+      if (this.currentNonce) {
+        this.cancelledJobs.push(this.currentNonce);
+        localStorage.setItem('cancelledJobs', JSON.stringify(this.cancelledJobs));
+        this.loadingAI = false;
+      }
     },
   },
   created() {
@@ -2092,8 +2163,14 @@ export default {
     if (!localStorage.getItem('promptSessions') || localStorage.getItem('promptSessions') === 'null') {
       localStorage.setItem('promptSessions', JSON.stringify([]));
     }
+    if (!localStorage.getItem('cancelledJobs') || localStorage.getItem('cancelledJobs') === 'null') {
+      this.cancelledJobs = [];
+    } else {
+      this.cancelledJobs = JSON.parse(localStorage.getItem('cancelledJobs'));
+    }
     this.promptSessionId = this.getPromptSessionForUser();
     this.fetchHistory();
+    this.subscribeToProgress();
   },
 };
 </script>

package/src/components/toolbar/ToolBar.vue

@@ -9,6 +9,7 @@
           :validation-errors="validationErrors"
           :warnings="warnings"
           :players="players"
+          v-on="$listeners"
         >
           <component
             :is="component.button"

package/src/components/topRail/TopRail.vue

@@ -7,7 +7,9 @@
       @openPanel="handleOpenPanel"
     />
 
-    <AiGenerateButton/>
+    <AiGenerateButton
+      v-on="$listeners"
+    />
 
     <ValidateButton @openIssue="handleOpenIssue" />
 

package/src/mixins/highlightConfig.js

@@ -143,7 +143,29 @@ export default {
       } else {
         this.shapeView.unhighlight(this.shapeBody, this.prepareCustomColorHighlighter(color));
       }
-     
+    },
+    setAiStatusHighlight(status) {
+      this.shapeView.unhighlight(this.shapeBody, completedHighlighter);
+      if (status === 'generated') {
+        this.shape.attr('body/fill', COLOR_COMPLETED_FILL);
+        this.shapeView.highlight(this.shapeBody, completedHighlighter);
+      }
+      this.shapeView.unhighlight(this.shapeBody, inProgressHighlighter);
+      if (status === 'generating') {
+        this.shape.attr('body/fill', COLOR_IN_PROGRESS_FILL);
+        this.shapeView.highlight(this.shapeBody, inProgressHighlighter);
+      }
+      this.shapeView.unhighlight(this.shapeBody, idleHighlighter);
+      if (status === 'previously generated') {
+        this.shape.attr('body/fill', COLOR_IDLE_FILL);
+        this.shapeView.highlight(this.shapeBody, idleHighlighter);
+      }
+    },
+    unsetHighlights() {
+      this.shape.attr('body/fill', '#FFFFFF');
+      this.shapeView.unhighlight(this.shapeBody, inProgressHighlighter);
+      this.shapeView.unhighlight(this.shapeBody, completedHighlighter);
+      this.shapeView.unhighlight(this.shapeBody, idleHighlighter);
     },
     setShapeHighlightForReadOnly() {
       if (!this.shapeView) {