@processmaker/modeler 1.39.9 → 1.39.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.39.9",
+  "version": "1.39.10",
   "scripts": {
     "serve": "vue-cli-service serve --mode development",
     "test:unit": "vue-cli-service test:unit",
@@ -41,6 +41,7 @@
     "@fortawesome/fontawesome-free": "^5.11.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/vue-fontawesome": "^0.1.8",
     "@processmaker/screen-builder": "2.70.0",
     "@processmaker/vue-form-elements": "0.45.0",
@@ -61,6 +62,7 @@
     "mocha-junit-reporter": "^2.0.0",
     "mustache": "^3.2.1",
     "popper.js": "^1.16.1",
+    "socket.io-client": "^4.7.2",
     "svg-inline-loader": "^0.8.2",
     "tinycolor2": "^1.4.2",
     "vue": "^2.6.12",
@@ -96,7 +98,7 @@
     "bpmnlint-loader": "^0.1.4",
     "circular-dependency-plugin": "^5.2.2",
     "copy-webpack-plugin": "^5.1.1",
-    "cypress": "10.3.0",
+    "cypress": "10.11.0",
     "eslint": "^7.32.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-jest": "^27.2.3",
@@ -119,8 +121,6 @@
     "yargs": "^14.2.3"
   },
   "peerDependencies": {
-    "@fortawesome/fontawesome-free": "^5.11.2",
-    "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/vue-fontawesome": "^0.1.8",
     "@panter/vue-i18next": "^0.15.1",

package/src/assets/corneaIcon.svg

@@ -0,0 +1,3 @@
+<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M11.9667 1.13043C11.9667 0.506113 12.4728 0 13.0971 0C13.7215 0 14.2276 0.506113 14.2276 1.13043V2.853C14.2276 3.47732 13.7215 3.98344 13.0971 3.98344C12.4728 3.98344 11.9667 3.47732 11.9667 2.853V1.13043ZM0.125 14.6969C1.95523 11.8618 7.12293 6.19169 13.1519 6.19169C19.1809 6.19169 24.3127 11.8618 26.125 14.6969V15.3967C25.802 15.9529 25.0139 17.1037 24.5639 17.6037C24.0795 18.142 23.2182 19.0033 22.8414 19.3263C23.4873 20.6361 24.8331 23.3528 25.0484 23.7403C25.3175 24.2248 24.8869 25.5706 23.5411 25.0323C22.4645 24.6016 19.4321 23.4532 18.0505 22.9329C17.1174 23.3635 14.8314 24.2033 13.1519 24.1172C11.0525 24.0095 8.8455 23.7942 5.13121 20.8873C2.15978 18.5619 0.555642 16.2579 0.125 15.3967V14.6969ZM13.1517 20.3494C16.0057 20.3494 18.3194 18.0357 18.3194 15.1817C18.3194 12.3276 16.0057 10.014 13.1517 10.014C10.2977 10.014 7.984 12.3276 7.984 15.1817C7.984 18.0357 10.2977 20.3494 13.1517 20.3494ZM22.5709 3.84806C22.1339 3.40224 21.4182 3.39514 20.9723 3.8322L19.7423 5.03809C19.2965 5.47515 19.2894 6.19087 19.7264 6.63669C20.1635 7.08251 20.8792 7.08961 21.325 6.65255L22.5551 5.44666C23.0009 5.0096 23.008 4.29388 22.5709 3.84806ZM5.42274 3.8056C4.97692 3.36854 4.26121 3.37564 3.82415 3.82146C3.38709 4.26728 3.39419 4.983 3.84001 5.42006L5.07007 6.62595C5.51589 7.06301 6.23161 7.05591 6.66867 6.61009C7.10573 6.16427 7.09863 5.44855 6.65281 5.01149L5.42274 3.8056ZM13.1513 13.1339C13.1513 14.2636 12.2354 15.1794 11.1057 15.1794C10.6291 15.1794 10.1905 15.0164 9.84278 14.7431C9.82415 14.8858 9.81455 15.0314 9.81455 15.1792C9.81455 17.0224 11.3088 18.5167 13.152 18.5167C14.9953 18.5167 16.4895 17.0224 16.4895 15.1792C16.4895 13.3359 14.9953 11.8417 13.152 11.8417C13.0037 11.8417 12.8576 11.8514 12.7143 11.8701C12.988 12.218 13.1513 12.6569 13.1513 13.1339Z" fill="#1572C2"/>
+</svg>

package/src/assets/proceC2.svg

@@ -0,0 +1,3 @@
+<svg width="133" height="114" viewBox="0 0 133 114" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M101.207 24.4512C101.931 24.9585 102.656 25.4667 103.356 26.0145C108.069 29.6702 111.773 34.4864 114.114 40.0017C117.551 48.0931 117.379 57.7133 117.219 66.6787L117.219 66.6805C117.191 68.217 117.164 69.7343 117.155 71.2214C117.152 71.8663 117.15 72.5231 117.148 73.1895C117.126 82.4292 117.098 93.5395 111.557 101.131C108.765 104.958 105.05 107.468 100.608 108.928C99.0461 109.44 97.4343 109.737 95.8233 110.034L95.8222 110.035C95.4448 110.104 95.0676 110.174 94.691 110.246C91.1321 110.93 87.5595 111.537 83.9598 111.971C80.934 112.336 77.9044 112.684 74.8689 112.965C73.124 113.126 71.3728 113.227 69.6215 113.327L69.6208 113.328L69.6202 113.328C68.9952 113.364 68.3701 113.4 67.7453 113.438C67.4794 113.453 67.2117 113.448 66.944 113.443C66.8102 113.441 66.6764 113.438 66.5428 113.438C66.5221 113.239 66.5117 113.038 66.5116 112.837C66.5114 113.038 66.4786 113.438 66.4786 113.438C66.3462 113.438 66.2135 113.441 66.0805 113.444H66.0799H66.0792H66.079C65.8117 113.45 65.5434 113.455 65.276 113.438C64.6496 113.399 64.0227 113.363 63.3957 113.327H63.3955C61.6466 113.226 59.8969 113.125 58.1524 112.965C55.1189 112.684 52.0892 112.336 49.0615 111.971C45.4637 111.537 41.8893 110.93 38.3304 110.246C37.9517 110.173 37.5722 110.103 37.1925 110.033C35.5842 109.737 33.9735 109.44 32.4151 108.928C27.9728 107.468 24.2582 104.958 21.466 101.131C15.9236 93.5375 15.8959 82.4234 15.8728 73.1824L15.8728 73.1815L15.8728 73.1806C15.8712 72.5172 15.8695 71.8635 15.8659 71.2214C15.8576 69.7288 15.8305 68.2057 15.8031 66.6633C15.6437 57.7023 15.4728 48.0885 18.9092 40.0017C21.2486 34.4838 24.9532 29.6654 29.6676 26.0087C30.3334 25.4879 31.0278 25.0007 31.7228 24.5131L31.7232 24.5129C32.0375 24.2923 32.3521 24.0716 32.6641 23.8477C32.7557 23.7824 32.8498 23.7197 32.962 23.6448L33.0436 23.5904C32.7475 22.7306 32.4571 21.8791 32.1684 21.0327L32.168 21.0314L32.1678 21.0309L32.1673 21.0294L32.1663 21.0265C31.9511 20.3956 31.7369 19.7675 31.5219 19.1408C31.2839 18.4425 31.0444 17.7473 30.8054 17.0535L30.8047 17.0516L30.8042 17.0501C30.5688 16.367 27.7924 8.24763 27.5599 7.56592C26.805 5.33819 27.8207 3.23618 30.0175 2.47003C31.5443 1.93045 33.0724 1.39873 34.6019 0.874867C35.0777 0.710729 35.5809 0.643351 36.0827 0.676622C36.5844 0.709894 37.0747 0.843156 37.5251 1.06872C37.9756 1.29428 38.3773 1.60767 38.7072 1.99081C39.037 2.37395 39.2884 2.81925 39.4469 3.30101L44.3235 17.5476C44.3653 17.6687 44.4082 17.7899 44.454 17.9189L44.4547 17.9209L44.4554 17.9228C44.4923 18.0269 44.5311 18.1362 44.5725 18.2548C51.7234 15.974 59.0241 14.9741 66.5116 14.8837C74.003 14.9741 81.3076 15.974 88.441 18.2607C88.473 18.1691 88.5035 18.083 88.5326 18.0006C88.5884 17.8426 88.6395 17.698 88.6881 17.5535C89.4664 15.2825 93.1479 5.45024 93.9263 3.18191C94.085 2.70031 94.3365 2.25519 94.6665 1.87219C94.9964 1.48919 95.3981 1.1759 95.8485 0.95037C96.2988 0.724841 96.789 0.591537 97.2906 0.55814C97.7923 0.524743 98.2955 0.591916 98.7714 0.755782C100.299 1.28489 101.828 1.8166 103.356 2.35095C105.553 3.12496 106.568 5.21909 105.813 7.44682C105.484 8.42084 102.247 16.9517 101.913 17.9181L101.913 17.9196C101.771 18.3288 101.63 18.7377 101.49 19.1467L99.97 23.5963C100.13 23.6964 100.246 23.7731 100.359 23.8536C100.64 24.0541 100.923 24.2525 101.207 24.4509L101.207 24.451L101.207 24.4512ZM104.004 91.1689C104.424 89.1887 104.714 87.1848 104.961 85.1732C105.266 82.7114 105.432 80.2341 105.459 77.7533C105.476 76.3216 105.405 74.888 105.335 73.4582L105.335 73.4578L105.335 73.4569L105.331 73.3744C105.194 70.803 104.842 68.2479 104.278 65.7365C104.019 64.457 103.537 63.2339 102.856 62.1238C101.698 60.3008 100.065 59.0749 98.1195 58.2164C96.5294 57.5339 94.8593 57.0598 93.1499 56.8059C92.2913 56.6682 91.4279 56.5621 90.5645 56.4561L90.5638 56.456C90.3316 56.4275 90.0994 56.3989 89.8673 56.3698C89.3322 56.3043 88.7975 56.2338 88.2629 56.1633C87.1935 56.0223 86.1242 55.8813 85.0514 55.7805C82.8429 55.5742 80.6402 55.3974 78.4356 55.2756C75.8956 55.1349 73.3538 55.0494 70.8119 54.964L70.8114 54.9639L70.557 54.9554C69.7345 54.9324 68.9101 54.9299 68.0864 54.9274H68.0861H68.0859L68.083 54.9273L68.0802 54.9273C67.7076 54.9262 67.3351 54.925 66.9631 54.922C66.8988 54.9211 66.835 54.9138 66.7712 54.9065C66.6862 54.8967 66.6011 54.8869 66.5155 54.8925C66.4653 54.8958 66.415 54.9002 66.3649 54.9046C66.2655 54.9133 66.1662 54.922 66.068 54.922C65.6867 54.9251 65.3054 54.9254 64.9241 54.9258H64.9237C64.1066 54.9265 63.2899 54.9272 62.4741 54.9554L62.2039 54.9645C59.6688 55.0498 57.1303 55.1352 54.5955 55.2756C52.3811 55.3974 50.1784 55.5742 47.9797 55.7805C46.9058 55.8827 45.8346 56.0235 44.7636 56.1642L44.7622 56.1644C44.2287 56.2344 43.6954 56.3045 43.1618 56.3698C42.9255 56.3995 42.6889 56.4286 42.4522 56.4577L42.45 56.458C41.5921 56.5634 40.7327 56.669 39.8792 56.8059C38.1705 57.0601 36.501 57.5342 34.9116 58.2164C32.9735 59.0749 31.3332 60.3008 30.1754 62.1238C29.4924 63.2331 29.0107 64.4565 28.7531 65.7365C28.1863 68.2483 27.8315 70.8041 27.6926 73.3764L27.6884 73.4605C27.6178 74.8902 27.5469 76.3237 27.5622 77.7553C27.5881 80.2359 27.7525 82.7131 28.0545 85.1751C28.3036 87.1868 28.5915 89.1907 29.0138 91.1709C29.403 92.9507 30.1132 94.5714 31.3488 95.9288C32.3691 97.0157 33.6141 97.8622 34.9952 98.408C36.6582 99.0758 38.3936 99.5427 40.1653 99.7989C42.3303 100.147 44.5005 100.458 46.676 100.732C48.1879 100.921 49.7076 101.046 51.2292 101.15C53.6478 101.317 56.0704 101.484 58.4929 101.577C60.2527 101.642 62.0144 101.662 63.776 101.682H63.7763C64.5039 101.691 65.2316 101.699 65.959 101.71H66.463C66.4824 101.781 66.498 102.196 66.5116 102.832C66.509 102.458 66.5253 102.083 66.5603 101.71H67.0643C67.7917 101.699 68.5191 101.691 69.2465 101.682C71.0078 101.662 72.7691 101.642 74.5303 101.577C76.9529 101.484 79.3735 101.317 81.7941 101.15C83.3138 101.046 84.8354 100.928 86.3473 100.732C88.5214 100.457 90.6917 100.146 92.858 99.7989C94.6271 99.5416 96.3599 99.0741 98.0203 98.4061C99.402 97.8602 100.648 97.0138 101.669 95.9269C102.908 94.5694 103.624 92.9487 104.004 91.1689ZM12.6117 64.137C12.6117 62.3768 12.6039 60.6173 12.5884 58.8584C12.5902 58.6391 12.5674 58.4203 12.5203 58.2062C12.205 56.8782 11.1037 56.0747 9.63851 56.0943C9.20351 56.1 8.76788 56.1081 8.33233 56.1163L8.33145 56.1163L8.33056 56.1164L8.32968 56.1164C8.00434 56.1225 7.67905 56.1286 7.35412 56.1336C7.00312 56.1344 6.6557 56.205 6.33173 56.3414C6.00776 56.4778 5.71359 56.6773 5.46603 56.9285C5.21846 57.1797 5.02235 57.4777 4.88892 57.8055C4.75548 58.1333 4.68733 58.4844 4.68835 58.8387C4.68835 58.9454 4.682 59.0528 4.67488 59.1734C4.67085 59.2416 4.66657 59.3139 4.66305 59.3927C4.46656 59.3927 4.27249 59.3909 4.08033 59.3892C3.70161 59.3857 3.3303 59.3823 2.96241 59.3927C2.6339 59.395 2.307 59.4392 1.9895 59.5243C1.43162 59.6905 0.94332 60.0373 0.599804 60.5112C0.256289 60.9851 0.0766114 61.5598 0.0884393 62.1469V62.1482C0.0884393 63.3874 0.0884393 64.6285 0.102056 65.8696C0.116325 69.4188 0.12995 72.9687 0.142922 76.5191V76.5197C0.142922 77.4782 0.142922 78.4367 0.168213 79.3952C0.165735 79.887 0.301316 80.3694 0.559253 80.7866C0.817189 81.2039 1.18693 81.5388 1.62563 81.7526C2.11666 81.9973 2.6633 82.1057 3.20953 82.0669C3.53396 82.0604 3.85839 82.0624 4.20373 82.0646H4.20447H4.20522H4.20599C4.38604 82.0657 4.57178 82.0669 4.76618 82.0669C4.76618 82.2692 4.76435 82.4624 4.76257 82.6499C4.75916 83.0086 4.75596 83.3463 4.76618 83.6856C4.78253 84.4005 5.07799 85.0799 5.58821 85.5759C6.09844 86.0719 6.78211 86.3443 7.49033 86.3337C8.28227 86.3004 9.07812 86.3102 9.87006 86.3337C10.2396 86.3423 10.607 86.2753 10.9503 86.1368C11.2935 85.9983 11.6055 85.7912 11.8674 85.5278C12.1293 85.2645 12.3358 84.9504 12.4744 84.6045C12.613 84.2585 12.6809 83.8878 12.674 83.5147C12.6457 81.3184 12.6426 79.1211 12.6395 76.9242V76.924C12.6381 75.9475 12.6367 74.971 12.6331 73.9948C12.6344 70.7049 12.6273 67.419 12.6117 64.137ZM48.3787 67.7354C46.143 67.6887 43.9438 68.3128 42.0596 69.5287C40.1754 70.7446 38.6909 72.4976 37.7941 74.5657C36.8973 76.6339 36.6285 78.9241 37.0217 81.1466C37.4149 83.3691 38.4525 85.4238 40.003 87.0506C41.5535 88.6774 43.5473 89.8032 45.7319 90.2853C47.9165 90.7675 50.1937 90.5843 52.2752 89.7591C54.3566 88.9339 56.1488 87.5037 57.4247 85.6496C58.7006 83.7955 59.4028 81.6008 59.4426 79.3435C59.5477 72.7566 54.294 67.8512 48.3787 67.7354ZM131.017 59.5243C130.703 59.44 130.38 59.3958 130.054 59.3927C129.686 59.3784 129.317 59.383 128.939 59.3878C128.746 59.3903 128.551 59.3927 128.352 59.3927C128.35 59.363 128.349 59.3341 128.348 59.3059L128.344 59.2174L128.344 59.2167C128.337 59.0765 128.331 58.9541 128.328 58.8387C128.33 58.1232 128.05 57.4363 127.55 56.9291C127.05 56.4218 126.371 56.1357 125.663 56.1336C125.335 56.1286 125.009 56.1224 124.682 56.1163C124.247 56.1081 123.812 56.1 123.376 56.0943C121.913 56.0747 120.812 56.8801 120.496 58.2062C120.448 58.4201 120.425 58.639 120.428 58.8584C120.419 60.123 120.414 61.3786 120.409 62.6353V62.6383C120.407 63.1375 120.405 63.6368 120.403 64.137L120.362 73.9869C120.359 74.9633 120.357 75.9399 120.356 76.9166V76.9195C120.353 79.1153 120.35 81.3116 120.321 83.5068C120.314 83.88 120.382 84.2506 120.521 84.5966C120.659 84.9426 120.866 85.2566 121.128 85.52C121.39 85.7833 121.702 85.9904 122.045 86.1289C122.388 86.2674 122.756 86.3344 123.125 86.3259C123.919 86.3062 124.715 86.2964 125.507 86.3259C126.215 86.337 126.899 86.0647 127.41 85.5686C127.92 85.0725 128.215 84.3928 128.231 83.6778C128.244 83.3381 128.24 82.9984 128.236 82.6391C128.233 82.452 128.231 82.2595 128.231 82.059H129.788C130.334 82.0981 130.881 81.9896 131.372 81.7447C131.81 81.531 132.181 81.1962 132.439 80.779C132.697 80.3618 132.833 79.8793 132.831 79.3873C132.85 78.6087 132.852 77.8301 132.854 77.0515V77.0501C132.855 76.8705 132.856 76.6909 132.856 76.5113L132.897 65.8618C132.897 65.3559 132.901 64.85 132.904 64.3442C132.909 63.6087 132.915 62.8736 132.909 62.1391C132.919 61.5546 132.74 60.9825 132.399 60.5104C132.057 60.0383 131.572 59.692 131.017 59.5243ZM76.5834 83.5465C78.3995 81.9001 84.8362 78.5247 93.1708 82.3285L96.5844 74.7049C84.7541 69.3057 74.8702 73.8552 71.0467 77.3215L76.5834 83.5465Z" fill="#3270BC"/>
+</svg>

package/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() {

package/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,

package/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: '',

package/src/components/iconColors.js

@@ -1,24 +1,65 @@
 import { getDefaultIconColor } from '@/components/nodeColors';
+import { library, icon, findIconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { fab } from '@fortawesome/free-brands-svg-icons';
 
 const encodeAsDataUri = (svgString) => {
   const base64 = btoa(svgString);
   return `data:image/svg+xml;base64,${base64}`;
 };
 
-/** returns a data URI encoded re-colored icon */
-const coloredIcon = (iconString, node) => {
-  const svgDocument = (new DOMParser()).parseFromString(iconString, 'text/xml');
-  const iconColor = node.definition.get('color') || getDefaultIconColor(node);
+const getColorOrDefault = (node) => {
+  return node.definition.get('color') || getDefaultIconColor(node);
+};
 
-  svgDocument.querySelectorAll('*[fill]:not([fill="none"])').forEach(svgNode => {
-    svgNode.setAttribute('fill', iconColor);
+const recolorSvg = (svgString, color) => {
+  const svgDocument = new DOMParser().parseFromString(svgString, 'text/xml');
+  const svgNodesWithFill = svgDocument.querySelectorAll('*[fill]:not([fill="none"])');
+  const svgNodesWithStroke = svgDocument.querySelectorAll('*[stroke]:not([stroke="none"])');
+
+  svgNodesWithFill.forEach((svgNode) => {
+    svgNode.setAttribute('fill', color);
   });
 
-  svgDocument.querySelectorAll('*[stroke]:not([stroke="none"])').forEach(svgNode => {
-    svgNode.setAttribute('stroke', iconColor);
+  svgNodesWithStroke.forEach((svgNode) => {
+    svgNode.setAttribute('stroke', color);
   });
 
-  return encodeAsDataUri(svgDocument.documentElement.outerHTML);
+  return svgDocument.documentElement.outerHTML;
+};
+
+const containsSvg = (str) => {
+  // Regular expression to match a URL pattern
+  const urlPattern = /^(https?:\/\/)?([\w-]+(\.[\w-]+)+)(\/[\w@?^=%&:/~+#-]*)*$/;
+
+  // Regular expression to check if the string contains '.svg'
+  const pathPattern = /\.svg/;
+  
+  // Check if the string contains an SVG root element
+  const stringPattern = /<svg[^>]*>/;
+
+  const encodedStringPattern = str.startsWith('<xml') && /<svg[^>]*>/.test(str);
+
+  // Check if the variable is a string and either a URL or contains '.svg'
+  return typeof str === 'string' && (urlPattern.test(str) || pathPattern.test(str) || stringPattern.test(str) || encodedStringPattern);
+};
+
+const coloredIcon = (iconString, node) => {
+  if (!containsSvg(iconString)) {
+    // If the input is not an SVG, add Font Awesome icons and extract the SVG
+    library.add(fas, fab);
+
+    const [prefix ] = iconString.split(' ');
+    const [, iconName] = iconString.split('-');
+    const iconDefinition = findIconDefinition({ prefix, iconName });
+    const svg = icon(iconDefinition).html;
+    iconString = svg[0];
+  }
+
+  const iconColor = getColorOrDefault(node);
+  const recoloredSvg = recolorSvg(iconString, iconColor);
+
+  return encodeAsDataUri(recoloredSvg);
 };
 
 export default coloredIcon;

package/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];
     },

package/src/components/inspectors/PreviewPanel.vue

@@ -72,7 +72,7 @@ import NoPreviewAvailable from '@/components/inspectors/NoPreviewAvailable';
 
 export default {
   props: ['nodeRegistry', 'visible'],
-  components: {NoPreviewAvailable},
+  components: { NoPreviewAvailable },
   data() {
     return {
       data: {},

package/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"
@@ -156,7 +158,7 @@
       />
     </b-row>
 
-    <RemoteCursor 
+    <RemoteCursor
       v-for="player in players"
       :cursor-color="player.color"
       :username="player.name"
@@ -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];
@@ -722,6 +727,7 @@ export default {
 
         this.parsers[bpmnType].default.push(defaultParser);
       });
+      nodeTypesStore.commit('setNodeTypes', this.nodeTypes);
     },
     registerPmBlock(pmBlockNode, customParser) {
       const defaultParser = () => pmBlockNode.id;
@@ -1028,7 +1034,7 @@ export default {
       });
     },
     handleDrop(data) {
-      const { clientX, clientY, control} = data;
+      const { clientX, clientY, control } = data;
       if (this.isMultiplayer) {
         window.ProcessMaker.EventBus.$emit('multiplayer-addNode', {
           clientX,
@@ -1063,7 +1069,7 @@ export default {
       if (selected) {
         this.highlightNode(newNode);
       }
-      
+
       await this.addNode(newNode, id, selected);
       if (!nodeThatWillBeReplaced) {
         return;
@@ -1081,7 +1087,7 @@ export default {
 
       return newNode;
     },
-    
+
     setShapeCenterUnderCursor(diagram) {
       diagram.bounds.x -= (diagram.bounds.width / 2);
       diagram.bounds.y -= (diagram.bounds.height / 2);
@@ -1100,7 +1106,7 @@ export default {
 
       const targetProcess = node.getTargetProcess(this.processes, this.processNode);
       addNodeToProcess(node, targetProcess);
-      node.setIds(this.nodeIdGenerator, id); 
+      node.setIds(this.nodeIdGenerator, id);
 
       this.planeElements.push(node.diagram);
       store.commit('addNode', node);
@@ -1122,7 +1128,6 @@ export default {
         // Select the node after it has been added to the store (does not apply to flows)
         this.selectNewNode(node);
       }
-      
 
       return new Promise(resolve => {
         setTimeout(() => {
@@ -1212,6 +1217,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() => {
@@ -1404,6 +1442,9 @@ export default {
       this.dragStart = null;
       this.isSelecting = false;
     },
+    redirect(redirectTo) {
+      window.location = redirectTo;
+    },
     enableMultiplayer() {
       this.isMultiplayer = true;
     },
@@ -1582,6 +1623,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>

package/src/components/nodes/task/shape.js

@@ -11,6 +11,9 @@ export default shapes.standard.Rectangle.extend({
   }, {
     tagName: 'image',
     selector: 'image',
+  }, {
+    tagName: 'i',
+    selector: 'icon',
   },
   markersMarkup('topLeft'),
   markersMarkup('topCenter'),
@@ -25,6 +28,7 @@ export default shapes.standard.Rectangle.extend({
     size: { width: 100, height: 60 },
     attrs: {
       'image': { 'ref-x': 4, 'ref-y': 4, ref: 'rect', width: 16, height: 16, 'data-test': 'nodeIcon' },
+      'icon': { ref: 'rect', 'ref-x': 4, 'ref-y': 4, width: 16, height: 16, 'data-test': 'nodeCustomIcon' },
       ...markersAttrs('topLeft', { 'ref-y': 4, ref: 'rect' }),
       ...markersAttrs('topCenter', { 'ref-y': 4, ref: 'rect' }),
       ...markersAttrs('topRight', { 'ref-y': 4, 'ref-x': 96, ref: 'rect' }, -1),

package/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: {

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

@@ -18,7 +18,8 @@
           @click="onClickHandler($event, item)"
           :data-test="item.type"
         >
-          <inline-svg :src="item.icon" :alt=item.label />
+          <i v-if="!containsSvg(item.icon)" :class="item.icon" class="fa-lg"/>
+          <inline-svg v-else :src="item.icon" :alt=item.label />
           <div class="control-submenu-list-label">
             {{ item.label }}
           </div>
@@ -35,7 +36,7 @@
       <div class="control-submenu-options">
         <span />
       </div>
-
+      <i v-if="!containsSvg(data.icon)" :class="data.icon" class="fa-lg"/>
       <inline-svg :src="data.icon" />
     </a>
   </popper>
@@ -44,7 +45,8 @@
     :title="$t(data.label)"
     v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
   >
-    <inline-svg :src=data.icon />
+    <i v-if="!containsSvg(data.icon)" :class="data.icon" class="fa-lg"/>
+    <inline-svg :src="data.icon" />
   </a>
 </template>
 
@@ -52,8 +54,10 @@
 import Popper from 'vue-popperjs';
 import 'vue-popperjs/dist/vue-popper.css';
 import InlineSvg from 'vue-inline-svg';
+import iconHelper from '@/mixins/iconHelper';
 
 export default ({
+  mixins: [iconHelper],
   props: {
     data: { type: Object },
     selectedItem: { type: String },

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

@@ -3,10 +3,11 @@ 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: 'NodeTypesLoop',
-  mixins: [clickAndDrop],
+  mixins: [clickAndDrop, iconHelper],
   data() {
     return {
       pinIcon,
@@ -57,13 +58,15 @@ export default {
       <template v-for="object in filteredNodes">
         <div
           class="node-types__item"
+          :class="{'node-types__item__highlight': object.type === 'processmaker-ai-assistant'}"
           :data-test="object.type"
           :key="object.id"
           @mouseover="showPin = true"
           @mouseleave="showPin = false"
           @click.self="onClickHandler($event, object)"
         >
-          <img class="node-types__item__icon" :src="object.icon" :alt="$t(object.label)">
+          <i v-if="!containsSvg(object.icon)" :class="object.icon" class="fa-lg"/>
+          <img v-else class="node-types__item__icon" :src="object.icon" :alt="$t(object.label)">
           <span>{{ $t(object.label) }}</span>
           <img
             v-if="nodeTypeAlreadyPinned(object, object.type)"
@@ -88,13 +91,15 @@ export default {
         <template v-for="pinnedObject in pinnedObjects">
           <div
             class="node-types__item"
+            :class="{'node-types__item__highlight': pinnedObject.type === 'processmaker-ai-assistant'}"
             :data-test="pinnedObject.type"
             :key="pinnedObject.id"
             @mouseover="showPin = true"
             @mouseleave="showPin = false"
             @click.stop="onClickHandler($event, pinnedObject)"
           >
-            <img class="node-types__item__icon" :src="pinnedObject.icon" :alt="$t(pinnedObject.label)">
+            <i v-if="!containsSvg(pinnedObject.icon)" :class="pinnedObject.icon" class="fa-lg"/>
+            <img v-else class="node-types__item__icon" :src="pinnedObject.icon" :alt="$t(pinnedObject.label)">
             <span>{{ $t(pinnedObject.label) }}</span>
             <img
               :src="pinFillIcon"
@@ -110,13 +115,15 @@ export default {
         <template v-for="nodeType in unpinnedObjects">
           <div
             class="node-types__item"
+            :class="{'node-types__item__highlight': nodeType.type === 'processmaker-ai-assistant'}"
             :data-test="nodeType.type"
             :key="nodeType.id"
             @mouseover="showPin = true"
             @mouseleave="showPin = false"
             @click.stop="onClickHandler($event, nodeType)"
           >
-            <img class="node-types__item__icon" :src="nodeType.icon" :alt="$t(nodeType.label)">
+            <i v-if="!containsSvg(nodeType.icon)" :class="nodeType.icon" class="fa-lg"/>
+            <img v-else class="node-types__item__icon" :src="nodeType.icon" :alt="$t(nodeType.label)">
             <span>{{ $t(nodeType.label) }}</span>
             <img
               :src="pinIcon"
@@ -154,6 +161,9 @@ export default {
       width: 1.5rem;
       height: 1.5rem;
     }
+    &__highlight {
+      background-color: #FFF4D3;
+    }
     span {
       margin-left: 0.8rem;
       font-size: 13px;

package/src/components/welcome/WelcomeMessage.vue

@@ -0,0 +1,82 @@
+<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.")
+        }}
+      </div>
+      <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" />
+        </div>
+      </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>
+import InlineSvg from 'vue-inline-svg';
+
+export default {
+  name: 'WelcomeMessage',
+  components: {
+    InlineSvg,
+  },
+  data() {
+    return {
+      proceC2Icon: require('@/assets/proceC2.svg'),
+    };
+  },
+  methods: {},
+};
+</script>
+<style>
+.message {
+  color: #5f666d;
+  font-style: italic;
+  line-height: 27px;
+  word-wrap: break-word;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0;
+  border: 0 none;
+  z-index: 1;
+  font-size: 110%;
+  font-weight: 100;
+  height: calc(100% - 130px);
+}
+
+.hyphen {
+  transform: rotate(0deg);
+  transform-origin: 0 0;
+  border: 1px #5f666d solid;
+  width: 30px;
+  margin: 5px 13px 0px 13px;
+}
+.new-process-btn {
+  color: #0872C2;
+  border-color: #0872C2;
+  background-color: #ffffff;
+  box-shadow: 0 3px 9px -3px #c2c2c2;
+}
+
+.new-process-btn:hover {
+  background-color: #edf7ff;
+  color: #0872C2;
+  border-color: #0872C2;
+}
+
+.ai-icon {
+  width: 22px;
+  height: 22px;
+}
+</style>