feat: Add scroll lock on chat list context menu (#11467)

# Pull Request Template

## Description

This PR uses `useScrollLock` from `VueUse` to lock scrolling on the chat
list panel when the context menu is open.

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### Loom video

https://www.loom.com/share/68a25af2c1b149f8bd06bdbaafb4d82d?sid=0984fde6-ade2-405a-afc9-6d8f99480874


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

app/javascript/dashboard/components/ChatList.vue

@@ -8,6 +8,7 @@ import {
   computed,
   watch,
   onMounted,
+  onUnmounted,
   defineEmits,
 } from 'vue';
 import { useStore } from 'vuex';
@@ -42,7 +43,7 @@ import {
   useSnakeCase,
 } from 'dashboard/composables/useTransformKeys';
 import { useEmitter } from 'dashboard/composables/emitter';
-import { useEventListener } from '@vueuse/core';
+import { useEventListener, useScrollLock } from '@vueuse/core';
 
 import { emitter } from 'shared/helpers/mitt';
 
@@ -85,6 +86,12 @@ const store = useStore();
 
 const conversationListRef = ref(null);
 const conversationDynamicScroller = ref(null);
+const conversationListScrollableElement = computed(
+  () => conversationDynamicScroller.value?.$el
+);
+const conversationListScrollLock = useScrollLock(
+  conversationListScrollableElement
+);
 
 const activeAssigneeTab = ref(wootConstants.ASSIGNEE_TYPE.ME);
 const activeStatus = ref(wootConstants.STATUS_TYPE.OPEN);
@@ -738,6 +745,7 @@ function allSelectedConversationsStatus(status) {
 
 function onContextMenuToggle(state) {
   isContextMenuOpen.value = state;
+  conversationListScrollLock.value = state;
 }
 
 function toggleSelectAll(check) {
@@ -761,6 +769,10 @@ onMounted(() => {
   }
 });
 
+onUnmounted(() => {
+  conversationListScrollLock.value = false;
+});
+
 provide('selectConversation', selectConversation);
 provide('deSelectConversation', deSelectConversation);
 provide('assignAgent', onAssignAgent);