@mixd-id/web-scaffold 0.2.240701 → 0.2.240703

package/src/widgets/UserActionBuilder/UserActionCondition.vue

@@ -0,0 +1,97 @@
+<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>
+            <option value="askLlm">Ask LLM</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

@@ -1,73 +1,84 @@
 <template>
 	<div v-if="item"
-       class="flex flex-row items-start">
-
-    <div class="flex flex-col self-stretch" >
-
-      <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` }">
-          <div class="rounded-xl p-3 border-[1px] flex"
-               :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">
-                {{ item.name }}
+       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>
-              <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 v-if="item.isFallback" :class="$style.isFallback"></div>
             </div>
           </div>
-        </div>
 
-        <div v-if="hasChildren && (item.items ?? []).length < 1" 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" class="flex flex-row items-center" :style="{ width:`${size[2]}px` }">
-          <div class="flex-1 bg-primary-300 h-[1px]"></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>
+        <div class="flex-1 flex flex-row items-start">
+          <div :style="{ width:`${size[2]}px` }"></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 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 :style="{ width:`${size[2]}px` }"></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="hasChildren" class="flex flex-col relative">
-      <div class="absolute w-[1px] bg-primary-300" :style="vBorder"></div>
-
-      <UserActionItem v-for="(subItem, idx) in item.items"
-                      :config="config"
-                      :item="subItem"
-                      :level="level + 1"
-                      :index="idx"
-                      :parent="item.items"
-                      @select="(item) => $emit('select', item)"
-                      @remove="item.items.splice(idx, 1)"
-                      :useAdd="idx === (item.items ?? []).length - 1"
-                      @add="addItem(item)" />
-    </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>
@@ -76,10 +87,17 @@
 
 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
     },
@@ -88,8 +106,15 @@ export default{
       let bottom = `${(this.size[2] * 1.2) + (this.size[1] * .5)}px`
 
       return {
-        top:`${this.size[1] * .5}px`,
-        bottom
+        top:'20px',
+        bottom: 0
+      }
+    },
+
+    vBorder0(){
+      return {
+        top: 0,
+        height: '20px'
       }
     }
 
@@ -108,11 +133,88 @@ export default{
       item.items.push({
         name: 'Untitled',
         parentId: item.id,
-        uid
+        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)
+    },
 
   },
 
@@ -125,6 +227,8 @@ export default{
       default: 0
     },
 
+    isLast: Boolean,
+
     item: Object,
 
     level: {
@@ -159,7 +263,8 @@ export default{
 
 <style module>
 
-.comp{
+.isFallback{
+  @apply absolute bottom-0 left-0 right-0 h-[4px] bg-primary;
 }
 
 </style>

package/src/widgets/UserActionBuilder/UserActionOutput.vue

@@ -4,10 +4,11 @@
          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>
+	      <h3 v-else @click="log(instance)">{{ $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">
@@ -17,11 +18,18 @@
 	      </div>
 	    </div>
 	  </template>
+
 	  <template v-slot:foot>
-	    <div class="p-6">
-        <Button class="w-[100px]" :state="canApply ? 1 : -1" @click="apply">
-          {{ $t('OK') }}
-        </Button>
+	    <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>
 
@@ -33,14 +41,16 @@
           <button v-for="output in outputs"
                   type="button"
                   class="p-3 px-6 text-left"
-                  @click="instance = { params:{}, ...output }">
+                  @click="Object.assign(instance, output)">
             {{ output.text }}
           </button>
         </div>
 
       </div>
 
-      <slot v-else :name="instance.type" :output="instance"></slot>
+      <div v-else>
+        <component :is="componentName" :output="instance"></component>
+      </div>
 
     </div>
 
@@ -50,10 +60,15 @@
 <script>
 
 import Modal from "../../components/Modal.vue"
+import {capitalize} from "../../utils/helpers.mjs";
+import {defineAsyncComponent} from "vue";
 
 export default{
 
-  components: { Modal },
+  components: {
+    Modal,
+    UserActionOutputReply: defineAsyncComponent(() => import('./UserActionOutputReply.vue')),
+  },
 
   computed: {
 
@@ -61,6 +76,12 @@ export default{
       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
     },
@@ -97,7 +118,12 @@ export default{
     },
 
 		create(){
-      this.instance = {}
+      this.instance = {
+        params: {
+          passthrough: true
+        }
+      }
+      this.id = null
       this.$refs.modal.open()
 		},
 

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>