Sivin VargheseandGitHub
fbb3479263
# Pull Request Template ## Description This PR fixes a crash where opening a conversation threw `TypeError: Cannot read properties of null (reading 'localeCompare')` and prevented the agent assignment dropdown from rendering. Since #14866, agent bots are included in the assignable agents list. `AgentBot#name` is not presence-validated, so system bots (account-less, global) can have a `null` name. Those nameless bots flowed into name-based operations that assumed a string, causing crashes and warnings across multiple surfaces: * **Assignment dropdown sort:** `getAgentsByAvailability` called `a.name.localeCompare(b.name)`, causing a `localeCompare` `TypeError`. * **Dropdown search:** `MultiselectDropdownItems` called `option.name.toLowerCase()`, causing a `toLowerCase` `TypeError`. * **Agent Bots settings:** `Avatar` received `name=null` for a `String` prop, triggering a Vue prop validation warning. ### What changed * Keep nameless agent bots in the assignment dropdown and render a `-` fallback label in `useAgentsList`. These are still valid, assignable-by-ID records: the assignable agents API includes accessible bots, and `Conversations::AssignmentService` assigns them by ID. Preserving them avoids hiding valid assignment targets. Bots are still included only when `includeAgentBots` is enabled. * Make the sort in `getAgentsByAvailability` null-safe by coercing missing names to an empty string (defense in depth). * Make the search filter in `MultiselectDropdownItems` null-safe (defense in depth). * Pass a null-safe `name` prop to `Avatar` in the Agent Bots settings list to eliminate the Vue prop validation warning. Fixes https://linear.app/chatwoot/issue/CW-7670/agent-assignment-dropdown-crashes-with-cannot-read-properties-of-null ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? 1. Have a system agent bot (`name: null`) that is assignable to an inbox. 2. Open any conversation in that inbox. * The agent assignment dropdown renders without console errors. * The nameless bot is listed with a `-` label and can be assigned. 3. Go to **Settings → Agent Bots**. * The page renders without the `Avatar` prop validation warning. ## 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
82 lines
2.4 KiB
JavaScript
82 lines
2.4 KiB
JavaScript
import { useMapGetter } from 'dashboard/composables/store';
|
|
import {
|
|
getAgentsByUpdatedPresence,
|
|
getSortedAgentsByAvailability,
|
|
} from 'dashboard/helper/agentHelper';
|
|
import { computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
/**
|
|
* A composable function that provides a list of agents for assignment.
|
|
*
|
|
* @param {boolean} [includeNoneAgent=true] - Whether to include a 'None' agent option.
|
|
* @param {Object} [options] - Options for the assignable agents list.
|
|
* @param {boolean} [options.includeAgentBots=false] - Whether to include AgentBot assignees. Only pass this from surfaces that thread `assignee_type` through the assignment request.
|
|
* @returns {Object} An object containing the agents list and assignable agents.
|
|
*/
|
|
export function useAgentsList(
|
|
includeNoneAgent = true,
|
|
{ includeAgentBots = false } = {}
|
|
) {
|
|
const { t } = useI18n();
|
|
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);
|
|
|
|
/**
|
|
* Creates a 'None' agent object
|
|
* @returns {Object} None agent object
|
|
*/
|
|
const createNoneAgent = () => ({
|
|
confirmed: true,
|
|
name: t('AGENT_MGMT.MULTI_SELECTOR.LIST.NONE') || 'None',
|
|
id: 0,
|
|
role: 'agent',
|
|
account_id: 0,
|
|
email: 'None',
|
|
});
|
|
|
|
/**
|
|
* @type {import('vue').ComputedRef<Array>}
|
|
*/
|
|
const assignableAgents = computed(() => {
|
|
return inboxId.value
|
|
? assignable.value(inboxId.value, { includeAgentBots })
|
|
: [];
|
|
});
|
|
|
|
/**
|
|
* @type {import('vue').ComputedRef<Array>}
|
|
*/
|
|
const agentsList = computed(() => {
|
|
const agents = (assignableAgents.value || []).map(agent =>
|
|
!agent.name && agent.assignee_type === 'AgentBot'
|
|
? { ...agent, name: '-' }
|
|
: agent
|
|
);
|
|
const agentsByUpdatedPresence = getAgentsByUpdatedPresence(
|
|
agents,
|
|
currentUser.value,
|
|
currentAccountId.value
|
|
);
|
|
|
|
const filteredAgentsByAvailability = getSortedAgentsByAvailability(
|
|
agentsByUpdatedPresence
|
|
);
|
|
|
|
return [
|
|
...(includeNoneAgent && isAgentSelected.value ? [createNoneAgent()] : []),
|
|
...filteredAgentsByAvailability,
|
|
];
|
|
});
|
|
|
|
return {
|
|
agentsList,
|
|
assignableAgents,
|
|
};
|
|
}
|