Flex UI Release Notes for v1.x.x

@twilio/flex-ui@1.34.6

release date January 18, 2024

• Fixed a bug that caused chat messages to incorrectly interpret two underscores as markdown formatting even when markdown formatting is not enabled. For example, the chat message, "My email address is order_support_troubleshooting@owlshoes.com" would incorrectly appear as "My email address is order_support_troubleshooting@owlshoes.com."
• Fixed a bug that made it harder to click the Flex UI navigation menu icon when a red notification dot appears on the icon.
• Fixed a potential login issue for customers who are using a specific authentication flow and running Flex within an iframe (for example, the Flex Salesforce integration). This issue was related to Google's rollout of restrictions on third-party cookies, which was announced in December 2023 and began in January 2024.
• Fixed a rare performance issue for specific customers who are using a feature enabled by our support team.

@twilio/flex-ui@1.34.5

release date November 1, 2023

• 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.

@twilio/flex-ui@1.34.4

release date September 27, 2023

• 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.

@twilio/flex-ui@1.34.3

release date August 21, 2023

• Fixed an issue with SDK auto-reconnect if initialization 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.

@twilio/flex-ui@1.34.2

release date July 14, 2023

• Increased timeout interval for certain SDKs to address initialization issues

@twilio/flex-ui@1.34.1

release date June 28, 2023

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

@twilio/flex-ui@1.34.0

release date Apr 20, 2023

• 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 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.

@twilio/flex-ui@1.33.3

release date Feb 21, 2023

• 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

• 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.

@twilio/flex-ui@1.31.3

release date Dec 15, 2022

• Fixed issue with token refreshment behavior

@twilio/flex-ui@1.33.2

release date Dec 14, 2022

• Fixed issue with token refreshment behavior

• 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.

@twilio/flex-ui@1.32.3

release date Dec 14, 2022

• Fixed issue with token refreshment behavior

@twilio/flex-ui@1.33.1

release date Dec 9, 2022

• Updated messages in Status report and Degraded mode notifications

• 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.

@twilio/flex-ui@1.32.2

release date Dec 8, 2022

• Updated messages in Status report and Degraded mode notifications

@twilio/flex-ui@1.33.0

release date Nov 21, 2022

• 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.

• 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

• 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.

@twilio/flex-ui@1.32.1

release date Nov 10, 2022

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

@twilio/flex-ui@1.32.0

release date Sep 29, 2022

• Consume flex-sdk 0.13.0.
• Fetch all queue stats data before updating store on initialization to improve performance.
• Moved Debugger UI to Status Report and released to GA.

• 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.

• 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 initialization after login before moving on.

@twilio/flex-ui@1.31.2

release date Jun 28, 2022

• Fixed an issue with loginHandler session not being supported in the previous version.

@twilio/flex-ui@1.31.1

release date Jun 6, 2022

• During login, after redirection from SSO provider, Flex will no longer ask to re-enter runtime domain for the second time.

@twilio/flex-ui@1.31.0

release date May 18, 2022

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.

• 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

@twilio/flex-ui@1.28.2

release date Feb 07, 2022

• Overlay Player support for new address format of drill down links in Flex Insights Historical Reporting.

@twilio/flex-ui@1.29.3

release date Feb 07, 2022

• Overlay Player support for new address format of drill down links in Flex Insights Historical Reporting.

@twilio/flex-ui@1.30.2

release date Feb 03, 2022

• Overlay Player support for new address format of drill down links in Flex Insights Historical Reporting.

@twilio/flex-ui@1.30.1

release date Jan 17, 2022

• A fix to avoid using useState in chat channel reducer which caused Chat messages to fail to load in some instances

@twilio/flex-ui.1.30.0

• Real Time Queue Monitoring with SLA GA. See Twilio Changelog for more details.

• 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 initialization

@twilio/flex-ui@1.29.2

release date Jan 19, 2022

This release contains fixes to our pilot or private beta features.

@twilio/flex-ui@1.29.1

release date Dec 01, 2021

• Fixed bug with isCallTask handlebar helper function

@twilio/flex-ui@1.29.0

release date Nov 10, 2021

• Improvements to Flex Dialpad:
  • Zero key can now be long pressed to enter a +
  • Backspace now deletes last entered digit

• 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 minimized. 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

@twilio/flex-ui@1.28.1

release date Oct 19, 2021

• Fixed an issue where plugins were not loading correctly for customers who were hosting their own flex-ui library

@twilio/flex-ui@1.28.0

release date Sep 30, 2021

• 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 an issue where an unsupported file could be pasted to the chat
• Fixed an issue where chat date separator was positioned incorrectly

@twilio/flex-ui@1.27.0

release date Jun 21, 2021

• 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.

• 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.

• For workers without activity changes in the last 30 days Teams View no longer shows NaN as the activity duration

@twilio/flex-ui@1.26.3

release date June 7, 2021

• Upgraded Handlebars version to 4.7.7

@twilio/flex-ui@1.26.2

release date June 3, 2021

• 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

@twilio/flex-ui@1.26.1

release date May 13, 2021

• 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.

• 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 unintentionally exported private interfaces Flex.ErrorManager.processError and Flex.ErrorManager.createAndProcessError

• 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

@twilio/flex-ui@1.26.0

release date May 11, 2021

• 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.

• 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 unintentionally exported private interfaces Flex.ErrorManager.processError and Flex.ErrorManager.createAndProcessError

• 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

@twilio/flex-ui@1.25.4

release date APR 19, 2021

• 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

@twilio/flex-ui@1.25.3

release date MAR 31, 2021

• Fixed the issue in Player causing Flex UI to crash when custom media links are provided with invalid or missing start time

@twilio/flex-ui@1.25.2

release date MAR 16, 2021

• 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

@twilio/flex-ui@1.25.1

release date FEB 26, 2021

• Characters being dropped intermittently when typing in the input field of Messaging Canvas

@twilio/flex-ui@1.25.0

release date FEB 24, 2021

• 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

    Expand image

  • Flex UI programmable interfaces that provide ability to retrieve errors and logs programmatically and implement customized error monitoring and reporting

    Copy code block

    1
    import { Monitor } from "@twilio/flex-ui";
    2
    
    3
    Monitor.getErrors(); // returns { errors: [Monitor.FlexErrorJSON] }
    4
    Monitor.getLogs(); // returns { logs: 'string' }
    5
    

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.

• Initial audio device check (previously in Pilot release) is now in GA and will be enabled by default for all accounts

• 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 receives 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

@twilio/flex-ui@1.24.3

release date FEB 15, 2021

• 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

@twilio/flex-ui@1.24.2

release date JAN 25, 2021

• An issue with refreshing of the token

@twilio/flex-ui@1.23.4

release date JAN 25, 2021

• An issue with refreshing of the token

@twilio/flex-ui@1.24.1

release date JAN 14, 2021

• 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

• [axios] to version 0.21.1.
• [twilio-client] to version 1.13.1.

@twilio/flex-ui@1.24.0

release date DEC 9, 2020

• 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.

• 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

• [twilio-taskrouter] to version 0.5.2
• Updated @gooddata/gooddata-js to version 13.2.0

@twilio/flex-ui@1.23.3

release date DEC 2 2020

• Fixed regression in Flex Insights that prevented users from playing some recordings stored outside of Twilio

@twilio/flex-ui@1.23.2

release date NOV 23 2020

• Minor internal bugfixes

@twilio/flex-ui@1.23.1

release date NOV 16 2020

• 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

@twilio/flex-ui@1.23.0

release date NOV 09 2020

• 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 race condition which can cause concurrent outbound calls
• Fixed inaccuracies in displaying timestamp of messaging task predefined message

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

@twilio/flex-ui@1.22.2

release date OCT 27 2020

• [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)

@twilio/flex-ui@1.22.1

release date OCT 21 2020

• Dragging & dropping text into chat text input
• Updated lodash transient dependency in CDN bundle to remove a security vulnerability

• [twilio-chat] upgraded to 3.4.0
• [twilio-sync] upgraded to 0.12.3

@twilio/flex-ui@1.22.0

release date SEP 16, 2020

• 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

• Domain links with parameters, not separated by a slash, are now recognized as links. For instance: http://flex.twilio.com?test=true.

• Removed the legacy Real-Time Queues View implementation.

@twilio/flex-ui@1.21.1

release date SEP 15 2020

• 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.

@twilio/flex-ui@1.21.0

release date AUG 10, 2020

• [twilio-taskrouter] to version 0.5.2

• 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).

Expand image

• 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.

Expand image

• 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.

@twilio/flex-ui@1.20.1

release date JUL 1, 2020

• Fixed "calling errorPage of undefined" error by making errorPage context-independent

@twilio/flex-ui@1.20.0

release date JUN 23, 2020

• [twilio-client] to version 1.11.0.

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.

Expand image

• 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.

Expand image

• Call canvas dialpad display issue in small screens sizes

@twilio/flex-ui@1.19.0

release date APR 27, 2020

• [twilio-taskrouter] to version 0.5.1
• [handlebars] to version 4.7.3

• 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 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.

• 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.

@twilio/flex-ui@1.18.1

release date APR 16, 2020

• Fixed a state issue when starting call monitoring

@twilio/flex-ui@1.17.3

release date APR 14, 2020

• Fixed a state issue when starting call monitoring

@twilio/flex-ui@1.18.0

release date MAR 24, 2020

@twilio/flex-ui@1.18.0

release date MAR 24, 2020

• [twilio-taskrouter] updated to version 0.4.5

• 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 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

@twilio/flex-ui@1.17.2

release date MAR 23, 2020

• Fixed an issue with fetching and updating workers during call monitoring
• TeamsView filters now correctly apply default filter

@twilio/flex-ui@1.17.1

release date FEB 24, 2020

• Fixed a race condition in receiving initialDeviceCheck from feature flag config. initialDeviceCheck in Flex UI will respect the feature flag value.

@twilio/flex-ui@1.17.0

release date FEB 20, 2020

• 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.

• 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

• 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.

@twilio/flex-ui@1.16.2

release date JAN 27, 2020

• 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

@twilio/flex-ui@1.16.1

release date JAN 14, 2020

• Issue with WebChat messages being marked as read

• Minor UI bugs with pilot dialpad feature

• Removed unwanted CSS parse errors when running unit tests

@twilio/flex-ui@1.15.3

release date JAN 14, 2020

• Minor UI bugs with pilot dialpad feature

@twilio/flex-ui@1.16.0

release date DEC 17, 2019

• [twilio-client] to version 1.9.7

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

1
   Actions.invokeAction("SendDTMFDigits", {
2

3
        sid: "WRXXXXXXXXXXXXXXXXX",
4

5
        digits: "567"
6

7
    });

• 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.

1
Actions.replaceAction("HistoricalReporting:view", async (url, original) => {
2

3
    // implement your own handling of URL or call original(url) to use the original handler
4

5
})

• 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

• 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 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.

@twilio/flex-ui@1.15.2

release date DEC 05, 2019

• Fixed a bug with stuck scrollbar
• Fix a bug with incorrect number of typing members in the chat typing indicator

@twilio/flex-ui@1.15.1

release date DEC 01, 2019

• Authentication issues to WFO (Flex Insights) for customers on https://flex.twilio.com without SSO setup

@twilio/flex-ui@1.15.0

release date NOV 22, 2019

• [twilio-taskrouter] to version 0.4.1
• [twilio-client] to version 1.9.5

• 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.

• TeamsView correctly renders even if TaskRouter skills array is not defined.
• Text in chat input box can be now correctly selected

@twilio/flex-ui@1.13.2

release date OCT 31, 2019

• Minor bugfixes and internal refactoring

@twilio/flex-ui@1.14.1

release date OCT 30, 2019

• 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

• Teams View crashed if TaskRouter skills array was not defined properly. Now an error will be logged and Teams View will still be rendered.

@twilio/flex-ui@1.13.1

release date OCT 08, 2019

• Using SFDC Identity provider, login flow was stuck at the redirect to pop-up dialog

@twilio/flex-ui@1.14.0

release date OCT 07, 2019

• [twilio-client] to version ~1.9

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

Expand image

• • 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.

Expand image

• • Developer will be able to register custom browser notifications for Flex

• Improvements to Notifications Framework:

  • NotificationBar can now be given clickable actions

Expand image

Browser notifications can be enabled via a feature flag. Go toversioning page in Flex Admin UI to turn browser notifications on or off.

Expand image

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.

Expand image

• 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.

Expand image

• Typing indicator in WebChat MessagingCanvas now shows count of people typing if that number is above 1.

Expand image

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

Expand image

Expand image

• 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.

1
myTaskChannelDefinition.componentProps.TaskListItem.Badge.children = (
2
    appState: AppState,
3
    context: TaskListItemProps & TaskContextProps
4
) => {
5
    const badgeContent: number = applyCustomLogic(appState, context); // just an example
6
    return badgeContent;
7
};

• 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.

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

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

Expand image

Expand image

• 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)

• 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

• 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).

@twilio/flex-ui@1.13.0

release date AUG 29, 2019

• 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.

• All failures that occur during a call transfer will now be shown to a user as notifications

• 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.

@twilio/flex-ui@1.12.1

release date AUG 15, 2019

• Resolved @types/uuid package causing issues with npm install command on Windows platform

@twilio/flex-ui@1.12.0

release date AUG 14, 2019

• 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.

1
const orchestrationsCallback = (task: ITask) => {
2
    if (task.sid === "WT12345") {
3
        return [];
4
    }
5
};
6
Flex.ChatOrchestrator.setOrchestrations("accepted", orchestrationsCallback);
7

• 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

Expand image

Expand image

• A reusable Dialpad UI component

Expand image

1
export type DialpadButtonClickCallback = (value: string) => void;
2
export interface DialpadProps {
3
   onClick: DialpadButtonClickCallback;
4
}
5

• 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.

Expand image

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

1
Flex.DefaultTaskChannels.Call.addedComponents = [{
2
    target: "IncomingTaskCanvasActions",
3
    component: <IconButton key="hi" icon="Eye" />,
4
}];
5

• 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:

1
FlexWebChat.MessageInput.defaultProps.sendButtonAriaProps = {
2
    ariaLabel: "Send Message",
3
    ariaLive: FlexWebChat.AriaLive.Polite
4
};
5

6
FlexWebChat.MessageInput.defaultProps.textAreaAriaProps = {
7
    ariaLabel: "Enter your message here to get help",
8
    ariaLive: FlexWebChat.AriaLive.Assertive
9
};

• Chat "Send message" button can now be themed with theme.Chat.MessageInput.Button and allows adding text

Expand image

Example on how to change the icon for a text:

1
appConfig = {
2
    <...>
3
  colorTheme: {
4
    overrides: {
5
      Chat: {
6
      MessageInput: {
7
        Button: {
8
            borderRadius: "5px",
9
            width: "100px",
10
            fontSize: "10px",
11
            svg: {
12
                display: "none"
13
            },
14
            ":after": {
15
                content: '"Send"'
16
            }
17
        }
18
      }
19
    }
20
  }
21
    <...>

• 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

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.

@twilio/flex-ui@1.11.2

release date JULY 4, 2019