Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/dashboard/components/Accordion/AccordionItem.vue

@@ -0,0 +1,64 @@
+<script setup>
+import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
+import { defineEmits } from 'vue';
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  emoji: {
+    type: String,
+    default: '',
+  },
+  isOpen: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(['toggle']);
+
+const onToggle = () => {
+  emit('toggle');
+};
+</script>
+
+<template>
+  <div class="text-sm">
+    <button
+      class="flex items-center select-none w-full rounded-lg bg-n-slate-2 outline outline-1 outline-n-weak m-0 cursor-grab justify-between py-2 px-4 drag-handle"
+      :class="{ 'rounded-bl-none rounded-br-none': isOpen }"
+      @click.stop="onToggle"
+    >
+      <div class="flex justify-between">
+        <EmojiOrIcon class="inline-block w-5" :icon="icon" :emoji="emoji" />
+        <h5 class="text-n-slate-12 text-sm mb-0 py-0 pr-2 pl-0">
+          {{ title }}
+        </h5>
+      </div>
+      <div class="flex flex-row">
+        <slot name="button" />
+        <div class="flex justify-end w-3 text-n-blue-11 cursor-pointer">
+          <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
+          <fluent-icon v-else size="24" icon="add" type="solid" />
+        </div>
+      </div>
+    </button>
+    <div
+      v-if="isOpen"
+      class="outline outline-1 outline-n-weak -mt-[-1px] border-t-0 rounded-br-lg rounded-bl-lg"
+      :class="compact ? 'p-0' : 'px-2 py-4'"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ChannelSelector.vue

@@ -0,0 +1,57 @@
+<script setup>
+import Icon from 'next/icon/Icon.vue';
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    required: true,
+  },
+  isComingSoon: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<template>
+  <button
+    class="relative bg-n-solid-1 gap-6 cursor-pointer rounded-2xl flex flex-col justify-start transition-all duration-200 ease-in -m-px py-6 px-5 items-start border border-solid border-n-weak"
+    :class="{
+      'hover:enabled:border-n-blue-9 hover:enabled:shadow-md disabled:opacity-60 disabled:cursor-not-allowed':
+        !isComingSoon,
+      'cursor-not-allowed disabled:opacity-80': isComingSoon,
+    }"
+  >
+    <div
+      class="flex size-10 items-center justify-center rounded-full bg-n-alpha-2"
+    >
+      <Icon :icon="icon" class="text-n-slate-10 size-6" />
+    </div>
+
+    <div class="flex flex-col items-start gap-1.5">
+      <h3 class="text-n-slate-12 text-sm text-start font-medium capitalize">
+        {{ title }}
+      </h3>
+      <p class="text-n-slate-11 text-start text-sm">
+        {{ description }}
+      </p>
+    </div>
+
+    <div
+      v-if="isComingSoon"
+      class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-2xl bg-gradient-to-br from-n-surface-1/90 via-n-surface-1/70 to-n-surface-1/95 cursor-not-allowed"
+    >
+      <span class="text-n-slate-12 font-medium text-sm">
+        {{ $t('CHANNEL_SELECTOR.COMING_SOON') }} 🚀
+      </span>
+    </div>
+  </button>
+</template>

research/chatwoot/app/javascript/dashboard/components/ChatListHeader.vue

@@ -0,0 +1,168 @@
+<script setup>
+import { computed } from 'vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { formatNumber } from '@chatwoot/utils';
+import wootConstants from 'dashboard/constants/globals';
+
+import ConversationBasicFilter from './widgets/conversation/ConversationBasicFilter.vue';
+import SwitchLayout from 'dashboard/routes/dashboard/conversation/search/SwitchLayout.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  pageTitle: { type: String, required: true },
+  hasAppliedFilters: { type: Boolean, required: true },
+  hasActiveFolders: { type: Boolean, required: true },
+  activeStatus: { type: String, required: true },
+  isOnExpandedLayout: { type: Boolean, required: true },
+  conversationStats: { type: Object, required: true },
+  isListLoading: { type: Boolean, required: true },
+});
+
+const emit = defineEmits([
+  'addFolders',
+  'deleteFolders',
+  'resetFilters',
+  'basicFilterChange',
+  'filtersModal',
+]);
+
+const { uiSettings, updateUISettings } = useUISettings();
+
+const onBasicFilterChange = (value, type) => {
+  emit('basicFilterChange', value, type);
+};
+
+const hasAppliedFiltersOrActiveFolders = computed(() => {
+  return props.hasAppliedFilters || props.hasActiveFolders;
+});
+
+const allCount = computed(() => props.conversationStats?.allCount || 0);
+const formattedAllCount = computed(() => formatNumber(allCount.value));
+
+const toggleConversationLayout = () => {
+  const { LAYOUT_TYPES } = wootConstants;
+  const {
+    conversation_display_type: conversationDisplayType = LAYOUT_TYPES.CONDENSED,
+  } = uiSettings.value;
+  const newViewType =
+    conversationDisplayType === LAYOUT_TYPES.CONDENSED
+      ? LAYOUT_TYPES.EXPANDED
+      : LAYOUT_TYPES.CONDENSED;
+  updateUISettings({
+    conversation_display_type: newViewType,
+    previously_used_conversation_display_type: newViewType,
+  });
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between gap-2 px-3 h-[3.25rem]"
+    :class="{
+      'border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
+    }"
+  >
+    <div class="flex items-center justify-center min-w-0">
+      <h1
+        class="text-base font-medium truncate text-n-slate-12"
+        :title="pageTitle"
+      >
+        {{ pageTitle }}
+      </h1>
+      <span
+        v-if="
+          allCount > 0 && hasAppliedFiltersOrActiveFolders && !isListLoading
+        "
+        class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12 shrink-0"
+        :title="allCount"
+      >
+        {{ formattedAllCount }}
+      </span>
+      <span
+        v-if="!hasAppliedFiltersOrActiveFolders"
+        class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12 shrink-0"
+      >
+        {{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
+      </span>
+    </div>
+    <div class="flex items-center gap-1">
+      <template v-if="hasAppliedFilters && !hasActiveFolders">
+        <div class="relative">
+          <NextButton
+            v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
+            icon="i-lucide-save"
+            slate
+            xs
+            faded
+            @click="emit('addFolders')"
+          />
+          <div
+            id="saveFilterTeleportTarget"
+            class="absolute z-50 mt-2"
+            :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
+          />
+        </div>
+        <NextButton
+          v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
+          icon="i-lucide-circle-x"
+          ruby
+          faded
+          xs
+          @click="emit('resetFilters')"
+        />
+      </template>
+      <template v-if="hasActiveFolders">
+        <div class="relative">
+          <NextButton
+            id="toggleConversationFilterButton"
+            v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
+            icon="i-lucide-pen-line"
+            slate
+            xs
+            faded
+            @click="emit('filtersModal')"
+          />
+          <div
+            id="conversationFilterTeleportTarget"
+            class="absolute z-50 mt-2"
+            :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
+          />
+        </div>
+        <NextButton
+          id="toggleConversationFilterButton"
+          v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
+          icon="i-lucide-trash-2"
+          ruby
+          xs
+          faded
+          @click="emit('deleteFolders')"
+        />
+      </template>
+      <div v-else class="relative">
+        <NextButton
+          id="toggleConversationFilterButton"
+          v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
+          icon="i-lucide-list-filter"
+          slate
+          xs
+          faded
+          @click="emit('filtersModal')"
+        />
+        <div
+          id="conversationFilterTeleportTarget"
+          class="absolute z-50 mt-2"
+          :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
+        />
+      </div>
+      <ConversationBasicFilter
+        v-if="!hasAppliedFiltersOrActiveFolders"
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @change-filter="onBasicFilterChange"
+      />
+      <SwitchLayout
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @toggle="toggleConversationLayout"
+      />
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/Code.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { computed } from 'vue';
+import 'highlight.js/styles/default.css';
+import 'highlight.js/lib/common';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  script: {
+    type: String,
+    default: '',
+  },
+  lang: {
+    type: String,
+    default: 'javascript',
+  },
+  enableCodePen: {
+    type: Boolean,
+    default: false,
+  },
+  codepenTitle: {
+    type: String,
+    default: 'Chatwoot Codepen',
+  },
+});
+
+const { t } = useI18n();
+
+const scrubbedScript = computed(() => {
+  // remove trailing and leading extra lines and not spaces
+  const scrubbed = props.script.replace(/^\s*[\r\n]/gm, '');
+  const lines = scrubbed.split('\n');
+
+  // remove extra indentations
+  const minIndent = lines.reduce((min, line) => {
+    if (line.trim().length === 0) return min;
+    const indent = line.match(/^\s*/)[0].length;
+    return Math.min(min, indent);
+  }, Infinity);
+
+  return lines.map(line => line.slice(minIndent)).join('\n');
+});
+
+const codepenScriptValue = computed(() => {
+  const lang = props.lang === 'javascript' ? 'js' : props.lang;
+  return JSON.stringify({
+    title: props.codepenTitle,
+    private: true,
+    [lang]: scrubbedScript.value,
+  });
+});
+
+const onCopy = async e => {
+  e.preventDefault();
+  await copyTextToClipboard(scrubbedScript.value);
+  useAlert(t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+};
+</script>
+
+<template>
+  <div class="relative text-left">
+    <div
+      class="top-1.5 absolute ltr:right-1.5 rtl:left-1.5 flex backdrop-blur-sm rounded-lg items-center gap-1"
+    >
+      <form
+        v-if="enableCodePen"
+        class="flex items-center"
+        action="https://codepen.io/pen/define"
+        method="POST"
+        target="_blank"
+      >
+        <input type="hidden" name="data" :value="codepenScriptValue" />
+        <NextButton
+          slate
+          xs
+          type="submit"
+          faded
+          :label="t('COMPONENTS.CODE.CODEPEN')"
+        />
+      </form>
+      <NextButton
+        slate
+        xs
+        faded
+        :label="t('COMPONENTS.CODE.BUTTON_TEXT')"
+        @click="onCopy"
+      />
+    </div>
+    <highlightjs
+      v-if="script"
+      :language="lang"
+      :code="scrubbedScript"
+      class="[&_code]:text-start"
+    />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ConversationItem.vue

@@ -0,0 +1,75 @@
+<script>
+import ConversationCard from './widgets/conversation/ConversationCard.vue';
+export default {
+  components: {
+    ConversationCard,
+  },
+  inject: [
+    'selectConversation',
+    'deSelectConversation',
+    'assignAgent',
+    'assignTeam',
+    'assignLabels',
+    'removeLabels',
+    'updateConversationStatus',
+    'toggleContextMenu',
+    'markAsUnread',
+    'markAsRead',
+    'assignPriority',
+    'isConversationSelected',
+    'deleteConversation',
+  ],
+  props: {
+    source: {
+      type: Object,
+      required: true,
+    },
+    teamId: {
+      type: [String, Number],
+      default: 0,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    conversationType: {
+      type: String,
+      default: '',
+    },
+    foldersId: {
+      type: [String, Number],
+      default: 0,
+    },
+    showAssignee: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<template>
+  <ConversationCard
+    :key="source.id"
+    :active-label="label"
+    :team-id="teamId"
+    :folders-id="foldersId"
+    :chat="source"
+    :conversation-type="conversationType"
+    :selected="isConversationSelected(source.id)"
+    :show-assignee="showAssignee"
+    enable-context-menu
+    @select-conversation="selectConversation"
+    @de-select-conversation="deSelectConversation"
+    @assign-agent="assignAgent"
+    @assign-team="assignTeam"
+    @assign-label="assignLabels"
+    @remove-label="removeLabels"
+    @update-conversation-status="updateConversationStatus"
+    @context-menu-toggle="toggleContextMenu"
+    @mark-as-unread="markAsUnread"
+    @mark-as-read="markAsRead"
+    @assign-priority="assignPriority"
+    @delete-conversation="deleteConversation"
+  />
+</template>

research/chatwoot/app/javascript/dashboard/components/CustomAttribute.vue

@@ -0,0 +1,351 @@
+<script>
+import { format, parseISO } from 'date-fns';
+import { required, url } from '@vuelidate/validators';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
+import HelperTextPopup from 'dashboard/components/ui/HelperTextPopup.vue';
+import { isValidURL } from '../helper/URLHelper';
+import { getRegexp } from 'shared/helpers/Validators';
+import { useVuelidate } from '@vuelidate/core';
+import { emitter } from 'shared/helpers/mitt';
+
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+const DATE_FORMAT = 'yyyy-MM-dd';
+
+export default {
+  components: {
+    MultiselectDropdown,
+    HelperTextPopup,
+    NextButton,
+  },
+  props: {
+    label: { type: String, required: true },
+    description: { type: String, default: '' },
+    values: { type: Array, default: () => [] },
+    value: { type: [String, Number, Boolean], default: '' },
+    showActions: { type: Boolean, default: false },
+    attributeType: { type: String, default: 'text' },
+    attributeRegex: {
+      type: String,
+      default: null,
+    },
+    regexCue: { type: String, default: null },
+    attributeKey: { type: String, required: true },
+    contactId: { type: Number, default: null },
+  },
+  emits: ['update', 'delete', 'copy'],
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      isEditing: false,
+      editedValue: null,
+    };
+  },
+  computed: {
+    displayValue() {
+      if (this.isAttributeTypeDate) {
+        return this.value
+          ? new Date(this.value || new Date()).toLocaleDateString()
+          : '---';
+      }
+      if (this.isAttributeTypeCheckbox) {
+        return this.value === 'false' ? false : this.value;
+      }
+      return this.hasValue ? this.value : '---';
+    },
+    formattedValue() {
+      return this.isAttributeTypeDate
+        ? format(this.value ? new Date(this.value) : new Date(), DATE_FORMAT)
+        : this.value;
+    },
+    listOptions() {
+      return this.values.map((value, index) => ({
+        id: index + 1,
+        name: value,
+      }));
+    },
+    selectedItem() {
+      const id = this.values.indexOf(this.editedValue) + 1;
+      return { id, name: this.editedValue };
+    },
+    isAttributeTypeCheckbox() {
+      return this.attributeType === 'checkbox';
+    },
+    isAttributeTypeList() {
+      return this.attributeType === 'list';
+    },
+    isAttributeTypeLink() {
+      return this.attributeType === 'link';
+    },
+    isAttributeTypeDate() {
+      return this.attributeType === 'date';
+    },
+    hasValue() {
+      return this.value !== null && this.value !== '';
+    },
+    urlValue() {
+      return isValidURL(this.value) ? this.value : '---';
+    },
+    hrefURL() {
+      return isValidURL(this.value) ? this.value : '';
+    },
+    notAttributeTypeCheckboxAndList() {
+      return !this.isAttributeTypeCheckbox && !this.isAttributeTypeList;
+    },
+    inputType() {
+      return this.isAttributeTypeLink ? 'url' : this.attributeType;
+    },
+    shouldShowErrorMessage() {
+      return this.v$.editedValue.$error;
+    },
+    errorMessage() {
+      if (this.v$.editedValue.url) {
+        return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_URL');
+      }
+      if (!this.v$.editedValue.regexValidation) {
+        return this.regexCue
+          ? this.regexCue
+          : this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT');
+      }
+      return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.REQUIRED');
+    },
+  },
+  watch: {
+    value() {
+      this.isEditing = false;
+      this.editedValue = this.formattedValue;
+    },
+    contactId() {
+      // Fix to solve validation not resetting when contactId changes in contact page
+      this.v$.$reset();
+    },
+  },
+
+  validations() {
+    if (this.isAttributeTypeLink) {
+      return {
+        editedValue: { required, url },
+      };
+    }
+    return {
+      editedValue: {
+        required,
+        regexValidation: value => {
+          return !(
+            this.attributeRegex && !getRegexp(this.attributeRegex).test(value)
+          );
+        },
+      },
+    };
+  },
+  mounted() {
+    this.editedValue = this.formattedValue;
+    emitter.on(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
+  },
+  unmounted() {
+    emitter.off(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
+  },
+  methods: {
+    onFocusAttribute(focusAttributeKey) {
+      if (this.attributeKey === focusAttributeKey) {
+        this.onEdit();
+      }
+    },
+    focusInput() {
+      if (this.$refs.inputfield) {
+        this.$refs.inputfield.focus();
+      }
+    },
+    onClickAway() {
+      this.v$.$reset();
+      this.isEditing = false;
+    },
+    onEdit() {
+      this.isEditing = true;
+      this.$nextTick(() => {
+        this.focusInput();
+      });
+    },
+    onUpdateListValue(value) {
+      if (value) {
+        this.editedValue = value.name;
+        this.onUpdate();
+      }
+    },
+    onUpdate() {
+      const updatedValue =
+        this.attributeType === 'date'
+          ? parseISO(this.editedValue)
+          : this.editedValue;
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+      this.isEditing = false;
+      this.$emit('update', this.attributeKey, updatedValue);
+    },
+    onDelete() {
+      this.isEditing = false;
+      this.v$.$reset();
+      this.$emit('delete', this.attributeKey);
+    },
+    onCopy() {
+      this.$emit('copy', this.value);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="px-4 py-3">
+    <div class="flex items-center mb-1">
+      <h4 class="flex items-center w-full m-0 text-sm error">
+        <div v-if="isAttributeTypeCheckbox" class="flex items-center">
+          <input
+            v-model="editedValue"
+            class="!my-0 ltr:mr-2 ltr:ml-0 rtl:mr-0 rtl:ml-2"
+            type="checkbox"
+            @change="onUpdate"
+          />
+        </div>
+        <div class="flex items-center justify-between w-full">
+          <span
+            class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
+            :class="
+              v$.editedValue.$error ? 'text-n-ruby-11' : 'text-n-slate-12'
+            "
+          >
+            {{ label }}
+            <HelperTextPopup
+              v-if="description"
+              :message="description"
+              class="mt-0.5"
+            />
+          </span>
+          <NextButton
+            v-if="showActions && hasValue"
+            v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
+            slate
+            sm
+            link
+            icon="i-lucide-trash-2"
+            @click="onDelete"
+          />
+        </div>
+      </h4>
+    </div>
+    <div v-if="notAttributeTypeCheckboxAndList">
+      <div v-if="isEditing" v-on-clickaway="onClickAway">
+        <div class="flex items-center w-full mb-2">
+          <input
+            ref="inputfield"
+            v-model="editedValue"
+            :type="inputType"
+            class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
+            autofocus="true"
+            :class="{ error: v$.editedValue.$error }"
+            @blur="v$.editedValue.$touch"
+            @keyup.enter="onUpdate"
+          />
+          <div>
+            <NextButton
+              sm
+              icon="i-lucide-check"
+              class="ltr:rounded-l-none rtl:rounded-r-none h-[34px]"
+              @click="onUpdate"
+            />
+          </div>
+        </div>
+        <span
+          v-if="shouldShowErrorMessage"
+          class="block w-full -mt-px text-sm font-normal text-n-ruby-11"
+        >
+          {{ errorMessage }}
+        </span>
+      </div>
+      <div
+        v-show="!isEditing"
+        class="flex group"
+        :class="{ 'is-editable': showActions }"
+      >
+        <a
+          v-if="isAttributeTypeLink"
+          :href="hrefURL"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group-hover:bg-n-slate-3 group-hover:dark:bg-n-solid-3 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+        >
+          {{ urlValue }}
+        </a>
+        <p
+          v-else
+          class="group-hover:bg-n-slate-3 group-hover:dark:bg-n-solid-3 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+        >
+          {{ displayValue }}
+        </p>
+        <div
+          class="flex items-center max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0"
+        >
+          <NextButton
+            v-if="showActions && hasValue"
+            v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
+            xs
+            slate
+            ghost
+            icon="i-lucide-clipboard"
+            class="hidden group-hover:flex flex-shrink-0"
+            @click="onCopy"
+          />
+          <NextButton
+            v-if="showActions"
+            v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
+            xs
+            slate
+            ghost
+            icon="i-lucide-pen"
+            class="hidden group-hover:flex flex-shrink-0"
+            @click="onEdit"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="isAttributeTypeList">
+      <MultiselectDropdown
+        :options="listOptions"
+        :selected-item="selectedItem"
+        :has-thumbnail="false"
+        :multiselector-placeholder="
+          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.PLACEHOLDER')
+        "
+        :no-search-result="
+          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.NO_RESULT')
+        "
+        :input-placeholder="
+          $t(
+            'CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.SEARCH_INPUT_PLACEHOLDER'
+          )
+        "
+        @select="onUpdateListValue"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+::v-deep {
+  .selector-wrap {
+    @apply m-0 top-1;
+
+    .selector-name {
+      @apply ml-0;
+    }
+  }
+
+  .name {
+    @apply ml-0;
+  }
+}
+</style>

research/chatwoot/app/javascript/dashboard/components/CustomBrandPolicyWrapper.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { useStoreGetters } from 'dashboard/composables/store';
+import { computed } from 'vue';
+const props = defineProps({
+  showOnCustomBrandedInstance: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const getters = useStoreGetters();
+
+const isACustomBrandedInstance =
+  getters['globalConfig/isACustomBrandedInstance'];
+
+const shouldShowContent = computed(
+  () => props.showOnCustomBrandedInstance || !isACustomBrandedInstance.value
+);
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <div v-if="shouldShowContent">
+    <slot />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/CustomSnoozeModal.vue

@@ -0,0 +1,77 @@
+<script>
+import DatePicker from 'vue-datepicker-next';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+export default {
+  components: {
+    DatePicker,
+    NextButton,
+  },
+  emits: ['close', 'chooseTime'],
+
+  data() {
+    return {
+      snoozeTime: null,
+      lang: {
+        days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        yearFormat: 'YYYY',
+        monthFormat: 'MMMM',
+      },
+    };
+  },
+
+  methods: {
+    onClose() {
+      this.$emit('close');
+    },
+    chooseTime() {
+      this.$emit('chooseTime', this.snoozeTime);
+    },
+    disabledDate(date) {
+      // Disable all the previous dates
+      const yesterday = new Date();
+      yesterday.setDate(yesterday.getDate() - 1);
+      return date < yesterday;
+    },
+    disabledTime(date) {
+      // Allow only time after 1 hour
+      const now = new Date();
+      now.setHours(now.getHours() + 1);
+      return date < now;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
+    <form
+      class="modal-content w-full pt-2 px-5 pb-6"
+      @submit.prevent="chooseTime"
+    >
+      <DatePicker
+        v-model:value="snoozeTime"
+        type="datetime"
+        inline
+        input-class="mx-input "
+        :lang="lang"
+        :disabled-date="disabledDate"
+        :disabled-time="disabledTime"
+      />
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <NextButton
+          faded
+          slate
+          type="reset"
+          :label="$t('CONVERSATION.CUSTOM_SNOOZE.CANCEL')"
+          @click.prevent="onClose"
+        />
+        <NextButton
+          type="submit"
+          :label="$t('CONVERSATION.CUSTOM_SNOOZE.APPLY')"
+        />
+      </div>
+    </form>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/IntersectionObserver.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { ref, defineEmits } from 'vue';
+import { useIntersectionObserver } from '@vueuse/core';
+
+const { options } = defineProps({
+  options: {
+    type: Object,
+    default: () => ({ root: document, rootMargin: '100px 0 100px 0)' }),
+  },
+});
+
+const emit = defineEmits(['observed']);
+const observedElement = ref('');
+
+useIntersectionObserver(
+  observedElement,
+  ([{ isIntersecting }]) => {
+    if (isIntersecting) {
+      emit('observed');
+    }
+  },
+  options
+);
+</script>
+
+<template>
+  <div ref="observedElement" class="h-6 w-full" />
+</template>

research/chatwoot/app/javascript/dashboard/components/Modal.vue

@@ -0,0 +1,151 @@
+<script setup>
+// [TODO] Use Teleport to move the modal to the end of the body
+import { ref, computed, defineEmits, onMounted } from 'vue';
+import { useEventListener } from '@vueuse/core';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const { modalType, closeOnBackdropClick, onClose } = defineProps({
+  closeOnBackdropClick: { type: Boolean, default: true },
+  showCloseButton: { type: Boolean, default: true },
+  onClose: { type: Function, required: true },
+  fullWidth: { type: Boolean, default: false },
+  modalType: { type: String, default: 'centered' },
+  size: { type: String, default: '' },
+});
+
+const emit = defineEmits(['close']);
+const show = defineModel('show', { type: Boolean, default: false });
+
+const modalClassName = computed(() => {
+  const modalClassNameMap = {
+    centered: '',
+    'right-aligned': 'right-aligned',
+  };
+
+  return `modal-mask skip-context-menu ${modalClassNameMap[modalType] || ''}`;
+});
+
+// [TODO] Revisit this logic to use outside click directive
+const mousedDownOnBackdrop = ref(false);
+
+const handleMouseDown = () => {
+  mousedDownOnBackdrop.value = true;
+};
+
+const close = () => {
+  show.value = false;
+  emit('close');
+  onClose();
+};
+
+const onMouseUp = () => {
+  if (mousedDownOnBackdrop.value) {
+    mousedDownOnBackdrop.value = false;
+    if (closeOnBackdropClick) {
+      close();
+    }
+  }
+};
+
+const onKeydown = e => {
+  if (show.value && e.code === 'Escape') {
+    close();
+    e.stopPropagation();
+  }
+};
+
+useEventListener(document.body, 'mouseup', onMouseUp);
+useEventListener(document, 'keydown', onKeydown);
+
+onMounted(() => {
+  if (import.meta.env.DEV && onClose && typeof onClose === 'function') {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "[DEPRECATED] The 'onClose' prop is deprecated. Please use the 'close' event instead."
+    );
+  }
+});
+</script>
+
+<template>
+  <transition name="modal-fade">
+    <div
+      v-if="show"
+      :class="modalClassName"
+      transition="modal"
+      @mousedown="handleMouseDown"
+    >
+      <div
+        class="relative max-h-full overflow-auto bg-n-alpha-3 shadow-md modal-container rtl:text-right skip-context-menu"
+        :class="{
+          'rounded-xl w-[37.5rem]': !fullWidth,
+          'items-center rounded-none flex h-full justify-center w-full':
+            fullWidth,
+          [size]: true,
+        }"
+        @mouse.stop
+        @mousedown="event => event.stopPropagation()"
+      >
+        <Button
+          v-if="showCloseButton"
+          ghost
+          slate
+          icon="i-lucide-x"
+          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
+          @click="close"
+        />
+        <slot />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style lang="scss">
+.modal-mask {
+  @apply flex items-center justify-center bg-n-alpha-black2 backdrop-blur-[4px] z-[9990] h-full left-0 fixed top-0 w-full;
+
+  .modal-container {
+    &.medium {
+      @apply max-w-[80%] w-[56.25rem];
+    }
+
+    // .content-box {
+    //   @apply h-auto p-0;
+    // }
+    .content {
+      @apply p-8;
+    }
+
+    form,
+    .modal-content {
+      @apply pt-4 pb-8 px-8 self-center;
+
+      a {
+        @apply p-4;
+      }
+    }
+  }
+}
+
+.modal-big {
+  @apply w-full;
+}
+
+.modal-mask.right-aligned {
+  @apply justify-end;
+
+  .modal-container {
+    @apply rounded-none h-full w-[30rem];
+  }
+}
+
+.modal-enter,
+.modal-leave {
+  @apply opacity-0;
+}
+
+.modal-enter .modal-container,
+.modal-leave .modal-container {
+  transform: scale(1.1);
+}
+</style>

research/chatwoot/app/javascript/dashboard/components/ModalHeader.vue

@@ -0,0 +1,50 @@
+<script>
+export default {
+  props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    headerContent: {
+      type: String,
+      default: '',
+    },
+    headerContentValue: {
+      type: String,
+      default: '',
+    },
+    headerImage: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<!-- eslint-disable vue/no-unused-refs -->
+<!-- Added ref for writing specs -->
+<template>
+  <div class="flex flex-col items-start px-8 pt-8 pb-0">
+    <img v-if="headerImage" :src="headerImage" alt="No image" />
+    <h2
+      data-test-id="modal-header-title"
+      class="text-base font-semibold leading-6 text-n-slate-12"
+    >
+      {{ headerTitle }}
+    </h2>
+    <p
+      v-if="headerContent"
+      data-test-id="modal-header-content"
+      class="w-full mt-2 text-sm leading-5 break-words text-n-slate-11"
+    >
+      {{ headerContent }}
+      <span
+        v-if="headerContentValue"
+        class="text-sm font-semibold text-n-slate-11"
+      >
+        {{ headerContentValue }}
+      </span>
+    </p>
+    <slot />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/NetworkNotification.vue

@@ -0,0 +1,142 @@
+<script setup>
+import { ref, computed, onBeforeUnmount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { useEmitter } from 'dashboard/composables/emitter';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import {
+  isAConversationRoute,
+  isAInboxViewRoute,
+  isNotificationRoute,
+} from 'dashboard/helper/routeHelpers';
+import { useEventListener } from '@vueuse/core';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const RECONNECTED_BANNER_TIMEOUT = 2000;
+
+const showNotification = ref(!navigator.onLine);
+const isDisconnected = ref(false);
+const isReconnecting = ref(false);
+const isReconnected = ref(false);
+let reconnectTimeout = null;
+
+const bannerText = computed(() => {
+  if (isReconnecting.value) return t('NETWORK.NOTIFICATION.RECONNECTING');
+  if (isReconnected.value) return t('NETWORK.NOTIFICATION.RECONNECT_SUCCESS');
+  return t('NETWORK.NOTIFICATION.OFFLINE');
+});
+
+const iconName = computed(() => (isReconnected.value ? 'wifi' : 'wifi-off'));
+const canRefresh = computed(
+  () => !isReconnecting.value && !isReconnected.value
+);
+
+const refreshPage = () => {
+  window.location.reload();
+};
+
+const closeNotification = () => {
+  showNotification.value = false;
+  isReconnected.value = false;
+  clearTimeout(reconnectTimeout);
+};
+
+const isInAnyOfTheRoutes = routeName => {
+  return (
+    isAConversationRoute(routeName, true) ||
+    isAInboxViewRoute(routeName, true) ||
+    isNotificationRoute(routeName, true)
+  );
+};
+
+const updateWebsocketStatus = () => {
+  isDisconnected.value = true;
+  showNotification.value = true;
+};
+
+const handleReconnectionCompleted = () => {
+  isDisconnected.value = false;
+  isReconnecting.value = false;
+  isReconnected.value = true;
+  showNotification.value = true;
+  reconnectTimeout = setTimeout(closeNotification, RECONNECTED_BANNER_TIMEOUT);
+};
+
+const handleReconnecting = () => {
+  if (isInAnyOfTheRoutes(route.name)) {
+    isReconnecting.value = true;
+    isReconnected.value = false;
+    showNotification.value = true;
+  } else {
+    handleReconnectionCompleted();
+  }
+};
+
+const updateOnlineStatus = event => {
+  // Case: Websocket is not disconnected
+  // If the app goes offline, show the notification
+  // If the app goes online, close the notification
+
+  // Case: Websocket is disconnected
+  // If the app goes offline, show the notification
+  // If the app goes online but the websocket is disconnected, don't close the notification
+  // If the app goes online and the websocket is not disconnected, close the notification
+
+  if (event.type === 'offline') {
+    showNotification.value = true;
+  } else if (event.type === 'online' && !isDisconnected.value) {
+    handleReconnectionCompleted();
+  }
+};
+
+useEventListener('online', updateOnlineStatus);
+useEventListener('offline', updateOnlineStatus);
+useEmitter(BUS_EVENTS.WEBSOCKET_DISCONNECT, updateWebsocketStatus);
+useEmitter(
+  BUS_EVENTS.WEBSOCKET_RECONNECT_COMPLETED,
+  handleReconnectionCompleted
+);
+useEmitter(BUS_EVENTS.WEBSOCKET_RECONNECT, handleReconnecting);
+
+onBeforeUnmount(() => {
+  clearTimeout(reconnectTimeout);
+});
+</script>
+
+<template>
+  <transition name="network-notification-fade" tag="div">
+    <div v-show="showNotification" class="fixed z-50 top-2 left-2 group">
+      <div
+        class="relative flex items-center justify-between w-full px-2 py-1 bg-n-amber-4 dark:bg-n-amber-8 rounded-lg shadow-lg"
+      >
+        <fluent-icon :icon="iconName" class="text-n-amber-12" size="18" />
+        <span class="px-2 text-xs font-medium tracking-wide text-n-amber-12">
+          {{ bannerText }}
+        </span>
+        <Button
+          v-if="canRefresh"
+          ghost
+          sm
+          amber
+          icon="i-lucide-refresh-ccw"
+          :title="$t('NETWORK.BUTTON.REFRESH')"
+          class="!text-n-amber-12 dark:!text-n-amber-9"
+          @click="refreshPage"
+        />
+
+        <Button
+          ghost
+          sm
+          amber
+          icon="i-lucide-x"
+          class="!text-n-amber-12 dark:!text-n-amber-9"
+          @click="closeNotification"
+        />
+      </div>
+    </div>
+  </transition>
+</template>

research/chatwoot/app/javascript/dashboard/components/SettingsSection.vue

@@ -0,0 +1,51 @@
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    subTitle: {
+      type: String,
+      default: '',
+    },
+    showBorder: {
+      type: Boolean,
+      default: true,
+    },
+    note: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="ml-0 mr-0 py-8 w-full"
+    :class="{
+      'border-b border-solid border-n-weak/60 dark:border-n-weak': showBorder,
+    }"
+  >
+    <div class="grid grid-cols-1 lg:grid-cols-8 gap-6">
+      <div class="col-span-2">
+        <p v-if="title" class="text-base text-n-brand mb-0 font-medium">
+          {{ title }}
+        </p>
+        <p class="text-sm mb-2 text-n-slate-11 leading-5 tracking-normal mt-2">
+          <slot v-if="subTitle" name="subTitle">
+            {{ subTitle }}
+          </slot>
+        </p>
+        <p v-if="note">
+          <span class="font-semibold">{{ $t('INBOX_MGMT.NOTE') }}</span>
+          {{ note }}
+        </p>
+      </div>
+      <div class="col-span-6 xl:col-span-5">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/Snackbar.vue

@@ -0,0 +1,39 @@
+<script>
+export default {
+  props: {
+    message: { type: String, default: '' },
+    action: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      toggleAfterTimeout: false,
+    };
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<template>
+  <div>
+    <div
+      class="shadow-sm bg-n-slate-12 dark:bg-n-slate-7 rounded-lg items-center gap-3 inline-flex mb-2 max-w-[25rem] min-h-[1.875rem] min-w-[15rem] px-6 py-3 text-left"
+    >
+      <div class="text-sm font-medium text-white dark:text-white">
+        {{ message }}
+      </div>
+      <div v-if="action">
+        <router-link
+          v-if="action.type == 'link'"
+          :to="action.to"
+          class="font-medium cursor-pointer select-none text-n-blue-10 hover:text-n-brand"
+        >
+          {{ action.message }}
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/SnackbarContainer.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+import WootSnackbar from './Snackbar.vue';
+import { emitter } from 'shared/helpers/mitt';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  duration: {
+    type: Number,
+    default: 2500,
+  },
+});
+
+const { t } = useI18n();
+
+const snackMessages = ref([]);
+const snackbarContainer = ref(null);
+
+const showPopover = () => {
+  try {
+    const el = snackbarContainer.value;
+    if (el?.matches(':popover-open')) {
+      el.hidePopover();
+    }
+    el?.showPopover();
+  } catch (e) {
+    // ignore
+  }
+};
+
+const onNewToastMessage = ({ message: originalMessage, action }) => {
+  const message = action?.usei18n ? t(originalMessage) : originalMessage;
+  const duration = action?.duration || props.duration;
+
+  snackMessages.value.push({
+    key: Date.now(),
+    message,
+    action,
+  });
+
+  nextTick(showPopover);
+
+  setTimeout(() => {
+    snackMessages.value.shift();
+  }, duration);
+};
+
+onMounted(() => {
+  emitter.on('newToastMessage', onNewToastMessage);
+});
+
+onUnmounted(() => {
+  emitter.off('newToastMessage', onNewToastMessage);
+});
+</script>
+
+<template>
+  <div
+    ref="snackbarContainer"
+    popover="manual"
+    class="fixed top-4 left-1/2 -translate-x-1/2 max-w-[25rem] w-[calc(100%-2rem)] text-center bg-transparent border-0 p-0 m-0 outline-none overflow-visible"
+  >
+    <transition-group name="toast-fade" tag="div">
+      <WootSnackbar
+        v-for="snackMessage in snackMessages"
+        :key="snackMessage.key"
+        :message="snackMessage.message"
+        :action="snackMessage.action"
+      />
+    </transition-group>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/app/AddAccountModal.vue

@@ -0,0 +1,115 @@
+<script>
+import { required, minLength } from '@vuelidate/validators';
+import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+export default {
+  components: {
+    NextButton,
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    hasAccounts: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ['closeAccountCreateModal'],
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      accountName: '',
+    };
+  },
+  validations() {
+    return {
+      accountName: {
+        required,
+        minLength: minLength(1),
+      },
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'agents/getUIFlags',
+    }),
+  },
+  methods: {
+    async addAccount() {
+      try {
+        const account_id = await this.$store.dispatch('accounts/create', {
+          account_name: this.accountName,
+        });
+        this.$emit('closeAccountCreateModal');
+        useAlert(this.$t('CREATE_ACCOUNT.API.SUCCESS_MESSAGE'));
+        window.location = `/app/accounts/${account_id}/dashboard`;
+      } catch (error) {
+        if (error.response.status === 422) {
+          useAlert(this.$t('CREATE_ACCOUNT.API.EXIST_MESSAGE'));
+        } else {
+          useAlert(this.$t('CREATE_ACCOUNT.API.ERROR_MESSAGE'));
+        }
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <woot-modal :show="show" :on-close="() => $emit('closeAccountCreateModal')">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
+        :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
+      />
+      <div v-if="!hasAccounts" class="mx-8 mt-6 mb-0 text-sm">
+        <div class="flex items-center rounded-md alert">
+          <div class="ml-1 mr-3">
+            <fluent-icon icon="warning" />
+          </div>
+          {{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
+        </div>
+      </div>
+
+      <form class="flex flex-col w-full" @submit.prevent="addAccount">
+        <div class="w-full">
+          <label :class="{ error: v$.accountName.$error }">
+            {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
+            <input
+              v-model="accountName"
+              type="text"
+              :placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
+              @input="v$.accountName.$touch"
+            />
+          </label>
+        </div>
+        <div class="w-full flex justify-end gap-2 items-center">
+          <NextButton
+            faded
+            slate
+            type="reset"
+            :label="$t('CREATE_ACCOUNT.FORM.CANCEL')"
+            @click.prevent="() => $emit('closeAccountCreateModal')"
+          />
+          <NextButton
+            type="submit"
+            :label="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
+            :is-loading="uiFlags.isCreating"
+            :disabled="
+              v$.accountName.$invalid ||
+              v$.accountName.$invalid ||
+              uiFlags.isCreating
+            "
+          />
+        </div>
+      </form>
+    </div>
+  </woot-modal>
+</template>

research/chatwoot/app/javascript/dashboard/components/app/PaymentPendingBanner.vue

@@ -0,0 +1,92 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import { useAccount } from 'dashboard/composables/useAccount';
+import Banner from 'dashboard/components/ui/Banner.vue';
+
+const EMPTY_SUBSCRIPTION_INFO = {
+  status: null,
+  endsOn: null,
+};
+
+export default {
+  components: { Banner },
+  setup() {
+    const { isAdmin } = useAdmin();
+
+    const { accountId } = useAccount();
+
+    return {
+      accountId,
+      isAdmin,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
+      getAccount: 'accounts/getAccount',
+    }),
+    bannerMessage() {
+      return this.$t('GENERAL_SETTINGS.PAYMENT_PENDING');
+    },
+    actionButtonMessage() {
+      return this.$t('GENERAL_SETTINGS.OPEN_BILLING');
+    },
+    shouldShowBanner() {
+      if (!this.isOnChatwootCloud) {
+        return false;
+      }
+
+      if (!this.isAdmin) {
+        return false;
+      }
+
+      return this.isPaymentPending();
+    },
+  },
+  methods: {
+    routeToBilling() {
+      this.$router.push({
+        name: 'billing_settings_index',
+        params: { accountId: this.accountId },
+      });
+    },
+    isPaymentPending() {
+      const { status, endsOn } = this.getSubscriptionInfo();
+
+      if (status && endsOn) {
+        const now = new Date();
+        if (status === 'past_due' && endsOn < now) {
+          return true;
+        }
+      }
+
+      return false;
+    },
+    getSubscriptionInfo() {
+      const account = this.getAccount(this.accountId);
+      if (!account) return EMPTY_SUBSCRIPTION_INFO;
+
+      const { custom_attributes: subscription } = account;
+      if (!subscription) return EMPTY_SUBSCRIPTION_INFO;
+
+      const { subscription_status: status, subscription_ends_on: endsOn } =
+        subscription;
+
+      return { status, endsOn: new Date(endsOn) };
+    },
+  },
+};
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <Banner
+    v-if="shouldShowBanner"
+    color-scheme="alert"
+    :banner-message="bannerMessage"
+    :action-button-label="actionButtonMessage"
+    has-action-button
+    @primary-action="routeToBilling"
+  />
+</template>

research/chatwoot/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue

@@ -0,0 +1,42 @@
+<script>
+import Banner from 'dashboard/components/ui/Banner.vue';
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+
+export default {
+  components: { Banner },
+  computed: {
+    ...mapGetters({
+      currentUser: 'getCurrentUser',
+    }),
+    bannerMessage() {
+      return this.$t('APP_GLOBAL.EMAIL_VERIFICATION_PENDING');
+    },
+    actionButtonMessage() {
+      return this.$t('APP_GLOBAL.RESEND_VERIFICATION_MAIL');
+    },
+    shouldShowBanner() {
+      return !this.currentUser.confirmed;
+    },
+  },
+  methods: {
+    resendVerificationEmail() {
+      this.$store.dispatch('resendConfirmation');
+      useAlert(this.$t('APP_GLOBAL.EMAIL_VERIFICATION_SENT'));
+    },
+  },
+};
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <Banner
+    v-if="shouldShowBanner"
+    color-scheme="alert"
+    :banner-message="bannerMessage"
+    :action-button-label="actionButtonMessage"
+    action-button-icon="i-lucide-mail"
+    has-action-button
+    @primary-action="resendVerificationEmail"
+  />
+</template>

research/chatwoot/app/javascript/dashboard/components/app/UpdateBanner.vue

@@ -0,0 +1,81 @@
+<script>
+import Banner from 'dashboard/components/ui/Banner.vue';
+import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
+import { LocalStorage } from 'shared/helpers/localStorage';
+import { mapGetters } from 'vuex';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import { hasAnUpdateAvailable } from './versionCheckHelper';
+
+export default {
+  components: { Banner },
+  props: {
+    latestChatwootVersion: { type: String, default: '' },
+  },
+  setup() {
+    const { isAdmin } = useAdmin();
+    return {
+      isAdmin,
+    };
+  },
+  data() {
+    return { userDismissedBanner: false };
+  },
+  computed: {
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+    updateAvailable() {
+      return hasAnUpdateAvailable(
+        this.latestChatwootVersion,
+        this.globalConfig.appVersion
+      );
+    },
+    bannerMessage() {
+      return this.$t('GENERAL_SETTINGS.UPDATE_CHATWOOT', {
+        latestChatwootVersion: this.latestChatwootVersion,
+      });
+    },
+    shouldShowBanner() {
+      return (
+        !this.userDismissedBanner &&
+        this.globalConfig.displayManifest &&
+        this.updateAvailable &&
+        !this.isVersionNotificationDismissed(this.latestChatwootVersion) &&
+        this.isAdmin
+      );
+    },
+  },
+  methods: {
+    isVersionNotificationDismissed(version) {
+      const dismissedVersions =
+        LocalStorage.get(LOCAL_STORAGE_KEYS.DISMISSED_UPDATES) || [];
+      return dismissedVersions.includes(version);
+    },
+    dismissUpdateBanner() {
+      let updatedDismissedItems =
+        LocalStorage.get(LOCAL_STORAGE_KEYS.DISMISSED_UPDATES) || [];
+      if (updatedDismissedItems instanceof Array) {
+        updatedDismissedItems.push(this.latestChatwootVersion);
+      } else {
+        updatedDismissedItems = [this.latestChatwootVersion];
+      }
+      LocalStorage.set(
+        LOCAL_STORAGE_KEYS.DISMISSED_UPDATES,
+        updatedDismissedItems
+      );
+      this.userDismissedBanner = true;
+    },
+  },
+};
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <Banner
+    v-if="shouldShowBanner"
+    color-scheme="primary"
+    :banner-message="bannerMessage"
+    href-link="https://github.com/chatwoot/chatwoot/releases"
+    :href-link-text="$t('GENERAL_SETTINGS.LEARN_MORE')"
+    has-close-button
+    @close="dismissUpdateBanner"
+  />
+</template>

research/chatwoot/app/javascript/dashboard/components/app/specs/versionCheckHelper.spec.js

@@ -0,0 +1,15 @@
+import { hasAnUpdateAvailable } from '../versionCheckHelper';
+
+describe('#hasAnUpdateAvailable', () => {
+  it('return false if latest version is invalid', () => {
+    expect(hasAnUpdateAvailable('invalid', '1.0.0')).toBe(false);
+    expect(hasAnUpdateAvailable(null, '1.0.0')).toBe(false);
+    expect(hasAnUpdateAvailable(undefined, '1.0.0')).toBe(false);
+    expect(hasAnUpdateAvailable('', '1.0.0')).toBe(false);
+  });
+
+  it('return correct value if latest version is valid', () => {
+    expect(hasAnUpdateAvailable('1.1.0', '1.0.0')).toBe(true);
+    expect(hasAnUpdateAvailable('0.1.0', '1.0.0')).toBe(false);
+  });
+});

research/chatwoot/app/javascript/dashboard/components/app/versionCheckHelper.js

@@ -0,0 +1,8 @@
+import semver from 'semver';
+
+export const hasAnUpdateAvailable = (latestVersion, currentVersion) => {
+  if (!semver.valid(latestVersion)) {
+    return false;
+  }
+  return semver.lt(currentVersion, latestVersion);
+};

research/chatwoot/app/javascript/dashboard/components/auth/MfaVerification.vue

@@ -0,0 +1,328 @@
+<script setup>
+import axios from 'axios';
+import { ref, computed, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { handleOtpPaste } from 'shared/helpers/clipboard';
+import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
+import { useAccount } from 'dashboard/composables/useAccount';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import FormInput from 'v3/components/Form/Input.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const props = defineProps({
+  mfaToken: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['verified', 'cancel']);
+
+const { t } = useI18n();
+const { isOnChatwootCloud } = useAccount();
+
+const OTP = 'otp';
+const BACKUP = 'backup';
+
+// State
+const verificationMethod = ref(OTP);
+const otpDigits = ref(['', '', '', '', '', '']);
+const backupCode = ref('');
+const isVerifying = ref(false);
+const errorMessage = ref('');
+const helpModalRef = ref(null);
+const otpInputRefs = ref([]);
+
+// Computed
+const otpCode = computed(() => otpDigits.value.join(''));
+const canSubmit = computed(() =>
+  verificationMethod.value === OTP
+    ? otpCode.value.length === 6
+    : backupCode.value.length === 8
+);
+
+const contactDescKey = computed(() =>
+  isOnChatwootCloud.value ? 'CONTACT_DESC_CLOUD' : 'CONTACT_DESC_SELF_HOSTED'
+);
+
+const focusInput = i => otpInputRefs.value[i]?.focus();
+
+// Verification
+const handleVerification = async () => {
+  if (!canSubmit.value || isVerifying.value) return;
+
+  isVerifying.value = true;
+  errorMessage.value = '';
+
+  try {
+    const payload = {
+      mfa_token: props.mfaToken,
+    };
+
+    if (verificationMethod.value === OTP) {
+      payload.otp_code = otpCode.value;
+    } else {
+      payload.backup_code = backupCode.value;
+    }
+
+    const response = await axios.post('/auth/sign_in', payload);
+
+    // Set auth credentials and redirect
+    if (response.data && response.headers) {
+      // Store auth credentials in cookies
+      const authData = {
+        'access-token': response.headers['access-token'],
+        'token-type': response.headers['token-type'],
+        client: response.headers.client,
+        expiry: response.headers.expiry,
+        uid: response.headers.uid,
+      };
+
+      // Store in cookies for auth
+      document.cookie = `cw_d_session_info=${encodeURIComponent(JSON.stringify(authData))}; path=/; SameSite=Lax`;
+
+      // Redirect to dashboard
+      window.location.href = '/app/';
+    } else {
+      emit('verified', response.data);
+    }
+  } catch (error) {
+    errorMessage.value =
+      parseAPIErrorResponse(error) || t('MFA_VERIFICATION.VERIFICATION_FAILED');
+
+    // Clear inputs on error
+    if (verificationMethod.value === OTP) {
+      otpDigits.value.fill('');
+      await nextTick();
+      focusInput(0);
+    } else {
+      backupCode.value = '';
+    }
+  } finally {
+    isVerifying.value = false;
+  }
+};
+
+// OTP Input Handling
+const handleOtpInput = async i => {
+  const v = otpDigits.value[i];
+
+  // Only allow numbers
+  if (!/^\d*$/.test(v)) {
+    otpDigits.value[i] = '';
+    return;
+  }
+
+  // Move to next input if value entered
+  if (v && i < 5) {
+    await nextTick();
+    focusInput(i + 1);
+  }
+
+  // Auto-submit if all digits entered
+  if (otpCode.value.length === 6) {
+    handleVerification();
+  }
+};
+
+const handleBackspace = (e, i) => {
+  if (!otpDigits.value[i] && i > 0) {
+    e.preventDefault();
+    focusInput(i - 1);
+    otpDigits.value[i - 1] = '';
+  }
+};
+
+const handleOtpCodePaste = e => {
+  e.preventDefault();
+  const code = handleOtpPaste(e, 6);
+
+  if (code) {
+    otpDigits.value = code.split('');
+    handleVerification();
+  }
+};
+
+// Alternative Actions
+const handleTryAnotherMethod = () => {
+  // Toggle between methods
+  verificationMethod.value = verificationMethod.value === OTP ? BACKUP : OTP;
+  otpDigits.value.fill('');
+  backupCode.value = '';
+  errorMessage.value = '';
+};
+</script>
+
+<template>
+  <div class="w-full max-w-md mx-auto">
+    <div
+      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
+    >
+      <!-- Header -->
+      <div class="text-center mb-6">
+        <div
+          class="inline-flex items-center justify-center size-14 bg-n-solid-1 outline outline-n-weak rounded-full mb-4"
+        >
+          <Icon icon="i-lucide-lock-keyhole" class="size-6 text-n-slate-10" />
+        </div>
+        <h2 class="text-2xl font-semibold text-n-slate-12">
+          {{ $t('MFA_VERIFICATION.TITLE') }}
+        </h2>
+        <p class="text-sm text-n-slate-11 mt-2">
+          {{ $t('MFA_VERIFICATION.DESCRIPTION') }}
+        </p>
+      </div>
+
+      <!-- Tab Selection -->
+      <div class="flex rounded-lg bg-n-alpha-black2 p-1 mb-6">
+        <button
+          v-for="method in [OTP, BACKUP]"
+          :key="method"
+          class="flex-1 py-2 px-4 text-sm font-medium rounded-md transition-colors"
+          :class="
+            verificationMethod === method
+              ? 'bg-n-solid-active text-n-slate-12 shadow-sm'
+              : 'text-n-slate-12'
+          "
+          @click="verificationMethod = method"
+        >
+          {{
+            $t(
+              `MFA_VERIFICATION.${method === OTP ? 'AUTHENTICATOR_APP' : 'BACKUP_CODE'}`
+            )
+          }}
+        </button>
+      </div>
+
+      <!-- Verification Form -->
+      <form class="space-y-4" @submit.prevent="handleVerification">
+        <!-- OTP Code Input -->
+        <div v-if="verificationMethod === OTP">
+          <label class="block text-sm font-medium text-n-slate-12 mb-2">
+            {{ $t('MFA_VERIFICATION.ENTER_OTP_CODE') }}
+          </label>
+          <div class="flex justify-between gap-2">
+            <input
+              v-for="(_, i) in otpDigits"
+              :key="i"
+              ref="otpInputRefs"
+              v-model="otpDigits[i]"
+              type="text"
+              maxlength="1"
+              pattern="[0-9]"
+              inputmode="numeric"
+              class="w-12 h-12 text-center text-lg font-semibold border-2 border-n-weak hover:border-n-strong rounded-lg focus:border-n-brand bg-n-alpha-black2 text-n-slate-12 placeholder:text-n-slate-10"
+              @input="handleOtpInput(i)"
+              @keydown.left.prevent="focusInput(i - 1)"
+              @keydown.right.prevent="focusInput(i + 1)"
+              @keydown.backspace="handleBackspace($event, i)"
+              @paste="handleOtpCodePaste"
+            />
+          </div>
+        </div>
+
+        <!-- Backup Code Input -->
+        <div v-if="verificationMethod === BACKUP">
+          <FormInput
+            v-model="backupCode"
+            name="backup_code"
+            type="text"
+            data-testid="backup_code_input"
+            :tabindex="1"
+            required
+            :label="$t('MFA_VERIFICATION.ENTER_BACKUP_CODE')"
+            :placeholder="
+              $t('MFA_VERIFICATION.BACKUP_CODE_PLACEHOLDER') || '000000'
+            "
+            @keyup.enter="handleVerification"
+          />
+        </div>
+
+        <!-- Error Message -->
+        <div
+          v-if="errorMessage"
+          class="p-3 bg-n-ruby-3 outline outline-n-ruby-5 outline-1 rounded-lg"
+        >
+          <p class="text-sm text-n-ruby-9">{{ errorMessage }}</p>
+        </div>
+
+        <!-- Submit Button -->
+        <NextButton
+          lg
+          type="submit"
+          data-testid="submit_button"
+          class="w-full"
+          :tabindex="2"
+          :label="$t('MFA_VERIFICATION.VERIFY_BUTTON')"
+          :disabled="!canSubmit || isVerifying"
+          :is-loading="isVerifying"
+        />
+
+        <!-- Alternative Actions -->
+        <div class="text-center flex items-center flex-col gap-2 pt-4">
+          <NextButton
+            sm
+            link
+            type="button"
+            class="w-full hover:!no-underline"
+            :tabindex="2"
+            :label="$t('MFA_VERIFICATION.TRY_ANOTHER_METHOD')"
+            @click="handleTryAnotherMethod"
+          />
+          <NextButton
+            sm
+            slate
+            link
+            type="button"
+            class="w-full hover:!no-underline"
+            :tabindex="3"
+            :label="$t('MFA_VERIFICATION.CANCEL_LOGIN')"
+            @click="() => emit('cancel')"
+          />
+        </div>
+      </form>
+    </div>
+
+    <!-- Help Text -->
+    <div class="mt-6 text-center">
+      <p class="text-sm text-n-slate-11">
+        {{ $t('MFA_VERIFICATION.HELP_TEXT') }}
+      </p>
+      <NextButton
+        sm
+        link
+        type="button"
+        class="w-full hover:!no-underline"
+        :tabindex="4"
+        :label="$t('MFA_VERIFICATION.LEARN_MORE')"
+        @click="helpModalRef?.open()"
+      />
+    </div>
+
+    <!-- Help Modal -->
+    <Dialog
+      ref="helpModalRef"
+      :title="$t('MFA_VERIFICATION.HELP_MODAL.TITLE')"
+      :show-confirm-button="false"
+      class="[&>dialog>div]:bg-n-alpha-3 [&>dialog>div]:rounded-lg"
+      @confirm="helpModalRef?.close()"
+    >
+      <div class="space-y-4 text-sm text-n-slate-11">
+        <div v-for="section in ['AUTHENTICATOR', 'BACKUP']" :key="section">
+          <h4 class="font-medium text-n-slate-12 mb-2">
+            {{ $t(`MFA_VERIFICATION.HELP_MODAL.${section}_TITLE`) }}
+          </h4>
+          <p>{{ $t(`MFA_VERIFICATION.HELP_MODAL.${section}_DESC`) }}</p>
+        </div>
+        <div>
+          <h4 class="font-medium text-n-slate-12 mb-2">
+            {{ $t('MFA_VERIFICATION.HELP_MODAL.CONTACT_TITLE') }}
+          </h4>
+          <p>{{ $t(`MFA_VERIFICATION.HELP_MODAL.${contactDescKey}`) }}</p>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/base/Hotkey.vue

@@ -0,0 +1,22 @@
+<script>
+export default {
+  props: {
+    customClass: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <kbd class="hotkey p-0.5 min-w-[1rem] uppercase" :class="customClass">
+    <slot />
+  </kbd>
+</template>
+
+<style lang="scss">
+kbd.hotkey {
+  @apply inline-flex leading-[0.625rem] rounded tracking-wide flex-shrink-0 items-center select-none justify-center;
+}
+</style>

research/chatwoot/app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -0,0 +1,258 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useAlert } from 'dashboard/composables';
+import { useToggle } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { useStore, useStoreGetters } from 'dashboard/composables/store';
+import { useEmitter } from 'dashboard/composables/emitter';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { useConversationRequiredAttributes } from 'dashboard/composables/useConversationRequiredAttributes';
+
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import wootConstants from 'dashboard/constants/globals';
+import {
+  CMD_REOPEN_CONVERSATION,
+  CMD_RESOLVE_CONVERSATION,
+} from 'dashboard/helper/commandbar/events';
+
+import ButtonGroup from 'dashboard/components-next/buttonGroup/ButtonGroup.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ConversationResolveAttributesModal from 'dashboard/components-next/ConversationWorkflow/ConversationResolveAttributesModal.vue';
+
+const store = useStore();
+const getters = useStoreGetters();
+const { t } = useI18n();
+const { checkMissingAttributes } = useConversationRequiredAttributes();
+
+const arrowDownButtonRef = ref(null);
+const isLoading = ref(false);
+const resolveAttributesModalRef = ref(null);
+
+const [showActionsDropdown, toggleDropdown] = useToggle();
+const closeDropdown = () => toggleDropdown(false);
+const openDropdown = () => toggleDropdown(true);
+
+const currentChat = computed(() => getters.getSelectedChat.value);
+
+const isOpen = computed(
+  () => currentChat.value.status === wootConstants.STATUS_TYPE.OPEN
+);
+const isPending = computed(
+  () => currentChat.value.status === wootConstants.STATUS_TYPE.PENDING
+);
+const isResolved = computed(
+  () => currentChat.value.status === wootConstants.STATUS_TYPE.RESOLVED
+);
+const isSnoozed = computed(
+  () => currentChat.value.status === wootConstants.STATUS_TYPE.SNOOZED
+);
+
+const showAdditionalActions = computed(
+  () => !isPending.value && !isSnoozed.value
+);
+
+const showOpenButton = computed(() => {
+  return isPending.value || isSnoozed.value;
+});
+
+const getConversationParams = () => {
+  const allConversations = document.querySelectorAll(
+    '.conversations-list .conversation'
+  );
+
+  const activeConversation = document.querySelector(
+    'div.conversations-list div.conversation.active'
+  );
+  const activeConversationIndex = [...allConversations].indexOf(
+    activeConversation
+  );
+  const lastConversationIndex = allConversations.length - 1;
+
+  return {
+    all: allConversations,
+    activeIndex: activeConversationIndex,
+    lastIndex: lastConversationIndex,
+  };
+};
+
+const openSnoozeModal = () => {
+  const ninja = document.querySelector('ninja-keys');
+  ninja.open({ parent: 'snooze_conversation' });
+};
+
+const toggleStatus = (status, snoozedUntil, customAttributes = null) => {
+  closeDropdown();
+  isLoading.value = true;
+
+  const payload = {
+    conversationId: currentChat.value.id,
+    status,
+    snoozedUntil,
+  };
+
+  if (customAttributes) {
+    payload.customAttributes = customAttributes;
+  }
+
+  store.dispatch('toggleStatus', payload).then(() => {
+    useAlert(t('CONVERSATION.CHANGE_STATUS'));
+    isLoading.value = false;
+  });
+};
+
+const handleResolveWithAttributes = ({ attributes, context }) => {
+  if (context) {
+    const currentCustomAttributes = currentChat.value.custom_attributes || {};
+    const mergedAttributes = { ...currentCustomAttributes, ...attributes };
+    toggleStatus(
+      wootConstants.STATUS_TYPE.RESOLVED,
+      context.snoozedUntil,
+      mergedAttributes
+    );
+  }
+};
+
+const onCmdOpenConversation = () => {
+  toggleStatus(wootConstants.STATUS_TYPE.OPEN);
+};
+
+const onCmdResolveConversation = () => {
+  const currentCustomAttributes = currentChat.value.custom_attributes || {};
+  const { hasMissing, missing } = checkMissingAttributes(
+    currentCustomAttributes
+  );
+
+  if (hasMissing) {
+    const conversationContext = {
+      id: currentChat.value.id,
+      snoozedUntil: null,
+    };
+    resolveAttributesModalRef.value?.open(
+      missing,
+      currentCustomAttributes,
+      conversationContext
+    );
+  } else {
+    toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
+  }
+};
+
+const keyboardEvents = {
+  'Alt+KeyM': {
+    action: () => arrowDownButtonRef.value?.$el.click(),
+    allowOnFocusedInput: true,
+  },
+  'Alt+KeyE': {
+    action: async () => {
+      onCmdResolveConversation();
+    },
+  },
+  '$mod+Alt+KeyE': {
+    action: async event => {
+      const { all, activeIndex, lastIndex } = getConversationParams();
+      onCmdResolveConversation();
+
+      if (activeIndex < lastIndex) {
+        all[activeIndex + 1].click();
+      } else if (all.length > 1) {
+        all[0].click();
+        document.querySelector('.conversations-list').scrollTop = 0;
+      }
+      event.preventDefault();
+    },
+  },
+};
+
+useKeyboardEvents(keyboardEvents);
+
+useEmitter(CMD_REOPEN_CONVERSATION, onCmdOpenConversation);
+useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
+</script>
+
+<template>
+  <div class="flex relative justify-end items-center resolve-actions">
+    <ButtonGroup
+      class="flex-shrink-0 rounded-lg shadow outline-1 outline"
+      :class="!showOpenButton ? 'outline-n-container' : 'outline-transparent'"
+    >
+      <Button
+        v-if="isOpen"
+        :label="t('CONVERSATION.HEADER.RESOLVE_ACTION')"
+        size="sm"
+        color="slate"
+        no-animation
+        class="ltr:rounded-r-none rtl:rounded-l-none !outline-0"
+        :is-loading="isLoading"
+        @click="onCmdResolveConversation"
+      />
+      <Button
+        v-else-if="isResolved"
+        :label="t('CONVERSATION.HEADER.REOPEN_ACTION')"
+        size="sm"
+        color="slate"
+        no-animation
+        class="ltr:rounded-r-none rtl:rounded-l-none !outline-0"
+        :is-loading="isLoading"
+        @click="onCmdOpenConversation"
+      />
+      <Button
+        v-else-if="showOpenButton"
+        :label="t('CONVERSATION.HEADER.OPEN_ACTION')"
+        size="sm"
+        color="slate"
+        no-animation
+        :is-loading="isLoading"
+        @click="onCmdOpenConversation"
+      />
+      <Button
+        v-if="showAdditionalActions"
+        ref="arrowDownButtonRef"
+        icon="i-lucide-chevron-down"
+        :disabled="isLoading"
+        size="sm"
+        no-animation
+        class="ltr:rounded-l-none rtl:rounded-r-none !outline-0"
+        color="slate"
+        trailing-icon
+        @click="openDropdown"
+      />
+    </ButtonGroup>
+    <div
+      v-if="showActionsDropdown"
+      v-on-clickaway="closeDropdown"
+      class="border rounded-lg shadow-lg border-n-strong dark:border-n-strong box-content p-2 w-fit z-10 bg-n-alpha-3 backdrop-blur-[100px] absolute block left-auto top-full mt-0.5 start-0 xl:start-auto xl:end-0 max-w-[12.5rem] min-w-[9.75rem] [&_ul>li]:mb-0"
+    >
+      <WootDropdownMenu class="mb-0">
+        <WootDropdownItem v-if="!isPending">
+          <Button
+            :label="t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL')"
+            ghost
+            slate
+            sm
+            start
+            icon="i-lucide-alarm-clock-minus"
+            class="w-full"
+            @click="() => openSnoozeModal()"
+          />
+        </WootDropdownItem>
+        <WootDropdownItem v-if="!isPending">
+          <Button
+            :label="t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING')"
+            ghost
+            slate
+            sm
+            start
+            icon="i-lucide-circle-dot-dashed"
+            class="w-full"
+            @click="() => toggleStatus(wootConstants.STATUS_TYPE.PENDING)"
+          />
+        </WootDropdownItem>
+      </WootDropdownMenu>
+    </div>
+    <ConversationResolveAttributesModal
+      ref="resolveAttributesModalRef"
+      @submit="handleResolveWithAttributes"
+    />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/copilot/CopilotContainer.vue

@@ -0,0 +1,156 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useAlert } from 'dashboard/composables';
+import { useStore } from 'dashboard/composables/store';
+import Copilot from 'dashboard/components-next/copilot/Copilot.vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useConfig } from 'dashboard/composables/useConfig';
+import { useWindowSize } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import wootConstants from 'dashboard/constants/globals';
+
+defineProps({
+  conversationInboxType: {
+    type: String,
+    default: '',
+  },
+});
+
+const store = useStore();
+const { uiSettings, updateUISettings } = useUISettings();
+const { isEnterprise } = useConfig();
+const { width: windowWidth } = useWindowSize();
+
+const currentUser = useMapGetter('getCurrentUser');
+const assistants = useMapGetter('captainAssistants/getRecords');
+const uiFlags = useMapGetter('captainAssistants/getUIFlags');
+const inboxAssistant = useMapGetter('getCopilotAssistant');
+const currentChat = useMapGetter('getSelectedChat');
+
+const isSmallScreen = computed(
+  () => windowWidth.value < wootConstants.SMALL_SCREEN_BREAKPOINT
+);
+
+const selectedCopilotThreadId = ref(null);
+const messages = computed(() =>
+  store.getters['copilotMessages/getMessagesByThreadId'](
+    selectedCopilotThreadId.value
+  )
+);
+
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
+const selectedAssistantId = ref(null);
+
+const activeAssistant = computed(() => {
+  const preferredId = uiSettings.value.preferred_captain_assistant_id;
+
+  // If the user has selected a specific assistant, it takes first preference for Copilot.
+  if (preferredId) {
+    const preferredAssistant = assistants.value.find(a => a.id === preferredId);
+    // Return the preferred assistant if found, otherwise continue to next cases
+    if (preferredAssistant) return preferredAssistant;
+  }
+
+  // If the above is not available, the assistant connected to the inbox takes preference.
+  if (inboxAssistant.value) {
+    const inboxMatchedAssistant = assistants.value.find(
+      a => a.id === inboxAssistant.value.id
+    );
+    if (inboxMatchedAssistant) return inboxMatchedAssistant;
+  }
+  // If neither of the above is available, the first assistant in the account takes preference.
+  return assistants.value[0];
+});
+
+const closeCopilotPanel = () => {
+  if (isSmallScreen.value && uiSettings.value?.is_copilot_panel_open) {
+    updateUISettings({
+      is_contact_sidebar_open: false,
+      is_copilot_panel_open: false,
+    });
+  }
+};
+
+const setAssistant = async assistant => {
+  selectedAssistantId.value = assistant.id;
+  await updateUISettings({
+    preferred_captain_assistant_id: assistant.id,
+  });
+};
+
+const shouldShowCopilotPanel = computed(() => {
+  if (!isEnterprise) {
+    return false;
+  }
+  const isCaptainEnabled = isFeatureEnabledonAccount.value(
+    currentAccountId.value,
+    FEATURE_FLAGS.CAPTAIN
+  );
+  const { is_copilot_panel_open: isCopilotPanelOpen } = uiSettings.value;
+  return isCaptainEnabled && isCopilotPanelOpen && !uiFlags.value.fetchingList;
+});
+
+const handleReset = () => {
+  selectedCopilotThreadId.value = null;
+};
+
+const sendMessage = async message => {
+  try {
+    if (selectedCopilotThreadId.value) {
+      await store.dispatch('copilotMessages/create', {
+        assistant_id: activeAssistant.value.id,
+        conversation_id: currentChat.value?.id,
+        threadId: selectedCopilotThreadId.value,
+        message,
+      });
+    } else {
+      const response = await store.dispatch('copilotThreads/create', {
+        assistant_id: activeAssistant.value.id,
+        conversation_id: currentChat.value?.id,
+        message,
+      });
+      selectedCopilotThreadId.value = response.id;
+    }
+  } catch (error) {
+    useAlert(error.message);
+  }
+};
+
+onMounted(() => {
+  if (isEnterprise) {
+    store.dispatch('captainAssistants/get');
+  }
+});
+</script>
+
+<template>
+  <div
+    v-if="shouldShowCopilotPanel"
+    v-on-click-outside="() => closeCopilotPanel()"
+    class="bg-n-surface-2 h-full overflow-hidden flex-col fixed top-0 ltr:right-0 rtl:left-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
+    :class="[
+      {
+        'md:flex': shouldShowCopilotPanel,
+        'md:hidden': !shouldShowCopilotPanel,
+      },
+    ]"
+  >
+    <Copilot
+      :messages="messages"
+      :support-agent="currentUser"
+      :conversation-inbox-type="conversationInboxType"
+      :assistants="assistants"
+      :active-assistant="activeAssistant"
+      @set-assistant="setAssistant"
+      @send-message="sendMessage"
+      @reset="handleReset"
+    />
+  </div>
+  <template v-else />
+</template>

research/chatwoot/app/javascript/dashboard/components/index.js

@@ -0,0 +1,55 @@
+// [NOTE][DEPRECATED] This method is to be deprecated, please do not add new components to this file.
+/* eslint no-plusplus: 0 */
+import Code from './Code.vue';
+import ColorPicker from './widgets/ColorPicker.vue';
+import ConfirmDeleteModal from './widgets/modal/ConfirmDeleteModal.vue';
+import ConfirmModal from './widgets/modal/ConfirmationModal.vue';
+import DeleteModal from './widgets/modal/DeleteModal.vue';
+import DropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import FeatureToggle from './widgets/FeatureToggle.vue';
+import Input from './widgets/forms/Input.vue';
+import PhoneInput from './widgets/forms/PhoneInput.vue';
+import Label from './ui/Label.vue';
+import LoadingState from './widgets/LoadingState.vue';
+import ModalHeader from './ModalHeader.vue';
+import Modal from './Modal.vue';
+import Spinner from 'shared/components/Spinner.vue';
+import Tabs from './ui/Tabs/Tabs.vue';
+import TabsItem from './ui/Tabs/TabsItem.vue';
+import DatePicker from './ui/DatePicker/DatePicker.vue';
+
+const WootUIKit = {
+  Code,
+  ColorPicker,
+  ConfirmDeleteModal,
+  ConfirmModal,
+  DeleteModal,
+  DropdownItem,
+  DropdownMenu,
+  FeatureToggle,
+  Input,
+  PhoneInput,
+  Label,
+  LoadingState,
+  Modal,
+  ModalHeader,
+  Spinner,
+  Tabs,
+  TabsItem,
+  DatePicker,
+  install(Vue) {
+    const keys = Object.keys(this);
+    keys.pop(); // remove 'install' from keys
+    let i = keys.length;
+    while (i--) {
+      Vue.component(`woot${keys[i]}`, this[keys[i]]);
+    }
+  },
+};
+
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.use(WootUIKit);
+}
+
+export default WootUIKit;

research/chatwoot/app/javascript/dashboard/components/policy.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { usePolicy } from 'dashboard/composables/usePolicy';
+import { computed } from 'vue';
+
+const props = defineProps({
+  as: {
+    type: String,
+    default: 'div',
+  },
+  permissions: {
+    type: Array,
+    required: true,
+  },
+  featureFlag: {
+    type: String,
+    default: null,
+  },
+  installationTypes: {
+    type: Array,
+    default: null,
+  },
+});
+
+const { shouldShow } = usePolicy();
+
+const show = computed(() =>
+  shouldShow(props.featureFlag, props.permissions, props.installationTypes)
+);
+</script>
+
+<!-- eslint-disable vue/no-root-v-if -->
+<template>
+  <component :is="as" v-if="show">
+    <slot />
+  </component>
+</template>

research/chatwoot/app/javascript/dashboard/components/table/BaseCell.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { useMapGetter } from 'dashboard/composables/store';
+
+defineProps({
+  content: {
+    type: String,
+    default: '',
+  },
+});
+
+const isRTL = useMapGetter('accounts/isRTL');
+</script>
+
+<template>
+  <div
+    class="overflow-hidden whitespace-nowrap text-ellipsis"
+    :class="{ 'text-right': isRTL }"
+  >
+    <slot v-if="$slots.default || content">
+      <template v-if="content">{{ content }}</template>
+    </slot>
+    <span v-else class="text-n-slate-10"> --- </span>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/table/Pagination.vue

@@ -0,0 +1,180 @@
+<script setup>
+import { computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import FilterSelect from 'dashboard/components-next/filter/inputs/FilterSelect.vue';
+
+const props = defineProps({
+  table: {
+    type: Object,
+    required: true,
+  },
+  defaultPageSize: {
+    type: Number,
+    default: 10,
+  },
+  showPageSizeSelector: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['pageSizeChange']);
+const { t } = useI18n();
+
+const pageSizeOptions = [
+  {
+    label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 10 })}`,
+    value: 10,
+  },
+  {
+    label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 20 })}`,
+    value: 20,
+  },
+  {
+    label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 50 })}`,
+    value: 50,
+  },
+  {
+    label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 100 })}`,
+    value: 100,
+  },
+];
+
+const getFormattedPages = (start, end) => {
+  const formatter = new Intl.NumberFormat(navigator.language);
+  return Array.from({ length: end - start + 1 }, (_, i) =>
+    formatter.format(start + i)
+  );
+};
+
+const currentPage = computed(() => {
+  return props.table.getState().pagination.pageIndex + 1;
+});
+
+const totalPages = computed(() => {
+  return props.table.getPageCount();
+});
+
+const visiblePages = computed(() => {
+  if (totalPages.value <= 3) return getFormattedPages(1, totalPages.value);
+  if (currentPage.value === 1) return getFormattedPages(1, 3);
+  if (currentPage.value === totalPages.value) {
+    return getFormattedPages(totalPages.value - 2, totalPages.value);
+  }
+
+  return getFormattedPages(currentPage.value - 1, currentPage.value + 1);
+});
+
+const total = computed(() => {
+  return props.table.getRowCount();
+});
+
+const start = computed(() => {
+  const { pagination } = props.table.getState();
+  return pagination.pageIndex * pagination.pageSize + 1;
+});
+
+const end = computed(() => {
+  const { pagination } = props.table.getState();
+  return Math.min(
+    (pagination.pageIndex + 1) * pagination.pageSize,
+    total.value
+  );
+});
+
+const currentPageSize = computed({
+  get() {
+    return props.table.getState().pagination.pageSize;
+  },
+  set(newValue) {
+    props.table.setPageSize(Number(newValue));
+    emit('pageSizeChange', Number(newValue));
+  },
+});
+
+onMounted(() => {
+  if (
+    props.showPageSizeSelector &&
+    props.defaultPageSize &&
+    props.defaultPageSize !== 10
+  ) {
+    props.table.setPageSize(props.defaultPageSize);
+  }
+});
+</script>
+
+<template>
+  <div class="flex items-center justify-between">
+    <div class="flex flex-1 items-center gap-2 justify-between">
+      <p class="text-sm truncate text-n-slate-11 mb-0">
+        {{ $t('REPORT.PAGINATION.RESULTS', { start, end, total }) }}
+      </p>
+      <div class="flex items-center gap-2">
+        <FilterSelect
+          v-if="showPageSizeSelector"
+          v-model="currentPageSize"
+          variant="outline"
+          hide-icon
+          class="[&>button]:text-n-slate-11 [&>button]:hover:text-n-slate-12 [&>button]:h-6"
+          :options="pageSizeOptions"
+        />
+        <nav class="isolate inline-flex items-center gap-1.5">
+          <Button
+            icon="i-lucide-chevrons-left"
+            ghost
+            slate
+            sm
+            class="!size-6"
+            :disabled="!table.getCanPreviousPage()"
+            @click="table.setPageIndex(0)"
+          />
+          <Button
+            icon="i-lucide-chevron-left"
+            ghost
+            slate
+            sm
+            class="!size-6"
+            :disabled="!table.getCanPreviousPage()"
+            @click="table.previousPage()"
+          />
+          <Button
+            v-for="page in visiblePages"
+            :key="page"
+            xs
+            outline
+            :color="page == currentPage ? 'blue' : 'slate'"
+            class="!h-6 min-w-6"
+            @click="table.setPageIndex(page - 1)"
+          >
+            <span
+              class="text-center"
+              :class="{ 'text-n-brand': page == currentPage }"
+            >
+              {{ page }}
+            </span>
+          </Button>
+          <Button
+            icon="i-lucide-chevron-right"
+            ghost
+            slate
+            sm
+            class="!size-6"
+            :disabled="!table.getCanNextPage()"
+            @click="table.nextPage()"
+          />
+          <Button
+            icon="i-lucide-chevrons-right"
+            ghost
+            slate
+            sm
+            class="!size-6"
+            :disabled="!table.getCanNextPage()"
+            @click="table.setPageIndex(table.getPageCount() - 1)"
+          />
+        </nav>
+      </div>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/table/SortButton.vue

@@ -0,0 +1,18 @@
+<script setup>
+defineProps({
+  header: {
+    type: Object,
+    required: true,
+  },
+});
+
+const sortIconMap = {
+  default: 'i-lucide-chevrons-up-down',
+  asc: 'i-lucide-chevron-up',
+  desc: 'i-lucide-chevron-down',
+};
+</script>
+
+<template>
+  <span :class="sortIconMap[header.column.getIsSorted() || 'default']" />
+</template>

research/chatwoot/app/javascript/dashboard/components/table/Table.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { FlexRender } from '@tanstack/vue-table';
+import SortButton from './SortButton.vue';
+import { computed } from 'vue';
+
+const props = defineProps({
+  table: {
+    type: Object,
+    required: true,
+  },
+  fixed: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: 'relaxed',
+  },
+});
+
+const isRelaxed = computed(() => props.type === 'relaxed');
+const headerClass = computed(() =>
+  isRelaxed.value
+    ? 'ltr:first:rounded-bl-lg ltr:first:rounded-tl-lg ltr:last:rounded-br-lg ltr:last:rounded-tr-lg rtl:first:rounded-br-lg rtl:first:rounded-tr-lg rtl:last:rounded-bl-lg rtl:last:rounded-tl-lg'
+    : ''
+);
+</script>
+
+<template>
+  <table :class="{ 'table-fixed': fixed }">
+    <thead class="sticky top-0 z-10 bg-n-slate-1">
+      <tr
+        v-for="headerGroup in table.getHeaderGroups()"
+        :key="headerGroup.id"
+        class="rounded-xl"
+      >
+        <th
+          v-for="header in headerGroup.headers"
+          :key="header.id"
+          :style="{
+            width: `${header.getSize()}px`,
+          }"
+          class="text-left py-3 px-5 font-medium text-sm text-n-slate-12"
+          :class="headerClass"
+          @click="header.column.getCanSort() && header.column.toggleSorting()"
+        >
+          <div
+            v-if="!header.isPlaceholder"
+            class="flex place-items-center gap-1"
+          >
+            <FlexRender
+              :render="header.column.columnDef.header"
+              :props="header.getContext()"
+            />
+            <SortButton v-if="header.column.getCanSort()" :header="header" />
+          </div>
+        </th>
+      </tr>
+    </thead>
+
+    <tbody class="divide-y divide-n-slate-2">
+      <tr v-for="row in table.getRowModel().rows" :key="row.id">
+        <td
+          v-for="cell in row.getVisibleCells()"
+          :key="cell.id"
+          :class="isRelaxed ? 'py-4 px-5' : 'py-2 px-5'"
+        >
+          <FlexRender
+            :render="cell.column.columnDef.cell"
+            :props="cell.getContext()"
+          />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/Banner.vue

@@ -0,0 +1,162 @@
+<script>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+export default {
+  components: {
+    NextButton,
+  },
+  props: {
+    bannerMessage: {
+      type: String,
+      default: '',
+    },
+    hrefLink: {
+      type: String,
+      default: '',
+    },
+    hrefLinkText: {
+      type: String,
+      default: '',
+    },
+    hasActionButton: {
+      type: Boolean,
+      default: false,
+    },
+    actionButtonVariant: {
+      type: String,
+      default: 'faded',
+    },
+    actionButtonLabel: {
+      type: String,
+      default: '',
+    },
+    actionButtonIcon: {
+      type: String,
+      default: 'i-lucide-arrow-right',
+    },
+    colorScheme: {
+      type: String,
+      default: '',
+    },
+    hasCloseButton: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['primaryAction', 'close'],
+  computed: {
+    bannerClasses() {
+      const classList = [this.colorScheme];
+
+      if (this.hasActionButton || this.hasCloseButton) {
+        classList.push('has-button');
+      }
+      return classList;
+    },
+    // TODO - Remove this method when we standardize
+    // the button color and variant names
+    getButtonColor() {
+      const colorMap = {
+        primary: 'blue',
+        secondary: 'blue',
+        alert: 'ruby',
+        warning: 'amber',
+      };
+
+      return colorMap[this.colorScheme] || 'blue';
+    },
+  },
+  methods: {
+    onClick(e) {
+      this.$emit('primaryAction', e);
+    },
+    onClickClose(e) {
+      this.$emit('close', e);
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-center h-12 gap-4 px-4 py-3 text-xs text-white banner dark:text-white woot-banner"
+    :class="bannerClasses"
+  >
+    <span class="banner-message">
+      {{ bannerMessage }}
+      <a
+        v-if="hrefLink"
+        :href="hrefLink"
+        rel="noopener noreferrer nofollow"
+        target="_blank"
+      >
+        {{ hrefLinkText }}
+      </a>
+    </span>
+    <div class="actions">
+      <NextButton
+        v-if="hasActionButton"
+        xs
+        :icon="actionButtonIcon"
+        :variant="actionButtonVariant"
+        :color="getButtonColor"
+        :label="actionButtonLabel"
+        @click="onClick"
+      />
+      <NextButton
+        v-if="hasCloseButton"
+        xs
+        icon="i-lucide-circle-x"
+        :color="getButtonColor"
+        :label="$t('GENERAL_SETTINGS.DISMISS')"
+        @click="onClickClose"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.banner {
+  &.primary {
+    @apply bg-n-brand;
+  }
+
+  &.secondary {
+    @apply bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-12;
+    a {
+      @apply text-n-slate-12;
+    }
+  }
+
+  &.alert {
+    @apply bg-n-ruby-3 text-n-ruby-12;
+
+    a {
+      @apply text-n-ruby-12;
+    }
+  }
+
+  &.warning {
+    @apply bg-n-amber-5 text-n-amber-12;
+    a {
+      @apply text-n-amber-12;
+    }
+  }
+
+  &.gray {
+    @apply text-n-gray-10 dark:text-n-gray-10;
+  }
+
+  a {
+    @apply ml-1 underline text-n-amber-12 text-xs;
+  }
+
+  .banner-message {
+    @apply flex items-center;
+  }
+
+  .actions {
+    @apply flex gap-1 right-3;
+  }
+}
+</style>

research/chatwoot/app/javascript/dashboard/components/ui/ContextMenu.vue

@@ -0,0 +1,97 @@
+<script setup>
+import {
+  computed,
+  onMounted,
+  nextTick,
+  onUnmounted,
+  useTemplateRef,
+  inject,
+} from 'vue';
+import { useWindowSize, useElementBounding, useScrollLock } from '@vueuse/core';
+
+import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
+
+const props = defineProps({
+  x: { type: Number, default: 0 },
+  y: { type: Number, default: 0 },
+});
+
+const emit = defineEmits(['close']);
+
+const elementToLock = inject('contextMenuElementTarget', null);
+
+const menuRef = useTemplateRef('menuRef');
+
+const scrollLockElement = computed(() => {
+  if (!elementToLock?.value) return null;
+  return elementToLock.value?.$el;
+});
+
+const isLocked = useScrollLock(scrollLockElement);
+
+const { width: windowWidth, height: windowHeight } = useWindowSize();
+const { width: menuWidth, height: menuHeight } = useElementBounding(menuRef);
+
+const calculatePosition = (x, y, menuW, menuH, windowW, windowH) => {
+  const PADDING = 16;
+  // Initial position
+  let left = x;
+  let top = y;
+  // Boundary checks
+  const isOverflowingRight = left + menuW > windowW - PADDING;
+  const isOverflowingBottom = top + menuH > windowH - PADDING;
+  // Adjust position if overflowing
+  if (isOverflowingRight) left = windowW - menuW - PADDING;
+  if (isOverflowingBottom) top = windowH - menuH - PADDING;
+  return {
+    left: Math.max(PADDING, left),
+    top: Math.max(PADDING, top),
+  };
+};
+
+const position = computed(() => {
+  if (!menuRef.value) return { top: `${props.y}px`, left: `${props.x}px` };
+
+  const { left, top } = calculatePosition(
+    props.x,
+    props.y,
+    menuWidth.value,
+    menuHeight.value,
+    windowWidth.value,
+    windowHeight.value
+  );
+
+  return {
+    top: `${top}px`,
+    left: `${left}px`,
+  };
+});
+
+onMounted(() => {
+  isLocked.value = true;
+  nextTick(() => menuRef.value?.focus());
+});
+
+const handleClose = () => {
+  isLocked.value = false;
+  emit('close');
+};
+
+onUnmounted(() => {
+  isLocked.value = false;
+});
+</script>
+
+<template>
+  <TeleportWithDirection to="body">
+    <div
+      ref="menuRef"
+      class="fixed outline-none z-[9999] cursor-pointer"
+      :style="position"
+      tabindex="0"
+      @blur="handleClose"
+    >
+      <slot />
+    </div>
+  </TeleportWithDirection>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue

@@ -0,0 +1,455 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import {
+  getActiveDateRange,
+  moveCalendarDate,
+  DATE_RANGE_TYPES,
+  CALENDAR_TYPES,
+  CALENDAR_PERIODS,
+  isNavigableRange,
+  getRangeAtOffset,
+} from './helpers/DatePickerHelper';
+import {
+  isValid,
+  startOfMonth,
+  subDays,
+  startOfDay,
+  endOfDay,
+  subMonths,
+  addMonths,
+  isSameMonth,
+  differenceInCalendarMonths,
+  differenceInCalendarWeeks,
+  setMonth,
+  setYear,
+  getWeek,
+} from 'date-fns';
+import { useAlert } from 'dashboard/composables';
+import DatePickerButton from './components/DatePickerButton.vue';
+import CalendarDateInput from './components/CalendarDateInput.vue';
+import CalendarDateRange from './components/CalendarDateRange.vue';
+import CalendarYear from './components/CalendarYear.vue';
+import CalendarMonth from './components/CalendarMonth.vue';
+import CalendarWeek from './components/CalendarWeek.vue';
+import CalendarFooter from './components/CalendarFooter.vue';
+
+const emit = defineEmits(['dateRangeChanged']);
+const { t } = useI18n();
+
+const dateRange = defineModel('dateRange', {
+  type: Array,
+  default: undefined,
+});
+
+const rangeType = defineModel('rangeType', {
+  type: String,
+  default: undefined,
+});
+const { LAST_7_DAYS, CUSTOM_RANGE } = DATE_RANGE_TYPES;
+const { START_CALENDAR, END_CALENDAR } = CALENDAR_TYPES;
+const { WEEK, MONTH, YEAR } = CALENDAR_PERIODS;
+
+const showDatePicker = ref(false);
+const calendarViews = ref({ start: WEEK, end: WEEK });
+const currentDate = ref(new Date());
+
+// Use dates from v-model if provided, otherwise default to last 7 days
+const selectedStartDate = ref(
+  dateRange.value?.[0]
+    ? startOfDay(dateRange.value[0])
+    : startOfDay(subDays(currentDate.value, 6)) // LAST_7_DAYS
+);
+const selectedEndDate = ref(
+  dateRange.value?.[1]
+    ? endOfDay(dateRange.value[1])
+    : endOfDay(currentDate.value)
+);
+// Calendar month positioning (left and right calendars)
+// These control which months are displayed in the dual calendar view
+const startCurrentDate = ref(startOfMonth(selectedStartDate.value));
+const endCurrentDate = ref(
+  isSameMonth(selectedStartDate.value, selectedEndDate.value)
+    ? startOfMonth(addMonths(selectedEndDate.value, 1)) // Same month: show next month on right (e.g., Jan 25-31 shows Jan + Feb)
+    : startOfMonth(selectedEndDate.value) // Different months: show end month on right (e.g., Dec 5 - Jan 3 shows Dec + Jan)
+);
+const selectingEndDate = ref(false);
+const selectedRange = ref(rangeType.value || LAST_7_DAYS);
+const hoveredEndDate = ref(null);
+const monthOffset = ref(0);
+
+const showMonthNavigation = computed(() =>
+  isNavigableRange(selectedRange.value)
+);
+const canNavigateNext = computed(() => {
+  if (!isNavigableRange(selectedRange.value)) return false;
+  // Compare selected start to the current period's start to determine if we're in the past
+  const currentRange = getActiveDateRange(
+    selectedRange.value,
+    currentDate.value
+  );
+  return selectedStartDate.value < currentRange.start;
+});
+
+const navigationLabel = computed(() => {
+  const range = selectedRange.value;
+  if (range === DATE_RANGE_TYPES.MONTH_TO_DATE) {
+    return new Intl.DateTimeFormat(navigator.language, {
+      month: 'long',
+    }).format(selectedStartDate.value);
+  }
+  if (range === DATE_RANGE_TYPES.THIS_WEEK) {
+    const currentWeekRange = getActiveDateRange(range, currentDate.value);
+    const isCurrentWeek =
+      selectedStartDate.value.getTime() === currentWeekRange.start.getTime();
+    if (isCurrentWeek) return null;
+    const weekNumber = getWeek(selectedStartDate.value, { weekStartsOn: 1 });
+    return t('DATE_PICKER.WEEK_NUMBER', { weekNumber });
+  }
+  return null;
+});
+
+const manualStartDate = ref(selectedStartDate.value);
+const manualEndDate = ref(selectedEndDate.value);
+
+// Watcher 1: Sync v-model props from parent component
+// Handles: URL params, parent component updates, rangeType changes
+watch(
+  [rangeType, dateRange],
+  ([newRangeType, newDateRange]) => {
+    if (newRangeType && newRangeType !== selectedRange.value) {
+      selectedRange.value = newRangeType;
+      monthOffset.value = 0;
+
+      // If rangeType changes without dateRange, recompute dates from the range
+      if (!newDateRange && newRangeType !== CUSTOM_RANGE) {
+        const activeDates = getActiveDateRange(newRangeType, currentDate.value);
+        if (activeDates) {
+          selectedStartDate.value = startOfDay(activeDates.start);
+          selectedEndDate.value = endOfDay(activeDates.end);
+        }
+      }
+    }
+
+    // When parent provides new dateRange (e.g., from URL params)
+    // Skip if navigating with arrows — offset controls dates in that case
+    if (newDateRange?.[0] && newDateRange?.[1] && monthOffset.value === 0) {
+      selectedStartDate.value = startOfDay(newDateRange[0]);
+      selectedEndDate.value = endOfDay(newDateRange[1]);
+
+      // Update calendar to show the months of the new date range
+      startCurrentDate.value = startOfMonth(newDateRange[0]);
+      endCurrentDate.value = isSameMonth(newDateRange[0], newDateRange[1])
+        ? startOfMonth(addMonths(newDateRange[1], 1))
+        : startOfMonth(newDateRange[1]);
+
+      // Recalculate offset so arrow navigation is relative to restored range
+      // TODO: When offset resolves to 0 (current period), the end date may be
+      // stale if the URL was saved on a previous day. "This month" / "This week"
+      // should show up-to-today dates for the current period. For now, the stale
+      // end date is shown until the user clicks an arrow or re-selects the range.
+      if (isNavigableRange(selectedRange.value)) {
+        const current = getActiveDateRange(
+          selectedRange.value,
+          currentDate.value
+        );
+        if (selectedRange.value === DATE_RANGE_TYPES.THIS_WEEK) {
+          monthOffset.value = differenceInCalendarWeeks(
+            newDateRange[0],
+            current.start,
+            { weekStartsOn: 1 }
+          );
+        } else {
+          monthOffset.value = differenceInCalendarMonths(
+            newDateRange[0],
+            current.start
+          );
+        }
+      }
+    }
+  },
+  { immediate: true }
+);
+
+// Watcher 2: Keep manual input fields in sync with selected dates
+// Updates the input field values when dates change programmatically
+watch(
+  [selectedStartDate, selectedEndDate],
+  ([newStart, newEnd]) => {
+    manualStartDate.value = isValid(newStart)
+      ? newStart
+      : selectedStartDate.value;
+    manualEndDate.value = isValid(newEnd) ? newEnd : selectedEndDate.value;
+  },
+  { immediate: true }
+);
+
+const setDateRange = range => {
+  selectedRange.value = range.value;
+  monthOffset.value = 0;
+  const { start, end } = getActiveDateRange(range.value, currentDate.value);
+  selectedStartDate.value = start;
+  selectedEndDate.value = end;
+
+  // Position calendar to show the months of the selected range
+  startCurrentDate.value = startOfMonth(start);
+  endCurrentDate.value = isSameMonth(start, end)
+    ? startOfMonth(addMonths(start, 1))
+    : startOfMonth(end);
+};
+
+const navigateMonth = direction => {
+  monthOffset.value += direction === 'prev' ? -1 : 1;
+  if (monthOffset.value > 0) monthOffset.value = 0;
+
+  const { start, end } = getRangeAtOffset(
+    selectedRange.value,
+    monthOffset.value,
+    currentDate.value
+  );
+  selectedStartDate.value = start;
+  selectedEndDate.value = end;
+
+  startCurrentDate.value = startOfMonth(start);
+  endCurrentDate.value = isSameMonth(start, end)
+    ? startOfMonth(addMonths(start, 1))
+    : startOfMonth(end);
+
+  emit('dateRangeChanged', [start, end, selectedRange.value]);
+};
+
+const moveCalendar = (calendar, direction, period = MONTH) => {
+  const { start, end } = moveCalendarDate(
+    calendar,
+    startCurrentDate.value,
+    endCurrentDate.value,
+    direction,
+    period
+  );
+
+  // Prevent calendar months from overlapping
+  const monthDiff = differenceInCalendarMonths(end, start);
+  if (monthDiff === 0) {
+    // If they would be the same month, adjust the other calendar
+    if (calendar === START_CALENDAR) {
+      endCurrentDate.value = addMonths(start, 1);
+      startCurrentDate.value = start;
+    } else {
+      startCurrentDate.value = subMonths(end, 1);
+      endCurrentDate.value = end;
+    }
+  } else {
+    startCurrentDate.value = start;
+    endCurrentDate.value = end;
+  }
+};
+
+const selectDate = day => {
+  selectedRange.value = CUSTOM_RANGE;
+  monthOffset.value = 0;
+  if (!selectingEndDate.value || day < selectedStartDate.value) {
+    selectedStartDate.value = day;
+    selectedEndDate.value = null;
+    selectingEndDate.value = true;
+  } else {
+    selectedEndDate.value = day;
+    selectingEndDate.value = false;
+  }
+};
+
+const setViewMode = (calendar, mode) => {
+  selectedRange.value = CUSTOM_RANGE;
+  calendarViews.value[calendar] = mode;
+};
+
+const openCalendar = (index, calendarType, period = MONTH) => {
+  const current =
+    calendarType === START_CALENDAR
+      ? startCurrentDate.value
+      : endCurrentDate.value;
+  const newDate =
+    period === MONTH
+      ? setMonth(startOfMonth(current), index)
+      : setYear(current, index);
+  if (calendarType === START_CALENDAR) {
+    startCurrentDate.value = newDate;
+  } else {
+    endCurrentDate.value = newDate;
+  }
+  setViewMode(calendarType, period === MONTH ? WEEK : MONTH);
+};
+
+const updateManualInput = (newDate, calendarType) => {
+  if (calendarType === START_CALENDAR) {
+    selectedStartDate.value = newDate;
+    startCurrentDate.value = startOfMonth(newDate);
+  } else {
+    selectedEndDate.value = newDate;
+    endCurrentDate.value = startOfMonth(newDate);
+  }
+  selectingEndDate.value = false;
+};
+
+const handleManualInputError = message => {
+  useAlert(message);
+};
+
+const resetDatePicker = () => {
+  // Calculate Last 7 days from today
+  const startDate = startOfDay(subDays(currentDate.value, 6));
+  const endDate = endOfDay(currentDate.value);
+
+  selectedStartDate.value = startDate;
+  selectedEndDate.value = endDate;
+
+  // Position calendar to show the months of Last 7 days
+  // Example: If today is Feb 5, Last 7 days = Jan 30 - Feb 5, so show Jan + Feb
+  startCurrentDate.value = startOfMonth(startDate);
+  endCurrentDate.value = isSameMonth(startDate, endDate)
+    ? startOfMonth(addMonths(startDate, 1))
+    : startOfMonth(endDate);
+  selectingEndDate.value = false;
+  selectedRange.value = LAST_7_DAYS;
+  monthOffset.value = 0;
+  calendarViews.value = { start: WEEK, end: WEEK };
+};
+
+const emitDateRange = () => {
+  if (!isValid(selectedStartDate.value) || !isValid(selectedEndDate.value)) {
+    useAlert('Please select a valid time range');
+  } else {
+    showDatePicker.value = false;
+    emit('dateRangeChanged', [
+      selectedStartDate.value,
+      selectedEndDate.value,
+      selectedRange.value,
+    ]);
+  }
+};
+
+// Called when picker opens - positions calendar to show selected date range
+// Fixes issue where calendar showed wrong months when loaded from URL params
+const initializeCalendarMonths = () => {
+  if (selectedStartDate.value && selectedEndDate.value) {
+    startCurrentDate.value = startOfMonth(selectedStartDate.value);
+    endCurrentDate.value = isSameMonth(
+      selectedStartDate.value,
+      selectedEndDate.value
+    )
+      ? startOfMonth(addMonths(selectedEndDate.value, 1))
+      : startOfMonth(selectedEndDate.value);
+  }
+};
+
+const toggleDatePicker = () => {
+  showDatePicker.value = !showDatePicker.value;
+  if (showDatePicker.value) initializeCalendarMonths();
+};
+
+const closeDatePicker = () => {
+  if (isValid(selectedStartDate.value) && isValid(selectedEndDate.value)) {
+    emitDateRange();
+  } else {
+    showDatePicker.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="relative flex-shrink-0 font-inter">
+    <DatePickerButton
+      :selected-start-date="selectedStartDate"
+      :selected-end-date="selectedEndDate"
+      :selected-range="selectedRange"
+      :show-month-navigation="showMonthNavigation"
+      :can-navigate-next="canNavigateNext"
+      :navigation-label="navigationLabel"
+      @open="toggleDatePicker"
+      @navigate-month="navigateMonth"
+    />
+    <div
+      v-if="showDatePicker"
+      v-on-clickaway="closeDatePicker"
+      class="flex absolute top-9 ltr:left-0 rtl:right-0 z-30 shadow-md select-none w-[880px] rounded-2xl bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container"
+    >
+      <CalendarDateRange
+        :selected-range="selectedRange"
+        @set-range="setDateRange"
+      />
+      <div
+        class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-n-strong"
+      >
+        <div class="flex justify-around h-fit">
+          <!-- Calendars for Start and End Dates -->
+          <div
+            v-for="calendar in [START_CALENDAR, END_CALENDAR]"
+            :key="`${calendar}-calendar`"
+            class="flex flex-col items-center"
+          >
+            <CalendarDateInput
+              :calendar-type="calendar"
+              :date-value="
+                calendar === START_CALENDAR ? manualStartDate : manualEndDate
+              "
+              :compare-date="
+                calendar === START_CALENDAR ? manualEndDate : manualStartDate
+              "
+              :is-disabled="selectedRange !== CUSTOM_RANGE"
+              @update="
+                calendar === START_CALENDAR
+                  ? (manualStartDate = $event)
+                  : (manualEndDate = $event)
+              "
+              @validate="updateManualInput($event, calendar)"
+              @error="handleManualInputError($event)"
+            />
+            <div class="py-5 border-b border-n-strong">
+              <div
+                class="flex flex-col items-center gap-2 px-5 min-w-[340px] max-h-[352px]"
+                :class="
+                  calendar === START_CALENDAR &&
+                  'ltr:border-r rtl:border-l border-n-strong'
+                "
+              >
+                <CalendarYear
+                  v-if="calendarViews[calendar] === YEAR"
+                  :calendar-type="calendar"
+                  :start-current-date="startCurrentDate"
+                  :end-current-date="endCurrentDate"
+                  @select-year="openCalendar($event, calendar, YEAR)"
+                />
+                <CalendarMonth
+                  v-else-if="calendarViews[calendar] === MONTH"
+                  :calendar-type="calendar"
+                  :start-current-date="startCurrentDate"
+                  :end-current-date="endCurrentDate"
+                  @select-month="openCalendar($event, calendar)"
+                  @set-view="setViewMode"
+                  @prev="moveCalendar(calendar, 'prev', YEAR)"
+                  @next="moveCalendar(calendar, 'next', YEAR)"
+                />
+                <CalendarWeek
+                  v-else-if="calendarViews[calendar] === WEEK"
+                  :calendar-type="calendar"
+                  :current-date="currentDate"
+                  :start-current-date="startCurrentDate"
+                  :end-current-date="endCurrentDate"
+                  :selected-start-date="selectedStartDate"
+                  :selected-end-date="selectedEndDate"
+                  :selecting-end-date="selectingEndDate"
+                  :hovered-end-date="hoveredEndDate"
+                  @update-hovered-end-date="hoveredEndDate = $event"
+                  @select-date="selectDate"
+                  @set-view="setViewMode"
+                  @prev="moveCalendar(calendar, 'prev')"
+                  @next="moveCalendar(calendar, 'next')"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <CalendarFooter @change="emitDateRange" @clear="resetDatePicker" />
+      </div>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { CALENDAR_PERIODS } from '../helpers/DatePickerHelper';
+
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  calendarType: {
+    type: String,
+    default: 'start',
+  },
+  firstButtonLabel: {
+    type: String,
+    default: '',
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+  viewMode: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['prev', 'next', 'setView']);
+
+const { YEAR } = CALENDAR_PERIODS;
+
+const onClickPrev = type => {
+  emit('prev', type);
+};
+
+const onClickNext = type => {
+  emit('next', type);
+};
+
+const onClickSetView = (type, mode) => {
+  emit('setView', type, mode);
+};
+</script>
+
+<template>
+  <div class="flex items-start justify-between w-full h-9">
+    <NextButton
+      slate
+      ghost
+      xs
+      icon="i-lucide-chevron-left"
+      class="rtl:rotate-180"
+      @click.stop="onClickPrev(calendarType)"
+    />
+    <div class="flex items-center gap-1">
+      <button
+        v-if="firstButtonLabel"
+        class="p-0 text-sm font-medium text-center text-n-slate-12 hover:text-n-brand"
+        @click.stop="onClickSetView(calendarType, viewMode)"
+      >
+        {{ firstButtonLabel }}
+      </button>
+      <button
+        v-if="buttonLabel"
+        class="p-0 text-sm font-medium text-center text-n-slate-12"
+        :class="{ 'hover:text-n-brand': viewMode }"
+        @click.stop="onClickSetView(calendarType, YEAR)"
+      >
+        {{ buttonLabel }}
+      </button>
+    </div>
+    <NextButton
+      slate
+      ghost
+      xs
+      icon="i-lucide-chevron-right"
+      class="rtl:rotate-180"
+      @click.stop="onClickNext(calendarType)"
+    />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { computed } from 'vue';
+import { parse, isValid, isAfter, isBefore } from 'date-fns';
+import {
+  getIntlDateFormatForLocale,
+  CALENDAR_TYPES,
+} from '../helpers/DatePickerHelper';
+
+const props = defineProps({
+  calendarType: {
+    type: String,
+    default: '',
+  },
+  dateValue: Date,
+  compareDate: Date,
+  isDisabled: Boolean,
+});
+
+const emit = defineEmits(['update', 'validate', 'error']);
+
+const { START_CALENDAR, END_CALENDAR } = CALENDAR_TYPES;
+
+const dateFormat = computed(() => getIntlDateFormatForLocale()?.toUpperCase());
+
+const localDateValue = computed({
+  get: () => props.dateValue?.toLocaleDateString(navigator.language) || '',
+  set: newValue => {
+    const format = getIntlDateFormatForLocale();
+    const parsedDate = parse(newValue, format, new Date());
+    if (isValid(parsedDate)) {
+      emit('update', parsedDate);
+    }
+  },
+});
+
+const validateDate = () => {
+  if (!isValid(props.dateValue)) {
+    emit('error', `Please enter the date in valid format: ${dateFormat.value}`);
+    return;
+  }
+
+  const { calendarType, compareDate, dateValue } = props;
+  const isStartCalendar = calendarType === START_CALENDAR;
+  const isEndCalendar = calendarType === END_CALENDAR;
+
+  if (compareDate && isStartCalendar && isAfter(dateValue, compareDate)) {
+    emit('error', 'Start date must be before the end date.');
+  } else if (compareDate && isEndCalendar && isBefore(dateValue, compareDate)) {
+    emit('error', 'End date must be after the start date.');
+  } else {
+    emit('validate', dateValue);
+  }
+};
+</script>
+
+<template>
+  <div class="h-[82px] flex flex-col items-start px-5 gap-1.5 pt-4 w-full">
+    <span class="text-sm font-medium text-n-slate-12">
+      {{
+        calendarType === START_CALENDAR
+          ? $t('DATE_PICKER.DATE_RANGE_INPUT.START')
+          : $t('DATE_PICKER.DATE_RANGE_INPUT.END')
+      }}
+    </span>
+    <input
+      v-model="localDateValue"
+      type="text"
+      class="!text-sm !mb-0 disabled:!outline-n-strong"
+      :placeholder="dateFormat"
+      :disabled="isDisabled"
+      @keypress.enter="validateDate"
+    />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { dateRanges } from '../helpers/DatePickerHelper';
+
+defineProps({
+  selectedRange: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['setRange']);
+
+const setDateRange = range => {
+  emit('setRange', range);
+};
+</script>
+
+<template>
+  <div class="w-[200px] flex flex-col items-start">
+    <h4
+      class="w-full px-5 py-4 text-xs font-bold capitalize text-start text-n-slate-10"
+    >
+      {{ $t('DATE_PICKER.DATE_RANGE_OPTIONS.TITLE') }}
+    </h4>
+    <div class="flex flex-col items-start w-full">
+      <template v-for="range in dateRanges" :key="range.label">
+        <div v-if="range.separator" class="w-full border-t border-n-strong" />
+        <button
+          class="w-full px-5 py-3 text-sm font-medium truncate border-none rounded-none text-start hover:bg-n-alpha-2 dark:hover:bg-n-solid-3"
+          :class="
+            range.value === selectedRange
+              ? 'text-n-slate-12 bg-n-alpha-1 dark:bg-n-solid-active'
+              : 'text-n-slate-12'
+          "
+          @click="setDateRange(range)"
+        >
+          {{ $t(range.label) }}
+        </button>
+      </template>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue

@@ -0,0 +1,30 @@
+<script setup>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+const emit = defineEmits(['clear', 'change']);
+
+const onClickClear = () => {
+  emit('clear');
+};
+
+const onClickApply = () => {
+  emit('change');
+};
+</script>
+
+<template>
+  <div class="h-[56px] flex justify-between gap-2 px-2 py-3 items-center">
+    <NextButton
+      slate
+      ghost
+      sm
+      :label="$t('DATE_PICKER.CLEAR_BUTTON')"
+      @click="onClickClear"
+    />
+    <NextButton
+      sm
+      :label="$t('DATE_PICKER.APPLY_BUTTON')"
+      @click="onClickApply"
+    />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { computed } from 'vue';
+import { format, getMonth, setMonth, startOfMonth } from 'date-fns';
+import {
+  yearName,
+  CALENDAR_TYPES,
+  CALENDAR_PERIODS,
+} from '../helpers/DatePickerHelper';
+
+import CalendarAction from './CalendarAction.vue';
+
+const props = defineProps({
+  calendarType: {
+    type: String,
+    default: 'start',
+  },
+  startCurrentDate: Date,
+  endCurrentDate: Date,
+});
+
+const emit = defineEmits(['selectMonth', 'prev', 'next', 'setView']);
+const { START_CALENDAR } = CALENDAR_TYPES;
+const { MONTH, YEAR } = CALENDAR_PERIODS;
+
+const months = Array.from({ length: 12 }, (_, index) =>
+  format(setMonth(startOfMonth(new Date()), index), 'MMM')
+);
+
+const activeMonthIndex = computed(() => {
+  const date =
+    props.calendarType === START_CALENDAR
+      ? props.startCurrentDate
+      : props.endCurrentDate;
+  return getMonth(date);
+});
+
+const setViewMode = (type, mode) => {
+  emit('setView', type, mode);
+};
+
+const onClickPrev = () => {
+  emit('prev');
+};
+
+const onClickNext = () => {
+  emit('next');
+};
+
+const selectMonth = index => {
+  emit('selectMonth', index);
+};
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-2 max-h-[312px]">
+    <CalendarAction
+      :view-mode="YEAR"
+      :calendar-type="calendarType"
+      :button-label="
+        yearName(
+          calendarType === START_CALENDAR ? startCurrentDate : endCurrentDate,
+          MONTH
+        )
+      "
+      @set-view="setViewMode"
+      @prev="onClickPrev"
+      @next="onClickNext"
+    />
+
+    <div class="grid w-full grid-cols-3 gap-x-3 gap-y-2 auto-rows-[61px]">
+      <button
+        v-for="(month, index) in months"
+        :key="index"
+        class="p-2 text-sm font-medium text-center text-n-slate-12 w-[92px] h-10 rounded-lg py-2.5 px-2"
+        :class="{
+          'bg-n-brand text-white hover:bg-n-blue-10':
+            index === activeMonthIndex,
+          'hover:bg-n-alpha-2 dark:hover:bg-n-solid-3':
+            index !== activeMonthIndex,
+        }"
+        @click.stop="selectMonth(index)"
+      >
+        {{ month }}
+      </button>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue

@@ -0,0 +1,171 @@
+<script setup>
+import {
+  monthName,
+  yearName,
+  getWeeksForMonth,
+  isToday,
+  dayIsInRange,
+  isCurrentMonth,
+  isLastDayOfMonth,
+  isHoveringDayInRange,
+  isHoveringNextDayInRange,
+  CALENDAR_TYPES,
+  CALENDAR_PERIODS,
+} from '../helpers/DatePickerHelper';
+
+import CalendarWeekLabel from './CalendarWeekLabel.vue';
+import CalendarAction from './CalendarAction.vue';
+
+const props = defineProps({
+  calendarType: {
+    type: String,
+    default: 'start',
+  },
+  currentDate: Date,
+  startCurrentDate: Date,
+  endCurrentDate: Date,
+  selectedStartDate: Date,
+  selectingEndDate: Boolean,
+  selectedEndDate: Date,
+  hoveredEndDate: Date,
+});
+
+const emit = defineEmits([
+  'updateHoveredEndDate',
+  'selectDate',
+  'prev',
+  'next',
+  'setView',
+]);
+
+const { START_CALENDAR } = CALENDAR_TYPES;
+const { MONTH } = CALENDAR_PERIODS;
+
+const emitHoveredEndDate = day => {
+  emit('updateHoveredEndDate', day);
+};
+
+const emitSelectDate = day => {
+  emit('selectDate', day);
+};
+const onClickPrev = () => {
+  emit('prev');
+};
+
+const onClickNext = () => {
+  emit('next');
+};
+
+const setViewMode = (type, mode) => {
+  emit('setView', type, mode);
+};
+
+const weeks = calendarType => {
+  return getWeeksForMonth(
+    calendarType === START_CALENDAR
+      ? props.startCurrentDate
+      : props.endCurrentDate
+  );
+};
+
+const isSelectedStartOrEndDate = day => {
+  return (
+    dayIsInRange(day, props.selectedStartDate, props.selectedStartDate) ||
+    dayIsInRange(day, props.selectedEndDate, props.selectedEndDate)
+  );
+};
+
+const isInRange = day => {
+  return dayIsInRange(day, props.selectedStartDate, props.selectedEndDate);
+};
+
+const isInCurrentMonth = day => {
+  return isCurrentMonth(
+    day,
+    props.calendarType === START_CALENDAR
+      ? props.startCurrentDate
+      : props.endCurrentDate
+  );
+};
+
+const isHoveringInRange = day => {
+  return isHoveringDayInRange(
+    day,
+    props.selectedStartDate,
+    props.selectingEndDate,
+    props.hoveredEndDate
+  );
+};
+
+const isNextDayInRange = day => {
+  return isHoveringNextDayInRange(
+    day,
+    props.selectedStartDate,
+    props.selectedEndDate,
+    props.hoveredEndDate
+  );
+};
+
+const dayClasses = day => ({
+  'text-n-slate-10 pointer-events-none': !isInCurrentMonth(day),
+  'text-n-slate-12 hover:text-n-slate-12 hover:bg-n-blue-6 dark:hover:bg-n-blue-7':
+    isInCurrentMonth(day),
+  'bg-n-brand text-white':
+    isSelectedStartOrEndDate(day) && isInCurrentMonth(day),
+  'bg-n-blue-4 dark:bg-n-blue-5':
+    (isInRange(day) || isHoveringInRange(day)) &&
+    !isSelectedStartOrEndDate(day) &&
+    isInCurrentMonth(day),
+  'outline outline-1 outline-n-blue-8 -outline-offset-1 !text-n-blue-11':
+    isToday(props.currentDate, day) && !isSelectedStartOrEndDate(day),
+});
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-2 max-h-[312px]">
+    <CalendarAction
+      :view-mode="MONTH"
+      :calendar-type="calendarType"
+      :first-button-label="
+        monthName(
+          calendarType === START_CALENDAR ? startCurrentDate : endCurrentDate
+        )
+      "
+      :button-label="
+        yearName(
+          calendarType === START_CALENDAR ? startCurrentDate : endCurrentDate
+        )
+      "
+      @prev="onClickPrev"
+      @next="onClickNext"
+      @set-view="setViewMode"
+    />
+    <CalendarWeekLabel />
+    <div
+      v-for="week in weeks(calendarType)"
+      :key="week[0].getTime()"
+      class="grid max-w-md grid-cols-7 gap-2 mx-auto overflow-hidden rounded-lg"
+    >
+      <div
+        v-for="day in week"
+        :key="day.getTime()"
+        class="flex relative items-center justify-center w-9 h-8 py-1.5 px-2 font-medium text-sm rounded-lg cursor-pointer"
+        :class="dayClasses(day)"
+        @mouseenter="emitHoveredEndDate(day)"
+        @mouseleave="emitHoveredEndDate(null)"
+        @click="emitSelectDate(day)"
+      >
+        {{ day.getDate() }}
+        <span
+          v-if="
+            (isInRange(day) || isHoveringInRange(day)) &&
+            isNextDayInRange(day) &&
+            !isLastDayOfMonth(day) &&
+            isInCurrentMonth(day)
+          "
+          class="absolute bottom-0 w-6 h-8 ltr:-right-4 rtl:-left-4 bg-n-blue-4 dark:bg-n-blue-5 -z-10"
+        />
+      </div>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeekLabel.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { calendarWeeks } from '../helpers/DatePickerHelper';
+</script>
+
+<template>
+  <div class="max-w-md mx-auto grid grid-cols-7 gap-2">
+    <div
+      v-for="day in calendarWeeks"
+      :key="day.id"
+      class="flex items-center justify-center font-medium text-sm w-9 h-7 py-1.5 px-2"
+    >
+      {{ day.label }}
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { getYear, addYears, subYears } from 'date-fns';
+import { CALENDAR_TYPES } from '../helpers/DatePickerHelper';
+
+import CalendarAction from './CalendarAction.vue';
+
+const props = defineProps({
+  calendarType: {
+    type: String,
+    default: 'start',
+  },
+  startCurrentDate: Date,
+  endCurrentDate: Date,
+});
+
+const emit = defineEmits(['selectYear']);
+
+const { START_CALENDAR } = CALENDAR_TYPES;
+
+const calculateStartYear = date => {
+  const year = getYear(date);
+  return year - (year % 10); // Align with the beginning of a decade
+};
+
+const startYear = ref(
+  calculateStartYear(
+    props.calendarType === START_CALENDAR
+      ? props.startCurrentDate
+      : props.endCurrentDate
+  )
+);
+
+const years = computed(() =>
+  Array.from({ length: 10 }, (_, i) => startYear.value + i)
+);
+
+const firstYear = computed(() => years.value[0]);
+const lastYear = computed(() => years.value[years.value.length - 1]);
+
+const activeYear = computed(() => {
+  const date =
+    props.calendarType === START_CALENDAR
+      ? props.startCurrentDate
+      : props.endCurrentDate;
+  return getYear(date);
+});
+
+const onClickPrev = () => {
+  startYear.value = subYears(new Date(startYear.value, 0, 1), 10).getFullYear();
+};
+
+const onClickNext = () => {
+  startYear.value = addYears(new Date(startYear.value, 0, 1), 10).getFullYear();
+};
+
+const selectYear = year => {
+  emit('selectYear', year);
+};
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-2 max-h-[312px]">
+    <CalendarAction
+      :calendar-type="calendarType"
+      :button-label="`${firstYear} - ${lastYear}`"
+      @prev="onClickPrev"
+      @next="onClickNext"
+    />
+
+    <div class="grid grid-cols-2 gap-x-3 gap-y-2 w-full auto-rows-[47px]">
+      <button
+        v-for="year in years"
+        :key="year"
+        class="p-2 text-sm font-medium text-center text-n-slate-12 w-[144px] h-10 rounded-lg py-2.5 px-2"
+        :class="{
+          'bg-n-brand text-white hover:bg-n-blue-10': year === activeYear,
+          'hover:bg-n-alpha-2 dark:hover:bg-n-solid-3': year !== activeYear,
+        }"
+        @click.stop="selectYear(year)"
+      >
+        {{ year }}
+      </button>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue

@@ -0,0 +1,102 @@
+<script setup>
+import { computed } from 'vue';
+import { dateRanges } from '../helpers/DatePickerHelper';
+import { format, isSameYear, isValid } from 'date-fns';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  selectedStartDate: Date,
+  selectedEndDate: Date,
+  selectedRange: {
+    type: String,
+    default: '',
+  },
+  showMonthNavigation: {
+    type: Boolean,
+    default: false,
+  },
+  canNavigateNext: {
+    type: Boolean,
+    default: false,
+  },
+  navigationLabel: {
+    type: String,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['open', 'navigateMonth']);
+
+const formatDateRange = computed(() => {
+  const startDate = props.selectedStartDate;
+  const endDate = props.selectedEndDate;
+
+  if (!isValid(startDate) || !isValid(endDate)) {
+    return 'Select a date range';
+  }
+
+  const crossesYears = !isSameYear(startDate, endDate);
+
+  // Always show years when crossing year boundaries
+  if (crossesYears) {
+    return `${format(startDate, 'MMM d, yyyy')} - ${format(endDate, 'MMM d, yyyy')}`;
+  }
+
+  // For same year, always show the year for clarity
+  return `${format(startDate, 'MMM d')} - ${format(endDate, 'MMM d, yyyy')}`;
+});
+
+const activeDateRange = computed(
+  () => dateRanges.find(range => range.value === props.selectedRange).label
+);
+
+const openDatePicker = () => {
+  emit('open');
+};
+</script>
+
+<template>
+  <div class="inline-flex items-center gap-1">
+    <button
+      class="inline-flex relative items-center rounded-lg gap-2 py-1.5 px-3 h-8 bg-n-alpha-2 hover:bg-n-alpha-1 active:bg-n-alpha-1 flex-shrink-0"
+      @click="openDatePicker"
+    >
+      <Icon
+        icon="i-lucide-calendar-range"
+        class="text-n-slate-11 size-3.5 flex-shrink-0"
+      />
+      <span class="text-sm font-medium text-n-slate-12 truncate">
+        {{ navigationLabel || $t(activeDateRange) }}
+      </span>
+      <span class="text-sm font-medium text-n-slate-11 truncate">
+        {{ formatDateRange }}
+      </span>
+      <Icon
+        icon="i-lucide-chevron-down"
+        class="text-n-slate-12 size-4 flex-shrink-0"
+      />
+    </button>
+    <NextButton
+      v-if="showMonthNavigation"
+      v-tooltip.top="$t('DATE_PICKER.PREVIOUS_PERIOD')"
+      slate
+      faded
+      sm
+      icon="i-lucide-chevron-left"
+      class="rtl:rotate-180"
+      @click="emit('navigateMonth', 'prev')"
+    />
+    <NextButton
+      v-if="showMonthNavigation"
+      v-tooltip.top="$t('DATE_PICKER.NEXT_PERIOD')"
+      slate
+      faded
+      sm
+      icon="i-lucide-chevron-right"
+      class="rtl:rotate-180"
+      :disabled="!canNavigateNext"
+      @click="emit('navigateMonth', 'next')"
+    />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/DatePicker/helpers/DatePickerHelper.js

@@ -0,0 +1,290 @@
+import {
+  startOfDay,
+  subDays,
+  endOfDay,
+  subMonths,
+  addMonths,
+  subYears,
+  addYears,
+  startOfMonth,
+  isSameMonth,
+  format,
+  startOfWeek,
+  endOfWeek,
+  addWeeks,
+  addDays,
+  eachDayOfInterval,
+  endOfMonth,
+  isSameDay,
+  isWithinInterval,
+} from 'date-fns';
+
+// Constants for calendar and date ranges
+export const calendarWeeks = [
+  { id: 1, label: 'M' },
+  { id: 2, label: 'T' },
+  { id: 3, label: 'W' },
+  { id: 4, label: 'T' },
+  { id: 5, label: 'F' },
+  { id: 6, label: 'S' },
+  { id: 7, label: 'S' },
+];
+
+export const dateRanges = [
+  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_7_DAYS', value: 'last7days' },
+  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_30_DAYS', value: 'last30days' },
+  {
+    label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_3_MONTHS',
+    value: 'last3months',
+    separator: true,
+  },
+  {
+    label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_6_MONTHS',
+    value: 'last6months',
+  },
+  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_YEAR', value: 'lastYear' },
+  {
+    label: 'DATE_PICKER.DATE_RANGE_OPTIONS.THIS_WEEK',
+    value: 'thisWeek',
+    separator: true,
+  },
+  {
+    label: 'DATE_PICKER.DATE_RANGE_OPTIONS.MONTH_TO_DATE',
+    value: 'monthToDate',
+  },
+  {
+    label: 'DATE_PICKER.DATE_RANGE_OPTIONS.CUSTOM_RANGE',
+    value: 'custom',
+    separator: true,
+  },
+];
+
+export const DATE_RANGE_TYPES = {
+  LAST_7_DAYS: 'last7days',
+  LAST_30_DAYS: 'last30days',
+  LAST_3_MONTHS: 'last3months',
+  LAST_6_MONTHS: 'last6months',
+  LAST_YEAR: 'lastYear',
+  THIS_WEEK: 'thisWeek',
+  MONTH_TO_DATE: 'monthToDate',
+  CUSTOM_RANGE: 'custom',
+};
+
+export const CALENDAR_TYPES = {
+  START_CALENDAR: 'start',
+  END_CALENDAR: 'end',
+};
+
+export const CALENDAR_PERIODS = {
+  WEEK: 'week',
+  MONTH: 'month',
+  YEAR: 'year',
+};
+
+// Utility functions for date operations
+export const monthName = currentDate => format(currentDate, 'MMMM');
+export const yearName = currentDate => format(currentDate, 'yyyy');
+
+export const getIntlDateFormatForLocale = () => {
+  const year = 2222;
+  const month = 12;
+  const day = 15;
+  const date = new Date(year, month - 1, day);
+  const formattedDate = new Intl.DateTimeFormat(navigator.language).format(
+    date
+  );
+  return formattedDate
+    .replace(`${year}`, 'yyyy')
+    .replace(`${month}`, 'MM')
+    .replace(`${day}`, 'dd');
+};
+
+// Utility functions for calendar operations
+export const chunk = (array, size) =>
+  Array.from({ length: Math.ceil(array.length / size) }, (_, index) =>
+    array.slice(index * size, index * size + size)
+  );
+
+export const getWeeksForMonth = (date, weekStartsOn = 1) => {
+  const startOfTheMonth = startOfMonth(date);
+  const startOfTheFirstWeek = startOfWeek(startOfTheMonth, { weekStartsOn });
+  const endOfTheLastWeek = addDays(startOfTheFirstWeek, 41); // Covering six weeks to fill the calendar
+  return chunk(
+    eachDayOfInterval({ start: startOfTheFirstWeek, end: endOfTheLastWeek }),
+    7
+  );
+};
+
+export const moveCalendarDate = (
+  calendar,
+  startCurrentDate,
+  endCurrentDate,
+  direction,
+  period
+) => {
+  const adjustFunctions = {
+    month: { prev: subMonths, next: addMonths },
+    year: { prev: subYears, next: addYears },
+  };
+
+  const adjust = adjustFunctions[period][direction];
+
+  if (calendar === 'start') {
+    const newStart = adjust(startCurrentDate, 1);
+    return { start: newStart, end: endCurrentDate };
+  }
+  const newEnd = adjust(endCurrentDate, 1);
+  return { start: startCurrentDate, end: newEnd };
+};
+
+// Date comparison functions
+export const isToday = (currentDate, date) =>
+  date.getDate() === currentDate.getDate() &&
+  date.getMonth() === currentDate.getMonth() &&
+  date.getFullYear() === currentDate.getFullYear();
+
+export const isCurrentMonth = (day, referenceDate) =>
+  isSameMonth(day, referenceDate);
+
+export const isLastDayOfMonth = day => {
+  const lastDay = endOfMonth(day);
+  return day.getDate() === lastDay.getDate();
+};
+
+export const dayIsInRange = (date, startDate, endDate) => {
+  if (!startDate || !endDate) {
+    return false;
+  }
+  // Normalize dates to ignore time differences
+  let startOfDayStart = startOfDay(startDate);
+  let startOfDayEnd = startOfDay(endDate);
+  // Swap if start is greater than end
+  if (startOfDayStart > startOfDayEnd) {
+    [startOfDayStart, startOfDayEnd] = [startOfDayEnd, startOfDayStart];
+  }
+  // Check if the date is within the interval or is the same as the start date
+  return (
+    isSameDay(date, startOfDayStart) ||
+    isWithinInterval(date, {
+      start: startOfDayStart,
+      end: startOfDayEnd,
+    })
+  );
+};
+
+// Handling hovering states in date range pickers
+export const isHoveringDayInRange = (
+  day,
+  startDate,
+  endDate,
+  hoveredEndDate
+) => {
+  if (endDate && hoveredEndDate && startDate <= hoveredEndDate) {
+    // Ensure the start date is not after the hovered end date
+    return isWithinInterval(day, { start: startDate, end: hoveredEndDate });
+  }
+  return false;
+};
+
+export const isHoveringNextDayInRange = (
+  day,
+  startDate,
+  endDate,
+  hoveredEndDate
+) => {
+  if (startDate && !endDate && hoveredEndDate) {
+    // If a start date is selected, and we're hovering (but haven't clicked an end date yet)
+    const nextDay = addDays(day, 1);
+    return isWithinInterval(nextDay, { start: startDate, end: hoveredEndDate });
+  }
+  if (startDate && endDate) {
+    // Normal range checking between selected start and end dates
+    const nextDay = addDays(day, 1);
+    return isWithinInterval(nextDay, { start: startDate, end: endDate });
+  }
+  return false;
+};
+
+// Helper func to determine active date ranges based on user selection
+export const getActiveDateRange = (range, currentDate) => {
+  const ranges = {
+    last7days: () => ({
+      start: startOfDay(subDays(currentDate, 6)),
+      end: endOfDay(currentDate),
+    }),
+    last30days: () => ({
+      start: startOfDay(subDays(currentDate, 29)),
+      end: endOfDay(currentDate),
+    }),
+    last3months: () => ({
+      start: startOfDay(subMonths(currentDate, 3)),
+      end: endOfDay(currentDate),
+    }),
+    last6months: () => ({
+      start: startOfDay(subMonths(currentDate, 6)),
+      end: endOfDay(currentDate),
+    }),
+    lastYear: () => ({
+      start: startOfDay(subMonths(currentDate, 12)),
+      end: endOfDay(currentDate),
+    }),
+    thisWeek: () => ({
+      start: startOfDay(startOfWeek(currentDate, { weekStartsOn: 1 })),
+      end: endOfDay(currentDate),
+    }),
+    monthToDate: () => ({
+      start: startOfDay(startOfMonth(currentDate)),
+      end: endOfDay(currentDate),
+    }),
+    custom: () => ({ start: currentDate, end: currentDate }),
+  };
+
+  return (
+    ranges[range] || (() => ({ start: currentDate, end: currentDate }))
+  )();
+};
+
+export const isNavigableRange = rangeType =>
+  rangeType === DATE_RANGE_TYPES.MONTH_TO_DATE ||
+  rangeType === DATE_RANGE_TYPES.THIS_WEEK;
+
+const WEEK_START = 1; // Monday
+
+const getWeekRangeAtOffset = (offset, currentDate) => {
+  if (offset === 0) {
+    return {
+      start: startOfDay(startOfWeek(currentDate, { weekStartsOn: WEEK_START })),
+      end: endOfDay(currentDate),
+    };
+  }
+  const targetWeek = addWeeks(currentDate, offset);
+  return {
+    start: startOfDay(startOfWeek(targetWeek, { weekStartsOn: WEEK_START })),
+    end: endOfDay(endOfWeek(targetWeek, { weekStartsOn: WEEK_START })),
+  };
+};
+
+const getMonthRangeAtOffset = (offset, currentDate) => {
+  if (offset === 0) {
+    return {
+      start: startOfDay(startOfMonth(currentDate)),
+      end: endOfDay(currentDate),
+    };
+  }
+  const targetMonth = addMonths(currentDate, offset);
+  return {
+    start: startOfDay(startOfMonth(targetMonth)),
+    end: endOfDay(endOfMonth(targetMonth)),
+  };
+};
+
+export const getRangeAtOffset = (
+  rangeType,
+  offset,
+  currentDate = new Date()
+) => {
+  if (rangeType === DATE_RANGE_TYPES.THIS_WEEK) {
+    return getWeekRangeAtOffset(offset, currentDate);
+  }
+  return getMonthRangeAtOffset(offset, currentDate);
+};

research/chatwoot/app/javascript/dashboard/components/ui/DatePicker/helpers/specs/DatePickerHelper.spec.js

@@ -0,0 +1,309 @@
+import {
+  monthName,
+  yearName,
+  getIntlDateFormatForLocale,
+  getWeeksForMonth,
+  isToday,
+  isCurrentMonth,
+  isLastDayOfMonth,
+  dayIsInRange,
+  getActiveDateRange,
+  isHoveringDayInRange,
+  isHoveringNextDayInRange,
+  moveCalendarDate,
+  chunk,
+} from '../DatePickerHelper';
+
+describe('Date formatting functions', () => {
+  const testDate = new Date(2020, 4, 15); // May 15, 2020
+
+  beforeEach(() => {
+    vi.spyOn(navigator, 'language', 'get').mockReturnValue('en-US');
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('returns the correct month name from a date', () => {
+    expect(monthName(testDate)).toBe('May');
+  });
+
+  it('returns the correct year from a date', () => {
+    expect(yearName(testDate)).toBe('2020');
+  });
+
+  it('returns the correct date format for the current locale en-US', () => {
+    const expected = 'MM/dd/yyyy';
+    expect(getIntlDateFormatForLocale()).toBe(expected);
+  });
+
+  it('returns the correct date format for the current locale en-IN', () => {
+    vi.spyOn(navigator, 'language', 'get').mockReturnValue('en-IN');
+    const expected = 'dd/MM/yyyy';
+    expect(getIntlDateFormatForLocale()).toBe(expected);
+  });
+});
+
+describe('chunk', () => {
+  const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+  it('correctly chunks an array into smaller arrays of given size', () => {
+    const expected = [
+      [1, 2, 3],
+      [4, 5, 6],
+      [7, 8, 9],
+    ];
+    expect(chunk(array, 3)).toEqual(expected);
+  });
+
+  it('handles arrays that do not divide evenly by the chunk size', () => {
+    const expected = [[1, 2], [3, 4], [5, 6], [7, 8], [9]];
+    expect(chunk(array, 2)).toEqual(expected);
+  });
+});
+
+describe('getWeeksForMonth', () => {
+  it('returns the correct weeks array for a month starting on Monday', () => {
+    const date = new Date(2020, 3, 1); // April 2020
+    const weeks = getWeeksForMonth(date, 1);
+    expect(weeks.length).toBe(6);
+    expect(weeks[0][0]).toEqual(new Date(2020, 2, 30)); // Check if first day of the first week is correct
+  });
+});
+
+describe('moveCalendarDate', () => {
+  it('handles the year transition when moving the start date backward by one month from January', () => {
+    const startDate = new Date(2021, 0, 1);
+    const endDate = new Date(2021, 0, 31);
+    const result = moveCalendarDate(
+      'start',
+      startDate,
+      endDate,
+      'prev',
+      'month'
+    );
+    const expectedStartDate = new Date(2020, 11, 1);
+    expect(result.start.toISOString()).toEqual(expectedStartDate.toISOString());
+    expect(result.end.toISOString()).toEqual(endDate.toISOString());
+  });
+
+  it('handles the year transition when moving the start date forward by one month from January', () => {
+    const startDate = new Date(2020, 0, 1);
+    const endDate = new Date(2020, 1, 31);
+    const result = moveCalendarDate(
+      'start',
+      startDate,
+      endDate,
+      'next',
+      'month'
+    );
+    const expectedStartDate = new Date(2020, 1, 1);
+    expect(result.start.toISOString()).toEqual(expectedStartDate.toISOString());
+    expect(result.end.toISOString()).toEqual(endDate.toISOString());
+  });
+
+  it('handles the year transition when moving the end date forward by one month from December', () => {
+    const startDate = new Date(2021, 11, 1);
+    const endDate = new Date(2021, 11, 31);
+    const result = moveCalendarDate('end', startDate, endDate, 'next', 'month');
+    const expectedEndDate = new Date(2022, 0, 31);
+    expect(result.start).toEqual(startDate);
+    expect(result.end.toISOString()).toEqual(expectedEndDate.toISOString());
+  });
+  it('handles the year transition when moving the end date backward by one month from December', () => {
+    const startDate = new Date(2021, 11, 1);
+    const endDate = new Date(2021, 11, 31);
+    const result = moveCalendarDate('end', startDate, endDate, 'prev', 'month');
+    const expectedEndDate = new Date(2021, 10, 30);
+
+    expect(result.start).toEqual(startDate);
+    expect(result.end.toISOString()).toEqual(expectedEndDate.toISOString());
+  });
+});
+
+describe('isToday', () => {
+  it('returns true if the dates are the same', () => {
+    const today = new Date();
+    const alsoToday = new Date(today);
+    expect(isToday(today, alsoToday)).toBeTruthy();
+  });
+
+  it('returns false if the dates are not the same', () => {
+    const today = new Date();
+    const notToday = new Date(
+      today.getFullYear(),
+      today.getMonth(),
+      today.getDate() - 1
+    );
+    expect(isToday(today, notToday)).toBeFalsy();
+  });
+});
+
+describe('isCurrentMonth', () => {
+  const referenceDate = new Date(2020, 6, 15); // July 15, 2020
+
+  it('returns true if the day is in the same month as the reference date', () => {
+    const testDay = new Date(2020, 6, 1);
+    expect(isCurrentMonth(testDay, referenceDate)).toBeTruthy();
+  });
+
+  it('returns false if the day is not in the same month as the reference date', () => {
+    const testDay = new Date(2020, 5, 30);
+    expect(isCurrentMonth(testDay, referenceDate)).toBeFalsy();
+  });
+});
+
+describe('isLastDayOfMonth', () => {
+  it('returns true if the day is the last day of the month', () => {
+    const testDay = new Date(2020, 6, 31); // July 31, 2020
+    expect(isLastDayOfMonth(testDay)).toBeTruthy();
+  });
+
+  it('returns false if the day is not the last day of the month', () => {
+    const testDay = new Date(2020, 6, 30); // July 30, 2020
+    expect(isLastDayOfMonth(testDay)).toBeFalsy();
+  });
+});
+
+describe('dayIsInRange', () => {
+  it('returns true if the date is within the range', () => {
+    const start = new Date(2020, 1, 10);
+    const end = new Date(2020, 1, 20);
+    const testDate = new Date(2020, 1, 15);
+    expect(dayIsInRange(testDate, start, end)).toBeTruthy();
+  });
+
+  it('returns true if the date is the same as the start date', () => {
+    const start = new Date(2020, 1, 10);
+    const end = new Date(2020, 1, 20);
+    const testDate = new Date(2020, 1, 10);
+    expect(dayIsInRange(testDate, start, end)).toBeTruthy();
+  });
+
+  it('returns false if the date is outside the range', () => {
+    const start = new Date(2020, 1, 10);
+    const end = new Date(2020, 1, 20);
+    const testDate = new Date(2020, 1, 9);
+    expect(dayIsInRange(testDate, start, end)).toBeFalsy();
+  });
+});
+
+describe('isHoveringDayInRange', () => {
+  const startDate = new Date(2020, 6, 10);
+  const endDate = new Date(2020, 6, 20);
+  const hoveredEndDate = new Date(2020, 6, 15);
+
+  it('returns true if the day is within the start and hovered end dates', () => {
+    const testDay = new Date(2020, 6, 12);
+    expect(
+      isHoveringDayInRange(testDay, startDate, endDate, hoveredEndDate)
+    ).toBeTruthy();
+  });
+
+  it('returns false if the day is outside the hovered date range', () => {
+    const testDay = new Date(2020, 6, 16);
+    expect(
+      isHoveringDayInRange(testDay, startDate, endDate, hoveredEndDate)
+    ).toBeFalsy();
+  });
+});
+
+describe('isHoveringNextDayInRange', () => {
+  const startDate = new Date(2020, 6, 10);
+  const hoveredEndDate = new Date(2020, 6, 15);
+
+  it('returns true if the next day after the given day is within the start and hovered end dates', () => {
+    const testDay = new Date(2020, 6, 14);
+    expect(
+      isHoveringNextDayInRange(testDay, startDate, null, hoveredEndDate)
+    ).toBeTruthy();
+  });
+
+  it('returns false if the next day is outside the start and hovered end dates', () => {
+    const testDay = new Date(2020, 6, 15);
+    expect(
+      isHoveringNextDayInRange(testDay, startDate, null, hoveredEndDate)
+    ).toBeFalsy();
+  });
+});
+
+describe('getActiveDateRange', () => {
+  const currentDate = new Date(2020, 5, 15, 12, 0); // May 15, 2020, at noon
+
+  beforeEach(() => {
+    // Mocking the current date to ensure consistency in tests
+    vi.useFakeTimers().setSystemTime(currentDate.getTime());
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('returns the correct range for "last7days"', () => {
+    const range = getActiveDateRange('last7days', new Date());
+    const expectedStart = new Date(2020, 5, 9);
+    expectedStart.setHours(0, 0, 0, 0);
+    const expectedEnd = new Date();
+    expectedEnd.setHours(23, 59, 59, 999);
+
+    expect(range.start).toEqual(expectedStart);
+    expect(range.end).toEqual(expectedEnd);
+  });
+
+  it('returns the correct range for "last30days"', () => {
+    const range = getActiveDateRange('last30days', new Date());
+    const expectedStart = new Date(2020, 4, 17);
+    expectedStart.setHours(0, 0, 0, 0);
+    const expectedEnd = new Date();
+    expectedEnd.setHours(23, 59, 59, 999);
+
+    expect(range.start).toEqual(expectedStart);
+    expect(range.end).toEqual(expectedEnd);
+  });
+
+  it('returns the correct range for "last3months"', () => {
+    const range = getActiveDateRange('last3months', new Date());
+    const expectedStart = new Date(2020, 2, 15);
+    expectedStart.setHours(0, 0, 0, 0);
+    const expectedEnd = new Date();
+    expectedEnd.setHours(23, 59, 59, 999);
+
+    expect(range.start).toEqual(expectedStart);
+    expect(range.end).toEqual(expectedEnd);
+  });
+
+  it('returns the correct range for "last6months"', () => {
+    const range = getActiveDateRange('last6months', new Date());
+    const expectedStart = new Date(2019, 11, 15);
+    expectedStart.setHours(0, 0, 0, 0);
+    const expectedEnd = new Date();
+    expectedEnd.setHours(23, 59, 59, 999);
+
+    expect(range.start).toEqual(expectedStart);
+    expect(range.end).toEqual(expectedEnd);
+  });
+
+  it('returns the correct range for "lastYear"', () => {
+    const range = getActiveDateRange('lastYear', new Date());
+    const expectedStart = new Date(2019, 5, 15);
+    expectedStart.setHours(0, 0, 0, 0);
+    const expectedEnd = new Date();
+    expectedEnd.setHours(23, 59, 59, 999);
+
+    expect(range.start).toEqual(expectedStart);
+    expect(range.end).toEqual(expectedEnd);
+  });
+
+  it('returns the correct range for "custom date range"', () => {
+    const range = getActiveDateRange('custom', new Date());
+    expect(range.start).toEqual(new Date(currentDate));
+    expect(range.end).toEqual(new Date(currentDate));
+  });
+
+  it('handles an unknown range label gracefully', () => {
+    const range = getActiveDateRange('unknown', new Date());
+    expect(range.start).toEqual(new Date(currentDate));
+    expect(range.end).toEqual(new Date(currentDate));
+  });
+});

research/chatwoot/app/javascript/dashboard/components/ui/DateRangePicker.vue

@@ -0,0 +1,41 @@
+<script>
+import DatePicker from 'vue-datepicker-next';
+export default {
+  components: { DatePicker },
+  props: {
+    confirmText: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: ['change'],
+  methods: {
+    handleChange(value) {
+      this.$emit('change', value);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="date-picker">
+    <DatePicker
+      range
+      confirm
+      :clearable="false"
+      :editable="false"
+      :confirm-text="confirmText"
+      :placeholder="placeholder"
+      :value="value"
+      @change="handleChange"
+    />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/DateTimePicker.vue

@@ -0,0 +1,48 @@
+<script>
+import addDays from 'date-fns/addDays';
+import DatePicker from 'vue-datepicker-next';
+export default {
+  components: { DatePicker },
+  props: {
+    confirmText: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: Date,
+      default: [],
+    },
+  },
+  emits: ['change'],
+
+  methods: {
+    handleChange(value) {
+      this.$emit('change', value);
+    },
+    disableBeforeToday(date) {
+      const yesterdayDate = addDays(new Date(), -1);
+      return date < yesterdayDate;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="date-picker">
+    <DatePicker
+      type="datetime"
+      confirm
+      :clearable="false"
+      :editable="false"
+      :confirm-text="confirmText"
+      :placeholder="placeholder"
+      :value="value"
+      :disabled-date="disableBeforeToday"
+      @change="handleChange"
+    />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/Dropdown/DropdownButton.vue

@@ -0,0 +1,33 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  buttonText: {
+    type: String,
+    default: '',
+  },
+  trailingIcon: {
+    type: Boolean,
+    default: false,
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <Button
+    ghost
+    slate
+    sm
+    class="relative"
+    no-animation
+    :icon="icon"
+    :trailing-icon="trailingIcon"
+  >
+    <span class="min-w-0 truncate">{{ buttonText }}</span>
+    <slot name="dropdown" />
+  </Button>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/Dropdown/DropdownEmptyState.vue

@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div class="flex items-center justify-center h-10 text-sm text-n-slate-11">
+    {{ message }}
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { debounce } from '@chatwoot/utils';
+import { picoSearch } from '@scmmishra/pico-search';
+import ListItemButton from './DropdownListItemButton.vue';
+import DropdownSearch from './DropdownSearch.vue';
+import DropdownEmptyState from './DropdownEmptyState.vue';
+import DropdownLoadingState from './DropdownLoadingState.vue';
+
+const props = defineProps({
+  listItems: {
+    type: Array,
+    default: () => [],
+  },
+  enableSearch: {
+    type: Boolean,
+    default: false,
+  },
+  inputPlaceholder: {
+    type: String,
+    default: '',
+  },
+  activeFilterId: {
+    type: [String, Number],
+    default: null,
+  },
+  showClearFilter: {
+    type: Boolean,
+    default: false,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  loadingPlaceholder: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['onSearch', 'select', 'removeFilter']);
+
+const searchTerm = ref('');
+
+const debouncedEmit = debounce(value => {
+  emit('onSearch', value);
+}, 300);
+
+const onSearch = value => {
+  searchTerm.value = value;
+  debouncedEmit(value);
+};
+
+const filteredListItems = computed(() => {
+  if (!searchTerm.value) return props.listItems;
+  return picoSearch(props.listItems, searchTerm.value, ['name']);
+});
+
+const isDropdownListEmpty = computed(() => {
+  return !filteredListItems.value.length;
+});
+
+const isFilterActive = id => {
+  if (!props.activeFilterId) return false;
+  return id === props.activeFilterId;
+};
+
+const shouldShowLoadingState = computed(() => {
+  return (
+    props.isLoading && isDropdownListEmpty.value && props.loadingPlaceholder
+  );
+});
+
+const shouldShowEmptyState = computed(() => {
+  return !props.isLoading && isDropdownListEmpty.value;
+});
+</script>
+
+<template>
+  <div
+    class="absolute z-20 w-40 bg-n-solid-2 border-0 outline outline-1 outline-n-weak shadow rounded-xl max-h-[400px]"
+    @click.stop
+  >
+    <slot name="search">
+      <DropdownSearch
+        v-if="enableSearch"
+        v-model="searchTerm"
+        :input-placeholder="inputPlaceholder"
+        :show-clear-filter="showClearFilter"
+        @update:model-value="onSearch"
+        @remove="$emit('removeFilter')"
+      />
+    </slot>
+    <slot name="listItem">
+      <DropdownLoadingState
+        v-if="shouldShowLoadingState"
+        :message="loadingPlaceholder"
+      />
+      <DropdownEmptyState
+        v-else-if="shouldShowEmptyState"
+        :message="$t('REPORT.FILTER_ACTIONS.EMPTY_LIST')"
+      />
+      <ListItemButton
+        v-for="item in filteredListItems"
+        :key="item.id"
+        :is-active="isFilterActive(item.id)"
+        :button-text="item.name"
+        :icon="item.icon"
+        :icon-color="item.iconColor"
+        @click.stop.prevent="emit('select', item)"
+      />
+    </slot>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue

@@ -0,0 +1,45 @@
+<script setup>
+defineProps({
+  buttonText: {
+    type: String,
+    default: '',
+  },
+  isActive: {
+    type: Boolean,
+    default: false,
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  iconColor: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <button
+    class="relative inline-flex items-center justify-start w-full p-3 border-0 rounded-none first:rounded-t-xl last:rounded-b-xl h-11 hover:enabled:bg-n-alpha-2"
+  >
+    <div class="inline-flex items-center gap-3 overflow-hidden">
+      <fluent-icon
+        v-if="icon"
+        :icon="icon"
+        size="18"
+        :style="{ color: iconColor }"
+      />
+      <span class="text-sm font-medium truncate text-n-slate-12">
+        {{ buttonText }}
+      </span>
+      <fluent-icon
+        v-if="isActive"
+        icon="checkmark"
+        size="18"
+        class="flex-shrink-0 text-n-slate-12"
+      />
+    </div>
+    <slot name="dropdown" />
+  </button>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/Dropdown/DropdownLoadingState.vue

@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div class="flex items-center justify-center h-10 text-sm text-n-slate-11">
+    {{ message }}
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { defineEmits, defineModel } from 'vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  inputPlaceholder: {
+    type: String,
+    default: '',
+  },
+  showClearFilter: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['remove']);
+
+const value = defineModel({
+  type: String,
+  default: '',
+});
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between h-10 min-h-[40px] sticky top-0 bg-n-solid-2 dark:bg-n-solid-2 z-10 gap-2 px-3 border-b rounded-t-xl border-n-weak"
+  >
+    <div class="flex items-center w-full gap-2" @keyup.space.prevent>
+      <fluent-icon
+        icon="search"
+        size="16"
+        class="text-n-slate-11 flex-shrink-0"
+      />
+      <input
+        v-model="value"
+        :placeholder="inputPlaceholder"
+        type="search"
+        class="w-full mb-0 text-sm !outline-0 !outline-none bg-transparent text-n-slate-12 placeholder:text-n-slate-10 reset-base"
+      />
+    </div>
+    <!-- Clear filter button -->
+    <NextButton
+      v-if="!modelValue && showClearFilter"
+      faded
+      xs
+      class="flex-shrink-0"
+      :label="$t('REPORT.FILTER_ACTIONS.CLEAR_FILTER')"
+      @click="emit('remove')"
+    />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/HelperTextPopup.vue

@@ -0,0 +1,25 @@
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div class="relative group w-[inherit] whitespace-normal z-20">
+    <fluent-icon
+      icon="info"
+      size="14"
+      class="mt-0.5 text-n-slate-11 absolute"
+    />
+    <div
+      class="bg-n-background w-fit ltr:left-4 rtl:right-4 top-0 border p-2.5 group-hover:flex items-center hidden absolute border-n-weak rounded-lg shadow-md"
+    >
+      <p class="text-n-slate-12 mb-0 text-xs">
+        {{ message }}
+      </p>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/Label.vue

@@ -0,0 +1,213 @@
+<script>
+import { getContrastingTextColor } from '@chatwoot/utils';
+
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+    href: {
+      type: String,
+      default: '',
+    },
+    bgColor: {
+      type: String,
+      default: '',
+    },
+    small: {
+      type: Boolean,
+      default: false,
+    },
+    showClose: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+    colorScheme: {
+      type: String,
+      default: '',
+    },
+    variant: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['remove'],
+  computed: {
+    textColor() {
+      if (this.variant === 'smooth') return '';
+      if (this.variant === 'dashed') return '';
+      return this.color || getContrastingTextColor(this.bgColor);
+    },
+    labelClass() {
+      return `label ${this.colorScheme} ${this.variant} ${
+        this.small ? 'small' : ''
+      }`;
+    },
+    labelStyle() {
+      if (this.bgColor) {
+        return {
+          background: this.bgColor,
+          color: this.textColor,
+          border: `1px solid ${this.bgColor}`,
+        };
+      }
+      return {};
+    },
+    anchorStyle() {
+      if (this.bgColor) {
+        return { color: this.textColor };
+      }
+      return {};
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('remove', this.title);
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="inline-flex ltr:mr-1 rtl:ml-1 mb-1"
+    :class="labelClass"
+    :style="labelStyle"
+    :title="description"
+  >
+    <span v-if="icon" class="label-action--button">
+      <fluent-icon :icon="icon" size="12" class="label--icon cursor-pointer" />
+    </span>
+    <span
+      v-if="['smooth', 'dashed'].includes(variant) && title && !icon"
+      :style="{ background: color }"
+      class="label-color-dot flex-shrink-0"
+    />
+    <span v-if="!href" class="whitespace-nowrap text-ellipsis overflow-hidden">
+      {{ title }}
+    </span>
+    <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
+    <button
+      v-if="showClose"
+      class="label-close--button p-0"
+      :style="{ color: textColor }"
+      @click="onClick"
+    >
+      <fluent-icon icon="dismiss" size="12" class="close--icon" />
+    </button>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.label {
+  @apply items-center font-medium text-xs rounded-[4px] gap-1 p-1 bg-n-slate-3 text-n-slate-12 border border-solid border-n-strong h-6;
+
+  &.small {
+    @apply text-xs py-0.5 px-1 leading-tight h-5;
+  }
+
+  &.small .label--icon,
+  &.small .close--icon {
+    @apply text-[0.5rem];
+  }
+
+  a {
+    @apply text-xs;
+    &:hover {
+      @apply underline;
+    }
+  }
+
+  /* Color Schemes */
+  &.primary {
+    @apply bg-n-blue-5 text-n-blue-12 border border-solid border-n-blue-7;
+
+    a {
+      @apply text-n-blue-12;
+    }
+    .label-color-dot {
+      @apply bg-n-blue-9;
+    }
+  }
+  &.secondary {
+    @apply bg-n-slate-5 text-n-slate-12 border border-solid border-n-slate-7;
+
+    a {
+      @apply text-n-slate-12;
+    }
+    .label-color-dot {
+      @apply bg-n-slate-9;
+    }
+  }
+  &.success {
+    @apply bg-n-teal-5 text-n-teal-12 border border-solid border-n-teal-7;
+
+    a {
+      @apply text-n-teal-12;
+    }
+    .label-color-dot {
+      @apply bg-n-teal-9;
+    }
+  }
+  &.alert {
+    @apply bg-n-ruby-5 text-n-ruby-12 border border-solid border-n-ruby-7;
+
+    a {
+      @apply text-n-ruby-12;
+    }
+    .label-color-dot {
+      @apply bg-n-ruby-9;
+    }
+  }
+  &.warning {
+    @apply bg-n-amber-5 text-n-amber-12 border border-solid border-n-amber-7;
+
+    a {
+      @apply text-n-amber-12;
+    }
+    .label-color-dot {
+      @apply bg-n-amber-9;
+    }
+  }
+
+  &.smooth {
+    @apply bg-transparent text-n-slate-11 dark:text-n-slate-12 border border-solid border-n-strong;
+  }
+
+  &.dashed {
+    @apply bg-transparent text-n-slate-11 dark:text-n-slate-12 border border-dashed border-n-strong;
+  }
+}
+
+.label-close--button {
+  @apply text-n-slate-11 -mb-0.5 rounded-sm cursor-pointer flex items-center justify-center hover:bg-n-slate-3;
+
+  svg {
+    @apply text-n-slate-11;
+  }
+}
+
+.label-action--button {
+  @apply flex mr-1;
+}
+
+.label-color-dot {
+  @apply inline-block w-3 h-3 rounded-sm shadow-sm;
+}
+.label.small .label-color-dot {
+  @apply w-2 h-2 rounded-sm shadow-sm;
+}
+</style>

research/chatwoot/app/javascript/dashboard/components/ui/PreviewCard.vue

@@ -0,0 +1,62 @@
+<script>
+export default {
+  props: {
+    heading: {
+      type: String,
+      default: '',
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    src: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid"
+    :class="{
+      'bg-n-blue-1 dark:bg-n-solid-2 border-n-blue-4': active,
+      'border-n-weak': !active,
+    }"
+  >
+    <div
+      class="flex justify-between items-center rounded-t-md px-2 w-full h-10 border-b border-solid"
+      :class="{
+        'bg-n-blue-2 border-n-blue-4': active,
+        'bg-n-slate-2 border-n-weak': !active,
+      }"
+    >
+      <div class="flex items-center p-1 text-sm font-medium">{{ heading }}</div>
+      <fluent-icon
+        v-if="active"
+        icon="checkmark-circle"
+        type="solid"
+        size="24"
+        class="text-n-brand"
+      />
+    </div>
+    <div
+      class="text-n-slate-11 text-xs leading-[1.4] px-3 pt-3 pb-0 text-start"
+    >
+      {{ content }}
+    </div>
+    <div v-if="src" class="p-3">
+      <img
+        :src="src"
+        class="border rounded-md"
+        :class="active ? 'border-n-blue-border' : 'border-n-weak'"
+      />
+    </div>
+    <slot v-else />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/Tabs/Tabs.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { ref, useTemplateRef, provide, computed, watch } from 'vue';
+import { useElementSize } from '@vueuse/core';
+
+const props = defineProps({
+  index: {
+    type: Number,
+    default: 0,
+  },
+  border: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(['change']);
+
+const tabsContainer = useTemplateRef('tabsContainer');
+const tabsList = useTemplateRef('tabsList');
+
+const { width: containerWidth } = useElementSize(tabsContainer);
+const { width: listWidth } = useElementSize(tabsList);
+
+const hasScroll = ref(false);
+
+const activeIndex = computed({
+  get: () => props.index,
+  set: newValue => {
+    emit('change', newValue);
+  },
+});
+
+provide('activeIndex', activeIndex);
+provide('updateActiveIndex', index => {
+  activeIndex.value = index;
+});
+
+const computeScrollWidth = () => {
+  if (tabsContainer.value && tabsList.value) {
+    hasScroll.value = tabsList.value.scrollWidth > tabsList.value.clientWidth;
+  }
+};
+
+const onScrollClick = direction => {
+  if (tabsContainer.value && tabsList.value) {
+    let scrollPosition = tabsList.value.scrollLeft;
+    scrollPosition += direction === 'left' ? -100 : 100;
+    tabsList.value.scrollTo({
+      top: 0,
+      left: scrollPosition,
+      behavior: 'smooth',
+    });
+  }
+};
+
+// Watch for changes in element sizes with immediate execution
+watch(
+  [containerWidth, listWidth],
+  () => {
+    computeScrollWidth();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div
+    ref="tabsContainer"
+    class="flex"
+    :class="[border && 'border-b border-b-n-weak']"
+  >
+    <button
+      v-if="hasScroll"
+      class="items-center rounded-none cursor-pointer flex h-auto justify-center min-w-8"
+      @click="onScrollClick('left')"
+    >
+      <fluent-icon icon="chevron-left" :size="16" />
+    </button>
+    <ul
+      ref="tabsList"
+      class="border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4 list-none mb-0"
+      :class="
+        hasScroll ? 'overflow-hidden py-0 px-1 max-w-[calc(100%-64px)]' : ''
+      "
+    >
+      <slot />
+    </ul>
+    <button
+      v-if="hasScroll"
+      class="items-center rounded-none cursor-pointer flex h-auto justify-center min-w-8"
+      @click="onScrollClick('right')"
+    >
+      <fluent-icon icon="chevron-right" :size="16" />
+    </button>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { computed, inject } from 'vue';
+
+const props = defineProps({
+  index: {
+    type: Number,
+    default: 0,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  count: {
+    type: Number,
+    default: 0,
+  },
+  showBadge: {
+    type: Boolean,
+    default: true,
+  },
+  isCompact: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const activeIndex = inject('activeIndex');
+const updateActiveIndex = inject('updateActiveIndex');
+
+const active = computed(() => props.index === activeIndex.value);
+const getItemCount = computed(() => props.count);
+
+const onTabClick = event => {
+  event.preventDefault();
+  if (!props.disabled) {
+    updateActiveIndex(props.index);
+  }
+};
+</script>
+
+<template>
+  <li
+    class="flex-shrink-0 my-0 mx-2 ltr:first:ml-0 rtl:first:mr-0 ltr:last:mr-0 rtl:last:ml-0 hover:text-n-slate-12"
+  >
+    <a
+      class="flex items-center flex-row select-none cursor-pointer relative after:absolute after:bottom-px after:left-0 after:right-0 after:h-[2px] after:rounded-full after:transition-all after:duration-200 text-button"
+      :class="[
+        active
+          ? 'text-n-blue-11 after:bg-n-brand after:opacity-100'
+          : 'text-n-slate-11 after:bg-transparent after:opacity-0',
+        isCompact ? 'py-2.5' : '!text-base py-3',
+      ]"
+      @click="onTabClick"
+    >
+      {{ name }}
+      <div
+        v-if="showBadge"
+        class="rounded-full h-5 flex items-center justify-center text-xs font-medium my-0 ltr:ml-1 rtl:mr-1 px-1.5 py-0 min-w-[20px]"
+        :class="[
+          active
+            ? 'bg-n-blue-3 text-n-blue-11'
+            : 'bg-n-alpha-1 text-n-slate-10',
+        ]"
+      >
+        <span>
+          {{ getItemCount }}
+        </span>
+      </div>
+    </a>
+  </li>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/TimeAgo.vue

@@ -0,0 +1,120 @@
+<script>
+const MINUTE_IN_MILLI_SECONDS = 60000;
+const HOUR_IN_MILLI_SECONDS = MINUTE_IN_MILLI_SECONDS * 60;
+const DAY_IN_MILLI_SECONDS = HOUR_IN_MILLI_SECONDS * 24;
+
+import {
+  dynamicTime,
+  dateFormat,
+  shortTimestamp,
+} from 'shared/helpers/timeHelper';
+
+export default {
+  name: 'TimeAgo',
+  props: {
+    isAutoRefreshEnabled: {
+      type: Boolean,
+      default: true,
+    },
+    lastActivityTimestamp: {
+      type: [String, Date, Number],
+      default: '',
+    },
+    createdAtTimestamp: {
+      type: [String, Date, Number],
+      default: '',
+    },
+  },
+  data() {
+    return {
+      lastActivityAtTimeAgo: dynamicTime(this.lastActivityTimestamp),
+      createdAtTimeAgo: dynamicTime(this.createdAtTimestamp),
+      timer: null,
+    };
+  },
+  computed: {
+    lastActivityTime() {
+      return shortTimestamp(this.lastActivityAtTimeAgo);
+    },
+    createdAtTime() {
+      return shortTimestamp(this.createdAtTimeAgo);
+    },
+    createdAt() {
+      const createdTimeDiff = Date.now() - this.createdAtTimestamp * 1000;
+      const isBeforeAMonth = createdTimeDiff > DAY_IN_MILLI_SECONDS * 30;
+      return !isBeforeAMonth
+        ? `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.LATEST')} ${
+            this.createdAtTimeAgo
+          }`
+        : `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.OLDEST')} ${dateFormat(
+            this.createdAtTimestamp
+          )}`;
+    },
+    lastActivity() {
+      const lastActivityTimeDiff =
+        Date.now() - this.lastActivityTimestamp * 1000;
+      const isNotActive = lastActivityTimeDiff > DAY_IN_MILLI_SECONDS * 30;
+      return !isNotActive
+        ? `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.ACTIVE')} ${
+            this.lastActivityAtTimeAgo
+          }`
+        : `${this.$t(
+            'CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.NOT_ACTIVE'
+          )} ${dateFormat(this.lastActivityTimestamp)}`;
+    },
+    tooltipText() {
+      return `${this.createdAt}
+              ${this.lastActivity}`;
+    },
+  },
+  watch: {
+    lastActivityTimestamp() {
+      this.lastActivityAtTimeAgo = dynamicTime(this.lastActivityTimestamp);
+    },
+    createdAtTimestamp() {
+      this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
+    },
+  },
+  mounted() {
+    if (this.isAutoRefreshEnabled) {
+      this.createTimer();
+    }
+  },
+  unmounted() {
+    clearTimeout(this.timer);
+  },
+  methods: {
+    createTimer() {
+      this.timer = setTimeout(() => {
+        this.lastActivityAtTimeAgo = dynamicTime(this.lastActivityTimestamp);
+        this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
+        this.createTimer();
+      }, this.refreshTime());
+    },
+    refreshTime() {
+      const timeDiff = Date.now() - this.lastActivityTimestamp * 1000;
+      if (timeDiff > DAY_IN_MILLI_SECONDS) {
+        return DAY_IN_MILLI_SECONDS;
+      }
+      if (timeDiff > HOUR_IN_MILLI_SECONDS) {
+        return HOUR_IN_MILLI_SECONDS;
+      }
+
+      return MINUTE_IN_MILLI_SECONDS;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-tooltip.top="{
+      content: tooltipText,
+      delay: { show: 1000, hide: 0 },
+      hideOnClick: true,
+    }"
+    class="ml-auto leading-4 text-xxs text-n-slate-10 hover:text-n-slate-11"
+  >
+    <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/ui/Wizard.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import Icon from 'next/icon/Icon.vue';
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const route = useRoute();
+
+const activeIndex = computed(() => {
+  const index = props.items.findIndex(i => i.route === route.name);
+  return index === -1 ? 0 : index;
+});
+
+const steps = computed(() =>
+  props.items.map((item, index) => {
+    const isActive = index === activeIndex.value;
+    const isOver = index < activeIndex.value;
+    return {
+      ...item,
+      index,
+      isActive,
+      isOver,
+    };
+  })
+);
+</script>
+
+<template>
+  <transition-group tag="div">
+    <div
+      v-for="step in steps"
+      :key="step.route"
+      class="cursor-pointer flex items-start gap-6 relative after:content-[''] after:absolute after:w-0.5 after:h-full after:top-5 ltr:after:left-4 rtl:after:right-4 before:content-[''] before:absolute before:w-0.5 before:h-4 before:top-0 before:left-4 rtl:before:right-4 last:after:hidden last:before:hidden after:bg-n-slate-3 before:bg-n-slate-3"
+    >
+      <!-- Circle -->
+      <div
+        class="rounded-2xl flex-shrink-0 size-8 border-2 border-n-slate-3 flex items-center justify-center left-2 leading-4 z-10 top-5 transition-all duration-300 ease-in-out"
+        :class="{
+          'bg-n-slate-3': step.isActive || step.isOver,
+          'bg-n-background': !step.isActive && !step.isOver,
+        }"
+      >
+        <span
+          v-if="!step.isOver"
+          :key="'num-' + step.index"
+          class="text-xs font-bold transition-colors duration-300"
+          :class="step.isActive ? 'text-n-blue-11' : 'text-n-slate-11'"
+        >
+          {{ step.index + 1 }}
+        </span>
+        <Icon
+          v-else
+          :key="'check-' + step.index"
+          icon="i-lucide-check"
+          class="text-n-slate-11 size-4"
+        />
+      </div>
+
+      <!-- Content -->
+      <div class="flex flex-col items-start gap-1.5 pb-10 pt-1">
+        <div class="flex items-center">
+          <h3
+            class="text-sm font-medium overflow-hidden whitespace-nowrap mt-0.5 text-ellipsis leading-tight"
+            :class="step.isActive ? 'text-n-blue-11' : 'text-n-slate-12'"
+          >
+            {{ step.title }}
+          </h3>
+        </div>
+        <p class="m-0 mt-1.5 text-sm text-n-slate-11">
+          {{ step.body }}
+        </p>
+      </div>
+    </div>
+  </transition-group>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/AILoader.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="animation-container margin-top-1">
+    <div class="ai-typing--wrap">
+      <fluent-icon icon="wand" size="14" class="ai-typing--icon" />
+      <label>
+        {{ $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.AI_WRITING') }}
+      </label>
+    </div>
+    <span class="loader" />
+    <span class="loader" />
+    <span class="loader" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.animation-container {
+  position: relative;
+  display: flex;
+  .ai-typing--wrap {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .ai-typing--icon {
+      @apply text-n-iris-11;
+    }
+  }
+  label {
+    @apply text-n-iris-11 ltr:mr-1 rtl:ml-1 inline-block;
+  }
+  .loader {
+    animation: bubble-scale 1.2s infinite;
+    @apply bg-n-iris-11 inline-block size-1.5 ltr:mr-1 rtl:ml-1 mt-3 rounded-full;
+  }
+
+  .loader:nth-child(2) {
+    animation-delay: 0.4s;
+  }
+
+  .loader:nth-child(3) {
+    animation-delay: 0.8s;
+  }
+
+  @keyframes bubble-scale {
+    0%,
+    100% {
+      transform: scale(1);
+    }
+    25% {
+      transform: scale(1.3);
+    }
+    50% {
+      transform: scale(1);
+    }
+  }
+}
+</style>

research/chatwoot/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { computed } from 'vue';
+import { formatBytes } from 'shared/helpers/FileHelper';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['removeAttachment']);
+
+const nonRecordedAudioAttachments = computed(() => {
+  return props.attachments.filter(attachment => !attachment?.isRecordedAudio);
+});
+
+const recordedAudioAttachments = computed(() =>
+  props.attachments.filter(attachment => attachment.isRecordedAudio)
+);
+
+const onRemoveAttachment = itemIndex => {
+  emit(
+    'removeAttachment',
+    nonRecordedAudioAttachments.value
+      .filter((_, index) => index !== itemIndex)
+      .concat(recordedAudioAttachments.value)
+  );
+};
+
+const formatFileSize = file => {
+  const size = file.byte_size || file.size;
+  return formatBytes(size, 0);
+};
+
+const isTypeImage = file => {
+  const type = file.content_type || file.type;
+  return type.includes('image');
+};
+
+const fileName = file => {
+  return file.filename || file.name;
+};
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-y-1 gap-x-2 overflow-auto max-h-[12.5rem]">
+    <div
+      v-for="(attachment, index) in nonRecordedAudioAttachments"
+      :key="attachment.id"
+      class="flex items-center p-1 bg-n-slate-3 gap-1 rounded-md w-[15rem]"
+    >
+      <div class="max-w-[4rem] flex-shrink-0 w-6 flex items-center">
+        <img
+          v-if="isTypeImage(attachment.resource)"
+          class="object-cover w-6 h-6 rounded-sm"
+          :src="attachment.thumb"
+        />
+        <span v-else class="relative w-6 h-6 text-lg text-left -top-px">
+          📄
+        </span>
+      </div>
+      <div class="max-w-3/5 min-w-[50%] overflow-hidden text-ellipsis">
+        <span
+          class="h-4 overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap"
+        >
+          {{ fileName(attachment.resource) }}
+        </span>
+      </div>
+      <div class="w-[30%] justify-center">
+        <span class="overflow-hidden text-xs text-ellipsis whitespace-nowrap">
+          {{ formatFileSize(attachment.resource) }}
+        </span>
+      </div>
+      <div class="flex items-center justify-center">
+        <Button
+          ghost
+          slate
+          xs
+          icon="i-lucide-x"
+          @click="onRemoveAttachment(index)"
+        />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,202 @@
+<script>
+import AutomationActionTeamMessageInput from './AutomationActionTeamMessageInput.vue';
+import AutomationActionFileInput from './AutomationFileInput.vue';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import SingleSelect from 'dashboard/components-next/filter/inputs/SingleSelect.vue';
+import MultiSelect from 'dashboard/components-next/filter/inputs/MultiSelect.vue';
+import NextInput from 'dashboard/components-next/input/Input.vue';
+
+export default {
+  components: {
+    AutomationActionTeamMessageInput,
+    AutomationActionFileInput,
+    WootMessageEditor,
+    NextButton,
+    SingleSelect,
+    MultiSelect,
+    NextInput,
+  },
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => null,
+    },
+    actionTypes: {
+      type: Array,
+      default: () => [],
+    },
+    dropdownValues: {
+      type: Array,
+      default: () => [],
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+    showActionInput: {
+      type: Boolean,
+      default: true,
+    },
+    initialFileName: {
+      type: String,
+      default: '',
+    },
+    isMacro: {
+      type: Boolean,
+      default: false,
+    },
+    dropdownMaxHeight: {
+      type: String,
+      default: 'max-h-80',
+    },
+  },
+  emits: ['update:modelValue', 'input', 'removeAction', 'resetAction'],
+  computed: {
+    action_name: {
+      get() {
+        if (!this.modelValue) return null;
+        return this.modelValue.action_name;
+      },
+      set(value) {
+        const payload = this.modelValue || {};
+        this.$emit('update:modelValue', { ...payload, action_name: value });
+        this.$emit('input', { ...payload, action_name: value });
+      },
+    },
+    action_params: {
+      get() {
+        if (!this.modelValue) return null;
+        return this.modelValue.action_params;
+      },
+      set(value) {
+        const payload = this.modelValue || {};
+        this.$emit('update:modelValue', { ...payload, action_params: value });
+        this.$emit('input', { ...payload, action_params: value });
+      },
+    },
+    inputType() {
+      return this.actionTypes.find(action => action.key === this.action_name)
+        .inputType;
+    },
+    actionNameAsSelectModel: {
+      get() {
+        if (!this.action_name) return null;
+        const found = this.actionTypes.find(a => a.key === this.action_name);
+        return found ? { id: found.key, name: found.label } : null;
+      },
+      set(value) {
+        this.action_name = value?.id || value;
+      },
+    },
+    actionTypesAsOptions() {
+      return this.actionTypes.map(a => ({ id: a.key, name: a.label }));
+    },
+    isVerticalLayout() {
+      return ['team_message', 'textarea'].includes(this.inputType);
+    },
+    castMessageVmodel: {
+      get() {
+        if (Array.isArray(this.action_params)) {
+          return this.action_params[0];
+        }
+        return this.action_params;
+      },
+      set(value) {
+        this.action_params = value;
+      },
+    },
+  },
+  methods: {
+    removeAction() {
+      this.$emit('removeAction');
+    },
+    resetAction() {
+      this.$emit('resetAction');
+    },
+    onActionNameChange(value) {
+      this.actionNameAsSelectModel = value;
+      this.resetAction();
+    },
+  },
+};
+</script>
+
+<template>
+  <li class="list-none py-2 first:pt-0 last:pb-0">
+    <div
+      class="flex flex-col gap-2"
+      :class="{ 'animate-wiggle': errorMessage }"
+    >
+      <div class="flex items-center gap-2">
+        <SingleSelect
+          :model-value="actionNameAsSelectModel"
+          :options="actionTypesAsOptions"
+          :dropdown-max-height="dropdownMaxHeight"
+          disable-deselect
+          class="flex-shrink-0"
+          @update:model-value="onActionNameChange"
+        />
+        <template v-if="showActionInput && !isVerticalLayout">
+          <SingleSelect
+            v-if="inputType === 'search_select'"
+            v-model="action_params"
+            :options="dropdownValues"
+            :dropdown-max-height="dropdownMaxHeight"
+          />
+          <MultiSelect
+            v-else-if="inputType === 'multi_select'"
+            v-model="action_params"
+            :options="dropdownValues"
+            :dropdown-max-height="dropdownMaxHeight"
+          />
+          <NextInput
+            v-else-if="inputType === 'email'"
+            v-model="action_params"
+            type="email"
+            size="sm"
+            :placeholder="$t('AUTOMATION.ACTION.EMAIL_INPUT_PLACEHOLDER')"
+          />
+          <NextInput
+            v-else-if="inputType === 'url'"
+            v-model="action_params"
+            type="url"
+            size="sm"
+            :placeholder="$t('AUTOMATION.ACTION.URL_INPUT_PLACEHOLDER')"
+          />
+          <AutomationActionFileInput
+            v-else-if="inputType === 'attachment'"
+            v-model="action_params"
+            :initial-file-name="initialFileName"
+          />
+        </template>
+        <NextButton
+          v-if="!isMacro"
+          sm
+          solid
+          slate
+          icon="i-lucide-trash"
+          class="flex-shrink-0"
+          @click="removeAction"
+        />
+      </div>
+      <AutomationActionTeamMessageInput
+        v-if="inputType === 'team_message'"
+        v-model="action_params"
+        :teams="dropdownValues"
+        :dropdown-max-height="dropdownMaxHeight"
+      />
+      <WootMessageEditor
+        v-if="inputType === 'textarea'"
+        v-model="castMessageVmodel"
+        rows="4"
+        enable-variables
+        :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
+        class="[&_.ProseMirror-menubar]:hidden px-3 py-1 bg-n-alpha-1 rounded-lg outline outline-1 outline-n-weak dark:outline-n-strong"
+      />
+    </div>
+    <span v-if="errorMessage" class="text-sm text-n-ruby-11">
+      {{ errorMessage }}
+    </span>
+  </li>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue

@@ -0,0 +1,52 @@
+<script>
+import MultiSelect from 'dashboard/components-next/filter/inputs/MultiSelect.vue';
+
+export default {
+  components: {
+    MultiSelect,
+  },
+  props: {
+    teams: { type: Array, required: true },
+    modelValue: { type: Object, required: true },
+    dropdownMaxHeight: { type: String, default: 'max-h-80' },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      selectedTeams: [],
+      message: '',
+    };
+  },
+  mounted() {
+    const { team_ids: teamIds, message } = this.modelValue || {};
+    this.selectedTeams = teamIds || [];
+    this.message = message || '';
+  },
+  methods: {
+    updateValue() {
+      this.$emit('update:modelValue', {
+        team_ids: this.selectedTeams.map(team => team.id),
+        message: this.message,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <MultiSelect
+      v-model="selectedTeams"
+      :options="teams"
+      :dropdown-max-height="dropdownMaxHeight"
+      @update:model-value="updateValue"
+    />
+    <textarea
+      v-model="message"
+      class="mb-0 !text-sm"
+      rows="4"
+      :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
+      @input="updateValue"
+    />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/AutomationFileInput.vue

@@ -0,0 +1,97 @@
+<script>
+import { useAlert } from 'dashboard/composables';
+import Spinner from 'shared/components/Spinner.vue';
+export default {
+  components: {
+    Spinner,
+  },
+  props: {
+    initialFileName: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      uploadState: 'idle',
+      label: this.$t('AUTOMATION.ATTACHMENT.LABEL_IDLE'),
+    };
+  },
+  mounted() {
+    if (this.initialFileName) {
+      this.label = this.initialFileName;
+      this.uploadState = 'uploaded';
+    }
+  },
+  methods: {
+    async onChangeFile(event) {
+      this.uploadState = 'processing';
+      this.label = this.$t('AUTOMATION.ATTACHMENT.LABEL_UPLOADING');
+      try {
+        const file = event.target.files[0];
+        const id = await this.$store.dispatch(
+          'automations/uploadAttachment',
+          file
+        );
+        this.$emit('update:modelValue', [id]);
+        this.uploadState = 'uploaded';
+        this.label = this.$t('AUTOMATION.ATTACHMENT.LABEL_UPLOADED');
+      } catch (error) {
+        this.uploadState = 'failed';
+        this.label = this.$t('AUTOMATION.ATTACHMENT.LABEL_UPLOAD_FAILED');
+        useAlert(this.$t('AUTOMATION.ATTACHMENT.UPLOAD_ERROR'));
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <label class="input-wrapper" :class="uploadState">
+    <input
+      v-if="uploadState !== 'processing'"
+      type="file"
+      name="attachment"
+      :class="uploadState === 'processing' ? 'disabled' : ''"
+      @change="onChangeFile"
+    />
+    <Spinner v-if="uploadState === 'processing'" />
+    <fluent-icon v-if="uploadState === 'idle'" icon="file-upload" />
+    <fluent-icon
+      v-if="uploadState === 'uploaded'"
+      icon="checkmark-circle"
+      type="outline"
+      class="success-icon"
+    />
+    <fluent-icon
+      v-if="uploadState === 'failed'"
+      icon="dismiss-circle"
+      type="outline"
+      class="error-icon"
+    />
+    <p class="file-button">{{ label }}</p>
+  </label>
+</template>
+
+<style scoped>
+input[type='file'] {
+  @apply hidden;
+}
+.input-wrapper {
+  @apply flex h-8 bg-n-background py-1 px-2 items-center text-xs cursor-pointer rounded-lg border border-dashed border-n-strong;
+}
+.success-icon {
+  @apply text-n-teal-9 mr-2;
+}
+.error-icon {
+  @apply text-n-ruby-9 mr-2;
+}
+
+.processing {
+  @apply cursor-not-allowed opacity-90;
+}
+.file-button {
+  @apply whitespace-nowrap overflow-hidden text-ellipsis w-full mb-0;
+}
+</style>

research/chatwoot/app/javascript/dashboard/components/widgets/BackButton.vue

@@ -0,0 +1,38 @@
+<script setup>
+import router from '../../routes/index';
+const props = defineProps({
+  backUrl: {
+    type: [String, Object],
+    default: '',
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const goBack = () => {
+  if (props.backUrl !== '') {
+    router.push(props.backUrl);
+  } else {
+    router.go(-1);
+  }
+};
+
+const buttonStyleClass = props.compact ? 'text-sm' : 'text-base';
+</script>
+
+<template>
+  <button
+    class="flex items-center p-0 font-normal cursor-pointer text-n-slate-11"
+    :class="buttonStyleClass"
+    @click.capture="goBack"
+  >
+    <i class="i-lucide-chevron-left -ml-1 text-lg" />
+    {{ buttonLabel || $t('GENERAL_SETTINGS.BACK') }}
+  </button>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/ChannelItem.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { computed } from 'vue';
+import ChannelSelector from '../ChannelSelector.vue';
+
+const props = defineProps({
+  channel: {
+    type: Object,
+    required: true,
+  },
+  enabledFeatures: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['channelItemClick']);
+
+const hasFbConfigured = computed(() => {
+  return window.chatwootConfig?.fbAppId;
+});
+
+const hasInstagramConfigured = computed(() => {
+  return window.chatwootConfig?.instagramAppId;
+});
+
+const hasTiktokConfigured = computed(() => {
+  return window.chatwootConfig?.tiktokAppId;
+});
+
+const isActive = computed(() => {
+  const { key } = props.channel;
+  if (Object.keys(props.enabledFeatures).length === 0) {
+    return false;
+  }
+  if (key === 'website') {
+    return props.enabledFeatures.channel_website;
+  }
+  if (key === 'facebook') {
+    return props.enabledFeatures.channel_facebook && hasFbConfigured.value;
+  }
+  if (key === 'email') {
+    return props.enabledFeatures.channel_email;
+  }
+
+  if (key === 'instagram') {
+    return (
+      props.enabledFeatures.channel_instagram && hasInstagramConfigured.value
+    );
+  }
+
+  if (key === 'tiktok') {
+    return props.enabledFeatures.channel_tiktok && hasTiktokConfigured.value;
+  }
+
+  if (key === 'voice') {
+    return props.enabledFeatures.channel_voice;
+  }
+
+  return [
+    'website',
+    'twilio',
+    'api',
+    'whatsapp',
+    'sms',
+    'telegram',
+    'line',
+    'instagram',
+    'tiktok',
+    'voice',
+  ].includes(key);
+});
+
+const isComingSoon = computed(() => {
+  const { key } = props.channel;
+  // Show "Coming Soon" only if the channel is marked as coming soon
+  // and the corresponding feature flag is not enabled yet.
+  return ['voice'].includes(key) && !isActive.value;
+});
+
+const onItemClick = () => {
+  if (isActive.value) {
+    emit('channelItemClick', props.channel.key);
+  }
+};
+</script>
+
+<template>
+  <ChannelSelector
+    :title="channel.title"
+    :description="channel.description"
+    :icon="channel.icon"
+    :is-coming-soon="isComingSoon"
+    :disabled="!isActive"
+    @click="onItemClick"
+  />
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { computed } from 'vue';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import wootConstants from 'dashboard/constants/globals';
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  activeTab: {
+    type: String,
+    default: wootConstants.ASSIGNEE_TYPE.ME,
+  },
+});
+
+const emit = defineEmits(['chatTabChange']);
+
+const activeTabIndex = computed(() => {
+  return props.items.findIndex(item => item.key === props.activeTab);
+});
+
+const onTabChange = selectedTabIndex => {
+  if (selectedTabIndex >= 0 && selectedTabIndex < props.items.length) {
+    const selectedItem = props.items[selectedTabIndex];
+    if (selectedItem.key !== props.activeTab) {
+      emit('chatTabChange', selectedItem.key);
+    }
+  }
+};
+
+const keyboardEvents = {
+  'Alt+KeyN': {
+    action: () => {
+      if (props.activeTab === wootConstants.ASSIGNEE_TYPE.ALL) {
+        onTabChange(0);
+      } else {
+        const nextIndex = (activeTabIndex.value + 1) % props.items.length;
+        onTabChange(nextIndex);
+      }
+    },
+  },
+};
+
+useKeyboardEvents(keyboardEvents);
+</script>
+
+<template>
+  <woot-tabs
+    :index="activeTabIndex"
+    class="w-full px-3 -mt-1 py-0 [&_ul]:p-0 h-10"
+    @change="onTabChange"
+  >
+    <woot-tabs-item
+      v-for="(item, index) in items"
+      :key="item.key"
+      class="text-sm [&_a]:font-medium"
+      :index="index"
+      :name="item.name"
+      :count="item.count"
+      is-compact
+    />
+  </woot-tabs>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/ColorPicker.vue

@@ -0,0 +1,72 @@
+<script>
+import { Chrome } from '@lk77/vue3-color';
+
+export default {
+  components: {
+    Chrome,
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      isPickerOpen: false,
+    };
+  },
+  methods: {
+    closeTogglePicker() {
+      if (this.isPickerOpen) {
+        this.toggleColorPicker();
+      }
+    },
+    toggleColorPicker() {
+      this.isPickerOpen = !this.isPickerOpen;
+    },
+    updateColor(e) {
+      this.$emit('update:modelValue', e.hex);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="colorpicker">
+    <div
+      class="colorpicker--selected"
+      :style="`background-color: ${modelValue}`"
+      @click.prevent="toggleColorPicker"
+    />
+    <Chrome
+      v-if="isPickerOpen"
+      v-on-clickaway="closeTogglePicker"
+      disable-alpha
+      :model-value="modelValue"
+      class="colorpicker--chrome"
+      @update:model-value="updateColor"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.colorpicker {
+  position: relative;
+}
+
+.colorpicker--selected {
+  @apply border border-solid border-n-weak rounded cursor-pointer h-8 w-8 mb-4;
+}
+
+.colorpicker--chrome.vc-chrome {
+  @apply shadow-lg -mt-2.5 absolute z-[9999] border border-solid border-n-weak rounded;
+
+  ::v-deep {
+    input {
+      @apply bg-white dark:bg-white;
+    }
+  }
+}
+</style>

research/chatwoot/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue

@@ -0,0 +1,125 @@
+<script>
+import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
+
+export default {
+  components: {
+    LoadingState,
+  },
+  props: {
+    config: {
+      type: Array,
+      default: () => [],
+    },
+    currentChat: {
+      type: Object,
+      default: () => ({}),
+    },
+    isVisible: {
+      type: Boolean,
+      default: false,
+    },
+    position: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      hasOpenedAtleastOnce: false,
+      iframeLoading: true,
+    };
+  },
+  computed: {
+    dashboardAppContext() {
+      return {
+        conversation: this.currentChat,
+        contact: this.$store.getters['contacts/getContact'](this.contactId),
+        currentAgent: this.currentAgent,
+      };
+    },
+    contactId() {
+      return this.currentChat?.meta?.sender?.id;
+    },
+    currentAgent() {
+      const { id, name, email } = this.$store.getters.getCurrentUser;
+      return { id, name, email };
+    },
+  },
+  watch: {
+    isVisible() {
+      if (this.isVisible) {
+        this.hasOpenedAtleastOnce = true;
+      }
+    },
+  },
+  mounted() {
+    window.addEventListener('message', this.triggerEvent);
+  },
+  unmounted() {
+    window.removeEventListener('message', this.triggerEvent);
+  },
+  methods: {
+    triggerEvent(event) {
+      if (!this.isVisible) return;
+      if (event.data === 'chatwoot-dashboard-app:fetch-info') {
+        this.onIframeLoad(0);
+      }
+    },
+    getFrameId(index) {
+      return `dashboard-app--frame-${this.position}-${index}`;
+    },
+    onIframeLoad(index) {
+      // A possible alternative is to use ref instead of document.getElementById
+      // However, when ref is used together with v-for, the ref you get will be
+      // an array containing the child components mirroring the data source.
+      const frameElement = document.getElementById(this.getFrameId(index));
+      const eventData = { event: 'appContext', data: this.dashboardAppContext };
+      frameElement.contentWindow.postMessage(JSON.stringify(eventData), '*');
+      this.iframeLoading = false;
+    },
+  },
+};
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <div v-if="hasOpenedAtleastOnce" class="dashboard-app--container">
+    <div
+      v-for="(configItem, index) in config"
+      :key="index"
+      class="dashboard-app--list"
+    >
+      <LoadingState
+        v-if="iframeLoading"
+        :message="$t('DASHBOARD_APPS.LOADING_MESSAGE')"
+        class="dashboard-app_loading-container"
+      />
+      <iframe
+        v-if="configItem.type === 'frame' && configItem.url"
+        :id="getFrameId(index)"
+        :src="configItem.url"
+        @load="() => onIframeLoad(index)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dashboard-app--container,
+.dashboard-app--list,
+.dashboard-app--list iframe {
+  height: 100%;
+  width: 100%;
+}
+
+.dashboard-app--list iframe {
+  border: 0;
+}
+.dashboard-app_loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+</style>

research/chatwoot/app/javascript/dashboard/components/widgets/EmptyState.vue

@@ -0,0 +1,26 @@
+<script>
+export default {
+  props: {
+    title: { type: String, default: '' },
+    message: { type: String, default: '' },
+  },
+};
+</script>
+
+<template>
+  <div class="empty-state py-16 px-1 ml-0 mr-0">
+    <h3
+      v-if="title"
+      class="text-n-slate-12 block text-center w-full text-xl font-medium"
+    >
+      {{ title }}
+    </h3>
+    <p
+      v-if="message"
+      class="block text-center text-n-slate-11 my-4 mx-auto w-[90%]"
+    >
+      {{ message }}
+    </p>
+    <slot />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/FeatureToggle.vue

@@ -0,0 +1,27 @@
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  props: {
+    featureKey: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+      accountId: 'getCurrentAccountId',
+    }),
+    isFeatureEnabled() {
+      return this.isFeatureEnabledonAccount(this.accountId, this.featureKey);
+    },
+  },
+};
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <div v-if="isFeatureEnabled">
+    <slot />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/FilterInput/FilterOperatorTypes.js

@@ -0,0 +1,90 @@
+export const OPERATOR_TYPES_1 = [
+  {
+    value: 'equal_to',
+    label: 'Equal to',
+  },
+  {
+    value: 'not_equal_to',
+    label: 'Not equal to',
+  },
+];
+
+export const OPERATOR_TYPES_2 = [
+  {
+    value: 'equal_to',
+    label: 'Equal to',
+  },
+  {
+    value: 'not_equal_to',
+    label: 'Not equal to',
+  },
+  {
+    value: 'is_present',
+    label: 'Is present',
+  },
+  {
+    value: 'is_not_present',
+    label: 'Is not present',
+  },
+];
+
+export const OPERATOR_TYPES_3 = [
+  {
+    value: 'equal_to',
+    label: 'Equal to',
+  },
+  {
+    value: 'not_equal_to',
+    label: 'Not equal to',
+  },
+  {
+    value: 'contains',
+    label: 'Contains',
+  },
+  {
+    value: 'does_not_contain',
+    label: 'Does not contain',
+  },
+];
+
+export const OPERATOR_TYPES_4 = [
+  {
+    value: 'equal_to',
+    label: 'Equal to',
+  },
+  {
+    value: 'not_equal_to',
+    label: 'Not equal to',
+  },
+  {
+    value: 'is_present',
+    label: 'Is present',
+  },
+  {
+    value: 'is_not_present',
+    label: 'Is not present',
+  },
+  {
+    value: 'is_greater_than',
+    label: 'Is greater than',
+  },
+  {
+    value: 'is_less_than',
+    label: 'Is less than',
+  },
+];
+
+export const OPERATOR_TYPES_5 = [
+  {
+    value: 'is_greater_than',
+    label: 'Is greater than',
+  },
+  {
+    value: 'is_less_than',
+    label: 'Is less than',
+  },
+  {
+    value: 'days_before',
+    label: 'Is x days before',
+  },
+];

research/chatwoot/app/javascript/dashboard/components/widgets/FilterInput/FilterOperatorTypes.spec.js

@@ -0,0 +1,15 @@
+import {
+  OPERATOR_TYPES_1,
+  OPERATOR_TYPES_2,
+  OPERATOR_TYPES_3,
+  OPERATOR_TYPES_4,
+} from './FilterOperatorTypes';
+
+describe('#filterOperators', () => {
+  it('Matches the correct Operators', () => {
+    expect(OPERATOR_TYPES_1).toMatchObject(OPERATOR_TYPES_1);
+    expect(OPERATOR_TYPES_2).toMatchObject(OPERATOR_TYPES_2);
+    expect(OPERATOR_TYPES_3).toMatchObject(OPERATOR_TYPES_3);
+    expect(OPERATOR_TYPES_4).toMatchObject(OPERATOR_TYPES_4);
+  });
+});

research/chatwoot/app/javascript/dashboard/components/widgets/FloatingCallWidget.vue

@@ -0,0 +1,184 @@
+<script setup>
+import { watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import { useCallSession } from 'dashboard/composables/useCallSession';
+import WindowVisibilityHelper from 'dashboard/helper/AudioAlerts/WindowVisibilityHelper';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+
+const router = useRouter();
+const store = useStore();
+
+const {
+  activeCall,
+  incomingCalls,
+  hasActiveCall,
+  isJoining,
+  joinCall,
+  endCall: endCallSession,
+  rejectIncomingCall,
+  dismissCall,
+  formattedCallDuration,
+} = useCallSession();
+
+const getCallInfo = call => {
+  const conversation = store.getters.getConversationById(call?.conversationId);
+  const inbox = store.getters['inboxes/getInbox'](conversation?.inbox_id);
+  const sender = conversation?.meta?.sender;
+  return {
+    conversation,
+    inbox,
+    contactName: sender?.name || sender?.phone_number || 'Unknown caller',
+    inboxName: inbox?.name || 'Customer support',
+    avatar: sender?.avatar || sender?.thumbnail,
+  };
+};
+
+const handleEndCall = async () => {
+  const call = activeCall.value;
+  if (!call) return;
+
+  const inboxId = call.inboxId || getCallInfo(call).conversation?.inbox_id;
+  if (!inboxId) return;
+
+  await endCallSession({
+    conversationId: call.conversationId,
+    inboxId,
+  });
+};
+
+const handleJoinCall = async call => {
+  const { conversation } = getCallInfo(call);
+  if (!call || !conversation || isJoining.value) return;
+
+  // End current active call before joining new one
+  if (hasActiveCall.value) {
+    await handleEndCall();
+  }
+
+  const result = await joinCall({
+    conversationId: call.conversationId,
+    inboxId: conversation.inbox_id,
+    callSid: call.callSid,
+  });
+
+  if (result) {
+    router.push({
+      name: 'inbox_conversation',
+      params: { conversation_id: call.conversationId },
+    });
+  }
+};
+
+// Auto-join outbound calls when window is visible
+watch(
+  () => incomingCalls.value[0],
+  call => {
+    if (
+      call?.callDirection === 'outbound' &&
+      !hasActiveCall.value &&
+      WindowVisibilityHelper.isWindowVisible()
+    ) {
+      handleJoinCall(call);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div
+    v-if="incomingCalls.length || hasActiveCall"
+    class="fixed ltr:right-4 rtl:left-4 bottom-4 z-50 flex flex-col gap-2 w-72"
+  >
+    <!-- Incoming Calls (shown above active call) -->
+    <div
+      v-for="call in hasActiveCall ? incomingCalls : []"
+      :key="call.callSid"
+      class="flex items-center gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
+    >
+      <div class="animate-pulse ring-2 ring-n-teal-9 rounded-full inline-flex">
+        <Avatar
+          :src="getCallInfo(call).avatar"
+          :name="getCallInfo(call).contactName"
+          :size="40"
+          rounded-full
+        />
+      </div>
+      <div class="flex-1 min-w-0">
+        <p class="text-sm font-medium text-n-slate-12 truncate mb-0">
+          {{ getCallInfo(call).contactName }}
+        </p>
+        <p class="text-xs text-n-slate-11 truncate">
+          {{ getCallInfo(call).inboxName }}
+        </p>
+      </div>
+      <div class="flex shrink-0 gap-2">
+        <button
+          class="flex justify-center items-center w-10 h-10 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors"
+          @click="dismissCall(call.callSid)"
+        >
+          <i class="text-lg text-white i-ph-phone-x-bold" />
+        </button>
+        <button
+          class="flex justify-center items-center w-10 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
+          @click="handleJoinCall(call)"
+        >
+          <i class="text-lg text-white i-ph-phone-bold" />
+        </button>
+      </div>
+    </div>
+
+    <!-- Main Call Widget -->
+    <div
+      v-if="hasActiveCall || incomingCalls.length"
+      class="flex items-center gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
+    >
+      <div
+        class="ring-2 ring-n-teal-9 rounded-full inline-flex"
+        :class="{ 'animate-pulse': !hasActiveCall }"
+      >
+        <Avatar
+          :src="getCallInfo(activeCall || incomingCalls[0]).avatar"
+          :name="getCallInfo(activeCall || incomingCalls[0]).contactName"
+          :size="40"
+          rounded-full
+        />
+      </div>
+      <div class="flex-1 min-w-0">
+        <p class="text-sm font-medium text-n-slate-12 truncate mb-0">
+          {{ getCallInfo(activeCall || incomingCalls[0]).contactName }}
+        </p>
+        <p v-if="hasActiveCall" class="font-mono text-sm text-n-teal-9">
+          {{ formattedCallDuration }}
+        </p>
+        <p v-else class="text-xs text-n-slate-11">
+          {{
+            incomingCalls[0]?.callDirection === 'outbound'
+              ? $t('CONVERSATION.VOICE_WIDGET.OUTGOING_CALL')
+              : $t('CONVERSATION.VOICE_WIDGET.INCOMING_CALL')
+          }}
+        </p>
+      </div>
+      <div class="flex shrink-0 gap-2">
+        <button
+          class="flex justify-center items-center w-10 h-10 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors"
+          @click="
+            hasActiveCall
+              ? handleEndCall()
+              : rejectIncomingCall(incomingCalls[0]?.callSid)
+          "
+        >
+          <i class="text-lg text-white i-ph-phone-x-bold" />
+        </button>
+        <button
+          v-if="!hasActiveCall"
+          class="flex justify-center items-center w-10 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
+          @click="handleJoinCall(incomingCalls[0])"
+        >
+          <i class="text-lg text-white i-ph-phone-bold" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/InboxName.vue

@@ -0,0 +1,19 @@
+<script setup>
+import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
+
+defineProps({
+  inbox: {
+    type: Object,
+    default: () => {},
+  },
+});
+</script>
+
+<template>
+  <div :title="inbox.name" class="flex items-center gap-0.5 min-w-0">
+    <ChannelIcon :inbox="inbox" class="size-4 flex-shrink-0 text-n-slate-11" />
+    <span class="truncate text-label-small text-n-slate-11">
+      {{ inbox.name }}
+    </span>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/LoadingState.vue

@@ -0,0 +1,20 @@
+<script setup>
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+defineProps({
+  message: { type: String, default: '' },
+});
+</script>
+
+<template>
+  <div class="flex items-center justify-center p-8">
+    <h6
+      class="flex items-center gap-3 text-base text-center w-100 text-n-slate-11"
+    >
+      <span class="text-body-main !text-base text-n-slate-12">
+        {{ message }}
+      </span>
+      <Spinner class="text-n-brand" />
+    </h6>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue

@@ -0,0 +1,28 @@
+<script>
+export default {
+  props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    headerContent: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="border-b border-solid border-n-weak/60">
+    <div class="max-w-7xl w-full mx-auto pt-4 pb-0 px-6">
+      <h2 class="text-2xl text-n-slate-12 mb-1 font-medium">
+        {{ headerTitle }}
+      </h2>
+      <p v-if="headerContent" class="w-full text-n-slate-11 text-sm mb-2">
+        {{ headerContent }}
+      </p>
+      <slot />
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/ShowMore.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: '',
+  },
+  limit: {
+    type: Number,
+    default: 120,
+  },
+});
+const { t } = useI18n();
+const showMore = ref(false);
+
+const textToBeDisplayed = computed(() => {
+  if (showMore.value || props.text.length <= props.limit) {
+    return props.text;
+  }
+
+  return props.text.slice(0, props.limit) + '...';
+});
+const buttonLabel = computed(() => {
+  const i18nKey = !showMore.value ? 'SHOW_MORE' : 'SHOW_LESS';
+  return t(`COMPONENTS.SHOW_MORE_BLOCK.${i18nKey}`);
+});
+
+const toggleShowMore = () => {
+  showMore.value = !showMore.value;
+};
+</script>
+
+<template>
+  <span>
+    {{ textToBeDisplayed }}
+    <button
+      v-if="text.length > limit"
+      class="text-n-brand !p-0 !border-0 align-top"
+      @click.stop="toggleShowMore"
+    >
+      {{ buttonLabel }}
+    </button>
+  </span>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/TableFooter.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { computed } from 'vue';
+import TableFooterResults from './TableFooterResults.vue';
+import TableFooterPagination from './TableFooterPagination.vue';
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  pageSize: {
+    type: Number,
+    default: 25,
+  },
+  totalCount: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(['pageChange']);
+const totalPages = computed(() => Math.ceil(props.totalCount / props.pageSize));
+const firstIndex = computed(() => props.pageSize * (props.currentPage - 1) + 1);
+const lastIndex = computed(() =>
+  Math.min(props.totalCount, props.pageSize * props.currentPage)
+);
+const isFooterVisible = computed(
+  () => props.totalCount && !(firstIndex.value > props.totalCount)
+);
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <footer
+    v-if="isFooterVisible"
+    class="flex items-center justify-between h-12 px-6"
+  >
+    <TableFooterResults
+      :first-index="firstIndex"
+      :last-index="lastIndex"
+      :total-count="totalCount"
+    />
+    <TableFooterPagination
+      v-if="totalCount"
+      :current-page="currentPage"
+      :total-pages="totalPages"
+      :total-count="totalCount"
+      :page-size="pageSize"
+      @page-change="emit('pageChange', $event)"
+    />
+  </footer>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/TableFooterPagination.vue

@@ -0,0 +1,108 @@
+<script setup>
+import { computed } from 'vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  totalPages: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(['pageChange']);
+const hasLastPage = computed(
+  () => props.currentPage === props.totalPages || props.totalPages === 1
+);
+const hasFirstPage = computed(() => props.currentPage === 1);
+const hasNextPage = computed(() => props.currentPage === props.totalPages);
+const hasPrevPage = computed(() => props.currentPage === 1);
+
+function onPageChange(newPage) {
+  emit('pageChange', newPage);
+}
+
+const onNextPage = () => {
+  if (!onNextPage.value) {
+    onPageChange(props.currentPage + 1);
+  }
+};
+const onPrevPage = () => {
+  if (!hasPrevPage.value) {
+    onPageChange(props.currentPage - 1);
+  }
+};
+const onFirstPage = () => {
+  if (!hasFirstPage.value) {
+    onPageChange(1);
+  }
+};
+const onLastPage = () => {
+  if (!hasLastPage.value) {
+    onPageChange(props.totalPages);
+  }
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center h-8 outline outline-1 outline-n-weak rounded-lg"
+  >
+    <NextButton
+      faded
+      sm
+      slate
+      icon="i-lucide-chevrons-left"
+      class="ltr:rounded-l-lg ltr:rounded-r-none rtl:rounded-r-lg rtl:rounded-l-none"
+      :disabled="hasFirstPage"
+      @click="onFirstPage"
+    />
+    <div class="flex items-center justify-center bg-n-slate-9/10 h-full">
+      <div class="w-px h-4 rounded-sm bg-n-strong" />
+    </div>
+    <NextButton
+      faded
+      sm
+      slate
+      icon="i-lucide-chevron-left"
+      class="rounded-none"
+      :disabled="hasPrevPage"
+      @click="onPrevPage"
+    />
+    <div
+      class="flex items-center gap-3 px-3 tabular-nums bg-n-slate-9/10 h-full"
+    >
+      <span class="text-sm text-n-slate-12">
+        {{ currentPage }}
+      </span>
+      <span class="text-n-slate-11">/</span>
+      <span class="text-sm text-n-slate-11">
+        {{ totalPages }}
+      </span>
+    </div>
+    <NextButton
+      faded
+      sm
+      slate
+      icon="i-lucide-chevron-right"
+      class="rounded-none"
+      :disabled="hasNextPage"
+      @click="onNextPage"
+    />
+    <div class="flex items-center justify-center bg-n-slate-9/10 h-full">
+      <div class="w-px h-4 rounded-sm bg-n-strong" />
+    </div>
+    <NextButton
+      faded
+      sm
+      slate
+      icon="i-lucide-chevrons-right"
+      class="ltr:rounded-r-lg ltr:rounded-l-none rtl:rounded-l-lg rtl:rounded-r-none"
+      :disabled="hasLastPage"
+      @click="onLastPage"
+    />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/TableFooterResults.vue

@@ -0,0 +1,28 @@
+<script setup>
+defineProps({
+  firstIndex: {
+    type: Number,
+    default: 0,
+  },
+  lastIndex: {
+    type: Number,
+    default: 0,
+  },
+  totalCount: {
+    type: Number,
+    default: 0,
+  },
+});
+</script>
+
+<template>
+  <span class="text-sm text-n-slate-11 font-medium">
+    {{
+      $t('GENERAL.SHOWING_RESULTS', {
+        firstIndex,
+        lastIndex,
+        totalCount,
+      })
+    }}
+  </span>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/TableHeaderCell.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  span: {
+    type: Number,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+});
+
+const spanClass = computed(() => {
+  if (props.span === 1) return 'col-span-1';
+  if (props.span === 2) return 'col-span-2';
+  if (props.span === 3) return 'col-span-3';
+  if (props.span === 4) return 'col-span-4';
+  if (props.span === 5) return 'col-span-5';
+  if (props.span === 6) return 'col-span-6';
+  if (props.span === 7) return 'col-span-7';
+  if (props.span === 8) return 'col-span-8';
+  if (props.span === 9) return 'col-span-9';
+  if (props.span === 10) return 'col-span-10';
+
+  return 'col-span-1';
+});
+</script>
+
+<template>
+  <div
+    class="flex items-center px-0 py-2 text-xs font-medium text-right uppercase text-n-slate-11 rtl:text-left"
+    :class="spanClass"
+  >
+    <slot>
+      {{ label }}
+    </slot>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { computed } from 'vue';
+import Avatar from 'next/avatar/Avatar.vue';
+
+const props = defineProps({
+  usersList: {
+    type: Array,
+    default: () => [],
+  },
+  size: {
+    type: Number,
+    default: 24,
+  },
+  showMoreThumbnailsCount: {
+    type: Boolean,
+    default: false,
+  },
+  moreThumbnailsText: {
+    type: String,
+    default: '',
+  },
+  gap: {
+    type: String,
+    default: 'normal',
+    validator(value) {
+      // The value must match one of these strings
+      return ['normal', 'tight'].includes(value);
+    },
+  },
+});
+
+const gapClass = computed(() => {
+  if (props.gap === 'tight') {
+    return 'ltr:[&:not(:first-child)]:-ml-2 rtl:[&:not(:first-child)]:-mr-2';
+  }
+  return 'ltr:[&:not(:first-child)]:-ml-1 rtl:[&:not(:first-child)]:-mr-1';
+});
+
+const moreThumbnailsClass = computed(() => {
+  if (props.gap === 'tight') {
+    return 'ltr:-ml-2 rtl:-mr-2';
+  }
+  return 'ltr:-ml-1 rtl:-mr-1';
+});
+</script>
+
+<template>
+  <div class="flex">
+    <Avatar
+      v-for="user in usersList"
+      :key="user.id"
+      v-tooltip="user.name"
+      :title="user.name"
+      :src="user.thumbnail"
+      :name="user.name"
+      :size="size"
+      class="[&>span]:outline [&>span]:outline-1 [&>span]:outline-n-background [&>span]:shadow"
+      :class="gapClass"
+      rounded-full
+    />
+    <span
+      v-if="showMoreThumbnailsCount"
+      class="text-n-slate-11 bg-n-slate-4 outline outline-1 outline-n-background text-xs font-medium rounded-full px-2 inline-flex items-center shadow relative"
+      :class="moreThumbnailsClass"
+    >
+      {{ moreThumbnailsText }}
+    </span>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue

@@ -0,0 +1,34 @@
+<script setup>
+import Avatar from 'next/avatar/Avatar.vue';
+
+defineProps({
+  user: {
+    type: Object,
+    default: () => ({}),
+  },
+  size: {
+    type: Number,
+    default: 20,
+  },
+  textClass: {
+    type: String,
+    default: 'text-sm text-n-slate-12',
+  },
+});
+</script>
+
+<template>
+  <div class="flex items-center gap-1.5 text-left">
+    <Avatar
+      :src="user.thumbnail"
+      :size="size"
+      :name="user.name"
+      :status="user.availability_status"
+      hide-offline-status
+      rounded-full
+    />
+    <span class="my-0 truncate text-capitalize" :class="textClass">
+      {{ user.name }}
+    </span>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/VideoCallButton.vue

@@ -0,0 +1,61 @@
+<script>
+import { mapGetters } from 'vuex';
+import DyteAPI from 'dashboard/api/integrations/dyte';
+import { useAlert } from 'dashboard/composables';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+export default {
+  components: {
+    NextButton,
+  },
+  props: {
+    conversationId: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return { isLoading: false };
+  },
+  computed: {
+    ...mapGetters({ appIntegrations: 'integrations/getAppIntegrations' }),
+    isVideoIntegrationEnabled() {
+      return this.appIntegrations.find(
+        integration => integration.id === 'dyte' && !!integration.hooks.length
+      );
+    },
+  },
+  mounted() {
+    if (!this.appIntegrations.length) {
+      this.$store.dispatch('integrations/get');
+    }
+  },
+  methods: {
+    async onClick() {
+      this.isLoading = true;
+      try {
+        await DyteAPI.createAMeeting(this.conversationId);
+      } catch (error) {
+        useAlert(this.$t('INTEGRATION_SETTINGS.DYTE.CREATE_ERROR'));
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+};
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <NextButton
+    v-if="isVideoIntegrationEnabled"
+    v-tooltip.top-end="
+      $t('INTEGRATION_SETTINGS.DYTE.START_VIDEO_CALL_HELP_TEXT')
+    "
+    icon="i-ph-video-camera"
+    slate
+    faded
+    sm
+    @click="onClick"
+  />
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue

@@ -0,0 +1,122 @@
+<script setup>
+import getUuid from 'widget/helpers/uuid';
+import { ref, onMounted, onUnmounted, defineEmits, defineExpose } from 'vue';
+import WaveSurfer from 'wavesurfer.js';
+import RecordPlugin from 'wavesurfer.js/dist/plugins/record.js';
+import { format, intervalToDuration } from 'date-fns';
+import { convertAudio } from './utils/mp3ConversionUtils';
+
+const props = defineProps({
+  audioRecordFormat: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  'recorderProgressChanged',
+  'finishRecord',
+  'pause',
+  'play',
+]);
+
+const waveformContainer = ref(null);
+const wavesurfer = ref(null);
+const record = ref(null);
+const isRecording = ref(false);
+const isPlaying = ref(false);
+const hasRecording = ref(false);
+
+const formatTimeProgress = time => {
+  const duration = intervalToDuration({ start: 0, end: time });
+  return format(
+    new Date(0, 0, 0, 0, duration.minutes, duration.seconds),
+    'mm:ss'
+  );
+};
+
+const initWaveSurfer = () => {
+  wavesurfer.value = WaveSurfer.create({
+    container: waveformContainer.value,
+    waveColor: '#1F93FF',
+    progressColor: '#6E6F73',
+    height: 100,
+    barWidth: 2,
+    barGap: 1,
+    barRadius: 2,
+    plugins: [
+      RecordPlugin.create({
+        scrollingWaveform: true,
+        renderRecordedAudio: false,
+      }),
+    ],
+  });
+
+  wavesurfer.value.on('pause', () => emit('pause'));
+  wavesurfer.value.on('play', () => emit('play'));
+
+  record.value = wavesurfer.value.plugins[0];
+
+  wavesurfer.value.on('finish', () => {
+    isPlaying.value = false;
+  });
+
+  record.value.on('record-end', async blob => {
+    const audioUrl = URL.createObjectURL(blob);
+    const audioBlob = await convertAudio(blob, props.audioRecordFormat);
+    const fileName = `${getUuid()}.mp3`;
+    const file = new File([audioBlob], fileName, {
+      type: props.audioRecordFormat,
+    });
+    wavesurfer.value.load(audioUrl);
+    emit('finishRecord', {
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      file,
+    });
+    hasRecording.value = true;
+    isRecording.value = false;
+  });
+
+  record.value.on('record-progress', time => {
+    emit('recorderProgressChanged', formatTimeProgress(time));
+  });
+};
+
+const stopRecording = () => {
+  if (isRecording.value) {
+    record.value.stopRecording();
+    isRecording.value = false;
+  }
+};
+
+const startRecording = () => {
+  record.value.startRecording();
+  isRecording.value = true;
+};
+
+const playPause = () => {
+  if (hasRecording.value) {
+    wavesurfer.value.playPause();
+    isPlaying.value = !isPlaying.value;
+  }
+};
+
+onMounted(() => {
+  initWaveSurfer();
+  startRecording();
+});
+
+onUnmounted(() => {
+  if (wavesurfer.value) {
+    wavesurfer.value.destroy();
+  }
+});
+
+defineExpose({ playPause, stopRecording, record });
+</script>
+
+<template>
+  <div ref="waveformContainer" class="w-full p-1" />
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/WootWriter/CopilotEditor.vue

@@ -0,0 +1,253 @@
+<script setup>
+import { ref, computed, watch, onMounted, useTemplateRef } from 'vue';
+
+import {
+  buildMessageSchema,
+  buildEditor,
+  EditorView,
+  MessageMarkdownTransformer,
+  MessageMarkdownSerializer,
+  EditorState,
+  Selection,
+} from '@chatwoot/prosemirror-schema';
+
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  editorId: { type: String, default: '' },
+  placeholder: {
+    type: String,
+    default: 'Give copilot additional prompts, or ask anything else...',
+  },
+  generatedContent: { type: String, default: '' },
+  autofocus: {
+    type: Boolean,
+    default: true,
+  },
+  isPopout: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'blur',
+  'input',
+  'update:modelValue',
+  'keyup',
+  'focus',
+  'keydown',
+  'send',
+]);
+
+const { formatMessage } = useMessageFormatter();
+
+// Minimal schema with no marks or nodes for copilot input
+const copilotSchema = buildMessageSchema([], []);
+
+const handleSubmit = () => emit('send');
+
+const createState = (
+  content,
+  placeholder,
+  plugins = [],
+  enabledMenuOptions = []
+) => {
+  return EditorState.create({
+    doc: new MessageMarkdownTransformer(copilotSchema).parse(content),
+    plugins: buildEditor({
+      schema: copilotSchema,
+      placeholder,
+      plugins,
+      enabledMenuOptions,
+    }),
+  });
+};
+
+// we don't need them to be reactive
+// It cases weird issues where the objects are proxied
+// and then the editor doesn't work as expected
+let editorView = null;
+let state = null;
+
+// reactive data
+const isTextSelected = ref(false); // Tracks text selection and prevents unnecessary re-renders on mouse selection
+
+// element refs
+const editor = useTemplateRef('editor');
+
+function contentFromEditor() {
+  if (editorView) {
+    return MessageMarkdownSerializer.serialize(editorView.state.doc);
+  }
+  return '';
+}
+
+function focusEditorInputField() {
+  const { tr } = editorView.state;
+  const selection = Selection.atEnd(tr.doc);
+
+  editorView.dispatch(tr.setSelection(selection));
+  editorView.focus();
+}
+
+function emitOnChange() {
+  emit('update:modelValue', contentFromEditor());
+  emit('input', contentFromEditor());
+}
+
+function onKeyup() {
+  emit('keyup');
+}
+
+function onKeydown(view, event) {
+  emit('keydown');
+
+  // Handle Enter key to send message (Shift+Enter for new line)
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault();
+    handleSubmit();
+    return true; // Prevent ProseMirror's default Enter handling
+  }
+
+  return false; // Allow other keys to work normally
+}
+
+function onBlur() {
+  emit('blur');
+}
+
+function onFocus() {
+  emit('focus');
+}
+
+function checkSelection(editorState) {
+  const hasSelection = editorState.selection.from !== editorState.selection.to;
+  if (hasSelection === isTextSelected.value) return;
+  isTextSelected.value = hasSelection;
+}
+
+// computed properties
+const plugins = computed(() => {
+  return [];
+});
+
+const enabledMenuOptions = computed(() => {
+  return [];
+});
+
+function reloadState() {
+  state = createState(
+    props.modelValue,
+    props.placeholder,
+    plugins.value,
+    enabledMenuOptions.value
+  );
+  editorView.updateState(state);
+  focusEditorInputField();
+}
+
+function createEditorView() {
+  editorView = new EditorView(editor.value, {
+    state: state,
+    dispatchTransaction: tx => {
+      state = state.apply(tx);
+      editorView.updateState(state);
+      if (tx.docChanged) {
+        emitOnChange();
+      }
+      checkSelection(state);
+    },
+    handleDOMEvents: {
+      keyup: onKeyup,
+      focus: onFocus,
+      blur: onBlur,
+      keydown: onKeydown,
+    },
+  });
+}
+
+// watchers
+watch(
+  computed(() => props.modelValue),
+  (newValue = '') => {
+    if (newValue !== contentFromEditor()) {
+      reloadState();
+    }
+  }
+);
+
+watch(
+  computed(() => props.editorId),
+  () => {
+    reloadState();
+  }
+);
+
+// lifecycle
+onMounted(() => {
+  state = createState(
+    props.modelValue,
+    props.placeholder,
+    plugins.value,
+    enabledMenuOptions.value
+  );
+
+  createEditorView();
+  editorView.updateState(state);
+
+  if (props.autofocus) {
+    focusEditorInputField();
+  }
+});
+</script>
+
+<template>
+  <div class="space-y-2 mb-4">
+    <div
+      class="overflow-y-auto"
+      :class="{ 'max-h-96': isPopout, 'max-h-56': !isPopout }"
+    >
+      <p
+        v-dompurify-html="formatMessage(generatedContent, false)"
+        class="text-n-iris-12 text-sm prose-sm font-normal !mb-4"
+      />
+    </div>
+    <div class="editor-root relative editor--copilot space-x-2">
+      <div ref="editor" />
+      <div class="flex items-center justify-end absolute right-2 bottom-2">
+        <NextButton
+          class="bg-n-iris-9 text-white !rounded-full"
+          icon="i-lucide-arrow-up"
+          solid
+          sm
+          @click="handleSubmit"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import '@chatwoot/prosemirror-schema/src/styles/base.scss';
+
+.editor--copilot {
+  @apply bg-n-iris-5 rounded;
+
+  .ProseMirror-woot-style {
+    min-height: 5rem;
+    max-height: 7.5rem !important;
+    overflow: auto;
+    @apply px-2 !important;
+
+    .empty-node {
+      &::before {
+        @apply text-n-iris-9 dark:text-n-iris-11;
+      }
+    }
+  }
+}
+</style>

research/chatwoot/app/javascript/dashboard/components/widgets/WootWriter/CopilotMenuBar.vue

@@ -0,0 +1,259 @@
+<script setup>
+import { computed, useTemplateRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useElementSize, useWindowSize } from '@vueuse/core';
+import { useMapGetter } from 'dashboard/composables/store';
+import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
+import { useCaptain } from 'dashboard/composables/useCaptain';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
+
+import Icon from 'next/icon/Icon.vue';
+
+defineProps({
+  hasSelection: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['executeCopilotAction']);
+
+const { t } = useI18n();
+
+const { draftMessage } = useCaptain();
+
+const replyMode = useMapGetter('draftMessages/getReplyEditorMode');
+
+// Selection-based menu items (when text is selected)
+const menuItems = computed(() => {
+  const items = [];
+  // for now, we don't allow improving just  aprt of the selection
+  // we will add this feature later. Once we do, we can revert the change
+  const hasSelection = false;
+  // const hasSelection = props.hasSelection
+
+  if (hasSelection) {
+    items.push({
+      label: t(
+        'INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.IMPROVE_REPLY_SELECTION'
+      ),
+      key: 'improve_selection',
+      icon: 'i-fluent-pen-sparkle-24-regular',
+    });
+  } else if (
+    replyMode.value === REPLY_EDITOR_MODES.REPLY &&
+    draftMessage.value
+  ) {
+    items.push({
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.IMPROVE_REPLY'),
+      key: 'improve',
+      icon: 'i-fluent-pen-sparkle-24-regular',
+    });
+  }
+
+  if (draftMessage.value) {
+    items.push(
+      {
+        label: t(
+          'INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.CHANGE_TONE.TITLE'
+        ),
+        key: 'change_tone',
+        icon: 'i-fluent-sound-wave-circle-sparkle-24-regular',
+        subMenuItems: [
+          {
+            label: t(
+              'INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.CHANGE_TONE.OPTIONS.PROFESSIONAL'
+            ),
+            key: 'professional',
+          },
+          {
+            label: t(
+              'INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.CHANGE_TONE.OPTIONS.CASUAL'
+            ),
+            key: 'casual',
+          },
+          {
+            label: t(
+              'INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.CHANGE_TONE.OPTIONS.STRAIGHTFORWARD'
+            ),
+            key: 'straightforward',
+          },
+          {
+            label: t(
+              'INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.CHANGE_TONE.OPTIONS.CONFIDENT'
+            ),
+            key: 'confident',
+          },
+          {
+            label: t(
+              'INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.CHANGE_TONE.OPTIONS.FRIENDLY'
+            ),
+            key: 'friendly',
+          },
+        ],
+      },
+      {
+        label: t('INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.GRAMMAR'),
+        key: 'fix_spelling_grammar',
+        icon: 'i-fluent-flow-sparkle-24-regular',
+      }
+    );
+  }
+  return items;
+});
+
+const generalMenuItems = computed(() => {
+  const items = [];
+  if (replyMode.value === REPLY_EDITOR_MODES.REPLY) {
+    items.push({
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.SUGGESTION'),
+      key: 'reply_suggestion',
+      icon: 'i-fluent-chat-sparkle-16-regular',
+    });
+  }
+
+  if (replyMode.value === REPLY_EDITOR_MODES.NOTE || true) {
+    items.push({
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.SUMMARIZE'),
+      key: 'summarize',
+      icon: 'i-fluent-text-bullet-list-square-sparkle-32-regular',
+    });
+  }
+
+  items.push({
+    label: t('INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.ASK_COPILOT'),
+    key: 'ask_copilot',
+    icon: 'i-fluent-circle-sparkle-24-regular',
+  });
+
+  return items;
+});
+
+const menuRef = useTemplateRef('menuRef');
+const { height: menuHeight } = useElementSize(menuRef);
+const { width: windowWidth } = useWindowSize();
+
+// Smart submenu positioning based on available space
+const submenuPosition = computed(() => {
+  const el = menuRef.value?.$el;
+  if (!el) return 'ltr:right-full rtl:left-full';
+
+  const { left, right } = el.getBoundingClientRect();
+  const SUBMENU_WIDTH = 200;
+  const spaceRight = (windowWidth.value ?? window.innerWidth) - right;
+  const spaceLeft = left;
+
+  // Prefer right, fallback to side with more space
+  const showRight = spaceRight >= SUBMENU_WIDTH || spaceRight >= spaceLeft;
+
+  return showRight ? 'left-full' : 'right-full';
+});
+
+// Computed style for selection menu positioning (only dynamic top offset)
+const selectionMenuStyle = computed(() => {
+  // Dynamically calculate offset based on actual menu height + 10px gap
+  const dynamicOffset = menuHeight.value > 0 ? menuHeight.value + 10 : 60;
+
+  return {
+    top: `calc(var(--selection-top) - ${dynamicOffset}px)`,
+  };
+});
+
+const handleMenuItemClick = item => {
+  // For items with submenus, do nothing on click (hover will show submenu)
+  if (!item.subMenuItems) {
+    emit('executeCopilotAction', item.key);
+  }
+};
+
+const handleSubMenuItemClick = (parentItem, subItem) => {
+  emit('executeCopilotAction', subItem.key);
+};
+</script>
+
+<template>
+  <DropdownBody
+    ref="menuRef"
+    class="min-w-56 [&>ul]:gap-3 z-50 [&>ul]:px-4 [&>ul]:py-3.5"
+    :class="{ 'selection-menu': hasSelection }"
+    :style="hasSelection ? selectionMenuStyle : {}"
+  >
+    <div v-if="menuItems.length > 0" class="flex flex-col items-start gap-2.5">
+      <div
+        v-for="item in menuItems"
+        :key="item.key"
+        class="w-full relative group/submenu"
+      >
+        <Button
+          :label="item.label"
+          :icon="item.icon"
+          slate
+          link
+          sm
+          class="hover:!no-underline text-n-slate-12 font-normal text-xs w-full !justify-start"
+          @click="handleMenuItemClick(item)"
+        >
+          <template v-if="item.subMenuItems" #default>
+            <div class="flex items-center gap-1 justify-between w-full">
+              <span class="min-w-0 truncate">{{ item.label }}</span>
+              <Icon
+                icon="i-lucide-chevron-right"
+                class="text-n-slate-10 size-3"
+              />
+            </div>
+          </template>
+        </Button>
+
+        <!-- Hover Submenu -->
+        <DropdownBody
+          v-if="item.subMenuItems"
+          class="group-hover/submenu:block hidden [&>ul]:gap-2 [&>ul]:px-3 [&>ul]:py-2.5 [&>ul]:dark:!border-n-strong max-h-[15rem] min-w-32 z-10 top-0"
+          :class="submenuPosition"
+        >
+          <Button
+            v-for="subItem in item.subMenuItems"
+            :key="subItem.key + subItem.label"
+            :label="subItem.label"
+            slate
+            link
+            sm
+            class="hover:!no-underline text-n-slate-12 font-normal text-xs w-full !justify-start mb-1"
+            @click="handleSubMenuItemClick(item, subItem)"
+          />
+        </DropdownBody>
+      </div>
+    </div>
+
+    <div v-if="menuItems.length > 0" class="h-px w-full bg-n-strong" />
+
+    <div class="flex flex-col items-start gap-3">
+      <Button
+        v-for="(item, index) in generalMenuItems"
+        :key="index"
+        :label="item.label"
+        :icon="item.icon"
+        slate
+        link
+        sm
+        class="hover:!no-underline text-n-slate-12 font-normal text-xs w-full !justify-start"
+        @click="handleMenuItemClick(item)"
+      />
+    </div>
+  </DropdownBody>
+</template>
+
+<style scoped lang="scss">
+.selection-menu {
+  position: absolute !important;
+
+  // Default/LTR: position from left
+  left: var(--selection-left);
+
+  // RTL: position from right instead
+  [dir='rtl'] & {
+    left: auto;
+    right: var(--selection-right);
+  }
+}
+</style>

research/chatwoot/app/javascript/dashboard/components/widgets/WootWriter/CopilotReplyBottomPanel.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { computed } from 'vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import { useI18n } from 'vue-i18n';
+import { useKbd } from 'dashboard/composables/utils/useKbd';
+
+defineProps({
+  isGeneratingContent: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['submit', 'cancel']);
+const { t } = useI18n();
+const handleCancel = () => {
+  emit('cancel');
+};
+
+const shortcutKey = useKbd(['$mod', '+', 'enter']);
+
+const acceptLabel = computed(() => {
+  return `${t('GENERAL.ACCEPT')}  (${shortcutKey.value})`;
+});
+
+const handleSubmit = () => {
+  emit('submit');
+};
+</script>
+
+<template>
+  <div class="flex justify-between items-center p-3 pt-0">
+    <NextButton
+      :label="t('GENERAL.DISCARD')"
+      slate
+      link
+      class="!px-1 hover:!no-underline"
+      sm
+      :disabled="isGeneratingContent"
+      @click="handleCancel"
+    />
+    <NextButton
+      :label="acceptLabel"
+      class="bg-n-iris-9 text-white"
+      solid
+      sm
+      :disabled="isGeneratingContent"
+      @click="handleSubmit"
+    />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/WootWriter/EditorModeToggle.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { computed, useTemplateRef } from 'vue';
+import { useElementSize } from '@vueuse/core';
+import { REPLY_EDITOR_MODES } from './constants';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: REPLY_EDITOR_MODES.REPLY,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  isReplyRestricted: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+defineEmits(['toggleMode']);
+
+const wootEditorReplyMode = useTemplateRef('wootEditorReplyMode');
+const wootEditorPrivateMode = useTemplateRef('wootEditorPrivateMode');
+
+const replyModeSize = useElementSize(wootEditorReplyMode);
+const privateModeSize = useElementSize(wootEditorPrivateMode);
+
+/**
+ * Computed boolean indicating if the editor is in private note mode
+ * When isReplyRestricted is true, force switch to private note
+ * Otherwise, respect the current mode prop
+ * @type {ComputedRef<boolean>}
+ */
+const isPrivate = computed(() => {
+  if (props.isReplyRestricted) {
+    // Force switch to private note when replies are restricted
+    return true;
+  }
+  // Otherwise respect the current mode
+  return props.mode === REPLY_EDITOR_MODES.NOTE;
+});
+
+/**
+ * Computes the width of the sliding background chip in pixels
+ * Includes 16px of padding in the calculation
+ * @type {ComputedRef<string>}
+ */
+const width = computed(() => {
+  const widthToUse = isPrivate.value
+    ? privateModeSize.width.value
+    : replyModeSize.width.value;
+
+  const widthWithPadding = widthToUse + 16;
+  return `${widthWithPadding}px`;
+});
+
+/**
+ * Computes the X translation value for the sliding background chip
+ * Translates by the width of reply mode + padding when in private mode
+ * @type {ComputedRef<string>}
+ */
+const translateValue = computed(() => {
+  const xTranslate = isPrivate.value ? replyModeSize.width.value + 16 : 0;
+
+  return `${xTranslate}px`;
+});
+</script>
+
+<template>
+  <button
+    class="flex items-center w-auto h-8 p-1 transition-all border rounded-full bg-n-alpha-2 group relative duration-300 ease-in-out z-0 active:scale-[0.995] active:duration-75"
+    :disabled="disabled || isReplyRestricted"
+    :class="{
+      'cursor-not-allowed': disabled || isReplyRestricted,
+    }"
+    @click="$emit('toggleMode')"
+  >
+    <div ref="wootEditorReplyMode" class="flex items-center gap-1 px-2 z-20">
+      {{ $t('CONVERSATION.REPLYBOX.REPLY') }}
+    </div>
+    <div ref="wootEditorPrivateMode" class="flex items-center gap-1 px-2 z-20">
+      {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
+    </div>
+    <div
+      class="absolute shadow-sm rounded-full h-6 w-[var(--chip-width)] ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)] bg-n-solid-1"
+      :class="{
+        'transition-all duration-300': !disabled && !isReplyRestricted,
+      }"
+      :style="{
+        '--chip-width': width,
+        '--translate-x': translateValue,
+        '--rtl-translate-x': `calc(-1 * var(--translate-x))`,
+      }"
+    />
+  </button>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue

@@ -0,0 +1,351 @@
+<script>
+import {
+  fullSchema,
+  buildEditor,
+  EditorView,
+  ArticleMarkdownSerializer,
+  ArticleMarkdownTransformer,
+  EditorState,
+  Selection,
+} from '@chatwoot/prosemirror-schema';
+import imagePastePlugin from '@chatwoot/prosemirror-schema/src/plugins/image';
+import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+
+const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
+const createState = (
+  content,
+  placeholder,
+  // eslint-disable-next-line default-param-last
+  plugins = [],
+  // eslint-disable-next-line default-param-last
+  methods = {},
+  enabledMenuOptions
+) => {
+  return EditorState.create({
+    doc: new ArticleMarkdownTransformer(fullSchema).parse(content),
+    plugins: buildEditor({
+      schema: fullSchema,
+      placeholder,
+      methods,
+      plugins,
+      enabledMenuOptions,
+    }),
+  });
+};
+
+let editorView = null;
+let state;
+
+export default {
+  mixins: [keyboardEventListenerMixins],
+  props: {
+    modelValue: { type: String, default: '' },
+    editorId: { type: String, default: '' },
+    placeholder: { type: String, default: '' },
+    enabledMenuOptions: { type: Array, default: () => [] },
+    autofocus: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ['blur', 'input', 'update:modelValue', 'keyup', 'focus', 'keydown'],
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+    };
+  },
+  data() {
+    return {
+      plugins: [imagePastePlugin(this.handleImageUpload)],
+      isTextSelected: false, // Tracks text selection and prevents unnecessary re-renders on mouse selection
+    };
+  },
+  watch: {
+    modelValue(newValue = '') {
+      if (newValue !== this.contentFromEditor()) {
+        this.reloadState();
+      }
+    },
+    editorId() {
+      this.reloadState();
+    },
+  },
+
+  created() {
+    state = createState(
+      this.modelValue,
+      this.placeholder,
+      this.plugins,
+      { onImageUpload: this.openFileBrowser },
+      this.enabledMenuOptions
+    );
+  },
+  mounted() {
+    this.createEditorView();
+
+    editorView.updateState(state);
+    if (this.autofocus) {
+      this.focusEditorInputField();
+    }
+  },
+  methods: {
+    contentFromEditor() {
+      if (editorView) {
+        return ArticleMarkdownSerializer.serialize(editorView.state.doc);
+      }
+      return '';
+    },
+    openFileBrowser() {
+      this.$refs.imageUploadInput.click();
+    },
+    async handleImageUpload(url) {
+      try {
+        const fileUrl = await this.$store.dispatch(
+          'articles/uploadExternalImage',
+          {
+            portalSlug: this.$route.params.portalSlug,
+            url,
+          }
+        );
+
+        return fileUrl;
+      } catch (error) {
+        useAlert(
+          this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.UN_AUTHORIZED_ERROR')
+        );
+        return '';
+      }
+    },
+    onFileChange() {
+      const file = this.$refs.imageUploadInput.files[0];
+
+      if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
+        this.uploadImageToStorage(file);
+      } else {
+        useAlert(
+          this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.ERROR_FILE_SIZE', {
+            size: MAXIMUM_FILE_UPLOAD_SIZE,
+          })
+        );
+      }
+
+      this.$refs.imageUploadInput.value = '';
+    },
+    async uploadImageToStorage(file) {
+      try {
+        const fileUrl = await this.$store.dispatch('articles/attachImage', {
+          portalSlug: this.$route.params.portalSlug,
+          file,
+        });
+
+        if (fileUrl) {
+          this.onImageUploadStart(fileUrl);
+        }
+      } catch (error) {
+        useAlert(this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.ERROR'));
+      }
+    },
+    onImageUploadStart(fileUrl) {
+      const { selection } = editorView.state;
+      const from = selection.from;
+      const node = editorView.state.schema.nodes.image.create({
+        src: fileUrl,
+      });
+      const paragraphNode = editorView.state.schema.node('paragraph');
+      if (node) {
+        // Insert the image and the caption wrapped inside a paragraph
+        const tr = editorView.state.tr
+          .replaceSelectionWith(paragraphNode)
+          .insert(from + 1, node);
+
+        editorView.dispatch(tr.scrollIntoView());
+        this.focusEditorInputField();
+      }
+    },
+    reloadState() {
+      state = createState(
+        this.modelValue,
+        this.placeholder,
+        this.plugins,
+        { onImageUpload: this.openFileBrowser },
+        this.enabledMenuOptions
+      );
+      editorView.updateState(state);
+      this.focusEditorInputField();
+    },
+    createEditorView() {
+      editorView = new EditorView(this.$refs.editor, {
+        state: state,
+        dispatchTransaction: tx => {
+          state = state.apply(tx);
+          editorView.updateState(state);
+          if (tx.docChanged) {
+            this.emitOnChange();
+          }
+          this.checkSelection(state);
+        },
+        handleDOMEvents: {
+          keyup: this.onKeyup,
+          focus: this.onFocus,
+          blur: this.onBlur,
+          keydown: this.onKeydown,
+          paste: (view, event) => {
+            const data = event.clipboardData.files;
+            if (data.length > 0) {
+              data.forEach(file => {
+                // Check if the file is an image
+                if (file.type.includes('image')) {
+                  this.uploadImageToStorage(file);
+                }
+              });
+              event.preventDefault();
+            }
+          },
+        },
+      });
+    },
+    handleKeyEvents() {},
+    focusEditorInputField() {
+      const { tr } = editorView.state;
+      const selection = Selection.atEnd(tr.doc);
+
+      editorView.dispatch(tr.setSelection(selection));
+      editorView.focus();
+    },
+    emitOnChange() {
+      this.$emit('update:modelValue', this.contentFromEditor());
+      this.$emit('input', this.contentFromEditor());
+    },
+    onKeyup() {
+      this.$emit('keyup');
+    },
+    onKeydown() {
+      this.$emit('keydown');
+    },
+    onBlur() {
+      this.$emit('blur');
+    },
+    onFocus() {
+      this.$emit('focus');
+    },
+    checkSelection(editorState) {
+      const { from, to } = editorState.selection;
+      // Check if there's a selection (from and to are different)
+      const hasSelection = from !== to;
+      // If the selection state is the same as the previous state, do nothing
+      if (hasSelection === this.isTextSelected) return;
+      // Update the selection state
+      this.isTextSelected = hasSelection;
+
+      const { editor } = this.$refs;
+
+      // Toggle the 'has-selection' class based on whether there's a selection
+      editor.classList.toggle('has-selection', hasSelection);
+      // If there's a selection, update the menubar position
+      if (hasSelection) this.setMenubarPosition(editorState);
+    },
+    setMenubarPosition(editorState) {
+      if (!editorState.selection) return;
+
+      // Get the start and end positions of the selection
+      const { from, to } = editorState.selection;
+      const { editor } = this.$refs;
+      // Get the editor's position relative to the viewport
+      const { left: editorLeft, top: editorTop } =
+        editor.getBoundingClientRect();
+
+      // Get the editor's width
+      const editorWidth = editor.offsetWidth;
+      const menubarWidth = 480; // Menubar width (adjust as needed (px))
+
+      // Get the end position of the selection
+      const { bottom: endBottom, right: endRight } = editorView.coordsAtPos(to);
+      // Get the start position of the selection
+      const { left: startLeft } = editorView.coordsAtPos(from);
+
+      // Calculate the top position for the menubar (10px below the selection)
+      const top = endBottom - editorTop + 10;
+      // Calculate the left position for the menubar
+      // This centers the menubar on the selection while keeping it within the editor's bounds
+      const left = Math.max(
+        0,
+        Math.min(
+          (startLeft + endRight) / 2 - editorLeft,
+          editorWidth - menubarWidth
+        )
+      );
+      // Set the CSS custom properties for positioning the menubar
+      editor.style.setProperty('--selection-top', `${top}px`);
+      editor.style.setProperty('--selection-left', `${left}px`);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="editor-root editor--article">
+      <input
+        ref="imageUploadInput"
+        type="file"
+        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+        hidden
+        @change="onFileChange"
+      />
+      <div ref="editor" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import '@chatwoot/prosemirror-schema/src/styles/article.scss';
+
+.ProseMirror-menubar-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  > .ProseMirror {
+    padding: 0;
+    word-break: break-word;
+  }
+}
+
+.editor-root {
+  position: relative;
+  width: 100%;
+}
+
+.ProseMirror-woot-style {
+  min-height: 5rem;
+  max-height: 7.5rem;
+  overflow: auto;
+}
+
+.ProseMirror-prompt {
+  @apply z-[9999] bg-n-alpha-3 min-w-80 backdrop-blur-[100px] border border-n-strong p-6 shadow-xl rounded-xl;
+
+  h5 {
+    @apply text-n-slate-12 mb-1.5;
+  }
+
+  .ProseMirror-prompt-buttons {
+    button {
+      @apply h-8 px-3;
+
+      &[type='submit'] {
+        @apply bg-n-brand text-white hover:bg-n-brand/90;
+      }
+
+      &[type='button'] {
+        @apply bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,439 @@
+<script>
+import { ref } from 'vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import FileUpload from 'vue-upload-component';
+import * as ActiveStorage from 'activestorage';
+import inboxMixin from 'shared/mixins/inboxMixin';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { getAllowedFileTypesByChannel } from '@chatwoot/utils';
+import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
+import VideoCallButton from '../VideoCallButton.vue';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import { mapGetters } from 'vuex';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+export default {
+  name: 'ReplyBottomPanel',
+  components: { NextButton, FileUpload, VideoCallButton },
+  mixins: [inboxMixin],
+  props: {
+    isNote: {
+      type: Boolean,
+      default: false,
+    },
+    onSend: {
+      type: Function,
+      default: () => {},
+    },
+    sendButtonText: {
+      type: String,
+      default: '',
+    },
+    recordingAudioDurationText: {
+      type: String,
+      default: '00:00',
+    },
+    // inbox prop is used in /mixins/inboxMixin,
+    // remove this props when refactoring to composable if not needed
+    // eslint-disable-next-line vue/no-unused-properties
+    inbox: {
+      type: Object,
+      default: () => ({}),
+    },
+    showFileUpload: {
+      type: Boolean,
+      default: false,
+    },
+    showAudioRecorder: {
+      type: Boolean,
+      default: false,
+    },
+    onFileUpload: {
+      type: Function,
+      default: () => {},
+    },
+    toggleEmojiPicker: {
+      type: Function,
+      default: () => {},
+    },
+    toggleAudioRecorder: {
+      type: Function,
+      default: () => {},
+    },
+    toggleAudioRecorderPlayPause: {
+      type: Function,
+      default: () => {},
+    },
+    isRecordingAudio: {
+      type: Boolean,
+      default: false,
+    },
+    recordingAudioState: {
+      type: String,
+      default: '',
+    },
+    isSendDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    isOnPrivateNote: {
+      type: Boolean,
+      default: false,
+    },
+    enableMultipleFileUpload: {
+      type: Boolean,
+      default: true,
+    },
+    enableWhatsAppTemplates: {
+      type: Boolean,
+      default: false,
+    },
+    enableContentTemplates: {
+      type: Boolean,
+      default: false,
+    },
+    conversationId: {
+      type: Number,
+      required: true,
+    },
+    // eslint-disable-next-line vue/no-unused-properties
+    message: {
+      type: String,
+      default: '',
+    },
+    newConversationModalActive: {
+      type: Boolean,
+      default: false,
+    },
+    portalSlug: {
+      type: String,
+      required: true,
+    },
+    conversationType: {
+      type: String,
+      default: '',
+    },
+    showQuotedReplyToggle: {
+      type: Boolean,
+      default: false,
+    },
+    quotedReplyEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    isEditorDisabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: [
+    'replaceText',
+    'toggleInsertArticle',
+    'selectWhatsappTemplate',
+    'selectContentTemplate',
+    'toggleQuotedReply',
+  ],
+  setup(props) {
+    const { setSignatureFlagForInbox, fetchSignatureFlagFromUISettings } =
+      useUISettings();
+
+    const uploadRef = ref(false);
+
+    const keyboardEvents = {
+      '$mod+Alt+KeyA': {
+        action: () => {
+          // Skip if editor is disabled (e.g., WhatsApp 24-hour window expired)
+          if (props.isEditorDisabled) return;
+
+          // TODO: This is really hacky, we need to replace the file picker component with
+          // a custom one, where the logic and the component markup is isolated.
+          // Once we have the custom component, we can remove the hacky logic below.
+
+          const uploadTriggerButton = document.querySelector(
+            '#conversationAttachment'
+          );
+          if (uploadTriggerButton) uploadTriggerButton.click();
+        },
+        allowOnFocusedInput: true,
+      },
+    };
+
+    useKeyboardEvents(keyboardEvents);
+
+    return {
+      setSignatureFlagForInbox,
+      fetchSignatureFlagFromUISettings,
+      uploadRef,
+    };
+  },
+  data() {
+    return {
+      ALLOWED_FILE_TYPES,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+      uiFlags: 'integrations/getUIFlags',
+    }),
+    wrapClass() {
+      return {
+        'is-note-mode': this.isNote,
+      };
+    },
+    showAttachButton() {
+      if (this.isEditorDisabled) return false;
+      return this.showFileUpload || this.isNote;
+    },
+    showAudioRecorderButton() {
+      if (this.isEditorDisabled) return false;
+      if (this.isALineChannel) {
+        return false;
+      }
+      // Disable audio recorder for safari browser as recording is not supported
+      // const isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(
+      //   navigator.userAgent
+      // );
+
+      return (
+        this.isFeatureEnabledonAccount(
+          this.accountId,
+          FEATURE_FLAGS.VOICE_RECORDER
+        ) && this.showAudioRecorder
+        // !isSafari
+      );
+    },
+    showAudioPlayStopButton() {
+      if (this.isEditorDisabled) return false;
+      return this.showAudioRecorder && this.isRecordingAudio;
+    },
+    isInstagramDM() {
+      return this.conversationType === 'instagram_direct_message';
+    },
+    allowedFileTypes() {
+      // Use default file types for private notes
+      if (this.isOnPrivateNote) {
+        return this.ALLOWED_FILE_TYPES;
+      }
+
+      let channelType = this.channelType || this.inbox?.channel_type;
+
+      if (this.isAnInstagramChannel || this.isInstagramDM) {
+        channelType = INBOX_TYPES.INSTAGRAM;
+      }
+
+      return getAllowedFileTypesByChannel({
+        channelType,
+        medium: this.inbox?.medium,
+      });
+    },
+    enableDragAndDrop() {
+      return !this.newConversationModalActive;
+    },
+    audioRecorderPlayStopIcon() {
+      switch (this.recordingAudioState) {
+        // playing paused recording stopped inactive destroyed
+        case 'playing':
+          return 'i-ph-pause';
+        case 'paused':
+          return 'i-ph-play';
+        case 'stopped':
+          return 'i-ph-play';
+        default:
+          return 'i-ph-stop';
+      }
+    },
+    showMessageSignatureButton() {
+      if (this.isEditorDisabled) return false;
+      return !this.isOnPrivateNote;
+    },
+    sendWithSignature() {
+      // channelType is sourced from inboxMixin
+      return this.fetchSignatureFlagFromUISettings(this.channelType);
+    },
+    signatureToggleTooltip() {
+      return this.sendWithSignature
+        ? this.$t('CONVERSATION.FOOTER.DISABLE_SIGN_TOOLTIP')
+        : this.$t('CONVERSATION.FOOTER.ENABLE_SIGN_TOOLTIP');
+    },
+    enableInsertArticleInReply() {
+      return this.portalSlug;
+    },
+    isFetchingAppIntegrations() {
+      return this.uiFlags.isFetching;
+    },
+    quotedReplyToggleTooltip() {
+      return this.quotedReplyEnabled
+        ? this.$t('CONVERSATION.REPLYBOX.QUOTED_REPLY.DISABLE_TOOLTIP')
+        : this.$t('CONVERSATION.REPLYBOX.QUOTED_REPLY.ENABLE_TOOLTIP');
+    },
+  },
+  mounted() {
+    ActiveStorage.start();
+  },
+  methods: {
+    toggleMessageSignature() {
+      this.setSignatureFlagForInbox(this.channelType, !this.sendWithSignature);
+    },
+    replaceText(text) {
+      this.$emit('replaceText', text);
+    },
+    toggleInsertArticle() {
+      this.$emit('toggleInsertArticle');
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="flex justify-between p-3" :class="wrapClass">
+    <div class="left-wrap">
+      <NextButton
+        v-if="!isEditorDisabled"
+        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
+        icon="i-ph-smiley-sticker"
+        slate
+        faded
+        sm
+        @click="toggleEmojiPicker"
+      />
+      <FileUpload
+        v-if="showAttachButton"
+        ref="uploadRef"
+        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
+        input-id="conversationAttachment"
+        :size="4096 * 4096"
+        :accept="allowedFileTypes"
+        :multiple="enableMultipleFileUpload"
+        :drop="enableDragAndDrop"
+        :drop-directory="false"
+        :data="{
+          direct_upload_url: '/rails/active_storage/direct_uploads',
+          direct_upload: true,
+        }"
+        @input-file="onFileUpload"
+      >
+        <NextButton
+          v-if="showAttachButton"
+          v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
+          icon="i-ph-paperclip"
+          slate
+          faded
+          sm
+        />
+      </FileUpload>
+      <NextButton
+        v-if="showAudioRecorderButton"
+        v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ICON')"
+        :icon="!isRecordingAudio ? 'i-ph-microphone' : 'i-ph-microphone-slash'"
+        slate
+        faded
+        sm
+        @click="toggleAudioRecorder"
+      />
+      <NextButton
+        v-if="showAudioPlayStopButton"
+        :icon="audioRecorderPlayStopIcon"
+        slate
+        faded
+        sm
+        :label="recordingAudioDurationText"
+        @click="toggleAudioRecorderPlayPause"
+      />
+      <NextButton
+        v-if="showMessageSignatureButton"
+        v-tooltip.top-end="signatureToggleTooltip"
+        icon="i-ph-signature"
+        slate
+        faded
+        sm
+        @click="toggleMessageSignature"
+      />
+      <NextButton
+        v-if="showQuotedReplyToggle"
+        v-tooltip.top-end="quotedReplyToggleTooltip"
+        icon="i-ph-quotes"
+        :variant="quotedReplyEnabled ? 'solid' : 'faded'"
+        color="slate"
+        sm
+        :aria-pressed="quotedReplyEnabled"
+        @click="$emit('toggleQuotedReply')"
+      />
+      <NextButton
+        v-if="enableWhatsAppTemplates"
+        v-tooltip.top-end="$t('CONVERSATION.FOOTER.WHATSAPP_TEMPLATES')"
+        icon="i-ph-whatsapp-logo"
+        slate
+        faded
+        sm
+        @click="$emit('selectWhatsappTemplate')"
+      />
+      <NextButton
+        v-if="enableContentTemplates"
+        v-tooltip.top-end="'Content Templates'"
+        icon="i-ph-whatsapp-logo"
+        slate
+        faded
+        sm
+        @click="$emit('selectContentTemplate')"
+      />
+      <VideoCallButton
+        v-if="(isAWebWidgetInbox || isAPIInbox) && !isOnPrivateNote"
+        :conversation-id="conversationId"
+      />
+      <transition name="modal-fade">
+        <div
+          v-show="uploadRef && uploadRef.dropActive"
+          class="flex fixed top-0 right-0 bottom-0 left-0 z-20 flex-col gap-2 justify-center items-center w-full h-full text-n-slate-12 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
+        >
+          <fluent-icon icon="cloud-backup" size="40" />
+          <h4 class="text-2xl break-words text-n-slate-12">
+            {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
+          </h4>
+        </div>
+      </transition>
+      <NextButton
+        v-if="enableInsertArticleInReply"
+        v-tooltip.top-end="$t('HELP_CENTER.ARTICLE_SEARCH.OPEN_ARTICLE_SEARCH')"
+        icon="i-ph-article-ny-times"
+        slate
+        faded
+        sm
+        @click="toggleInsertArticle"
+      />
+    </div>
+    <div class="right-wrap">
+      <NextButton
+        :label="sendButtonText"
+        type="submit"
+        sm
+        :color="isNote ? 'amber' : 'blue'"
+        :disabled="isSendDisabled"
+        class="flex-shrink-0"
+        @click="onSend"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.left-wrap {
+  @apply items-center flex gap-2;
+}
+
+.right-wrap {
+  @apply flex;
+}
+
+::v-deep .file-uploads {
+  label {
+    @apply cursor-pointer;
+  }
+
+  &:hover button {
+    @apply enabled:bg-n-slate-9/20;
+  }
+}
+</style>

research/chatwoot/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue

@@ -0,0 +1,190 @@
+<script>
+import { ref } from 'vue';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { useCaptain } from 'dashboard/composables/useCaptain';
+import { useTrack } from 'dashboard/composables';
+import { vOnClickOutside } from '@vueuse/components';
+import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
+import { CAPTAIN_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import EditorModeToggle from './EditorModeToggle.vue';
+import CopilotMenuBar from './CopilotMenuBar.vue';
+
+export default {
+  name: 'ReplyTopPanel',
+  components: {
+    NextButton,
+    EditorModeToggle,
+    CopilotMenuBar,
+  },
+  directives: {
+    OnClickOutside: vOnClickOutside,
+  },
+  props: {
+    mode: {
+      type: String,
+      default: REPLY_EDITOR_MODES.REPLY,
+    },
+    isReplyRestricted: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    isEditorDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    conversationId: {
+      type: Number,
+      default: null,
+    },
+    isMessageLengthReachingThreshold: {
+      type: Boolean,
+      default: () => false,
+    },
+    charactersRemaining: {
+      type: Number,
+      default: () => 0,
+    },
+  },
+  emits: ['setReplyMode', 'togglePopout', 'executeCopilotAction'],
+  setup(props, { emit }) {
+    const setReplyMode = mode => {
+      emit('setReplyMode', mode);
+    };
+    const handleReplyClick = () => {
+      if (props.isReplyRestricted) return;
+      setReplyMode(REPLY_EDITOR_MODES.REPLY);
+    };
+    const handleNoteClick = () => {
+      setReplyMode(REPLY_EDITOR_MODES.NOTE);
+    };
+    const handleModeToggle = () => {
+      const newMode =
+        props.mode === REPLY_EDITOR_MODES.REPLY
+          ? REPLY_EDITOR_MODES.NOTE
+          : REPLY_EDITOR_MODES.REPLY;
+      setReplyMode(newMode);
+    };
+
+    const { captainTasksEnabled } = useCaptain();
+    const showCopilotMenu = ref(false);
+
+    const handleCopilotAction = actionKey => {
+      emit('executeCopilotAction', actionKey);
+      showCopilotMenu.value = false;
+    };
+
+    const toggleCopilotMenu = () => {
+      const isOpening = !showCopilotMenu.value;
+      if (isOpening) {
+        useTrack(CAPTAIN_EVENTS.EDITOR_AI_MENU_OPENED, {
+          conversationId: props.conversationId,
+          entryPoint: 'top_panel',
+        });
+      }
+      showCopilotMenu.value = isOpening;
+    };
+
+    const handleClickOutside = () => {
+      showCopilotMenu.value = false;
+    };
+
+    const keyboardEvents = {
+      'Alt+KeyP': {
+        action: () => handleNoteClick(),
+        allowOnFocusedInput: true,
+      },
+      'Alt+KeyL': {
+        action: () => handleReplyClick(),
+        allowOnFocusedInput: true,
+      },
+    };
+    useKeyboardEvents(keyboardEvents);
+
+    return {
+      handleModeToggle,
+      handleReplyClick,
+      handleNoteClick,
+      REPLY_EDITOR_MODES,
+      captainTasksEnabled,
+      handleCopilotAction,
+      showCopilotMenu,
+      toggleCopilotMenu,
+      handleClickOutside,
+    };
+  },
+  computed: {
+    replyButtonClass() {
+      return {
+        'is-active': this.mode === REPLY_EDITOR_MODES.REPLY,
+      };
+    },
+    noteButtonClass() {
+      return {
+        'is-active': this.mode === REPLY_EDITOR_MODES.NOTE,
+      };
+    },
+    charLengthClass() {
+      return this.charactersRemaining < 0 ? 'text-n-ruby-9' : 'text-n-slate-11';
+    },
+    characterLengthWarning() {
+      return this.charactersRemaining < 0
+        ? `${-this.charactersRemaining} ${CHAR_LENGTH_WARNING.NEGATIVE}`
+        : `${this.charactersRemaining} ${CHAR_LENGTH_WARNING.UNDER_50}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="flex justify-between gap-2 h-[3.25rem] items-center ltr:pl-3 ltr:pr-2 rtl:pr-3 rtl:pl-2"
+  >
+    <EditorModeToggle
+      :mode="mode"
+      :disabled="disabled"
+      :is-reply-restricted="isReplyRestricted"
+      @toggle-mode="handleModeToggle"
+    />
+    <div class="flex items-center mx-4 my-0">
+      <div v-if="isMessageLengthReachingThreshold" class="text-xs">
+        <span :class="charLengthClass">
+          {{ characterLengthWarning }}
+        </span>
+      </div>
+    </div>
+    <div v-if="captainTasksEnabled" class="flex items-center gap-2">
+      <div class="relative">
+        <NextButton
+          ghost
+          :disabled="disabled || isEditorDisabled"
+          :class="{
+            'text-n-violet-9 hover:enabled:!bg-n-violet-3': !showCopilotMenu,
+            'text-n-violet-9 bg-n-violet-3': showCopilotMenu,
+          }"
+          sm
+          icon="i-ph-sparkle-fill"
+          @click="toggleCopilotMenu"
+        />
+        <CopilotMenuBar
+          v-if="showCopilotMenu"
+          v-on-click-outside="handleClickOutside"
+          :has-selection="false"
+          class="ltr:right-0 rtl:left-0 bottom-full mb-2"
+          @execute-copilot-action="handleCopilotAction"
+        />
+      </div>
+      <NextButton
+        ghost
+        class="text-n-slate-11"
+        sm
+        icon="i-lucide-maximize-2"
+        @click="$emit('togglePopout')"
+      />
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/WootWriter/constants.js

@@ -0,0 +1,9 @@
+export const REPLY_EDITOR_MODES = {
+  REPLY: 'REPLY',
+  NOTE: 'NOTE',
+};
+
+export const CHAR_LENGTH_WARNING = {
+  UNDER_50: 'characters remaining',
+  NEGATIVE: 'characters over',
+};

research/chatwoot/app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { shallowRef, computed, onMounted } from 'vue';
+import emojiGroups from 'shared/components/emoji/emojisGroup.json';
+import MentionBox from '../mentions/MentionBox.vue';
+
+const props = defineProps({
+  searchKey: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['selectEmoji']);
+
+const allEmojis = shallowRef([]);
+
+const items = computed(() => {
+  if (!props.searchKey) return [];
+  const searchTerm = props.searchKey.toLowerCase();
+  return allEmojis.value.filter(emoji =>
+    emoji.searchString.includes(searchTerm)
+  );
+});
+
+function loadEmojis() {
+  allEmojis.value = emojiGroups.flatMap(({ emojis }) =>
+    emojis.map(({ name, slug, ...rest }) => ({
+      ...rest,
+      name,
+      slug,
+      searchString: `${name.replace(/\s+/g, '')} ${slug}`.toLowerCase(), // Remove all whitespace and convert to lowercase
+    }))
+  );
+}
+
+function handleMentionClick(item = {}) {
+  emit('selectEmoji', item.emoji);
+}
+
+onMounted(() => {
+  loadEmojis();
+});
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <MentionBox
+    v-if="items.length"
+    type="emoji"
+    :items="items"
+    @mention-select="handleMentionClick"
+  >
+    <template #default="{ item, selected }">
+      <span
+        class="max-w-full inline-flex items-center gap-0.5 min-w-0 mb-0 text-sm font-medium text-n-slate-12 group-hover:text-n-brand truncate"
+      >
+        {{ item.emoji }}
+        <p
+          class="relative mb-0 truncate bottom-px"
+          :class="{
+            'text-n-brand': selected,
+            'font-normal': !selected,
+          }"
+        >
+          :{{ item.name }}
+        </p>
+      </span>
+    </template>
+  </MentionBox>
+</template>

research/chatwoot/app/javascript/dashboard/components/widgets/WootWriter/utils/mp3ConversionUtils.js

@@ -0,0 +1,146 @@
+import lamejs from '@breezystack/lamejs';
+
+const writeString = (view, offset, string) => {
+  // eslint-disable-next-line no-plusplus
+  for (let i = 0; i < string.length; i++) {
+    view.setUint8(offset + i, string.charCodeAt(i));
+  }
+};
+
+const bufferToWav = async (buffer, numChannels, sampleRate) => {
+  const length = buffer.length * numChannels * 2;
+  const wav = new ArrayBuffer(44 + length);
+  const view = new DataView(wav);
+
+  // WAV Header
+  writeString(view, 0, 'RIFF');
+  view.setUint32(4, 36 + length, true);
+  writeString(view, 8, 'WAVE');
+  writeString(view, 12, 'fmt ');
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true);
+  view.setUint16(22, numChannels, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * numChannels * 2, true);
+  view.setUint16(32, numChannels * 2, true);
+  view.setUint16(34, 16, true);
+  writeString(view, 36, 'data');
+  view.setUint32(40, length, true);
+
+  // WAV Data
+  const offset = 44;
+  // eslint-disable-next-line no-plusplus
+  for (let i = 0; i < buffer.length; i++) {
+    // eslint-disable-next-line no-plusplus
+    for (let channel = 0; channel < numChannels; channel++) {
+      const sample = Math.max(
+        -1,
+        Math.min(1, buffer.getChannelData(channel)[i])
+      );
+      view.setInt16(
+        offset + (i * numChannels + channel) * 2,
+        sample * 0x7fff,
+        true
+      );
+    }
+  }
+
+  return new Blob([wav], { type: 'audio/wav' });
+};
+
+const decodeAudioData = async audioBlob => {
+  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+  const arrayBuffer = await audioBlob.arrayBuffer();
+  const audioData = await audioContext.decodeAudioData(arrayBuffer);
+  return audioData;
+};
+
+export const convertToWav = async audioBlob => {
+  const audioBuffer = await decodeAudioData(audioBlob);
+  return bufferToWav(
+    audioBuffer,
+    audioBuffer.numberOfChannels,
+    audioBuffer.sampleRate
+  );
+};
+
+/**
+ * Encodes audio samples to MP3 format.
+ * @param {number} channels - Number of audio channels.
+ * @param {number} sampleRate - Sample rate in Hz.
+ * @param {Int16Array} samples - Audio samples to be encoded.
+ * @param {number} bitrate - MP3 bitrate (default: 128)
+ * @returns {Blob} - The MP3 encoded audio as a Blob.
+ */
+export const encodeToMP3 = (channels, sampleRate, samples, bitrate = 128) => {
+  const outputBuffer = [];
+  const encoder = new lamejs.Mp3Encoder(channels, sampleRate, bitrate);
+  const maxSamplesPerFrame = 1152;
+
+  for (let offset = 0; offset < samples.length; offset += maxSamplesPerFrame) {
+    const sliceEnd = Math.min(offset + maxSamplesPerFrame, samples.length);
+    const sampleSlice = samples.subarray(offset, sliceEnd);
+    const mp3Buffer = encoder.encodeBuffer(sampleSlice);
+
+    if (mp3Buffer.length > 0) {
+      outputBuffer.push(new Int8Array(mp3Buffer));
+    }
+  }
+
+  const remainingData = encoder.flush();
+  if (remainingData.length > 0) {
+    outputBuffer.push(new Int8Array(remainingData));
+  }
+
+  return new Blob(outputBuffer, { type: 'audio/mp3' });
+};
+
+/**
+ * Converts an audio Blob to an MP3 format Blob.
+ * @param {Blob} audioBlob - The audio data as a Blob.
+ * @param {number} bitrate - MP3 bitrate (default: 128)
+ * @returns {Promise<Blob>} - A Blob containing the MP3 encoded audio.
+ */
+export const convertToMp3 = async (audioBlob, bitrate = 128) => {
+  try {
+    const audioBuffer = await decodeAudioData(audioBlob);
+    const samples = new Int16Array(
+      audioBuffer.length * audioBuffer.numberOfChannels
+    );
+    let offset = 0;
+    for (let i = 0; i < audioBuffer.length; i += 1) {
+      for (
+        let channel = 0;
+        channel < audioBuffer.numberOfChannels;
+        channel += 1
+      ) {
+        const sample = Math.max(
+          -1,
+          Math.min(1, audioBuffer.getChannelData(channel)[i])
+        );
+        samples[offset] = sample < 0 ? sample * 0x8000 : sample * 0x7fff;
+        offset += 1;
+      }
+    }
+    return encodeToMP3(
+      audioBuffer.numberOfChannels,
+      audioBuffer.sampleRate,
+      samples,
+      bitrate
+    );
+  } catch (error) {
+    throw new Error('Conversion to MP3 failed.');
+  }
+};
+
+export const convertAudio = async (inputBlob, outputFormat, bitrate = 128) => {
+  let audio;
+  if (outputFormat === 'audio/wav') {
+    audio = await convertToWav(inputBlob);
+  } else if (outputFormat === 'audio/mp3') {
+    audio = await convertToMp3(inputBlob, bitrate);
+  } else {
+    throw new Error('Unsupported output format');
+  }
+  return audio;
+};

research/chatwoot/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue

@@ -0,0 +1,52 @@
+<script>
+import { mapGetters } from 'vuex';
+import MentionBox from '../mentions/MentionBox.vue';
+
+export default {
+  components: { MentionBox },
+  props: {
+    searchKey: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['replace'],
+  computed: {
+    ...mapGetters({
+      cannedMessages: 'getCannedResponses',
+    }),
+    items() {
+      return this.cannedMessages.map(cannedMessage => ({
+        label: cannedMessage.short_code,
+        key: cannedMessage.short_code,
+        description: cannedMessage.content,
+      }));
+    },
+  },
+  watch: {
+    searchKey() {
+      this.fetchCannedResponses();
+    },
+  },
+  mounted() {
+    this.fetchCannedResponses();
+  },
+  methods: {
+    fetchCannedResponses() {
+      this.$store.dispatch('getCannedResponse', { searchKey: this.searchKey });
+    },
+    handleMentionClick(item = {}) {
+      this.$emit('replace', item.description);
+    },
+  },
+};
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <MentionBox
+    v-if="items.length"
+    :items="items"
+    @mention-select="handleMentionClick"
+  />
+</template>