feat: Macros listing and Editor (#5606)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/widgets/AutomationActionInput.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="filter"
-    :class="{ error: v.action_params.$dirty && v.action_params.$error }"
-  >
+  <div class="filter" :class="actionInputStyles">
     <div class="filter-inputs">
       <select
         v-model="action_name"
@@ -60,6 +57,7 @@
         </div>
       </div>
       <woot-button
+        v-if="!isMacro"
         icon="dismiss"
         variant="clear"
         color-scheme="secondary"
@@ -120,6 +118,10 @@ export default {
       type: String,
       default: '',
     },
+    isMacro: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     action_name: {
@@ -146,6 +148,12 @@ export default {
       return this.actionTypes.find(action => action.key === this.action_name)
         .inputType;
     },
+    actionInputStyles() {
+      return {
+        error: this.v.action_params.$dirty && this.v.action_params.$error,
+        'is-a-macro': this.isMacro,
+      };
+    },
   },
   methods: {
     removeAction() {
@@ -165,6 +173,18 @@ export default {
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-medium);
   margin-bottom: var(--space-small);
+
+  &.is-a-macro {
+    margin-bottom: 0;
+    background: var(--white);
+    padding: var(--space-zero);
+    border: unset;
+    border-radius: unset;
+  }
+}
+
+.no-margin-bottom {
+  margin-bottom: 0;
 }
 
 .filter.error {