WorkerDirectoryTabs
This is an inner container for WorkersDirectory that renders the workers and queues tabs. Can be used to add or remove tabs on that component.
Component children#
| Key | Component | Condition | Align | Description |
|---|---|---|---|---|
| tabs | React component | left | Worker directory tabs. Displays the workers list and search bar in one tab, and the queues list and search bar in another tab. | |
| workers | React component | The specific tab item for the workers list. When clicked this will switch to the tab displaying the list of workers. | ||
| workers-container | styled(FlexBoxColumn) | Wrapper for the workers-input-container, workers-input-field, item-container and specific worker details. | ||
| workers-input-container | styled(div) | This is a wrapper for the search bar. | ||
| workers-input-field | styled(Input) | start | The search bar displayed above the cards of workers which can be used to search for a specific worker in the list. | |
| WKXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | React component | Will display once the details of the workers have loaded. | The key of this component is dynamically generated, and will correspond to the worker sid. This item contains the worker avatar, worker name and worker status. This will have one or two transfer buttons if the worker is available. The cold transfer button is always available if the worker is available to take a call, the warm transfer button is only available if the warm transfers setting is enabled. | |
| queues | React component | The specific tab item for the queues list. When clicked this will switch to the tab displaying the list of queues. | ||
| queues-container | styled(FlexBoxColumn) | Wrapper for the queues-input-container, queues-input-field, item-container and specific queue details. | ||
| queues-input-container | styled(div) | This is a wrapper for the search bar. | ||
| queues-input-field | styled(Input) | start | The search bar displayed above the cards of queues which can be used to search for a specific queue in the list. | |
| WQXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | QueueItem | Will display once the details of the queues have loaded. | The key of this component is dynamically generated, and will correspond to the queue sid. This item contains the queue avatar and queue name and will have one or two transfer buttons. The cold transfer button is always available, the warm transfer button is only available if this setting is enabled. | |
| directory | React component | Only displayed if the warm transfers feature is enabled. | The specific tab item for the directory. When clicked this will switch to the tab displaying the directory. | |
| directory-container | styled(FlexBoxColumn) | This contains the external transfer dialpad. | ||
| item-container | styled(FlexBox) | vertical | Wrapper which will contain either a loading symbol (if worker-item or queue-item is still loading) or will contain each individual worker-item or queue-item. |
Static Properties#
| Name | Type | Description |
|---|---|---|
| Content | DynamicContentStore<WorkerDirectoryTabsProps, WorkerDirectoryTabsChildrenKeys> | Dynamic content store |
| defaultProps | Partial<WorkerDirectoryTabs.WorkerDirectoryTabsProps> | Default properties |
Component Properties#
| Name | Type | Description | Optional | Default |
|---|---|---|---|---|
| isWarmTransferEnabled | boolean | Whether warm transfer is enabled. | No | |
| hiddenWorkerFilter | string | Extra query filter applied to the query of workers in addition to typed search. | Yes | |
| hiddenQueueFilter | string | DEPRECATED: use queueFilter instead. Extra query filter applied to the query of queues in addition to typed search. | Yes | |
| queueFilter | function | Predicate function applied for custom queue filtering in addition to typed search. | Yes | |
| theme | Theme | Theme | No | |
| task | ITask | Task. | Yes | |
| call | Call | Call state of the task. | Yes | |
| conference | ConferenceState | Conference state of the task. | Yes | |
| channelDefinition | TaskChannelDefinition | Channel definition of the task. | Yes | |
| conversation | ConversationState.ConversationState | Conversation state of the task. Present if task is chat-based. | Yes |
Rate this page