Merge branch 'develop' into chore-repalce-configMixin-with-useConfig-composable

app/javascript/widget/components/AgentMessageBubble.vue

@@ -1,5 +1,5 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+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';
@@ -20,7 +20,7 @@ export default {
     CustomerSatisfaction,
     IntegrationCard,
   },
-  mixins: [messageFormatterMixin, darkModeMixin],
+  mixins: [darkModeMixin],
   props: {
     message: { type: String, default: null },
     contentType: { type: String, default: null },
@@ -31,6 +31,16 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    const { formatMessage, getPlainText, truncateMessage, highlightContent } =
+      useMessageFormatter();
+    return {
+      formatMessage,
+      getPlainText,
+      truncateMessage,
+      highlightContent,
+    };
+  },
   computed: {
     isTemplate() {
       return this.messageType === 3;

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

@@ -5,7 +5,7 @@ import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
 import { isEmptyObject } from 'widget/helpers/utils';
 import { getRegexp } from 'shared/helpers/Validators';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import routerMixin from 'widget/mixins/routerMixin';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
 import { useConfig } from 'widget/composables/useConfig';
@@ -24,8 +24,10 @@ export default {
   },
   setup() {
     const { preChatFormEnabled } = useConfig();
+    const { formatMessage } = useMessageFormatter();
     return {
       preChatFormEnabled,
+      formatMessage,
     };
   },
   data() {

app/javascript/widget/components/UnreadMessage.vue

@@ -1,5 +1,5 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import { useConfig } from 'widget/composables/useConfig';
 import { isEmptyObject } from 'widget/helpers/utils';
@@ -32,10 +32,12 @@ export default {
   },
   setup() {
     const { useInboxAvatarForBot, inboxAvatarUrl, channelConfig } = useConfig();
+    const { formatMessage } = useMessageFormatter();
     return {
       useInboxAvatarForBot,
       inboxAvatarUrl,
       channelConfig,
+      formatMessage,
     };
   },
   computed: {

app/javascript/widget/components/UserMessage.vue

@@ -6,7 +6,7 @@ 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 { useMessage } from '../composables/useMessage';
+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';
@@ -25,6 +25,7 @@ export default {
     ReplyToChip,
     DragWrapper,
   },
+  mixins: [messageMixin],
   props: {
     message: {
       type: Object,
@@ -35,12 +36,6 @@ export default {
       default: () => {},
     },
   },
-  setup(props) {
-    const { hasAttachments } = useMessage(props.message);
-    return {
-      hasAttachments,
-    };
-  },
   data() {
     return {
       hasImageError: false,

app/javascript/widget/components/UserMessageBubble.vue

@@ -1,10 +1,9 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
   name: 'UserMessageBubble',
-  mixins: [messageFormatterMixin],
   props: {
     message: {
       type: String,
@@ -15,6 +14,12 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
   computed: {
     textColor() {
       return getContrastingTextColor(this.widgetColor);

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

@@ -1,5 +1,5 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 
@@ -7,13 +7,19 @@ export default {
   components: {
     FluentIcon,
   },
-  mixins: [messageFormatterMixin, darkModeMixin],
+  mixins: [darkModeMixin],
   props: {
     items: {
       type: Array,
       default: () => [],
     },
   },
+  setup() {
+    const { truncateMessage } = useMessageFormatter();
+    return {
+      truncateMessage,
+    };
+  },
 };
 </script>
 

app/javascript/widget/composables/specs/useMessage.spec.js

@@ -1,71 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { reactive, nextTick } from 'vue';
-import { useMessage } from '../useMessage';
-
-describe('useMessage', () => {
-  it('should handle deleted messages', () => {
-    const message = reactive({
-      content_attributes: { deleted: true },
-      attachments: [],
-    });
-
-    const { messageContentAttributes, hasAttachments } = useMessage(message);
-
-    expect(messageContentAttributes.value).toEqual({ deleted: true });
-    expect(hasAttachments.value).toBe(false);
-  });
-
-  it('should handle non-deleted messages with attachments', () => {
-    const message = reactive({
-      content_attributes: {},
-      attachments: ['attachment1', 'attachment2'],
-    });
-
-    const { messageContentAttributes, hasAttachments } = useMessage(message);
-
-    expect(messageContentAttributes.value).toEqual({});
-    expect(hasAttachments.value).toBe(true);
-  });
-
-  it('should handle messages without content_attributes', () => {
-    const message = reactive({
-      attachments: [],
-    });
-
-    const { messageContentAttributes, hasAttachments } = useMessage(message);
-
-    expect(messageContentAttributes.value).toEqual({});
-    expect(hasAttachments.value).toBe(false);
-  });
-
-  it('should handle messages with empty attachments array', () => {
-    const message = reactive({
-      content_attributes: { someAttribute: 'value' },
-      attachments: [],
-    });
-
-    const { messageContentAttributes, hasAttachments } = useMessage(message);
-
-    expect(messageContentAttributes.value).toEqual({ someAttribute: 'value' });
-    expect(hasAttachments.value).toBe(false);
-  });
-
-  it('should update reactive properties when message changes', async () => {
-    const message = reactive({
-      content_attributes: {},
-      attachments: [],
-    });
-
-    const { messageContentAttributes, hasAttachments } = useMessage(message);
-
-    expect(messageContentAttributes.value).toEqual({});
-    expect(hasAttachments.value).toBe(false);
-
-    message.content_attributes = { updated: true };
-    message.attachments.push('newAttachment');
-    await nextTick();
-
-    expect(messageContentAttributes.value).toEqual({ updated: true });
-    expect(hasAttachments.value).toBe(true);
-  });
-});

app/javascript/widget/composables/useMessage.js

@@ -1,22 +0,0 @@
-import { computed } from 'vue';
-
-/**
- * Composable for handling message-related computations.
- * @param {Object} message - The message object to be processed.
- * @returns {Object} An object containing computed properties for message content and attachments.
- */
-export function useMessage(message) {
-  const messageContentAttributes = computed(() => {
-    const { content_attributes: attribute = {} } = message;
-    return attribute;
-  });
-
-  const hasAttachments = computed(() => {
-    return !!(message.attachments && message.attachments.length > 0);
-  });
-
-  return {
-    messageContentAttributes,
-    hasAttachments,
-  };
-}

app/javascript/widget/mixins/messageMixin.js

@@ -0,0 +1,13 @@
+export default {
+  computed: {
+    messageContentAttributes() {
+      const { content_attributes: attribute = {} } = this.message;
+      return attribute;
+    },
+    hasAttachments() {
+      return !!(
+        this.message.attachments && this.message.attachments.length > 0
+      );
+    },
+  },
+};

app/javascript/widget/mixins/specs/messageMixin.spec.js

@@ -0,0 +1,37 @@
+import { shallowMount } from '@vue/test-utils';
+import messageMixin from '../messageMixin';
+import messages from './messageFixture';
+
+describe('messageMixin', () => {
+  let Component = {
+    render() {},
+    title: 'TestComponent',
+    mixins: [messageMixin],
+  };
+
+  it('deleted messages', async () => {
+    const wrapper = shallowMount(Component, {
+      data() {
+        return {
+          message: messages.deletedMessage,
+        };
+      },
+    });
+    expect(wrapper.vm.messageContentAttributes).toEqual({
+      deleted: true,
+    });
+    expect(wrapper.vm.hasAttachments).toBe(false);
+  });
+  it('non-deleted messages', async () => {
+    const wrapper = shallowMount(Component, {
+      data() {
+        return {
+          message: messages.nonDeletedMessage,
+        };
+      },
+    });
+    expect(wrapper.vm.deletedMessage).toBe(undefined);
+    expect(wrapper.vm.messageContentAttributes).toEqual({});
+    expect(wrapper.vm.hasAttachments).toBe(true);
+  });
+});