feat: Rewrite agentMixin to a helper (#9940)

# Pull Request Template

## Description

This PR will replace the usage of `agentMixin`with the utility helpers
functions.

**Files updated**

1. dashboard/components/widgets/conversation/contextMenu/Index.vue
2. dashboard/components/widgets/conversation/ConversationHeader.vue
**(Not used)**
3. dashboard/routes/dashboard/commands/commandbar.vue
4. dashboard/routes/dashboard/conversation/ConversationAction.vue
5. dashboard/routes/dashboard/conversation/ConversationParticipant.vue

Fixes
https://linear.app/chatwoot/issue/CW-3442/rewrite-agentmixin-mixin-to-a-composable

## Type of change

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

## How Has This Been Tested?

**Test cases**

1. See agent list sorting based on availability, if agents are on the
same status, then sorted by name.
2. Test actions like assigning/unassigning agent from conversation
sidebar, CMD bar, Context menu.
3. Test actions like adding/removing participants from conversation
sidebar.
4. See agent list is generated properly, none value.


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] 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
- [x] 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/composables/spec/fixtures/agentFixtures.js

@@ -0,0 +1,63 @@
+import { allAgentsData } from 'dashboard/helper/specs/fixtures/agentFixtures';
+
+export { allAgentsData };
+export const formattedAgentsData = [
+  {
+    account_id: 0,
+    confirmed: true,
+    email: 'None',
+    id: 0,
+    name: 'None',
+    role: 'agent',
+  },
+  {
+    account_id: 1,
+    availability_status: 'online',
+    available_name: 'Abraham',
+    confirmed: true,
+    email: 'abraham@chatwoot.com',
+    id: 5,
+    name: 'Abraham Keta',
+    role: 'agent',
+  },
+  {
+    account_id: 1,
+    availability_status: 'online',
+    available_name: 'John K',
+    confirmed: true,
+    email: 'john@chatwoot.com',
+    id: 1,
+    name: 'John Kennady',
+    role: 'administrator',
+  },
+  {
+    account_id: 1,
+    availability_status: 'busy',
+    available_name: 'Honey',
+    confirmed: true,
+    email: 'bee@chatwoot.com',
+    id: 4,
+    name: 'Honey Bee',
+    role: 'agent',
+  },
+  {
+    account_id: 1,
+    availability_status: 'busy',
+    available_name: 'Samuel K',
+    confirmed: true,
+    email: 'samuel@chatwoot.com',
+    id: 2,
+    name: 'Samuel Keta',
+    role: 'agent',
+  },
+  {
+    account_id: 1,
+    availability_status: 'offline',
+    available_name: 'James K',
+    confirmed: true,
+    email: 'james@chatwoot.com',
+    id: 3,
+    name: 'James Koti',
+    role: 'agent',
+  },
+];

app/javascript/dashboard/composables/spec/useAgentsList.spec.js

@@ -0,0 +1,91 @@
+import { ref } from 'vue';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useAgentsList } from '../useAgentsList';
+import { useMapGetter } from 'dashboard/composables/store';
+import { allAgentsData, formattedAgentsData } from './fixtures/agentFixtures';
+import * as agentHelper from 'dashboard/helper/agentHelper';
+
+vi.mock('dashboard/composables/store');
+vi.mock('dashboard/helper/agentHelper');
+
+const mockUseMapGetter = (overrides = {}) => {
+  const defaultGetters = {
+    getCurrentUser: ref(allAgentsData[0]),
+    getSelectedChat: ref({ inbox_id: 1, meta: { assignee: true } }),
+    getCurrentAccountId: ref(1),
+    'inboxAssignableAgents/getAssignableAgents': ref(() => allAgentsData),
+  };
+
+  const mergedGetters = { ...defaultGetters, ...overrides };
+
+  useMapGetter.mockImplementation(getter => mergedGetters[getter]);
+};
+
+describe('useAgentsList', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    agentHelper.getAgentsByUpdatedPresence.mockImplementation(agents => agents);
+    agentHelper.getSortedAgentsByAvailability.mockReturnValue(
+      formattedAgentsData.slice(1)
+    );
+    agentHelper.getCombinedAgents.mockImplementation(
+      (agents, includeNone, isAgentSelected) => {
+        if (includeNone && isAgentSelected) {
+          return [agentHelper.createNoneAgent, ...agents];
+        }
+        return agents;
+      }
+    );
+
+    mockUseMapGetter();
+  });
+
+  it('returns agentsList and assignableAgents', () => {
+    const { agentsList, assignableAgents } = useAgentsList();
+
+    expect(assignableAgents.value).toEqual(allAgentsData);
+    expect(agentsList.value).toEqual([
+      agentHelper.createNoneAgent,
+      ...formattedAgentsData.slice(1),
+    ]);
+  });
+
+  it('includes None agent when includeNoneAgent is true', () => {
+    const { agentsList } = useAgentsList(true);
+
+    expect(agentsList.value[0]).toEqual(agentHelper.createNoneAgent);
+    expect(agentsList.value.length).toBe(formattedAgentsData.length);
+  });
+
+  it('excludes None agent when includeNoneAgent is false', () => {
+    const { agentsList } = useAgentsList(false);
+
+    expect(agentsList.value[0]).not.toEqual(agentHelper.createNoneAgent);
+    expect(agentsList.value.length).toBe(formattedAgentsData.length - 1);
+  });
+
+  it('handles empty assignable agents', () => {
+    mockUseMapGetter({
+      'inboxAssignableAgents/getAssignableAgents': ref(() => []),
+    });
+    agentHelper.getSortedAgentsByAvailability.mockReturnValue([]);
+
+    const { agentsList, assignableAgents } = useAgentsList();
+
+    expect(assignableAgents.value).toEqual([]);
+    expect(agentsList.value).toEqual([agentHelper.createNoneAgent]);
+  });
+
+  it('handles missing inbox_id', () => {
+    mockUseMapGetter({
+      getSelectedChat: ref({ meta: { assignee: true } }),
+      'inboxAssignableAgents/getAssignableAgents': ref(() => []),
+    });
+    agentHelper.getSortedAgentsByAvailability.mockReturnValue([]);
+
+    const { agentsList, assignableAgents } = useAgentsList();
+
+    expect(assignableAgents.value).toEqual([]);
+    expect(agentsList.value).toEqual([agentHelper.createNoneAgent]);
+  });
+});

app/javascript/dashboard/composables/useAgentsList.js

@@ -0,0 +1,57 @@
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import {
+  getAgentsByUpdatedPresence,
+  getSortedAgentsByAvailability,
+  getCombinedAgents,
+} from 'dashboard/helper/agentHelper';
+
+/**
+ * A composable function that provides a list of agents for assignment.
+ *
+ * @param {boolean} [includeNoneAgent=true] - Whether to include a 'None' agent option.
+ * @returns {Object} An object containing the agents list and assignable agents.
+ */
+export function useAgentsList(includeNoneAgent = true) {
+  const currentUser = useMapGetter('getCurrentUser');
+  const currentChat = useMapGetter('getSelectedChat');
+  const currentAccountId = useMapGetter('getCurrentAccountId');
+  const assignable = useMapGetter('inboxAssignableAgents/getAssignableAgents');
+
+  const inboxId = computed(() => currentChat.value?.inbox_id);
+  const isAgentSelected = computed(() => currentChat.value?.meta?.assignee);
+
+  /**
+   * @type {import('vue').ComputedRef<Array>}
+   */
+  const assignableAgents = computed(() => {
+    return inboxId.value ? assignable.value(inboxId.value) : [];
+  });
+
+  /**
+   * @type {import('vue').ComputedRef<Array>}
+   */
+  const agentsList = computed(() => {
+    const agents = assignableAgents.value || [];
+    const agentsByUpdatedPresence = getAgentsByUpdatedPresence(
+      agents,
+      currentUser.value,
+      currentAccountId.value
+    );
+
+    const filteredAgentsByAvailability = getSortedAgentsByAvailability(
+      agentsByUpdatedPresence
+    );
+
+    return getCombinedAgents(
+      filteredAgentsByAvailability,
+      includeNoneAgent,
+      isAgentSelected.value
+    );
+  });
+
+  return {
+    agentsList,
+    assignableAgents,
+  };
+}