Flex UI Release Notes for v1.x.x
This page includes the release notes related directly to Flex UI for versions 1.x.x. You can find release notes for v 2.x.x. here and for updates on other components of Flex Platform visit the Twilio Changelog and select the Flex product.
For detailed description of Flex UI public interfaces with code examples for each Flex UI version, visit our Flex UI API docs.
Changes to Sync usage in Flex UI
What has been done?
In Flex UI version 1.33 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 2.0 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 1.34.5
@twilio/flex-ui@1.34.5
release date November 1, 2023
Fixed
- Updated the Voice SDK to version 1.15.1. Voice SDK 1.15.1 fixes a Chrome issue where audio is choppy when another application is also using the audio devices.
v 1.34.4
@twilio/flex-ui@1.34.4
release date September 27, 2023
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.
v 1.34.3
@twilio/flex-ui@1.34.3
release date August 21, 2023
Fixed
- Fixed an issue with SDK auto-reconnect if initialisation fails
- Fixed an issue where the Status Report could be opened while disabled from a notification
- Fixed an issue with the 'Clear Issues' button on Status Reports disappearing in dark mode.
- Fixed a broken hyperlink to Twilio marketplace in Chat Info.
- Fixed an issue where hyperlinks for ‘.me’ URLs were not enabled in Webchat.
v 1.34.2
@twilio/flex-ui@1.34.2
release date July 14, 2023
Fixed
- Increased timeout interval for certain SDKs to address initialisation issues
v 1.34.1
@twilio/flex-ui@1.34.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 1.34.0
@twilio/flex-ui@1.34.0
release date Apr 20, 2023
Changed
- Changes introduced in UI 1.33 for ‘Sync removal from critical path of outbound, transfer and conference state’ have been reverted and behavior present in UI 1.32 is restored. For more info on the Sync removal changes, refer to the section ‘Changes to Sync usage in Flex UI’ in the Flex UI release notes.
- Added support for multiple country codes for the Dominican Republic in the Flex dialpad
Fixed
- Fixed issue around incorrect notification for missing recording when authenticated recording is enabled.
- Fixed issue around userLoggedIn Flex event not getting triggered
- Fixed issue around SideLink added by a plugin not getting displayed correctly
- Fixed issue around Unhold not working correctly when agents transfer call to themselves via a queue.
- Fixed issue around external participant name disappearing when call is put on hold for external warm transfers.
v 1.33.3
@twilio/flex-ui@1.33.3
release date Feb 21, 2023
Fixed
- Fixed issue around increased plugin load time
- Addressed issue with Teams page not displaying the list of workers correctly when the hidden filter property is configured for filtering agents
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 for more details.
v 1.31.3
@twilio/flex-ui@1.31.3
release date Dec 15, 2022
Fixed
- Fixed issue with token refreshment behaviour
v 1.33.2
@twilio/flex-ui@1.33.2
release date Dec 14, 2022
Fixed
- Fixed issue with token refreshment behaviour
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 for more details.
v 1.32.3
@twilio/flex-ui@1.32.3
release date Dec 14, 2022
Fixed
- Fixed issue with token refreshment behaviour
v 1.33.1
@twilio/flex-ui@1.33.1
release date Dec 9, 2022
Changed
- Updated messages in Status report and Degraded mode notifications
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 for more details.
v 1.32.2
@twilio/flex-ui@1.32.2
release date Dec 8, 2022
Changed
- Updated messages in Status report and Degraded mode notifications
v 1.33.0
@twilio/flex-ui@1.33.0
release date Nov 21, 2022
Changed
- Removed Sync backend from critical path of outbound, transfer and conference state.
- Worker and Queue lists now fetch all available items and are no longer restricted to items with updates in the last 30 days.
Fixed
- Minor text updates to Status Report
- Correct Insights dashboards are now shown based on permissions
- Fixed an issue preventing audio constraints from being applied to the device audio
- Disabled Degraded notification when user token has expired
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 for more details.
v 1.32.1
@twilio/flex-ui@1.32.1
release date Nov 10, 2022
Fixed
- Fixed an issue with type definitions that prevented some customers from creating new plugins.
v 1.32.0
@twilio/flex-ui@1.32.0
release date Sep 29, 2022
Changed
- Consume flex-sdk 0.13.0.
- Fetch all queue stats data before updating store on initialisation to improve performance.
- Moved Debugger UI to Status Report and released to GA.
Fixed
- Resolved an issue where Hosted Flex users were not automatically logged in to Flex UI after providing their Twilio account details.
- Users can no longer interact with Status report (formerly Debugger UI) when the token has expired.
- Fixed a bug in Historical Reporting where segment links were not clickable in created KPI dashboards.
- Fixed an issue where remote config loglevel was not being applied correctly to SDK logs.
- Restore loginHandler functionality inside Flex store.
Added
- Add critical error parsing to provideLoginInfo.
- The downloadable report provided by Status report now includes a summary of the user’s degraded mode state and information about Twilio service status.
- Flex UI will now wait for plugins to complete initialisation after login before moving on.
v 1.31.2
@twilio/flex-ui@1.31.2
release date Jun 28, 2022
Fixed
- Fixed an issue with loginHandler session not being supported in the previous version.
v 1.31.1
@twilio/flex-ui@1.31.1
release date Jun 6, 2022
Fixed
- During login, after redirection from SSO provider, Flex will no longer ask to re-enter runtime domain for the second time.
v 1.31.0
@twilio/flex-ui@1.31.0
release date May 18, 2022
Added
Degraded mode - now Flex UI will initialize with limited capabilities, even if some of the components like SDK’s (TaskRouter, Conversations, Voice or Sync) are down. This allows users to login to Flex even during a partial disruption of services and use the unaffected functionality. Learn more about degraded mode in our docs.
Fixed
- Expired tasks will no longer be kept in redux store on worker init
- MessageBubble will now be able to handle null message body
- Markdown links without protocol prefix will no longer be interpreted as internal links
v 1.28.2
@twilio/flex-ui@1.28.2
release date Feb 07, 2022
Fixed
- Overlay Player support for new address format of drill down links in Flex Insights Historical Reporting.
v 1.29.3
@twilio/flex-ui@1.29.3
release date Feb 07, 2022
Fixed
- Overlay Player support for new address format of drill down links in Flex Insights Historical Reporting.
v 1.30.2
@twilio/flex-ui@1.30.2
release date Feb 03, 2022
Fixed
- Overlay Player support for new address format of drill down links in Flex Insights Historical Reporting.
v 1.30.1
@twilio/flex-ui@1.30.1
release date Jan 17, 2022
Fixed
- A fix to avoid using useState in chat channel reducer which caused Chat messages to fail to load in some instances
v 1.30.0
@twilio/flex-ui.1.30.0
Added
- Real Time Queue Monitoring with SLA GA. See Twilio Changelog for more details.
Fixed
- The logLevel setting in the Flex Configuration object now also applies to the underlying Flex SDKs
- Fixed session issues related to Flex Insights Analytics Portal
- Fixed an issue with deactivating chat channels which are created during plugin initialisation
v 1.29.2
@twilio/flex-ui@1.29.2
release date Jan 19, 2022
This release contains fixes to our pilot or private beta features.
v 1.29.1
@twilio/flex-ui@1.29.1
release date Dec 01, 2021
Fixed
-
Fixed bug with
isCallTask
handlebar helper function
v 1.29.0
@twilio/flex-ui@1.29.0
release date Nov 10, 2021
Added
- Improvements to Flex Dialpad:
- Zero key can now be long pressed to enter a +
- Backspace now deletes last entered digit
Fixed
- Custom audio from AudioPlayerManager no longer plays unintentionally during outbound calls
- Fixed an issue with audio not being played when Flex tab is not active or when the browser is minimised. Issue was introduced due to changes in Chrome Autoplay policy.
- Fixed issue with valid runtime domains not being accepted
- Fixed text alignment issue on empty task canvas on small screens
- Fixed issue with search in Flex UI API reference
- Fixed issue with DataTable not updating outside of viewport
- When switching from compact overlay Player to Conversation Screen, the call that user started listening to will continue playing without interruption
v 1.28.1
@twilio/flex-ui@1.28.1
release date Oct 19, 2021
Fixed
- Fixed an issue where plugins were not loading correctly for customers who were hosting their own flex-ui library
v 1.28.0
@twilio/flex-ui@1.28.0
release date Sep 30, 2021
Added
- Flex Dialpad is now GA! This release brings improvements in quality and reliability and solves several known limitations. For more information, refer to the Flex Dialpad documentation
- An audio device will now be checked readiness before placing the call and handle errors related to audio device errors when placing outbound calls
- To avoid several clashing concurrent calls, placing outbound calls when having another call ongoing will now be disabled.
Fixed
- Fixed an issue where an unsupported file could be pasted to the chat
- Fixed an issue where chat date separator was positioned incorrectly
v 1.27.0
@twilio/flex-ui@1.27.0
release date Jun 21, 2021
Added
- Real Time Queue Monitoring with SLA Public Beta. To try the Queue Monitoring, visit Flex settings to enable it for your account. See Twilio Changelog for more details.
- Advanced Filtering in Teams View enabled by default.
- Updated navigation in Flex Insights dashboards with programmability improvements. The new navigation is optional and can be enabled in Flex settings. If you run self-hosted Flex make sure you request our support to enable access to Flex Insights for your domain.
Changed
- Programmable access to workspace-level queue statistics has changed since the release of Real Time Queue Monitoring with SLA Private Beta. Please review the latest programmability documentation.
Fixed
- For workers without activity changes in the last 30 days Teams View no longer shows NaN as the activity duration
v 1.26.3
@twilio/flex-ui@1.26.3
release date June 7, 2021
Dependencies updated
- Upgraded Handlebars version to 4.7.7
v 1.26.2
@twilio/flex-ui@1.26.2
release date June 3, 2021
Added
- Notification for unexpected token expiry. If the user’s access token is removed from local storage for whatever reason, they receive a notification to refresh the page in order to refresh their token.
- More verbose logging around SSO login functionality for debugging purpose
v 1.26.1
@twilio/flex-ui@1.26.1
release date May 13, 2021
Added
- Transfer directory hidden filters - Now you can programmatically pre filter the list of agents or queues in the transfer directory.
WorkerDirectoryTabs
accepts 2 new default propshiddenWorkerFilter
andhiddenQueryFilter
which are filters that are applied to the list together with the filter applied due to user typing in the search string. For example, you can choose to display and search only agents with available status. To learn more about Transfer directory hidden filters, go to Flex docs. ApplyListFilters
andResetListFilters
actions are now emitted when the apply or reset button is clicked in TeamsView filters. To learn more about Actions Framework go to our Flex UI Programmability docs.
Changed
- Browser Notifications and Markdown for Web Chat are now Generally Available and can be turned on in Flex settings
- Error reporting - Flex UI will now be reporting on errors that end-users experience. This will help us continuously improve the quality of the application and get more insights into issues that need troubleshooting. To read more about ways to troubleshoot Flex UI, including how you can opt out of error reporting, go to Flex docs
Deprecated
- Deprecated unintentionally exported private interfaces
Flex.ErrorManager.processError
andFlex.ErrorManager.createAndProcessError
Fixed
- Fixed an issue where agent changing activity to the same one resulted in an error
WorkerDirectoryTabs
can now be accessed directly and not just throughWorkerDirectory.Tabs
- Star rating in Conversation screen now renders correctly
- Negative time values in Conversation Screen comment tooltip are now correctly formatted
- Added error notification when copy to clipboard fails because Flex is embedded in iframe without copying to clipboard disabled (
allow="clipboard-write”
) - Initiating outbound calling will now be disabled, while another outbound call is being attempted
- Transfer directory will now be closed automatically, if the call is disconnection
- Fixed Player waveform render issues on displays with higher pixel ratio
- Fixed an issue where fast switching between tasks in Teams View caused uncaught exception
- Initiate transfer button in Call Canvas now has a tooltip
v 1.26.0
@twilio/flex-ui@1.26.0
release date May 11, 2021
Added
- Transfer directory hidden filters - Now you can programmatically pre filter the list of agents or queues in the transfer directory.
WorkerDirectoryTabs
accepts 2 new default propshiddenWorkerFilter
andhiddenQueryFilter
which are filters that are applied to the list together with the filter applied due to user typing in the search string. For example, you can choose to display and search only agents with available status. To learn more about Transfer directory hidden filters, go to Flex docs. ApplyListFilters
andResetListFilters
actions are now emitted when the apply or reset button is clicked in TeamsView filters. To learn more about Actions Framework go to our Flex UI Programmability docs.
Changed
- Browser Notifications and Markdown for Web Chat are now Generally Available and can be turned on in Flex settings
- Error reporting - Flex UI will now be reporting on errors that end-users experience. This will help us continuously improve the quality of the application and get more insights into issues that need troubleshooting. To read more about ways to troubleshoot Flex UI, including how you can opt out of error reporting, go to Flex docs
Deprecated
- Deprecated unintentionally exported private interfaces
Flex.ErrorManager.processError
andFlex.ErrorManager.createAndProcessError
Fixed
- Fixed an issue where agent changing activity to the same one resulted in an error
WorkerDirectoryTabs
can now be accessed directly and not just throughWorkerDirectory.Tabs
- Star rating in Conversation screen now renders correctly
- Negative time values in Conversation Screen comment tooltip are now correctly formatted
- Added error notification when copy to clipboard fails because Flex is embedded in iframe without copying to clipboard disabled (
allow="clipboard-write”
) - Initiating outbound calling will now be disabled, while another outbound call is being attempted
- Transfer directory will now be closed automatically, if the call is disconnection
- Fixed Player waveform render issues on displays with higher pixel ratio
- Fixed an issue where fast switching between tasks in Teams View caused uncaught exception
- Initiate transfer button in Call Canvas now has a tooltip
v 1.25.4
@twilio/flex-ui@1.25.4
release date APR 19, 2021
Fixed
- Fixed the issue in Player that prevented from playing recordings provided via custom media links in case the recordings were different for different segments within a single conversation
v 1.25.3
@twilio/flex-ui@1.25.3
release date MAR 31, 2021
Fixed
- Fixed the issue in Player causing Flex UI to crash when custom media links are provided with invalid or missing start time
v 1.25.2
@twilio/flex-ui@1.25.2
release date MAR 16, 2021
Fixed
- Increased max number of event listeners for the events of Notifications Framework that resulted in
MaxListenersExceededWarning
in console - Fixed voice client connection initiation when agent is using a sip endpoint
v 1.25.1
@twilio/flex-ui@1.25.1
release date FEB 26, 2021
Fixed
- Characters being dropped intermittently when typing in the input field of Messaging Canvas
v 1.25.0
@twilio/flex-ui@1.25.0
release date FEB 24, 2021
Added
- Improvements to Flex UI troubleshooting experience with release of:
- Debugger UI allowing users of Flex UI to get error notifications and download report with full error descriptions and logs. Debugger UI can be enabled for your account via a Pre-release Feature Flag
- Flex UI programmable interfaces that provide ability to retrieve errors and logs programmatically and implement customized error monitoring and reporting
import { Monitor } from "@twilio/flex-ui";
Monitor.getErrors(); // returns { errors: [Monitor.FlexErrorJSON] }
Monitor.getLogs(); // returns { logs: 'string' }
To learn more about Flex UI troubleshooting, Debugger UI and programmatic access to errors and logs, visit our Flex docs and Flex UI API Reference.
- Teams View advanced filters now show legacy custom filters as an additional filtering option in the side bar. You can now use Advanced Filters without losing access to filters you have defined programmatically via the `WorkersDataTable.defaultProps.filters` API. Learn more about advanced filters in Flex documentation and programmability guide. We encourage you to migrate to the advanced filters that provide greater flexibility for the end users.
- Flex Insights overlay player now enables to switch between Segments of a single Conversation without need to go to Conversation Screen. So if a call was transferred you can listen to all parts of the call without leaving Flex Insights dashboards.
Changed
- Initial audio device check (previously in Pilot release) is now in GA and will be enabled by default for all accounts
Fixed
- Transfers:
- It will no longer be possible to transfer to the agent that is unavailable
- Transfer Directory will now close automatically when switching between tasks
- Native Dialpad:
- Default Task Queue will now always visible in Native Dialpad Queue dropdown
- Fixed copy for the error notifications that worker receive while attempting to make an outbound call to the disabled country
- Fixed the markdown code element overflow bug
- Fixed token refresh issue - invalidated sessions will no longer update the access token
- Worker has no longer access to the incoming task content after refreshing the page
v 1.24.3
@twilio/flex-ui@1.24.3
release date FEB 15, 2021
Fixed
- More improvements to token refresh issues - invalidated sessions will no longer update the access token
- Fixed a dependency versions conflict (
react-select
andemotion
) where importing flex-ui in Jest unit tests could sometimes break
v 1.24.2
@twilio/flex-ui@1.24.2
release date JAN 25, 2021
Fixed
- An issue with refreshing of the token
v 1.23.4
@twilio/flex-ui@1.23.4
release date JAN 25, 2021
Fixed
- An issue with refreshing of the token
v 1.24.1
@twilio/flex-ui@1.24.1
release date JAN 14, 2021
Fixed
- A bug where playback speed of a recording in Conversation Player would reset after secure recording URL expiry and refresh.
- A bug where playahead no longer briefly jumped to zero, when secure recording URL is refreshed
Dependencies updated
-
[axios] to version 0.21.1.
-
[twilio-client] to version 1.13.1.
v 1.24.0
@twilio/flex-ui@1.24.0
release date DEC 9, 2020
Added/Changed
- Markdown feature improvements including support for new elements (headings, ordered lists, code snippets, block quotes) and several bugfixes. Note, implementation now relies more on semantic HTML, so if you have styled generic html elements, keep an eye on how they look in chat.
Fixed
- In Outbound dialpad, in case of the default queue not being available in the queue selector, we will now leave selection empty and disable outbound call button
- ToggleSidebar action called twice when sidebar is already collapsed
- Improvements and fixes in Flex Insights Conversation Screen and Player
Dependencies updated
- [twilio-taskrouter] to version 0.5.2
- Updated @gooddata/gooddata-js to version 13.2.0
v 1.23.3
@twilio/flex-ui@1.23.3
release date DEC 2 2020
Fixed
-
Fixed regression in Flex Insights that prevented users from playing some recordings stored outside of Twilio
v 1.23.2
@twilio/flex-ui@1.23.2
release date NOV 23 2020
Fixed
-
Minor internal bugfixes
v 1.23.1
@twilio/flex-ui@1.23.1
release date NOV 16 2020
Fixed
-
Real-time Queue Stats Public Beta can now show more than 50 queues
-
N/A answers are supported for questions with 5 star rating when assessing a conversation in Flex Insights
-
Improvements and fixes in Flex Insights Conversation Screen and Player
v 1.23.0
@twilio/flex-ui@1.23.0
release date NOV 09 2020
Added
- Usability improvements for Conversation Screen - now when users drill down to individual conversations they stay in the Flex UI. Former Conversation Screen is still available but will be deprecated.
- New
enableReduxLogging
flag in AppConfig that will help developers to fine-tune their preferred logging level of redux action
Fixed
- Fixed race condition which can cause concurrent outbound calls
- Fixed inaccuracies in displaying timestamp of messaging task predefined message
Dependencies updated
New versions of dependencies can contain changes in internal APIs that we do not document in release notes. If you’re using any undocumented apis of upgraded dependencies, please review your code and update your customizations as needed. Any changes in undocumented api's are not considered breaking changes, however, if you are using them, this might break your customizations.
Example: This version of chat-sdk contains changes in internal API. To access channel attributes, channel.attributes
is supported as per https://media.twiliocdn.com/sdk/js/chat/releases/3.4.0/docs/Channel.html and not channel.state.attributes
.
v 1.22.2
@twilio/flex-ui@1.22.2
release date OCT 27 2020
Dependencies updated
- [handlebars] upgraded to version 4.7.6
- [twilio-chat] reverted to 3.2.4 (update to version 3.4.0 will be done in 1.23.0 release)
v 1.22.1
@twilio/flex-ui@1.22.1
release date OCT 21 2020
Fixed
- Dragging & dropping text into chat text input
-
Updated lodash transient dependency in CDN bundle to remove a security vulnerability
Dependencies updated
- [twilio-chat] upgraded to 3.4.0
- [twilio-sync] upgraded to 0.12.3
v 1.22.0
@twilio/flex-ui@1.22.0
release date SEP 16, 2020
Changed
- Chat attachments are now in Public beta with new capabilities, like drag-n-drop and copy/paste, ability to send text and attachment together, read-only mode and more. Check out list of capabilities and developer guides in Chat attachment docs.
- Retired feature flag for Real-time Queues View. Real-time Queues View is now always enabled for all accounts.
- Vertical
TaskCanvas
minimum size reduced to allow splitter interaction on small screens. Now, if window height is less than 600px, there will be 20% of space left forTaskList
Fixed
- Domain links with parameters, not separated by a slash, are now recognised as links. For instance:
http://flex.twilio.com?test=true
.
Removed
- Removed the legacy Real-Time Queues View implementation.
v 1.21.1
@twilio/flex-ui@1.21.1
release date SEP 15 2020
Fixed
-
Fixed an issue with Teams View advanced filters. When using custom programmable filtering for agents the custom filtering was not applied after agents changed their state which led to showing agents that did not match the filtering criteria.
v 1.21.0
@twilio/flex-ui@1.21.0
release date AUG 10, 2020
Dependencies updated
- [twilio-taskrouter] to version 0.5.2
Added
- Hidden Filters in the Teams View restrict which users an agent is able to view and manage. Unlike normal filters, these cannot be overridden from the UI.
- Support 'Login with Twilio', enabling admin users and developers to access Flex without SSO for self-hosted applications
- Flex UI API Reference now includes the list of component children for dynamic components (with information such as key, condition, type, alignment and description).
Fixed
- Removed references to
getState()
from within Redux reducer methods to support custom Redux stores. - An incoming task notification will now be shown for unregistered task channels.
Changed
- Search, UI filters, and Hidden Filters in Teams view now work in conjunction. Teams View only displays agents that match all search and filtering criteria.
v 1.20.1
@twilio/flex-ui@1.20.1
release date JUL 1, 2020
Fixed
-
Fixed "calling errorPage of undefined" error by making
errorPage
context-independent
v 1.20.0
@twilio/flex-ui@1.20.0
release date JUN 23, 2020
This version Flex UI API Reference is available here
Dependencies updated
- [twilio-client] to version 1.11.0.
Added
Image and file sharing for Web Chat channel in Pilot
- Agents and Customers can now share images, documents and other files during a chat conversation. You can learn more about Chat attachments here.
Hold music
- Support for new payload properties
holdMusicUrl
andholdMusicMethod
for HoldCall/HoldParticipant actions to configure a custom hold music
HoldCall/UnholdCall actions will now getparticipantCallSid
property in their payload, which indicates the voice connection sid in the conference for the participant. Flex does not take that payload into account, but customers overriding these actions can use that property to filter out custom participants. For more details on specific actions, go to Flex UI API reference
Error handling improvement
- New
Flex.errorPage
API to render a user-friendly error message screen for errors during Flex initialization. Users will now see details of the error and they can download a report which will provide technical details for troubleshooting.
- Introduce
FlexError
- a universal error class that provides unified API to work with Flex exceptions. For more details on FlexError class, go to Flex UI API reference
Notification for signal connectivity issues
- Users will now be notified if Flex UI has lost network connectivity and is trying to reconnect. UI will show a notification when any of the SDKs detect that there is an issue with network connection. UI will also emit
FlexEvent.connectionStateChanged
event for both disconnect and reconnect.
Fixed
- Call canvas dialpad display issue in small screens sizes
v 1.19.0
@twilio/flex-ui@1.19.0
release date APR 27, 2020
Dependencies updated
- [twilio-taskrouter] to version 0.5.1
- [handlebars] to version 4.7.3
Handlebars Dependency Upgrade: Handlebars provides templating for the strings exposed by Flex UI and Flex WebChat UI. In this release we are upgrading Handlebars to 4.7.3 to fix critical security vulnerabilities exposed in previous versions of Handlebars. This may be a breaking change if you use certain undocumented Handlebars features. You can find more information about this change at the following link.
Added
- Add
defaultSortColumn
prop toDataTable
to allow for initial sorting of the table. - Add
sortDirection
prop toDataTable.ColumnDefinition
to specify how the data should be sorted first. The value is either "asc" or "desc". - Add
theme.DataTable.Header
to customizeDataTable
headers. You can specify theroot
andclickable
properties.
For more information on programmable sorting in Queue Stats View visit Queues View programmability guide
Fixed
- Fixed a state issue when starting monitoring a call.
insightsClient
can no longer be broken by incorrectsdkOptions.insights
configuration.- Improved chat message input rendering performance by debouncing store update on keypress.
Changed
- We restructured our internal dependencies and stopped using a bundled dependency for our internal libraries. Developers can now manage their project dependencies using yarn.
- Minor design updates to Queues Stats view.
- Deprecated the
QueuesStats.QueuesDataTable.sortable
property. The table can be sorted by any of the default columns. Find out more about Queue Stats View customizations here. - Deprecated
TeamsView.defaultProps.filtersEnabled
was removed. Custom code still attempting to use it will not work. To toggle Advance Team View Filters on/off, please use the pilot flag on the feature page https://flex.twilio.com/admin/features. For more info on Advanced Team View Filters, go here.
v 1.18.1
@twilio/flex-ui@1.18.1
release date APR 16, 2020
Fixed
-
Fixed a state issue when starting call monitoring
v 1.17.3
@twilio/flex-ui@1.17.3
release date APR 14, 2020
Fixed
-
Fixed a state issue when starting call monitoring
v 1.18.0
@twilio/flex-ui@1.18.0
release date MAR 24, 2020
Release notes updated on April 16th. Added mention of Outbound Dialing and Native Dialpad Public Beta release and Browser notifications bugfix
v 1.18.0
@twilio/flex-ui@1.18.0
release date MAR 24, 2020
Dependendencies updated
- [twilio-taskrouter] updated to version 0.4.5
Added
- Advanced Team View filters to allow supervisor to search or filter your agents by name or activity or add your custom filter criteria like teams or skills
- Updated: Outbound Dialing and Native Dialpad to allow Agents to place outbound calls and Developers to build Click to dial capabilities. For more details, visit our Dialpad documentation
Fixed
- Fixed an issue with fetching and updating workers during call monitoring
- TeamsView filters now correctly applies default filter
- Updated: Browser notifications now get triggered whenever the browser is not in focus
v 1.17.2
@twilio/flex-ui@1.17.2
release date MAR 23, 2020
Fixed
- Fixed an issue with fetching and updating workers during call monitoring
- TeamsView filters now correctly apply default filter
v 1.17.1
@twilio/flex-ui@1.17.1
release date FEB 24, 2020
Fixed
- Fixed a race condition in receiving
initialDeviceCheck
from feature flag config.initialDeviceCheck
in Flex UI will respect the feature flag value.
v 1.17.0
@twilio/flex-ui@1.17.0
release date FEB 20, 2020
Added
- Added new
viewResized
event. This event gets triggered once the window resizes, debounced by 100ms. This will replaceselectedViewChanged
for resize events in the next major release. If you rely onselectedViewChanged
for detecting resize events, consider adoptingviewResized
. - Flex tries to detect a default microphone and test that it works when the application is launched or when any device changes. In some headsets this check can be heard as a glitch so
initialDeviceCheck
can be set tofalse
to prevent this issue.
Fixed
selectedViewChanged
event now gets correctly triggered only once when view changes- Insights Overlay Player now respects a selected theme
- Application now redirects correctly after logging in when developing on HTTPS and port 443
- Application now doesn't crash when a new Agent activity is created while on Queue Stats screen
- Insights Overlay Player now displays an error notification when it fails to fetch a conversation
- After long inactivity, the Insights Overlay Player no longer loses its session token
- Fixed hyperlink color in darker message bubbles
- Improvements to chat performance when typing
- Email domains in MessageBubbles are no longer converted to links
- Triggering a deleted notification will no longer result in an exception
- Filter on Teams View page now preserves its state when navigating away
- Supervisor view now shows call's hold state in task card
Changed
selectedViewChanged
event now receives a second argument:isSameViewResized
. This boolean describes whether the view has actually changed or the same view has been resized.isSameViewResized
will be always set tofalse
onceselectedViewChanged
is deprecated for resize events.
v 1.16.2
@twilio/flex-ui@1.16.2
release date JAN 27, 2020
Fixed
- For browsers without Notification capabilities Flex logs a warning and disables browser notifications.
- Highlight URLs in chat messages only if they are not part of another string
- Fix Handlebars 4.7.0+ errors
- Notify user about a new chat message only if user is a participant of that chat and not supervisor monitoring the chat
v 1.16.1
@twilio/flex-ui@1.16.1
release date JAN 14, 2020
Fixed
- Issue with WebChat messages being marked as read
- Minor UI bugs with pilot dialpad feature
- Removed unwanted CSS parse errors when running unit tests
v 1.15.3
@twilio/flex-ui@1.15.3
release date JAN 14, 2020
Fixed
- Minor UI bugs with pilot dialpad feature
v 1.16.0
@twilio/flex-ui@1.16.0
release date DEC 17, 2019
Dependencies updated
- [twilio-client] to version 1.9.7
Added
Actions Framework
- SendDTMFDigits action to send DTMF tones to a call of a call task. Previously, UI sent those digits directly when you used the DTMF Dialpad component. Now it goes through the action and if you make a custom component that needs to dial DTMF tones, a developer can use this action. Go to Actions Framework docs for more info on Flex UI Actions
Actions.invokeAction("SendDTMFDigits", {
sid: "WRXXXXXXXXXXXXXXXXX",
digits: "567"
});
- HistoricalReporting:view Flex Insights action to respond to dashboard drill-downs of conversations that have media link of type Raw. The action is fired any time you drill down to a conversation or a segment. By replacing the action you can now handle drill-downs however you want – for example, if you want to display a content from a 3rd-party system. See Flex Insights documentation for custom media attached to conversations.
Actions.replaceAction("HistoricalReporting:view", async (url, original) => {
// implement your own handling of URL or call original(url) to use the original handler
})
- ReloadWindow (Insights) action to force page reload from the server, bypassing the browser HTTP cache to have a unified way to recover from unexpected states that might require full refresh.
Actions.invokeAction("ReloadWindow")
Flex Insights
- Player usability improvements - You can now listen to calls and view chats within a dashboard without opening the call in a new browser tab. Quickly skim through many calls within Flex without going back and forth. You can still open the call in a separate tab to comment on and assess it. Go to Player docs for more info
-
Chat transcripts - You can now drill down to chat transcripts from Flex Insights. You can understand the underlying conversations behind your chat-related KPIs. Your supervisors can comment on and assess chat conversations to gather feedback on the quality of agent conversations with your customers. Go to Flex Insights Conversation Screen docs for more info
-
Custom media attachments - You can view custom media attached to conversations. You can use TaskRouter attributes to reference web pages (for example internal CRM records, tickets, etc.) that you can view on drill down directly in Flex Insights. This can add more context to every conversation. Go to Flex Insights docs for more info
Changed
-
Dashboards, Analyze, and Questionnaire editor are now integrated into Flex navigation and are directly accessible from the left navigation bar. This makes Flex Insights a first-class citizen and consistent with the rest of Flex.
-
Flex Insights now displays more detailed status if it is not available or there is another issue. This will enable easier troubleshooting.
Fixed
-
Fixed a bug in Flex Insights when SSO isn't enabled.
-
Fixed a bug where sometimes a permanent sidebar would be added.
-
DTMF Dialpad component will now call
SendDTMFDigits
action
instead of calling Voice SDK directly. -
QueuesDataTable
headers are now localizable with:QueuesStatsHeaderQueueName, QueuesStatsHeaderActiveTasks, QueuesStatsHeaderWaitingTasks, QueuesStatsHeaderLongestWait, QueuesStatsHeaderAgentsActivity.
v 1.15.2
@twilio/flex-ui@1.15.2
release date DEC 05, 2019
Fixed:
- Fixed a bug with stuck scrollbar
- Fix a bug with incorrect number of typing members in the chat typing indicator
v 1.15.1
@twilio/flex-ui@1.15.1
release date DEC 01, 2019
Fixed:
- Authentication issues to WFO (Flex Insights) for customers on https://flex.twilio.com without SSO setup
v 1.15.0
@twilio/flex-ui@1.15.0
release date NOV 22, 2019
Dependencies updated
- [twilio-taskrouter] to version 0.4.1
- [twilio-client] to version 1.9.5
Added
- New Action Framework action:
SetWorkerActivity
, which is invoked when supervisors update a worker’s status. Read more about actions here.
Actions.invokeAction("SetWorkerActivity", { workerSid: "WKXXXXXXXXXXXXXXXXX", activitySid: "WAXXXXXXXXXXXXXXXXX" })
- New variable to Task Channel Definitions API
channel.templates.TaskCanvasTabs.contentTabHeader
for channel specific labels inTaskCanvasTabs
. Now labels ofTaskCanvasTabs
can be changed like any other labels. Note, thatTaskTabAgentCallLabel
andTaskTabAgentChatLabel
strings are no longer used. Find out more about Task Channel Definition API here and strings templating here.
Fixed
- TeamsView correctly renders even if TaskRouter skills array is not defined.
- Text in chat input box can be now correctly selected
v 1.13.2
@twilio/flex-ui@1.13.2
release date OCT 31, 2019
Fixed:
- Minor bugfixes and internal refactoring
v 1.14.1
@twilio/flex-ui@1.14.1
release date OCT 30, 2019
Changed:
-
Numbered List support for Markdown has been temporarily suspended due to some side effects found with the implementation. All other markdown options are still available as part of the released feature. Find out more about Markdown support here
Fixed:
-
Teams View crashed if TaskRouter skills array was not defined properly. Now an error will be logged and Teams View will still be rendered.
v 1.13.1
@twilio/flex-ui@1.13.1
release date OCT 08, 2019
Fixed:
- Using SFDC Identity provider, login flow was stuck at the redirect to pop-up dialog
v 1.14.0
@twilio/flex-ui@1.14.0
release date OCT 07, 2019
Dependencies updated
- [twilio-client] to version ~1.9
Added
Notifications
- We introduced browser notification capabilities:
- Agent will be notified about new task or new message in an active messaging task with a browser notifications if Flex is not in focus
-
- Agent will be requested for browser notification permissions on each login or page refresh if they have not yet made a choice whether to allow or block browser notifications.
-
- Developer will be able to register custom browser notifications for Flex
- Improvements to Notifications Framework:
- NotificationBar can now be given clickable actions
Browser notifications can be enabled via a feature flag. Go to versioning page in Flex Admin UI to turn browser notifications on or off.
Find out more about these and other capabilities of Flex Notifications Framework here
Customer presence
-
Agent and supervisor will now be able to see an indicator of a WebChat customer reachability. It will show a green icon in the task canvas header and the task list item if the customer is online, and a grey one if offline.
-
You can customize the templates
TaskHeaderWebChatStatusAccepted
and/orTaskLineWebChatAssigned
. For these templates, you can access the reachability status viahelper.chat.isCustomerOnline
.
Typing indicator improvements
-
Default template for second line of TaskListItem of WebChat tasks now includes string "typing ..." if there are participants typing in that chat.
-
Typing indicator in WebChat MessagingCanvas now shows count of people typing if that number is above 1.
Unread message count and badges
TaskListItem
andSideNav
now has supports for showing Badges.- TaskListItem will show a badge with count if there are unread messages in the task
- SideNav will show a badge without a count if there are new unaccepted tasks or unread messages in any of the active messaging tasks in Agent Desktop View
- The content of these badges is TaskChannel dependent and can be customised by updating its
componentProps.TaskListItem.Badge.children
property. If the content equal to zero or undefined, no badge is going to be shown.
myTaskChannelDefinition.componentProps.TaskListItem.Badge.children = (
appState: AppState,
context: TaskListItemProps & TaskContextProps
) => {
const badgeContent: number = applyCustomLogic(appState, context); // just an example
return badgeContent;
};
SideNav
has 2 new static properties (AgentDesktop &
Teams
) which represents link components for each view. It can be accessed to change the defaultBadge
property.
Flex.SideNav.AgentDesktop.defaultProps.Badge = {
children: 2
};
Markdown
As of version 1.14.1 of Flex UI, numbered list support for Markdown has been temporarily suspended
Markdown
- Flex UI now has basic markdown support for WebChat tasks. A user can use Flex standard markdown syntax when typing a WebChat message and it will be displayed to agent and WebChat user as formatted text
- Messages with using markdown syntax can also be sent with Programmable Chat REST API into the chat channel using the same Flex markdown syntax and they will displayed for Flex and WebChat users as formatted text.
- WebChat user must be using WebChat V2.2 or later
- Flex standard markdown syntax:
Options |
Syntax |
Bold |
**Bold** |
Italic |
*Italic* |
Strikethrough |
~Strikethrough~ |
Bullet list |
* List * List * List |
Numbered list |
1. One 2. Two 3. Three |
- Find out more about Markdown support here
Other
-
Introduced
ChatChannelHelper
class to wrap all Chat Channel specific helper methods. An instance of a task can be obtained fromTaskHelper.chat
property.TaskHelper.lastChatMessage
method was deprecated, useChatChannelHelper.lastMessage
instead. Now a developer can get access to Task last message, customer presence and typers (array of members who are typing in the channel). Available properties for this class:-
isCustomerOnline
- Returns true if customer is online, false if not -
lastMessage
- Gets helper for last chat message -
typers
- Gets all channel members which are currently typing (except you)
-
Changed
- Function
withTaskContext
now returns a correctly typed component instead of any. Therefore it may not be used as a class decorator anymore, but it must be called. This change may also result in new TypeScript errors surfacing incorrect prop types or similar issues. - Content of localization strings changed:
TaskHeaderStatusAccepted
- this string is no longer used for WebChat tasks. A new string has been introduced for thatTaskHeaderWebChatStatusAccepted
TaskLineChatAssigned
- this string is no longer used for WebChat tasks. A new string has been introduced for thatTaskLineWebChatAssigned
- "Login with Twilio" link on the Login View will open a Twilio login in a new window if Flex is rendered in an iframe element.
- Improvements to Action Framework error handling:
invokeAction
now returns an Error when the Promise is rejectedToggleMute
,HoldCall
,UnholdCall
andHangupCall
to throw an Error instance instead of just an error string in case of a failure. This will allow to provide more detailed error description in the future and improves error tracing down the stack and identify which SDK the error came from.
- The
useLocalState
prop ofMessageInput
is enabled by default for performance improvement
Fixed
-
Update 'How to configure' CRM docs link url
-
Message Input now supports Input Method Editor, allowing to use characters and symbols that are not directly represented on the keyboard itself (like Chinese characters).
v 1.13.0
@twilio/flex-ui@1.13.0
release date AUG 29, 2019
Fixed
- Custom Task Channel Definitions for Chat tasks which were not using chat as TaskRouter task channel, could have caused Flex not to load and initialize the chat channels for accepted tasks in previous sessions.
Added
- All failures that occur during a call transfer will now be shown to a user as notifications
Changed
- UI performance improvements
- We will now unmount WorkersDataTable when user navigates away from Teams View. This allows us to avoid performance consuming updates on Teams View, if user does not have it opened.
v 1.12.1
@twilio/flex-ui@1.12.1
release date AUG 15, 2019
Fixed
- Resolved
@types/uuid
package causing issues withnpm install
command on Windows platform
v 1.12.0
@twilio/flex-ui@1.12.0
release date AUG 14, 2019
Added
-
We have added an
AudioPlayerManager API,
which makes it easier to add sound playback to your custom code when extending Flex UI. Read about it here. -
ChatOrchestrator
object now supports setting orchestrations based on a task. This will allow you to decide how to handle chat based tasks on per task basis.
const orchestrationsCallback = (task: ITask) => {
if (task.sid === "WT12345") {
return [];
}
};
Flex.ChatOrchestrator.setOrchestrations("accepted", orchestrationsCallback);
- We have added ability to send DTMF tones during a voice call to all parties on the call. This includes:
- A new button to call toolbar to display DTMF Dialpad
- A reusable Dialpad UI component
export type DialpadButtonClickCallback = (value: string) => void;
export interface DialpadProps {
onClick: DialpadButtonClickCallback;
}
- 2 new actions are introduced:
- An action
ToggleDTMFDialpad
to open and closed Dialpad in the CallCanvas. - An Action
SetDTMFDialpadDigits
to set digits in the DTMF
- An action
Go to Actions Framework page for more details on actions and their payload.
IncomingTaskCanvas
action buttons are now a programmable componentIncomingTaskCanvasActions.
You can now add, replace or remove these using programmable components content property or Task Channel Definitions API.
Example: Add an eye-iconed button to the end of the list of incoming task canvas actions using content property
Flex.IncomingTaskCanvasActions.Content.add(<IconButton key="hi" icon="Eye" />);
Example: Add an eye-iconed button to the end of the list of incoming task canvas actions using Task Channel Definitions API
Flex.DefaultTaskChannels.Call.addedComponents = [{
target: "IncomingTaskCanvasActions",
component: <IconButton key="hi" icon="Eye" />,
}];
- Add new exports to refer to workers instead of agents:
WorkersDataTable, WorkerListFilterSelect, WorkersDataTable, WorkersDataTableProps and WorkerListFilter
. - Aria props properties to the following components to support accessibility:
- MessageInput:
sendButtonAriaProps
• AriaProps • Send button aria props ({ ariaLabel: "Send Message" }
by default).textAreaAriaProps
• AriaProps • Text area aria props ({ ariaLabel: "Enter your message here to get help" }
by default)
- MessageList:
listContainerAriaProps
• AriaProps • List container aria props ({ ariaLive: AriaLive.Off }
by default).
- EntryPoint:
collapsedIconAriaProps
• AriaProps • Collapsed icon aria props ({ariaLabel: "Click here to open Web Chat and get help."}
by default).openedIconAriaProps
• AriaProps • Opened icon aria props ({ariaLabel: "Hide Chat"}
by default).
- MessageInput:
Example on how to set aria attributes:
FlexWebChat.MessageInput.defaultProps.sendButtonAriaProps = {
ariaLabel: "Send Message",
ariaLive: FlexWebChat.AriaLive.Polite
};
FlexWebChat.MessageInput.defaultProps.textAreaAriaProps = {
ariaLabel: "Enter your message here to get help",
ariaLive: FlexWebChat.AriaLive.Assertive
};
- Chat "Send message" button can now be themed with
theme.Chat.MessageInput.Button
and allows adding text
Example on how to change the icon for a text:
appConfig = {
<...>
colorTheme: {
overrides: {
Chat: {
MessageInput: {
Button: {
borderRadius: "5px",
width: "100px",
fontSize: "10px",
svg: {
display: "none"
},
":after": {
content: '"Send"'
}
}
}
}
}
<...>
Fixed
- Facebook channel definition now expects channel type to be
Facebook
- Workers in Team View
WorkersDataTable
will now be correctly sorted and will maintain its proper position - Team View performance improvements
- Fixed a bug that upon network reconnect started calling for Teams View info twice for every time needed resulting in deteriorating experience.
- Removed the need for all components that showed animating time to have its own timers which consumed resources and hit performance.
- Resolved root cause of occasional crashes that surfaced when user was trying to show more than 200 workers.
- Introduced throttling Sync queries for tasks and workers
- Fixed exception thrown when rendering table rows
IconButton
now has default hover tone dependent on whether theme is dark or light.- Fixed chat crashing when media message is received.
MessageBubble
now displaysMediaMessageError
string on such message. Notifications.dismissNotificationById
will now dismiss ALL notifications by that ID
Plugin Builder v3
release date AUG 6, 2019
The Flex Plugin Builder v3 is now in Beta. This release enables you to build and deploy your plugins directly from the CLI by leveraging the Functions & Assets API. You can integrate the release of your hosted Flex plugins within a CI/CD pipeline.
To opt into the newest version, check our upgrade guide for using the Plugin Builder.
v 1.11.2
@twilio/flex-ui@1.11.2
release date JULY 4, 2019
Fixed
- Agents in Team View now get correctly sorted and keep position.
v 1.11.1
@twilio/flex-ui@1.11.1
release date JULY 1, 2019
Fixed
- Fixed issues with
Twilio.Flex.runDefault()
removing search string from query path.
v 1.11.0
@twilio/flex-ui@1.11.0
release date JUNE 25, 2019
Dependencies updated
- [twilio-taskrouter] to version 0.4.0
Added
- Voice warm transfers - now an agent can have a consult call a conference call with a customer and another agent, and transfer the call to another agent. You can read more about voice warm transfers here. Warm transfers are released in public beta with an option of opt in/out via a feature flag. Go to versioning page in Flex Admin UI to turn warm transfer on or off.
- A
legacy
property toContextProvider
component. This resolves conflicts between multiplereact-redux
versions for self-hosted applications. We suggest not to use multiplereact-redux
versions, but if you need to use multiple versions, pass legacy={true}, then FlexContextProvider
instance will be rendered even with custom Redux store. - A
theme.FormComponents.Select
toTheme
to customize theSelect input item
- A new property
useSeparateInputStore
introduced in the payload for actionSetInputText
. Setting it totrue
, will store the message text in separate state and improves performance of typing in Chat/Messaging/SMS dialog when handling a task. From the next major release of Flex, this prop will be defaulted totrue
. This can be changed by setting the new default propertyuseSeparateInputStore
ofMessageInput.
Flex.MessageInput.defaultProps.useSeparateInputStore = true;
- Added
tasksA
andtasksB
arguments toAgentsDataTable.defaultProps.initialCompareFunction
. This will allow to sort the list of agents based on task attributes rather than worker attributes. For example, you can do initial sort of the agents based on longest duration of the task.
Example:
Flex.AgentsDataTable.defaultProps.initialCompareFunction = (a: Flex.IWorker, b: Flex.IWorker, tasksA: Array<Flex.ITask>, tasksB: Array<Flex.ITask>) => {
return tasksA.length - tasksB.length;
}
Changed
- Flex now loads only those chat channels that a worker is a member of and has an associated task with to optimize the loading time.
- Call task canvas will now go to new list mode if participants would not otherwise fit.
In order to change ParticipantCanvas
when it is in list mode, developer will need to use ParticipantCanvas.ListItem
.
Example: Adding a button to the bottom of the normal participant
Flex.ParticipantCanvas.Content.add(<button key="key">Hi</button>);
Example: Adding a button to the end of participant that is shown in a list
Flex.ParticipantCanvas.ListItem.Content.add(<button key="key">Hi</button>);
theme.FormComponents.TextArea
now applies to thetextarea
container, not directly to the element itself. This is to enforce consistency between form item.
Fixed
- Components properly inherit font property of the
RootContainer
, thus allowing to change font consistently in whole application:
Example: How to set custom font for the whole Flex application
appConfig = {
<...>
colorTheme: {
baseName: "FlexLight",
overrides: {
RootContainer: {
"font-family": "MyCustomFont"
}
}
}
Removed
- Removed
cols
support for text area. - Removed export of
connect
function which did not connect to correct Redux store. - Removed optional configuration URLs from TypeScript Config interface.
v 1.10.0
@twilio/flex-ui@1.10.0
release date JUNE 05, 2019
Added
CallCanvasActions
component that is a set of buttons in the call canvas is now programmable. Now you can add, replace or remove buttons from the Call Canvas. This will allow you to add custom actions to live calls or remove actions you don’t want users to take on a live call.
You can add and remove buttons using Content object
add and remove methods or using Task Channel Definition API
Example: Add an eye-iconed button using Content object
Flex.CallCanvasActions.Content.add(<IconButton key="hi" icon="Eye" />)
Example: Add an eye-iconed button using Task Channel Definition API
Flex.DefaultTaskChannels.Call.addedComponents = [{
target: "CallCanvasActions",
component: <IconButton key="hi" icon="Eye" />,
}];
Fixed
Supervisor.TaskCanvas.Header
andSupervisor.WorkerCanvas.SectionCaption
components were missing keys to override their themes. Now you can style TaskCanvas header and sub section header in WorkerCanvas respectively using Theme object
Supervisor.WorkerCanvas.SectionCaption
Supervisor.TaskCanvas.Header
v 1.9.2
@twilio/flex-ui@1.9.2
release date JUNE 03, 2019
Fixed
- Resolves a situation that could result in an error when initiating supervisor monitoring
- Hold button was displayed in the oposite state to the actual call hold state
v 1.9.1
@twilio/flex-ui@1.9.1
release date MAY 28, 2019
Fixed
initialFirstPanelSize
can be set withinConfiguration
for theAgentDesktopView.Panel1
component
v 1.9.0
@twilio/flex-ui@1.9.0
release date MAY 20, 2019
Dependencies updated
- [twilio-chat] to version 3.2.3
- [twilio-client] to version 1.7.2
- [twilio-sync] to version 0.11.0
- [twilio-taskrouter] to version 0.3.1
- [@material-ui/core] to version 3.9.3
Added
Setting component state
A new action SetComponentState
has been added. This action alters the current state of the component. Component states is a componentName => key/value pairs
dictionary in Redux store that this action manipulates. Read more about this action in Actions Framework.
Additional reducers
We have added 2 new methods to support adding additional reducers:
- Store enhancer
flexStoreEnhancer
to support adding additional reducers.
Example:
const myReduxStore = createStore(
reducers,
compose(
applyFlexMiddleware(),
flexStoreEnhancer // <-- Add enhancer part of compose
)
);
addReducer
api tomanager.store
to add additional reducer.
Example:
manager.store.addReducer("new", newReducer);
Chat Orchestration
ChatOrchestrator
object can now be used to disable default chat orchestration.
- There are three chat orchestrations that are supported and enabled by default:
AddToChatChannel
- Request agent to be added to the chat channel (by default runs on theaccepted
event fromReservation
)DeactivateChatChannel
- Mark chat channel status asINACTIVE
(by default runs onWrapupTask
andCompleteTask
actions and on thewrapup
andcompleted
event fromReservation
object if it was not done already)LeaveChatChannel
- Remove agent from the chat channel (by default runs onCompleteTask
action and on thecompleted
event fromReservation
object if it was not done already)
- Orchestrations can be disabled completely by invoking
ChatOrchestrator.clearAllOrchestrations()
. - Orchestrations can be enabled or disabled by Reservation events (
accepted
,wrapup
,completed
) which affects corresponding actions as well. For example:- Disable orchestrations for
accepted
event:Flex.ChatOrchestrator.setOrchestrations("accepted", []);
Disable marking chats channels as inactive:
Flex.ChatOrchestrator.setOrchestrations("wrapup", []);
Enable removing agent on
completed
event:Flex.ChatOrchestrator.setOrchestrations("completed", ["LeaveChatChannel"]);
- Disable orchestrations for
Setting activity state
Agents can move to an unavailable activity state even if they have pending reservations, and supervisors can set agents with pending reservations to an unavailable state. This capability can be disabled by setting the configuration option rejectPendingReservations
to false or overriding it in the SetActivity
action payload:
Actions.addListener("beforeSetActivity", (payload) => {
payload.options.rejectPendingReservations = true;
});
Other
AgentDesktopView.Panel1
got a new default propertysplitterOrientation
that determines whether orientation of the content will be vertical, horizontal or automatic ("auto"
) based on content size.- New localization strings added
TaskTabSupervisorCallLabel
- Call task tab label in Supervisor task canvas.TaskTabSupervisorChatLabel
- Chat task tab label in Supervisor task canvas.TaskHeaderStatusPending
- Describes task that is in pending state. It's used in TaskCanvasHeader.TaskHeaderGroupCallAccepted
- Describes conference call task that is in accepted state. It's used in TaskCanvasHeader.TaskHeaderStatusAccepted
- Describes task that is in accepted state. It's used in TaskCanvasHeader.TaskHeaderStatusWrapup
- Describes task that is in wrapup state. It's used in TaskCanvasHeader.TaskHeaderStatusCompleted
- Describes task that is in completed state. It's used in TaskCanvasHeader.
TaskCanvasHeader
now accepts a new propsecondLineTemplateCode
. By default it describes the status of the task.- Added
callSid
to Participant object inConferences
state.
Changed
- Chat orchestration failure now can prevent action invocations:
- If chat orchestration fails to mark the chat channel inactive, then
WrapupTask
action will fail. - If chat orchestration fails to remove agent from chat channel, then
CompleteTask
action will fail.
- If chat orchestration fails to mark the chat channel inactive, then
- Chat orchestration will update chat channels as inactive on the Reservation
wrapup
event (if it did not happen inWrapupTask
action already) - Custom components are encouraged to use
withTheme
decorators to injecttheme
prop - Following type definitions are changed for consistency:
CallCanvasProps
renamed toCallCanvasChildrenProps
TaskCanvasProps
renamed toTaskCanvasChildrenProps
NoTaskCanvasProps
renamed toNoTaskCanvasChildrenProps
ParticipantsCanvasProps
split in aParticipantsCanvasProps
subset andParticipantsCanvasChildrenProps
TaskCanvasHeaderProps
split in aTaskCanvasHeaderProps
subset andTaskCanvasHeaderChildrenProps
TaskCanvasTabsProps
split in aTaskCanvasTabsProps
subset andTaskCanvasTabsChildrenProps
TaskInfoPanelProps
split in aTaskInfoPanelProps
subset andTaskInfoPanelChildrenProps
MainHeaderProps
split in aMainHeaderProps
subset andMainHeaderChildrenProps
AgentDesktopViewProps
split in aAgentDesktopViewProps
subset andAgentDesktopViewChildrenProps
LoginViewProps
split in aLoginViewProps
subset andLoginViewChildrenProps
TeamsViewProps
split in aTeamsViewProps
subset andTeamsViewChildrenProps
CRMContainerProps
split in aCRMContainerProps
subset andCRMContainerChildrenProps
LiveCommsBarProps
renamed inLiveCommsBarChildrenProps
MainContainerProps
split in aMainContainerProps
subset andMainContainerChildrenProps
MuteButtonProps
split in aMuteButtonProps
subset andMuteButtonImplProps
RootContainerProps
renamed inRootContainerChildrenProps
SideNavProps
split in aSideNavProps
subset andSideNavImplProps
TaskListButtonsProps
renamed inTaskListButtonsChildrenProps
ViewCollectionProps
split in aViewCollectionProps
subset andViewCollectionImplProps
SupervisorTaskCanvas
tabs title changed from "Overview" to "Call" or "Chat" based on the type of task.
v 1.8.2
@twilio/flex-ui@1.8.2
release date MAY 8, 2019
Fixed
- Resolves a situation that could cause Flex to error while logging in
v 1.8.1
@twilio/flex-ui@1.8.1
release date MAY 6, 2019
Fixed
- Hold/Unhold buttons on CallCanvas correctly call
HoldCall
/UnholdCall
Actions
v 1.8.0
@twilio/flex-ui@1.8.0
release date APR 26, 2019
Added
TaskListButtons
component that is the set of buttons in a tasklist item is now programmable (buttons can be added/removed). Example that shows a button as the last button for call tasks that have status as "accepted":
const shouldShow = (props) => {
return props.task.status == "accepted";
};
Flex.DefaultTaskChannels.Call.addedComponents = [{
target: "TaskListButtons",
component: <IconButton key="eye_button" icon="Eye" />,
options: {if: shouldShow}}];
- Action buttons will be disabled after user click until the action execution is finished to prevent users from invoking the action twice.
- Actions
ToggleSidebar
are introduced with following payload:
{
open?: boolean; // used to explicitly open or close the sidebar.
}
Fixed
- Restored backwards compatibility with the first versions of the Dialpad plugin
- General Flex UI styles (like headers, paragraphs or links) are now applied only to HTML elements that have a class starting with
Twilio
or their direct descendants without any class. The CSS attributes that are meant to be inherited are now under theTwilio-CommonStyles
class.
v 1.7.4
@twilio/flex-ui@1.7.4
release date MAY 8, 2019
Fixed
- Resolves a situation that could cause Flex to error while logging in
v 1.7.3
@twilio/flex-ui@1.7.3
release date MAY 6, 2019
Fixed
- Resolves JS error when a messaging task is accepted
- Hold/Unhold buttons on CallCanvas correctly call
HoldCall
/UnholdCall
Actions
v 1.7.2
@twilio/flex-ui@1.7.2
release date APR 26, 2019
Fixed
- Restored backwards compatibility with the first versions of the outbound dialer plugin
v 1.7.1
@twilio/flex-ui@1.7.1
release date APR 5, 2019
Added
- New template
TaskLineTitle
used for default task channel inIncomingTaskCanvas
Fixed
- Incoming task canvas failed to render for generic/custom task channels
v 1.7.0
@twilio/flex-ui@1.7.0
release date MAR 29, 2019
This release contains several minor fixes, some internal refactoring and foundational work for Warm Transfers
v 1.6.2
@twilio/flex-ui@1.6.2
release date APR 26, 2019
Fixed
- Restored backwards compatibility with the first versions of the outbound dialer plugin
v 1.6.1
@twilio/flex-ui@1.6.1
release date MAR 28, 2019
Fixed
- Breaking issues with`history` package imports (affected the self-hosted builds)
- Mitigation for multiple reservation events after connection drops
v 1.6.0
@twilio/flex-ui@1.6.0
release date MAR 12, 2019
Added
- Call monitor works on calls delivered to agents on non-client endpoints, like hardphone or SIP
Changed
- Visual update for voice call stage
v 1.5.0
@twilio/flex-ui@1.5.0
release date FEB 18, 2019
Added
- WFO identity client integrated and exposed through
Twilio.Flex.Wfo.Identity
- New 'untrustedDomain' exception on login attempts from non-whitelisted domains
- TaskSid and ReservationSid are added to Task Info Panel for easier troubleshooting
Changed
- Flex now requires
<meta name="referrer" content="no-referrer">
element to be present in<head>
section of HTML. If such element does not exists then Flex will issue additional browser redirect in login flow after returning from IdP (and token is present in the URL). - Deprecated
Reserved
andAssigned
keys inTaskStatusBasedTypeBase
for task channel definitions. Use newAccepted
key for reservation accepted state. - On logout, try to detect 'Offline' activity by "sid" (
serviceConfiguration.attributes.taskrouter_offline_activity_sid
and, if that's not provided, fallback to the name. You can now change the name of the 'Offline' activity and users will still be set that activity on logout, or choose a completely different activity that users should be set to on logout, by changingserviceConfiguration.attributes.taskrouter_offline_activity_sid
in the Configuration Service
Fixed
- Use
Pending
task based status key from task channel definition if bothPending
andReserved
were defined forTaskStatusBasedTypeBase
- Agent status in Agent Profile of Teams View now updates currectly, even if Agent is no longer shown in the list
v 1.4.1
@twilio/flex-ui@1.4.1
release date FEB 6, 2019
Fixed
- "Active Agents" filter on the Teams View will find all agents in any activity that is
available
v 1.4.0
@twilio/flex-ui@1.4.0
release date JAN 11, 2019
Fixed
- Transfers call disconnect issue has now been fixed. Call Tasks will now be accepted with
endConferenceOnExit
set totrue
, so when agent ends the call the call will be ended for the customer as well. There is no reason anymore to override theacceptTask
action to achieve this.
Changed
- Removed the
disabledTransfers
config option as it is obsolete due to the fixed know issue with Transfers call disconnect
Added
- Supervisor will now be able to change any agents activity state in the Teams View
- Agent activity duration will now be shown for the agent in the Main Header of the app and for supervisor in the Teams view
- Plugin service will now be enabled by default
v 1.3.3
@twilio/flex-ui@1.3.3
release date JAN 10, 2019
Fixed
- When clicking in the middle of the entered text in the chat input field, cursor automatically jumped to the end
Changed
- Started consuming v0.2.15 of TaskRouter JS SDK
v 1.3.2
@twilio/flex-ui@1.3.2
release date JAN 9, 2019
Changed
- Insert global Flex styles into the head of the document even if other styles are not there
Fixed
- When loginPopup is configured, two SSOLoginHandlers become active, which cause side effects for logout action and token updates
v 1.3.1
@twilio/flex-ui@1.3.1
release date DEC 20, 2018
Fixed
- Race condition that resulted in "no-current-call" error when accepting a call
v 1.3.0
@twilio/flex-ui@1.3.0
release date DEC 19, 2018
Fixed
Voice
- Global mute button indicated muted state even after the call had ended.
Messaging
- Fixed UI issues with Chat input when shift+enter is pressed.
Added
Plugins
- New FlexEvent
FlexEvents.pluginsLoaded
that fires after all plugins have finished loading. - Exposed common dependencies like
React
,ReactDOM
,Redux
andReactRedux
to window object for plugins to depend on.
Actions
MonitorCall
action payload got a new paramextraParams
that is the equally named TR SDK param forReservation.monitor
call. It is optional and UI does not set it, but developer can alter it via programmability if need be.- Error notification when browser is unable to access microphone.
- New option
isolate
forrouter
configuration section: whenever set to true, Flex will ignore any navigation action (including URL change) except for internal. - Registered a
beforeSendMessage
action to check if the message exceeds the limit and handle it accordingly. - Support for promises to Actions framework. Now, if a before-action listener returns a Promise, the Actions framework will wait for it to be resolved before completing the action. This change is back-compatible, so a lister can still return return nothing.
SendMessage
action got optionalmessageAttributes
property to its payload that, if specified, will be used as the equally named property of the Chat SDKsendMessage
call.
Views and routing
- Default route may now be changed via
componentProps
by settingdefaultLocation
property forViewCollection
. - Flex navigation action type is exposed through
FLEX_LOCATION_CHANGE
constant. It can be used to listen to Flex navigation actions or do dispatch Flex-specific navigation actions.
Voice
disableBrowserVoice
option for configuration. When specified Twilio Client SDK (for Browser voice capability) will not be initialized. Attempting to accept a task that is voice and with worker'scontact_uri
not pointing to a phone number, the attempt is blocked and warning is shown.
Messaging
- Character limit added to messages sent by agent. Character count indicator will be shown below text input when agent exceeds the limit. Character limits per channel:
- SMS - 1600 characters
- Web chat - 32768 characters (32 kB)
- Channels (Facebook, Line, WhatApp) - 4000 characters
- Character limit information added to Task Channel Definition API as a new prop
charLimit
SSO login
- SSO login in pop-up window support added.
config.sso.loginPopup = true
can be set to enable it. To gracefully handle blocked popups, newLoginFormView
React component orprovideLoginInfo
ortryLogin
Twilio.Flex API function can be used to launch it. Additionally pop-up window features forwindow.open()
function can be set inconfig.sso.loginPopupFeatures
configuration variable as string. - New API functions to run or log user in to Flex using
Twilio.Flex
interface:
/**
* Runs Flex with default setup.
* It will show loader and prompts for login information
* if it is not provided in configuration object.
*
* @param [config] configuration object
* @param [nodeOrSelector] DOM node or selector string where to render Flex
* @returns {Promise<void>}
*/
export function runDefault(config: Config = {}, nodeOrSelector: string | Element = "body"): Promise<void>;
/**
* Tries to log user in to Flex.
* Can redirect the current browser window to the IdP URL or
* open a new window to navigate to IdP URL if config.loginPopup is set.
*
* @param [config] SSO configuration object
* @return {Promise<boolean>} true if there is valid token and user can be logged in.
*/
function tryLogin(config: SSOConfig = {}): Promise<boolean>;
/**
* Helper function to provide additional account and user info if it is not set.
* Updates the provided config object.
*
* Renders a LoginFormView component if accountSid is not provided or there are problems with signing user in.
*
* @param [config] configuration object
* @param [nodeOrSelector] DOM node or selector string where to render the component
* @returns {Promise<void>} if resolved, then Flex instance can be created with
* provided config object.
*/
function provideLoginInfo(config: Config = {}, nodeOrSelector: string | Element = "body"): Promise<void>;
- New
LoginFormView
React component to be used to provide account / user info with the following props:
interface LoginFormViewProps {
onSuccess: (determinedConfig: Config) => any;
userConfig: Config;
}
- New strings for
LoginFormView
component:
LoginContinue: "Continue anyway",
LoginLaunch: "Launch",
LoginTitle: "Twilio Flex",
LoginErrorDomain: "Oops! Your runtime domain is incorrect.",
LoginErrorDomainDetails: "Find your runtime domain " +
"<a href='https://www.twilio.com/console/runtime/overview'>here</a>",
LoginErrorSso: "Hmm, Single Sign-On has not been configured.",
LoginErrorSsoDetails: "Find out how to configure Single Sign-On " +
"<a href='https://www.twilio.com/console/flex/users/single-sign-on'>here</a>",
LoginErrorPopupBlocked: "Sorry, pop-ups are blocked.",
LoginErrorPopupBlockedDetails: "Find out how to enable pop-ups in your browser",
LoginErrorGeneric: "Oops! Well, that didn’t work :( Please double check your configuration.",
LoginIsAdmin: "Flex Admin?",
LoginWithTwilio: "Login with Twilio.",
Changed
Views and routing
-
View
now has multiple route path support. By defaultname
prop is taken as string to be added to the path of the specifiedView
. One can add alternative routes withroute
prop.
Example:
<View key="teams" name="teams" route={{ path: "/supervisor" }}> // both http:/domain/teams and http://domain/supervisor will work
<View key="teams" name="teams" route={{ path: ["/supervisor", "something"] }}> // both http:/domain/teams and http://domain/supervisor and http://domain/something will work
ViewCollection
was not using DynamicComponent properly so all manipulations of it other thanadd
via programmability did not work.
Voice
- Global mute button will be disabled if there are no active calls.
Other
- Moved reset CSS to top of head to allow any custom CSS to override it.
v 1.2.0
@twilio/flex-ui@1.2.0
release date NOV 22, 2018
Fixed
- Use react and react-dom version 16.5.2
- Performance optimization for Teams view
Changed
baseNames
theme names changed
Deprecated name | New Theme name |
---|---|
DarkTheme | GreyDark |
MediumTheme | GreyLight |
BlueMediumTheme | FlexLight |
BlueDarkTheme | FlexDark |
- "Active agents" filter is set as default in Teams View
- Switch from
icon
tolabel
inTab
label components in agentTaskCanvasTabs
and supervisorTaskCanvas
Added
- New localization strings for TaskTabAgentIncomingLabel, TaskTabAgentCallLabel, TaskTabAgentChatLabel, TaskTabAgentInfoLabel, TaskTabSupervisorInfoLabel and TaskTabSupervisorOverviewLabel
export interface Strings<T = string> extends FrameStrings<T> {
...
TaskTabAgentIncomingLabel?: T;
TaskTabAgentCallLabel?: T;
TaskTabAgentChatLabel?: T;
TaskTabAgentInfoLabel?: T;
TaskTabSupervisorInfoLabel?: T;
TaskTabSupervisorOverviewLabel?: T;
}
Views
ofViewCollection
got a new propmountRule
. If specified,keepMounted
prop value is ignored. Definition of the prop is as follows:
export enum ViewMountRule {
Always = "Always", // View is mounted from the start of the application and never unmounted
WhenActive = "WhenActive", // Views is mounted when activated and unmounted when deactivated
WhenHasBeenActive = "WhenHasBeenActive" // View is mounted when first activated and never umounted
}
v 1.1.0
@twilio/flex-ui@1.1.0
release date NOV 6, 2018
Fixed
- TypeScript definitions of the package were referencing some missing files
- Regular agents were not able to open up directory button for transfers
- MainHeader now again accepts changing logoUrl default property
- CRMContainer and MessagingCanvas did not pass props down to their custom children
- Issues with broken UI when using custom store
Added
- Ability to transfer calls to a Queue from Directory Component (previously only workers were present there)
- Action
TransferTask
was introduced. As with all other Task specific actions, if calling it, eithertask
orsid
must be specified, the other is autofilled then accordingly. When tapping into the action either with events or task replacement, both will be filled at execution time. Payload of the action:
{
sid?: string; // sid of the ITask to transfer
task?: ITask; // ITask object representing the Reservation being transferred
targetSid: string; // sid of the Worker or Queue where the task should be transferred to
options?: Object // options passed over to TaskRouter SDK transfer call. Refer to TaskRouter SDK documentation on Task.transfer option values.
}
- Add optional
label
property to theTab
component. When provided, it will display a label into theTab
element. If the value matches a code in language strings array, the contents of the language string is used as template. Otherwise the value is used as just string. Iflabel
is not provided,icon
property is considered and used. - Add optional
alignment
property toTabs
. When provided, it will change the tabs alignment. Possible values areleft
orcenter
. Default iscenter
.
v 1.0.0
New GA version of Flex UI has been released and are now available on NPM
- @twilio/flex-ui@1.0
@twilio/frame-ui@0.15.0
Added
- Tasks can now be transferred to another available agent from Call Canvas via new Worker Directory.
- To enable call transfers, calls will be currently accepted with
endConferenceOnExit
set tofalse
, meaning that the call will not stop for customer when agent stops the call. - As alternative to the above,
disableTransfers
config options was created. By defaultfalse
, if set to true, theendConferenceOnExit
will be enabled but transfers to other agents will not be available. - Agent Skilling. Can be disabled by setting
WorkerCanvas
component propshowSkills
tofalse
. public_identity
from worker attributes gets set to agent's chat user friendly name. If that is not set, thenfull_name
attribute is used.- Call recording can be enabled from configuration service.
Changed
- All actions that had
taskSid
in payload will now expectsid
instead. Potential breaking change!!! - Task object in Actions framework got new field
sourceObject
which will be pointing to the actual SDK object. Reservation in case of TaskRouter, InsightsObject in case of Insights (Supervisor views).source
is still there but is deprecated. - Some actions got changed payload
SetActivity
can now be called with justactivityName
in the payload.SelectTaskInSupervisor
now expects/provides object as payload in form of{task?: ITask, taskSid?: string}
. Providing either will autofill the other also so both will be available for whoever taps into the action via Actions framework.SelectWorkerInSupervisor
now expects/provides object as payload in form of{worker?: ITask, workerSid?: string}
. Providing either will autofill the other also so both will be available for whoever taps into the action via Actions framework.MonitorCall
now expects/provides object as payload in form of{task?: ITask, taskSid?: string}
. Providing either will autofill the other also so both will be available for whoever taps into the action via Actions framework.
- Chat channels need to be created by channel orchestration service for agent to be able to join them.
- Templates and channel definitions use
channelType
attribute from task to detect chat channel type.
@twilio/frame-ui@0.15.0
Fixed
- Styling
- Avatar callback
@twilio/flex-agent-frame-sample@0.14.0
Changed
- Consume @twilio/flex-ui@0.14.0
@twilio/flex-ui@0.14.0
Changed
SetActivity
action now has payload in the form of{activitySid: string; activityName?: string; activityAvailable?: boolean}
. OnlyactivitySid
is used in default implementation and are required when invoking the action by user, but other two are filled for better context for users who override the action and need more information on what the new activity will be.- Property
task
type changed toITask
for task based components. Previously TaskState interface was used which had onlysource
andreservation
properties. Propertiessource
andreservation
stay the same as they used to, but now attributes and other task properties can be accessed fromtask
object itself. For examplethis.props.task.attributes
can be used where applicable and there should be no need to usesource
sub property anymore which is referring to Task Router SDK object. - Consume TR 0.2.8 with Reservation based task completion. Special account flag needed for everything to work properly.
- Tasks in store are referenced by reservation sid now
Added
- Components can be removed using Task Channels API:
export type TaskChannelComponentRemoveRequest = {
target: keyof FlexComponents;
key: React.Key;
options?: RemoveComponentCallOptions;
};
TaskChannelDefinition.removedComponents?: Array<TaskChannelComponentRemoveRequest>;
// For example:
myOwnChatChannel.removedComponents = [
{ target: "TaskCanvasTabs", key: "info" }
];
- TaskContext - Flex sets up Task Context using React Context API where it knows about an active or selected task. If Task has been selected in Agent Desktop View or Teams View then it can be obtained from Context. Interface of the TaskContext is shown below. Also
withTaskContext
helper function has been added that creates a HOC which adds the properties to the wrapped component.
export interface TaskContextProps {
task?: ITask; // Task we are referring to, undefined if there is no task in context
call?: PhoneCallState; // Call state that current task if related to, undefined if there is no task in context or there is no call for a task
chatChannel?: ChatChannelState.ChannelState; // Chat channel state that current task if related to, undefined if there is no task in context or there is no chat for a task
channelDefinition?: TaskChannelDefinition; // Matched task channel definition for a task, undefined if there is no task in context
}
- Using
TaskContext.Consumer
:
import { withTaskContext } from "@twilio/flex-ui";
const MyComponent: (props) => {
return (
<div>{props.task.attributes.someAttribute}</div>
);
}
const MyComponentWithTask = withTaskContext(MyComponent);
// Register MyComponentWithTask component to Flex instead of MyComponent
- Using
withTaskContext
:
import { withTaskContext } from "@twilio/flex-ui";
const MyComponent: (props) => {
return (
<div>{props.task.attributes.someAttribute}</div>
);
}
const MyComponentWithTask = withTaskContext(MyComponent);
// Register MyComponentWithTask component to Flex instead of MyComponent
@twilio/frame-ui@0.14.0
Added
Component.Content.remove
to allow removing components from dynamic component children (both native and programmatically added ones).
Syntax:
Component.Content.remove(key: string, options: {if?: (props: any) => boolean})
where
key
- key of the component to be removedif
- boolean expression that decides at any given moment whether the removal should be active.props
parameter is the object of all properties passed by the main component to children.
Example: removes avatar from the canvas that shows "you have no tasks", but only if the user's name is not Bob.
Flex.NoTasksCanvas.Content.remove("avatar", {if: props => props.worker.attributes.full_name !== "Bob"});
@twilio/flex-agent-frame-sample@0.13.0
Changed
- Consume @twilio/flex-ui@0.13.0
@twilio/flex-ui@0.13.0
Removed
- Individual module files in the NPM module removed. All sources bundled into a single module bundle file referenced by the
main
field in package.json. - Components
TaskListChatItem
andTaskListCallItem
- can be customized not using Task Channels API. Or useTaskListItem
to use them all. - Theme property
AltContainer
andIconArea
; and component propertyalternateColors
removed fromTaskListItem
component. - Theme property
colors.channelColors
removed. Channel colors are defined in Task Channel now.
Changed
- Rendering tasks from all channels now in TaskList using default task channel definition.
- All channels are defined by Task Channels API.
Added
- Incoming call notification bar
- In case of pending tasks Nav Bar is going to show red dot on top of main and agent-view button
- Task Channels API. See below for more detailed description and information about usage,
Task Channels API
All task channels that Flex handles are defined and registered by Task Channels API. Flex registers its default Task Channel definitions (see below), but users and plugins can register their own. When Flex task based components are rendered, the first matching channel definition for a given task will be used. If there is more than one channel definition match for a task, then most recently registered definition will be used (so that you can register more specific channel definition).
See below interface TaskChannelDefinition
for what can be set up. All parameters are optional meaning that ones from Default
task channel definition will be used if not specified. The The most important property of a task channel definition is isApplicable
callback function. The callback receives a task as argument and must return boolean true if this definition can be used to handle given task.
In a task channel definition you can specify:
- callback to determine which tasks are applicable
- strings (templates) to use in different Flex components based on task status
- colors to be used in task list based on task status
- icons to be shown in task list, tabs and canvases based on task status
- custom components to be added to task based components if channel is applicable
- custom components to be replaced in task based components if channel is applicable
Predefined Task Channels definitions are available via Twilio.Flex.DefaultTaskChannels
objects for reference. Channels that are defined by default:
- Call -
Twilio.Flex.DefaultTaskChannels.Call
- Chat -
Twilio.Flex.DefaultTaskChannels.Chat
- Chat SMS -
Twilio.Flex.DefaultTaskChannels.ChatSMS
- Chat Line -
Twilio.Flex.DefaultTaskChannels.ChatLine
- Chat Messenger -
Twilio.Flex.DefaultTaskChannels.ChatMessenger
- Chat WhatsApp -
Twilio.Flex.DefaultTaskChannels.ChatWhatsApp
- Default -
Twilio.Flex.DefaultTaskChannels.Default
It is not recommended to change Twilio.Flex.DefaultTaskChannels
them at runtime. You should create your own definition and register it instead.
Flex has the following helper functions to create channel definitions with default values for chat, call and generic: Chat channel creation with default chat templates:
Flex.DefaultTaskChannels.createChatTaskChannel(name: string, isApplicable: TaskChannelApplicableCb,
icon: string | React.ReactNode = "Message", iconActive: string | React.ReactNode = "MessageBold", color: string = defaultChannelColors.chat): TaskChannelDefinition
Call channel creation with default templates. Call channel definition uses callbacks to determine the icon and colors (based on call state and destination to render):
Flex.DefaultTaskChannels.createCallTaskChannel(name: string, isApplicable: TaskChannelApplicableCb):: TaskChannelDefinition
Default channel creation with default templates.
Flex.DefaultTaskChannels.createDefaultTaskChannel(name: string, isApplicable: TaskChannelApplicableCb, icon: string | React.ReactNode = "GenericTask", iconActive: string | React.ReactNode = "GenericTaskBold", color: string = defaultChannelColors.custom): TaskChannelDefinition
To register a task channel definition use Flex.TaskChannels.register(definition: TaskChannelDefinition, mergeWithDefaultChannel = true)
. You must register your channel definitions before Flex starts up.
Example:
const myOwnChatChannel = Flex.DefaultTaskChannels.createChatTaskChannel("myChat",
(task) => task.taskChannelUniqueName === "chat" && task.attributes.somethingSpecial === "mycCustom");
// can modify myOwnChatChannel here
Flex.TaskChannels.register(myOwnChatChannel);
Also new the following API exists: Flex.TaskChannels.unregister(myOwnChatChannel);
- to unregister previously registered channel Flex.TaskChannels.getRegistered();
- to get all registered task channelsFlex.TaskChannels.getForTask(task: ITask);
- to get a matching task channel definition for a task
Interface of TaskChannelDefinition
:
export enum TaskChannelCapability {
Info = "Info", // whether channel has info panel
Call = "Call", // whether channel has call canvas capabilities
Chat = "Chat", // whether channel has chat canvas capabilities
Video = "Video", // whether channel has video calling capabilities
Wrapup = "Wrapup" // whether channel needs to go to Wrapup state before can be completed
}
export type TaskCallbackType<T> = (task: ITask, componentType: React.ComponentType, ...args) => T;
export type TaskStatusBasedTypeBase<T> = {
Reserved: T;
Assigned: T;
Wrapping: T;
Completed: T;
Canceled: T;
Pending: T;
};
export type TaskStatusBasedType<T = string> = T | TaskCallbackType<T> | TaskStatusBasedTypeBase<T>;
export type TaskChannelApplicableCb = (task: ITask) => boolean;
export type TaskChannelComponentRegistration = {
target: keyof FlexComponents;
component: React.ReactChild;
options?: ContentFragmentProps;
};
/**
* Defines a task channel
*
* @export
* @interface TaskChannelDefinition
*/
export interface TaskChannelDefinition {
name: string;
/**
* Used in TaskList, TaskCard, Canvases
*/
colors?: {
main?: TaskStatusBasedType<string>;
};
/**
* Returns whether this task channel is applicable for a given task.
* @param task task instance to evaluate the channel for
*/
isApplicable: TaskChannelApplicableCb;
/**
* Icons to render to the task channel
*/
icons?: {
/**
* List icon to be used in TaskList and TaskCardList
*/
list?: TaskStatusBasedType<string | React.ReactNode>;
/**
* Icon to be used in Tab headers if tab is not selected
*/
main?: TaskStatusBasedType<string | React.ReactNode>;
/**
* Icon to be used in Tab headers if tab is selected and in Task Canvases as the main icon
*/
active?: TaskStatusBasedType<string | React.ReactNode>;
};
/**
* Templates for components
*/
templates?: {
IncomingTaskCanvas?: {
firstLine?: TaskStatusBasedType<string>;
secondLine?: TaskStatusBasedType<string>;
};
CallCanvas?: {
firstLine?: TaskStatusBasedType<string>;
secondLine?: TaskStatusBasedType<string>;
};
TaskListItem?: {
firstLine?: TaskStatusBasedType<string>;
secondLine?: TaskStatusBasedType<string>;
extraInfo?: TaskStatusBasedType<string>;
};
TaskCanvasHeader?: {
title?: TaskStatusBasedType<string>;
endButton?: TaskStatusBasedType<string>;
};
TaskCard?: {
firstLine?: TaskStatusBasedType<string>;
secondLine?: TaskStatusBasedType<string>;
};
TaskInfoPanel?: {
content: TaskStatusBasedType<string>;
};
Supervisor?: {
TaskCanvasHeader?: {
title?: TaskStatusBasedType<string>;
endButton?: TaskStatusBasedType<string>;
};
TaskInfoPanel?: {
content: TaskStatusBasedType<string>;
};
TaskOverviewCanvas: {
firstLine?: TaskStatusBasedType<string>;
secondLine?: TaskStatusBasedType<string>;
}
}
};
/**
* Set of capabilities, used to render Tabs
*/
capabilities: Set<TaskChannelCapability>;
/**
* Custom components to be added for this task channel. E.g. custom Tabs. Supports only components that have a static "Content" property
*/
addedComponents?: Array<TaskChannelComponentRegistration>;
/**
* Custom components to be replaced for this task channel. Supports only components that have a static "Content" property
*/
replacedComponents?: Array<TaskChannelComponentRegistration>;
}
@twilio/frame-ui@0.13.0
Changed
- Requiring key property for all custom components passed to
Component.Content.register/add
. E.g.<div key="custom-key"/>
.
Removed
- Individual module files in the NPM module removed. All sources bundled into a single module bundle file referenced by the
main
field in package.json.
Added
- Add Circular Progress component
@twilio/flex-agent-frame-sample@0.12.0
Changed
- Consume @twilio/flex-ui@0.12.0
- Custom redux store sample updated
@twilio/flex-ui@0.12.0
Changed
- An optional SSO config option
sso.tokenRefreshIntervalMs
changed tosso.tokenRefreshThresholdMs
to specify a threshold in milliseconds when token will be updated before it is expired - TaskListContainer will now render only a single TaskList with static filter set as a property
- TaskList is animating now when task come and go
- "HoldCall" will no longer toggle the hold state but will be meant only for call holding. Separate "UnholdCall" action was added.
SupervisorDesktopView
component renamed toTeamsView
- Template
SideNavSupervisorView
renamed toSideNavTeamsView
Added
- Showing a notification bar when session token expires.
- Added
staticFilter
prop added to TaskList for stand-alone use. - Show a call bar to indicate an ongoing call when not viewing Agent Desktop
- Added a few containers to Theme to accomodate more theming
- MainContainer - CSS props for lowest level container that includes the whole application except Main Header and SideNav
- Supervisor.Container - CSS props for main container in Supervisor Desktop
- Added "UnholdCall" action to unhold calls. Payload same as HoldCall, including task. – Added support for views routes, which includes
- New actions to navigate the browser to different locations in the way similar to HTML5 History API:
HistoryPush
HistoryReplace
HistoryGo
HistoryGoBack
HistoryGoForward
- New property
route
forView
component to mount a view to a route different from its name - Support for browser and memory history that is configurable through configuration file
- Flex store enhancer for creating a custom store:
- New actions to navigate the browser to different locations in the way similar to HTML5 History API:
import { applyMiddleware, combineReducers, createStore, compose } from "redux";
import { createLogger } from "redux-logger";
import { FlexReducer, applyFlexMiddleware } from "@twilio/flex-ui";
import { myAppReducer } from ".MyRootReducer";
const reducers = combineReducers<MyStoreState>({
flex: FlexReducer,
myApp: myAppReducer
});
const middleware = applyMiddleware(createLogger());
export const myReduxStore = createStore(
reducers,
compose(
middleware,
applyFlexMiddleware()
)
);
@twilio/frame-ui0.12.0
Changed
- Global CSS styles under
.Twilio
class name for standard HTML tagsa
,p
,h1
,h2
,h6
,hr
,iframe
andp
are set now. - CSS reset included. Resetting browser defaults for standard HTML elements.
Added
- Support for recursive componentProps is configuration: Can be used like:
componentProps: {
CRMContainer: {
uri: "http://twilio.com"
},
Supervisor: {
TaskCanvas: {
Header: {
titleTemplateCode: "MyOwnHeaderTemplate"
}
}
}
}
@twilio/flex-agent-frame-sample@0.11.0
Changed
- Consume @twilio/flex-ui@0.11.0
Removed
- No longer include the
Open Sans
font sinceflex-ui
will handle it
@twilio/flex-ui@0.11.1
Fixed
- Global
Twilio.Flex
variable not overwritten anymore
@twilio/flex-ui@0.11.0
Removed
- Removed support for insecure login:
insecureLogin
action is removed- Only JWE tokens are now supported
workerDefaultId
andworkerDefaultPassword
configuration options are now obsolete
Added
- PluginManager - as a part of Flex initialization plugin loading can be enabled.
- Can be enabled by setting
configuration.pluginService.enabled
totrue
. - Plugins can be initialized by calling
Twilio.Flex.Plugins.init(MyPlugin)
.
- Can be enabled by setting
- A new method for Manager's instances
fetchConfiguration
asynchronously retrieves a configuration from Flex Configuration service - A new method for Manager's instance
updateConfig
merges provided configurations on top of existing configuration
Changed
-
Manager's instance configuration behavior:
- Whenever a new instance of Manager is created, it will fetch the remote configuration from Flex Configuration service. Local configuration will be applied on top of remote configuration
- Manager's instance
configuration
setter is deprecated
-
Themeing was reworked and config parameters changed. User now has 4 distinct levels available to theme their application.
- Not specifying a predefined theme, in that case
BlueMediumTheme
is chosen automatically. - Specifying predefined theme - either
colorTheme:"DarkTheme"
orcolorTheme: {name: "DarkTheme"}
. Available themes areMediumTheme
,DarkTheme
,BlueMediumTheme
andBlueDarkTheme
. A predefined theme specifies base colors used and also whether the theme is considered light or dark, which influences text and hover colors unless they are specifically changed. - Overriding all or a selection of colors and/or the lightness of the theme that was set by the predefined theme (note, specifying predefined theme was not compulsory, but in
BllueMediumTheme
was then used as default).- colors - variables base1..base11 are colors provided by the predefined theme that set the tone of the theme. User can override all (preferred) or some of those colors. User can also override any of the theme independent hardcoded colors like for example the red color of hangup button.
- Available colors to override are:
base1, base2, base3, base4, base5, base6, base7, base8, base9, base10, base11, defaultButtonColor, lightTextColor, darkTextColor, buttonHoverColor, tabSelectedColor, connectingColor, disconnectedColor, notificationBackgroundColorInformation, notificationBackgroundColorSuccess, notificationBackgroundColorError, notificationBackgroundColorWarning, notificationIconColorError, notificationIconColorWarning, userAvailableColor, userUnavailableColor, errorColor, callColor, holdColor, declineColor, acceptColor, declineTextColor, acceptTextColor, completeTaskColor, liveCommsBackgroundColor, liveCommsContentColor, channelColors.inactive, channelColors.call, channelColors.video, channelColors.sms, channelColors.chat, channelColors.facebook, channelColors.line, channelColors.whatsapp, channelColors.custom
- Available colors to override are:
- light - Default text color, hover colors and rule of which base color is chosen for SideNav and MainHeader depend on this boolean.
- colors - variables base1..base11 are colors provided by the predefined theme that set the tone of the theme. User can override all (preferred) or some of those colors. User can also override any of the theme independent hardcoded colors like for example the red color of hangup button.
- The above mentioned parameters together with the built in
color -> component css props
mapping result in final theme where each component has a set of color specific css props. Should this not suffice there is a final step of providingoverrides
property that allows for overriding any parts of this result. Documenting that object is beyond the scope of this changelog, it is easiest to just monitor that object in debugger and decide on what params to change.
Examples:
- Not specifying a predefined theme, in that case
// Picks the default blue dark theme
config.colorTheme = "BlueDarkTheme";
// Picks dark theme, changes all of its base colors to new ones and tells the system that we still expect it to take the theme as dark (light parameter)
config.colorTheme = {
name: "DarkTheme",
colors: {
base1: "blue",
base2: "orange",
base3: "yellow",
base4: "black",
base5: "white",
base6: "pink",
base7: "red",
base8: "blue",
base9: "brown",
base10: "black",
base11: "white"
},
light: false;
}
@twilio/frame-ui@0.11.0
Changed
- Theming was redone. Each theme now uses the same base color to component mapping, just the colors will vary. baseplate0..baseplate6 variables that user could also override were removed and replaced by base1..base11.
- Overall chat look and feel in terms of colors was changed.
Tab
component property namedvisible
changed tohidden
. Tabs component looks only the new property of a tab.
Fixed
- Include ‘Open Sans’ font in production mode
@twilio/flex-agent-frame-sample@0.9.0
Changed
- Consume @twilio/flex-ui@0.9.0
Fixed
- Include Open Sans font in index.html
- Sample code for theme branding fixed
@twilio/flex-ui@0.10.0
Changed
- Changed
Manager.create
method signature (first accountSid parameter dropped). Old signature will work until next release though. - Renamed ContactCenterManager to Manager
- "HangupCall" and "HoldCall" actions will now accept optional parameters taskSid:string or task:ITask in payload object. Actions will work without them also if just one call is available, but it is advised to use those params to be more specific for future multi call scenarios. Even if the task/taskSid are not specified, when adding listeners or overriding these actions, those parameters are filled out automatically.
Fixed
- Ensure that user roles (manager.user.roles) is always an array
Removed
- showSupervisorDesktopView setting from configuration object. Supervisor desktop depends on
supervisor
role of the user.
Added
- Exported
VERSION
constant to indicate the version of the package
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.