@processmaker/modeler 1.42.1 → 1.43.1

package/src/components/modeler/Modeler.vue

@@ -23,7 +23,7 @@
       @close="close"
       @save-state="pushToUndoStack"
       @clearSelection="clearSelection"
-      :players="players"
+      :players="filteredPlayers"
       @action="handleToolbarAction"
     />
     <b-row class="modeler h-100">
@@ -56,6 +56,29 @@
         v-if="showWelcomeMessage"
       />
 
+      <CreateAssetsCard
+        ref="createAssetsCard"
+        v-if="isAiGenerated"
+        @onGenerateAssets="generateAssets()"
+        @closeCreateAssets="onCloseCreateAssets()"
+      />
+
+      <GeneratingAssetsCard
+        ref="generatingAssetsCard"
+        v-if="generatingAi"
+      />
+      
+      <AssetsCreatedCard
+        ref="assetsCreatedCard"
+        v-if="assetsCreated"
+        @closeAssetsCreated="onCloseAssetsCreated()"
+      />
+
+      <CreateAssetsFailCard
+        ref="createAssetsFailCard"
+        v-if="false"
+      />
+
       <InspectorButton
         ref="inspector-button"
         v-show="showComponent && showInspectorButton"
@@ -143,6 +166,7 @@
       />
 
       <RailBottom
+        v-if="!generatingAi"
         :nodeTypes="nodeTypes"
         :paper-manager="paperManager"
         :graph="graph"
@@ -165,6 +189,11 @@
         @save-state="pushToUndoStack"
         :isMultiplayer="isMultiplayer"
       />
+      <RemoteCursor
+        v-for="player in filteredPlayers"
+        :key="player.id"
+        :data="player"
+      /> 
     </b-row>
   </span>
 </template>
@@ -172,12 +201,17 @@
 <script>
 
 import Vue from 'vue';
+
 import _ from 'lodash';
 import { dia } from 'jointjs';
 import boundaryEventConfig from '../nodes/boundaryEvent';
 import BpmnModdle from 'bpmn-moddle';
 import ExplorerRail from '../rails/explorer-rail/explorer';
 import WelcomeMessage from '../welcome/WelcomeMessage.vue';
+import CreateAssetsCard from '../aiMessages/CreateAssetsCard.vue';
+import GeneratingAssetsCard from '../aiMessages/GeneratingAssetsCard.vue';
+import AssetsCreatedCard from '../aiMessages/AssetsCreatedCard.vue';
+import CreateAssetsFailCard from '../aiMessages/CreateAssetsFailCard.vue';
 import { isJSON } from 'lodash-contrib';
 import pull from 'lodash/pull';
 import remove from 'lodash/remove';
@@ -251,6 +285,10 @@ export default {
     Selection,
     RailBottom,
     WelcomeMessage,
+    CreateAssetsCard,
+    GeneratingAssetsCard,
+    AssetsCreatedCard,
+    CreateAssetsFailCard,
     RemoteCursor,
   },
   props: {
@@ -348,6 +386,12 @@ export default {
       isResizingPreview: false,
       currentCursorPosition: 0,
       previewPanelWidth: 600,
+      isAiGenerated: window.ProcessMaker?.modeler?.isAiGenerated,
+      generatingAi: false,
+      assetsCreated: false,
+      // ^ TODO: To be changed depending on microservice response
+      currentNonce: null,
+      promptSessionId: '',
       flowTypes: [
         'processmaker-modeler-sequence-flow',
         'processmaker-modeler-message-flow',
@@ -401,6 +445,12 @@ export default {
     },
   },
   computed: {
+    filteredPlayers() {
+      const allPlayers = _.uniqBy(this.players, 'name');
+      return allPlayers.filter(player => {
+        return player.name.toLowerCase() !== window.ProcessMaker.user?.fullName.toLowerCase();
+      });
+    },
     showWelcomeMessage() {
       return !this.selectedNode && !this.nodes.length && !store.getters.isReadOnly && this.isLoaded;
     },
@@ -1613,6 +1663,7 @@ export default {
     },
     pointerMoveHandler(event) {
       const { clientX: x, clientY: y } = event;
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateMousePosition', { top: y, left: x });
       if (store.getters.isReadOnly) {
         if (this.canvasDragPosition && !this.clientLeftPaper) {
           this.paperManager.translate(
@@ -1662,8 +1713,23 @@ export default {
     enableMultiplayer(value) {
       store.commit('enableMultiplayer', value);
     },
-    addPlayer(player) {
-      this.players.push(player);
+    emptyPlayers(){
+      this.players = [];
+    },
+    addPlayer(data) {
+      const player = this.players.find(player => player.id === data.id);
+      if (!player) {
+        this.players.push(data);
+      }
+    },
+    /**
+     * Update Client Cursor
+     * @param {Object} data 
+     */
+    updateClientCursor(data) {
+      if (data) {
+        this.players = this.players.map((item) => (item.id === data.id ? { ...item, ...data } : item));
+      }
     },
     removePlayer(playerId) {
       const playerIndex = this.players.findIndex(player => player.id === playerId);
@@ -1678,6 +1744,119 @@ export default {
     updateLasso(){
       this.$refs.selector.updateSelectionBox();
     },
+    getNonce() {
+      const max = 999999999999999;
+      const nonce = Math.floor(Math.random() * max);
+      this.currentNonce = nonce;
+      localStorage.currentNonce = this.currentNonce;
+    },
+    getPromptSessionForUser() {
+      // Get sessions list
+      let promptSessions = localStorage.getItem('promptSessions');
+
+      // If promptSessions does not exist, set it as an empty array
+      promptSessions = promptSessions ? JSON.parse(promptSessions) : [];
+      let item = promptSessions.find(item => item.userId === window.ProcessMaker?.modeler?.process?.user_id && item.server === window.location.host);
+
+      if (item) {
+        return item.promptSessionId;
+      }
+
+      return '';
+    },
+    setPromptSessions(promptSessionId) {
+      let index = 'userId';
+      let id = window.ProcessMaker?.modeler?.process?.user_id;
+
+      // Get sessions list
+      let promptSessions = localStorage.getItem('promptSessions');
+
+      // If promptSessions does not exist, set it as an empty array
+      promptSessions = promptSessions ? JSON.parse(promptSessions) : [];
+
+      let item = promptSessions.find(item => item[index] === id && item.server === window.location.host);
+
+      if (item) {
+        item.promptSessionId = promptSessionId;
+      } else {
+        promptSessions.push({ [index]: id, server: window.location.host, promptSessionId });
+      }
+
+      localStorage.setItem('promptSessions', JSON.stringify(promptSessions));
+    },
+    removePromptSessionForUser() {
+      // Get sessions list
+      let promptSessions = localStorage.getItem('promptSessions');
+
+      // If promptSessions does not exist, set it as an empty array
+      promptSessions = promptSessions ? JSON.parse(promptSessions) : [];
+
+      let item = promptSessions.find(item => item.userId === window.ProcessMaker?.modeler?.process?.user_id && item.server === window.location.host);
+
+      if (item) {
+        item.promptSessionId = '';
+      }
+
+      localStorage.setItem('promptSessions', JSON.stringify(promptSessions));
+    },
+    fetchHistory() {
+      let url = '/package-ai/getPromptSessionHistory';
+
+      let params = {
+        server: window.location.host,
+        processId: this.processId,
+      };
+
+      if (this.promptSessionId && this.promptSessionId !== null && this.promptSessionId !== '') {
+        params = {
+          promptSessionId: this.promptSessionId,
+        };
+      }
+
+      window.ProcessMaker.apiClient.post(url, params)
+        .then(response => {
+          this.setPromptSessions((response.data.promptSessionId));
+          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) {
+            this.removePromptSessionForUser();
+            localStorage.promptSessionId = '';
+            this.promptSessionId = '';
+          } else {
+            window.ProcessMaker.alert(errorMsg, 'danger');
+          }
+        });
+    },
+    generateAssets() {
+      this.getNonce();
+
+      // TODO: Add endpoint to get the promprSessionId
+
+      const params = {
+        promptSessionId: this.promptSessionId,
+        nonce: this.currentNonce,
+        processId: window.ProcessMaker?.modeler?.process?.id,
+      };
+
+      const url = '/package-ai/generateProcessArtifacts';
+
+      window.ProcessMaker.apiClient.post(url, params)
+        .then(() => {
+        })
+        .catch((error) => {
+          const errorMsg = error.response?.data?.message || error.message;
+          window.ProcessMaker.alert(errorMsg, 'danger');
+        });
+    },
+    onCloseCreateAssets() {
+      this.isAiGenerated = false;
+    },
+    onCloseAssetsCreated() {
+      this.assetsCreated = false;
+    },
   },
   created() {
     if (runningInCypressTest()) {
@@ -1866,6 +2045,14 @@ export default {
         this.redirect(redirectUrl);
       }
     });
+
+    // AI Setup
+    this.currentNonce = localStorage.currentNonce;
+    if (!localStorage.getItem('promptSessions') || localStorage.getItem('promptSessions') === 'null') {
+      localStorage.setItem('promptSessions', JSON.stringify([]));
+    }
+    this.promptSessionId = this.getPromptSessionForUser();
+    this.fetchHistory();
   },
 };
 </script>

package/src/components/multiplayer/remoteCursor/RemoteCursor.vue

@@ -1,33 +1,19 @@
 <template>
-  <div class="remote-cursor" :style="{ left: left + 'px', top: top + 'px' }">
-    <inline-svg :src="cursorIcon" :fill="cursorColor" />
-
+  <div class="remote-cursor" :style="{ left: data.cursor.left + 'px', top: data.cursor.top + 'px' }">
+    <svg width="23" height="19" viewBox="0 0 23 19" xmlns="http://www.w3.org/2000/svg">
+      <path d="M11.5 17.5L2 1L20.5 7L13 9L11.5 17.5Z" :stroke="stroke" :fill="data.color"/>
+    </svg>
     <div class="remote-username">
-      {{ username }}
+      {{ data.name }}
     </div>
   </div>
 </template>
 
 <script>
-import InlineSvg from 'vue-inline-svg';
-
 export default {
-  components: {
-    InlineSvg,
-  },
   props: {
-    cursorColor: {
-      type: String,
-      default: '#000000',
-    },
-    username: {
-      type: String,
-    },
-    top: {
-      type: Number,
-    },
-    left: {
-      type: Number,
+    data: {
+      type: Object,
     },
   },
   data() {
@@ -35,6 +21,12 @@ export default {
       cursorIcon: require('@/components/multiplayer/remoteCursor/cursor.svg'),
     };
   },
+  computed: {
+    stroke:  () => {
+      return '#212529';
+    },
+  },
+
 };
 </script>
 
@@ -45,6 +37,7 @@ export default {
     display: flex;
     width: auto;
     height: 34px;
+    z-index: 2;
   }
 
   &-username {

package/src/components/railBottom/RailBottom.vue

@@ -84,12 +84,12 @@ export default {
       // Control coordinates
       const controlEl = entries[0].target.getBoundingClientRect();
       // Zoom coordinates
-      const zoomEl = this.$refs.zoomBox.$el.getBoundingClientRect();
+      const zoomEl = this.$refs.zoomBox?.$el.getBoundingClientRect();
       // Undo/Redo coordinates
-      const undoRedoEl = this.$refs.undoRedoBox.$el.getBoundingClientRect();
+      const undoRedoEl = this.$refs.undoRedoBox?.$el.getBoundingClientRect();
 
       // Checks overlapping
-      if (this.overlap) {
+      if (this.overlap && undoRedoEl) {
         if (controlEl.width < this.widthOverlapControl) {
           // Get the computed styles of the ZoomControl
           const zoomStyles = window.getComputedStyle(this.$refs.zoomBox.$el);
@@ -107,7 +107,7 @@ export default {
             this.overlap = false;
           }
         }
-      } else if (undoRedoEl.left < zoomEl.right) {
+      } else if (undoRedoEl?.left < zoomEl?.right) {
         this.overlap = true;
         this.widthOverlapControl = controlEl.width;
         this.leftOverlapUndoRedo = undoRedoEl.left;

package/src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue

@@ -37,7 +37,7 @@
         <span />
       </div>
       <i v-if="!containsSvg(data.icon)" :class="data.icon" class="fa-lg"/>
-      <inline-svg :src="data.icon" />
+      <inline-svg v-else :src="data.icon" />
     </a>
   </popper>
   <a v-else class="control-submenu-item"
@@ -46,7 +46,7 @@
     v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
   >
     <i v-if="!containsSvg(data.icon)" :class="data.icon" class="fa-lg"/>
-    <inline-svg :src="data.icon" />
+    <inline-svg v-else :src="data.icon" />
   </a>
 </template>
 
@@ -101,6 +101,10 @@ export default ({
       width: 24px;
       height: 24px;
     }
+    & > i {
+      color: #000000;
+      padding: 5px;
+    }
     &.active {
       background-color: #EBEEF2;
     }

package/src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue

@@ -33,7 +33,14 @@ export default {
   },
   computed: {
     pinnedObjects() {
-      return nodeTypesStore.getters.getPinnedNodeTypes;
+      const pinnedNodeTypes = nodeTypesStore.getters.getPinnedNodeTypes;
+
+      // Filter pinnedNodeTypes to exclude objects with PM Blocks type.
+      const filteredPinnedNodeTypes = pinnedNodeTypes.filter(obj => {
+        return !obj.type?.includes('processmaker-pm-block');
+      });
+
+      return filteredPinnedNodeTypes; 
     },
     objects() {
       return nodeTypesStore.getters.getNodeTypes;

package/src/components/rails/explorer-rail/pmBlocksLoop/pmBlocksLoop.vue

@@ -1,11 +1,51 @@
 <script>
+import pinIcon from '@/assets/pin-angle.svg';
+import pinFillIcon from '@/assets/pin-angle-fill.svg';
 import nodeTypesStore from '@/nodeTypesStore';
 import clickAndDrop from '@/mixins/clickAndDrop';
+import iconHelper from '@/mixins/iconHelper';
 
 export default {
   name: 'PmBlocksLoop',
-  mixins: [clickAndDrop],
+  mixins: [clickAndDrop, iconHelper],
+  data() {
+    return {
+      pinIcon,
+      pinFillIcon,
+      showPin: false,
+    };
+  },
+  created() {
+    nodeTypesStore.dispatch('getUserPinnedObjects');
+  },
+  methods: {
+    blockAlreadyPinned(object, type) {
+      return !!this.pinnedBlocks.find(obj => obj.type === type);
+    },
+    unPin(object) {
+      this.deselect();
+      return nodeTypesStore.dispatch('removeUserPinnedObject', object);
+    },
+    addPin(object) {
+      this.deselect();
+      return nodeTypesStore.dispatch('addUserPinnedObject', object);
+    },
+  },
   computed: {
+    pinnedBlocks() {
+      const pinnedNodeTypes = nodeTypesStore.getters.getPinnedNodeTypes;
+
+      //Filter pinnedNodeTypes to only return objects with PM Blocks type.
+      const filteredPinnedNodeTypes = pinnedNodeTypes.filter(obj => {
+        return obj.type?.includes('processmaker-pm-block');
+      });
+
+      return filteredPinnedNodeTypes; 
+    },
+    unpinnedBlocks() {
+      const objects = this.pmBlockNodeTypes;
+      return objects.filter((obj) => !this.pinnedBlocks.some(pinnedObj => pinnedObj.type === obj.type));
+    },
     pmBlockNodeTypes() {
       return nodeTypesStore.getters.getPmBlockNodeTypes;
     },
@@ -25,30 +65,78 @@ export default {
       <template v-for="object in filteredPmBlockNodes">
         <div
           class="node-types__item"
+          :data-test="object.type"
           :key="object.id"
+          @mouseover="showPin = true"
+          @mouseleave="showPin = false"
           @click.stop="onClickHandler($event, object)"
         >
           <div class="d-flex">
             <i v-if="!object.svgIcon" class="node-types__item__icon" :class="object.customIcon"/>
             <img v-else class="node-types__item__icon" :src="object.svgIcon" :alt="$t(object.label)">
             <label>{{ $t(object.label) }}</label>
+            <img
+              v-if="blockAlreadyPinned(object, object.type)"
+              :src="pinFillIcon"
+              class="pinIcon"
+              alt="Unpin Element"
+              @click="unPin(object)"
+            >
+            <img
+              v-else
+              :src="pinIcon"
+              class="pinIcon"
+              alt="Pin Element"
+              @click="addPin(object)"
+            >
           </div>
         </div>
       </template>
     </div>
     <template v-if="filteredPmBlockNodes.length === 0 && !searchTerm">
-      <div class="pmBlocksContainer p-2">
-        <template v-for="nodeType in pmBlockNodeTypes">
+      <div class="pinnedBlocks" v-if="pinnedBlocks.length > 0">
+        <p>{{ $t('Pinned PM Blocks') }}</p>
+        <template v-for="pinnedBlock in pinnedBlocks">
           <div
-            class="pm-block-node-types__item p-2 d-block"
+            class="node-types__item"
+            :data-test="pinnedBlock.type"
+            :key="pinnedBlock.id"
+            @mouseover="showPin = true"
+            @mouseleave="showPin = false"
+            @click.stop="onClickHandler($event, pinnedBlock)"
+          >
+            <i v-if="!containsSvg(pinnedBlock.icon)" :class="pinnedBlock.customIcon" class="fa-lg"/>
+            <img v-else class="node-types__item__icon" :src="pinnedBlock.svgIcon" :alt="$t(pinnedBlock.label)">
+            <span>{{ $t(pinnedBlock.label) }}</span>
+            <img
+              :src="pinFillIcon"
+              class="pinIcon"
+              alt="Pin/Unpin Element"
+              @click="unPin(pinnedBlock)"
+            >
+          </div>
+        </template>
+      </div>
+      <div class="objectCategory">
+        <p>{{ $t('PM Block Category') }}</p>
+        <template v-for="nodeType in unpinnedBlocks">
+          <div
+            class="node-types__item"
+            :data-test="nodeType.type"
             :key="nodeType.id"
+            @mouseover="showPin = true"
+            @mouseleave="showPin = false"
             @click.stop="onClickHandler($event, nodeType)"
           >
-            <div class="d-flex">
-              <i v-if="!nodeType.svgIcon" class="node-types__item__icon" :class="nodeType.customIcon"/>
-              <img v-else class="node-types__item__icon" :src="nodeType.svgIcon" :alt="$t(nodeType.label)">
-              <label>{{ $t(nodeType.label) }}</label>
-            </div>
+            <i v-if="!containsSvg(nodeType.icon)" :class="nodeType.customIcon" class="fa-lg"/>
+            <img v-else class="node-types__item__icon" :src="nodeType.svgIcon" :alt="$t(nodeType.label)">
+            <span>{{ $t(nodeType.label) }}</span>
+            <img
+              :src="pinIcon"
+              class="pinIcon"
+              alt="Pin/Unpin Element"
+              @click="addPin(nodeType)"
+            >
           </div>
         </template>
       </div>
@@ -57,6 +145,11 @@ export default {
 </template>
 
 <style lang="scss">
+#pmBlockNodeTypesList {
+  .pinnedBlocks {
+    margin-bottom: 1rem;
+  }
+}
 .pm-block-node-types {
   &__item {
     display: block;
@@ -66,6 +159,9 @@ export default {
     margin-bottom: 8px;
     &:hover {
       background-color: #EBEEF2;
+      .pinIcon {
+        background-color: #DADDDF;
+      }
     }
     &__icon {
       width: 1.5rem;
@@ -81,6 +177,11 @@ export default {
       font-size: 13px;
       color:#6C757D;
     }
+    .pinIcon {
+      margin-left: auto;
+      border-radius: 4px;
+      padding: 0.3rem;
+    }
   }
 }
 </style>

package/src/components/topRail/TopRail.vue

@@ -7,6 +7,8 @@
       @openPanel="handleOpenPanel"
     />
 
+    <AiGenerateButton/>
+
     <ValidateButton @openIssue="handleOpenIssue" />
 
     <ValidatePanel
@@ -22,11 +24,13 @@
 import store from '@/store';
 import { ValidateButton, ValidateIssue, ValidatePanel } from '@/components/topRail/validateControl';
 import MultiplayerViewUsers from '@/components/topRail/multiplayerViewUsers/MultiplayerViewUsers';
+import AiGenerateButton from '../aiMessages/AiGenerateButton.vue';
 export default {
   components: {
     ValidateButton,
     ValidateIssue,
     ValidatePanel,
+    AiGenerateButton,
     MultiplayerViewUsers,
   },
   props: {

package/src/components/topRail/multiplayerViewUsers/MultiplayerViewUsers.vue

@@ -1,6 +1,6 @@
 <template>
   <b-avatar-group class="container" v-show="isMultiplayer">
-    <template v-for="item in filteredPlayers" >
+    <template v-for="item in players" >
       <Avatar
         :badgeBackgroundColor="item.color"
         :imgSrc="item.avatar"
@@ -13,7 +13,6 @@
 </template>
   
 <script>
-import { uniqBy } from 'lodash';
 import Avatar from '@/components/topRail/multiplayerViewUsers/avatar/Avatar';
 import store from '@/store';
 
@@ -28,12 +27,6 @@ export default {
     },
   },
   computed: {
-    filteredPlayers() {
-      const allPlayers = uniqBy(this.players, 'name');
-      return allPlayers.filter(player => {
-        return player.name.toLowerCase() !== window.ProcessMaker.user?.fullName.toLowerCase();
-      });
-    },
     isMultiplayer: () => store.getters.isMultiplayer,
   },
 };