@processmaker/modeler 1.42.1 → 1.43.1

package/package.json

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

package/src/colorUtil.js

@@ -0,0 +1,78 @@
+
+export default class ColorUtil {
+  saturationRange = null;
+  lightnessRange = null;
+  constructor(saturation, lightness, range) {
+    this.saturationRange = this.getRange(saturation, range);
+    this.lightnessRange =  this.getRange(lightness, range);
+  }
+
+  getRange(value, range) {
+    return [Math.max(0, value - range), Math.min(value + range, 100)];
+  }
+  
+  /**
+   * 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;
+  }
+  /**
+   * 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) {
+    console.log(name);
+    const hash = this.getHashOfString(name);
+    const h = this.normalizeHash(hash, 0, 360);
+    const s = this.normalizeHash(hash, this.saturationRange[0], this.saturationRange[1]);
+    const l = this.normalizeHash(hash, this.lightnessRange[0], this.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 the HSL string color
+   * @param {String} id
+   * @returns {String}
+   */
+  generateColorHsl(id) {
+    return this.HSLtoString(this.generateHSL(id, this.saturationRange, this.lightnessRange));
+  }
+  /**
+   * Create a random color using the user name string
+   * @param {String} userName
+   * @returns {String || null}
+   */
+  randomColor(userName) {
+    return userName ? this.generateColorHsl(userName) : null;
+  }
+}

package/src/components/aiMessages/AiGenerateButton.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="mr-2">
+    <button
+      id="aiAssetButton"
+      :class="['btn px-2 ai-btn', showPopover ? 'ai-btn-open' : 'ai-btn-closed']"
+      @click="showPopover = !showPopover"
+    >
+      <inline-svg :src="proceC2Icon" class="my-auto ai-icon" />
+    </button>
+    <b-popover
+      target="aiAssetButton"
+      triggers="click"
+      :show.sync="showPopover"
+      :title="$t('Create your assets with AI')"
+      placement="auto"
+    >
+      <div class="p-3 d-flex flex-column">
+        <div class="m-2">
+          {{ $t('Create any missing assets for the process, including screens and scripts.') }}
+        </div>
+        <div class="m-2">
+          <span class="text-primary">
+            {{ $t('Optimal results need propper task naming and connections.') }}
+          </span>
+        </div>
+        <button class="m-2 btn btn-primary" @click="onGenerateAssets()">
+          {{ $t("Create Assets with AI") }}
+        </button>
+      </div>
+    </b-popover>
+  </div>
+</template>
+<script>
+import InlineSvg from 'vue-inline-svg';
+
+export default {
+  name: 'CreateAssetsButton',
+  components: {
+    InlineSvg,
+  },
+  data() {
+    return {
+      proceC2Icon: require('@/assets/proceC2.svg'),
+      showPopover: false,
+    };
+  },
+  methods: {
+    onGenerateAssets() {
+      this.$emit('onGenerateAssets');
+    },
+  },
+};
+</script>
+<style scoped>
+.ai-icon {
+  width: 22px;
+  height: 22px;
+}
+
+.ai-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+}
+
+.ai-btn-closed {
+  color: #000000;
+  background-color: #ebeef2;
+}
+
+.ai-btn-open {
+  color: #FFFFFF;
+  background-color: #6A7888;
+}
+</style>

package/src/components/aiMessages/AssetsCreatedCard.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="message mt-3">
+    <b-card no-body class="h-100 w-100" style="border-radius: 8px;">
+      <div class="h-100 d-flex pl-2 justify-content-between align-items-center">
+        <div class="col-9">
+          <div class="text-left">
+            <inline-svg :src="proceC2Icon" class="ml-0 mr-2 my-auto ai-icon" />
+            <span style="color: #556271; font-weight: 600;">{{ $t("Assets Generated Successfully") }}</span>
+          </div>
+          <div style="color: #556271; font-weight: 400;">
+            {{ $t("Check them on their corresponding tasks") }}
+          </div>
+        </div>
+        <div class="col-3 h-100 p-0 d-flex flex-column justify-content-center">
+          <button
+            class="h-100 m-0 cancelBtn btn btn-light btn-block"
+            @click="onClose()"
+          >
+            {{ $t("Close") }}
+          </button>
+        </div>
+      </div>
+    </b-card>
+  </div>
+</template>
+<script>
+import InlineSvg from 'vue-inline-svg';
+
+export default {
+  name: 'AssetsCreatedCard',
+  components: {
+    InlineSvg,
+  },
+  data() {
+    return {
+      proceC2Icon: require('@/assets/proceC2.svg'),
+    };
+  },
+  methods: {
+    onClose() {
+      this.$emit('closeAssetsCreated');
+    },
+  },
+};
+</script>
+<style scoped>
+.message {
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.10);
+  line-height: 27px;
+  word-wrap: break-word;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  right: 10%;
+  z-index: 1;
+  font-size: 100%;
+  height: 90px;
+  width: 480px;
+}
+
+.ai-icon {
+  width: 22px;
+  height: 22px;
+}
+
+.createBtn {
+  border-radius: 0px 8px 0px 0px;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.cancelBtn {
+  border-radius: 0px 0px 8px 0px;
+  border-left: 1px solid #CDDDEE;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+
+</style>

package/src/components/aiMessages/CreateAssetsCard.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="message mt-3">
+    <b-card no-body class="h-100" style="border-radius: 8px;">
+      <div class="h-100 d-flex pl-2 justify-content-between align-items-center">
+        <div class="col-9">
+          <div class="text-left">
+            <inline-svg :src="proceC2Icon" class="ml-0 mr-2 my-auto ai-icon" />
+            <span style="color: #556271; font-weight: 600;">{{ $t("Create your missing assets with AI") }}</span>
+          </div>
+          <div style="color: #556271; font-weight: 400;">
+            {{ $t("Use AI to easily produce the necessary screens and scripts to complete the process.") }}
+          </div>
+        </div>
+        <div class="col-3 h-100 p-0 d-flex flex-column justify-content-center">
+          <button
+            class="h-100 createBtn btn btn-primary btn-block"
+            @click="onCreateAssets()"
+          >
+            {{ $t("Create now") }}
+          </button>
+          <button
+            class="h-100 m-0 cancelBtn btn btn-light btn-block"
+            @click="onCancel()"
+          >
+            {{ $t("Close") }}
+          </button>
+        </div>
+      </div>
+    </b-card>
+  </div>
+</template>
+<script>
+import InlineSvg from 'vue-inline-svg';
+
+export default {
+  name: 'CreateAssetsCard',
+  components: {
+    InlineSvg,
+  },
+  data() {
+    return {
+      proceC2Icon: require('@/assets/proceC2.svg'),
+    };
+  },
+  methods: {
+    onCreateAssets() {
+      this.$emit('onGenerateAssets');
+    },
+    onCancel() {
+      this.$emit('closeCreateAssets');
+    },
+  },
+};
+</script>
+<style scoped>
+.message {
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.10);
+  line-height: 27px;
+  word-wrap: break-word;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 2%;
+  z-index: 1;
+  font-size: 100%;
+  height: 120px;
+  width: 520px;
+}
+
+.ai-icon {
+  width: 22px;
+  height: 22px;
+}
+
+.createBtn {
+  border-radius: 0px 8px 0px 0px;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.cancelBtn {
+  border-radius: 0px 0px 8px 0px;
+  border-left: 1px solid #CDDDEE;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+
+</style>

package/src/components/aiMessages/CreateAssetsFailCard.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="customAlert mx-auto mt-2">
+    <b-alert show dismissible variant="warning">
+      {{ $t("Generation of assets was not able to complete. Try again") }}
+    </b-alert>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CreateAssetsFailCard',
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped>
+.customAlert {
+  word-wrap: break-word;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  width: 600px;
+}
+</style>

package/src/components/aiMessages/GeneratingAssetsCard.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="message mt-3">
+    <b-card no-body class="h-100 w-100" style="border-radius: 8px;">
+      <div class="h-100 d-flex p-3 justify-content-between align-items-center">
+        <div>
+          <div class="text-left">
+            <inline-svg :src="proceC2Icon" class="ml-0 mr-2 my-auto ai-icon" />
+            <span class="card-text">{{ $t("Generating...") }}</span>
+          </div>
+        </div>
+        <div class="p-0">
+          <button
+            class="h-100 px-3 cancel-btn btn btn-secondary"
+            @click="onClose()"
+          >
+            {{ $t("STOP") }}
+          </button>
+        </div>
+      </div>
+    </b-card>
+  </div>
+</template>
+<script>
+import InlineSvg from 'vue-inline-svg';
+
+export default {
+  name: 'GeneratingAssetsCard',
+  components: {
+    InlineSvg,
+  },
+  data() {
+    return {
+      proceC2Icon: require('@/assets/proceC2.svg'),
+    };
+  },
+  methods: {
+    onClose() {
+      this.$emit('stopAssetGeneration');
+    },
+  },
+};
+</script>
+<style scoped>
+.message {
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.10);
+  line-height: 27px;
+  word-wrap: break-word;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  bottom: 35px; 
+  left: 35%;
+  z-index: 1;
+  font-size: 100%;
+  height: 60px;
+  width: 450px;
+}
+
+.card-text {
+  color: #556271;
+  font-weight: 400;
+}
+
+.ai-icon {
+  width: 22px;
+  height: 22px;
+}
+
+.cancel-btn {
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+
+</style>