Menu

Flex UI Release Notes for 2.x.x

This page includes the release notes related directly to Flex UI version 2.x.x. For updates on other components of the Flex Platform, visit the Twilio Changelog and select the Flex product. If you're running Flex UI 1.x.x, see the release notes for v 1.x.x.

For detailed descriptions of the Flex UI 2.x.x public interfaces with code samples, visit our Flex UI API docs.

Changes to Sync usage in Flex UI

What has been done?

In Flex UI version 2.0 we introduced updates to some internal operations within Flex UI to no longer rely on data provided by Sync. This included Conference state management as well as Outbound calls and Transfer workflows. All of these now get data from TaskRouter SDK instead of Sync. This was done to reduce the number of dependencies in these workflows for better performance and increased resilience in the event of an incident. Flex UI versions 1.33 and above also include the same changes to Sync usage inside Flex UI.

What has changed?

This change only affects the internal operation of Flex UI and does not introduce any breaking changes that customers should be aware of. However, there are some UI changes that you may see.

Sync limits on data retention no longer limit the fetching of workers and queues

Sync only stores data for 30 days since the last change to a status. This affects lists of workers (users) and queues that previously did not include workers or queues that had no change for 30 days. The parts of Flex UI that no longer use Sync can now fetch all workers and queue no matter when the last change was made.

Affect on Flex user experience

  • When transferring a call, the lists of workers and queues now show all possible workers and queues.

  • When making an outbound call, all queues are available to be selected.

Conference Sync Maps

Under the hood, Flex UI now receives and displays Conference information from an alternative backend service, Flex Orchestrator, rather than Sync Maps. However, the same information is still published to Sync Maps in order to enable backwards compatibility with Flex UI customizations and plugins. In cases where a Flex customization makes heavy use of Conference data for advanced call use cases, there is the potential for inconsistencies in the UI. So far we have had a report of duplicate ‘Left call’ participants appearing in the call canvas. This particular issue was reported for a customer plugin based on this Twilio Professional Services plugin that renders participants of a call. The workaround for these inconsistencies is to use the native outbound dialer now built directly into Flex.

Transfer directory

Flex UI now fetches workers and queues from an alternative backend service, Task Router, rather than Sync Maps. Workers and queues are soft deleted from Sync Maps after 30 days of inactivity, but this is not true of Task Router. This means more workers and/or queues may appear in the transfer directory than before.

Hidden worker and queue filters

The hiddenWorkerFilter and hiddenQueueFilter default props on the WorkerDirectoryTabs dynamic component can be used to filter the workers and queue that appear in the transfer directory.

FAQs

Is Sync still used in Flex UI?

Yes. We have only removed it from the parts of Flex UI mentioned above.

Can I still use Sync for customizations?

Yes, Sync can still be used for building additional functionality on top of Flex. Flex is still populating Sync with the same data as it did before.

Will Sync be removed from other parts of Flex UI?

We are currently evaluating other workflows that currently use Sync that could be improved by reducing dependencies.

What should I do if I find a difference in behavior between 1.32 and below and 1.33 or 2.0 and above?

Please contact Support to report any changes between these versions.

v 2.6.0

@twilio/flex-ui@2.6.0

Release date February 14, 2024

Summary

Flex UI 2.6.0 is now available. This release introduces Agent Copilot and Unified Profiles in Flex in limited public beta. These new features combine the power of large language models with real-time customer data to automate customer and agent experiences, improve end-customer satisfaction, and increase agent productivity.

This release also includes the GA release of a number of Real-time Queues View metrics that were previously in public beta, and the public beta release of Device Manager, which enables agents to easily switch between audio devices. In addition, you'll notice UI enhancements, bug fixes, and more.

Added

  • Agent Copilot in Flex is now available in limited public beta. Agent Copilot provides agents with wrapup assistance, including automated summaries, disposition codes, and customer sentiment.
  • Unified Profiles in Flex is now available in limited public beta. Unified Profiles delivers real-time customer data from multiple enterprise systems to your customer-facing teams.
  • A native audio device manager is available in public beta. Agents can select an audio device, such as headphones or speakers, in Flex UI. This feature is not available when using Flex on Citrix VDI.

Changed

  • Real-time Queues View metrics that were released in public beta in Flex UI 2.5.0 are now generally available.
  • Improved error messages that appear when users are unable to successfully log in to Flex UI using single sign-on.
  • If you are configuring single sign-on in Flex for the first time, Flex provides a simplified setup experience and enhanced SSO based on the OAuth 2.0 authorization framework.

Fixed

  • Fixed an issue in chat where dates were not shown for messages received before the current day.
  • Fixed an issue that caused the “from” email address to appear blank in outbound emails.
  • Fixed a bug that caused some messages to appear in light mode theme when dark mode theme was being used.
  • Fixed an issue that caused the same agent to appear on the screen twice after multiple call transfers.
  • Real-time Queues View:
    • Fixed a bug that prevented filters from working correctly in some situations.
    • Fixed a bug that caused English text to appear for non-English languages.
  • Fixed a rare direct URL login issue for self-hosted Flex UI.
  • Fixed a rare issue that caused the message “Your connection is poor” to appear when there was no network quality issue.
  • Fixed a rare issue that caused the screen to sometimes go blank during chat conversations when using a custom plugin with specific settings.

v 2.5.2

@twilio/flex-ui@2.5.2

Release date February 26, 2024

Fixed

  • Fixed an issue with the way that Flex on Citrix VDI handles non-fatal vdiClientDisconnected errors from Citrix. In rare situations, these errors caused Flex UI to use degraded mode until the next browser refresh.
  • Fixed a rare issue in self-hosted Flex environments that prevented users from successfully logging in to Flex from a direct URL instead of from their SSO tool.

v 2.5.1

@twilio/flex-ui@2.5.1

Release date January 22, 2024

Fixed

  • Fixed a potential login issue for customers who are using a specific authentication flow and running Flex within an iframe (for example, the Flex Salesforce integration). This issue was related to Google's rollout of restrictions on third-party cookies, which was announced in December 2023 and began in January 2024.
  • Upgraded the date utility library version.
  • Fixed a rare performance issue for specific customers who are using a feature enabled by our support team.

v 2.5.0

@twilio/flex-ui@2.5.0

Release date December 4, 2023

Summary

Flex UI 2.5.0 is now available. This release features email as a new channel, the GA release of Flex Citrix VDI, the public beta release of a built-in webchat widget, the ability to filter summary metrics on the Real-Time Queues View by channel, and more. It also includes UI enhancements and bug fixes.

Added

Coming soon

Watch the Twilio changelog and these release notes for updates on the following features that will be released shortly as part of this release:

  • Email will be generally available as a channel for your contact center. Agents can send and receive email messages from your customers directly in Flex.
    • Updated December 5, 2023: Email in Flex is now generally available. To learn more and get started, see Email in Flex.
  • The Read-only Admin role will be generally available. This role is automatically assigned to users with the Support role in Twilio Console and enables those users to:
    • Launch Flex from the Twilio Console
    • View the configurations on the Admin dashboard (read-only)
    • View real-time queue statistics
    • View the list of agents on the Teams page
    • Updated December 12, 2023: The Read-only Admin role in Flex is now generally available. To learn more, see Read-only Admin role.
  • The public beta release of Webchat 3.0 will provide a new webchat that includes additional security features and is simpler to configure and deploy.
    • Updated December 12, 2023: Webchat 3.0 is now available in Public Beta. To learn more and get started, see the Webchat 3.0 overview.
  • The native integration of Google Dialogflow CX with Flex, currently in public beta, will be updated to support Dialogflow Digital Virtual Agents in Flex through an integration enabled by Twilio Conversations and Twilio Studio. Digital virtual agent conversations will be seamlessly escalated and routed to agents in Flex, along with the content of the customer’s conversation with the virtual agent.

Changed

  • Flex Citrix VDI is now generally available.
  • In the Real-time Queues View, renamed the Handled metric to Accepted. This metric continues to reflect the number of tasks that were accepted by agents.
  • Updated channel icons for the agent view.
  • Increased the webchat character limit to 32,768 from 4,000.

Fixed

  • Fixed an issue where the green dot that indicates customer online status in webchat didn’t appear.
  • Fixed an issue where underscores were automatically removed from email addresses in Insights chat transcripts in some situations.
  • Fixed an issue where outbound messages appeared as read in some scenarios, regardless of whether they had been opened.
  • Fixed an issue where “FlexModule: FlexModule not initialized” errors appeared in the log multiple times while logging in to Flex, even though the login was successful and Flex was working properly.
  • Fixed a bug where, in some circumstances, agents couldn’t accept a call after accepting microphone permissions in their browser.
  • Fixed an issue that caused slowness when typing in Flex’s built-in messaging in certain scenarios.
  • Fixed a rare issue where self-hosted Flex UI becomes unresponsive.

v 2.4.2

@twilio/flex-ui@2.4.2

Release date November 29, 2023

Fixed

  • Updated the Voice SDK to version 2.7.3. Voice SDK 2.7.3 fixes a Chrome issue where audio is choppy when another application is also using the audio devices.

v 2.4.1

@twilio/flex-ui@2.4.1

Release date October 17, 2023

Fixed

  • Fixed an issue that caused the Real-time Queues View to show new filter options and additional metrics in Flex UI 2.3.x as well as Flex UI 2.4.0. These new features are now only available in Flex UI 2.4.0 and later.
  • Fixed an issue that incorrectly caused a “Failed to fetch call participants” message to appear for callback request tasks in some scenarios, despite no actual problems. We’ve updated our task handling so that the incorrect error message no longer appears in this scenario.
  • Fixed an issue that incorrectly caused outbound settings errors to appear in the Flex Status Report and downloadable Error Reports in some scenarios, despite no actual problems. These incorrect errors are no longer generated in this scenario.
  • Fixed an issue on the Flex Agent UI page that incorrectly caused a New task link to appear. The link has been removed.

v 2.4.0

@twilio/flex-ui@2.4.0

Release date September 28, 2023

Summary

Flex 2.4.0 is now available. This release features several new channels by which agents can send and receive messages, as well as new filters and metrics in the Real-Time Queues View that make it easier for supervisors to monitor your contact center. It also includes UI enhancements and bug fixes.

Added

  • In the Real-time Queues View, you can now filter your view to just the queues and metrics that you want to monitor. There are also four new metrics: average speed of answer (ASA), average handle time (AHT), missed invitations, and average abandon time.
  • Facebook Messenger and Google Business Messages communication channels are supported as Public Beta features. When enabled, agents in your contact center can use these channels to send and receive messages from your customers. For information about how to enable these channels, see the documentation about using Flex with Facebook Messenger and Google Business Messages.

Changed

  • The addWrapper API is now generally available and is no longer an experimental API.
  • Added an informational message to agents when an empty message appears in WhatsApp. The empty message could be caused by the customer using a WhatsApp feature that Flex doesn’t support or by the customer actually sending a blank message.

Fixed

  • Added support for Google Chrome’s experimental Storage Partitioning feature. Previously, enabling this feature prevented users from logging in to Flex using SSO, particularly in environments using Flex inside of an iframe.
  • Fixed a bug that prevented Flex UI from opening when TaskRouter is unavailable. In this scenario, Flex UI now opens in Degraded mode.
  • Fixed an issue that caused an error when it took more than 5 seconds to load workers and queues in the Transfer directory. The operation now times out only if the load delay reaches 15 seconds.
  • Fixed a bug that caused number emojis to appear incorrectly in Flex UI.
  • Added missing documentation for component children on the WorkerDirectoryTabs page in the API Reference.
  • Fixed an issue where network issues that affect the Voice SDK required agents to refresh the website before making outbound calls.

v 2.3.5

@twilio/flex-ui@2.3.5

Release date January 9, 2024

Fixed

  • Fixed a rare performance issue for specific customers who are using a feature enabled by our support team.

v 2.3.4

@twilio/flex-ui@2.3.4

Release date September 7, 2023

Fixed

  • Fixed a permissions issue where Supervisor could incorrectly see the New dashboard button
  • October 17, 2023 update: Fixed an issue that incorrectly caused four new metrics to appear in the Real-time Queues View. These metrics were released with Flex UI 2.4.0, but incorrectly appeared in Flex UI 2.3.x from October 3, 2023, until the issue was fixed in Flex UI 2.4.1 on October 17, 2023.

v 2.2.2

@twilio/flex-ui@2.2.2

Release date September 6, 2023

Fixed

  • Fixed a permissions issue where Supervisor could incorrectly see the New dashboard button

v 2.1.3

@twilio/flex-ui@2.1.3

Release date August 29, 2023

Fixed

  • Fixed a permissions issue where Supervisor could incorrectly see the New dashboard button

v 2.3.3

@twilio/flex-ui@2.3.3

Release date July 14, 2023

Fixed

  • Fixed the display issue while adding components to CallCanvas
  • Increased timeout interval for certain SDKs to address initialisation issues

v 2.3.2

@twilio/flex-ui@2.3.2

Release date July 10, 2023

Summary

Flex 2.3.2 is now available with support for Citrix HDX VDI as a Public Beta feature which provides high quality audio for voice calls while agents are connected to Flex via Citrix HDX VDI.

Added

  • Added enhancements to support Citrix HDX VDI as a Public Beta feature
  • For more information on how to setup Flex Citrix VDI, checkout our Flex Citrix VDI documentation

v 2.3.1

@twilio/flex-ui@2.3.1

Release date July 3, 2023

Summary

Flex 2.3.1 is now available with betterments for initialisation and logging along with UI improvements.

Fixed

  • Upgraded Conversations SDK version to v2.4.1
  • Fixed the issue while viewing chat transcript logs

v 2.3.0

@twilio/flex-ui@2.3.0

Release date June 28, 2023

Summary

Flex 2.3 is now available. It includes improvements for initialization and logging along with UI enhancements. This release uses an updated version of the Voice SDK which may require network configuration changes. Please check the Voice SDK release notes for more information.

Changed

Fixed

  • Fixed the issue while creating custom keyboard shortcuts using numbers in Windows
  • Fixed the behavior of Apply and Reset buttons while changing filters on Your Teams page
  • Fixed the additional scroll issue in Queues Stat screen
  • Fixed initialization issues using timeout for dependencies
  • Fixed logging issues in Flex Configuration API enabling custom settings

v 2.2.1

@twilio/flex-ui@2.2.1

release date June 28, 2023

Fixed

  • Fixed logging issues in Flex Configuration API enabling custom settings.
  • Fixed initialization issues using timeout for dependencies.

v 2.2.0

@twilio/flex-ui@2.2.0

Release date May 29, 2023

Summary

Flex 2.2 is now available with changes for displaying call transcripts for Google Dialogflow CX Virtual Agent calls. It also includes an upgraded SDK version of TaskRouter and improvements to the UI and sorting functionality.

Changed

  • Upgraded TaskRouter SDK version to v0.8.0 to provide enhanced capabilities

Fixed

  • Fixed display issues after putting a call on hold
  • Fixed functionality issues on keyboard shortcuts
  • Fixed the programmability issues in customizing tasks
  • Fixed an infinite loading issue in Conversation Tasks
  • Fixed issues with firing of specific events on login
  • Fixed "auto accept" behavior of certain voice and email outbound tasks

Added

  • Added UI enhancements to address the slowness issues in Transfer Directory
  • Restored sorting functionality present in previous UI versions. For more details, see "Team View Changes" section of Migrate from Flex UI 1.x.x to 2.x.x
  • Added the ability to fetch and display call transcripts to agents for Google Dialogflow CX Virtual Agent voice calls

v 2.1.2

@twilio/flex-ui@2.1.2

release date June 28, 2023

Fixed

  • Fixed logging issues in Flex Configuration API enabling custom settings.
  • Fixed initialization issues using timeout for dependencies.

v 2.1.1

@twilio/flex-ui@2.1.1

Release date Apr 14, 2023

Fixed

  • Added improvements to in-progress message handling on select custom Conversation channels when switching between tasks

v 2.1.0

@twilio/flex-ui@2.1.0

Release date Feb 8, 2023

Changed

  • Added additional country codes to the dialpad dropdown when making an outbound call
  • Removed Beta label from autogenerated API documentation

Fixed

  • Updated Plugin initialisation checks to decrease the load time of Flex UI
  • Fixed an issue where the unread chat notification was not appearing correctly when accepting a task
  • Fixed an issue where a disconnected agent’s status appeared as online when they were offline
  • Updated scroll bar behaviour for code samples in autogenerated API documentation
  • Fixed an issue where API documentation feedback could not be sent
  • Restored the ability to navigate within chat messages via the keyboard after switching between tasks
  • Fixed the logic for Hidden Worker Filters

Added

Known issues

  • We have had reports of intermittent issues with call hold state, where the actual hold state and UI hold state are inconsistent. This is being actively investigated. Please see "Changes to Sync usage in Flex UI" below for more details.

v 2.0.3

@twilio/flex-ui@2.0.3

release date June 28, 2023

Fixed

  • Fixed logging issues in Flex Configuration API enabling custom settings.
  • Fixed initialization issues using timeout for dependencies.

v 2.0.2

@twilio/flex-ui@2.0.2

Release date Dec 15, 2022

Changed

  • Removed Beta notice from the API documentation

Fixed

  • Updated anchor link scrolling in API documentation so heading is no longer hidden behind the header
  • Fixed an issue with submitting feedback on API documentation

Known issues

  • We have had reports of intermittent issues with call hold state, where the actual hold state and UI hold state are inconsistent. This is being actively investigated. Please see Changes to Sync usage in Flex UI below for more details.

v 2.0.1

@twilio/flex-ui@2.0.1

Release date Dec 9, 2022

Changed

  • Updated messages in Status report and Degraded mode notifications

v 2.0.0

@twilio/flex-ui@2.0.0

Release Date: Dec 7, 2022

Flex Conversations

1.a - Main channel as SMS and having another tasks.png

Flex UI 2.0 supports both Flex Conversations and Legacy messaging.

Flex UI 2.0 support Flex Conversations and its new messaging features:

WhatsApp channel and attachments support - WhatsApp is now available as a native channel and agents can have conversations with customers using plan text or attachments. Note, currently only one attachment per message is supported.

MMS support - Agents can now send and receive MMS messages when having a conversation with the customer over SMS channel. Note, only MMS to +1 numbers is supported.

Supervisor attachment monitoring - Supervisors can now access attachments when monitoring live conversations and viewing chat transcripts

Attachment configuration - Admins can now configure attachment settings in Console per each messaging address.

Messaging UX improvements - we have improved messaging experience for agents, this includes

  • New message separator and scroll to newest message button - identify which messages in the list are new and quickly scroll down to the bottom to see new messages in the conversation.
  • Text and attachment in a single message - compose and send a single message that contains both text and one attachment
  • Delivery failed receipts - get notified when a message has not been delivered
  • Message loading indicator - now when scroll up for more messages, if loading messages takes a bit longer, we will show you a loading spinner

For more info on Flex Conversations and the new capabilitiew, visit Flex Conversations documentation

Conversations SDK support

Flex UI now supports Conversations SDK and Programmable Chat SDK support has been removed. If you have an existing Flex project and plugins that you wish to migrate to v2.0, follow our migration guide

New messaging input field

2. Image - New messaging input field.png

For developers, we are now providing a more customizable messaging component MessageInputV2. Its a new Programmable component with 2 children

<MessageInputV2>
    <MessageInputArea key="textarea"/>
    <MessageInputActions key="actions"/>
</MessageInputV2>

MessageInputActions component is also a Programmable component and contains the message send button and the file attachment button (if file attachments are enabled). Easily add custom actions to this component with component add methods.

We have also introduced new default props

  • use rows prop to set input field height
  • use hideSendButton prop to hide Send button to free more space for your custom actions. Use it together with returnKeySendsMessage to enable sending message on Enter.

Learn more about new components in our Flex UI API docs.

Web Accessibility improvements

In Flex UI 2.0 we are aligning to WCAG 2.1 level AA standards to support our customers in building accessible user experiences. We are gradually improving Web accessibility of our out-of-the-box Flex UI experience and tools used to customize it.

In this version we have introduced accessible color theme built with Twilio Paste including a Dark mode theme and improved accessibility support with a clearer focus state, improved keyboard navigation and screen reader support for Agent experience.

To learn more in Flex UI web accessibility.

Degraded mode

We have introduced a Degraded mode for Flex UI - now Flex UI will initialize with limited capabilities, even if some of the components like SDK’s (TaskRouter, Conversations, Voice or Sync) are down. In case of disruptions in Twilio services, Flex User will be able to login to Flex and perform certain tasks that are still available. For example, in the case of Twilio Voice experiencing an incident, your agent will still be able to handle messaging tasks.

Users will see a notification informing them of a possible disruption in the normal work of Flex UI and they will be able to download a thorough report with error details and logs.

3. Image - Degraded mode_Global notification.png

For more on error handling and reporting, check out our Troubleshooting Flex UI guide.

User activity controls improvements

We have updated activity controls and user profile for easier access and improved programmability.

4. Image - Status and Profile.png

We have introduced a new programmable component Activity is added to MainHeader. This allows developers to replace this component with more custom activity controls that suite their business workflows.

We also made changes to the UserCard component. We have removed activity controls and changed the layout.

Note, this is a potential breaking change if you have customized UserCard and its child components using CSS. Check out our migration guide, if you are upgrading an existing Flex project to Flex UI 2.0.

Teams view, Queue stats and Quality management improvements

We have introduced several updates to the supervisor capabilities:

  • In Queue Stats, channels with no data or only 0's are no longer displayed
  • In Quality Management:
    • We have allowed question sorting for questionnaire
    • Added notifications for successful and unsuccessful operations
    • Added form validation
    • Added questionnaire visibility toggle
  • In Conversations Player
    • we have added a permission check for player.view.player before displaying conversation content so Player does not show with an error when user does not have permission to access recordings
    • Generate a backup waveform in the browser will now be showing when agents and customers are talking in the call recording Player. This enables Player to generate waveforms for recordings that are not accessible by Twilio backend services - encrypted by public key, copied to custom storage etc
    • Overlay Player will now support new address format of drill down links in Flex Insights Historical Reporting

Upgrade developer tools

In this version, we have upgrade developer tools to like twilio SDK's and major dependencies, which required a major version upgrade of a Flex UI library.

Upgraded dependencies

  • Node -> >= 14
  • React & React DOM -> ^17.0.0
  • Redux -> ^4.0.5
  • React-redux -> ^7.2.2
  • React-router-redux -> removed
  • Emotion -> ^11.1.3
  • Material UI -> ^4.12.3

Upgraded SDK's

  • Conversations SDK -> 2.1.0
  • Voice SDK -> 2.0.1
  • TaskRouter SDK -> ^0.5.9

For more details on all the upgraded tools, check out our migration guide

Twilio Paste support

We’ve have integrated Twilio Paste support into the Flex UI. Twilio Paste is the design system that Twilio created to support its own efforts to create consistent, inclusive, and delightful experiences. Now, Flex UI developers and partners can use the same component library for plugin development as Twilio’s developers. This means that partners can more easily ensure consistent styling and branding for their customers, without having to bring in extensive UI development expertise.

Theming improvements

Flex UI 2.0 now uses a new theming structure that more closely maps to the Twilio Paste design system. This new structure is based on the concept of design tokens, a set of variables that you can modify. This structure promotes both consistency, customization and web accessibility.

New theme config - We have introduced a new configuration key called config.theme with the following structure

interface ThemeConfigProps {
   isLight?: boolean; // Represents if light or dark theme
   tokens?: Tokens; // Paste tokens
   componentThemeOverrides?: Object; // Object containing styles of the component which is to be overridden.
}

Component theming - For components which receive the theme as props, props.theme.tokens is introduced. For more on each token information, please refer to Twilio Paste

Custom tokens - we have added support for customer tokens so you can pass your own custom tokens to theme using the example below

  appconfig = {
    theme: {
      tokens: {
        custom: {
          myCustomToken: "#ccc"
        }
      }
    }
  }

ThemeProvider - Introducing a new API Flex.setProviders() which can be used to load providers on the root level once and don’t have to worry about wrapping again as the context will correctly set. Now to use Paste in Flex plugins, developers will not need to wrap Paste ThemeProvider over all its components. Check out our Theming docs for examples of how this can be used or explore the API in our Flex UI API docs.

New Actions and Flex Events for TaskRouter SDK

We have added new Flex actions wrapping TaskRouter

import { Actions } from "@twilio/flex-ui";

// Set worker attributes
Actions.invokeAction("SetWorkerAttributes", { attributes: {}, mergeExisting: true });

// Update worker token
Actions.invokeAction("UpdateWorkerToken", { token: "newToken" });

// Update task attributes
Actions.invokeAction("SetTaskAttributes", { attributes: {}, mergeExisting: true });

// Issue a Call to a Worker
Actions.invokeAction("IssueCallToWorker", { callerId: "callerId", twiMLUrl: "twiMLUrl", options: {} });

// Dequeue the Reservation to the Worker.
// This will perform telephony to dequeue a Task that was enqueued using the Enqueue TwiML verb.
// A contact_uri must exist in the Worker's attributes for this call to go through.
Actions.invokeAction("DequeueTask", { options: {} })

// Redirect the active Call tied to this Reservation
Actions.invokeAction("RedirectCallTask", { callSid: "callSid", twiMLUrl: "twiMLUrl", options: {} });

// Update the Worker's leg in the Conference associated to this Reservation
Actions.invokeAction("UpdateWorkerParticipant", { options: {} });

// Update the Customer leg in the Conference associated to this Task
Actions.invokeAction("UpdateCustomerParticipant", { options: {} });

and introducing new Flex Events wrapping TaskRouter event

import { Manager } from "@twilio/flex-ui";
const manager = Manager.getInstance();

// Emitted when a worker receives a new task
manager.events.addListener("taskReceived", (task: ITask) => {});

// Emitted when the worker's activity changes
manager.events.addListener("workerActivityUpdated", (activity: Activity, allActivities: Map<string, Activity>) => {});

// Emitted when the worker's attributes changes
manager.events.addListener("workerAttributesUpdated", (newAttributes: Record<string, any>) => {});

// Emitted when the worker's task status gets updated
manager.events.addListener("taskUpdated", (task:ITask) => {});

// Emitted when the worker's task gets set to 'accepted'
manager.events.addListener("taskAccepted", (task:ITask) => {});

// Emitted when the worker's task gets set to 'canceled'
manager.events.addListener("taskCanceled", (task:ITask) => {});

// Emitted when the worker's task gets set to 'completed'
manager.events.addListener("taskCompleted", (task:ITask) => {});

// Emitted when the worker's task gets set to 'rejected'
manager.events.addListener("taskRejected", (task:ITask) => {});

// Emitted when the worker's task gets set to 'rescinded'
manager.events.addListener("taskRescinded", (task:ITask) => {});

// Emitted when the worker's task gets set to 'timeout'
manager.events.addListener("taskTimeout", (task:ITask) => {});

// Emitted when the worker's task gets set to 'wrapup'
manager.events.addListener("taskWrapup", (task:ITask) => {});

Now you can use exlusively Flex UI Actions Framework when working with TaskRouter SDK, without needing to access its methods directly.

Visit our Flex UI API docs for more details on Actions and Events

State management improvements

As part of the upgrades to our core APIs, Flex UI 2.0 includes the Redux Toolkit and some new APIs for managing your internal state. These tools provide some guardrails for your state management, helping you set up boilerplate code more easily and with better defaults.

useFlexSelector - A wrapper around Redux's useSelector method. It exposes the same API but adds some Flex validations to ensure Flex's internal state is usable

useFlexDispatch - A wrapper around Redux's useDispatch method. It prevents dispatches from causing side effects to Flex's state, ensuring your changes work as expected

Go to our docs to learn more about how to manage state with Flex UI, use Redux and explore the details of the new state management API's

Deprecated and unsupported features

  • Legacy dialpad - we are no longer supporting Legacy dialpad implementations. We advice migrating to the natively supported dialpad. Checkout the migration guide for more info on how to switch.
  • Debugger Integration - this integration is not yet supported in Flex UI 2.0. More updates for debugger integration options coming soon.
  • Flex UI Diagnostics tool - this pilot feature is not yet supported in Flex UI 2.0.
  • Flex Solutions and community plugins - Plugins and Solutions provided by Twilio community engineers, are not yet migrated on to Flex UI 2.0 version.

Other changes

  • We have added a mute button to LiveCommsBar to access mute action easily when the Agent is on a live call and remove Mute button from the MainHeader
  • React & ReactDOM are now peer dependencies
  • MessageState & ITask interfaces now accept a TaskAttributes argument
  • Added support for exact prop for React Router
  • Check input device before outbound call
  • Added alert dialog if an inbound call comes in during an outbound call
  • Add support for React router params to custom components, you can now get params from url through react router
  • Fixed privilege escalation security vulnerability
  • Support .credit domain - link in chat with this domain will now be clickable

Public Beta versions of Flex UI 2.0 are listed below.

v 2.0.0-beta.3

@twilio/flex-ui@2.0.0-beta.3

Release Date: Nov 10, 2022

Fixed

  • Fixed an issue with type definitions that prevented some customers from creating new plugins.

v 2.0.0-beta.2

@twilio/flex-ui@2.0.0-beta.2

Release date: October 24th, 2022

Changed

  • Improved reliability of core contact center functionality in degraded mode
  • Moved Debugger UI to Status Report and released to GA
  • Consume the latest Paste libraries @twilio-paste/core 15.3.0 and @twilio-paste/icons 9.2.0
  • Native Supervisor “Analyze” and “Dashboards” views are now picked by default over the legacy ones

Fixed

  • Performance improvements to the Queue Stats view
  • Users can no longer interact with Status Report (formerly Debugger UI) when the token has expired
  • TaskInfoPanel in Supervisor view can now be customized
  • Fixed issue with individual user access to Insights Dashboards
  • Fixed a bug in Historical Reporting where segment links were not clickable in created KPI dashboards
  • Message input no longer remains editable if the conversation is closed via API
  • Fixed an issue preventing audio constraints from being applied to the audio device
  • Fixed an issue where remote config loglevel was not being applied correctly to SDK logs
  • Tasks in TeamsView now stack horizontally with a scrollbar rather than vertically
  • Chat now fetches older messages if all the newer messages are displayed, even without scroll interaction. This fixes an issue where older messages were hidden when the Chat Canvas is zoomed out
  • Task-specific notifications now only shown if they are related to the selected task
  • Fix chat messages sort order for screen-readers
  • Various accessibility improvements

Added

  • The downloadable report provided by Status Report now includes a summary of the user’s degraded mode state and information about Twilio service status
  • Scroll positions are now preserved between conversations
  • selectionStart and selectionEnd now added as part of conversationInput state
  • Chat messages are now keyboard navigable using the up/down arrow keys
  • Flex UI will now wait for plugins to complete initialisation after login before moving on

v 2.0.0-beta.1

@twilio/flex-ui@2.0.0-beta.1

Release date: March 30th, 2022

Rate this page:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.

Thank you for your feedback!

Please select the reason(s) for your feedback. The additional information you provide helps us improve our documentation:

Sending your feedback...
🎉 Thank you for your feedback!
Something went wrong. Please try again.

Thanks for your feedback!

thanks-feedback-gif