Add modal

app/javascript/dashboard/components/widgets/WootWriter/AIEditor.vue

@@ -0,0 +1,148 @@
+<template>
+  <div style="position: relative;">
+    <woot-button
+      v-tooltip.top-end="'Compose With AI'"
+      icon="wand"
+      color-scheme="secondary"
+      variant="smooth"
+      size="small"
+      :title="'AI'"
+      @click="toggleDropdown"
+    />
+    <div
+      v-if="showActionsDropdown"
+      v-on-clickaway="closeDropdown"
+      class="dropdown-pane dropdown-pane--open basic-filter"
+    >
+      <h3 class="page-sub-title">
+        Compose with AI
+      </h3>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus odio
+        dolorem laborum mollitia nesciunt corrupti saepe recusandae esse nisi
+        earum, dignissimos fugiat nobis voluptatibus rerum quo illum. Atque, rem
+        voluptatem!
+      </p>
+      <h4 class="text-block-title">
+        Tone
+      </h4>
+      <div class="filter__item">
+        <select v-model="activeValue" class="status--filter">
+          <option v-for="item in items" :key="item.status" :value="item.status">
+            {{ item.value }}
+          </option>
+        </select>
+      </div>
+      <div class="medium-12 columns">
+        <div class="modal-footer justify-content-end w-full buttons">
+          <woot-button class="button clear" size="tiny">
+            Cancel
+          </woot-button>
+          <woot-button size="tiny">
+            Generate
+          </woot-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import wootConstants from 'dashboard/constants/globals';
+import { mapGetters } from 'vuex';
+import { mixin as clickaway } from 'vue-clickaway';
+
+export default {
+  mixins: [clickaway],
+  data() {
+    return {
+      showActionsDropdown: false,
+      chatStatusItems: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS'),
+      chatSortItems: this.$t('CHAT_LIST.CHAT_SORT_FILTER_ITEMS'),
+      items: [
+        {
+          value: 'Professional',
+          status: 'Professional',
+        },
+      ],
+      activeValue: 'Professional',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      chatStatusFilter: 'getChatStatusFilter',
+      chatSortFilter: 'getChatSortFilter',
+    }),
+    chatStatus() {
+      return this.chatStatusFilter || wootConstants.STATUS_TYPE.OPEN;
+    },
+    sortFilter() {
+      return this.chatSortFilter || wootConstants.SORT_BY_TYPE.LATEST;
+    },
+  },
+  methods: {
+    onTabChange(value) {
+      this.$emit('changeFilter', value);
+      this.closeDropdown();
+    },
+    toggleDropdown() {
+      this.showActionsDropdown = !this.showActionsDropdown;
+    },
+    closeDropdown() {
+      this.showActionsDropdown = false;
+    },
+    onChangeFilter(type, value) {
+      this.$emit('changeFilter', type, value);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.basic-filter {
+  width: 400px;
+  margin-top: var(--space-smaller);
+  right: 0;
+  left: 0;
+  padding: var(--space-normal) var(--space-small);
+  bottom: 34px;
+  position: absolute;
+  span {
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+  }
+  .filter__item {
+    justify-content: space-between;
+    display: flex;
+    align-items: center;
+
+    &:last-child {
+      margin-top: var(--space-normal);
+    }
+
+    span {
+      font-size: var(--font-size-mini);
+    }
+  }
+}
+.icon {
+  margin-right: var(--space-smaller);
+}
+.dropdown-icon {
+  margin-left: var(--space-smaller);
+}
+
+.status--filter {
+  background-color: var(--color-background-light);
+  border: 1px solid var(--color-border);
+  font-size: var(--font-size-mini);
+  height: var(--space-medium);
+  margin: 0 var(--space-smaller);
+  padding: 0 var(--space-medium) 0 var(--space-small);
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--space-normal);
+}
+</style>

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -91,6 +91,7 @@
         v-if="(isAWebWidgetInbox || isAPIInbox) && !isOnPrivateNote"
         :conversation-id="conversationId"
       />
+      <AIEditor />
       <transition name="modal-fade">
         <div
           v-show="$refs.upload && $refs.upload.dropActive"
@@ -124,6 +125,7 @@ import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import AIEditor from './AIEditor.vue';
 import {
   ALLOWED_FILE_TYPES,
   ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP,
@@ -134,7 +136,7 @@ import { mapGetters } from 'vuex';
 
 export default {
   name: 'ReplyBottomPanel',
-  components: { FileUpload, VideoCallButton },
+  components: { FileUpload, VideoCallButton, AIEditor },
   mixins: [eventListenerMixins, uiSettingsMixin, inboxMixin],
   props: {
     mode: {