chore: integrate the composable replacing the mixing in pages and components

app/javascript/widget/components/ChatHeader.vue

@@ -1,6 +1,5 @@
 <script>
 import { useAvailability } from 'widget/composables/useAvailability';
-import availabilityMixin from 'widget/mixins/availability';
 import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import HeaderActions from './HeaderActions.vue';
@@ -13,7 +12,7 @@ export default {
     FluentIcon,
     HeaderActions,
   },
-  mixins: [nextAvailabilityTime, availabilityMixin, routerMixin, darkMixin],
+  mixins: [nextAvailabilityTime, routerMixin, darkMixin],
   props: {
     avatarUrl: {
       type: String,
@@ -37,8 +36,10 @@ export default {
     },
   },
   setup(props) {
-    const { isOnline } = useAvailability(props.availableAgents);
-    return { isOnline };
+    const { isOnline, replyWaitMessage } = useAvailability(
+      props.availableAgents
+    );
+    return { isOnline, replyWaitMessage };
   },
   methods: {
     onBackButtonClick() {