@processmaker/modeler 1.43.0 → 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/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,
   },
 };

package/src/components/topRail/multiplayerViewUsers/avatar/Avatar.vue

@@ -1,7 +1,7 @@
 <template>
   <span 
     class="b-avatar rounded-circle"
-    :style="{'backgroundColor': generateColorHsl(userName, saturationRange, lightnessRange)}"
+    :style="{'backgroundColor': backgroundColor}"
   >
     <span v-if="imgSrc" class="b-avatar-img" :id="id">
       <img :src="imgSrc" :alt="userName">
@@ -46,16 +46,9 @@ export default {
       saturation: 50,
       lightness: 50,
       range: 10,
+      backgroundColor: '#104A75',
     };
   },
-  computed: {
-    saturationRange() {
-      return this.getRange(this.saturation, this.range);
-    },
-    lightnessRange() {
-      return this.getRange(this.lightness, this.range);
-    },
-  },
   methods: {
     /**
      * Get the initials from a given name.
@@ -69,73 +62,6 @@ export default {
       const lastNameIn = nameArray[nameArray.length - 1].charAt(0).toUpperCase();
       return `${firstNameIn}${lastNameIn}`;
     },
-    /**
-     * Calculates a hash value for a given string.
-     *
-     * @param {string} str - The input string for which the hash needs to be calculated.
-     * @returns {number} The calculated hash value for the input string.
-     */
-    getHashOfString(str){
-      let hash = 0;
-      for (let i = 0; i < str.length; i++) {
-        hash = str.charCodeAt(i) + ((hash << 5) - hash);
-      }
-      hash = Math.abs(hash);
-      return hash;
-    },
-    /**
-     * Calculates a range around a given value.
-     *
-     * @param {number} value - The central value.
-     * @param {number} range - The range value.
-     * @returns {number[]} An array containing the lower and upper bounds of the range.
-     */
-    getRange(value, range)  {
-      return [Math.max(0, value-range), Math.min(value + range, 100)];
-    },
-    /**
-     * Get the hash number to within our range
-     * 
-     * @param {Number} hash 
-     * @param {Number} min
-     * @param {Number} max
-     * @returns {Number}
-     */
-    normalizeHash(hash, min, max){
-      return Math.floor((hash % (max - min)) + min);
-    },
-    /**
-     *Generate Unique Color, create a string using our h,s,l values.
-     * @param {String} name
-     * @param {Array} saturationRange 
-     * @param {Array} lightnessRange
-     * @returns {Number}
-     */
-    generateHSL(name, saturationRange, lightnessRange) {
-      const hash = this.getHashOfString(name);
-      const h = this.normalizeHash(hash, 0, 360);
-      const s = this.normalizeHash(hash, saturationRange[0], saturationRange[1]);
-      const l = this.normalizeHash(hash, lightnessRange[0], lightnessRange[1]);
-      return [h, s, l];
-    },
-    /**
-     * Convert HSL array to string
-     * @param {Array} hsl
-     * @returns {String}
-     */
-    HSLtoString(hsl)  {
-      return `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
-    },
-    /**
-     * Generate a unique hsl value.
-     * @param {String} name
-     * @param {Array} saturationRange 
-     * @param {Array} lightnessRange
-     * @returns {String}
-     */
-    generateColorHsl(id, saturationRange, lightnessRange) {
-      return this.HSLtoString(this.generateHSL(id, saturationRange, lightnessRange));
-    },
   },
 };
 

package/src/components/topRail/multiplayerViewUsers/avatar/avatar.scss

@@ -2,5 +2,4 @@
   text-align: center;
   line-height: 2.4rem;
   color: #ffffff;
-  font-weight: bold;
 }

package/src/components/welcome/WelcomeMessage.vue

@@ -148,7 +148,7 @@ export default {
   },
 };
 </script>
-<style>
+<style scoped>
 .message {
   color: #5f666d;
   font-style: italic;
@@ -187,11 +187,6 @@ export default {
   border-color: #0872C2;
 }
 
-.ai-icon {
-  width: 22px;
-  height: 22px;
-}
-
 .ai-icon {
   width: 22px;
   height: 22px;

package/src/multiplayer/multiplayer.js

@@ -6,7 +6,7 @@ import Room from './room';
 import store from '@/store';
 import { getBoundaryEventData } from '@/components/nodes/boundaryEvent/boundaryEventUtils';
 import { InspectorUtils } from './inspector.utils';
-
+import ColorUtil from '../colorUtil';
 export default class Multiplayer {
   clientIO = null;
   yDoc = null;
@@ -16,7 +16,7 @@ export default class Multiplayer {
   room = null;
   inspector = null;
   deletedItem = null;
-
+  colorUtil = null;
   constructor(modeler) {
     // define document
     this.yDoc = new Y.Doc();
@@ -42,33 +42,28 @@ export default class Multiplayer {
     } else {
       this.clientIO.disconnect();
     }
+    this.colorUtil = new ColorUtil(50, 50, 10);
   }
+
   webSocketEvents() {
     this.clientIO.on('connect', () => {
       // Join the room
+      this.modeler.emptyPlayers();
       this.clientIO.emit('joinRoom', {
         roomName: this.room.getRoom(),
         clientName: window.ProcessMaker.user?.fullName,
         clientAvatar: window.ProcessMaker.user?.avatar,
+        clientColor: window.ProcessMaker.user?.color || this.colorUtil.randomColor(window.ProcessMaker.user?.fullName),
+        clientCursor: {
+          top: 300,
+          left: 300,
+        },
       });
     });
 
     this.clientIO.on('clientJoined', (payload) => {
       this.modeler.enableMultiplayer(payload.isMultiplayer);
-
-      if (payload.isMultiplayer) {
-        payload.clients.map(client => {
-          const newPlayer = {
-            id: client.id,
-            name: client.name,
-            color:  client.color,
-            avatar: client.avatar || null,
-            top: 90,
-            left: 80,
-          };
-          this.modeler.addPlayer(newPlayer);
-        });
-      }
+      this.addPlayers(payload);
     });
 
     this.clientIO.on('clientLeft', (payload) => {
@@ -85,6 +80,10 @@ export default class Multiplayer {
         this.syncLocalNodes(clientId);
       }
     });
+    
+    this.clientIO.on('updateUserCursor', async(payload) => {
+      this.updateClientCursor(payload);
+    });
 
     // Listen for updates when a new element is added
     this.clientIO.on('createElement', async(payload) => {
@@ -198,6 +197,49 @@ export default class Multiplayer {
         this.updateFlows(data);
       }
     });
+    window.ProcessMaker.EventBus.$on('multiplayer-updateMousePosition', ( data ) => {
+      if (this.modeler.isMultiplayer) {
+        this.updateMousePosition(data);
+      }
+    });
+  }
+  /**
+   * Add a Player
+   * @param {Object} payload 
+   */
+  addPlayers(payload) {
+    if (payload.isMultiplayer) {
+      payload.clients.map(client => {
+        const newPlayer = {
+          id: client.id,
+          name: client.name,
+          color: client.color,
+          avatar: client.avatar,
+          cursor: client.cursor,
+        };
+        this.modeler.addPlayer(newPlayer);
+      });
+    }
+  }
+  /**
+   * Updates the mouse position
+   * @param {Object} data 
+   */
+  updateMousePosition(data) {
+    this.clientIO.emit('cursorTrackingUpdate', { 
+      roomName: this.room.getRoom(),
+      clientId:  this.clientIO.id,
+      clientCursor: data,
+    });
+  }
+  /**
+   * Update Client cursor handler
+   * @param {Object} payload 
+   */
+  updateClientCursor(payload){
+    payload.clients.map(client => {
+      this.modeler.updateClientCursor(client);
+    });
   }
   /**
    * Sync the modeler nodes with the microservice