@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/widgets/TestimonialSetting.vue

@@ -1,86 +1,93 @@
 <template>
 	<div :class="$style.comp">
-		<div>
-			<label class="text-text-400">Title</label>
-			<Textbox v-model="item.props.title" class="mt-1" />
-		</div>
-
-		<div>
-			<label class="text-text-400">Description</label>
-			<Textarea v-model="item.props.description" rows="3" class="mt-1" />
-		</div>
-
-		<div>
-			<div class="flex flex-row items-center">
-				<label class="text-text-400 flex-1">Testimonials</label>
-				<button type="button" class="text-primary" @click="$refs.modal.open({ createdAt:'2023-01-01' })">Add</button>
-			</div>
-			<ListItem :items="items"
-			          @reorder="(from, to) => { items.splice(to, 0, items.splice(from, 1)[0]); $emit('change') }">
-			  <template v-slot="{ item, index }">
-			    <div class="flex flex-row items-center gap-3 cursor-pointer">
-			      <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" @click="$refs.modal.open(item)">
-							<p class="line-clamp-2">
-								{{ item.text }}
-							</p>
-						</div>
-			      <div>
-			        <button type="button" @click="confirm($t('Remove this item?'), '', () => { items.splice(index, 1); $emit('change') })">
-			          <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>
-
-		<Modal ref="modal" width="360" height="420">
-		  <template v-slot:head>
-		    <div class="relative p-5">
-		      <h3>Add Testimonial</h3>
-		      <div class="absolute top-0 right-0 p-2">
-		        <button type="button" class="p-2" @click="$refs.modal.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="{ context }">
-		    <div class="p-6">
-					<Button @click="apply(context)"
-									:state="!context.text || !context.name || !context.createdAt ? -1 : 1"
-									class="w-full">Add Testimonial</Button>
-		    </div>
-		  </template>
-		  <template #default="{ context }">
-				<div class="flex-1 p-6 flex flex-col gap-6">
-					<Textarea v-model="context.text" rows="5" placeholder="Text"></Textarea>
-					<div class="flex flex-row gap-4 items-center">
-						<Image ref="image" class="w-[64px] aspect-square rounded-full bg-text-50"
-									 :src="imageSrc(context.imageUrl)"
-									 :editable="true"
-									 @click="$refs.image.edit()"
-									 @change="(base64, file) => context.imageUrl = file"/>
-						<div class="flex-1 flex flex-col gap-1">
-							<Textbox v-model="context.name" placeholder="Name" />
-							<Datepicker v-model="context.createdAt" placeholder="Time" mode="popup" />
-						</div>
-					</div>
-				</div>
-			</template>
-		</Modal>
-
-
-		<ComponentSetting :item="item"
-											:view-type="viewType"
-											:view-types="viewTypes"
-											default-display="block"
-											@change="$emit('change')" />
+
+    <div class="p-6 py-4 flex flex-col gap-4">
+      <div>
+        <label class="text-text-400">Title</label>
+        <Textbox v-model="item.props.title" class="mt-1" />
+      </div>
+
+      <div>
+        <label class="text-text-400">Description</label>
+        <Textarea v-model="item.props.description" rows="3" class="mt-1" />
+      </div>
+
+      <div>
+        <div class="flex flex-row items-center">
+          <label class="text-text-400 flex-1">Testimonials</label>
+          <button type="button" class="text-primary" @click="$refs.modal.open({ createdAt:'2023-01-01' })">Add</button>
+        </div>
+        <ListItem :items="items"
+                  class="bg-base-300 border-border-200 border-[1px] rounded-lg overflow-hidden"
+                  container-class="divide-y divide-border-50"
+                  @reorder="(from, to) => { items.splice(to, 0, items.splice(from, 1)[0]); $emit('change') }">
+          <template v-slot="{ item, index }">
+            <div class="flex flex-row items-center gap-3 cursor-pointer 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" @click="$refs.modal.open(item)">
+                <p class="line-clamp-2">
+                  {{ item.text }}
+                </p>
+              </div>
+              <div>
+                <button type="button" @click="confirm($t('Remove this item?'), '', () => { items.splice(index, 1); $emit('change') })">
+                  <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>
+
+
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
+
+    <Modal ref="modal" width="360" height="420">
+      <template v-slot:head>
+        <div class="relative p-5">
+          <h3>Add Testimonial</h3>
+          <div class="absolute top-0 right-0 p-2">
+            <button type="button" class="p-2" @click="$refs.modal.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="{ context }">
+        <div class="p-6">
+          <Button @click="apply(context)"
+                  :state="!context.text || !context.name || !context.createdAt ? -1 : 1"
+                  class="w-full">Add Testimonial</Button>
+        </div>
+      </template>
+      <template #default="{ context }">
+        <div class="flex-1 p-6 flex flex-col gap-6">
+          <Textarea v-model="context.text" rows="5" placeholder="Text"></Textarea>
+          <div class="flex flex-row gap-4 items-center">
+            <Image ref="image" class="w-[64px] aspect-square rounded-full bg-text-50"
+                   :src="imageSrc(context.imageUrl)"
+                   :editable="true"
+                   @click="$refs.image.edit()"
+                   @change="(base64, file) => context.imageUrl = file"/>
+            <div class="flex-1 flex flex-col gap-1">
+              <Textbox v-model="context.name" placeholder="Name" />
+              <Datepicker v-model="context.createdAt" placeholder="Time" mode="popup" />
+            </div>
+          </div>
+        </div>
+      </template>
+    </Modal>
+
 	</div>
 </template>
 
@@ -117,14 +124,16 @@ export default{
 
 	props: {
 
-		item: {
-			type: Object,
-			required: true
-		},
+    item: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
 
-		viewType: String,
+    viewIndex: Number,
 
-		viewTypes: Array,
+    viewTypes: Array,
 
 	},
 
@@ -146,7 +155,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col gap-4;
+  @apply flex flex-col divide-y divide-border-50;
 }
 
 </style>

package/src/widgets/TextBlockSetting.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.comp">
 
-		<div class="flex flex-col gap-4">
+		<div class="p-6 py-4 flex flex-col gap-4">
       <div>
         <label class="text-text-400">Text</label>
         <Textbox v-model="item.props.text"
@@ -26,11 +26,12 @@
       </div>
     </div>
 
-		<ComponentSetting :item="item"
-											:view-type="viewType"
-											:view-types="viewTypes"
-											default-display="block"
-											@change="apply" />
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
 	</div>
 </template>
 
@@ -42,14 +43,16 @@ export default{
 
 	props: {
 
-		item: {
-			type: Object,
-			required: true
-		},
+    item: {
+      type: Object,
+      required: true
+    },
 
-		viewType: String,
+    viewType: String,
 
-		viewTypes: Array,
+    viewIndex: Number,
+
+    viewTypes: Array,
 
 	},
 
@@ -72,7 +75,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col gap-8;
+  @apply flex flex-col divide-y divide-border-50
 }
 
 </style>

package/src/widgets/UserActionBuilder/UserActionConsole.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="flex flex-col relative">
 
+    <div class="p-3 flex flex-row items-start gap-3">
+      <div class="flex-1">
+        <h5>Simulation</h5>
+      </div>
+      <button type="button" class="text-primary" @click="reset">Reset</button>
+      <button type="button" class="text-primary" @click="clear">Clear</button>
+    </div>
+
     <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"
@@ -9,14 +17,9 @@
       </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">
+    <div class="p-3 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>
@@ -25,7 +28,7 @@
 
 export default{
 
-  emits: [ 'test-message', 'test-reset' ],
+  inject: [ 'getUser', 'socket' ],
 
   computed: {
 
@@ -38,7 +41,8 @@ export default{
   data(){
     return {
       message: {},
-      messages: []
+      messages: [],
+      context: null,
     }
   },
 
@@ -53,15 +57,31 @@ export default{
     },
 
     reset(){
-      this.$emit('test-reset')
+      this.context = {}
     },
 
     send(){
-      this.$emit('test-message', this.message)
+      this.socket.send(`${this.controller}.test-message`, {
+        userId: this.getUser().id,
+        message: this.message,
+        context: this.context
+      })
+          .then(res => {
+            this.context = res.context ?? this.context
+            if(res.message)
+              this.messages.push(res.message)
+          })
+
       this.messages.push(this.message)
       this.message = {}
     },
 
+  },
+
+  props: {
+
+    controller: String
+
   }
 
 }

package/src/widgets/UserActionBuilder/UserActionOutput.vue

@@ -8,7 +8,7 @@
 	  <template v-slot:head>
 	    <div class="relative p-6">
 	      <h3 v-if="!instance.type">{{ $t('Select Type') }}</h3>
-	      <h3 v-else @click="log(instance)">{{ $t(instance.text) }}</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">
@@ -37,7 +37,7 @@
 
       <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">
+        <div class="flex flex-col divide-border-50 border-t-[1px] border-b-[1px] border-border-50">
           <button v-for="output in outputs"
                   type="button"
                   class="p-3 px-6 text-left"

package/src/widgets/UserActionBuilder/UserActionOutputReply.vue

@@ -1,75 +1,78 @@
 <template>
   <div class="p-6 pt-0 flex flex-col gap-5">
 
-    <div class="flex flex-col gap-4">
+    <div class="flex justify-center">
+      <Tabs :items="tabItems" v-model="output.params.type" />
+    </div>
+
+    <div v-if="output.params.type === 1">
       <div>
-        <div class="flex flex-row">
-          <Checkbox v-model="output.params.useTemplate">
-            Use Template
-          </Checkbox>
-        </div>
-        <Dropdown v-model="output.params.templateName" class="mt-2">
-          <option v-for="template in whatsappTemplates" :value="template.name">{{ template.name }}</option>
-        </Dropdown>
+        <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-border-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 v-if="!output.params.useTemplate" class="flex flex-col gap-4">
-
-        <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">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>
-          <label class="text-text-400">Footer</label>
-          <Textbox v-model="output.params.footer" maxlength="50" />
+      <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>
-
-        <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>
+        <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>
-            </template>
-          </ListItem>
-        </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>
@@ -92,36 +95,10 @@ export default{
     tabItems(){
       return [
         { text:"Text", value:1 },
-        this.getWhatsappTemplateSrc() ? { text:"Template", value:2 } : null,
+        { text:"Template", value:2 },
       ]
-      .filter(_ => _)
-    }
-
-  },
-
-  data(){
-    return {
-      whatsappTemplates: null
     }
-  },
-
-  inject: [ 'getWhatsappTemplateSrc', 'socket' ],
-
-  methods: {
-
-    loadWhatsappTemplate(){
-      const src = this.getWhatsappTemplateSrc()
-
-      if(src){
-        this.socket.send(src, {})
-            .then(templates => this.whatsappTemplates = templates)
-      }
-    }
-
-  },
 
-  mounted() {
-    this.loadWhatsappTemplate()
   },
 
   props: {

package/src/widgets/UserActionBuilder/UserActionProps.vue

@@ -43,7 +43,7 @@
           </button>
         </div>
         <ListItem :items="instance.conditions"
-                  class="mt-2 bg-transparent border-[1px] border-text-200 rounded-xl overflow-hidden"
+                  class="mt-2 bg-transparent border-[1px] border-border-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 }">
@@ -67,7 +67,7 @@
           </template>
 
           <template #empty>
-            <div class="flex justify-center p-2 bg-base-300 rounded-xl border-[1px] rounded-xl border-text-200">
+            <div class="flex justify-center p-2 bg-base-300 rounded-xl border-[1px] rounded-xl border-border-200">
               <p class="text-text-400">{{ $t('All conditions') }}</p>
             </div>
           </template>
@@ -82,7 +82,7 @@
         <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"
+                class="mt-2 border-[1px] rounded-xl border-border-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 }">

package/src/widgets/UserActionBuilder.vue

@@ -18,7 +18,7 @@
 
         <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">
+          <VirtualGrid :items="items" class="flex-1 rounded-xl" container-class="divide-y divide-border-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'"
@@ -40,7 +40,7 @@
       <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">
+          <div class="p-2 flex flex-row items-center panel-400 border-b-[1px] border-border-50">
             <h5 class="pl-3">{{ item?.name }}</h5>
             <div class="flex-1"></div>
             <div>
@@ -209,10 +209,6 @@ export default{
       this.$refs.console.addMessage(message)
     },
 
-    getWhatsappTemplateSrc(){
-      return this.whatsappTemplateSrc
-    },
-
     testMessage(message){
       this.$emit('test-message', {
         message,
@@ -262,18 +258,10 @@ export default{
 
     src: [ String ],
 
-    whatsappTemplateSrc: String,
-
     uid: String,
 
   },
 
-  provide(){
-    return {
-      getWhatsappTemplateSrc: this.getWhatsappTemplateSrc
-    }
-  },
-
   watch: {
 
     actionUid: {
@@ -303,7 +291,7 @@ export default{
 }
 
 .leftBoundary {
-  @apply absolute top-0 right-0 bottom-0 w-[3px] border-r-[1px] border-text-50 cursor-e-resize;
+  @apply absolute top-0 right-0 bottom-0 w-[3px] border-r-[1px] border-border-50 cursor-e-resize;
 }
 
 .contentPane{
@@ -320,7 +308,7 @@ export default{
 }
 
 .rightBoundary {
-  @apply absolute top-0 left-0 bottom-0 w-[3px] border-l-[1px] border-text-50 cursor-w-resize;
+  @apply absolute top-0 left-0 bottom-0 w-[3px] border-l-[1px] border-border-50 cursor-w-resize;
 }
 
 </style>