# Flex UI 2.0.x Enhancements Overview

> \[!NOTE]
>
> This summary of features will continue to evolve as we make further enhancements to Flex UI 2.0.x. For details on how to migrate from Flex UI 1.x.x, see our [migration guide](/docs/flex/developer/ui/migration-guide). Also refer to the [Flex UI Release Notes for v2.x.x](/docs/flex/release-notes/flex-ui-release-notes-for-v2xx) for changes not outlined in this table.

## Component library

| Flex UI 1.0.x                                                       | Flex UI 2.0.x                                |
| ------------------------------------------------------------------- | -------------------------------------------- |
| [MaterialUI](https://mui.com/material-ui/getting-started/overview/) | [Twilio Paste](https://paste.twilio.design/) |

**Enhancements in Flex UI 2.0.x**: Built using Twilio Paste tokens, primitives, components, and compositions that are completely composable.

## State management

| Flex UI 1.0.x                  | Flex UI 2.0.x                                  |
| ------------------------------ | ---------------------------------------------- |
| [Redux](https://redux.js.org/) | [Redux Toolkit](https://redux-toolkit.js.org/) |

**Enhancements in Flex UI 2.0.x**: New tools provide some guardrails for your [state management](/docs/flex/developer/ui/migration-guide/migration-guide-2x-updates#state-management-changes), helping you set up boilerplate code with better defaults.

## Theme and branding

| Flex UI 1.0.x                                                                | Flex UI 2.0.x                                                                   |
| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| <ul><li>`config.colorTheme`</li> <li>`config.colorTheme.overrides`</li></ul> | <ul><li>`config.theme`</li> <li>`config.theme.componentThemeOverride`</li></ul> |

**Enhancements in Flex UI 2.0.x**: New theming structure promotes consistency, customization, and web accessibility. See [Theme and Branding](/docs/flex/developer/ui/migration-guide/migration-guide-2x-updates#theme-and-branding) for a list of configuration and property changes.

## Plugin development

| Flex UI 1.0.x                                                                                                                                                                                                                | Flex UI 2.0.x                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <ul><li>[Example Flex UI 1.x.x package.json](/docs/flex/developer/ui/migration-guide/migration-guide-update-plugins#update-your-plugin-dependencies)</li><li>Flex CLI `4.1.2` or lower</li><li>React v16 or higher</li></ul> | <ul><li>[Example Flex UI 2.x.x package.json](/docs/flex/developer/ui/migration-guide/migration-guide-update-plugins#update-your-plugin-dependencies)</li><li>Flex CLI `4.1.3` or higher</li><li>React v17 or higher</li><li>React & ReactDOM are now peer dependencies</li></ul> |

**Enhancements in Flex UI 2.0.x**: Built on [upgraded components and dependencies](/docs/flex/developer/ui/migration-guide/migration-guide-update-dependencies). Click the link for each Flex version to view the example `package.json` files. You can now use the [Flex Plugin Library](/docs/flex/developer/plugins/plugin-library) which includes ready-to-install plugins.

## Messaging channels

| Flex UI 1.0.x                                                                                                          | Flex UI 2.0.x                                                                                                                                                                                                                                                                                                          |
| ---------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <ul><li>[Programmable Chat](/docs/chat) and [Proxy](/docs/proxy)</li><li>Channel attachments (web chat only)</li></ul> | <ul><li>[Conversations SDK](/docs/flex/developer/ui/migration-guide/migration-guide-2x-updates#conversations-sdk)</li><li>Attachments configurable for each messaging channel</li><li>WhatsApp as a native channel</li><li>For Flex UI 2.4.x and newer, Facebook Messenger as a native channel (public beta)</li></ul> |

**Enhancements in Flex UI 2.0.x**: While Flex UI 2.0.x supports Legacy Messaging, you will need to use Flex Conversations and the new [Interactions API](/docs/flex/developer/conversations/interactions-api). Issues with stale or 1-participant chats have been resolved by Flex Conversations. Read the [Getting Started guide](/docs/flex/conversations) for a list of enhanced messaging features. For a list of identified Chat SDK properties and methods that have been changed, removed, or deprecated, see [Conversations SDK](/docs/flex/developer/ui/migration-guide/migration-guide-2x-updates#conversations-sdk) in the migration guide.

## Web accessibility

| Flex UI 1.0.x | Flex UI 2.0.x |
| ------------- | ------------- |
| N/A           | WCAG 2.1 AA   |

**Enhancements in Flex UI 2.0.x**: Enables customers to conform with [Web Content Accessibility Guidelines (WCAG) 2.1 AA](https://accessibleweb.com/rating/aa/) with limited development work. See [Flex UI web accessibility](/docs/flex/developer/ui/web-accessibility) for more details.

## Degraded mode

| Flex UI 1.0.x          | Flex UI 2.0.x                  |
| ---------------------- | ------------------------------ |
| Introduced in `1.31.0` | Enabled for all minor versions |

**Enhancements in Flex UI 2.0.x**: Flex UI will initialize with limited capabilities, even if some of the components like SDKs (TaskRouter, Conversations, Voice, or Sync) are down. See [Degraded mode](/docs/flex/developer/ui/migration-guide/migration-guide-2x-updates#degraded-mode) for more details.

## User and Activity controls

| Flex UI 1.0.x                                                                                                                                                                                                                                                                                                                                                              | Flex UI 2.0.x                                                                                                                                                                                                                                                                                                                                                                                                              |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <ul><li>[Activity controls](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/MainHeader.html) in the `MainHeader` component</li> <li>[Theme](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/Theme.html) for user Activity controls in the [NoTaskCanvas](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/NoTasksCanvas.html)</li></ul> | <ul><li>Added Programmable component Activity to [MainHeader](https://assets.flex.twilio.com/docs/releases/flex-ui/latest/programmable-components/components/MainHeader) component</li> <li>Deprecated theme for user Activity controls</li> <li>Removed Activity controls from the [NoTaskCanvas](https://assets.flex.twilio.com/docs/releases/flex-ui/latest/programmable-components/components/NoTasksCanvas)</li></ul> |

**Enhancements in Flex UI 2.0.x**: The User Controls component was split out into two components: `user-controls` now just refers to the little profile pic widget which opens up a popover with the **Logout** button, and `activity` displays the current activity and drops down to allow for selecting a different activity. These controls have been updated for easier access and improved programmability. As this is a potentially breaking change, see [User and activity controls](/docs/flex/developer/ui/migration-guide/migration-guide-2x-updates#user-and-activity-controls) in the migration guide for more detailed steps on working with UI 2.0.x.

## Messaging UI

| Flex UI 1.0.x                                                                                 | Flex UI 2.0.x                                                                                                                   |
| --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| [MessageInput](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/MessageInput.html) | [MessageInputV2](https://assets.flex.twilio.com/docs/releases/flex-ui/latest/programmable-components/components/MessageInputV2) |

**Enhancements in Flex UI 2.0.x**: Moving to Flex Conversations offers more customization options for the Messaging UI. There is a new dynamic Component structure and default props. See [Flex Messaging UI v2](/docs/flex/developer/ui/migration-guide/migration-guide-2x-updates#flex-messaging-ui-v2-changes) changes for more details.

## TaskRouter SDK wrappers

| Flex UI 1.0.x | Flex UI 2.0.x                                                   |
| ------------- | --------------------------------------------------------------- |
| N/A           | New Actions and Flex Events TaskRouter SDK upgraded to `^0.5.9` |

**Enhancements in Flex UI 2.0.x**: In Flex UI 2.0.x, new Flex actions and events have been added to the [Flex UI Actions Framework](https://assets.flex.twilio.com/docs/releases/flex-ui/2.3.3/ui-actions/ActionsManager/) saving the need to access the TaskRouter SDK directly. See [New Actions and Flex Events for TaskRouter SDK](/docs/flex/developer/ui/migration-guide/migration-guide-2x-updates#new-actions-and-flex-events-for-the-taskrouter-sdk).

## AppConfig

| Flex UI 1.0.x                                                                         | Flex UI 2.0.x                                                                            |
| ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| <ul><li>`Notifications.browser`</li><li>`warmTransfer`</li><li>`colorTheme`</li></ul> | <ul><li>`Notifications.enabled`</li><li>Removed `warmTransfer`</li><li>`theme`</li></ul> |

**Enhancements in Flex UI 2.0.x**: You need to update your AppConfig structure to utilize the new config structure's names and capabilities.

## DownloadMedia Action

| Flex UI 1.0.x                                                                                                                       | Flex UI 2.0.x                                                                                                                                         |
| ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| Requires a [message object](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/Actions.html#.DownloadMedia) in the payload | Requires a [media file](https://assets.flex.twilio.com/docs/releases/flex-ui/latest/ui-actions/Actions#DownloadMedia) as it uses Twilio Conversations |

**Enhancements in Flex UI 2.0.x**: Uses Twilio Conversations under the hood.

## InsightsPlayer Actions

| Flex UI 1.0.x                         | Flex UI 2.0.x                        |
| ------------------------------------- | ------------------------------------ |
| Convention: `InsightsPlayer:<action>` | Convention: `InsightsPlayer<action>` |

**Enhancements in Flex UI 2.0.x**: See [Renamed actions](/docs/flex/developer/ui/migration-guide/migration-guide-2x-updates#renamed-actions) for the full list of renamed Insights Player actions.

## Other Flex Actions

| Flex UI 1.0.x                                                                                                                                                                          | Flex UI 2.0.x                                                                                                                                                                                                        |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <ul><li>`ApplyListFilters` and `ApplyListFiltersPayload`</li><li>`RemoveListFilters`</li><li>`SendMediaMessage` and `ChatActionSendMediaMessagePayload`</li><li>`AttachFile`</li></ul> | <ul><li>Removed `ApplyListFilters` and `ApplyListFiltersPayload`</li><li>Removed `RemoveListFilters`</li><li>Deprecated `SendMediaMessage`</li><li>New `AttachFiles` allows an array of files to be passed</li></ul> |

**Enhancements in Flex UI 2.0.x**: Some Flex actions have been removed, deprecated, and updated for flexibility.

## Voice SDK

| Flex UI 1.0.x                                               | Flex UI 2.0.x                                             |
| ----------------------------------------------------------- | --------------------------------------------------------- |
| [twilio-client](https://github.com/twilio/twilio-client.js) | [twilio-voice](https://github.com/twilio/twilio-voice.js) |

**Enhancements in Flex UI 2.0.x**: Uses the [Voice SDK](/docs/voice/sdks/javascript) which allows you to set Opus as your preferred codec. Opus generally requires less bandwidth and provides better audio quality in restrained network conditions. See [Voice SDK](/docs/flex/developer/ui/migration-guide/migration-guide-2x-updates#voice-sdk) in the migration guide for details on what's changed.

## Flex Events

| Flex UI 1.0.x       | Flex UI 2.0.x               |
| ------------------- | --------------------------- |
| `yticaTokenUpdated` | Removed `yticaTokenUpdated` |

**Enhancements in Flex UI 2.0.x**: Some Flex events have been removed.

## Dialpad

| Flex UI 1.0.x                                        | Flex UI 2.0.x                                              |
| ---------------------------------------------------- | ---------------------------------------------------------- |
| Legacy Dialpad Native Dialpad introduced in `1.18.0` | [Flex Dialpad](/docs/flex/admin-guide/setup/voice/dialpad) |

**Enhancements in Flex UI 2.0.x**: [Legacy Dialpad](/docs/flex/end-user-guide/legacy-dialpad) implementations are no longer supported. Please [migrate to the native Flex Dialpad](/docs/flex/admin-guide/setup/voice/dialpad-migration-guide).