Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/widget/components/AgentMessage.vue

@@ -0,0 +1,258 @@
+<script>
+import UserMessage from 'widget/components/UserMessage.vue';
+import AgentMessageBubble from 'widget/components/AgentMessageBubble.vue';
+import MessageReplyButton from 'widget/components/MessageReplyButton.vue';
+import { messageStamp } from 'shared/helpers/timeHelper';
+import ImageBubble from 'widget/components/ImageBubble.vue';
+import VideoBubble from 'widget/components/VideoBubble.vue';
+import FileBubble from 'widget/components/FileBubble.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import { MESSAGE_TYPE } from 'widget/helpers/constants';
+import configMixin from '../mixins/configMixin';
+import messageMixin from '../mixins/messageMixin';
+import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
+import ReplyToChip from 'widget/components/ReplyToChip.vue';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { emitter } from 'shared/helpers/mitt';
+
+export default {
+  name: 'AgentMessage',
+  components: {
+    AgentMessageBubble,
+    ImageBubble,
+    VideoBubble,
+    Avatar,
+    UserMessage,
+    FileBubble,
+    MessageReplyButton,
+    ReplyToChip,
+  },
+  mixins: [configMixin, messageMixin],
+  props: {
+    message: {
+      type: Object,
+      default: () => {},
+    },
+    replyTo: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      hasImageError: false,
+      hasVideoError: false,
+    };
+  },
+  computed: {
+    shouldDisplayAgentMessage() {
+      if (
+        this.contentType === 'input_select' &&
+        this.messageContentAttributes.submitted_values &&
+        !this.message.content
+      ) {
+        return false;
+      }
+      return this.message.content;
+    },
+    readableTime() {
+      const { created_at: createdAt = '' } = this.message;
+      return messageStamp(createdAt, 'LLL d yyyy, h:mm a');
+    },
+    messageType() {
+      const { message_type: type = 1 } = this.message;
+      return type;
+    },
+    contentType() {
+      const { content_type: type = '' } = this.message;
+      return type;
+    },
+    agentName() {
+      if (this.message.sender) {
+        return this.message.sender.available_name || this.message.sender.name;
+      }
+
+      if (this.useInboxAvatarForBot) {
+        return this.channelConfig.websiteName;
+      }
+
+      return this.$t('UNREAD_VIEW.BOT');
+    },
+    avatarUrl() {
+      const displayImage = this.useInboxAvatarForBot
+        ? this.inboxAvatarUrl
+        : '/assets/images/chatwoot_bot.png';
+
+      if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) {
+        return displayImage;
+      }
+
+      return this.message.sender
+        ? this.message.sender.avatar_url
+        : displayImage;
+    },
+    hasRecordedResponse() {
+      return (
+        this.messageContentAttributes.submitted_email ||
+        (this.messageContentAttributes.submitted_values &&
+          !['form', 'input_csat'].includes(this.contentType))
+      );
+    },
+    responseMessage() {
+      if (this.messageContentAttributes.submitted_email) {
+        return { content: this.messageContentAttributes.submitted_email };
+      }
+
+      if (this.messageContentAttributes.submitted_values) {
+        if (this.contentType === 'input_select') {
+          const [selectionOption = {}] =
+            this.messageContentAttributes.submitted_values;
+          return { content: selectionOption.title || selectionOption.value };
+        }
+      }
+      return '';
+    },
+    isASubmittedForm() {
+      return isASubmittedFormMessage(this.message);
+    },
+    submittedFormValues() {
+      return this.messageContentAttributes.submitted_values.map(
+        submittedValue => ({
+          id: submittedValue.name,
+          content: submittedValue.value,
+        })
+      );
+    },
+    wrapClass() {
+      return {
+        'has-text': this.shouldDisplayAgentMessage,
+      };
+    },
+    hasReplyTo() {
+      return this.replyTo && (this.replyTo.content || this.replyTo.attachments);
+    },
+  },
+  watch: {
+    message() {
+      this.hasImageError = false;
+      this.hasVideoError = false;
+    },
+  },
+  mounted() {
+    this.hasImageError = false;
+    this.hasVideoError = false;
+  },
+  methods: {
+    onImageLoadError() {
+      this.hasImageError = true;
+    },
+    onVideoLoadError() {
+      this.hasVideoError = true;
+    },
+    toggleReply() {
+      emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.message);
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="agent-message-wrap group"
+    :class="{
+      'has-response': hasRecordedResponse || isASubmittedForm,
+    }"
+  >
+    <div v-if="!isASubmittedForm" class="agent-message">
+      <div class="avatar-wrap">
+        <div class="user-thumbnail-box">
+          <Avatar
+            v-if="message.showAvatar || hasRecordedResponse"
+            :src="avatarUrl"
+            :size="24"
+            :name="agentName"
+            rounded-full
+          />
+        </div>
+      </div>
+      <div class="message-wrap">
+        <div v-if="hasReplyTo" class="flex mt-2 mb-1 text-xs">
+          <ReplyToChip :reply-to="replyTo" />
+        </div>
+        <div class="flex w-full gap-1">
+          <div
+            class="space-y-2"
+            :class="{
+              'w-full':
+                contentType === 'form' &&
+                !messageContentAttributes?.submitted_values,
+            }"
+          >
+            <AgentMessageBubble
+              v-if="shouldDisplayAgentMessage"
+              :content-type="contentType"
+              :message-content-attributes="messageContentAttributes"
+              :message-id="message.id"
+              :message-type="messageType"
+              :message="message.content"
+            />
+            <div
+              v-if="hasAttachments"
+              class="space-y-2 chat-bubble has-attachment agent bg-n-background dark:bg-n-solid-3"
+              :class="wrapClass"
+            >
+              <div
+                v-for="attachment in message.attachments"
+                :key="attachment.id"
+              >
+                <ImageBubble
+                  v-if="attachment.file_type === 'image' && !hasImageError"
+                  :url="attachment.data_url"
+                  :thumb="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onImageLoadError"
+                />
+
+                <VideoBubble
+                  v-if="attachment.file_type === 'video' && !hasVideoError"
+                  :url="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onVideoLoadError"
+                />
+
+                <audio
+                  v-else-if="attachment.file_type === 'audio'"
+                  controls
+                  class="h-10 dark:invert"
+                >
+                  <source :src="attachment.data_url" />
+                </audio>
+                <FileBubble v-else :url="attachment.data_url" />
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-col justify-end">
+            <MessageReplyButton
+              class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
+              @click="toggleReply"
+            />
+          </div>
+        </div>
+        <p
+          v-if="message.showAvatar || hasRecordedResponse"
+          v-dompurify-html="agentName"
+          class="agent-name text-n-slate-11"
+        />
+      </div>
+    </div>
+
+    <UserMessage v-if="hasRecordedResponse" :message="responseMessage" />
+    <div v-if="isASubmittedForm">
+      <UserMessage
+        v-for="submittedValue in submittedFormValues"
+        :key="submittedValue.id"
+        :message="submittedValue"
+      />
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/AgentMessageBubble.vue

@@ -0,0 +1,152 @@
+<script>
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import ChatCard from 'shared/components/ChatCard.vue';
+import ChatForm from 'shared/components/ChatForm.vue';
+import ChatOptions from 'shared/components/ChatOptions.vue';
+import ChatArticle from './template/Article.vue';
+import EmailInput from './template/EmailInput.vue';
+import CustomerSatisfaction from 'shared/components/CustomerSatisfaction.vue';
+import IntegrationCard from './template/IntegrationCard.vue';
+
+export default {
+  name: 'AgentMessageBubble',
+  components: {
+    ChatArticle,
+    ChatCard,
+    ChatForm,
+    ChatOptions,
+    EmailInput,
+    CustomerSatisfaction,
+    IntegrationCard,
+  },
+  props: {
+    message: { type: String, default: null },
+    contentType: { type: String, default: null },
+    messageType: { type: Number, default: null },
+    messageId: { type: Number, default: null },
+    messageContentAttributes: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  setup() {
+    const { formatMessage, getPlainText, truncateMessage, highlightContent } =
+      useMessageFormatter();
+    return {
+      formatMessage,
+      getPlainText,
+      truncateMessage,
+      highlightContent,
+    };
+  },
+  computed: {
+    isTemplate() {
+      return this.messageType === 3;
+    },
+    isTemplateEmail() {
+      return this.contentType === 'input_email';
+    },
+    isCards() {
+      return this.contentType === 'cards';
+    },
+    isOptions() {
+      return this.contentType === 'input_select';
+    },
+    isForm() {
+      return this.contentType === 'form';
+    },
+    isArticle() {
+      return this.contentType === 'article';
+    },
+    isCSAT() {
+      return this.contentType === 'input_csat';
+    },
+    isIntegrations() {
+      return this.contentType === 'integrations';
+    },
+  },
+  methods: {
+    onResponse(messageResponse) {
+      this.$store.dispatch('message/update', messageResponse);
+    },
+    onOptionSelect(selectedOption) {
+      this.onResponse({
+        submittedValues: [selectedOption],
+        messageId: this.messageId,
+      });
+    },
+    onFormSubmit(formValues) {
+      const formValuesAsArray = Object.keys(formValues).map(key => ({
+        name: key,
+        value: formValues[key],
+      }));
+      this.onResponse({
+        submittedValues: formValuesAsArray,
+        messageId: this.messageId,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="chat-bubble-wrap">
+    <div
+      v-if="
+        !isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT
+      "
+      class="chat-bubble agent bg-n-background dark:bg-n-solid-3 text-n-slate-12"
+    >
+      <div
+        v-dompurify-html="formatMessage(message, false)"
+        class="message-content text-n-slate-12"
+      />
+      <EmailInput
+        v-if="isTemplateEmail"
+        :message-id="messageId"
+        :message-content-attributes="messageContentAttributes"
+      />
+
+      <IntegrationCard
+        v-if="isIntegrations"
+        :message-id="messageId"
+        :meeting-data="messageContentAttributes.data"
+      />
+    </div>
+    <div v-if="isOptions">
+      <ChatOptions
+        :title="message"
+        :options="messageContentAttributes.items"
+        :hide-fields="!!messageContentAttributes.submitted_values"
+        @option-select="onOptionSelect"
+      />
+    </div>
+    <ChatForm
+      v-if="isForm && !messageContentAttributes.submitted_values"
+      :items="messageContentAttributes.items"
+      :button-label="messageContentAttributes.button_label"
+      :submitted-values="messageContentAttributes.submitted_values"
+      @submit="onFormSubmit"
+    />
+    <div v-if="isCards">
+      <ChatCard
+        v-for="item in messageContentAttributes.items"
+        :key="item.title"
+        :media-url="item.media_url"
+        :title="item.title"
+        :description="item.description"
+        :actions="item.actions"
+      />
+    </div>
+    <div v-if="isArticle">
+      <ChatArticle :items="messageContentAttributes.items" />
+    </div>
+    <CustomerSatisfaction
+      v-if="isCSAT"
+      :message-content-attributes="messageContentAttributes.submitted_values"
+      :display-type="messageContentAttributes.display_type"
+      :message="message"
+      :message-id="messageId"
+    />
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/AgentTypingBubble.vue

@@ -0,0 +1,30 @@
+<script>
+export default {
+  name: 'AgentTypingBubble',
+};
+</script>
+
+<template>
+  <div class="agent-message-wrap sticky bottom-1">
+    <div class="agent-message">
+      <div class="avatar-wrap" />
+      <div class="message-wrap mt-2">
+        <div
+          class="chat-bubble agent typing-bubble bg-n-background dark:bg-n-solid-3"
+        >
+          <img
+            src="assets/images/typing.gif"
+            alt="Agent is typing a message"
+            class="!w-full"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.typing-bubble {
+  @apply max-w-[2.4rem] p-2 ltr:rounded-bl-[1.25rem] rtl:rounded-br-[1.25rem] ltr:rounded-tl-lg rtl:rounded-tr-lg;
+}
+</style>

research/chatwoot/app/javascript/widget/components/Availability/AvailabilityContainer.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { computed, toRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import GroupedAvatars from 'widget/components/GroupedAvatars.vue';
+import AvailabilityText from './AvailabilityText.vue';
+import { useAvailability } from 'widget/composables/useAvailability';
+
+const props = defineProps({
+  agents: {
+    type: Array,
+    default: () => [],
+  },
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
+  showAvatars: {
+    type: Boolean,
+    default: true,
+  },
+  textClasses: {
+    type: String,
+    default: '',
+  },
+});
+
+const { t } = useI18n();
+
+const availableMessage = useMapGetter('appConfig/getAvailableMessage');
+const unavailableMessage = useMapGetter('appConfig/getUnavailableMessage');
+
+// Pass toRef(props, 'agents') instead of props.agents to maintain reactivity
+// when the parent component's agents prop updates (e.g., after API response)
+const {
+  currentTime,
+  hasOnlineAgents,
+  isOnline,
+  inboxConfig,
+  isInWorkingHours,
+} = useAvailability(toRef(props, 'agents'));
+
+const workingHours = computed(() => inboxConfig.value.workingHours || []);
+const workingHoursEnabled = computed(
+  () => inboxConfig.value.workingHoursEnabled || false
+);
+const utcOffset = computed(
+  () => inboxConfig.value.utcOffset || inboxConfig.value.timezone || 'UTC'
+);
+const replyTime = computed(
+  () => inboxConfig.value.replyTime || 'in_a_few_minutes'
+);
+
+// If online or in working hours
+const isAvailable = computed(
+  () => isOnline.value || (workingHoursEnabled.value && isInWorkingHours.value)
+);
+
+const headerText = computed(() =>
+  isAvailable.value
+    ? availableMessage.value || t('TEAM_AVAILABILITY.ONLINE')
+    : unavailableMessage.value || t('TEAM_AVAILABILITY.OFFLINE')
+);
+</script>
+
+<template>
+  <div class="flex items-center justify-between gap-2">
+    <div class="flex flex-col gap-1">
+      <div v-if="showHeader" class="font-medium text-n-slate-12">
+        {{ headerText }}
+      </div>
+
+      <AvailabilityText
+        :time="currentTime"
+        :utc-offset="utcOffset"
+        :working-hours="workingHours"
+        :working-hours-enabled="workingHoursEnabled"
+        :has-online-agents="hasOnlineAgents"
+        :reply-time="replyTime"
+        :is-online="isOnline"
+        :is-in-working-hours="isInWorkingHours"
+        :class="textClasses"
+        class="text-n-slate-11"
+      />
+    </div>
+
+    <GroupedAvatars v-if="showAvatars && isOnline" :users="agents" />
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/Availability/AvailabilityText.story.vue

@@ -0,0 +1,217 @@
+<script setup>
+import AvailabilityText from './AvailabilityText.vue';
+
+// Base time for consistent testing: Monday, July 15, 2024, 10:00:00 UTC
+const baseTime = new Date('2024-07-15T10:00:00.000Z');
+const utcOffset = '+00:00'; // UTC
+
+const defaultProps = {
+  time: baseTime,
+  utcOffset,
+  workingHours: [
+    {
+      dayOfWeek: 0,
+      openHour: 9,
+      openMinutes: 0,
+      closeHour: 17,
+      closeMinutes: 0,
+      closedAllDay: false,
+    }, // Sunday
+    {
+      dayOfWeek: 1,
+      openHour: 9,
+      openMinutes: 0,
+      closeHour: 17,
+      closeMinutes: 0,
+      closedAllDay: false,
+    }, // Monday (current day)
+    {
+      dayOfWeek: 2,
+      openHour: 9,
+      openMinutes: 0,
+      closeHour: 17,
+      closeMinutes: 0,
+      closedAllDay: false,
+    }, // Tuesday
+    {
+      dayOfWeek: 3,
+      openHour: 9,
+      openMinutes: 0,
+      closeHour: 17,
+      closeMinutes: 0,
+      closedAllDay: false,
+    }, // Wednesday
+    {
+      dayOfWeek: 4,
+      openHour: 9,
+      openMinutes: 0,
+      closeHour: 17,
+      closeMinutes: 0,
+      closedAllDay: false,
+    }, // Thursday
+    {
+      dayOfWeek: 5,
+      openHour: 9,
+      openMinutes: 0,
+      closeHour: 17,
+      closeMinutes: 0,
+      closedAllDay: false,
+    }, // Friday
+    {
+      dayOfWeek: 6,
+      openHour: 9,
+      openMinutes: 0,
+      closeHour: 17,
+      closeMinutes: 0,
+      closedAllDay: true,
+    }, // Saturday (closed)
+  ],
+  workingHoursEnabled: true,
+  replyTime: 'in_a_few_minutes',
+  isOnline: true,
+  isInWorkingHours: true,
+};
+
+const createVariant = (
+  title,
+  propsOverride = {},
+  isOnlineOverride = null,
+  isInWorkingHoursOverride = null
+) => {
+  const props = { ...defaultProps, ...propsOverride };
+  if (isOnlineOverride !== null) props.isOnline = isOnlineOverride;
+  if (isInWorkingHoursOverride !== null)
+    props.isInWorkingHours = isInWorkingHoursOverride;
+
+  // Adjust time for specific scenarios
+  if (title.includes('Back Tomorrow')) {
+    // Set time to just after closing on Monday to trigger 'Back Tomorrow' (Tuesday)
+    props.time = new Date('2024-07-15T17:01:00.000Z');
+    props.isInWorkingHours = false;
+    props.isOnline = false;
+  }
+  if (title.includes('Back Multiple Days Away')) {
+    // Set time to Friday evening to trigger 'Back on Sunday' (as Saturday is closed)
+    props.time = new Date('2024-07-19T18:00:00.000Z');
+    props.isInWorkingHours = false;
+    props.isOnline = false;
+  }
+  if (title.includes('Back Same Day - In Minutes')) {
+    // Monday 16:50, next slot is 17:00 (in 10 minutes)
+    // To make this specific, let's assume the next slot is within the hour
+    // For this, we need to be outside working hours but a slot is available soon.
+    // Let's say current time is 8:50 AM, office opens at 9:00 AM.
+    props.time = new Date('2024-07-15T08:50:00.000Z');
+    props.isInWorkingHours = false;
+    props.isOnline = false;
+  }
+  if (title.includes('Back Same Day - In Hours')) {
+    // Monday 07:30 AM, office opens at 9:00 AM (in 1.5 hours, rounds to 2 hours)
+    props.time = new Date('2024-07-15T07:30:00.000Z');
+    props.isInWorkingHours = false;
+    props.isOnline = false;
+  }
+  if (title.includes('in 1 hour')) {
+    // Monday 08:00 AM, office opens at 9:00 AM (exactly in 1 hour)
+    // At exactly 1 hour difference, remainingMinutes = 0
+    props.time = new Date('2024-07-15T08:00:00.000Z');
+    props.isInWorkingHours = false;
+    props.isOnline = false;
+  }
+  if (title.includes('Back Same Day - At Time')) {
+    // Monday 05:00 AM, office opens at 9:00 AM (at 9:00 AM)
+    props.time = new Date('2024-07-15T05:00:00.000Z');
+    props.isInWorkingHours = false;
+    props.isOnline = false;
+  }
+
+  return {
+    title,
+    props,
+  };
+};
+
+const variants = [
+  createVariant(
+    'Working Hours Disabled - Online',
+    { workingHoursEnabled: false },
+    true,
+    true
+  ),
+  createVariant(
+    'Working Hours Disabled - Offline',
+    { workingHoursEnabled: false },
+    false,
+    false
+  ),
+  createVariant(
+    'All Day Closed - Offline',
+    {
+      workingHours: defaultProps.workingHours.map(wh => ({
+        ...wh,
+        closedAllDay: true,
+      })),
+    },
+    false,
+    false
+  ),
+  createVariant('Online and In Working Hours', {}, true, true),
+  createVariant(
+    'No Next Slot Available (e.g., all future slots closed or empty workingHours)',
+    { workingHours: [] }, // No working hours defined
+    false,
+    false
+  ),
+  createVariant(
+    'Back Tomorrow',
+    {},
+    false,
+    false // Time will be adjusted by createVariant
+  ),
+  createVariant('Back Multiple Days Away (e.g., on Sunday)', {}, false, false),
+  createVariant(
+    'Back Same Day - In Minutes (e.g., in 10 minutes)',
+    {},
+    false,
+    false
+  ),
+  createVariant(
+    'Back Same Day - In Hours (e.g., in 2 hours)',
+    {},
+    false,
+    false
+  ),
+  createVariant(
+    'Back Same Day - Exactly an Hour (e.g., in 1 hour)',
+    {},
+    false,
+    false
+  ),
+  createVariant(
+    'Back Same Day - At Time (e.g., at 09:00 AM)',
+    {},
+    false,
+    false
+  ),
+];
+</script>
+
+<template>
+  <Story
+    title="Widget/Components/Availability/AvailabilityText"
+    :layout="{ type: 'grid', width: 300 }"
+  >
+    <Variant v-for="(variant, i) in variants" :key="i" :title="variant.title">
+      <AvailabilityText
+        :time="variant.props.time"
+        :utc-offset="variant.props.utcOffset"
+        :working-hours="variant.props.workingHours"
+        :working-hours-enabled="variant.props.workingHoursEnabled"
+        :reply-time="variant.props.replyTime"
+        :is-online="variant.props.isOnline"
+        :is-in-working-hours="variant.props.isInWorkingHours"
+        class="text-n-slate-11"
+      />
+    </Variant>
+  </Story>
+</template>

research/chatwoot/app/javascript/widget/components/Availability/AvailabilityText.vue

@@ -0,0 +1,178 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { getTime } from 'dashboard/routes/dashboard/settings/inbox/helpers/businessHour.js';
+import { findNextAvailableSlotDetails } from 'widget/helpers/availabilityHelpers';
+
+const props = defineProps({
+  time: {
+    type: Date,
+    required: true,
+  },
+  utcOffset: {
+    type: String,
+    required: true,
+  },
+  workingHours: {
+    type: Array,
+    required: true,
+  },
+  workingHoursEnabled: {
+    type: Boolean,
+    required: true,
+  },
+  replyTime: {
+    type: String,
+    default: 'in_a_few_minutes',
+  },
+  isOnline: {
+    type: Boolean,
+    required: true,
+  },
+  isInWorkingHours: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const MINUTE_ROUNDING_INTERVAL = 5;
+const HOUR_THRESHOLD_FOR_EXACT_TIME = 3;
+const MINUTES_IN_HOUR = 60;
+
+const { t } = useI18n();
+
+const dayNames = computed(() => [
+  t('DAY_NAMES.SUNDAY'),
+  t('DAY_NAMES.MONDAY'),
+  t('DAY_NAMES.TUESDAY'),
+  t('DAY_NAMES.WEDNESDAY'),
+  t('DAY_NAMES.THURSDAY'),
+  t('DAY_NAMES.FRIDAY'),
+  t('DAY_NAMES.SATURDAY'),
+]);
+
+// Check if all days in working hours are closed
+const allDayClosed = computed(() => {
+  if (!props.workingHours.length) return false;
+  return props.workingHours.every(slot => slot.closedAllDay);
+});
+
+const replyTimeMessage = computed(() => {
+  const replyTimeKey = `REPLY_TIME.${props.replyTime.toUpperCase()}`;
+  return t(replyTimeKey);
+});
+
+const nextSlot = computed(() => {
+  if (
+    !props.workingHoursEnabled ||
+    allDayClosed.value ||
+    (props.isInWorkingHours && props.isOnline)
+  ) {
+    return null;
+  }
+
+  const slot = findNextAvailableSlotDetails(
+    props.time,
+    props.utcOffset,
+    props.workingHours
+  );
+  if (!slot) return null;
+
+  return {
+    ...slot,
+    hoursUntilOpen: Math.floor(slot.minutesUntilOpen / MINUTES_IN_HOUR),
+    remainingMinutes: slot.minutesUntilOpen % MINUTES_IN_HOUR,
+  };
+});
+
+const roundedMinutesUntilOpen = computed(() => {
+  if (!nextSlot.value) return 0;
+  return (
+    Math.ceil(nextSlot.value.remainingMinutes / MINUTE_ROUNDING_INTERVAL) *
+    MINUTE_ROUNDING_INTERVAL
+  );
+});
+
+const adjustedHoursUntilOpen = computed(() => {
+  if (!nextSlot.value) return 0;
+  return nextSlot.value.remainingMinutes > 0
+    ? nextSlot.value.hoursUntilOpen + 1
+    : nextSlot.value.hoursUntilOpen;
+});
+
+const formattedOpeningTime = computed(() => {
+  if (!nextSlot.value) return '';
+  return getTime(
+    nextSlot.value.config.openHour || 0,
+    nextSlot.value.config.openMinutes || 0
+  );
+});
+</script>
+
+<template>
+  <span>
+    <!-- 1. If currently in working hours, show reply time -->
+    <template v-if="isInWorkingHours">
+      {{ replyTimeMessage }}
+    </template>
+
+    <!-- 2. Else, if working hours are disabled, show based on online status -->
+    <template v-else-if="!workingHoursEnabled">
+      {{
+        isOnline
+          ? replyTimeMessage
+          : t('TEAM_AVAILABILITY.BACK_AS_SOON_AS_POSSIBLE')
+      }}
+    </template>
+
+    <!-- 3. Else (not in working hours, but working hours ARE enabled) -->
+    <!-- Check if all configured slots are 'closedAllDay' -->
+    <template v-else-if="allDayClosed">
+      {{ t('TEAM_AVAILABILITY.BACK_AS_SOON_AS_POSSIBLE') }}
+    </template>
+
+    <!-- 4. Else (not in WH, WH enabled, not allDayClosed), calculate next slot -->
+    <template v-else-if="!nextSlot">
+      {{ t('REPLY_TIME.BACK_IN_SOME_TIME') }}
+    </template>
+
+    <!-- Tomorrow -->
+    <template v-else-if="nextSlot.daysUntilOpen === 1">
+      {{ t('REPLY_TIME.BACK_TOMORROW') }}
+    </template>
+
+    <!-- Multiple days away (eg: on Monday) -->
+    <template v-else-if="nextSlot.daysUntilOpen > 1">
+      {{
+        t('REPLY_TIME.BACK_ON_DAY', {
+          day: dayNames[nextSlot.config.dayOfWeek],
+        })
+      }}
+    </template>
+
+    <!-- Same day - less than 1 hour (eg: in 5 minutes) -->
+    <template v-else-if="nextSlot.hoursUntilOpen === 0">
+      {{
+        t('REPLY_TIME.BACK_IN_MINUTES', {
+          time: `${roundedMinutesUntilOpen}`,
+        })
+      }}
+    </template>
+
+    <!-- Same day - less than 3 hours (eg: in 2 hours) -->
+    <template
+      v-else-if="nextSlot.hoursUntilOpen < HOUR_THRESHOLD_FOR_EXACT_TIME"
+    >
+      {{ t('REPLY_TIME.BACK_IN_HOURS', adjustedHoursUntilOpen) }}
+    </template>
+
+    <!-- Same day - 3+ hours away (eg: at 10:00 AM) -->
+    <template v-else>
+      {{
+        t('REPLY_TIME.BACK_AT_TIME', {
+          time: formattedOpeningTime,
+        })
+      }}
+    </template>
+  </span>
+</template>

research/chatwoot/app/javascript/widget/components/Banner.vue

@@ -0,0 +1,47 @@
+<script>
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { emitter } from 'shared/helpers/mitt';
+
+export default {
+  data() {
+    return {
+      showBannerMessage: false,
+      bannerMessage: '',
+      bannerType: 'error',
+    };
+  },
+  mounted() {
+    emitter.on(BUS_EVENTS.SHOW_ALERT, ({ message, type = 'error' }) => {
+      this.bannerMessage = message;
+      this.bannerType = type;
+      this.showBannerMessage = true;
+      setTimeout(() => {
+        this.showBannerMessage = false;
+      }, 3000);
+    });
+  },
+};
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <div v-if="showBannerMessage" :class="`banner ${bannerType}`">
+    <span>
+      {{ bannerMessage }}
+    </span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.banner {
+  @apply text-white text-sm font-semibold p-3 text-center;
+
+  &.success {
+    @apply bg-n-teal-9;
+  }
+
+  &.error {
+    @apply bg-n-ruby-9;
+  }
+}
+</style>

research/chatwoot/app/javascript/widget/components/ChatAttachment.vue

@@ -0,0 +1,167 @@
+<script>
+import FileUpload from 'vue-upload-component';
+import Spinner from 'shared/components/Spinner.vue';
+import {
+  checkFileSizeLimit,
+  resolveMaximumFileUploadSize,
+} from 'shared/helpers/FileHelper';
+import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import { DirectUpload } from 'activestorage';
+import { mapGetters } from 'vuex';
+import { emitter } from 'shared/helpers/mitt';
+import { useAttachments } from '../composables/useAttachments';
+
+export default {
+  components: { FluentIcon, FileUpload, Spinner },
+  props: {
+    onAttach: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  setup() {
+    const { canHandleAttachments } = useAttachments();
+    return { canHandleAttachments };
+  },
+  data() {
+    return { isUploading: false };
+  },
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+    }),
+    fileUploadSizeLimit() {
+      return resolveMaximumFileUploadSize(
+        this.globalConfig.maximumFileUploadSize
+      );
+    },
+    allowedFileTypes() {
+      return ALLOWED_FILE_TYPES;
+    },
+  },
+  mounted() {
+    document.addEventListener('paste', this.handleClipboardPaste);
+  },
+  unmounted() {
+    document.removeEventListener('paste', this.handleClipboardPaste);
+  },
+  methods: {
+    handleClipboardPaste(e) {
+      // If file picker is not enabled, do not allow paste
+      if (!this.canHandleAttachments) return;
+
+      const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+      // items is a DataTransferItemList object which does not have forEach method
+      const itemsArray = Array.from(items);
+      itemsArray.forEach(item => {
+        if (item.kind === 'file') {
+          e.preventDefault();
+          const file = item.getAsFile();
+          this.$refs.upload.add(file);
+        }
+      });
+    },
+    getFileType(fileType) {
+      return fileType.includes('image') ? 'image' : 'file';
+    },
+    async onFileUpload(file) {
+      if (this.globalConfig.directUploadsEnabled) {
+        await this.onDirectFileUpload(file);
+      } else {
+        await this.onIndirectFileUpload(file);
+      }
+    },
+    async onDirectFileUpload(file) {
+      if (!file) {
+        return;
+      }
+      this.isUploading = true;
+      try {
+        if (checkFileSizeLimit(file, this.fileUploadSizeLimit)) {
+          const { websiteToken } = window.chatwootWebChannel;
+          const upload = new DirectUpload(
+            file.file,
+            `/api/v1/widget/direct_uploads?website_token=${websiteToken}`,
+            {
+              directUploadWillCreateBlobWithXHR: xhr => {
+                xhr.setRequestHeader('X-Auth-Token', window.authToken);
+              },
+            }
+          );
+
+          upload.create((error, blob) => {
+            if (error) {
+              emitter.emit(BUS_EVENTS.SHOW_ALERT, {
+                message: error,
+              });
+            } else {
+              this.onAttach({
+                file: blob.signed_id,
+                ...this.getLocalFileAttributes(file),
+              });
+            }
+          });
+        } else {
+          emitter.emit(BUS_EVENTS.SHOW_ALERT, {
+            message: this.$t('FILE_SIZE_LIMIT', {
+              MAXIMUM_FILE_UPLOAD_SIZE: this.fileUploadSizeLimit,
+            }),
+          });
+        }
+      } catch (error) {
+        // Error
+      }
+      this.isUploading = false;
+    },
+    async onIndirectFileUpload(file) {
+      if (!file) {
+        return;
+      }
+      this.isUploading = true;
+      try {
+        if (checkFileSizeLimit(file, this.fileUploadSizeLimit)) {
+          await this.onAttach({
+            file: file.file,
+            ...this.getLocalFileAttributes(file),
+          });
+        } else {
+          emitter.emit(BUS_EVENTS.SHOW_ALERT, {
+            message: this.$t('FILE_SIZE_LIMIT', {
+              MAXIMUM_FILE_UPLOAD_SIZE: this.fileUploadSizeLimit,
+            }),
+          });
+        }
+      } catch (error) {
+        // Error
+      }
+      this.isUploading = false;
+    },
+    getLocalFileAttributes(file) {
+      return {
+        thumbUrl: window.URL.createObjectURL(file.file),
+        fileType: this.getFileType(file.type),
+      };
+    },
+  },
+};
+</script>
+
+<template>
+  <FileUpload
+    ref="upload"
+    :size="4096 * 2048"
+    :accept="allowedFileTypes"
+    :data="{
+      direct_upload_url: '/api/v1/widget/direct_uploads',
+      direct_upload: true,
+    }"
+    @input-file="onFileUpload"
+  >
+    <button class="min-h-8 min-w-8 flex items-center justify-center">
+      <FluentIcon v-if="!isUploading.image" icon="attach" />
+      <Spinner v-if="isUploading" size="small" />
+    </button>
+  </FileUpload>
+</template>

research/chatwoot/app/javascript/widget/components/ChatFooter.vue

@@ -0,0 +1,152 @@
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import { getContrastingTextColor } from '@chatwoot/utils';
+import CustomButton from 'shared/components/Button.vue';
+import FooterReplyTo from 'widget/components/FooterReplyTo.vue';
+import ChatInputWrap from 'widget/components/ChatInputWrap.vue';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { sendEmailTranscript } from 'widget/api/conversation';
+import { useRouter } from 'vue-router';
+import { IFrameHelper } from '../helpers/utils';
+import { CHATWOOT_ON_START_CONVERSATION } from '../constants/sdkEvents';
+import { emitter } from 'shared/helpers/mitt';
+
+export default {
+  components: {
+    ChatInputWrap,
+    CustomButton,
+    FooterReplyTo,
+  },
+  setup() {
+    const router = useRouter();
+    return { router };
+  },
+  data() {
+    return {
+      inReplyTo: null,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      conversationAttributes: 'conversationAttributes/getConversationParams',
+      widgetColor: 'appConfig/getWidgetColor',
+      conversationSize: 'conversation/getConversationSize',
+      currentUser: 'contacts/getCurrentUser',
+      isWidgetStyleFlat: 'appConfig/isWidgetStyleFlat',
+    }),
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
+    hideReplyBox() {
+      const { allowMessagesAfterResolved } = window.chatwootWebChannel;
+      const { status } = this.conversationAttributes;
+      return !allowMessagesAfterResolved && status === 'resolved';
+    },
+    showEmailTranscriptButton() {
+      return this.hasEmail;
+    },
+    hasEmail() {
+      return this.currentUser && this.currentUser.has_email;
+    },
+    hasReplyTo() {
+      return (
+        this.inReplyTo && (this.inReplyTo.content || this.inReplyTo.attachments)
+      );
+    },
+  },
+  mounted() {
+    emitter.on(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.toggleReplyTo);
+  },
+  methods: {
+    ...mapActions('conversation', ['sendMessage', 'sendAttachment']),
+    ...mapActions('conversationAttributes', ['getAttributes']),
+    async handleSendMessage(content) {
+      await this.sendMessage({
+        content,
+        replyTo: this.inReplyTo ? this.inReplyTo.id : null,
+      });
+      // reset replyTo message after sending
+      this.inReplyTo = null;
+      // Update conversation attributes on new conversation
+      if (this.conversationSize === 0) {
+        this.getAttributes();
+      }
+    },
+    async handleSendAttachment(attachment) {
+      await this.sendAttachment({
+        attachment,
+        replyTo: this.inReplyTo ? this.inReplyTo.id : null,
+      });
+      this.inReplyTo = null;
+    },
+    startNewConversation() {
+      this.router.replace({ name: 'prechat-form' });
+      IFrameHelper.sendMessage({
+        event: 'onEvent',
+        eventIdentifier: CHATWOOT_ON_START_CONVERSATION,
+        data: { hasConversation: true },
+      });
+    },
+    toggleReplyTo(message) {
+      this.inReplyTo = message;
+    },
+    async sendTranscript() {
+      if (this.hasEmail) {
+        try {
+          await sendEmailTranscript();
+          emitter.emit(BUS_EVENTS.SHOW_ALERT, {
+            message: this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_SUCCESS'),
+            type: 'success',
+          });
+        } catch (error) {
+          emitter.$emit(BUS_EVENTS.SHOW_ALERT, {
+            message: this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_ERROR'),
+          });
+        }
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <footer
+    v-if="!hideReplyBox"
+    class="relative z-50 mb-1"
+    :class="{
+      'rounded-lg': !isWidgetStyleFlat,
+      'pt-2.5 shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.05)] dark:shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.15)] rounded-t-none':
+        hasReplyTo,
+    }"
+  >
+    <FooterReplyTo
+      v-if="hasReplyTo"
+      :in-reply-to="inReplyTo"
+      @dismiss="inReplyTo = null"
+    />
+    <ChatInputWrap
+      class="shadow-sm"
+      :on-send-message="handleSendMessage"
+      :on-send-attachment="handleSendAttachment"
+    />
+  </footer>
+  <div v-else>
+    <CustomButton
+      class="font-medium"
+      block
+      :bg-color="widgetColor"
+      :text-color="textColor"
+      @click="startNewConversation"
+    >
+      {{ $t('START_NEW_CONVERSATION') }}
+    </CustomButton>
+    <CustomButton
+      v-if="showEmailTranscriptButton"
+      type="clear"
+      class="font-normal"
+      @click="sendTranscript"
+    >
+      {{ $t('EMAIL_TRANSCRIPT.BUTTON_TEXT') }}
+    </CustomButton>
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/ChatHeader.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { toRef } from 'vue';
+import { useRouter } from 'vue-router';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import HeaderActions from './HeaderActions.vue';
+import AvailabilityContainer from 'widget/components/Availability/AvailabilityContainer.vue';
+import { useAvailability } from 'widget/composables/useAvailability';
+
+const props = defineProps({
+  avatarUrl: { type: String, default: '' },
+  title: { type: String, default: '' },
+  showPopoutButton: { type: Boolean, default: false },
+  showBackButton: { type: Boolean, default: false },
+  availableAgents: { type: Array, default: () => [] },
+});
+
+const availableAgents = toRef(props, 'availableAgents');
+
+const router = useRouter();
+const { isOnline } = useAvailability(availableAgents);
+
+const onBackButtonClick = () => {
+  router.replace({ name: 'home' });
+};
+</script>
+
+<template>
+  <header class="flex justify-between w-full p-5 bg-n-background gap-2">
+    <div class="flex items-center">
+      <button
+        v-if="showBackButton"
+        class="px-2 ltr:-ml-3 rtl:-mr-3"
+        @click="onBackButtonClick"
+      >
+        <FluentIcon icon="chevron-left" size="24" class="text-n-slate-12" />
+      </button>
+      <img
+        v-if="avatarUrl"
+        class="w-8 h-8 ltr:mr-3 rtl:ml-3 rounded-full"
+        :src="avatarUrl"
+        alt="avatar"
+      />
+      <div class="flex flex-col gap-1">
+        <div
+          class="flex items-center text-base font-medium leading-4 text-n-slate-12"
+        >
+          <span v-dompurify-html="title" class="ltr:mr-1 rtl:ml-1" />
+          <div
+            :class="`h-2 w-2 rounded-full
+              ${isOnline ? 'bg-n-teal-10' : 'hidden'}`"
+          />
+        </div>
+        <AvailabilityContainer
+          :agents="availableAgents"
+          :show-header="false"
+          :show-avatars="false"
+          text-classes="text-xs leading-3"
+        />
+      </div>
+    </div>
+    <HeaderActions :show-popout-button="showPopoutButton" />
+  </header>
+</template>

research/chatwoot/app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -0,0 +1,57 @@
+<script setup>
+import HeaderActions from './HeaderActions.vue';
+import { computed } from 'vue';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+
+const props = defineProps({
+  avatarUrl: {
+    type: String,
+    default: '',
+  },
+  introHeading: {
+    type: String,
+    default: '',
+  },
+  introBody: {
+    type: String,
+    default: '',
+  },
+  showPopoutButton: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { formatMessage } = useMessageFormatter();
+
+const containerClasses = computed(() => [
+  props.avatarUrl ? 'justify-between' : 'justify-end',
+]);
+</script>
+
+<template>
+  <header
+    class="header-expanded pt-6 pb-4 px-5 relative box-border w-full bg-transparent"
+  >
+    <div class="flex items-start" :class="containerClasses">
+      <img
+        v-if="avatarUrl"
+        class="h-12 rounded-full"
+        :src="avatarUrl"
+        alt="Avatar"
+      />
+      <HeaderActions
+        :show-popout-button="showPopoutButton"
+        :show-end-conversation-button="false"
+      />
+    </div>
+    <h2
+      v-dompurify-html="introHeading"
+      class="mt-4 text-2xl mb-1.5 font-medium text-n-slate-12 line-clamp-4"
+    />
+    <p
+      v-dompurify-html="formatMessage(introBody)"
+      class="text-lg leading-normal text-n-slate-11 [&_a]:underline line-clamp-6"
+    />
+  </header>
+</template>

research/chatwoot/app/javascript/widget/components/ChatInputWrap.vue

@@ -0,0 +1,195 @@
+<script>
+import { mapGetters } from 'vuex';
+
+import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
+import ChatSendButton from 'widget/components/ChatSendButton.vue';
+import { useAttachments } from '../composables/useAttachments';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
+
+import EmojiInput from 'shared/components/emoji/EmojiInput.vue';
+
+export default {
+  name: 'ChatInputWrap',
+  components: {
+    ChatAttachmentButton,
+    ChatSendButton,
+    EmojiInput,
+    FluentIcon,
+    ResizableTextArea,
+  },
+  props: {
+    onSendMessage: {
+      type: Function,
+      default: () => {},
+    },
+    onSendAttachment: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  setup() {
+    const {
+      canHandleAttachments,
+      shouldShowEmojiPicker,
+      hasEmojiPickerEnabled,
+    } = useAttachments();
+    return {
+      canHandleAttachments,
+      shouldShowEmojiPicker,
+      hasEmojiPickerEnabled,
+    };
+  },
+  data() {
+    return {
+      userInput: '',
+      showEmojiPicker: false,
+      isFocused: false,
+    };
+  },
+
+  computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+      isWidgetOpen: 'appConfig/getIsWidgetOpen',
+      shouldShowEmojiPicker: 'appConfig/getShouldShowEmojiPicker',
+    }),
+    showAttachment() {
+      return this.canHandleAttachments && this.userInput.length === 0;
+    },
+    showSendButton() {
+      return this.userInput.length > 0;
+    },
+  },
+  watch: {
+    isWidgetOpen(isWidgetOpen) {
+      if (isWidgetOpen) {
+        this.focusInput();
+      }
+    },
+  },
+  unmounted() {
+    document.removeEventListener('keypress', this.handleEnterKeyPress);
+  },
+  mounted() {
+    document.addEventListener('keypress', this.handleEnterKeyPress);
+    if (this.isWidgetOpen) {
+      this.focusInput();
+    }
+  },
+
+  methods: {
+    onBlur() {
+      this.isFocused = false;
+    },
+    onFocus() {
+      this.isFocused = true;
+    },
+    handleButtonClick() {
+      if (this.userInput && this.userInput.trim()) {
+        this.onSendMessage(this.userInput);
+      }
+      this.userInput = '';
+      this.focusInput();
+    },
+    handleEnterKeyPress(e) {
+      if (e.keyCode === 13 && !e.shiftKey) {
+        e.preventDefault();
+        this.handleButtonClick();
+      }
+    },
+    toggleEmojiPicker() {
+      this.showEmojiPicker = !this.showEmojiPicker;
+    },
+    hideEmojiPicker(e) {
+      if (this.showEmojiPicker) {
+        e.stopPropagation();
+        this.toggleEmojiPicker();
+      }
+    },
+    emojiOnClick(emoji) {
+      this.userInput = `${this.userInput}${emoji} `;
+    },
+    onTypingOff() {
+      this.toggleTyping('off');
+    },
+    onTypingOn() {
+      this.toggleTyping('on');
+    },
+    toggleTyping(typingStatus) {
+      this.$store.dispatch('conversation/toggleUserTyping', { typingStatus });
+    },
+    focusInput() {
+      this.$refs.chatInput.focus();
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="items-center flex ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2 rounded-[7px] transition-all duration-200 bg-n-background !shadow-[0_0_0_1px,0_0_2px_3px]"
+    :class="{
+      '!shadow-[var(--widget-color,#2781f6)]': isFocused,
+      '!shadow-n-strong dark:!shadow-n-strong': !isFocused,
+    }"
+    @keydown.esc="hideEmojiPicker"
+  >
+    <ResizableTextArea
+      id="chat-input"
+      ref="chatInput"
+      v-model="userInput"
+      :rows="1"
+      :aria-label="$t('CHAT_PLACEHOLDER')"
+      :placeholder="$t('CHAT_PLACEHOLDER')"
+      class="user-message-input reset-base"
+      @typing-off="onTypingOff"
+      @typing-on="onTypingOn"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+    <div class="flex items-center ltr:pl-2 rtl:pr-2">
+      <ChatAttachmentButton
+        v-if="showAttachment"
+        class="text-n-slate-12"
+        :on-attach="onSendAttachment"
+      />
+      <button
+        v-if="shouldShowEmojiPicker && hasEmojiPickerEnabled"
+        class="flex items-center justify-center min-h-8 min-w-8"
+        :aria-label="$t('EMOJI.ARIA_LABEL')"
+        @click="toggleEmojiPicker"
+      >
+        <FluentIcon
+          icon="emoji"
+          class="transition-all duration-150"
+          :class="{
+            'text-n-slate-12': !showEmojiPicker,
+            'text-n-brand': showEmojiPicker,
+          }"
+        />
+      </button>
+      <EmojiInput
+        v-if="shouldShowEmojiPicker && showEmojiPicker"
+        v-on-clickaway="hideEmojiPicker"
+        :on-click="emojiOnClick"
+        @keydown.esc="hideEmojiPicker"
+      />
+      <ChatSendButton
+        v-if="showSendButton"
+        :color="widgetColor"
+        @click="handleButtonClick"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.emoji-dialog {
+  @apply max-w-full ltr:right-5 rtl:right-[unset] rtl:left-5 -top-[302px] before:ltr:right-2.5 before:rtl:right-[unset] before:rtl:left-2.5;
+}
+
+.user-message-input {
+  @apply border-none outline-none w-full placeholder:text-n-slate-10 resize-none h-8 min-h-8 max-h-60 py-1 px-0 my-2 bg-n-background text-n-slate-12 transition-all duration-200;
+}
+</style>

research/chatwoot/app/javascript/widget/components/ChatMessage.vue

@@ -0,0 +1,55 @@
+<script>
+import AgentMessage from 'widget/components/AgentMessage.vue';
+import UserMessage from 'widget/components/UserMessage.vue';
+import { mapGetters } from 'vuex';
+import { MESSAGE_TYPE } from 'widget/helpers/constants';
+
+export default {
+  components: {
+    AgentMessage,
+    UserMessage,
+  },
+  props: {
+    message: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    ...mapGetters({
+      allMessages: 'conversation/getConversation',
+    }),
+    isUserMessage() {
+      return this.message.message_type === MESSAGE_TYPE.INCOMING;
+    },
+    replyTo() {
+      const replyTo = this.message?.content_attributes?.in_reply_to;
+      return replyTo ? this.allMessages[replyTo] : null;
+    },
+  },
+};
+</script>
+
+<template>
+  <UserMessage
+    v-if="isUserMessage"
+    :id="`cwmsg-${message.id}`"
+    :message="message"
+    :reply-to="replyTo"
+  />
+  <AgentMessage
+    v-else
+    :id="`cwmsg-${message.id}`"
+    :message="message"
+    :reply-to="replyTo"
+  />
+</template>
+
+<style scoped lang="scss">
+.message-wrap {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  max-width: 90%;
+}
+</style>

research/chatwoot/app/javascript/widget/components/ChatSendButton.vue

@@ -0,0 +1,36 @@
+<script>
+import Spinner from 'shared/components/Spinner.vue';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
+export default {
+  components: {
+    FluentIcon,
+    Spinner,
+  },
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    color: {
+      type: String,
+      default: '#6e6f73',
+    },
+  },
+};
+</script>
+
+<template>
+  <button
+    type="submit"
+    :disabled="disabled"
+    class="min-h-8 min-w-8 flex items-center justify-center ml-1"
+  >
+    <FluentIcon v-if="!loading" icon="send" :style="`color: ${color}`" />
+    <Spinner v-else size="small" />
+  </button>
+</template>

research/chatwoot/app/javascript/widget/components/ConversationWrap.vue

@@ -0,0 +1,149 @@
+<script>
+import ChatMessage from 'widget/components/ChatMessage.vue';
+import AgentTypingBubble from 'widget/components/AgentTypingBubble.vue';
+import DateSeparator from 'shared/components/DateSeparator.vue';
+import Spinner from 'shared/components/Spinner.vue';
+import { useDarkMode } from 'widget/composables/useDarkMode';
+import { MESSAGE_TYPE } from 'shared/constants/messages';
+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+  name: 'ConversationWrap',
+  components: {
+    ChatMessage,
+    AgentTypingBubble,
+    DateSeparator,
+    Spinner,
+  },
+  props: {
+    groupedMessages: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup() {
+    const { darkMode } = useDarkMode();
+    return { darkMode };
+  },
+  data() {
+    return {
+      previousScrollHeight: 0,
+      previousConversationSize: 0,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      earliestMessage: 'conversation/getEarliestMessage',
+      lastMessage: 'conversation/getLastMessage',
+      allMessagesLoaded: 'conversation/getAllMessagesLoaded',
+      isFetchingList: 'conversation/getIsFetchingList',
+      conversationSize: 'conversation/getConversationSize',
+      isAgentTyping: 'conversation/getIsAgentTyping',
+      conversationAttributes: 'conversationAttributes/getConversationParams',
+    }),
+    colorSchemeClass() {
+      return `${this.darkMode === 'dark' ? 'dark-scheme' : 'light-scheme'}`;
+    },
+    showStatusIndicator() {
+      const { status } = this.conversationAttributes;
+      const isConversationInPendingStatus = status === 'pending';
+      const isLastMessageIncoming =
+        this.lastMessage.message_type === MESSAGE_TYPE.INCOMING;
+      return (
+        this.isAgentTyping ||
+        (isConversationInPendingStatus && isLastMessageIncoming)
+      );
+    },
+  },
+  watch: {
+    allMessagesLoaded() {
+      this.previousScrollHeight = 0;
+    },
+  },
+  mounted() {
+    this.$el.addEventListener('scroll', this.handleScroll);
+    this.scrollToBottom();
+  },
+  updated() {
+    if (this.previousConversationSize !== this.conversationSize) {
+      this.previousConversationSize = this.conversationSize;
+      this.scrollToBottom();
+    }
+  },
+  unmounted() {
+    this.$el.removeEventListener('scroll', this.handleScroll);
+  },
+  methods: {
+    ...mapActions('conversation', ['fetchOldConversations']),
+    scrollToBottom() {
+      const container = this.$el;
+      container.scrollTop = container.scrollHeight - this.previousScrollHeight;
+      this.previousScrollHeight = 0;
+    },
+    handleScroll() {
+      if (
+        this.isFetchingList ||
+        this.allMessagesLoaded ||
+        !this.conversationSize
+      ) {
+        return;
+      }
+
+      if (this.$el.scrollTop < 100) {
+        this.fetchOldConversations({ before: this.earliestMessage.id });
+        this.previousScrollHeight = this.$el.scrollHeight;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="conversation--container" :class="colorSchemeClass">
+    <div class="conversation-wrap" :class="{ 'is-typing': isAgentTyping }">
+      <div v-if="isFetchingList" class="message--loader">
+        <Spinner />
+      </div>
+      <div
+        v-for="groupedMessage in groupedMessages"
+        :key="groupedMessage.date"
+        class="messages-wrap"
+      >
+        <DateSeparator :date="groupedMessage.date" />
+        <ChatMessage
+          v-for="message in groupedMessage.messages"
+          :key="message.id"
+          :message="message"
+        />
+      </div>
+      <AgentTypingBubble v-if="showStatusIndicator" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.conversation--container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: auto;
+  color-scheme: light dark;
+
+  &.light-scheme {
+    color-scheme: light;
+  }
+
+  &.dark-scheme {
+    color-scheme: dark;
+  }
+}
+
+.conversation-wrap {
+  flex: 1;
+  @apply px-2 pt-8 pb-2;
+}
+
+.message--loader {
+  text-align: center;
+}
+</style>

research/chatwoot/app/javascript/widget/components/DragWrapper.vue

@@ -0,0 +1,62 @@
+<script>
+export default {
+  name: 'DragWrapper',
+  props: {
+    direction: {
+      type: String,
+      required: true,
+      validator: value => ['left', 'right'].includes(value),
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['dragged'],
+  data() {
+    return {
+      startX: null,
+      dragDistance: 0,
+      threshold: 50, // Threshold value in pixels
+    };
+  },
+  methods: {
+    handleTouchStart(event) {
+      if (this.disabled) return;
+      this.startX = event.touches[0].clientX;
+    },
+    handleTouchMove(event) {
+      if (this.disabled) return;
+      const touchX = event.touches[0].clientX;
+      let deltaX = touchX - this.startX;
+
+      if (this.direction === 'right') {
+        this.dragDistance = Math.min(this.threshold, deltaX);
+      } else if (this.direction === 'left') {
+        this.dragDistance = Math.max(-this.threshold, deltaX);
+      }
+    },
+    resetPosition() {
+      if (
+        (this.dragDistance >= this.threshold && this.direction === 'right') ||
+        (this.dragDistance <= -this.threshold && this.direction === 'left')
+      ) {
+        this.$emit('dragged', this.direction);
+      }
+      this.dragDistance = 0; // Reset the position after releasing the touch
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    :style="{ transform: `translateX(${dragDistance}px)` }"
+    class="will-change-transform"
+    @touchstart="handleTouchStart"
+    @touchmove="handleTouchMove"
+    @touchend="resetPosition"
+  >
+    <slot />
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/FileBubble.vue

@@ -0,0 +1,92 @@
+<script>
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import { getContrastingTextColor } from '@chatwoot/utils';
+
+export default {
+  components: {
+    FluentIcon,
+  },
+  props: {
+    url: {
+      type: String,
+      default: '',
+    },
+    isInProgress: {
+      type: Boolean,
+      default: false,
+    },
+    widgetColor: {
+      type: String,
+      default: '',
+    },
+    isUserBubble: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    title() {
+      return this.isInProgress
+        ? this.$t('COMPONENTS.FILE_BUBBLE.UPLOADING')
+        : decodeURI(this.fileName);
+    },
+    fileName() {
+      return this.url.substring(this.url.lastIndexOf('/') + 1);
+    },
+    contrastingTextColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
+    textColor() {
+      return this.isUserBubble && this.widgetColor
+        ? this.contrastingTextColor
+        : '';
+    },
+  },
+  methods: {
+    openLink() {
+      const win = window.open(this.url, '_blank');
+      win.focus();
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="file flex flex-row items-center p-3 cursor-pointer">
+    <div class="icon-wrap" :style="{ color: textColor }">
+      <FluentIcon icon="document" size="28" />
+    </div>
+    <div class="ltr:pr-1 rtl:pl-1">
+      <div
+        class="m-0 font-medium text-sm"
+        :class="{ 'text-n-slate-12': !isUserBubble }"
+        :style="{ color: textColor }"
+      >
+        {{ title }}
+      </div>
+      <div class="leading-none mb-1">
+        <a
+          class="download"
+          rel="noreferrer noopener nofollow"
+          target="_blank"
+          :style="{ color: textColor }"
+          :href="url"
+        >
+          {{ $t('COMPONENTS.FILE_BUBBLE.DOWNLOAD') }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.file {
+  .icon-wrap {
+    @apply text-[2.5rem] text-n-brand leading-none ltr:ml-1 rtl:mr-1 ltr:mr-2 rtl:ml-2;
+  }
+
+  .download {
+    @apply text-n-brand font-medium p-0 m-0 text-xs no-underline;
+  }
+}
+</style>

research/chatwoot/app/javascript/widget/components/FooterReplyTo.vue

@@ -0,0 +1,42 @@
+<script>
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
+export default {
+  name: 'FooterReplyTo',
+  components: { FluentIcon },
+  props: {
+    inReplyTo: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  emits: ['dismiss'],
+  computed: {
+    replyToAttachment() {
+      if (!this.inReplyTo?.attachments?.length) {
+        return '';
+      }
+
+      const [{ file_type: fileType } = {}] = this.inReplyTo.attachments;
+      return this.$t(`ATTACHMENTS.${fileType}.CONTENT`);
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="mb-2.5 rounded-[7px] bg-n-slate-3 px-2 py-1.5 text-sm text-n-slate-11 flex items-center gap-2"
+  >
+    <div class="items-center flex-grow truncate">
+      <strong>{{ $t('FOOTER_REPLY_TO.REPLY_TO') }}</strong>
+      {{ inReplyTo.content || replyToAttachment }}
+    </div>
+    <button
+      class="items-end flex-shrink-0 p-1 rounded-md hover:bg-n-slate-5"
+      @click="$emit('dismiss')"
+    >
+      <FluentIcon icon="dismiss" size="12" />
+    </button>
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/Form/PhoneInput.vue

@@ -0,0 +1,250 @@
+<script setup>
+import { ref, computed, watch, useTemplateRef, nextTick, unref } from 'vue';
+import countriesList from 'shared/constants/countries.js';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import {
+  getActiveCountryCode,
+  getActiveDialCode,
+} from 'shared/components/PhoneInput/helper';
+
+const { context } = defineProps({
+  context: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const localValue = ref(context.value || '');
+
+const selectedIndex = ref(-1);
+const showDropdown = ref(false);
+const searchCountry = ref('');
+const activeCountryCode = ref(getActiveCountryCode());
+const activeDialCode = ref(getActiveDialCode());
+const phoneNumber = ref('');
+
+const dropdownRef = useTemplateRef('dropdownRef');
+const searchbarRef = useTemplateRef('searchbarRef');
+
+const placeholder = computed(() => context?.attrs?.placeholder || '');
+const hasErrorInPhoneInput = computed(() => context?.state?.invalid);
+const dropdownFirstItemName = computed(() =>
+  activeCountryCode.value ? 'Clear selection' : 'Select Country'
+);
+const countries = computed(() => [
+  {
+    name: dropdownFirstItemName.value,
+    dial_code: '',
+    emoji: '',
+    id: '',
+  },
+  ...countriesList,
+]);
+
+const items = computed(() => {
+  return countries.value.filter(country => {
+    const { name, dial_code, id } = country;
+    const search = searchCountry.value.toLowerCase();
+    return (
+      name.toLowerCase().includes(search) ||
+      dial_code.toLowerCase().includes(search) ||
+      id.toLowerCase().includes(search)
+    );
+  });
+});
+
+const activeCountry = computed(() => {
+  return countries.value.find(
+    country => country.id === activeCountryCode.value
+  );
+});
+
+watch(items, newItems => {
+  if (newItems.length < selectedIndex.value + 1) {
+    // Reset the selected index to 0 if the new items length is less than the selected index.
+    selectedIndex.value = 0;
+  }
+});
+
+function setContextValue(code) {
+  const safeCode = unref(code);
+  // This function is used to set the context value.
+  // The context value is used to set the value of the phone number field in the pre-chat form.
+  localValue.value = `${safeCode}${phoneNumber.value}`;
+  context.node.input(localValue.value);
+}
+
+function onChange(e) {
+  phoneNumber.value = e.target.value;
+  // This function is used to set the context value when the user types in the phone number field.
+  setContextValue(activeDialCode.value);
+}
+
+function focusedOrActiveItem(className) {
+  // This function is used to get the focused or active item in the dropdown.
+  if (!showDropdown.value) return [];
+  return Array.from(
+    dropdownRef.value?.querySelectorAll(
+      `div.country-dropdown div.country-dropdown--item.${className}`
+    )
+  );
+}
+
+function scrollToFocusedOrActiveItem(item) {
+  // This function is used to scroll the dropdown to the focused or active item.
+  const focusedOrActiveItemLocal = item;
+  if (focusedOrActiveItemLocal.length > 0) {
+    const dropdown = dropdownRef.value;
+    const dropdownHeight = dropdown.clientHeight;
+    const itemTop = focusedOrActiveItemLocal[0]?.offsetTop;
+    const itemHeight = focusedOrActiveItemLocal[0]?.offsetHeight;
+    const scrollPosition = itemTop - dropdownHeight / 2 + itemHeight / 2;
+    dropdown.scrollTo({
+      top: scrollPosition,
+      behavior: 'auto',
+    });
+  }
+}
+
+function adjustScroll() {
+  nextTick(() => {
+    scrollToFocusedOrActiveItem(focusedOrActiveItem('focus'));
+  });
+}
+
+function adjustSelection(direction) {
+  if (!showDropdown.value) return;
+  const maxIndex = items.value.length - 1;
+  if (direction === 'up') {
+    selectedIndex.value =
+      selectedIndex.value <= 0 ? maxIndex : selectedIndex.value - 1;
+  } else if (direction === 'down') {
+    selectedIndex.value =
+      selectedIndex.value >= maxIndex ? 0 : selectedIndex.value + 1;
+  }
+  adjustScroll();
+}
+
+function moveSelectionUp() {
+  adjustSelection('up');
+}
+function moveSelectionDown() {
+  adjustSelection('down');
+}
+
+function closeDropdown() {
+  selectedIndex.value = -1;
+  showDropdown.value = false;
+}
+
+function onSelectCountry(country) {
+  activeCountryCode.value = country.id;
+  searchCountry.value = '';
+  activeDialCode.value = country.dial_code ? country.dial_code : '';
+  setContextValue(country.dial_code);
+  closeDropdown();
+}
+
+function toggleCountryDropdown() {
+  showDropdown.value = !showDropdown.value;
+  selectedIndex.value = -1;
+  if (showDropdown.value) {
+    nextTick(() => {
+      searchbarRef.value.focus();
+      // This is used to scroll the dropdown to the active item.
+      scrollToFocusedOrActiveItem(focusedOrActiveItem('active'));
+    });
+  }
+}
+
+function onSelect() {
+  if (!showDropdown.value || selectedIndex.value === -1) return;
+  onSelectCountry(items.value[selectedIndex.value]);
+}
+</script>
+
+<template>
+  <div class="relative mt-2 phone-input--wrap">
+    <div
+      class="flex items-center justify-start outline-none phone-input rounded-lg box-border bg-n-background dark:bg-n-alpha-2 border-none outline outline-1 outline-offset-[-1px] text-sm w-full text-n-slate-12 focus-within:outline-n-brand focus-within:ring-1 focus-within:ring-n-brand"
+      :class="{
+        'outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9':
+          hasErrorInPhoneInput,
+        'outline-n-weak': !hasErrorInPhoneInput,
+      }"
+    >
+      <div
+        class="flex items-center justify-between h-[2.625rem] px-2 py-2 cursor-pointer bg-n-alpha-1 dark:bg-n-solid-1 ltr:rounded-bl-lg rtl:rounded-br-lg ltr:rounded-tl-lg rtl:rounded-tr-lg min-w-[3.6rem] w-[3.6rem]"
+        @click="toggleCountryDropdown"
+      >
+        <h5 v-if="activeCountry.emoji" class="mb-0 text-xl">
+          {{ activeCountry.emoji }}
+        </h5>
+        <FluentIcon v-else icon="globe" class="fluent-icon" size="20" />
+        <FluentIcon icon="chevron-down" class="fluent-icon" size="12" />
+      </div>
+      <span
+        v-if="activeDialCode"
+        class="py-2 ltr:pl-2 rtl:pr-2 text-base text-n-slate-11"
+      >
+        {{ activeDialCode }}
+      </span>
+      <input
+        :value="phoneNumber"
+        type="phoneInput"
+        class="w-full h-full !py-3 pl-2 pr-3 leading-tight rounded-r !outline-none focus:!ring-0 !bg-transparent dark:!bg-transparent"
+        name="phoneNumber"
+        :placeholder="placeholder"
+        @input="onChange"
+        @blur="context.blurHandler"
+      />
+    </div>
+    <div
+      v-if="showDropdown"
+      ref="dropdownRef"
+      v-on-clickaway="closeDropdown"
+      class="country-dropdown absolute bg-n-background text-n-slate-12 dark:bg-n-solid-3 z-10 h-48 px-0 pt-0 pb-1 pl-1 pr-1 overflow-y-auto rounded-lg shadow-lg top-12 w-full min-w-24 max-w-[14.8rem]"
+      @keydown.up="moveSelectionUp"
+      @keydown.down="moveSelectionDown"
+      @keydown.enter="onSelect"
+    >
+      <div
+        class="sticky top-0 bg-n-background text-n-slate-12 dark:bg-n-solid-3"
+      >
+        <input
+          ref="searchbarRef"
+          v-model="searchCountry"
+          type="text"
+          :placeholder="$t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_SEARCH')"
+          class="w-full h-8 !ring-0 px-3 py-2 mt-1 mb-1 text-sm rounded bg-n-alpha-black2"
+        />
+      </div>
+      <div
+        v-for="(country, index) in items"
+        :key="index"
+        class="flex items-center h-8 px-2 py-2 rounded cursor-pointer country-dropdown--item text-n-slate-12 dark:hover:bg-n-solid-2 hover:bg-n-alpha-2"
+        :class="[
+          country.id === activeCountryCode &&
+            'active bg-n-alpha-1 dark:bg-n-solid-1',
+          index === selectedIndex && 'focus dark:bg-n-solid-2 bg-n-alpha-2',
+        ]"
+        @click="onSelectCountry(country)"
+      >
+        <span v-if="country.emoji" class="mr-2 text-xl">{{
+          country.emoji
+        }}</span>
+        <span class="text-sm leading-5 truncate">
+          {{ country.name }}
+        </span>
+        <span class="ml-2 text-xs">{{ country.dial_code }}</span>
+      </div>
+      <div v-if="items.length === 0">
+        <span
+          class="flex justify-center mt-4 text-sm text-center text-n-slate-11"
+        >
+          {{ $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_EMPTY') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/GroupedAvatars.vue

@@ -0,0 +1,36 @@
+<script setup>
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import { defineProps, computed } from 'vue';
+
+const props = defineProps({
+  users: {
+    type: Array,
+    default: () => [],
+  },
+  limit: {
+    type: Number,
+    default: 4,
+  },
+});
+
+const usersToDisplay = computed(() => props.users.slice(0, props.limit));
+</script>
+
+<template>
+  <div class="flex">
+    <span
+      v-for="(user, index) in usersToDisplay"
+      :key="user.id"
+      :class="index ? 'ltr:-ml-4 rtl:-mr-4' : ''"
+      class="inline-block rounded-full text-white shadow-solid"
+    >
+      <Avatar
+        :name="user.name"
+        :src="user.avatar_url"
+        :size="36"
+        class="[&>span]:outline [&>span]:outline-1 [&>span]:outline-n-background"
+        rounded-full
+      />
+    </span>
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/HeaderActions.vue

@@ -0,0 +1,125 @@
+<script>
+import { mapGetters } from 'vuex';
+import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
+import { popoutChatWindow } from '../helpers/popoutHelper';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import configMixin from 'widget/mixins/configMixin';
+import { CONVERSATION_STATUS } from 'shared/constants/messages';
+
+export default {
+  name: 'HeaderActions',
+  components: { FluentIcon },
+  mixins: [configMixin],
+  props: {
+    showPopoutButton: {
+      type: Boolean,
+      default: false,
+    },
+    showEndConversationButton: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      conversationAttributes: 'conversationAttributes/getConversationParams',
+      canUserEndConversation: 'appConfig/getCanUserEndConversation',
+    }),
+    canLeaveConversation() {
+      return [
+        CONVERSATION_STATUS.OPEN,
+        CONVERSATION_STATUS.SNOOZED,
+        CONVERSATION_STATUS.PENDING,
+      ].includes(this.conversationStatus);
+    },
+    isIframe() {
+      return IFrameHelper.isIFrame();
+    },
+    isRNWebView() {
+      return RNHelper.isRNWebView();
+    },
+    showHeaderActions() {
+      return this.isIframe || this.isRNWebView || this.hasWidgetOptions;
+    },
+    conversationStatus() {
+      return this.conversationAttributes.status;
+    },
+    hasWidgetOptions() {
+      return this.showPopoutButton || this.conversationStatus === 'open';
+    },
+  },
+  methods: {
+    popoutWindow() {
+      this.closeWindow();
+      const {
+        location: { origin },
+        chatwootWebChannel: { websiteToken },
+        authToken,
+      } = window;
+      popoutChatWindow(
+        origin,
+        websiteToken,
+        this.$root.$i18n.locale,
+        authToken
+      );
+    },
+    closeWindow() {
+      if (IFrameHelper.isIFrame()) {
+        IFrameHelper.sendMessage({ event: 'closeWindow' });
+      } else if (RNHelper.isRNWebView) {
+        RNHelper.sendMessage({ type: 'close-widget' });
+      }
+    },
+    resolveConversation() {
+      this.$store.dispatch('conversation/resolveConversation');
+    },
+  },
+};
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <div v-if="showHeaderActions" class="actions flex items-center gap-3">
+    <button
+      v-if="
+        canLeaveConversation &&
+        canUserEndConversation &&
+        hasEndConversationEnabled &&
+        showEndConversationButton
+      "
+      class="button transparent compact"
+      :title="$t('END_CONVERSATION')"
+      @click="resolveConversation"
+    >
+      <FluentIcon icon="sign-out" size="22" class="text-n-slate-12" />
+    </button>
+    <button
+      v-if="showPopoutButton"
+      class="button transparent compact new-window--button"
+      @click="popoutWindow"
+    >
+      <FluentIcon icon="open" size="22" class="text-n-slate-12" />
+    </button>
+    <button
+      class="button transparent compact close-button"
+      :class="{
+        'rn-close-button': isRNWebView,
+      }"
+      @click="closeWindow"
+    >
+      <FluentIcon icon="dismiss" size="24" class="text-n-slate-12" />
+    </button>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.actions {
+  .close-button {
+    display: none;
+  }
+
+  .rn-close-button {
+    display: block !important;
+  }
+}
+</style>

research/chatwoot/app/javascript/widget/components/ImageBubble.vue

@@ -0,0 +1,61 @@
+<script>
+export default {
+  props: {
+    url: { type: String, default: '' },
+    thumb: { type: String, default: '' },
+    readableTime: { type: String, default: '' },
+  },
+  emits: ['error'],
+  methods: {
+    onImgError() {
+      this.$emit('error');
+    },
+  },
+};
+</script>
+
+<template>
+  <a
+    :href="url"
+    target="_blank"
+    rel="noreferrer noopener nofollow"
+    class="image"
+  >
+    <div class="wrap">
+      <img :src="thumb" alt="Picture message" @error="onImgError" />
+      <span class="time">{{ readableTime }}</span>
+    </div>
+  </a>
+</template>
+
+<style lang="scss" scoped>
+.image {
+  display: block;
+
+  .wrap {
+    position: relative;
+    display: flex;
+    max-width: 100%;
+
+    &::before {
+      background-image: linear-gradient(-180deg, transparent 3%, #1f2d3d 130%);
+      bottom: 0;
+      content: '';
+      height: 20%;
+      left: 0;
+      opacity: 0.8;
+      position: absolute;
+      width: 100%;
+    }
+  }
+
+  img {
+    width: 100%;
+    max-width: 250px;
+  }
+
+  .time {
+    @apply text-xs bottom-1 text-white ltr:right-3 rtl:left-3 whitespace-nowrap absolute;
+  }
+}
+</style>

research/chatwoot/app/javascript/widget/components/MessageReplyButton.vue

@@ -0,0 +1,16 @@
+<script>
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
+export default {
+  name: 'MessageReplyButton',
+  components: { FluentIcon },
+};
+</script>
+
+<template>
+  <button
+    class="p-1 mb-1 rounded-full text-n-slate-11 bg-n-slate-3 hover:text-n-slate-12"
+  >
+    <FluentIcon icon="arrow-reply" size="11" class="flex-shrink-0" />
+  </button>
+</template>

research/chatwoot/app/javascript/widget/components/PreChat/Form.vue

@@ -0,0 +1,356 @@
+<script>
+import CustomButton from 'shared/components/Button.vue';
+import Spinner from 'shared/components/Spinner.vue';
+import { mapGetters } from 'vuex';
+import { getContrastingTextColor } from '@chatwoot/utils';
+import { isEmptyObject } from 'widget/helpers/utils';
+import { getRegexp } from 'shared/helpers/Validators';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import configMixin from 'widget/mixins/configMixin';
+import { FormKit, createInput } from '@formkit/vue';
+import PhoneInput from 'widget/components/Form/PhoneInput.vue';
+
+export default {
+  components: {
+    CustomButton,
+    Spinner,
+    FormKit,
+  },
+  mixins: [configMixin],
+  props: {
+    options: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  emits: ['submitPreChat'],
+  setup() {
+    const phoneInput = createInput(PhoneInput, {
+      props: ['hasErrorInPhoneInput'],
+    });
+    const { formatMessage } = useMessageFormatter();
+
+    return { formatMessage, phoneInput };
+  },
+  data() {
+    return {
+      locale: this.$root.$i18n.locale,
+      hasErrorInPhoneInput: false,
+      message: '',
+      formValues: {},
+      labels: {
+        emailAddress: 'EMAIL_ADDRESS',
+        fullName: 'FULL_NAME',
+        phoneNumber: 'PHONE_NUMBER',
+      },
+    };
+  },
+  computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+      isCreating: 'conversation/getIsCreating',
+      isConversationRouting: 'appConfig/getIsUpdatingRoute',
+      activeCampaign: 'campaign/getActiveCampaign',
+      currentUser: 'contacts/getCurrentUser',
+    }),
+    isCreatingConversation() {
+      return this.isCreating || this.isConversationRouting;
+    },
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
+    hasActiveCampaign() {
+      return !isEmptyObject(this.activeCampaign);
+    },
+    shouldShowHeaderMessage() {
+      return (
+        this.hasActiveCampaign ||
+        (this.preChatFormEnabled && !!this.headerMessage)
+      );
+    },
+    headerMessage() {
+      if (this.preChatFormEnabled) {
+        return this.options.preChatMessage;
+      }
+      if (this.hasActiveCampaign) {
+        return this.$t('PRE_CHAT_FORM.CAMPAIGN_HEADER');
+      }
+      return '';
+    },
+    preChatFields() {
+      return this.preChatFormEnabled ? this.options.preChatFields : [];
+    },
+    filteredPreChatFields() {
+      const isUserEmailAvailable = this.currentUser.has_email;
+      const isUserPhoneNumberAvailable = this.currentUser.has_phone_number;
+      const isUserIdentifierAvailable = !!this.currentUser.identifier;
+
+      const isUserNameAvailable = !!(
+        isUserIdentifierAvailable ||
+        isUserEmailAvailable ||
+        isUserPhoneNumberAvailable
+      );
+      return this.preChatFields.filter(field => {
+        if (isUserEmailAvailable && field.name === 'emailAddress') {
+          return false;
+        }
+        if (isUserPhoneNumberAvailable && field.name === 'phoneNumber') {
+          return false;
+        }
+        if (isUserNameAvailable && field.name === 'fullName') {
+          return false;
+        }
+        return true;
+      });
+    },
+    enabledPreChatFields() {
+      return this.filteredPreChatFields
+        .filter(field => field.enabled)
+        .map(field => ({
+          ...field,
+          type:
+            field.name === 'phoneNumber'
+              ? this.phoneInput
+              : this.findFieldType(field.type),
+        }));
+    },
+    conversationCustomAttributes() {
+      let conversationAttributes = {};
+      this.enabledPreChatFields.forEach(field => {
+        if (field.field_type === 'conversation_attribute') {
+          conversationAttributes = {
+            ...conversationAttributes,
+            [field.name]: this.getValue(field),
+          };
+        }
+      });
+      return conversationAttributes;
+    },
+    contactCustomAttributes() {
+      let contactAttributes = {};
+      this.enabledPreChatFields.forEach(field => {
+        if (field.field_type === 'contact_attribute') {
+          contactAttributes = {
+            ...contactAttributes,
+            [field.name]: this.getValue(field),
+          };
+        }
+      });
+      return contactAttributes;
+    },
+  },
+  methods: {
+    labelClass(input) {
+      const { state } = input.context;
+      const hasErrors = state.invalid;
+      return !hasErrors ? 'text-n-slate-12' : 'text-n-ruby-10';
+    },
+    inputClass(input) {
+      const { state, family: classification, type } = input.context;
+      const hasErrors = state.invalid;
+      if (classification === 'box' && type === 'checkbox') {
+        return '';
+      }
+      if (type === 'phoneInput') {
+        this.hasErrorInPhoneInput = hasErrors;
+      }
+      if (!hasErrors) {
+        return `mt-1 rounded w-full py-2 px-3`;
+      }
+      return `mt-1 rounded w-full py-2 px-3 error`;
+    },
+    isContactFieldRequired(field) {
+      return this.preChatFields.find(option => option.name === field).required;
+    },
+    getLabel({ label }) {
+      return label;
+    },
+    getPlaceHolder({ placeholder }) {
+      return placeholder;
+    },
+    getValue({ name, type }) {
+      if (type === 'select') {
+        return this.enabledPreChatFields.find(option => option.name === name)
+          .values[this.formValues[name]];
+      }
+      return this.formValues[name] || null;
+    },
+    getValidation({ type, name, field_type, regex_pattern }) {
+      let regex = regex_pattern ? getRegexp(regex_pattern) : null;
+      const validations = {
+        emailAddress: 'email',
+        phoneNumber: ['startsWithPlus', 'isValidPhoneNumber'],
+        url: 'url',
+        date: 'date',
+        text: null,
+        select: null,
+        number: null,
+        checkbox: false,
+        contact_attribute: regex ? [['matches', regex]] : null,
+        conversation_attribute: regex ? [['matches', regex]] : null,
+      };
+      const validationKeys = Object.keys(validations);
+      const isRequired = this.isContactFieldRequired(name);
+      const validation = isRequired ? ['required'] : ['optional'];
+
+      if (
+        validationKeys.includes(name) ||
+        validationKeys.includes(type) ||
+        validationKeys.includes(field_type)
+      ) {
+        const validationType =
+          validations[type] || validations[name] || validations[field_type];
+        const allValidations = validationType
+          ? validation.concat(validationType)
+          : validation;
+        return allValidations.join('|');
+      }
+
+      return '';
+    },
+    findFieldType(type) {
+      if (type === 'link') {
+        return 'url';
+      }
+      if (type === 'list') {
+        return 'select';
+      }
+
+      return type;
+    },
+    getOptions(item) {
+      if (item.type === 'select') {
+        let values = {};
+        item.values.forEach((value, index) => {
+          values = {
+            ...values,
+            [index]: value,
+          };
+        });
+        return values;
+      }
+      return {};
+    },
+    onSubmit() {
+      const { emailAddress, fullName, phoneNumber, message } = this.formValues;
+      this.$emit('submitPreChat', {
+        fullName,
+        phoneNumber,
+        emailAddress,
+        message,
+        activeCampaignId: this.activeCampaign.id,
+        conversationCustomAttributes: this.conversationCustomAttributes,
+        contactCustomAttributes: this.contactCustomAttributes,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <!-- hide the default submit button for now -->
+  <FormKit
+    v-model="formValues"
+    type="form"
+    form-class="flex flex-col flex-1 w-full p-6 overflow-y-auto"
+    :incomplete-message="false"
+    :submit-attrs="{
+      inputClass: 'hidden',
+      wrapperClass: 'hidden',
+    }"
+    @submit="onSubmit"
+  >
+    <div
+      v-if="shouldShowHeaderMessage"
+      v-dompurify-html="formatMessage(headerMessage, false)"
+      class="mb-4 text-base leading-5 text-n-slate-12 [&>p>.link]:text-n-blue-11 [&>p>.link]:hover:underline"
+    />
+    <!-- Why do the v-bind shenanigan? Because Formkit API is really bad.
+    If we just pass the options as is even with null or undefined or false,
+    it assumes we are trying to make a multicheckbox. This is the best we have for now -->
+    <FormKit
+      v-for="item in enabledPreChatFields"
+      :key="item.name"
+      :name="item.name"
+      :type="item.type"
+      :label="getLabel(item)"
+      :placeholder="getPlaceHolder(item)"
+      :validation="getValidation(item)"
+      v-bind="
+        item.type === 'select'
+          ? {
+              options: getOptions(item),
+            }
+          : undefined
+      "
+      :label-class="context => `text-sm font-medium ${labelClass(context)}`"
+      :input-class="context => inputClass(context)"
+      :validation-messages="{
+        startsWithPlus: $t(
+          'PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DIAL_CODE_VALID_ERROR'
+        ),
+        isValidPhoneNumber: $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.VALID_ERROR'),
+        email: $t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.VALID_ERROR'),
+        required: $t('PRE_CHAT_FORM.REQUIRED'),
+        matches: item.regex_cue
+          ? item.regex_cue
+          : $t('PRE_CHAT_FORM.REGEX_ERROR'),
+      }"
+      :has-error-in-phone-input="hasErrorInPhoneInput"
+    />
+    <FormKit
+      v-if="!hasActiveCampaign"
+      name="message"
+      type="textarea"
+      :label-class="context => `text-sm font-medium ${labelClass(context)}`"
+      :input-class="context => inputClass(context)"
+      :label="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.LABEL')"
+      :placeholder="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.PLACEHOLDER')"
+      validation="required"
+      :validation-messages="{
+        required: $t('PRE_CHAT_FORM.FIELDS.MESSAGE.ERROR'),
+      }"
+    />
+
+    <CustomButton
+      class="mt-3 mb-5 font-medium flex items-center justify-center gap-2"
+      block
+      :bg-color="widgetColor"
+      :text-color="textColor"
+      :disabled="isCreatingConversation"
+    >
+      <Spinner v-if="isCreatingConversation" class="p-0" />
+      {{ $t('START_CONVERSATION') }}
+    </CustomButton>
+  </FormKit>
+</template>
+
+<style lang="scss">
+.formkit-outer {
+  @apply mt-2;
+
+  .formkit-inner {
+    input.error,
+    textarea.error,
+    select.error {
+      @apply outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 focus:outline-n-ruby-9 dark:focus:outline-n-ruby-9;
+    }
+
+    input[type='checkbox'] {
+      @apply size-4 outline-none;
+    }
+  }
+}
+
+[data-invalid] .formkit-message {
+  @apply text-n-ruby-10 block text-xs font-normal my-0.5 w-full;
+}
+
+.formkit-outer[data-type='checkbox'] .formkit-wrapper {
+  @apply flex items-center gap-2 px-0.5;
+}
+
+.formkit-messages {
+  @apply list-none m-0 p-0;
+}
+</style>

research/chatwoot/app/javascript/widget/components/ReplyToChip.vue

@@ -0,0 +1,60 @@
+<script>
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
+export default {
+  name: 'AgentMessage',
+  components: {
+    FluentIcon,
+  },
+  props: {
+    replyTo: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      timeOutID: null,
+    };
+  },
+  computed: {
+    replyToAttachment() {
+      if (!this.replyTo?.attachments?.length) {
+        return '';
+      }
+
+      const [{ file_type: fileType } = {}] = this.replyTo.attachments;
+      return this.$t(`ATTACHMENTS.${fileType}.CONTENT`);
+    },
+  },
+
+  unmounted() {
+    clearTimeout(this.timeOutID);
+  },
+  methods: {
+    navigateTo(id) {
+      const elementId = `cwmsg-${id}`;
+      this.$nextTick(() => {
+        const el = document.getElementById(elementId);
+        el.scrollIntoView();
+        el.classList.add('bg-n-slate-3', 'dark:bg-n-solid-3');
+        this.timeOutID = setTimeout(() => {
+          el.classList.remove('bg-n-slate-3', 'dark:bg-n-solid-3');
+        }, 500);
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <button
+    class="px-1.5 py-0.5 rounded-md text-n-slate-11 bg-n-slate-4 opacity-60 hover:opacity-100 cursor-pointer flex items-center gap-1.5"
+    @click="navigateTo(replyTo.id)"
+  >
+    <FluentIcon icon="arrow-reply" size="12" class="flex-shrink-0" />
+    <div class="truncate max-w-[8rem]">
+      {{ replyTo.content || replyToAttachment }}
+    </div>
+  </button>
+</template>

research/chatwoot/app/javascript/widget/components/TeamAvailability.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { IFrameHelper } from 'widget/helpers/utils';
+import { CHATWOOT_ON_START_CONVERSATION } from '../constants/sdkEvents';
+import AvailabilityContainer from 'widget/components/Availability/AvailabilityContainer.vue';
+import { useMapGetter } from 'dashboard/composables/store.js';
+
+const props = defineProps({
+  availableAgents: { type: Array, default: () => [] },
+  hasConversation: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['startConversation']);
+
+const widgetColor = useMapGetter('appConfig/getWidgetColor');
+
+const startConversation = () => {
+  emit('startConversation');
+  if (!props.hasConversation) {
+    IFrameHelper.sendMessage({
+      event: 'onEvent',
+      eventIdentifier: CHATWOOT_ON_START_CONVERSATION,
+      data: { hasConversation: false },
+    });
+  }
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-3 w-full shadow outline-1 outline outline-n-container rounded-xl bg-n-background dark:bg-n-solid-2 px-5 py-4"
+  >
+    <AvailabilityContainer :agents="availableAgents" show-header show-avatars />
+
+    <button
+      class="inline-flex items-center gap-1 font-medium text-n-slate-12"
+      :style="{ color: widgetColor }"
+      @click="startConversation"
+    >
+      <span>
+        {{
+          hasConversation
+            ? $t('CONTINUE_CONVERSATION')
+            : $t('START_CONVERSATION')
+        }}
+      </span>
+      <i class="i-lucide-chevron-right size-5 mt-px" />
+    </button>
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/UnreadMessage.vue

@@ -0,0 +1,132 @@
+<script>
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import configMixin from '../mixins/configMixin';
+import { isEmptyObject } from 'widget/helpers/utils';
+import {
+  ON_CAMPAIGN_MESSAGE_CLICK,
+  ON_UNREAD_MESSAGE_CLICK,
+} from '../constants/widgetBusEvents';
+import { emitter } from 'shared/helpers/mitt';
+
+export default {
+  name: 'UnreadMessage',
+  components: { Avatar },
+  mixins: [configMixin],
+  props: {
+    message: {
+      type: String,
+      default: '',
+    },
+    showSender: {
+      type: Boolean,
+      default: false,
+    },
+    sender: {
+      type: Object,
+      default: () => {},
+    },
+    campaignId: {
+      type: Number,
+      default: null,
+    },
+  },
+  setup() {
+    const { formatMessage, getPlainText, truncateMessage, highlightContent } =
+      useMessageFormatter();
+    return {
+      formatMessage,
+      getPlainText,
+      truncateMessage,
+      highlightContent,
+    };
+  },
+  computed: {
+    companyName() {
+      return `${this.$t('UNREAD_VIEW.COMPANY_FROM')} ${
+        this.channelConfig.websiteName
+      }`;
+    },
+    avatarUrl() {
+      // eslint-disable-next-line
+      const displayImage = this.useInboxAvatarForBot
+        ? this.inboxAvatarUrl
+        : '/assets/images/chatwoot_bot.png';
+      if (this.isSenderExist(this.sender)) {
+        const { avatar_url: avatarUrl } = this.sender;
+        return avatarUrl;
+      }
+      return displayImage;
+    },
+    agentName() {
+      if (this.isSenderExist(this.sender)) {
+        const { available_name: availableName } = this.sender;
+        return availableName;
+      }
+      if (this.useInboxAvatarForBot) {
+        return this.channelConfig.websiteName;
+      }
+      return this.$t('UNREAD_VIEW.BOT');
+    },
+    availabilityStatus() {
+      if (this.isSenderExist(this.sender)) {
+        const { availability_status: availabilityStatus } = this.sender;
+        return availabilityStatus;
+      }
+      return null;
+    },
+  },
+  methods: {
+    isSenderExist(sender) {
+      return sender && !isEmptyObject(sender);
+    },
+    onClickMessage() {
+      if (this.campaignId) {
+        emitter.emit(ON_CAMPAIGN_MESSAGE_CLICK, this.campaignId);
+      } else {
+        emitter.emit(ON_UNREAD_MESSAGE_CLICK);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="chat-bubble-wrap">
+    <button class="chat-bubble agent bg-white" @click="onClickMessage">
+      <div v-if="showSender" class="row--agent-block">
+        <Avatar
+          :src="avatarUrl"
+          :size="20"
+          :name="agentName"
+          :status="availabilityStatus"
+          rounded-full
+        />
+        <span v-dompurify-html="agentName" class="agent--name" />
+        <span v-dompurify-html="companyName" class="company--name" />
+      </div>
+      <div
+        v-dompurify-html="formatMessage(message, false)"
+        class="message-content"
+      />
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.chat-bubble {
+  @apply max-w-[85%] cursor-pointer p-4;
+}
+
+.row--agent-block {
+  @apply items-center flex text-left pb-2 text-xs;
+
+  .agent--name {
+    @apply font-medium ml-1;
+  }
+
+  .company--name {
+    @apply text-n-slate-11 dark:text-n-slate-10 ml-1;
+  }
+}
+</style>

research/chatwoot/app/javascript/widget/components/UnreadMessageList.vue

@@ -0,0 +1,130 @@
+<script>
+import { mapGetters } from 'vuex';
+import configMixin from '../mixins/configMixin';
+import { ON_UNREAD_MESSAGE_CLICK } from '../constants/widgetBusEvents';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import UnreadMessage from 'widget/components/UnreadMessage.vue';
+import { isWidgetColorLighter } from 'shared/helpers/colorHelper';
+import { emitter } from 'shared/helpers/mitt';
+
+export default {
+  name: 'Unread',
+  components: {
+    FluentIcon,
+    UnreadMessage,
+  },
+  mixins: [configMixin],
+  props: {
+    messages: {
+      type: Array,
+      required: true,
+    },
+  },
+  emits: ['close'],
+  computed: {
+    ...mapGetters({
+      unreadMessageCount: 'conversation/getUnreadMessageCount',
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
+    sender() {
+      const [firstMessage] = this.messages;
+      return firstMessage.sender || {};
+    },
+    isBackgroundLighter() {
+      return isWidgetColorLighter(this.widgetColor);
+    },
+  },
+  methods: {
+    openConversationView() {
+      emitter.emit(ON_UNREAD_MESSAGE_CLICK);
+    },
+    closeFullView() {
+      this.$emit('close');
+    },
+    getMessageContent(message) {
+      const { attachments, content } = message;
+      const hasAttachments = attachments && attachments.length;
+
+      if (content) return content;
+
+      if (hasAttachments) return `📑`;
+
+      return '';
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="unread-wrap" dir="ltr">
+    <div class="close-unread-wrap">
+      <button class="button small close-unread-button" @click="closeFullView">
+        <span class="flex items-center">
+          <FluentIcon class="mr-1" icon="dismiss" size="12" />
+          {{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
+        </span>
+      </button>
+    </div>
+    <div class="unread-messages">
+      <UnreadMessage
+        v-for="(message, index) in messages"
+        :key="message.id"
+        :message-type="message.messageType"
+        :message-id="message.id"
+        :show-sender="!index"
+        :sender="message.sender"
+        :message="getMessageContent(message)"
+        :campaign-id="message.campaignId"
+      />
+    </div>
+
+    <div class="open-read-view-wrap">
+      <button
+        v-if="unreadMessageCount"
+        class="button clear-button"
+        @click="openConversationView"
+      >
+        <span
+          class="flex items-center"
+          :class="{
+            '!text-n-slate-12': isBackgroundLighter,
+          }"
+          :style="{
+            color: widgetColor,
+          }"
+        >
+          <FluentIcon class="mr-2" size="16" icon="arrow-right" />
+          {{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.unread-wrap {
+  width: 100%;
+  height: auto;
+  max-height: 100vh;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  overflow: hidden;
+
+  .unread-messages {
+    @apply pb-2;
+  }
+
+  .clear-button {
+    transition: all 0.3s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+    @apply bg-transparent text-n-brand border-none border-0 font-semibold text-base ml-1 py-0 pl-0 pr-2.5 hover:brightness-75 hover:translate-x-1;
+  }
+
+  .close-unread-button {
+    transition: all 0.3s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+    @apply bg-n-slate-3 dark:bg-n-slate-12 text-n-slate-12 dark:text-n-slate-1 hover:brightness-95 border-none border-0 font-medium text-xxs rounded-2xl mb-3;
+  }
+}
+</style>

research/chatwoot/app/javascript/widget/components/UserMessage.vue

@@ -0,0 +1,182 @@
+<script>
+import UserMessageBubble from 'widget/components/UserMessageBubble.vue';
+import MessageReplyButton from 'widget/components/MessageReplyButton.vue';
+import ImageBubble from 'widget/components/ImageBubble.vue';
+import VideoBubble from 'widget/components/VideoBubble.vue';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import FileBubble from 'widget/components/FileBubble.vue';
+import { messageStamp } from 'shared/helpers/timeHelper';
+import messageMixin from '../mixins/messageMixin';
+import ReplyToChip from 'widget/components/ReplyToChip.vue';
+import DragWrapper from 'widget/components/DragWrapper.vue';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { emitter } from 'shared/helpers/mitt';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'UserMessage',
+  components: {
+    UserMessageBubble,
+    MessageReplyButton,
+    ImageBubble,
+    VideoBubble,
+    FileBubble,
+    FluentIcon,
+    ReplyToChip,
+    DragWrapper,
+  },
+  mixins: [messageMixin],
+  props: {
+    message: {
+      type: Object,
+      default: () => {},
+    },
+    replyTo: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      hasImageError: false,
+      hasVideoError: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
+
+    isInProgress() {
+      const { status = '' } = this.message;
+      return status === 'in_progress';
+    },
+    showTextBubble() {
+      const { message } = this;
+      return !!message.content;
+    },
+    readableTime() {
+      const { created_at: createdAt = '' } = this.message;
+      return messageStamp(createdAt);
+    },
+    isFailed() {
+      const { status = '' } = this.message;
+      return status === 'failed';
+    },
+    errorMessage() {
+      const { meta } = this.message;
+      return meta
+        ? meta.error
+        : this.$t('COMPONENTS.MESSAGE_BUBBLE.ERROR_MESSAGE');
+    },
+    hasReplyTo() {
+      return this.replyTo && (this.replyTo.content || this.replyTo.attachments);
+    },
+  },
+  watch: {
+    message() {
+      this.hasImageError = false;
+      this.hasVideoError = false;
+    },
+  },
+  mounted() {
+    this.hasImageError = false;
+    this.hasVideoError = false;
+  },
+  methods: {
+    async retrySendMessage() {
+      await this.$store.dispatch(
+        'conversation/sendMessageWithData',
+        this.message
+      );
+    },
+    onImageLoadError() {
+      this.hasImageError = true;
+    },
+    onVideoLoadError() {
+      this.hasVideoError = true;
+    },
+    toggleReply() {
+      emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.message);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="user-message-wrap group">
+    <div class="flex gap-1 user-message">
+      <div
+        class="message-wrap"
+        :class="{ 'in-progress': isInProgress, 'is-failed': isFailed }"
+      >
+        <div v-if="hasReplyTo" class="flex justify-end mt-2 mb-1 text-xs">
+          <ReplyToChip :reply-to="replyTo" />
+        </div>
+        <div class="flex justify-end gap-1">
+          <div class="flex flex-col justify-end">
+            <MessageReplyButton
+              v-if="!isInProgress && !isFailed"
+              class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
+              @click="toggleReply"
+            />
+          </div>
+          <DragWrapper direction="left" @dragged="toggleReply">
+            <UserMessageBubble
+              v-if="showTextBubble"
+              :message="message.content"
+              :status="message.status"
+              :widget-color="widgetColor"
+            />
+            <div
+              v-if="hasAttachments"
+              class="chat-bubble has-attachment user"
+              :style="{ backgroundColor: widgetColor }"
+            >
+              <div
+                v-for="attachment in message.attachments"
+                :key="attachment.id"
+              >
+                <ImageBubble
+                  v-if="attachment.file_type === 'image' && !hasImageError"
+                  :url="attachment.data_url"
+                  :thumb="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onImageLoadError"
+                />
+
+                <VideoBubble
+                  v-if="attachment.file_type === 'video' && !hasVideoError"
+                  :url="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onVideoLoadError"
+                />
+
+                <FileBubble
+                  v-else
+                  :url="attachment.data_url"
+                  :is-in-progress="isInProgress"
+                  :widget-color="widgetColor"
+                  is-user-bubble
+                />
+              </div>
+            </div>
+          </DragWrapper>
+        </div>
+        <div
+          v-if="isFailed"
+          class="flex justify-end px-4 py-2 text-n-ruby-9 align-middle"
+        >
+          <button
+            v-if="!hasAttachments"
+            :title="$t('COMPONENTS.MESSAGE_BUBBLE.RETRY')"
+            class="inline-flex items-center justify-center ltr:ml-2 rtl:mr-2"
+            @click="retrySendMessage"
+          >
+            <FluentIcon icon="arrow-clockwise" size="14" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/UserMessageBubble.vue

@@ -0,0 +1,61 @@
+<script>
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import { getContrastingTextColor } from '@chatwoot/utils';
+
+export default {
+  name: 'UserMessageBubble',
+  props: {
+    message: {
+      type: String,
+      default: '',
+    },
+    widgetColor: {
+      type: String,
+      default: '',
+    },
+  },
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
+  computed: {
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-dompurify-html="formatMessage(message, false)"
+    class="chat-bubble user"
+    :style="{ background: widgetColor, color: textColor }"
+  />
+</template>
+
+<style lang="scss" scoped>
+.chat-bubble.user::v-deep {
+  p code {
+    @apply bg-n-alpha-2 dark:bg-n-alpha-1 text-white;
+  }
+
+  pre {
+    @apply text-white bg-n-alpha-2 dark:bg-n-alpha-1;
+
+    code {
+      @apply bg-transparent text-white;
+    }
+  }
+
+  blockquote {
+    @apply bg-transparent border-n-slate-7 ltr:border-l-2 rtl:border-r-2 border-solid;
+
+    p {
+      @apply text-n-slate-5 dark:text-n-slate-12/90;
+    }
+  }
+}
+</style>

research/chatwoot/app/javascript/widget/components/VideoBubble.vue

@@ -0,0 +1,28 @@
+<script setup>
+defineProps({
+  url: { type: String, default: '' },
+  readableTime: { type: String, default: '' },
+});
+
+const emit = defineEmits(['error']);
+
+const onVideoError = () => {
+  emit('error');
+};
+</script>
+
+<template>
+  <div class="relative block max-w-full">
+    <video
+      class="w-full max-w-[250px] h-auto"
+      :src="url"
+      controls
+      @error="onVideoError"
+    />
+    <span
+      class="absolute text-xs text-white dark:text-white right-3 bottom-1 whitespace-nowrap"
+    >
+      {{ readableTime }}
+    </span>
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/layouts/ViewWithHeader.vue

@@ -0,0 +1,144 @@
+<script>
+import Banner from '../Banner.vue';
+import Branding from 'shared/components/Branding.vue';
+import ChatHeader from '../ChatHeader.vue';
+import ChatHeaderExpanded from '../ChatHeaderExpanded.vue';
+import configMixin from '../../mixins/configMixin';
+import { mapGetters } from 'vuex';
+import { IFrameHelper } from 'widget/helpers/utils';
+
+export default {
+  components: {
+    Banner,
+    Branding,
+    ChatHeader,
+    ChatHeaderExpanded,
+  },
+  mixins: [configMixin],
+  data() {
+    return {
+      showPopoutButton: false,
+      scrollPosition: 0,
+      ticking: true,
+      disableBranding: window.chatwootWebChannel.disableBranding || false,
+      requestID: null,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      appConfig: 'appConfig/getAppConfig',
+      availableAgents: 'agent/availableAgents',
+    }),
+    portal() {
+      return window.chatwootWebChannel.portal;
+    },
+    isHeaderCollapsed() {
+      if (!this.hasIntroText) {
+        return true;
+      }
+      return !this.isOnHomeView;
+    },
+    hasIntroText() {
+      return (
+        this.channelConfig.welcomeTitle || this.channelConfig.welcomeTagline
+      );
+    },
+    showBackButton() {
+      return ['article-viewer', 'messages', 'prechat-form'].includes(
+        this.$route.name
+      );
+    },
+    isOnArticleViewer() {
+      return ['article-viewer'].includes(this.$route.name);
+    },
+    isOnHomeView() {
+      return ['home'].includes(this.$route.name);
+    },
+    opacityClass() {
+      if (this.isHeaderCollapsed) {
+        return {};
+      }
+      if (this.scrollPosition > 30) {
+        return { 'opacity-30': true };
+      }
+      if (this.scrollPosition > 25) {
+        return { 'opacity-40': true };
+      }
+      if (this.scrollPosition > 20) {
+        return { 'opacity-60': true };
+      }
+      if (this.scrollPosition > 15) {
+        return { 'opacity-80': true };
+      }
+      if (this.scrollPosition > 10) {
+        return { 'opacity-90': true };
+      }
+      return {};
+    },
+  },
+  mounted() {
+    this.$el.addEventListener('scroll', this.updateScrollPosition);
+  },
+  unmounted() {
+    this.$el.removeEventListener('scroll', this.updateScrollPosition);
+    cancelAnimationFrame(this.requestID);
+  },
+  methods: {
+    closeWindow() {
+      IFrameHelper.sendMessage({ event: 'closeWindow' });
+    },
+    updateScrollPosition(event) {
+      this.scrollPosition = event.target.scrollTop;
+      if (!this.ticking) {
+        this.requestID = window.requestAnimationFrame(() => {
+          this.ticking = false;
+        });
+
+        this.ticking = true;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="w-full h-full bg-n-slate-2 dark:bg-n-solid-1"
+    :class="{ 'overflow-auto': isOnHomeView }"
+    @keydown.esc="closeWindow"
+  >
+    <div class="relative flex flex-col h-full">
+      <div
+        :class="{
+          expanded: !isHeaderCollapsed,
+          collapsed: isHeaderCollapsed,
+          'shadow-[0_10px_15px_-16px_rgba(50,50,93,0.08),0_4px_6px_-8px_rgba(50,50,93,0.04)]':
+            isHeaderCollapsed,
+          ...opacityClass,
+        }"
+      >
+        <ChatHeaderExpanded
+          v-if="!isHeaderCollapsed"
+          :intro-heading="appConfig.welcomeTitle || channelConfig.welcomeTitle"
+          :intro-body="
+            appConfig.welcomeDescription || channelConfig.welcomeTagline
+          "
+          :avatar-url="channelConfig.avatarUrl"
+          :show-popout-button="appConfig.showPopoutButton"
+        />
+        <ChatHeader
+          v-if="isHeaderCollapsed"
+          :title="channelConfig.websiteName"
+          :avatar-url="channelConfig.avatarUrl"
+          :show-popout-button="appConfig.showPopoutButton"
+          :available-agents="availableAgents"
+          :show-back-button="showBackButton"
+        />
+      </div>
+      <Banner />
+      <router-view />
+
+      <Branding v-if="!isOnArticleViewer" :disable-branding="disableBranding" />
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/pageComponents/Home/Article/ArticleBlock.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import ArticleListItem from './ArticleListItem.vue';
+import { useMapGetter } from 'dashboard/composables/store';
+
+const props = defineProps({
+  articles: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['view', 'viewAll']);
+
+const widgetColor = useMapGetter('appConfig/getWidgetColor');
+
+const articlesToDisplay = computed(() => props.articles.slice(0, 6));
+
+const onArticleClick = link => {
+  emit('view', link);
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <h3 class="font-medium text-n-slate-12">
+      {{ $t('PORTAL.POPULAR_ARTICLES') }}
+    </h3>
+    <div class="flex flex-col gap-4">
+      <ArticleListItem
+        v-for="article in articlesToDisplay"
+        :key="article.slug"
+        :link="article.link"
+        :title="article.title"
+        @select-article="onArticleClick"
+      />
+    </div>
+    <div>
+      <button
+        class="font-medium tracking-wide inline-flex"
+        :style="{ color: widgetColor }"
+        @click="$emit('viewAll')"
+      >
+        <span>{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
+      </button>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/pageComponents/Home/Article/ArticleContainer.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { computed, onMounted, watch } from 'vue';
+import ArticleBlock from 'widget/components/pageComponents/Home/Article/ArticleBlock.vue';
+import ArticleCardSkeletonLoader from 'widget/components/pageComponents/Home/Article/SkeletonLoader.vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStore } from 'dashboard/composables/store';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
+import { getMatchingLocale } from 'shared/helpers/portalHelper';
+
+const store = useStore();
+const router = useRouter();
+const i18n = useI18n();
+const { prefersDarkMode } = useDarkMode();
+
+const portal = computed(() => window.chatwootWebChannel.portal);
+
+const popularArticles = useMapGetter('article/popularArticles');
+const articleUiFlags = useMapGetter('article/uiFlags');
+
+const locale = computed(() => {
+  const { locale: selectedLocale } = i18n;
+
+  if (!portal.value || !portal.value.config) return null;
+
+  const { allowed_locales: allowedLocales } = portal.value.config;
+  return getMatchingLocale(selectedLocale.value, allowedLocales);
+});
+
+const fetchArticles = () => {
+  if (portal.value && locale.value) {
+    store.dispatch('article/fetch', {
+      slug: portal.value.slug,
+      locale: locale.value,
+    });
+  }
+};
+
+const openArticleInArticleViewer = link => {
+  const params = new URLSearchParams({
+    show_plain_layout: 'true',
+    theme: prefersDarkMode.value ? 'dark' : 'light',
+    ...(locale.value && { locale: locale.value }),
+  });
+
+  // Combine link with query parameters
+  const linkToOpen = `${link}?${params.toString()}`;
+  router.push({ name: 'article-viewer', query: { link: linkToOpen } });
+};
+
+const viewAllArticles = () => {
+  const {
+    portal: { slug },
+  } = window.chatwootWebChannel;
+  openArticleInArticleViewer(`/hc/${slug}/${locale.value}`);
+};
+
+const hasArticles = computed(
+  () =>
+    !articleUiFlags.value.isFetching &&
+    !articleUiFlags.value.isError &&
+    !!popularArticles.value.length &&
+    !!locale.value
+);
+
+// Watch for locale changes and refetch articles
+watch(locale, (newLocale, oldLocale) => {
+  if (newLocale && newLocale !== oldLocale) {
+    fetchArticles();
+  }
+});
+
+onMounted(() => fetchArticles());
+</script>
+
+<template>
+  <div
+    v-if="portal && (articleUiFlags.isFetching || !!popularArticles.length)"
+    class="w-full shadow outline-1 outline outline-n-container rounded-xl bg-n-background dark:bg-n-solid-2 px-5 py-4"
+  >
+    <ArticleBlock
+      v-if="hasArticles"
+      :articles="popularArticles"
+      @view="openArticleInArticleViewer"
+      @view-all="viewAllArticles"
+    />
+    <ArticleCardSkeletonLoader v-if="articleUiFlags.isFetching" />
+  </div>
+  <div v-else class="hidden" />
+</template>

research/chatwoot/app/javascript/widget/components/pageComponents/Home/Article/ArticleListItem.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+const props = defineProps({
+  link: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['selectArticle']);
+const onClick = () => {
+  emit('selectArticle', props.link);
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between rounded cursor-pointer text-n-slate-11 hover:text-n-slate-12 gap-2"
+    role="button"
+    @click="onClick"
+  >
+    <button
+      class="underline-offset-2 leading-6 ltr:text-left rtl:text-right text-base"
+    >
+      {{ title }}
+    </button>
+    <span class="i-lucide-chevron-right text-base shrink-0" />
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/pageComponents/Home/Article/SkeletonLoader.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="py-4 space-y-4">
+    <div class="space-y-2 animate-pulse">
+      <div class="h-6 bg-n-slate-5 dark:bg-n-alpha-black1 rounded w-2/5" />
+    </div>
+    <div class="space-y-2 animate-pulse">
+      <div class="h-4 bg-n-slate-5 dark:bg-n-alpha-black1 rounded" />
+      <div class="h-4 bg-n-slate-5 dark:bg-n-alpha-black1 rounded" />
+      <div class="h-4 bg-n-slate-5 dark:bg-n-alpha-black1 rounded" />
+    </div>
+    <div class="space-y-2 animate-pulse">
+      <div class="h-4 bg-n-slate-5 dark:bg-n-alpha-black1 rounded w-1/5" />
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/template/Article.vue

@@ -0,0 +1,51 @@
+<script>
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
+export default {
+  components: {
+    FluentIcon,
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup() {
+    const { truncateMessage } = useMessageFormatter();
+    return { truncateMessage };
+  },
+};
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <div
+    v-if="!!items.length"
+    class="chat-bubble agent bg-n-background dark:bg-n-solid-3"
+  >
+    <div
+      v-for="item in items"
+      :key="item.link"
+      class="border-b border-solid border-n-weak text-sm py-2 px-0 last:border-b-0"
+    >
+      <a
+        :href="item.link"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+        class="text-n-slate-12 no-underline"
+      >
+        <span class="flex items-center text-n-slate-12 font-medium">
+          <FluentIcon icon="link" class="ltr:mr-1 rtl:ml-1 text-n-slate-12" />
+          <span class="text-n-slate-12">
+            {{ item.title }}
+          </span>
+        </span>
+        <span class="block mt-1 text-n-slate-12">
+          {{ truncateMessage(item.description) }}
+        </span>
+      </a>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/widget/components/template/EmailInput.vue

@@ -0,0 +1,131 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
+import { required, email } from '@vuelidate/validators';
+import { getContrastingTextColor } from '@chatwoot/utils';
+
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import Spinner from 'shared/components/Spinner.vue';
+
+export default {
+  components: {
+    FluentIcon,
+    Spinner,
+  },
+  props: {
+    messageId: {
+      type: Number,
+      required: true,
+    },
+    messageContentAttributes: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      email: '',
+      isUpdating: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
+    hasSubmitted() {
+      return (
+        this.messageContentAttributes &&
+        this.messageContentAttributes.submitted_email
+      );
+    },
+  },
+  validations: {
+    email: {
+      required,
+      email,
+    },
+  },
+  methods: {
+    async onSubmit() {
+      if (this.v$.$invalid) {
+        return;
+      }
+      this.isUpdating = true;
+      try {
+        await this.$store.dispatch('message/update', {
+          email: this.email,
+          messageId: this.messageId,
+        });
+      } catch (error) {
+        // Ignore error
+      } finally {
+        this.isUpdating = false;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <form
+      v-if="!hasSubmitted"
+      class="email-input-group h-10 flex my-2 mx-0 min-w-[200px]"
+      @submit.prevent="onSubmit"
+    >
+      <input
+        v-model="email"
+        type="email"
+        :placeholder="$t('EMAIL_PLACEHOLDER')"
+        :class="{ error: v$.email.$error }"
+        @input="v$.email.$touch"
+        @keydown.enter="onSubmit"
+      />
+      <button
+        class="button small"
+        :disabled="v$.email.$invalid"
+        :style="{
+          background: widgetColor,
+          borderColor: widgetColor,
+          color: textColor,
+        }"
+      >
+        <FluentIcon v-if="!isUpdating" icon="chevron-right" />
+        <Spinner v-else class="mx-2" />
+      </button>
+    </form>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.email-input-group {
+  input {
+    @apply dark:bg-n-alpha-black1 rtl:rounded-tl-[0] ltr:rounded-tr-[0] rtl:rounded-bl-[0] ltr:rounded-br-[0] p-2.5 w-full focus:ring-0 focus:outline-n-brand;
+
+    &::placeholder {
+      @apply text-n-slate-10;
+    }
+
+    &.error {
+      @apply outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9;
+    }
+  }
+
+  .button {
+    @apply rtl:rounded-tr-[0] ltr:rounded-tl-[0] rtl:rounded-br-[0] ltr:rounded-bl-[0] rounded-lg h-auto ltr:-ml-px rtl:-mr-px text-xl;
+
+    .spinner {
+      display: block;
+      padding: 0;
+      height: auto;
+      width: auto;
+    }
+  }
+}
+</style>

research/chatwoot/app/javascript/widget/components/template/IntegrationCard.vue

@@ -0,0 +1,108 @@
+<script>
+import IntegrationAPIClient from 'widget/api/integration';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
+import { getContrastingTextColor } from '@chatwoot/utils';
+import { mapGetters } from 'vuex';
+
+export default {
+  components: {
+    FluentIcon,
+  },
+  props: {
+    messageId: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return { isLoading: false, dyteAuthToken: '', isSDKMounted: false };
+  },
+  computed: {
+    ...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
+    meetingLink() {
+      return buildDyteURL(this.dyteAuthToken);
+    },
+  },
+  methods: {
+    async joinTheCall() {
+      this.isLoading = true;
+      try {
+        const response = await IntegrationAPIClient.addParticipantToDyteMeeting(
+          this.messageId
+        );
+        const { data: { token } = {} } = response;
+        this.dyteAuthToken = token;
+      } catch (error) {
+        // Ignore Error for now
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    leaveTheRoom() {
+      this.dyteAuthToken = '';
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <button
+      class="button join-call-button"
+      color-scheme="secondary"
+      :is-loading="isLoading"
+      :style="{
+        background: widgetColor,
+        borderColor: widgetColor,
+        color: textColor,
+      }"
+      @click="joinTheCall"
+    >
+      <FluentIcon icon="video-add" class="rtl:ml-2 ltr:mr-2" />
+      {{ $t('INTEGRATIONS.DYTE.CLICK_HERE_TO_JOIN') }}
+    </button>
+    <div v-if="dyteAuthToken" class="video-call--container">
+      <iframe
+        :src="meetingLink"
+        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
+      />
+      <button
+        class="button small join-call-button leave-room-button"
+        @click="leaveTheRoom"
+      >
+        {{ $t('INTEGRATIONS.DYTE.LEAVE_THE_ROOM') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.video-call--container {
+  position: fixed;
+  top: 72px;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  z-index: 100;
+
+  iframe {
+    width: 100%;
+    height: calc(100% - 72px);
+
+    border: 0;
+  }
+}
+
+.join-call-button {
+  @apply flex items-center my-2 rounded-lg;
+}
+
+.leave-room-button {
+  @apply absolute top-0 ltr:right-2 rtl:left-2 px-1 rounded-md;
+}
+</style>