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/helper/specs/agentHelper.spec.js

@@ -0,0 +1,131 @@
+import {
+  getAgentsByAvailability,
+  getSortedAgentsByAvailability,
+  getAgentsByUpdatedPresence,
+  getCombinedAgents,
+  createNoneAgent,
+} from '../agentHelper';
+import {
+  allAgentsData,
+  onlineAgentsData,
+  busyAgentsData,
+  offlineAgentsData,
+  sortedByAvailability,
+  formattedAgentsByPresenceOnline,
+  formattedAgentsByPresenceOffline,
+} from 'dashboard/helper/specs/fixtures/agentFixtures';
+
+describe('agentHelper', () => {
+  describe('getAgentsByAvailability', () => {
+    it('returns agents by availability', () => {
+      expect(getAgentsByAvailability(allAgentsData, 'online')).toEqual(
+        onlineAgentsData
+      );
+      expect(getAgentsByAvailability(allAgentsData, 'busy')).toEqual(
+        busyAgentsData
+      );
+      expect(getAgentsByAvailability(allAgentsData, 'offline')).toEqual(
+        offlineAgentsData
+      );
+    });
+  });
+
+  describe('getSortedAgentsByAvailability', () => {
+    it('returns sorted agents by availability', () => {
+      expect(getSortedAgentsByAvailability(allAgentsData)).toEqual(
+        sortedByAvailability
+      );
+    });
+
+    it('returns an empty array when given an empty input', () => {
+      expect(getSortedAgentsByAvailability([])).toEqual([]);
+    });
+
+    it('maintains the order of agents with the same availability status', () => {
+      const result = getSortedAgentsByAvailability(allAgentsData);
+      expect(result[2].name).toBe('Honey Bee');
+      expect(result[3].name).toBe('Samuel Keta');
+    });
+  });
+
+  describe('getAgentsByUpdatedPresence', () => {
+    it('returns agents with updated presence', () => {
+      const currentUser = {
+        id: 1,
+        accounts: [{ id: 1, availability_status: 'offline' }],
+      };
+      const currentAccountId = 1;
+
+      expect(
+        getAgentsByUpdatedPresence(
+          formattedAgentsByPresenceOnline,
+          currentUser,
+          currentAccountId
+        )
+      ).toEqual(formattedAgentsByPresenceOffline);
+    });
+
+    it('does not modify other agents presence', () => {
+      const currentUser = {
+        id: 2,
+        accounts: [{ id: 1, availability_status: 'offline' }],
+      };
+      const currentAccountId = 1;
+
+      expect(
+        getAgentsByUpdatedPresence(
+          formattedAgentsByPresenceOnline,
+          currentUser,
+          currentAccountId
+        )
+      ).toEqual(formattedAgentsByPresenceOnline);
+    });
+
+    it('handles empty agent list', () => {
+      const currentUser = {
+        id: 1,
+        accounts: [{ id: 1, availability_status: 'offline' }],
+      };
+      const currentAccountId = 1;
+
+      expect(
+        getAgentsByUpdatedPresence([], currentUser, currentAccountId)
+      ).toEqual([]);
+    });
+  });
+
+  describe('getCombinedAgents', () => {
+    it('includes None agent when includeNoneAgent is true and isAgentSelected is true', () => {
+      const result = getCombinedAgents(sortedByAvailability, true, true);
+      expect(result).toEqual([createNoneAgent, ...sortedByAvailability]);
+      expect(result.length).toBe(sortedByAvailability.length + 1);
+      expect(result[0]).toEqual(createNoneAgent);
+    });
+
+    it('excludes None agent when includeNoneAgent is false', () => {
+      const result = getCombinedAgents(sortedByAvailability, false, true);
+      expect(result).toEqual(sortedByAvailability);
+      expect(result.length).toBe(sortedByAvailability.length);
+      expect(result[0]).not.toEqual(createNoneAgent);
+    });
+
+    it('excludes None agent when isAgentSelected is false', () => {
+      const result = getCombinedAgents(sortedByAvailability, true, false);
+      expect(result).toEqual(sortedByAvailability);
+      expect(result.length).toBe(sortedByAvailability.length);
+      expect(result[0]).not.toEqual(createNoneAgent);
+    });
+
+    it('returns only filtered agents when both includeNoneAgent and isAgentSelected are false', () => {
+      const result = getCombinedAgents(sortedByAvailability, false, false);
+      expect(result).toEqual(sortedByAvailability);
+      expect(result.length).toBe(sortedByAvailability.length);
+    });
+
+    it('handles empty filteredAgentsByAvailability array', () => {
+      const result = getCombinedAgents([], true, true);
+      expect(result).toEqual([createNoneAgent]);
+      expect(result.length).toBe(1);
+    });
+  });
+});

app/javascript/dashboard/helper/specs/fixtures/agentFixtures.js

@@ -0,0 +1,184 @@
+export const allAgentsData = [
+  {
+    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: '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',
+  },
+  {
+    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: 'online',
+    available_name: 'Abraham',
+    confirmed: true,
+    email: 'abraham@chatwoot.com',
+    id: 5,
+    name: 'Abraham Keta',
+    role: 'agent',
+  },
+];
+export const onlineAgentsData = [
+  {
+    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',
+  },
+];
+export const busyAgentsData = [
+  {
+    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',
+  },
+];
+export const offlineAgentsData = [
+  {
+    account_id: 1,
+    availability_status: 'offline',
+    available_name: 'James K',
+    confirmed: true,
+    email: 'james@chatwoot.com',
+    id: 3,
+    name: 'James Koti',
+    role: 'agent',
+  },
+];
+export const sortedByAvailability = [
+  {
+    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',
+  },
+];
+export const formattedAgentsByPresenceOnline = [
+  {
+    account_id: 1,
+    availability_status: 'online',
+    available_name: 'Abraham',
+    confirmed: true,
+    email: 'abr@chatwoot.com',
+    id: 1,
+    name: 'Abraham Keta',
+    role: 'agent',
+  },
+];
+export const formattedAgentsByPresenceOffline = [
+  {
+    account_id: 1,
+    availability_status: 'offline',
+    available_name: 'Abraham',
+    confirmed: true,
+    email: 'abr@chatwoot.com',
+    id: 1,
+    name: 'Abraham Keta',
+    role: 'agent',
+  },
+];