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.
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.
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 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.
Effect on Flex user experience
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.
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.
Yes. We have only removed it from the parts of Flex UI mentioned above.
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.
We are currently evaluating other workflows that currently use Sync that could be improved by reducing dependencies.
Please contact Support to report any changes between these versions.
@twilio/flex-ui@2.7.0
Release date April 15, 2024
Flex UI 2.7.0 is now available. It includes AI-generated highlights and more customer data in Agent Copilot and Unified Profiles in Flex, a pause option in Email in Flex, Flex on Azure Virtual Desktop, and the option to begin using Flex’s enhanced SSO configuration. You'll also notice a number of feature and UI enhancements, bug fixes, and more.
@twilio/flex-ui@2.6.1
Release date March 4, 2024
@twilio/flex-ui@2.6.0
Release date February 14, 2024
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.
Real-time Queues View:
@twilio/flex-ui@2.5.2
Release date February 26, 2024
@twilio/flex-ui@2.5.1
Release date January 22, 2024
@twilio/flex-ui@2.5.0
Release date December 4, 2023
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.
console_errors_included
to
true
in the
debugger_integration
section.
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.
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:
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.
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.
@twilio/flex-ui@2.4.2
Release date November 29, 2023
@twilio/flex-ui@2.4.1
Release date October 17, 2023
@twilio/flex-ui@2.4.0
Release date September 28, 2023
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.
@twilio/flex-ui@2.3.5
Release date January 9, 2024
@twilio/flex-ui@2.3.4
Release date September 7, 2023
@twilio/flex-ui@2.2.2
Release date September 6, 2023
@twilio/flex-ui@2.1.3
Release date August 29, 2023
@twilio/flex-ui@2.3.3
Release date July 14, 2023
@twilio/flex-ui@2.3.2
Release date July 10, 2023
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.
@twilio/flex-ui@2.3.1
Release date July 3, 2023
Flex 2.3.1 is now available with betterments for initialization and logging along with UI improvements.
@twilio/flex-ui@2.3.0
Release date June 28, 2023
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.
@twilio/flex-ui@2.2.1
release date June 28, 2023
@twilio/flex-ui@2.2.0
Release date May 29, 2023
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.
@twilio/flex-ui@2.1.2
release date June 28, 2023
@twilio/flex-ui@2.1.1
Release date Apr 14, 2023
@twilio/flex-ui@2.1.0
Release date Feb 8, 2023
@twilio/flex-ui@2.0.3
release date June 28, 2023
@twilio/flex-ui@2.0.2
Release date Dec 15, 2022
@twilio/flex-ui@2.0.1
Release date Dec 9, 2022
@twilio/flex-ui@2.0.0
Release Date: Dec 7, 2022
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
For more info on Flex Conversations and the new capabilities, 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
For developers, we are now providing a more customizable messaging component MessageInputV2. It's a new Programmable component with 2 children
_10<MessageInputV2>_10 <MessageInputArea key="textarea"/>_10 <MessageInputActions key="actions"/>_10</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
rows
prop to set input field height
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.
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.
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.
For more on error handling and reporting, check out our Troubleshooting Flex UI guide.
We have updated activity controls and user profile for easier access and improved programmability.
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.
We have introduced several updates to the supervisor capabilities:
player.view.player
before displaying conversation content so Player does not show with an error when user does not have permission to access recordings
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
Upgraded SDK's
For more details on all the upgraded tools, check out our migration guide
We 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.
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
_10interface ThemeConfigProps {_10 isLight?: boolean; // Represents if light or dark theme_10 tokens?: Tokens; // Paste tokens_10 componentThemeOverrides?: Object; // Object containing styles of the component which is to be overridden._10}
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
_10 appconfig = {_10 theme: {_10 tokens: {_10 custom: {_10 myCustomToken: "#ccc"_10 }_10 }_10 }_10 }
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.
We have added new Flex actions wrapping TaskRouter
_27import { Actions } from "@twilio/flex-ui";_27_27// Set worker attributes_27Actions.invokeAction("SetWorkerAttributes", { attributes: {}, mergeExisting: true });_27_27// Update worker token_27Actions.invokeAction("UpdateWorkerToken", { token: "newToken" });_27_27// Update task attributes_27Actions.invokeAction("SetTaskAttributes", { attributes: {}, mergeExisting: true });_27_27// Issue a Call to a Worker_27Actions.invokeAction("IssueCallToWorker", { callerId: "callerId", twiMLUrl: "twiMLUrl", options: {} });_27_27// Dequeue the Reservation to the Worker._27// This will perform telephony to dequeue a Task that was enqueued using the Enqueue TwiML verb._27// A contact_uri must exist in the Worker's attributes for this call to go through._27Actions.invokeAction("DequeueTask", { options: {} })_27_27// Redirect the active Call tied to this Reservation_27Actions.invokeAction("RedirectCallTask", { callSid: "callSid", twiMLUrl: "twiMLUrl", options: {} });_27_27// Update the Worker's leg in the Conference associated to this Reservation_27Actions.invokeAction("UpdateWorkerParticipant", { options: {} });_27_27// Update the Customer leg in the Conference associated to this Task_27Actions.invokeAction("UpdateCustomerParticipant", { options: {} });
and introducing new Flex Events wrapping TaskRouter event
_35import { Manager } from "@twilio/flex-ui";_35const manager = Manager.getInstance();_35_35// Emitted when a worker receives a new task_35manager.events.addListener("taskReceived", (task: ITask) => {});_35_35// Emitted when the worker's activity changes_35manager.events.addListener("workerActivityUpdated", (activity: Activity, allActivities: Map<string, Activity>) => {});_35_35// Emitted when the worker's attributes changes_35manager.events.addListener("workerAttributesUpdated", (newAttributes: Record<string, any>) => {});_35_35// Emitted when the worker's task status gets updated_35manager.events.addListener("taskUpdated", (task:ITask) => {});_35_35// Emitted when the worker's task gets set to 'accepted'_35manager.events.addListener("taskAccepted", (task:ITask) => {});_35_35// Emitted when the worker's task gets set to 'canceled'_35manager.events.addListener("taskCanceled", (task:ITask) => {});_35_35// Emitted when the worker's task gets set to 'completed'_35manager.events.addListener("taskCompleted", (task:ITask) => {});_35_35// Emitted when the worker's task gets set to 'rejected'_35manager.events.addListener("taskRejected", (task:ITask) => {});_35_35// Emitted when the worker's task gets set to 'rescinded'_35manager.events.addListener("taskRescinded", (task:ITask) => {});_35_35// Emitted when the worker's task gets set to 'timeout'_35manager.events.addListener("taskTimeout", (task:ITask) => {});_35_35// Emitted when the worker's task gets set to 'wrapup'_35manager.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
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
LiveCommsBar
to access mute action easily when the Agent is on a live call and remove Mute button from the
MainHeader
MessageState
&
ITask
interfaces now accept a TaskAttributes argument
exact
prop for React Router
.credit
domain - link in chat with this domain will now be clickable
Public Beta versions of Flex UI 2.0 are listed below.
@twilio/flex-ui@2.0.0-beta.3
Release Date: Nov 10, 2022
@twilio/flex-ui@2.0.0-beta.2
Release date: October 24th, 2022
@twilio/flex-ui@2.0.0-beta.1
Release date: March 30th, 2022