revert: "chore: Replace messageMixing with useMessage composable [CW-3475]" (#10011)

Reverts chatwoot/chatwoot#9942

This was causing the widget email input to break

app/javascript/widget/components/AgentMessage.vue

@@ -9,7 +9,7 @@ import FileBubble from 'widget/components/FileBubble.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import configMixin from '../mixins/configMixin';
-import { useMessage } from '../composables/useMessage';
+import messageMixin from '../mixins/messageMixin';
 import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 import ReplyToChip from 'widget/components/ReplyToChip.vue';
@@ -28,7 +28,7 @@ export default {
     MessageReplyButton,
     ReplyToChip,
   },
-  mixins: [configMixin, darkModeMixin],
+  mixins: [configMixin, messageMixin, darkModeMixin],
   props: {
     message: {
       type: Object,
@@ -39,15 +39,6 @@ export default {
       default: () => {},
     },
   },
-  setup(props) {
-    const { messageContentAttributes, hasAttachments } = useMessage(
-      props.message
-    );
-    return {
-      messageContentAttributes,
-      hasAttachments,
-    };
-  },
   data() {
     return {
       hasImageError: false,

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,