Epic/FOUR-9674: AI in modeler

src/components/modeler/Modeler.vue

@@ -50,7 +50,9 @@
         <div ref="paper" data-test="paper" class="main-paper" />
       </b-col>
 
-      <WelcomeMessage v-if="showWelcomeMessage"/>
+      <WelcomeMessage
+        v-if="showWelcomeMessage"
+      />
 
       <InspectorButton
         ref="inspector-button"
@@ -522,7 +524,7 @@ export default {
     async close() {
       this.$emit('close');
     },
-    async saveBpmn(redirectTo = null) {
+    async saveBpmn(redirectTo = null, id = null) {
       const svg = document.querySelector('.mini-paper svg');
       const css = 'text { font-family: sans-serif; }';
       const style = document.createElement('style');
@@ -531,7 +533,7 @@ export default {
       svg.appendChild(style);
       const xml = await this.getXmlFromDiagram();
       const svgString = (new XMLSerializer()).serializeToString(svg);
-      this.$emit('saveBpmn', { xml, svg: svgString, redirectUrl: redirectTo });
+      this.$emit('saveBpmn', { xml, svg: svgString, redirectUrl: redirectTo, nodeId: id });
     },
     borderOutline(nodeId) {
       return this.decorations.borderOutline && this.decorations.borderOutline[nodeId];
@@ -1213,7 +1215,7 @@ export default {
       this.performSingleUndoRedoTransaction(async() => {
         await this.paperManager.performAtomicAction(async() => {
           const { x: clientX, y: clientY } = this.paper.localToClientPoint(node.diagram.bounds);
-          const newNode = await this.handleDrop({
+          const newNode = await this.handleDropProcedure({
             clientX, clientY,
             control: { type: typeToReplaceWith },
             nodeThatWillBeReplaced: node,
@@ -1232,13 +1234,14 @@ export default {
           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}}`;
+            newNode.definition.config = `{"calledElement":"ProcessId-${assetId}","processId":${assetId},"startEvent":"node_1","name":"${assetName}"}`;
+            redirectTo = `${redirectTo}/${newNode.id}`;
           }
 
           await this.removeNode(node, { removeRelationships: false });
           this.highlightNode(newNode);
           this.selectNewNode(newNode);
-          this.saveBpmn(redirectTo);
+          this.saveBpmn(redirectTo, newNode.id);
         });
       });
     },

src/components/welcome/WelcomeMessage.vue

@@ -1,24 +1,32 @@
 <template>
   <div class="message d-flex flex-column w-100 align-items-center">
-    <div class="d-flex justify-content-center align-items-center flex-column justify-content-center">
-      <div class="w-100">
-        {{
-          $t("To start, click and drop objects to build the process you like.")
-        }}
+    <b-button
+      class="new-process-btn d-flex flex-row px-2 py-4 align-items-center"
+      @click="redirectToAiProcess()"
+    >
+      <div class="d-flex justify-content-between">
+        <inline-svg :src="proceC2Icon" class="mx-3 my-auto ai-icon" />
+        <div class="mr-4 text-left">
+          <div class="h5 m-0">{{ aiProcessButtonTitle }}</div>
+          <div class="text-secondary font-weight-light small">
+            {{ aiProcessButtonSubtitle }}
+          </div>
+        </div>
       </div>
+      <span class="fa fa-chevron-right" />
+    </b-button>
+    <div class="d-flex justify-content-center align-items-center flex-column justify-content-center">
       <div class="justify-content-center align-items-center w-100 text-center my-4">
         <div class="text-align-center d-flex text-center justify-content-center align-items-center">
-          <div class="hyphen" /> 
-          or 
+          <div class="hyphen" />
+          {{ $t("or") }}
           <div class="hyphen" />
         </div>
       </div>
+      <div class="w-100">
+        {{ $t("Click and drop objects to build the process you like.") }}
+      </div>
     </div>
-    <b-button class="new-process-btn d-flex flex-row p-2 align-items-center" @click="onClick">
-      <inline-svg :src="proceC2Icon" class="mx-2 ai-icon" />
-      <div class="mr-3">{{ $t("Kick-start a new process with our generative AI") }}</div>
-      <span class="fa fa-chevron-right" />
-    </b-button>
   </div>
 </template>
 <script>
@@ -32,9 +40,59 @@ export default {
   data() {
     return {
       proceC2Icon: require('@/assets/proceC2.svg'),
+      session: {
+        date: '12/12/12',
+        time: '12:12:12',
+        username: 'admin',
+      },
+      processId: window.ProcessMaker?.modeler?.process?.id,
     };
   },
-  methods: {},
+  computed: {
+    promptSessionId() {
+      // 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.processId === this.processId && item.server === window.location.host);
+
+      if (item) {
+        return item.promptSessionId;
+      }
+
+      return '';
+    },
+    aiProcessButtonTitle() {
+      if (!this.promptSessionId || this.promptSessionId === '') {
+        return this.$t('Create a process with AI');
+      }
+      return this.$t('Continue AI session');
+    },
+    aiProcessButtonSubtitle() {
+      if (!this.promptSessionId || this.promptSessionId === '') {
+        return this.$t('Kick-start an AI generated process');
+      }
+      return this.$t('Last session by:') + ' ' + this.session.username + ' | ' + this.session.date + ' | ' + this.session.time;
+    },
+  },
+  mounted() {
+    if (!localStorage.getItem('promptSessions') || localStorage.getItem('promptSessions') === 'null') {
+      localStorage.setItem('promptSessions', JSON.stringify([]));
+    }
+  },
+  methods: {
+    getPromptSessionForProcess() {
+      
+    },
+    redirectToAiProcess() {
+      const processId = window.ProcessMaker.modeler.process.id ?? null;
+      if (processId) {
+        const url = `/package-ai/processes/create/${processId}/${processId}`;
+        window.location = url;
+      }
+    },
+  },
 };
 </script>
 <style>
@@ -63,10 +121,11 @@ export default {
   margin: 5px 13px 0px 13px;
 }
 .new-process-btn {
-  color: #0872C2;
-  border-color: #0872C2;
+  color: #0872c2;
+  border-color: #0872c2;
   background-color: #ffffff;
   box-shadow: 0 3px 9px -3px #c2c2c2;
+  border-radius: 13px;
 }
 
 .new-process-btn:hover {
@@ -75,6 +134,11 @@ export default {
   border-color: #0872C2;
 }
 
+.ai-icon {
+  width: 22px;
+  height: 22px;
+}
+
 .ai-icon {
   width: 22px;
   height: 22px;