@mixd-id/web-scaffold 0.1.230406359 → 0.1.230406361

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406359",
+  "version": "0.1.230406361",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/widgets/UserActionBuilder/UserActionCondition.vue

@@ -0,0 +1,96 @@
+<template>
+	<Modal ref="modal"
+         width="380"
+         height="420">
+	  <template v-slot:head>
+	    <div class="relative p-6">
+	      <h3>Condition</h3>
+	      <div class="absolute top-0 right-0 p-2">
+	        <button type="button" class="p-2" @click="close">
+	          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+	            <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+	          </svg>
+	        </button>
+	      </div>
+	    </div>
+	  </template>
+	  <template v-slot:foot>
+	    <div class="p-6">
+        <Button class="w-[90px]" @click="apply">OK</Button>
+	    </div>
+	  </template>
+	  <div class="flex-1 p-6">
+
+      <div class="flex flex-col gap-6">
+
+        <div>
+          <label>Key</label>
+          <Dropdown v-model="instance.key" class="mt-1">
+            <option value="text">Text</option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <label>Operator</label>
+          <Dropdown v-model="instance.op" class="mt-1">
+            <option value="=">Equal</option>
+            <option value="intent">Intent</option>
+            <option value="extractVariables">Extract Information</option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <label>Value</label>
+          <Textarea v-model="instance.value" rows="3" class="mt-1"/>
+        </div>
+
+      </div>
+
+	  </div>
+	</Modal>
+</template>
+
+<script>
+
+export default{
+
+	inject: [ 'socketEmit2' ],
+
+	data(){
+		return {
+      callback: null,
+      instance: null,
+		}
+	},
+
+	methods: {
+
+    apply(){
+      if(typeof this.callback === 'function')
+        this.callback(this.instance)
+      this.close()
+    },
+
+		open(instance, callback){
+      this.instance = instance
+      this.callback = callback
+      this.$refs.modal.open()
+		},
+
+		close(){
+      this.$refs.modal.close()
+		},
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/UserActionBuilder/UserActionConsole.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="h-[200px] panel-400 border-[1px] border-text-50 flex flex-col relative">
+
+    <div class="flex-1 overflow-y-auto flex flex-col-reverse px-3 gap-2">
+      <div v-for="_message in reversedMessages"
+           class="p-1 bg-text-50 self-start"
+           :class="_message.direction === 2 ? 'ml-5' : ''">
+        {{ _message.body }}
+      </div>
+    </div>
+
+    <div class="absolute top-0 right-0 p-3">
+      <button type="button" class="text-primary" @click="clear">Clear</button>
+    </div>
+
+    <div class="p-2 flex flex-row gap-2">
+      <Textbox v-model="message.body" class="flex-1" />
+      <Button class="px-4" @click="send">Send</Button>
+      <Button class="px-3" variant="secondary" @click="reset">Reset</Button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'test-message', 'test-reset' ],
+
+  computed: {
+
+    reversedMessages(){
+      return this.messages.slice().reverse()
+    }
+
+  },
+
+  data(){
+    return {
+      message: {},
+      messages: []
+    }
+  },
+
+  methods: {
+
+    addMessage(message){
+      this.messages.push(message)
+    },
+
+    clear(){
+      this.messages = []
+    },
+
+    reset(){
+      this.$emit('test-reset')
+    },
+
+    send(){
+      this.$emit('test-message', this.message)
+      this.messages.push(this.message)
+      this.message = {}
+    },
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/UserActionBuilder/UserActionItem.vue

@@ -0,0 +1,270 @@
+<template>
+	<div v-if="item"
+       class="flex flex-row items-start relative">
+
+    <div ref="outer" class="flex-1 flex flex-row items-start">
+      <div class="flex flex-col self-stretch" :class="debug ? '' : ''">
+
+        <div class="flex flex-row items-center">
+          <div class="bg-primary-300 h-[1px]" :style="{ width:`${size[2]}px` }"></div>
+
+          <div :style="{ width:`${size[0]}px` }"
+               ref="item"
+               @mousedown="mouseDown"
+               @mouseover="hoverMouseOver">
+            <div class="rounded-xl p-3 border-[1px] flex relative overflow-hidden"
+                 :class="isSelected ? 'border-primary bg-base-500' : 'border-primary-300 bg-base-400'"
+                 @click="$emit('select', item)" :style="{  }">
+              <div class="flex-1 flex flex-row">
+                <div class="flex-1 cursor-default whitespace-nowrap overflow-hidden text-ellipsis">
+                  {{ item.name }}
+                </div>
+                <button v-if="isSelected && removable" class="text-primary" type="button" @click="$emit('remove')">
+                  <svg width="16" height="16" class="fill-text-200 hover:fill-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256C397.4 512 512 397.4 512 256S397.4 0 256 0zM336.1 303c9.375 9.375 9.375 24.56 0 33.94c-9.381 9.381-24.56 9.373-33.94 0L256 289.9l-47.03 47.03c-9.381 9.381-24.56 9.373-33.94 0c-9.375-9.375-9.375-24.56 0-33.94l47.03-47.03L175 208.1c-9.375-9.375-9.375-24.56 0-33.94s24.56-9.375 33.94 0L256 222.1l47.03-47.03c9.375-9.375 24.56-9.375 33.94 0s9.375 24.56 0 33.94l-47.03 47.03L336.1 303z"/></svg>
+                </button>
+              </div>
+
+              <div v-if="item.isFallback" :class="$style.isFallback"></div>
+            </div>
+          </div>
+
+          <div v-if="hasChildren && (item.items ?? []).length < 1 && !item.isFallback"
+               class="flex flex-row items-center"
+               :style="{ width:`${size[2] * 1.2}px` }">
+            <div class="flex-1 bg-primary-300 h-[1px]"></div>
+            <button type="button"
+                    @click="addItem(item)">
+              <svg width="16" height="16" class="fill-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256C397.4 512 512 397.4 512 256S397.4 0 256 0zM352 280H280V352c0 13.2-10.8 24-23.1 24C242.8 376 232 365.2 232 352V280H160C146.8 280 136 269.2 136 256c0-13.2 10.8-24 24-24H232V160c0-13.2 10.8-24 24-24C269.2 136 280 146.8 280 160v72h72C365.2 232 376 242.8 376 256C376 269.2 365.2 280 352 280z"/></svg>
+            </button>
+          </div>
+          <div v-else-if="hasChildren && !item.isFallback" class="flex flex-row items-center" :style="{ width:`${size[2]}px` }">
+            <div class="flex-1 bg-primary-300 h-[1px]"></div>
+          </div>
+        </div>
+
+        <div class="flex-1 flex flex-row items-start">
+          <div :style="{ width:`${size[2]}px` }"></div>
+
+          <div v-if="useAdd" class="self-stretch flex flex-col items-center" :style="{ width:`${size[0]}px`, height:`${size[2] * 1.2}px` }">
+            <div class="flex-1 w-[1px] bg-primary-300"></div>
+            <button type="button" v-if="useAdd" @click="$emit('add')">
+              <svg width="16" height="16" class="fill-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256C397.4 512 512 397.4 512 256S397.4 0 256 0zM352 280H280V352c0 13.2-10.8 24-23.1 24C242.8 376 232 365.2 232 352V280H160C146.8 280 136 269.2 136 256c0-13.2 10.8-24 24-24H232V160c0-13.2 10.8-24 24-24C269.2 136 280 146.8 280 160v72h72C365.2 232 376 242.8 376 256C376 269.2 365.2 280 352 280z"/></svg>
+            </button>
+            <div class="flex-1"></div>
+          </div>
+          <div v-else class="flex flex-col items-center" :style="{ width:`${size[0]}px`, height:`${size[2]}px` }">
+
+          </div>
+
+          <div :style="{ width:`${size[2]}px` }"></div>
+        </div>
+
+      </div>
+
+      <div v-if="hasChildren" class="flex flex-col relative" :class="debug ? '' : ''">
+
+        <UserActionItem v-for="(subItem, idx) in item.items"
+                        :config="config"
+                        :item="subItem"
+                        :level="level + 1"
+                        :index="idx"
+                        :parent="item.items"
+                        :isLast="idx === item.items.length - 1"
+                        @select="(item) => $emit('select', item)"
+                        @remove="item.items.splice(idx, 1)"
+                        :useAdd="idx === (item.items ?? []).length - 1"
+                        @add="addItem(item)" />
+      </div>
+    </div>
+
+    <div v-if="level > 0 && index > 0" class="absolute w-[1px] bg-primary-300" :style="vBorder0"></div>
+    <div v-if="level > 0 && !isLast" class="absolute w-[1px] bg-primary-300" :style="vBorder"></div>
+
+	</div>
+</template>
+
+<script>
+
+import md5 from "md5";
+
+let dragged = null
+let guide1 = null
+
+export default{
+
+  computed: {
+
+    debug(){
+      return this.item.name === 'Tea'
+    },
+
+    isSelected(){
+      return this.config.selectedUid === this.item.uid
+    },
+
+    vBorder(){
+      let bottom = `${(this.size[2] * 1.2) + (this.size[1] * .5)}px`
+
+      return {
+        top:'20px',
+        bottom: 0
+      }
+    },
+
+    vBorder0(){
+      return {
+        top: 0,
+        height: '20px'
+      }
+    }
+
+  },
+
+  emits: [ 'add', 'remove', 'select' ],
+
+  methods: {
+
+    addItem(item){
+      if(!Array.isArray(item.items))
+        item.items = []
+
+      const uid = md5(Date.now())
+
+      item.items.push({
+        name: 'Untitled',
+        parentId: item.id,
+        uid,
+        enabled: true
+      })
+
+      this.config.selectedUid = uid
+    },
+
+    hoverMouseOver(e){
+      if(!dragged) return
+
+      const from = this.parent.indexOf(dragged.item)
+      const to = this.parent.indexOf(this.item)
+      this.parent.splice(to, 0, this.parent.splice(from, 1)[0]);
+    },
+
+    mouseDown(e){
+      if(!this.$el || this.$el.nodeType !== 1) return
+
+      e.preventDefault()
+
+      const startY = e.clientY
+
+      dragged = {
+        item: this.item,
+        parent: this.parent,
+        startY: e.clientY,
+        index: this.parent?.indexOf(this.item)
+      }
+
+      const mouseMove = (e) => {
+        const distanceY = e.clientY - startY
+
+        if(!dragged.cloned && Math.abs(distanceY) > 10){
+          const cloned = this.$refs.outer.cloneNode(true)
+          cloned.style.position = 'fixed'
+          cloned.style.width = this.$refs.item.clientWidth + "px"
+          cloned.style.pointerEvents = 'none'
+          cloned.style.opacity = '0.5'
+          document.body.appendChild(cloned)
+
+          dragged.cloned = cloned
+        }
+
+        if(dragged.cloned){
+          dragged.cloned.style.left = (e.clientX + 3) + "px"
+          dragged.cloned.style.top = (e.clientY + 3) + "px"
+        }
+
+        dragged.clientY = e.clientY
+      }
+
+      const mouseUp = (e) => {
+        if(dragged?.cloned){
+          document.body.removeChild(dragged.cloned)
+        }
+
+        window.removeEventListener('mousemove', mouseMove)
+        window.removeEventListener('mouseup', mouseUp)
+
+        if(guide1 && guide1.parentNode){
+          guide1.parentNode.removeChild(guide1)
+        }
+
+        dragged = null
+      }
+
+      const keyUp = (e) => {
+        if(e.keyCode === 27){
+          if(dragged && this.parent){
+            const from = this.parent.indexOf(this.item)
+            const to = this.parent.indexOf(dragged.item)
+            this.parent.splice(to, 0, this.parent.splice(from, 1)[0]);
+          }
+
+          mouseUp(e)
+        }
+      }
+
+      window.addEventListener('mousemove', mouseMove)
+      window.addEventListener('mouseup', mouseUp)
+      window.addEventListener('keyup', keyUp)
+    },
+
+  },
+
+  props: {
+
+    config: Object,
+
+    index: {
+      type: Number,
+      default: 0
+    },
+
+    isLast: Boolean,
+
+    item: Object,
+
+    level: {
+      type: Number,
+      default: 0
+    },
+
+    useAdd: undefined,
+
+    parent: Array,
+
+    removable: {
+      type: Boolean,
+      default: true
+    },
+
+    size: {
+      type: Array,
+      default: [ 160, 60, 24 ]
+    },
+
+    hasChildren: {
+      type: Boolean,
+      default: true
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.isFallback{
+  @apply absolute bottom-0 left-0 right-0 h-[4px] bg-primary;
+}
+
+</style>

package/src/widgets/UserActionBuilder/UserActionOutput.vue

@@ -0,0 +1,152 @@
+<template>
+	<Modal :state="state"
+         :hash="hash"
+         ref="modal"
+         :width="width"
+         :height="height">
+
+	  <template v-slot:head>
+	    <div class="relative p-6">
+	      <h3 v-if="!instance.type">{{ $t('Select Type') }}</h3>
+	      <h3 v-else>{{ $t(instance.text) }}</h3>
+	      <div class="absolute top-0 right-0 p-2">
+	        <button type="button" class="p-2" @click="close">
+	          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+	            <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+	          </svg>
+	        </button>
+	      </div>
+	    </div>
+	  </template>
+
+	  <template v-slot:foot>
+	    <div v-if="instance.type" class="p-6 flex flex-row gap-4 items-end">
+        <div class="flex-1">
+          <Button class="w-[100px]" :state="canApply ? 1 : -1" @click="apply">
+            {{ $t('OK') }}
+          </Button>
+        </div>
+        <div class="flex flex-row gap-2 items-center">
+          <Switch v-model="instance.params.passthrough" />
+          <label>Passthrough</label>
+        </div>
+	    </div>
+	  </template>
+
+	  <div class="flex-1">
+
+      <div v-if="!instance.type" class="flex-1">
+
+        <div class="flex flex-col divide-text-50 border-t-[1px] border-b-[1px] border-text-50">
+          <button v-for="output in outputs"
+                  type="button"
+                  class="p-3 px-6 text-left"
+                  @click="Object.assign(instance, output)">
+            {{ output.text }}
+          </button>
+        </div>
+
+      </div>
+
+      <div v-else>
+        <component :is="componentName" :output="instance"></component>
+      </div>
+
+    </div>
+
+	</Modal>
+</template>
+
+<script>
+
+import Modal from "../../components/Modal.vue"
+import {capitalize} from "../../utils/helpers.mjs";
+import {defineAsyncComponent} from "vue";
+
+export default{
+
+  components: {
+    Modal,
+    UserActionOutputReply: defineAsyncComponent(() => import('./UserActionOutputReply.vue')),
+  },
+
+  computed: {
+
+    canApply(){
+      return this.instance?.type
+    },
+
+    componentName(){
+      return this.instance._component?.name ?
+          this.instance._component?.name :
+          `UserActionOutput${capitalize(this.instance?.type)}`
+    },
+
+    height(){
+      return this.instance?.type ? 480 : 300
+    },
+
+    width(){
+      return this.instance?.type ? 420 : 300
+    },
+
+  },
+
+  emits: [ 'apply' ],
+
+	inject: [ 'socketEmit2' ],
+
+  props: {
+    state: Boolean,
+    hash: String,
+
+    outputs: Array
+  },
+
+	data(){
+		return {
+      id: null,
+      instance: null,
+		}
+	},
+
+	methods: {
+
+    apply(){
+      this.close()
+      this.$emit('apply', this.instance, this.id)
+    },
+
+		create(){
+      this.instance = {
+        params: {
+          passthrough: true
+        }
+      }
+      this.id = null
+      this.$refs.modal.open()
+		},
+
+		open(instance, id){
+      this.instance = instance
+      this.id = id
+      this.$refs.modal.open()
+		},
+
+		close(){
+      this.$refs.modal.close()
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/UserActionBuilder/UserActionOutputDelay.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="p-5">
+    <label>Delay</label>
+    <div class="flex flex-row gap-2 mt-2">
+      <Textbox v-model.number="output.params.value" maxlength="4" />
+      <Dropdown v-model="output.params.unit">
+        <option value="second">Seconds</option>
+        <option value="minute">Minutes</option>
+        <option value="hour">Hour</option>
+      </Dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default{
+
+  props: {
+
+    output: Object
+
+  }
+
+}
+
+</script>

package/src/widgets/UserActionBuilder/UserActionOutputLog.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="p-5">
+    <label>Text</label>
+    <TextWithTag v-model="output.params.text" :items="tagItems" />
+  </div>
+</template>
+
+<script>
+
+export default{
+
+  props: {
+
+    output: Object,
+
+    tagItems: {
+      type: Array,
+      default: () => ([
+        { text:'Name', value:'{message.inbox.name}' },
+        { text:'Text', value:'{message.body}' }
+      ])
+    }
+
+  }
+
+}
+
+</script>

package/src/widgets/UserActionBuilder/UserActionOutputReply.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="p-6 pt-0 flex flex-col gap-5">
+
+    <div class="flex justify-center">
+      <Tabs :items="tabItems" v-model="output.params.type" />
+    </div>
+
+    <div v-if="output.params.type === 1">
+      <div>
+        <label class="text-text-400">Image</label>
+        <Image :src="output.params.imageUrl"
+               :editable="true"
+               @change="(base64, file) => output.params.imageUrl = file"
+               ref="image"
+               class="w-full min-h-[100px] border-[1px] border-text-200 bg-base-500 rounded-lg flex">
+          <template #empty>
+            <div class="flex-1 flex items-center justify-center">
+              <button type="button" @click="$refs.image.edit()">
+                <svg width="24" height="24" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M630.8 469.1l-55.95-43.85C575.3 422.2 575.1 419.2 575.1 416l.0034-320c0-35.35-28.65-64-64-64H127.1C113.6 32 100.4 36.98 89.78 45.06L38.81 5.113C28.34-3.058 13.31-1.246 5.109 9.192C-3.063 19.63-1.235 34.72 9.187 42.89L601.2 506.9C605.6 510.3 610.8 512 615.1 512c7.125 0 14.17-3.156 18.91-9.188C643.1 492.4 641.2 477.3 630.8 469.1zM223.1 149.6l-64.29-50.39C164.2 97.15 169.9 96 175.1 96c26.51 0 48 21.49 48 48C223.1 145.9 223.4 147.7 223.1 149.6zM331.2 234.3l23.45-35.18C357.7 194.7 362.7 192 368 192s10.35 2.672 13.31 7.125l103.9 155.9L331.2 234.3zM145.1 416c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C206.1 290.4 210.9 288 216 288s9.916 2.441 12.93 6.574l32.46 44.51l16.43-24.65L63.99 146.8L63.99 416c0 35.35 28.65 64 64 64h361.1l-81.66-64H145.1z"/></svg>
+              </button>
+            </div>
+          </template>
+        </Image>
+      </div>
+
+      <div>
+        <label class="text-text-400">Text</label>
+        <TextWithTag rows="5" v-model="output.params.text" :items="replyTextItems" />
+      </div>
+
+      <div>
+        <label class="text-text-400">Footer</label>
+        <Textbox v-model="output.params.footer" maxlength="50" />
+      </div>
+
+      <div>
+        <div class="flex flex-row gap-2 items-center">
+          <label class="flex-1 text-text-400">Buttons</label>
+          <button type="button" class="text-primary" @click="$array(output.params, 'buttons').push({})">
+            {{ $t('Add Button') }}
+          </button>
+        </div>
+        <ListItem :items="output.params.buttons"
+                  @reorder="(from, to) => { output.params.buttons.splice(to, 0, output.params.buttons.splice(from, 1)[0]); }">
+          <template v-slot="{ item, index }">
+            <div class="flex flex-row items-center gap-3">
+              <div data-reorder>
+                <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+              </div>
+              <div class="flex-1 flex flex-row gap-2 items-center">
+                <Textbox class="w-[100px]" placeholder="Text" v-model="item.text" />
+              </div>
+              <div>
+                <button type="button" @click="output.params.buttons.splice(index, 1)">
+                  <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+                </button>
+              </div>
+            </div>
+          </template>
+        </ListItem>
+      </div>
+    </div>
+
+    <div v-else>
+
+      <div>
+        <label class="text-text-400">Template</label>
+        <Dropdown v-model="output.params.value">
+          <option value="hello_world">hello_world</option>
+          <option value="welcome1">welcome1</option>
+          <option value="select_beverages">select_beverages</option>
+          <option value="test7">test7</option>
+        </Dropdown>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+export default{
+
+  computed: {
+
+    replyTextItems(){
+      return [
+        { text:"Mobile Number", value:"{mobileNumber}" },
+        { text:"Name", value:"{name}" },
+        { text:"Created At", value:"{createdAt}" },
+      ]
+    },
+
+    tabItems(){
+      return [
+        { text:"Text", value:1 },
+        { text:"Template", value:2 },
+      ]
+    }
+
+  },
+
+  props: {
+
+    output: Object
+
+  }
+
+}
+
+</script>

package/src/widgets/UserActionBuilder/UserActionProps.vue

@@ -0,0 +1,211 @@
+<template>
+  <div v-if="instance" class="p-6 flex flex-col gap-6" @dblclick="log(instance)">
+
+    <div class="flex flex-row gap-5">
+      <div class="flex-1">
+        <label>Name</label>
+        <Textbox v-model="instance.name" class="mt-2"/>
+      </div>
+      <div>
+        <label>Enabled</label>
+        <Switch v-model="instance.enabled" class="mt-2"/>
+      </div>
+    </div>
+
+    <div>
+      <label>Type</label>
+      <div class="flex flex-row gap-3 mt-2">
+        <Dropdown v-model.number="instance.type" class="w-full">
+          <option :value="1">Event</option>
+          <option :value="2">Time Based</option>
+          <option :value="3">Fallback</option>
+        </Dropdown>
+      </div>
+    </div>
+
+    <div>
+      <label>Event</label>
+      <div class="flex flex-row gap-3 mt-2">
+        <Dropdown v-model.number="instance.key" class="w-full">
+          <option value="onNewMessage">On New Message</option>
+        </Dropdown>
+      </div>
+    </div>
+
+    <div v-if="instance.type === 1" class="flex flex-col gap-6">
+
+      <div>
+        <div class="flex flex-row items-center gap-2">
+          <label class="flex-1">Condition</label>
+          <button type="button" class="text-primary"
+                  @click="$refs.userActionCondition.open({}, addCondition)">
+            Add Condition
+          </button>
+        </div>
+        <ListItem :items="instance.conditions"
+                  class="mt-2 bg-transparent"
+                  container-class="flex flex-col gap-2"
+                  @reorder="(from, to) => { instance.conditions.splice(to, 0, instance.conditions.splice(from, 1)[0]); }">
+          <template v-slot="{ item, index }">
+            <div class="flex flex-row items-center gap-2 px-3 bg-base-500 p-2">
+              <div data-reorder>
+                <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+              </div>
+
+              <div class="flex-1 flex flex-row gap-2" @click="$refs.userActionCondition.open(item, _ => Object.assign(item, _))">
+                {{ item }}
+              </div>
+
+              <div>
+                <button type="button" @click="instance.conditions.splice(index, 1)">
+                  <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+                </button>
+              </div>
+            </div>
+          </template>
+
+          <template #empty>
+            <div class="flex justify-center p-2 bg-base-300 rounded-xl border-[1px] rounded-xl border-text-200">
+              <p class="text-text-400">{{ $t('All conditions') }}</p>
+            </div>
+          </template>
+        </ListItem>
+      </div>
+
+    </div>
+
+    <div>
+      <div class="flex flex-row items-center gap-2">
+        <label class="flex-1">Output</label>
+        <button type="button" class="text-primary" @click="$refs.userActionOutput.create()">Add Output</button>
+      </div>
+      <ListItem :items="instance.outputs"
+                class="mt-2 border-[1px] rounded-xl border-text-200"
+                container-class="divide-y divide-text-200"
+                @reorder="(from, to) => { instance.outputs.splice(to, 0, instance.outputs.splice(from, 1)[0]); }">
+        <template v-slot="{ item, index }">
+          <div class="flex flex-row items-center gap-3 px-3">
+            <div data-reorder>
+              <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+            </div>
+            <div class="flex-1 p-2 flex flex-row items-center gap-2" @click="$refs.userActionOutput.open(item, index)">
+              <p>{{ item.text }}</p>
+              <p class="flex-1 text-text-300 text-ellipsis whitespace-nowrap overflow-hidden"></p>
+            </div>
+            <button type="button" @click="instance.outputs.splice(index, 1)">
+              <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+            </button>
+          </div>
+        </template>
+
+        <template #empty>
+          <div class="flex justify-center p-2 bg-base-300 rounded-xl">
+            <p class="text-text-400">{{ $t('No actions') }}</p>
+          </div>
+        </template>
+      </ListItem>
+
+      <UserActionOutput ref="userActionOutput"
+                        :outputs="outputs"
+                        @apply="(instance, index) => addOutput(instance, index)" />
+
+      <UserActionCondition ref="userActionCondition" />
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+import UserActionOutput from "./UserActionOutput.vue";
+import UserActionCondition from "./UserActionCondition.vue";
+
+export default{
+
+  components: {UserActionCondition, UserActionOutput},
+
+  computed: {
+
+    conditions(){
+      return (this.eventOpt[this.instance.event]?.conditions ?? [])
+          .reduce((acc, cur) => {
+            acc[cur.key] = cur
+            return acc
+          }, {})
+    },
+
+    outputs(){
+      return [
+        { type: "log", text:"Log" },
+        { type: "reply", text:"Reply" },
+        { type: "delay", text:"Delay" },
+        { type: "reset", text:"Reset" },
+        { type: "endChat", text:"End Chat" },
+        { type: "startChat", text:"Start Chat" },
+        { type: "endConversation", text:"End Conversation" },
+      ]
+      return this.eventOpt[this.instance.key]?.outputs ?? []
+    },
+
+  },
+
+  data(){
+    return {
+    }
+  },
+
+  methods: {
+
+    addCondition(condition){
+      this.$util.push(this.instance.conditions, condition)
+    },
+
+    addOutput(output, idx){
+      if(!this.instance) return
+
+      if(!Array.isArray(this.instance.outputs))
+        this.instance.outputs = []
+
+      typeof idx === 'number' ?
+          Object.assign(this.instance.outputs[idx], output) :
+          this.instance.outputs.push(output)
+    },
+
+  },
+
+  props: {
+    instance: Object,
+
+    eventOpt: {
+      type: Object,
+      default: () => ({
+
+        'onNewMessage': {
+          text: 'On message create',
+          conditions: [
+            { key:"{message.body}", text:"Text", type:"string", operators:[ [ 'contains', 'Contains' ], [ 'startsWith', 'Starts With' ] ] },
+            { key:"{message.direction}", text:"Direction", type:"enum", enum:[ [ 1, 'In' ], [ 2, 'Out' ] ] },
+            { key:"{message.channelId}", text:"Channel", type:"enum", enum:[ [ 1, 'Whatsapp' ] ] },
+            { key:"{message.inbox.mobileNumber}", text:"Mobile Number" }
+          ],
+          outputs: [
+            { type: "log", text:"Log" },
+            { type: "reply", text:"Reply" },
+            { type: "delay", text:"Delay" },
+          ]
+        }
+
+      })
+    },
+  }
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/UserActionBuilder.vue

@@ -0,0 +1,314 @@
+<template>
+	<div :class="$style.comp">
+
+    <div :class="$style.leftPane"
+         :style="leftStyle">
+      <div :class="$style.leftBoundary" @mousedown="(e) => $util.dragResize(e, resize1)"></div>
+
+      <div class="flex-1 flex flex-col gap-5 p-5">
+
+        <div class="flex flex-row items-center gap-2">
+          <div class="flex-1">
+            <h5>User</h5>
+          </div>
+          <button type="button" @click="create">
+            <svg width="21" height="21" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
+          </button>
+        </div>
+
+        <div class="flex-1 flex flex-col">
+          <label class="text-text-300">Actions</label>
+          <VirtualGrid :items="items" class="flex-1 rounded-xl" container-class="divide-y divide-text-50">
+            <template #item="{ item }">
+              <div class="p-3 hover:bg-base-500 flex flex-row"
+                   :class="item.uid === actionUid ? 'bg-base-500' : 'bg-base-400'"
+                   @click="$emit('select', item.uid)">
+                <label class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap">{{ item.name }}</label>
+                <button type="button" @click="$emit('remove', item )">
+                  <svg width="14" height="14" class="fill-text-300 hover:fill-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
+                </button>
+              </div>
+            </template>
+          </VirtualGrid>
+        </div>
+      </div>
+
+    </div>
+
+    <div v-if="actionUid" class="flex-1 flex flex-col">
+
+      <div class="flex-1 flex flex-row">
+        <div class="flex-1 flex flex-col">
+
+          <div class="p-2 flex flex-row items-center panel-400 border-b-[1px] border-text-50">
+            <h5 class="pl-3">{{ item?.name }}</h5>
+            <div class="flex-1"></div>
+            <div>
+              <Button class="px-6 rounded-full" @click="save">Save</Button>
+            </div>
+          </div>
+
+          <div class="flex-1 overflow-auto">
+            <div class="p-12" v-if="item">
+              <UserActionItem :config="config"
+                              :item="item"
+                              :removable="false"
+                              @select="select" />
+            </div>
+          </div>
+
+          <div class="p-5" v-if="item && item.type === 1 && item.key === 'onNewMessage'">
+            <UserActionConsole ref="console"
+                               @test-message="testMessage"
+                               @test-reset="$emit('test-reset')" />
+          </div>
+
+        </div>
+
+        <div :class="$style.rightPane" :style="rightStyle">
+          <div :class="$style.rightBoundary" @mousedown="(e) => $util.dragResize(e, resize2)"></div>
+
+          <UserActionProps ref="userActionProps" :instance="selectedItem" />
+
+        </div>
+      </div>
+
+    </div>
+
+    <div v-else class="flex-1 flex flex-col items-center justify-center">
+      <strong>No action selected</strong>
+      <p>Please select action from left panel</p>
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+import UserActionItem from './UserActionBuilder/UserActionItem.vue'
+import UserActionOutput from './UserActionBuilder/UserActionOutput.vue'
+import VirtualGrid from '../components/VirtualGrid.vue'
+import UserActionConsole from "./UserActionBuilder/UserActionConsole.vue";
+import UserActionProps from "./UserActionBuilder/UserActionProps.vue";
+
+export default{
+
+  components: {
+    UserActionProps,
+    UserActionConsole,
+    UserActionOutput,
+    UserActionItem,
+    VirtualGrid
+  },
+
+  computed: {
+
+    canIsFallback(){
+      return true
+    },
+
+    cConfig(){
+      return this.config ?? this._config
+    },
+
+    leftBar() {
+      if (!this.cConfig.leftBar) {
+        this.cConfig.leftBar = {
+          width: 240
+        }
+      }
+
+      return this.cConfig.leftBar
+    },
+
+    leftStyle() {
+      return {
+        width: this.leftBar.width + 'px'
+      }
+    },
+
+    rightBar() {
+      if (!this.cConfig.rightBar) {
+        this.cConfig.rightBar = {
+          width: 240
+        }
+      }
+
+      return this.cConfig.rightBar
+    },
+
+    rightStyle() {
+      return {
+        width: this.rightBar.width + 'px'
+      }
+    },
+
+    selectedItem(){
+      if (!this.config.selectedUid) return
+      if (!this.item) return
+
+      const findComponents = (items, uid) => {
+        for (let item of items) {
+          if (item.uid === uid)
+            return item
+
+          if (item.items) {
+            const component = findComponents(item.items, uid)
+            if (component)
+              return component
+          }
+        }
+      }
+
+      if(this.item.uid === this.config.selectedUid)
+        return this.item
+      return findComponents(this.item.items ?? [], this.config.selectedUid)
+    },
+
+  },
+
+  data(){
+    return {
+      _config: {},
+      items: null,
+      item: null,
+    }
+  },
+
+  emits: [ 'remove', 'select', 'test-message', 'test-reset' ],
+
+  inject: [ 'alert', 'confirm', 'socket', 'toast' ],
+
+  methods: {
+
+    create(){
+      this.socket.send(`${this.src}.create`, {})
+          .then(_ => {
+            this.$emit('select', _.uid)
+          })
+          .catch(err => this.alert(err))
+    },
+
+    load(){
+      this.socket.send(`${this.src}.load`, { uid: this.uid })
+          .then(({ items }) => {
+            this.items = items
+          })
+          .catch(err => this.toast(err))
+    },
+
+    open(item){
+      this.socket.send(`${this.src}.open`, { uid: item.uid })
+          .then(({ item }) => {
+            this.item = item
+          })
+          .catch(err => this.toast(err))
+    },
+
+    addTestMessage(message){
+      this.$refs.console.addMessage(message)
+    },
+
+    testMessage(message){
+      this.$emit('test-message', {
+        message,
+        action: this.item
+      })
+    },
+
+    resize1(w) {
+      const nextWidth = this.leftBar.width + w
+      if (nextWidth >= 200 && nextWidth <= 480) {
+        this.leftBar.width += w
+      }
+    },
+
+    resize2(w) {
+      const nextWidth = this.rightBar.width - w
+      if (nextWidth >= 240 && nextWidth <= 480) {
+        this.rightBar.width -= w
+      }
+    },
+
+    save(){
+      this.socket.send(`${this.src}.save`, { userId:this.uid, item:this.item })
+          .then(_ => this.toast('Saved'))
+          .catch(err => this.alert(err))
+    },
+
+    select(item){
+      this.config.selectedUid = item.uid
+    }
+
+  },
+
+  mounted() {
+    this.load()
+  },
+
+  props: {
+
+    actionUid: String,
+
+    config: Object,
+
+    timeOpt: {
+      type: Object
+    },
+
+    src: [ String ],
+
+    uid: String,
+
+  },
+
+  watch: {
+
+    actionUid: {
+      immediate: true,
+      handler(to){
+        if(to){
+          this.open({ uid: to })
+        }
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-row;
+}
+
+.leftPane{
+  @apply relative overflow-y-auto;
+  @apply flex flex-col panel-400;
+}
+
+.leftBoundary {
+  @apply absolute top-0 right-0 bottom-0 w-[3px] border-r-[1px] border-text-50 cursor-e-resize;
+}
+
+.contentPane{
+  @apply flex-1 flex flex-row;
+}
+
+.treePane{
+  @apply flex-1;
+}
+
+.rightPane {
+  @apply relative overflow-y-auto panel-400;
+
+}
+
+.rightBoundary {
+  @apply absolute top-0 left-0 bottom-0 w-[3px] border-l-[1px] border-text-50 cursor-w-resize;
+}
+
+</style>