Flex UI Release Notes for v1.x.x

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 props hiddenWorkerFilter and hiddenQueryFilter 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 and ResetListFilters 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 and Flex.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 through WorkerDirectory.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 props hiddenWorkerFilter and hiddenQueryFilter 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 and ResetListFilters 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 and Flex.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 through WorkerDirectory.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 and emotion) 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

• [twilio-chat] To version 3.4.0
• [twilio-sync] To version 0.12.3
• [handlebars] To version 4.7.6

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 for TaskList

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

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 and holdMusicMethod for HoldCall/HoldParticipant actions to configure a custom hold music
  HoldCall/UnholdCall actions will now get participantCallSid 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

Added

• Add defaultSortColumn prop to DataTable to allow for initial sorting of the table.
• Add sortDirection prop to DataTable.ColumnDefinition to specify how the data should be sorted first. The value is either "asc" or "desc".
• Add theme.DataTable.Header to customize DataTable headers. You can specify the root and clickable 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 incorrect sdkOptions.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

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 replace selectedViewChanged for resize events in the next major release. If you rely on selectedViewChanged for detecting resize events, consider adopting viewResized.
• 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 to false 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 to false once selectedViewChanged 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 in TaskCanvasTabs. Now labels of TaskCanvasTabs can be changed like any other labels. Note, that TaskTabAgentCallLabel and TaskTabAgentChatLabel 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/or TaskLineWebChatAssigned. For these templates, you can access the reachability status via helper.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 and SideNav 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 default Badge property.

Flex.SideNav.AgentDesktop.defaultProps.Badge = {
    children: 2
};

Markdown

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:

• 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 from TaskHelper.chat property. TaskHelper.lastChatMessage method was deprecated, use ChatChannelHelper.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 that TaskHeaderWebChatStatusAccepted
  • TaskLineChatAssigned - this string is no longer used for WebChat tasks. A new string has been introduced for that TaskLineWebChatAssigned
• "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 rejected
  • ToggleMute, HoldCall, UnholdCall and HangupCall 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 of MessageInput 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 with npm 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

Go to Actions Framework page for more details on actions and their payload.

• IncomingTaskCanvas action buttons are now a programmable component IncomingTaskCanvasActions. 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).

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 displays MediaMessageError 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 to ContextProvider component. This resolves conflicts between multiple react-redux versions for self-hosted applications. We suggest not to use multiple react-redux versions, but if you need to use multiple versions, pass legacy={true}, then Flex ContextProvider instance will be rendered even with custom Redux store.
• A theme.FormComponents.Select to Theme to customize the Select input item
• A new property useSeparateInputStore introduced in the payload for action SetInputText. Setting it to true, 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 to true. This can be changed by setting the new default property useSeparateInputStore of MessageInput.

Flex.MessageInput.defaultProps.useSeparateInputStore = true;

• Added tasksA and tasksB arguments to AgentsDataTable.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 the textarea 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 and Supervisor.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 within Configuration for the AgentDesktopView.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
    )
);

• addReducerapi tomanager.storeto 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 the accepted event from Reservation)
  • DeactivateChatChannel - Mark chat channel status as INACTIVE (by default runs on WrapupTask and CompleteTask actions and on the wrapup and completed event from Reservation object if it was not done already)
  • LeaveChatChannel - Remove agent from the chat channel (by default runs on CompleteTask action and on the completed event from Reservation 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"]);

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 property splitterOrientation 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 prop secondLineTemplateCode. By default it describes the status of the task.
• Added callSid to Participant object in Conferences 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.
• Chat orchestration will update chat channels as inactive on the Reservation wrapup event (if it did not happen in WrapupTask action already)
• Custom components are encouraged to use withTheme decorators to inject theme prop
• Following type definitions are changed for consistency:
  • CallCanvasProps renamed to CallCanvasChildrenProps
  • TaskCanvasProps renamed to TaskCanvasChildrenProps
  • NoTaskCanvasProps renamed to NoTaskCanvasChildrenProps
  • ParticipantsCanvasProps split in a ParticipantsCanvasProps subset and ParticipantsCanvasChildrenProps
  • TaskCanvasHeaderProps split in a TaskCanvasHeaderProps subset and TaskCanvasHeaderChildrenProps
  • TaskCanvasTabsProps split in a TaskCanvasTabsProps subset and TaskCanvasTabsChildrenProps
  • TaskInfoPanelProps split in a TaskInfoPanelProps subset and TaskInfoPanelChildrenProps
  • MainHeaderProps split in a MainHeaderProps subset and MainHeaderChildrenProps
  • AgentDesktopViewProps split in a AgentDesktopViewProps subset and AgentDesktopViewChildrenProps
  • LoginViewProps split in a LoginViewProps subset and LoginViewChildrenProps
  • TeamsViewProps split in a TeamsViewProps subset and TeamsViewChildrenProps
  • CRMContainerProps split in a CRMContainerProps subset and CRMContainerChildrenProps
  • LiveCommsBarProps renamed in LiveCommsBarChildrenProps
  • MainContainerProps split in a MainContainerProps subset and MainContainerChildrenProps
  • MuteButtonProps split in a MuteButtonProps subset and MuteButtonImplProps
  • RootContainerProps renamed in RootContainerChildrenProps
  • SideNavProps split in a SideNavProps subset and SideNavImplProps
  • TaskListButtonsProps renamed in TaskListButtonsChildrenProps
  • ViewCollectionProps split in a ViewCollectionProps subset and ViewCollectionImplProps
• 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 the Twilio-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 in IncomingTaskCanvas

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 and Assigned keys in TaskStatusBasedTypeBase for task channel definitions. Use new Accepted 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 changing serviceConfiguration.attributes.taskrouter_offline_activity_sid in the Configuration Service

Fixed

• Use Pending task based status key from task channel definition if both Pending and Reserved were defined for TaskStatusBasedTypeBase
• 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 to true, so when agent ends the call the call will be ended for the customer as well. There is no reason anymore to override the acceptTask 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 and ReactRedux to window object for plugins to depend on.

Actions

• MonitorCall action payload got a new param extraParams that is the equally named TR SDK param for Reservation.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 for router 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 optional messageAttributes property to its payload that, if specified, will be used as the equally named property of the Chat SDK sendMessage call.

Views and routing

• Default route may now be changed via componentProps by setting defaultLocation property for ViewCollection.
• 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's contact_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, new LoginFormView React component or provideLoginInfo or tryLogin Twilio.Flex API function can be used to launch it. Additionally pop-up window features for window.open() function can be set in config.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 default name prop is taken as string to be added to the path of the specified View. One can add alternative routes with route 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 than add 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

• "Active agents" filter is set as default in Teams View
• Switch from icon to label in Tab label components in agent TaskCanvasTabs and supervisor TaskCanvas

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 of ViewCollection got a new prop mountRule. 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, either task or sid 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 the Tab component. When provided, it will display a label into the Tab 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. If label is not provided, icon property is considered and used.
• Add optional alignment property to Tabs. When provided, it will change the tabs alignment. Possible values are left or center. Default is center.

v 1.0.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 to false, 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 default false, if set to true, the endConferenceOnExit will be enabled but transfers to other agents will not be available.
• Agent Skilling. Can be disabled by setting WorkerCanvas component prop showSkills to false.
• public_identity from worker attributes gets set to agent's chat user friendly name. If that is not set, then full_name attribute is used.
• Call recording can be enabled from configuration service.

Changed

• All actions that had taskSid in payload will now expect sid 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 just activityName 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}. Only activitySid 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 to ITask for task based components. Previously TaskState interface was used which had only source and reservation properties. Properties source and reservation stay the same as they used to, but now attributes and other task properties can be accessed from task object itself. For example this.props.task.attributes can be used where applicable and there should be no need to use source 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 removed
• if - 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 and TaskListCallItem - can be customized not using Task Channels API. Or use TaskListItemto use them all.
• Theme property AltContainer and IconArea; and component property alternateColors removed from TaskListItem 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 to sso.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 to TeamsView
• Template SideNavSupervisorView renamed to SideNavTeamsView

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 for View 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:

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 tags a, p, h1, h2, h6, hr, iframe and p 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 since flex-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 and workerDefaultPassword 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 to true.
  • Plugins can be initialized by calling Twilio.Flex.Plugins.init(MyPlugin).
• 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" or colorTheme: {name: "DarkTheme"}. Available themes are MediumTheme, DarkTheme, BlueMediumTheme and BlueDarkTheme. 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​

    • light - Default text color, hover colors and rule of which base color is chosen for SideNav and MainHeader depend on this boolean.
  • 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 providing overrides 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:

// 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 named visible changed to hidden. 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