Fix eslint

feat: remove email

.github/workflows/publish_foss_docker.yml

@@ -12,7 +12,6 @@ on:
       - master
     tags:
       - v*
-# pull_request:
   workflow_dispatch:
 
 jobs:
@@ -41,9 +40,7 @@ jobs:
 
       - name: set docker tag
         run: |
-          # Replace forward slashes with hyphens in the ref name
-          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
-          echo "DOCKER_TAG=chatwoot/chatwoot:$SANITIZED_REF-ce" >> $GITHUB_ENV
+          echo "DOCKER_TAG=chatwoot/chatwoot:$GIT_REF-ce" >> $GITHUB_ENV
 
       - name: replace docker tag if master
         if: github.ref_name == 'master'
@@ -51,7 +48,6 @@ jobs:
           echo "DOCKER_TAG=chatwoot/chatwoot:latest-ce" >> $GITHUB_ENV
 
       - name: Login to DockerHub
-        if: github.event_name == 'push' || github.event_name == 'workflow_dispatch'
         uses: docker/login-action@v1
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
@@ -62,6 +58,6 @@ jobs:
         with:
           context: .
           file: docker/Dockerfile
-          platforms: linux/amd64, linux/arm64
-          push: ${{ github.event_name == 'push' || github.event_name == 'workflow_dispatch' }}
+          platforms: linux/amd64
+          push: true
           tags: ${{ env.DOCKER_TAG }}

app/javascript/dashboard/components-next/copilot/Copilot.vue

@@ -18,10 +18,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  conversationInboxType: {
-    type: String,
-    required: true,
-  },
 });
 
 const emit = defineEmits(['sendMessage']);
@@ -51,7 +47,7 @@ watch(
 
 <template>
   <div class="flex flex-col ]mx-auto h-full text-sm leading-6 tracking-tight">
-    <div ref="chatContainer" class="flex-1 px-4 py-4 space-y-6 overflow-y-auto">
+    <div ref="chatContainer" class="flex-1 overflow-y-auto py-4 space-y-6 px-4">
       <template v-for="message in messages" :key="message.id">
         <CopilotAgentMessage
           v-if="message.role === 'user'"
@@ -61,13 +57,12 @@ watch(
         <CopilotAssistantMessage
           v-else-if="COPILOT_USER_ROLES.includes(message.role)"
           :message="message"
-          :conversation-inbox-type="conversationInboxType"
         />
       </template>
 
       <CopilotLoader v-if="isCaptainTyping" />
     </div>
 
-    <CopilotInput class="mx-3 mt-px mb-4" @send="sendMessage" />
+    <CopilotInput class="mx-3 mb-4 mt-px" @send="sendMessage" />
   </div>
 </template>

app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue

@@ -1,36 +1,12 @@
 <script setup>
-import { computed } from 'vue';
-import { emitter } from 'shared/helpers/mitt';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
-
-import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from '../avatar/Avatar.vue';
 
-const props = defineProps({
+defineProps({
   message: {
     type: Object,
     required: true,
   },
-  conversationInboxType: {
-    type: String,
-    required: true,
-  },
 });
-
-const insertIntoRichEditor = computed(() => {
-  return [INBOX_TYPES.WEB, INBOX_TYPES.EMAIL].includes(
-    props.conversationInboxType
-  );
-});
-
-const useCopilotResponse = () => {
-  if (insertIntoRichEditor.value) {
-    emitter.emit(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, props.message?.content);
-  } else {
-    emitter.emit(BUS_EVENTS.INSERT_INTO_NORMAL_EDITOR, props.message?.content);
-  }
-};
 </script>
 
 <template>
@@ -46,15 +22,6 @@ const useCopilotResponse = () => {
       <div class="break-words">
         {{ message.content }}
       </div>
-      <div class="flex flex-row mt-1">
-        <Button
-          :label="$t('CAPTAIN.COPILOT.USE')"
-          faded
-          sm
-          slate
-          @click="useCopilotResponse"
-        />
-      </div>
     </div>
   </div>
 </template>

app/javascript/dashboard/components-next/message/Message.vue

@@ -1,12 +1,6 @@
 <script setup>
-import { computed, ref, defineAsyncComponent } from 'vue';
+import { computed, defineAsyncComponent } from 'vue';
 import { provideMessageContext } from './provider.js';
-import { useTrack } from 'dashboard/composables';
-import { emitter } from 'shared/helpers/mitt';
-import { LocalStorage } from 'shared/helpers/localStorage';
-import { ACCOUNT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
   MESSAGE_TYPES,
   ATTACHMENT_TYPES,
@@ -14,7 +8,6 @@ import {
   SENDER_TYPES,
   ORIENTATION,
   MESSAGE_STATUS,
-  CONTENT_TYPES,
 } from './constants';
 
 import Avatar from 'next/avatar/Avatar.vue';
@@ -37,7 +30,6 @@ const LocationBubble = defineAsyncComponent(
 
 import MessageError from './MessageError.vue';
 import MessageMeta from './MessageMeta.vue';
-import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu.vue';
 
 /**
  * @typedef {Object} Attachment
@@ -73,7 +65,7 @@ import ContextMenu from 'dashboard/modules/conversations/components/MessageConte
 
 /**
  * @typedef {Object} Props
- * @property {('sent'|'delivered'|'read'|'failed'|'progress')} status - The delivery status of the message
+ * @property {('sent'|'delivered'|'read'|'failed')} status - The delivery status of the message
  * @property {ContentAttributes} [contentAttributes={}] - Additional attributes of the message content
  * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
  * @property {Sender|null} [sender=null] - The sender information
@@ -86,11 +78,6 @@ import ContextMenu from 'dashboard/modules/conversations/components/MessageConte
  * @property {string|null} [error=null] - Error message if the message failed to send
  * @property {string|null} [senderType=null] - The type of the sender
  * @property {string} content - The message content
- * @property {boolean} [groupWithNext=false] - Whether the message should be grouped with the next message
- * @property {Object|null} [inReplyTo=null] - The message to which this message is a reply
- * @property {boolean} [isEmailInbox=false] - Whether the message is from an email inbox
- * @property {number} conversationId - The ID of the conversation to which the message belongs
- * @property {number} inboxId - The ID of the inbox to which the message belongs
  */
 
 // eslint-disable-next-line vue/define-macros-order
@@ -106,51 +93,70 @@ const props = defineProps({
     required: true,
     validator: value => Object.values(MESSAGE_STATUS).includes(value),
   },
-  attachments: { type: Array, default: () => [] },
-  content: { type: String, default: null },
-  contentAttributes: { type: Object, default: () => ({}) },
-  contentType: {
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+  private: {
+    type: Boolean,
+    default: false,
+  },
+  createdAt: {
+    type: Number,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: null,
+  },
+  senderId: {
+    type: Number,
+    default: null,
+  },
+  senderType: {
     type: String,
-    default: 'text',
-    validator: value => Object.values(CONTENT_TYPES).includes(value),
+    default: null,
+  },
+  content: {
+    type: String,
+    required: true,
+  },
+  contentAttributes: {
+    type: Object,
+    default: () => {},
+  },
+  currentUserId: {
+    type: Number,
+    required: true,
+  },
+  groupWithNext: {
+    type: Boolean,
+    default: false,
+  },
+  inReplyTo: {
+    type: Object,
+    default: null,
+  },
+  isEmailInbox: {
+    type: Boolean,
+    default: false,
   },
-  conversationId: { type: Number, required: true },
-  createdAt: { type: Number, required: true },
-  currentUserId: { type: Number, required: true },
-  groupWithNext: { type: Boolean, default: false },
-  inboxId: { type: Number, required: true },
-  inboxSupportsReplyTo: { type: Object, default: () => ({}) },
-  inReplyTo: { type: Object, default: null },
-  isEmailInbox: { type: Boolean, default: false },
-  private: { type: Boolean, default: false },
-  sender: { type: Object, default: null },
-  senderId: { type: Number, default: null },
-  senderType: { type: String, default: null },
-  sourceId: { type: String, default: '' },
 });
 
-const contextMenuPosition = ref({});
-const showContextMenu = ref(false);
 /**
  * Computes the message variant based on props
  * @type {import('vue').ComputedRef<'user'|'agent'|'activity'|'private'|'bot'|'template'>}
  */
 const variant = computed(() => {
   if (props.private) return MESSAGE_VARIANTS.PRIVATE;
-
   if (props.isEmailInbox) {
     const emailInboxTypes = [MESSAGE_TYPES.INCOMING, MESSAGE_TYPES.OUTGOING];
     if (emailInboxTypes.includes(props.messageType)) {
       return MESSAGE_VARIANTS.EMAIL;
     }
   }
-
-  if (props.contentType === CONTENT_TYPES.INCOMING_EMAIL) {
-    return MESSAGE_VARIANTS.EMAIL;
-  }
-
   if (props.status === MESSAGE_STATUS.FAILED) return MESSAGE_VARIANTS.ERROR;
-  if (props.contentAttributes?.isUnsupported)
+  if (props.contentAttributes.isUnsupported)
     return MESSAGE_VARIANTS.UNSUPPORTED;
 
   const variants = {
@@ -164,20 +170,10 @@ const variant = computed(() => {
 });
 
 const isMyMessage = computed(() => {
-  // if an outgoing message is still processing, then it's definitely a
-  // message sent by the current user
-  if (
-    props.status === MESSAGE_STATUS.PROGRESS &&
-    props.messageType === MESSAGE_TYPES.OUTGOING
-  ) {
-    return true;
-  }
   const senderId = props.senderId ?? props.sender?.id;
   const senderType = props.senderType ?? props.sender?.type;
 
-  if (!senderType || !senderId) {
-    return false;
-  }
+  if (!senderType || !senderId) return false;
 
   return (
     senderType.toLowerCase() === SENDER_TYPES.USER.toLowerCase() &&
@@ -252,11 +248,7 @@ const componentToRender = computed(() => {
     if (emailInboxTypes.includes(props.messageType)) return EmailBubble;
   }
 
-  if (props.contentType === CONTENT_TYPES.INCOMING_EMAIL) {
-    return EmailBubble;
-  }
-
-  if (props.contentAttributes?.isUnsupported) {
+  if (props.contentAttributes.isUnsupported) {
     return UnsupportedBubble;
   }
 
@@ -268,7 +260,7 @@ const componentToRender = computed(() => {
     return InstagramStoryBubble;
   }
 
-  if (Array.isArray(props.attachments) && props.attachments.length === 1) {
+  if (props.attachments.length === 1) {
     const fileType = props.attachments[0].fileType;
 
     if (!props.content) {
@@ -283,88 +275,13 @@ const componentToRender = computed(() => {
     if (fileType === ATTACHMENT_TYPES.CONTACT) return ContactBubble;
   }
 
-  if (
-    Array.isArray(props.attachments) &&
-    props.attachments.length > 1 &&
-    !props.content
-  ) {
+  if (props.attachments.length > 1 && !props.content) {
     return AttachmentsBubble;
   }
 
   return TextBubble;
 });
 
-const shouldShowContextMenu = computed(() => {
-  return !(
-    props.status === MESSAGE_STATUS.FAILED ||
-    props.status === MESSAGE_STATUS.PROGRESS ||
-    props.contentAttributes?.isUnsupported
-  );
-});
-
-const isBubble = computed(() => {
-  return props.messageType !== MESSAGE_TYPES.ACTIVITY;
-});
-
-const isMessageDeleted = computed(() => {
-  return props.contentAttributes?.deleted;
-});
-
-const payloadForContextMenu = computed(() => {
-  return {
-    id: props.id,
-    content_attributes: props.contentAttributes,
-    content: props.content,
-    conversation_id: props.conversationId,
-  };
-});
-
-const contextMenuEnabledOptions = computed(() => {
-  const hasText = !!props.content;
-  const hasAttachments = !!(props.attachments && props.attachments.length > 0);
-
-  const isOutgoing = props.messageType === MESSAGE_TYPES.OUTGOING;
-
-  return {
-    copy: hasText,
-    delete: hasText || hasAttachments,
-    cannedResponse: isOutgoing && hasText,
-    replyTo: !props.private && props.inboxSupportsReplyTo.outgoing,
-  };
-});
-
-function openContextMenu(e) {
-  const shouldSkipContextMenu =
-    e.target?.classList.contains('skip-context-menu') ||
-    e.target?.tagName.toLowerCase() === 'a';
-  if (shouldSkipContextMenu || getSelection().toString()) {
-    return;
-  }
-
-  e.preventDefault();
-  if (e.type === 'contextmenu') {
-    useTrack(ACCOUNT_EVENTS.OPEN_MESSAGE_CONTEXT_MENU);
-  }
-  contextMenuPosition.value = {
-    x: e.pageX || e.clientX,
-    y: e.pageY || e.clientY,
-  };
-  showContextMenu.value = true;
-}
-
-function closeContextMenu() {
-  showContextMenu.value = false;
-  contextMenuPosition.value = { x: null, y: null };
-}
-
-function handleReplyTo() {
-  const replyStorageKey = LOCAL_STORAGE_KEYS.MESSAGE_REPLY_TO;
-  const { conversationId, id: replyTo } = props;
-
-  LocalStorage.updateJsonStore(replyStorageKey, conversationId, replyTo);
-  emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, props);
-}
-
 provideMessageContext({
   variant,
   inReplyTo: props.inReplyTo,
@@ -375,7 +292,6 @@ provideMessageContext({
 
 <template>
   <div
-    :id="`message${props.id}`"
     class="flex w-full"
     :data-message-id="props.id"
     :class="[flexOrientationClass, shouldGroupWithNext ? 'mb-2' : 'mb-4']"
@@ -408,11 +324,10 @@ provideMessageContext({
         />
       </div>
       <div
-        class="[grid-area:bubble] flex"
+        class="[grid-area:bubble]"
         :class="{
           'pl-9': ORIENTATION.RIGHT === orientation,
         }"
-        @contextmenu="openContextMenu($event)"
       >
         <Component :is="componentToRender" v-bind="props" />
       </div>
@@ -429,22 +344,8 @@ provideMessageContext({
         :sender="props.sender"
         :status="props.status"
         :private="props.private"
-        :message-type="props.messageType"
+        :is-my-message="isMyMessage"
         :created-at="props.createdAt"
-        :source-id="props.sourceId"
-      />
-    </div>
-    <div v-if="shouldShowContextMenu" class="context-menu-wrap">
-      <ContextMenu
-        v-if="isBubble && !isMessageDeleted"
-        :context-menu-position="contextMenuPosition"
-        :is-open="showContextMenu"
-        :enabled-options="contextMenuEnabledOptions"
-        :message="payloadForContextMenu"
-        hide-button
-        @open="openContextMenu"
-        @close="closeContextMenu"
-        @reply-to="handleReplyTo"
       />
     </div>
   </div>

app/javascript/dashboard/components-next/message/MessageList.vue

@@ -1,146 +0,0 @@
-<script setup>
-import { defineProps, computed } from 'vue';
-import Message from './Message.vue';
-import { useCamelCase } from 'dashboard/composables/useTransformKeys';
-
-/**
- * Props definition for the component
- * @typedef {Object} Props
- * @property {Array} readMessages - Array of read messages
- * @property {Array} unReadMessages - Array of unread messages
- * @property {Number} currentUserId - ID of the current user
- * @property {Boolean} isAnEmailChannel - Whether this is an email channel
- * @property {Object} inboxSupportsReplyTo - Inbox reply support configuration
- * @property {Array} messages - Array of all messages
- */
-const props = defineProps({
-  readMessages: {
-    type: Array,
-    default: () => [],
-  },
-  unReadMessages: {
-    type: Array,
-    default: () => [],
-  },
-  currentUserId: {
-    type: Number,
-    required: true,
-  },
-  isAnEmailChannel: {
-    type: Boolean,
-    default: false,
-  },
-  inboxSupportsReplyTo: {
-    type: Object,
-    default: () => ({ incoming: false, outgoing: false }),
-  },
-  messages: {
-    type: Array,
-    default: () => [],
-  },
-  shouldShowSpinner: {
-    type: Boolean,
-    default: false,
-  },
-  unreadMessageCount: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const unread = computed(() => {
-  return useCamelCase(props.unReadMessages, { deep: true });
-});
-
-const read = computed(() => {
-  return useCamelCase(props.readMessages, { deep: true });
-});
-
-/**
- * Determines if a message should be grouped with the next message
- * @param {Number} index - Index of the current message
- * @param {Array} messages - Array of messages to check
- * @returns {Boolean} - Whether the message should be grouped with next
- */
-const shouldGroupWithNext = (index, messages) => {
-  if (index === messages.length - 1) return false;
-
-  const current = messages[index];
-  const next = messages[index + 1];
-
-  if (next.status === 'failed') return false;
-
-  const nextSenderId = next.senderId ?? next.sender?.id;
-  const currentSenderId = current.senderId ?? current.sender?.id;
-  if (currentSenderId !== nextSenderId) return false;
-
-  // Check if messages are in the same minute by rounding down to nearest minute
-  return Math.floor(next.createdAt / 60) === Math.floor(current.createdAt / 60);
-};
-
-/**
- * Gets the message that was replied to
- * @param {Object} parentMessage - The message containing the reply reference
- * @returns {Object|null} - The message being replied to, or null if not found
- */
-const getInReplyToMessage = parentMessage => {
-  if (!parentMessage) return null;
-
-  const inReplyToMessageId =
-    parentMessage.contentAttributes?.inReplyTo ??
-    parentMessage.content_attributes?.in_reply_to;
-
-  if (!inReplyToMessageId) return null;
-
-  // Find in-reply-to message in the messages prop
-  const replyMessage = props.messages?.find(
-    message => message.id === inReplyToMessageId
-  );
-
-  return replyMessage ? useCamelCase(replyMessage) : null;
-};
-</script>
-
-<template>
-  <ul class="px-4 bg-n-background">
-    <transition name="slide-up">
-      <!-- eslint-disable-next-line vue/require-toggle-inside-transition -->
-      <li class="min-h-[4rem]">
-        <span v-if="shouldShowSpinner" class="spinner message" />
-      </li>
-    </transition>
-    <Message
-      v-for="(message, index) in read"
-      :key="message.id"
-      v-bind="message"
-      :is-email-inbox="isAnEmailChannel"
-      :in-reply-to="getInReplyToMessage(message)"
-      :group-with-next="shouldGroupWithNext(index, readMessages)"
-      :inbox-supports-reply-to="inboxSupportsReplyTo"
-      :current-user-id="currentUserId"
-      data-clarity-mask="True"
-    />
-    <li v-show="unreadMessageCount != 0" class="unread--toast">
-      <span>
-        {{ unreadMessageCount > 9 ? '9+' : unreadMessageCount }}
-        {{
-          unreadMessageCount > 1
-            ? $t('CONVERSATION.UNREAD_MESSAGES')
-            : $t('CONVERSATION.UNREAD_MESSAGE')
-        }}
-      </span>
-    </li>
-    <Message
-      v-for="(message, index) in unread"
-      :key="message.id"
-      v-bind="message"
-      :in-reply-to="getInReplyToMessage(message)"
-      :group-with-next="shouldGroupWithNext(index, unReadMessages)"
-      :inbox-supports-reply-to="inboxSupportsReplyTo"
-      :current-user-id="currentUserId"
-      :is-email-inbox="isAnEmailChannel"
-      data-clarity-mask="True"
-    />
-    <slot name="after" />
-  </ul>
-</template>

app/javascript/dashboard/components-next/message/MessageMeta.vue

@@ -4,9 +4,8 @@ import { messageTimestamp } from 'shared/helpers/timeHelper';
 
 import MessageStatus from './MessageStatus.vue';
 import Icon from 'next/icon/Icon.vue';
-import { useInbox } from 'dashboard/composables/useInbox';
 
-import { MESSAGE_STATUS, MESSAGE_TYPES } from './constants';
+import { MESSAGE_STATUS } from './constants';
 
 /**
  * @typedef {Object} Sender
@@ -44,116 +43,21 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  isMyMessage: {
+    type: Boolean,
+    default: false,
+  },
   createdAt: {
     type: Number,
     required: true,
   },
-  sourceId: {
-    type: String,
-    default: '',
-  },
-  messageType: {
-    type: Number,
-    required: true,
-    validator: value => Object.values(MESSAGE_TYPES).includes(value),
-  },
 });
 
-const {
-  isAFacebookInbox,
-  isALineChannel,
-  isAPIInbox,
-  isASmsInbox,
-  isATelegramChannel,
-  isATwilioChannel,
-  isAWebWidgetInbox,
-  isAWhatsAppChannel,
-  isAnEmailChannel,
-} = useInbox();
-
 const readableTime = computed(() =>
   messageTimestamp(props.createdAt, 'LLL d, h:mm a')
 );
 
 const showSender = computed(() => !props.isMyMessage && props.sender);
-
-const showStatusIndicator = computed(() => {
-  if (props.private) return false;
-  if (props.messageType === MESSAGE_TYPES.OUTGOING) return true;
-  if (props.messageType === MESSAGE_TYPES.TEMPLATE) return true;
-
-  return false;
-});
-
-const isSent = computed(() => {
-  if (!showStatusIndicator.value) return false;
-
-  // Messages will be marked as sent for the Email channel if they have a source ID.
-  if (isAnEmailChannel.value) return !!props.sourceId;
-
-  if (
-    isAWhatsAppChannel.value ||
-    isATwilioChannel.value ||
-    isAFacebookInbox.value ||
-    isASmsInbox.value ||
-    isATelegramChannel.value
-  ) {
-    return props.sourceId && props.status === MESSAGE_STATUS.SENT;
-  }
-
-  // All messages will be mark as sent for the Line channel, as there is no source ID.
-  if (props.isALineChannel) return true;
-
-  return false;
-});
-
-const isDelivered = computed(() => {
-  if (!showStatusIndicator.value) return false;
-
-  if (
-    isAWhatsAppChannel.value ||
-    isATwilioChannel.value ||
-    isASmsInbox.value ||
-    isAFacebookInbox.value
-  ) {
-    return props.sourceId && props.status === MESSAGE_STATUS.DELIVERED;
-  }
-  // All messages marked as delivered for the web widget inbox and API inbox once they are sent.
-  if (isAWebWidgetInbox.value || isAPIInbox.value) {
-    return props.status === MESSAGE_STATUS.SENT;
-  }
-  if (isALineChannel.value) {
-    return props.status === MESSAGE_STATUS.DELIVERED;
-  }
-
-  return false;
-});
-
-const isRead = computed(() => {
-  if (!showStatusIndicator.value) return false;
-
-  if (
-    isAWhatsAppChannel.value ||
-    isATwilioChannel.value ||
-    isAFacebookInbox.value
-  ) {
-    return props.sourceId && props.status === MESSAGE_STATUS.READ;
-  }
-
-  if (isAWebWidgetInbox.value || isAPIInbox.value) {
-    return props.status === MESSAGE_STATUS.READ;
-  }
-
-  return false;
-});
-
-const statusToShow = computed(() => {
-  if (isRead.value) return MESSAGE_STATUS.READ;
-  if (isDelivered.value) return MESSAGE_STATUS.DELIVERED;
-  if (isSent.value) return MESSAGE_STATUS.SENT;
-
-  return MESSAGE_STATUS.PROGRESS;
-});
 </script>
 
 <template>
@@ -168,6 +72,6 @@ const statusToShow = computed(() => {
       icon="i-lucide-lock-keyhole"
       class="text-n-slate-10 size-3"
     />
-    <MessageStatus v-if="showStatusIndicator" :status="statusToShow" />
+    <MessageStatus v-if="props.isMyMessage" :status />
   </div>
 </template>

app/javascript/dashboard/components-next/message/bubbles/Location.vue

@@ -2,7 +2,7 @@
 import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
 import BaseAttachmentBubble from './BaseAttachment.vue';
 import { useI18n } from 'vue-i18n';
-// import maplibregl from 'maplibre-gl';
+import maplibregl from 'maplibre-gl';
 
 /**
  * @typedef {Object} Attachment
@@ -57,28 +57,28 @@ const mapUrl = computed(
 
 const mapContainer = useTemplateRef('mapContainer');
 
-// const setupMap = () => {
-// const map = new maplibregl.Map({
-//   style: 'https://tiles.openfreemap.org/styles/positron',
-//   center: [long.value, lat.value],
-//   zoom: 15,
-//   container: mapContainer.value,
-//   attributionControl: false,
-//   dragPan: false,
-//   dragRotate: false,
-//   scrollZoom: false,
-//   touchZoom: false,
-//   touchRotate: false,
-//   keyboard: false,
-//   doubleClickZoom: false,
-// });
-// new maplibregl.Marker().setLngLat([long.value, lat.value]).addTo(map);
-// return map;
-// };
+const setupMap = () => {
+  const map = new maplibregl.Map({
+    style: 'https://tiles.openfreemap.org/styles/positron',
+    center: [long.value, lat.value],
+    zoom: 9.5,
+    container: mapContainer.value,
+    attributionControl: false,
+    dragPan: false,
+    dragRotate: false,
+    scrollZoom: false,
+    touchZoom: false,
+    touchRotate: false,
+    keyboard: false,
+    doubleClickZoom: false,
+  });
+
+  return map;
+};
 
 onMounted(async () => {
   await nextTick();
-  // setupMap();
+  setupMap();
 });
 </script>
 

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

@@ -8,10 +8,6 @@ const props = defineProps({
     type: [Number, String],
     required: true,
   },
-  conversationInboxType: {
-    type: String,
-    required: true,
-  },
 });
 const currentUser = useMapGetter('getCurrentUser');
 const messages = ref([]);
@@ -57,7 +53,6 @@ const sendMessage = async message => {
     :messages="messages"
     :support-agent="currentUser"
     :is-captain-typing="isCaptainTyping"
-    :conversation-inbox-type="conversationInboxType"
     @send-message="sendMessage"
   />
 </template>

app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue

@@ -6,7 +6,7 @@ import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.v
 import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
 import { useI18n } from 'vue-i18n';
 
-const props = defineProps({
+defineProps({
   currentChat: {
     required: true,
     type: Object,
@@ -16,13 +16,11 @@ const props = defineProps({
 const emit = defineEmits(['toggleContactPanel']);
 
 const getters = useStoreGetters();
-const { t } = useI18n();
 
 const captainIntegration = computed(() =>
   getters['integrations/getIntegration'].value('captain', null)
 );
-
-const channelType = computed(() => props.currentChat?.meta?.channel || '');
+const { t } = useI18n();
 
 const CONTACT_TABS_OPTIONS = [
   { key: 'CONTACT', value: 'contact' },
@@ -63,7 +61,7 @@ const showCopilotTab = computed(() => {
         @tab-changed="handleTabChange"
       />
     </div>
-    <div class="flex flex-1 overflow-auto">
+    <div class="overflow-auto flex flex-1">
       <ContactPanel
         v-if="!activeTab"
         :conversation-id="currentChat.id"
@@ -73,7 +71,6 @@ const showCopilotTab = computed(() => {
       <CopilotContainer
         v-else-if="activeTab === 1 && showCopilotTab"
         :key="currentChat.id"
-        :conversation-inbox-type="channelType"
         :conversation-id="currentChat.id"
         class="flex-1"
       />

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -4,13 +4,10 @@ import { ref } from 'vue';
 import { useConfig } from 'dashboard/composables/useConfig';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { useAI } from 'dashboard/composables/useAI';
-import { useAccount } from 'dashboard/composables/useAccount';
-import { useCamelCase } from 'dashboard/composables/useTransformKeys';
 
 // components
 import ReplyBox from './ReplyBox.vue';
 import Message from './Message.vue';
-import NextMessage from 'next/message/Message.vue';
 import ConversationLabelSuggestion from './conversation/LabelSuggestion.vue';
 import Banner from 'dashboard/components/ui/Banner.vue';
 
@@ -37,26 +34,9 @@ import { REPLY_POLICY } from 'shared/constants/links';
 import wootConstants from 'dashboard/constants/globals';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 
-function shouldGroupWithNext(index, messages) {
-  if (index === messages.length - 1) return false;
-
-  const current = messages[index];
-  const next = messages[index + 1];
-
-  if (next.status === 'failed') return false;
-
-  const nextSenderId = next.senderId ?? next.sender?.id;
-  const currentSenderId = current.senderId ?? current.sender?.id;
-  if (currentSenderId !== nextSenderId) return false;
-
-  // Check if messages are in the same minute by rounding down to nearest minute
-  return Math.floor(next.createdAt / 60) === Math.floor(current.createdAt / 60);
-}
-
 export default {
   components: {
     Message,
-    NextMessage,
     ReplyBox,
     Banner,
     ConversationLabelSuggestion,
@@ -76,7 +56,6 @@ export default {
   setup() {
     const isPopOutReplyBox = ref(false);
     const { isEnterprise } = useConfig();
-    const { accountId } = useAccount();
 
     const closePopOutReplyBox = () => {
       isPopOutReplyBox.value = false;
@@ -101,10 +80,6 @@ export default {
       fetchLabelSuggestions,
     } = useAI();
 
-    const showNextBubbles = LocalStorage.get(
-      LOCAL_STORAGE_KEYS.USE_NEXT_BUBBLE
-    );
-
     return {
       isEnterprise,
       isPopOutReplyBox,
@@ -114,8 +89,6 @@ export default {
       isLabelSuggestionFeatureEnabled,
       fetchIntegrationsIfRequired,
       fetchLabelSuggestions,
-      accountId,
-      showNextBubbles,
     };
   },
   data() {
@@ -133,7 +106,6 @@ export default {
   computed: {
     ...mapGetters({
       currentChat: 'getSelectedChat',
-      currentUserId: 'getCurrentUserID',
       listLoadingStatus: 'getAllMessagesLoaded',
       currentAccountId: 'getCurrentAccountId',
     }),
@@ -181,28 +153,16 @@ export default {
       return messages;
     },
     readMessages() {
-      const readMessages = getReadMessages(
+      return getReadMessages(
         this.getMessages,
         this.currentChat.agent_last_seen_at
       );
-
-      if (this.showNextBubbles) {
-        return useCamelCase(readMessages, { deep: true });
-      }
-
-      return readMessages;
     },
     unReadMessages() {
-      const unreadMessages = getUnreadMessages(
+      return getUnreadMessages(
         this.getMessages,
         this.currentChat.agent_last_seen_at
       );
-
-      if (this.showNextBubbles) {
-        return useCamelCase(unreadMessages, { deep: true });
-      }
-
-      return unreadMessages;
     },
     shouldShowSpinner() {
       return (
@@ -476,19 +436,11 @@ export default {
     makeMessagesRead() {
       this.$store.dispatch('markMessagesRead', { id: this.currentChat.id });
     },
-    getInReplyToMessage(parentMessage) {
-      // the old implementation took an empty object, but the
-      // new implementation takes null
-      const emptyOption = this.showNextBubbles ? null : {};
 
-      if (!parentMessage) return emptyOption;
-      // to maintain backward compatibility we use both the keys
-      // contentAttributes and content_attributes
-      // TODO: Remove this once we've migrated all the keys to camelCase
-      const inReplyToMessageId =
-        parentMessage.contentAttributes?.inReplyTo ??
-        parentMessage.content_attributes?.in_reply_to;
-      if (!inReplyToMessageId) return emptyOption;
+    getInReplyToMessage(parentMessage) {
+      if (!parentMessage) return {};
+      const inReplyToMessageId = parentMessage.content_attributes?.in_reply_to;
+      if (!inReplyToMessageId) return {};
 
       return this.currentChat?.messages.find(message => {
         if (message.id === inReplyToMessageId) {
@@ -497,7 +449,6 @@ export default {
         return false;
       });
     },
-    shouldGroupWithNext: shouldGroupWithNext,
   },
 };
 </script>
@@ -522,46 +473,28 @@ export default {
         @click="onToggleContactPanel"
       />
     </div>
-    <ul
-      class="conversation-panel"
-      :class="{ 'px-4 bg-n-background': showNextBubbles }"
-    >
+    <ul class="conversation-panel">
       <transition name="slide-up">
         <!-- eslint-disable-next-line vue/require-toggle-inside-transition -->
         <li class="min-h-[4rem]">
           <span v-if="shouldShowSpinner" class="spinner message" />
         </li>
       </transition>
-      <template v-if="showNextBubbles">
-        <NextMessage
-          v-for="(message, index) in readMessages"
-          :key="message.id"
-          v-bind="message"
-          :is-email-inbox="isAnEmailChannel"
-          :in-reply-to="getInReplyToMessage(message)"
-          :group-with-next="shouldGroupWithNext(index, readMessages)"
-          :inbox-supports-reply-to="inboxSupportsReplyTo"
-          :current-user-id="currentUserId"
-          data-clarity-mask="True"
-        />
-      </template>
-      <template v-else>
-        <Message
-          v-for="message in readMessages"
-          :key="message.id"
-          class="message--read ph-no-capture"
-          data-clarity-mask="True"
-          :data="message"
-          :is-a-tweet="isATweet"
-          :is-a-whatsapp-channel="isAWhatsAppChannel"
-          :is-web-widget-inbox="isAWebWidgetInbox"
-          :is-a-facebook-inbox="isAFacebookInbox"
-          :is-an-email-inbox="isAnEmailChannel"
-          :is-instagram="isInstagramDM"
-          :inbox-supports-reply-to="inboxSupportsReplyTo"
-          :in-reply-to="getInReplyToMessage(message)"
-        />
-      </template>
+      <Message
+        v-for="message in readMessages"
+        :key="message.id"
+        class="message--read ph-no-capture"
+        data-clarity-mask="True"
+        :data="message"
+        :is-a-tweet="isATweet"
+        :is-a-whatsapp-channel="isAWhatsAppChannel"
+        :is-web-widget-inbox="isAWebWidgetInbox"
+        :is-a-facebook-inbox="isAFacebookInbox"
+        :is-an-email-inbox="isAnEmailChannel"
+        :is-instagram="isInstagramDM"
+        :inbox-supports-reply-to="inboxSupportsReplyTo"
+        :in-reply-to="getInReplyToMessage(message)"
+      />
       <li v-show="unreadMessageCount != 0" class="unread--toast">
         <span>
           {{ unreadMessageCount > 9 ? '9+' : unreadMessageCount }}
@@ -572,35 +505,20 @@ export default {
           }}
         </span>
       </li>
-      <template v-if="showNextBubbles">
-        <NextMessage
-          v-for="(message, index) in unReadMessages"
-          :key="message.id"
-          v-bind="message"
-          :in-reply-to="getInReplyToMessage(message)"
-          :group-with-next="shouldGroupWithNext(index, unReadMessages)"
-          :inbox-supports-reply-to="inboxSupportsReplyTo"
-          :current-user-id="currentUserId"
-          :is-email-inbox="isAnEmailChannel"
-          data-clarity-mask="True"
-        />
-      </template>
-      <template v-else>
-        <Message
-          v-for="message in unReadMessages"
-          :key="message.id"
-          class="message--unread ph-no-capture"
-          data-clarity-mask="True"
-          :data="message"
-          :is-a-tweet="isATweet"
-          :is-a-whatsapp-channel="isAWhatsAppChannel"
-          :is-web-widget-inbox="isAWebWidgetInbox"
-          :is-a-facebook-inbox="isAFacebookInbox"
-          :is-instagram-dm="isInstagramDM"
-          :inbox-supports-reply-to="inboxSupportsReplyTo"
-          :in-reply-to="getInReplyToMessage(message)"
-        />
-      </template>
+      <Message
+        v-for="message in unReadMessages"
+        :key="message.id"
+        class="message--unread ph-no-capture"
+        data-clarity-mask="True"
+        :data="message"
+        :is-a-tweet="isATweet"
+        :is-a-whatsapp-channel="isAWhatsAppChannel"
+        :is-web-widget-inbox="isAWebWidgetInbox"
+        :is-a-facebook-inbox="isAFacebookInbox"
+        :is-instagram-dm="isInstagramDM"
+        :inbox-supports-reply-to="inboxSupportsReplyTo"
+        :in-reply-to="getInReplyToMessage(message)"
+      />
       <ConversationLabelSuggestion
         v-if="shouldShowLabelSuggestions"
         :suggested-labels="labelSuggestions"

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -459,13 +459,11 @@ export default {
       BUS_EVENTS.NEW_CONVERSATION_MODAL,
       this.onNewConversationModalActive
     );
-    emitter.on(BUS_EVENTS.INSERT_INTO_NORMAL_EDITOR, this.addIntoEditor);
   },
   unmounted() {
     document.removeEventListener('paste', this.onPaste);
     document.removeEventListener('keydown', this.handleKeyEvents);
     emitter.off(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.fetchAndSetReplyTo);
-    emitter.off(BUS_EVENTS.INSERT_INTO_NORMAL_EDITOR, this.addIntoEditor);
     emitter.off(
       BUS_EVENTS.NEW_CONVERSATION_MODAL,
       this.onNewConversationModalActive

app/javascript/dashboard/composables/useInbox.js

@@ -1,141 +0,0 @@
-import { computed } from 'vue';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useCamelCase } from 'dashboard/composables/useTransformKeys';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
-
-export const INBOX_FEATURES = {
-  REPLY_TO: 'replyTo',
-  REPLY_TO_OUTGOING: 'replyToOutgoing',
-};
-
-// This is a single source of truth for inbox features
-// This is used to check if a feature is available for a particular inbox or not
-export const INBOX_FEATURE_MAP = {
-  [INBOX_FEATURES.REPLY_TO]: [
-    INBOX_TYPES.FB,
-    INBOX_TYPES.WEB,
-    INBOX_TYPES.TWITTER,
-    INBOX_TYPES.WHATSAPP,
-    INBOX_TYPES.TELEGRAM,
-    INBOX_TYPES.API,
-  ],
-  [INBOX_FEATURES.REPLY_TO_OUTGOING]: [
-    INBOX_TYPES.WEB,
-    INBOX_TYPES.TWITTER,
-    INBOX_TYPES.WHATSAPP,
-    INBOX_TYPES.TELEGRAM,
-    INBOX_TYPES.API,
-  ],
-};
-
-/**
- * Composable for handling macro-related functionality
- * @returns {Object} An object containing the getMacroDropdownValues function
- */
-export const useInbox = () => {
-  const currentChat = useMapGetter('getSelectedChat');
-  const inboxGetter = useMapGetter('inboxes/getInboxById');
-
-  const inbox = computed(() => {
-    const inboxId = currentChat.value.inbox_id;
-
-    return useCamelCase(inboxGetter.value(inboxId), { deep: true });
-  });
-
-  const channelType = computed(() => {
-    return inbox.value.channelType;
-  });
-
-  const isAPIInbox = computed(() => {
-    return channelType.value === INBOX_TYPES.API;
-  });
-
-  const isAFacebookInbox = computed(() => {
-    return channelType.value === INBOX_TYPES.FB;
-  });
-
-  const isAWebWidgetInbox = computed(() => {
-    return channelType.value === INBOX_TYPES.WEB;
-  });
-
-  const isATwilioChannel = computed(() => {
-    return channelType.value === INBOX_TYPES.TWILIO;
-  });
-
-  const isALineChannel = computed(() => {
-    return channelType.value === INBOX_TYPES.LINE;
-  });
-
-  const isAnEmailChannel = computed(() => {
-    return channelType.value === INBOX_TYPES.EMAIL;
-  });
-
-  const isATelegramChannel = computed(() => {
-    return channelType.value === INBOX_TYPES.TELEGRAM;
-  });
-
-  const whatsAppAPIProvider = computed(() => {
-    return inbox.value.provider || '';
-  });
-
-  const isAMicrosoftInbox = computed(() => {
-    return isAnEmailChannel.value && inbox.value.provider === 'microsoft';
-  });
-
-  const isAGoogleInbox = computed(() => {
-    return isAnEmailChannel.value && inbox.value.provider === 'google';
-  });
-
-  const isATwilioSMSChannel = computed(() => {
-    const { medium: medium = '' } = inbox.value;
-    return isATwilioChannel.value && medium === 'sms';
-  });
-
-  const isASmsInbox = computed(() => {
-    return channelType.value === INBOX_TYPES.SMS || isATwilioSMSChannel.value;
-  });
-
-  const isATwilioWhatsAppChannel = computed(() => {
-    const { medium: medium = '' } = inbox.value;
-    return isATwilioChannel.value && medium === 'whatsapp';
-  });
-
-  const isAWhatsAppCloudChannel = computed(() => {
-    return (
-      channelType.value === INBOX_TYPES.WHATSAPP &&
-      whatsAppAPIProvider.value === 'whatsapp_cloud'
-    );
-  });
-
-  const is360DialogWhatsAppChannel = computed(() => {
-    return (
-      channelType.value === INBOX_TYPES.WHATSAPP &&
-      whatsAppAPIProvider.value === 'default'
-    );
-  });
-
-  const isAWhatsAppChannel = computed(() => {
-    return (
-      channelType.value === INBOX_TYPES.WHATSAPP ||
-      isATwilioWhatsAppChannel.value
-    );
-  });
-
-  return {
-    inbox,
-    isAFacebookInbox,
-    isALineChannel,
-    isAPIInbox,
-    isASmsInbox,
-    isATelegramChannel,
-    isATwilioChannel,
-    isAWebWidgetInbox,
-    isAWhatsAppChannel,
-    isAMicrosoftInbox,
-    isAGoogleInbox,
-    isATwilioWhatsAppChannel,
-    isAWhatsAppCloudChannel,
-    is360DialogWhatsAppChannel,
-    isAnEmailChannel,
-  };
-};

app/javascript/dashboard/composables/useTransformKeys.js

@@ -3,7 +3,6 @@
 import { unref } from 'vue';
 import camelcaseKeys from 'camelcase-keys';
 import snakecaseKeys from 'snakecase-keys';
-import * as Sentry from '@sentry/vue';
 
 /**
  * Vue composable that converts object keys to camelCase
@@ -13,18 +12,8 @@ import * as Sentry from '@sentry/vue';
  * @returns {Object|Array} Converted payload with camelCase keys
  */
 export function useCamelCase(payload, options) {
-  try {
-    const unrefPayload = unref(payload);
-    return camelcaseKeys(unrefPayload, options);
-  } catch (e) {
-    Sentry.setContext('transform-keys-error', {
-      payload,
-      options,
-      op: 'camelCase',
-    });
-    Sentry.captureException(e);
-    return payload;
-  }
+  const unrefPayload = unref(payload);
+  return camelcaseKeys(unrefPayload, options);
 }
 
 /**
@@ -35,16 +24,6 @@ export function useCamelCase(payload, options) {
  * @returns {Object|Array} Converted payload with snake_case keys
  */
 export function useSnakeCase(payload, options) {
-  try {
-    const unrefPayload = unref(payload);
-    return snakecaseKeys(unrefPayload, options);
-  } catch (e) {
-    Sentry.setContext('transform-keys-error', {
-      payload,
-      options,
-      op: 'snakeCase',
-    });
-    Sentry.captureException(e);
-    return payload;
-  }
+  const unrefPayload = unref(payload);
+  return snakecaseKeys(unrefPayload, options);
 }

app/javascript/dashboard/constants/localStorage.js

@@ -5,5 +5,4 @@ export const LOCAL_STORAGE_KEYS = {
   COLOR_SCHEME: 'color_scheme',
   DISMISSED_LABEL_SUGGESTIONS: 'labelSuggestionsDismissed',
   MESSAGE_REPLY_TO: 'messageReplyTo',
-  USE_NEXT_BUBBLE: 'useNextBubble',
 };

app/javascript/dashboard/i18n/locale/en/integrations.json

@@ -305,8 +305,7 @@
     "COPILOT": {
       "SEND_MESSAGE": "Send message...",
       "LOADER": "Captain is thinking",
-      "YOU": "You",
-      "USE": "Use this"
+      "YOU": "You"
     }
   }
 }

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -4,7 +4,6 @@ import { mapGetters } from 'vuex';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
 import AddCannedModal from 'dashboard/routes/dashboard/settings/canned/AddCanned.vue';
-import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { conversationUrl, frontendURL } from '../../../helper/URLHelper';
 import {
@@ -39,10 +38,6 @@ export default {
       type: Object,
       default: () => ({}),
     },
-    hideButton: {
-      type: Boolean,
-      default: false,
-    },
   },
   emits: ['open', 'close', 'replyTo'],
   setup() {
@@ -67,7 +62,7 @@ export default {
       return this.getPlainText(this.messageContent);
     },
     conversationId() {
-      return this.message.conversation_id ?? this.message.conversationId;
+      return this.message.conversation_id;
     },
     messageId() {
       return this.message.id;
@@ -76,9 +71,7 @@ export default {
       return this.message.content;
     },
     contentAttributes() {
-      return useSnakeCase(
-        this.message.content_attributes ?? this.message.contentAttributes
-      );
+      return this.message.content_attributes;
     },
   },
   methods: {
@@ -190,7 +183,6 @@ export default {
       :reject-text="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.CANCEL')"
     />
     <woot-button
-      v-if="!hideButton"
       icon="more-vertical"
       color-scheme="secondary"
       variant="clear"

app/javascript/shared/constants/busEvents.js

@@ -14,5 +14,4 @@ export const BUS_EVENTS = {
   SHOW_TOAST: 'newToastMessage',
   NEW_CONVERSATION_MODAL: 'newConversationModal',
   INSERT_INTO_RICH_EDITOR: 'insertIntoRichEditor',
-  INSERT_INTO_NORMAL_EDITOR: 'insertIntoNormalEditor',
 };