chore: Replace widget config mixin with useConfig composable

app/javascript/widget/components/AgentMessage.vue

@@ -8,7 +8,7 @@ import VideoBubble from 'widget/components/VideoBubble.vue';
 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 { useConfig } from 'widget/composables/useConfig';
 import { useMessage } from '../composables/useMessage';
 import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
@@ -28,7 +28,7 @@ export default {
     MessageReplyButton,
     ReplyToChip,
   },
-  mixins: [configMixin, darkModeMixin],
+  mixins: [darkModeMixin],
   props: {
     message: {
       type: Object,
@@ -43,9 +43,13 @@ export default {
     const { messageContentAttributes, hasAttachments } = useMessage(
       props.message
     );
+    const { useInboxAvatarForBot, inboxAvatarUrl, channelConfig } = useConfig();
     return {
       messageContentAttributes,
       hasAttachments,
+      useInboxAvatarForBot,
+      inboxAvatarUrl,
+      channelConfig,
     };
   },
   data() {

app/javascript/widget/components/ChatInputWrap.vue

@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
 
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
 import ChatSendButton from 'widget/components/ChatSendButton.vue';
-import configMixin from '../mixins/configMixin';
+import { useConfig } from 'widget/composables/useConfig';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
@@ -19,7 +19,7 @@ export default {
     FluentIcon,
     ResizableTextArea,
   },
-  mixins: [configMixin, darkModeMixin],
+  mixins: [darkModeMixin],
   props: {
     onSendMessage: {
       type: Function,
@@ -30,7 +30,13 @@ export default {
       default: () => {},
     },
   },
-
+  setup() {
+    const { hasEmojiPickerEnabled, hasAttachmentsEnabled } = useConfig();
+    return {
+      hasEmojiPickerEnabled,
+      hasAttachmentsEnabled,
+    };
+  },
   data() {
     return {
       userInput: '',

app/javascript/widget/components/HeaderActions.vue

@@ -4,13 +4,13 @@ import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import { popoutChatWindow } from '../helpers/popoutHelper';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
-import configMixin from 'widget/mixins/configMixin';
+import { useConfig } from 'widget/composables/useConfig';
 import { CONVERSATION_STATUS } from 'shared/constants/messages';
 
 export default {
   name: 'HeaderActions',
   components: { FluentIcon },
-  mixins: [configMixin, darkModeMixin],
+  mixins: [darkModeMixin],
   props: {
     showPopoutButton: {
       type: Boolean,
@@ -21,6 +21,12 @@ export default {
       default: true,
     },
   },
+  setup() {
+    const { hasEndConversationEnabled } = useConfig();
+    return {
+      hasEndConversationEnabled,
+    };
+  },
   computed: {
     ...mapGetters({
       conversationAttributes: 'conversationAttributes/getConversationParams',

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

@@ -8,20 +8,26 @@ import { getRegexp } from 'shared/helpers/Validators';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import routerMixin from 'widget/mixins/routerMixin';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
-import configMixin from 'widget/mixins/configMixin';
+import { useConfig } from 'widget/composables/useConfig';
 
 export default {
   components: {
     CustomButton,
     Spinner,
   },
-  mixins: [routerMixin, darkModeMixin, messageFormatterMixin, configMixin],
+  mixins: [routerMixin, darkModeMixin, messageFormatterMixin],
   props: {
     options: {
       type: Object,
       default: () => {},
     },
   },
+  setup() {
+    const { preChatFormEnabled } = useConfig();
+    return {
+      preChatFormEnabled,
+    };
+  },
   data() {
     return {
       locale: this.$root.$i18n.locale,

app/javascript/widget/components/TeamAvailability.vue

@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
 import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
 import AvailableAgents from 'widget/components/AvailableAgents.vue';
-import configMixin from 'widget/mixins/configMixin';
+import { useConfig } from 'widget/composables/useConfig';
 import availabilityMixin from 'widget/mixins/availability';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import { IFrameHelper } from 'widget/helpers/utils';
@@ -15,7 +15,7 @@ export default {
     AvailableAgents,
     FluentIcon,
   },
-  mixins: [configMixin, nextAvailabilityTime, availabilityMixin],
+  mixins: [nextAvailabilityTime, availabilityMixin],
   props: {
     availableAgents: {
       type: Array,
@@ -26,7 +26,12 @@ export default {
       default: false,
     },
   },
-
+  setup() {
+    const { channelConfig } = useConfig();
+    return {
+      channelConfig,
+    };
+  },
   computed: {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',

app/javascript/widget/components/UnreadMessage.vue

@@ -1,7 +1,7 @@
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import configMixin from '../mixins/configMixin';
+import { useConfig } from 'widget/composables/useConfig';
 import { isEmptyObject } from 'widget/helpers/utils';
 import {
   ON_CAMPAIGN_MESSAGE_CLICK,
@@ -11,7 +11,7 @@ import darkModeMixin from 'widget/mixins/darkModeMixin';
 export default {
   name: 'UnreadMessage',
   components: { Thumbnail },
-  mixins: [messageFormatterMixin, configMixin, darkModeMixin],
+  mixins: [messageFormatterMixin, darkModeMixin],
   props: {
     message: {
       type: String,
@@ -30,6 +30,14 @@ export default {
       default: null,
     },
   },
+  setup() {
+    const { useInboxAvatarForBot, inboxAvatarUrl, channelConfig } = useConfig();
+    return {
+      useInboxAvatarForBot,
+      inboxAvatarUrl,
+      channelConfig,
+    };
+  },
   computed: {
     companyName() {
       return `${this.$t('UNREAD_VIEW.COMPANY_FROM')} ${

app/javascript/widget/components/UnreadMessageList.vue

@@ -1,6 +1,5 @@
 <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';
@@ -12,7 +11,6 @@ export default {
     FluentIcon,
     UnreadMessage,
   },
-  mixins: [configMixin],
   props: {
     messages: {
       type: Array,

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

@@ -3,7 +3,7 @@ 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 { useConfig } from 'widget/composables/useConfig';
 import { mapGetters } from 'vuex';
 import { IFrameHelper } from 'widget/helpers/utils';
 
@@ -14,7 +14,12 @@ export default {
     ChatHeader,
     ChatHeaderExpanded,
   },
-  mixins: [configMixin],
+  setup() {
+    const { channelConfig } = useConfig();
+    return {
+      channelConfig,
+    };
+  },
   data() {
     return {
       showPopoutButton: false,