Merge pull request #1678 from ProcessMaker/epic/FOUR-9674

Epic/FOUR-9674: AI in modeler

src/components/crown/crownButtons/crownColorDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="cog-container" role="menuitem">
+  <div class="cog-container" role="menuitem" v-if="!hide">
     <crown-button
       v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
       :title="$t('Open Color Palette')"
@@ -102,6 +102,10 @@ export default {
       type: String,
       default: '',
     },
+    hide: {
+      type: Boolean,
+      default: false,
+    },
   },
   components: { CrownButton, 'sketch-picker': Sketch, IconSelector },
   data() {

src/components/crown/crownButtons/crownDropdowns.vue

@@ -20,6 +20,7 @@
     />
 
     <crown-color-dropdown
+      :hide="hideColorDropdown"
       :dropdown-open="colorDropdownOpen"
       :node="node"
       :showCustomIconPicker="showCustomIconPicker"
@@ -48,6 +49,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    hideColorDropdown: {
+      type: Boolean,
+      default: false,
+    },
     showCustomIconPicker: Boolean,
     iconName: {
       type: String,

src/components/crown/crownConfig/crownConfig.vue

@@ -33,6 +33,7 @@
 
     <crown-dropdowns
       :dropdown-data="dropdownData"
+      :hide-color-dropdown="hideColorDropdown"
       :boundary-event-dropdown-data="boundaryEventDropdownData"
       :node="node"
       :node-registry="nodeRegistry"
@@ -138,6 +139,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    hideColorDropdown: {
+      type: Boolean,
+      default: false,
+    },
     iconName: {
       type: String,
       default: '',

src/components/inspectors/InspectorPanel.vue

@@ -3,7 +3,7 @@
     <b-col
       id="inspector"
       class="pl-0 h-100 overflow-hidden inspector-column"
-      :class="[{ 'ignore-pointer': canvasDragPosition }]"
+      :class="[{ 'ignore-pointer': canvasDragPosition, 'ai-inspector': isAiInspector }]"
       data-test="inspector-column"
     >
       <b-card
@@ -15,7 +15,7 @@
         <template #header>
           <div class="inspector-header">
             <div class="inspector-header-title">
-              {{ $t('Configuration') }}
+              {{ inspectorHeaderTitle }}
             </div>
             <button
               type="button"
@@ -79,6 +79,7 @@ Vue.component('FormDatePicker', FormDatePicker);
 Vue.component('FormMultiSelect', FormMultiSelect);
 
 export default {
+  components: { },
   props: ['nodeRegistry', 'moddle', 'processNode', 'parentHeight', 'canvasDragPosition', 'definitions'],
   data() {
     return {
@@ -103,6 +104,16 @@ export default {
     'highlightedNode.definition.assignmentRules'(current, previous) { this.handleAssignmentChanges(current, previous); },
   },
   computed: {
+    inspectorHeaderTitle() {
+      if (this.data.implementation === 'package-ai/processmaker-ai-assistant') {
+        return this.$t('AI Assistant');
+      }
+
+      return this.$t('Configuration');
+    },
+    isAiInspector() {
+      return this.data.implementation === 'package-ai/processmaker-ai-assistant';
+    },
     highlightedNode() {
       return store.getters.highlightedNodes[0];
     },

src/components/modeler/Modeler.vue

@@ -50,6 +50,8 @@
         <div ref="paper" data-test="paper" class="main-paper" />
       </b-col>
 
+      <WelcomeMessage v-if="showWelcomeMessage"/>
+
       <InspectorButton
         ref="inspector-button"
         v-if="showComponent && showInspectorButton"
@@ -174,6 +176,7 @@ 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 { isJSON } from 'lodash-contrib';
 import pull from 'lodash/pull';
 import remove from 'lodash/remove';
@@ -237,6 +240,7 @@ export default {
     ProcessmakerModelerGenericFlow,
     Selection,
     RailBottom,
+    WelcomeMessage,
     RemoteCursor,
   },
   props: {
@@ -361,9 +365,11 @@ export default {
     canvasScale(canvasScale) {
       this.paperManager.scale = canvasScale;
     },
-
   },
   computed: {
+    showWelcomeMessage() {
+      return !this.selectedNode && !this.nodes.length && !store.getters.isReadOnly;
+    },
     noElementsSelected() {
       return this.highlightedNodes.filter(node => !node.isType('processmaker-modeler-process')).length === 0;
     },
@@ -524,7 +530,7 @@ export default {
     async close() {
       this.$emit('close');
     },
-    async saveBpmn() {
+    async saveBpmn(redirectTo = null) {
       const svg = document.querySelector('.mini-paper svg');
       const css = 'text { font-family: sans-serif; }';
       const style = document.createElement('style');
@@ -533,8 +539,7 @@ export default {
       svg.appendChild(style);
       const xml = await this.getXmlFromDiagram();
       const svgString = (new XMLSerializer()).serializeToString(svg);
-
-      this.$emit('saveBpmn', { xml, svg: svgString });
+      this.$emit('saveBpmn', { xml, svg: svgString, redirectUrl: redirectTo });
     },
     borderOutline(nodeId) {
       return this.decorations.borderOutline && this.decorations.borderOutline[nodeId];
@@ -1213,6 +1218,39 @@ export default {
         });
       });
     },
+    replaceAiNode({ node, typeToReplaceWith, assetId, assetName, redirectTo }) {
+      this.performSingleUndoRedoTransaction(async() => {
+        await this.paperManager.performAtomicAction(async() => {
+          const { x: clientX, y: clientY } = this.paper.localToClientPoint(node.diagram.bounds);
+          const newNode = await this.handleDrop({
+            clientX, clientY,
+            control: { type: typeToReplaceWith },
+            nodeThatWillBeReplaced: node,
+          });
+
+          if (typeToReplaceWith === 'processmaker-modeler-task') {
+            newNode.definition.screenRef = assetId;  
+            newNode.definition.name = assetName;  
+          }
+
+          if (typeToReplaceWith === 'processmaker-modeler-script-task') {
+            newNode.definition.scriptRef = assetId;
+            newNode.definition.name = assetName;  
+          }
+
+          if (typeToReplaceWith === 'processmaker-modeler-call-activity') {
+            newNode.definition.name = assetName;
+            newNode.definition.calledElement = `ProcessId-${assetId}`;
+            newNode.definition.config = `{"calledElement":"ProcessId-${assetId}","processId":${assetId},"startEvent":"node_1","name":${assetId}}`;
+          }
+          
+          await this.removeNode(node, { removeRelationships: false });
+          this.highlightNode(newNode);
+          this.selectNewNode(newNode);
+          this.saveBpmn(redirectTo);
+        });
+      });
+    },
     replaceGenericFlow({ actualFlow, genericFlow, targetNode }) {
       this.performSingleUndoRedoTransaction(async() => {
         await this.paperManager.performAtomicAction(async() => {
@@ -1405,6 +1443,9 @@ export default {
       this.dragStart = null;
       this.isSelecting = false;
     },
+    redirect(redirectTo) {
+      window.location = redirectTo;
+    },
     enableMultiplayer() {
       this.isMultiplayer = true;
     },
@@ -1583,6 +1624,16 @@ export default {
       addWarnings: warnings => this.$emit('warnings', warnings),
       addBreadcrumbs: breadcrumbs => this.breadcrumbData.push(breadcrumbs),
     });
+
+    this.$root.$on('replace-ai-node', (data) => {
+      this.replaceAiNode(data);
+    });
+
+    window.ProcessMaker.EventBus.$on('save-changes', (redirectUrl) => {
+      if (redirectUrl) {
+        this.redirect(redirectUrl);
+      }
+    });
   },
 };
 </script>

src/components/nodes/task/task.vue

@@ -13,6 +13,7 @@
     :is-rendering="isRendering"
     :boundary-event-dropdown-data="boundaryEventDropdownData"
     :dropdown-data="dropdownData"
+    :hide-color-dropdown="hideColorDropdown"
     :showCustomIconPicker="true"
     :iconName="this.iconName"
     @set-custom-icon-name="setCustomIconName"
@@ -87,6 +88,7 @@ export default {
       ],
       boundaryEventDropdownData,
       anchorPointFunction: getRectangleAnchorPoint,
+      hideColorDropdown:false,
     };
   },
   computed: {