@mixd-id/web-scaffold 0.2.240703 → 0.2.240705

package/package.json

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

package/src/components/Button.vue

@@ -169,21 +169,14 @@ export default{
 
 .button-primary {
   @apply bg-primary-500 text-white rounded-lg;
+  @apply hover:bg-primary-600 focus:border-primary-300;
   box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
   border: solid 1px rgb(var(--primary-500));
 }
 
-.button-primary:focus {
-  border-color: rgb(var(--primary-600));
-}
-
-.button-primary:hover {
-  @apply bg-primary-600;
-}
-
 .button-primary-disabled,
 .button-primary-disabled:hover {
-  @apply bg-primary-500 top-0 left-0 cursor-not-allowed text-opacity-50;
+  @apply bg-primary-300 border-primary-300 top-0 left-0 cursor-not-allowed text-opacity-50;
   @apply top-0 left-0;
 }
 

package/src/components/List.vue

@@ -634,7 +634,9 @@ export default{
       else{
         return this.socket.send(this.presetSrc, { key:this.presetKey })
             .then(async (config) => {
-              this._config = config
+              !config ?
+                await this.loadDefaultConfig() :
+                this._config = config
             })
             .catch(() => {})
       }

package/src/index.js

@@ -686,6 +686,8 @@ export default{
     app.component('PolarArea', defineAsyncComponent(() => import("./widgets/Dashboard/PolarArea.vue")))
     app.component('Metric', defineAsyncComponent(() => import("./widgets/Dashboard/Metric.vue")))
     app.component('BarChart', defineAsyncComponent(() => import("./widgets/Dashboard/BarChart.vue")))
+
+    app.component('BotEditor', defineAsyncComponent(() => import("./widgets/BotEditor.vue")))
   }
 
 }

package/src/widgets/BotEditor/BotEditorActions.vue

@@ -0,0 +1,162 @@
+<template>
+	<div v-if="!action" :class="$style.comp" class="flex items-center justify-center">
+    <p class="text-text-400">No action selected</p>
+	</div>
+
+  <div v-else class="flex-1 flex flex-col">
+
+    <div class="flex flex-row items-center p-2 pt-3 px-6 bg-base-300 border-b-[1px] border-text-50">
+      <div class="flex-1">
+        <strong>{{ action.name }}</strong>
+      </div>
+      <Button ref="saveBtn" :state="canSave ? 1 : -1" class="w-[80px] rounded-full" @click="save">Save</Button>
+    </div>
+
+    <div class="flex-1 flex flex-row">
+      <div class="flex-1 p-12 overflow-auto">
+        <UserActionItem :config="config"
+                        :item="action"
+                        :removable="false"
+                        @select="(item) => config.selectedUid = item.uid" />
+      </div>
+
+      <div :style="sidebarStyle"
+           class="relative flex flex-col border-l-[1px] border-text-50 panel-400 overflow-hidden">
+        <div :class="$style.resize1"
+             @mousedown="(e) => $util.dragResize(e, resize1)"></div>
+
+        <UserActionProps ref="userActionProps" :instance="selectedItem" />
+
+      </div>
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+
+import UserActionItem from "../UserActionBuilder/UserActionItem.vue";
+import UserActionProps from "../UserActionBuilder/UserActionProps.vue";
+
+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
+    }
+  }
+}
+
+export default{
+  components: {UserActionProps, UserActionItem},
+
+  computed: {
+
+    canSave(){
+      return JSON.stringify(this.action) !== this.initialAction
+    },
+
+    selectedItem(){
+      if (!this.config.selectedUid) return
+      if (!this.action) return
+
+      if(this.action.uid === this.config.selectedUid)
+        return this.action
+      return findComponents(this.action.items ?? [], this.config.selectedUid)
+    },
+
+    sidebar(){
+      if (!this.config.actionSidebar)
+        this.config.actionSidebar = {
+          open: true,
+          width: 300
+        }
+
+      return this.config.actionSidebar
+    },
+
+    sidebarStyle() {
+      return {
+        width: this.sidebar.width + 'px'
+      }
+    },
+
+  },
+
+  data(){
+    return {
+      action: null,
+      initialAction: null,
+    }
+  },
+
+  inject: [ 'socket' ],
+
+  props: {
+
+    config: Object,
+    controller: String,
+
+  },
+
+  methods: {
+
+    load(uid){
+      if(!uid) return
+
+      this.socket.send(`${this.controller}.open-action`, { uid })
+          .then(_ => {
+            this.action = _.item
+            this.initialAction = JSON.stringify(this.action)
+          })
+    },
+
+    resize1(w) {
+      if (this.sidebar.width - w >= 200 && this.sidebar.width - w <= 600) {
+        this.sidebar.width -= w
+      }
+    },
+
+    save(){
+      this.$refs.saveBtn.setState(2)
+      this.socket.send(`${this.controller}.save-action`, {
+          item: this.action
+        })
+          .then(_ => this.initialAction = JSON.stringify(this.action))
+          .catch(err => this.alert(err))
+          .finally(_ => this.$refs.saveBtn?.resetState())
+    }
+
+  },
+
+  watch: {
+
+    '$route.query.actionUid': {
+      immediate: true,
+      handler(to){
+        this.load(to)
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex-1;
+}
+
+.resize1 {
+  @apply w-[3px] cursor-ew-resize absolute top-0 left-0 bottom-0;
+}
+
+</style>

package/src/widgets/BotEditor.vue

@@ -0,0 +1,228 @@
+<template>
+	<div v-if="cConfig" :class="$style.comp">
+
+    <div :style="sidebarStyle"
+         class="relative flex flex-col border-r-[1px] border-text-50 panel-400 overflow-hidden">
+
+      <div v-if="page !== 'Actions'" class="flex-1 flex flex-col">
+        <div class="p-5">
+          <h5>Bot Settings</h5>
+          <br />
+        </div>
+
+        <div class="flex-1">
+
+          <div class="flex flex-col divide-y divide-text-50 border-y-[1px] border-text-50">
+            <router-link :to="{ query:{ t:'actions' } }" type="button" class="p-3 px-5 text-left">Actions</router-link>
+            <router-link :to="{ query:{ t:'knowledge' } }" type="button" class="p-3 px-5 text-left">Knowledge</router-link>
+            <router-link :to="{ query:{ t:'classifications' } }" type="button" class="p-3 px-5 text-left">Classifications</router-link>
+            <router-link :to="{ query:{ t:'settings' } }" type="button" class="p-3 px-5 text-left">Settings</router-link>
+          </div>
+
+        </div>
+      </div>
+
+      <div v-else-if="page === 'Actions'" class="flex-1 flex flex-col">
+        <div class="p-5 flex flex-row gap-2">
+          <button type="button" @click="$router.replace({ query:{} })">
+            <svg width="16" height="16" class="fill-text" 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="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/></svg>
+          </button>
+          <h5>Actions</h5>
+        </div>
+
+        <br />
+
+        <ListItem :items="actions"
+                  container-class="divide-y divide-text-50"
+                  @reorder="(from, to) => { actions.splice(to, 0, actions.splice(from, 1)[0]); }">
+          <template v-slot="{ item }">
+            <div class="p-3 hover:bg-base-500 flex flex-row gap-3 items-center">
+              <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>
+              <label class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap"
+                     @click="$router.push({ query:{ t:'actions', actionUid:item.uid } })">
+                {{ item.name }}
+              </label>
+              <button type="button" @click="">
+                <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>
+        </ListItem>
+
+      </div>
+
+      <div class="flex flex-col border-t-[1px] border-text-50 relative" :style="bottombarStyle">
+        <div :class="$style.resize2"
+             @mousedown="(e) => $util.dragResize(e, resize2)"></div>
+
+        <UserActionConsole class="flex-1"
+                           ref="console"
+                           @test-message="testMessage"
+                           @test-reset="testReset" />
+
+      </div>
+
+      <div :class="$style.resize1"
+           @mousedown="(e) => $util.dragResize(e, resize1)"></div>
+    </div>
+
+    <div v-if="page" class="flex-1 overflow-y-auto flex flex-col">
+
+      <component :is="`BotEditor${page}`"
+                 :config="config"
+                 :controller="controller" />
+
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+import {capitalize} from "../utils/helpers.mjs";
+import BotEditorActions from "./BotEditor/BotEditorActions.vue";
+import VirtualGrid from "../components/VirtualGrid.vue";
+import UserActionConsole from "./UserActionBuilder/UserActionConsole.vue";
+
+
+export default{
+
+  components: {
+    UserActionConsole,
+    VirtualGrid,
+    BotEditorActions,
+  },
+
+  inject: [ 'alert', 'confirm', 'socket', 'toast' ],
+
+  computed: {
+
+    bottombar(){
+      if (!this.cConfig.bottombar)
+        this.cConfig.bottombar = {
+          open: true,
+          height: 240
+        }
+
+      return this.cConfig.bottombar
+    },
+
+    bottombarStyle(){
+      return {
+        height: !this.bottombar.open ? 0 : this.bottombar.height + 'px'
+      }
+    },
+
+    cConfig(){
+      return this.config
+    },
+
+    sidebar() {
+      if (!this.cConfig.sidebar || !('open' in this.cConfig.sidebar))
+        this.cConfig.sidebar = {
+          open: true,
+          width: 360
+        }
+
+      return this.cConfig.sidebar
+    },
+
+    sidebarStyle() {
+      return {
+        width: !this.sidebar.open ? 0 : this.sidebar.width + 'px'
+      }
+    },
+
+  },
+
+  data(){
+    return {
+      actions: null,
+      page: '',
+    }
+  },
+
+  methods: {
+
+    load(){
+
+    },
+
+    loadActions(){
+      this.socket.send(`${this.controller}.load-actions`, {})
+          .then(_ => {
+            this.actions = _.items
+          })
+    },
+
+    resize1(w) {
+      if (this.sidebar.width + w >= 200 && this.sidebar.width + w <= 600) {
+        this.sidebar.width += w
+      }
+    },
+
+    resize2(_, h) {
+      if (this.bottombar.height - h >= 200 && this.bottombar.height - h <= 400) {
+        this.bottombar.height -= h
+      }
+    },
+
+    testMessage(){
+
+    },
+
+    testReset(){
+
+    },
+
+  },
+
+  props: {
+
+    config: Object,
+    configSrc: String,
+
+    controller: String,
+
+  },
+
+  watch: {
+
+    '$route.query.t': {
+      immediate: true,
+      handler(to){
+        this.page = to ? capitalize(to) : ''
+      }
+    },
+
+    page: {
+      immediate: true,
+      handler(to){
+        if(this[`load${to}`])
+          this[`load${to}`]()
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-row;
+}
+
+.resize1 {
+  @apply w-[3px] cursor-ew-resize absolute top-0 right-0 bottom-0;
+}
+
+.resize2 {
+  @apply h-[3px] cursor-n-resize absolute top-0 right-0 left-0 bg-red-500 z-50;
+}
+
+</style>

package/src/widgets/PresetSelector.vue

@@ -53,7 +53,7 @@
 
     <div v-if="mode === 'select'" class="flex-1 flex flex-col">
       <div class="flex flex-col bg-base-300 border-t-[1px] border-b-[1px] border-text-50 divide-y divide-text-50">
-        <button v-for="(preset, idx) in config.presets" type="button"
+        <div v-for="(preset, idx) in config.presets"
                 class="px-6 text-left hover:bg-primary-200 hover:text-white flex flex-row items-center">
           <div class="flex-1 py-4" @click="select(idx)">
             {{ preset.name }}
@@ -64,7 +64,7 @@
                   @click="$refs.contextMenu.open($refs.btn[idx], { idx })">
             <svg width="16" height="16" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path d="M64 208c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM16 104c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48zm0 304c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48z"/></svg>
           </button>
-        </button>
+        </div>
       </div>
 
       <ContextMenu ref="contextMenu" position="bottom-right">

package/src/widgets/UserActionBuilder/UserActionCondition.vue

@@ -34,9 +34,11 @@
           <label>Operator</label>
           <Dropdown v-model="instance.op" class="mt-1">
             <option value="=">Equal</option>
+            <option value="contains">Contains</option>
+            <option value="startsWith">Starts With</option>
+            <option value="endsWith">Ends With</option>
             <option value="intent">Intent</option>
-            <option value="extractVariables">Extract Information</option>
-            <option value="askLlm">Ask LLM</option>
+            <option value="classification">Classification</option>
           </Dropdown>
         </div>
 

package/src/widgets/UserActionBuilder/UserActionConsole.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-[200px] panel-400 border-[1px] border-text-50 flex flex-col relative">
+  <div class="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"

package/src/widgets/UserActionBuilder/UserActionItem.vue

@@ -6,7 +6,7 @@
       <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 class="h-[1px]" :class="item.parentId > 0 ? 'bg-primary-300' : ''" :style="{ width:`${size[2]}px` }"></div>
 
           <div :style="{ width:`${size[0]}px` }"
                ref="item"
@@ -14,7 +14,7 @@
                @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="{  }">
+                 @click="$emit('select', item)">
               <div class="flex-1 flex flex-row">
                 <div class="flex-1 cursor-default whitespace-nowrap overflow-hidden text-ellipsis">
                   {{ item.name }}
@@ -70,7 +70,7 @@
                         :index="idx"
                         :parent="item.items"
                         :isLast="idx === item.items.length - 1"
-                        @select="(item) => $emit('select', item)"
+                        @select="(item0) => $emit('select', item0)"
                         @remove="item.items.splice(idx, 1)"
                         :useAdd="idx === (item.items ?? []).length - 1"
                         @add="addItem(item)" />
@@ -80,6 +80,7 @@
     <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>
 
@@ -218,6 +219,8 @@ export default{
 
   },
 
+  name: "UserActionItem",
+
   props: {
 
     config: Object,

package/src/widgets/UserActionBuilder/UserActionProps.vue

@@ -6,7 +6,7 @@
         <label>Name</label>
         <Textbox v-model="instance.name" class="mt-2"/>
       </div>
-      <div>
+      <div v-if="instance.parentId > 0">
         <label>Enabled</label>
         <Switch v-model="instance.enabled" class="mt-2"/>
       </div>
@@ -23,7 +23,7 @@
       </div>
     </div>
 
-    <div>
+    <div v-if="instance.type === 1">
       <label>Event</label>
       <div class="flex flex-row gap-3 mt-2">
         <Dropdown v-model.number="instance.key" class="w-full">
@@ -43,7 +43,7 @@
           </button>
         </div>
         <ListItem :items="instance.conditions"
-                  class="mt-2 bg-transparent"
+                  class="mt-2 bg-transparent border-[1px] border-text-200 rounded-xl overflow-hidden"
                   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 }">
@@ -53,7 +53,9 @@
               </div>
 
               <div class="flex-1 flex flex-row gap-2" @click="$refs.userActionCondition.open(item, _ => Object.assign(item, _))">
-                {{ item }}
+                <label>{{ item.key }}</label>
+                <p class="text-text-400 flex-1 text-ellipsis whitespace-nowrap overflow-hidden">{{ item.op }}</p>
+                <p class="text-text-400 flex-1 text-ellipsis whitespace-nowrap overflow-hidden">{{ item.value }}</p>
               </div>
 
               <div>