# Changelog

## Unreleased

## 2.14.0

### Fixed

-   adding body to content template message bubble
-   Modifying the text color of Content Template Bubble
-   Prevent AudioPlayerManager from playing audio after stop is called during loading

### Chore

-   My chore
-   Update FlexSDK to 0.99.44 in FlexUI
-   Update FlexSDK to 0.99.45 in FlexUI

### Added

-   add whatsapp text for content template
-   Added the search input component related strings
-   adding alignment support on email editor.
-   adding error messages on content template load and send failure case
-   Adding right-to-left (RTL) languages like Hebrew.
-   fix event listener for messageAdded event

### Documentation

-    release notes, changelog for 2.13 release

## 2.13.0

### Added

-   Added new method to check if Audio Player is playing currently
-   Adding placeholder logic for canvas
-   Decoupling content template button via action
-   Moved content template code out of core.
-   Update the validate token references to consume the new API exported at the FlexSDK core

### Changed

-   Add caching featuresConfig to local store
-   Move local caching from flex-sdk-js to here
-   Moving ProfileConnector API code from flex-sdk directly to flex-ui-core.
-   Upgraded flex-sdk to version 0.99.40-dev.
-   Use different local cache keys than flex-sdk-js uses to avoid collision


## 2.12.0

### Added

-   Add icon to browser push on queues stats notifications
-   Add support for dynamic localized strings
-   Added MultiSelectCombobox component
-   Added optional footer in Datatable
-   Added queue filter component to teams view filter panel
-   Added SendRichContentMessage Action
-   Push notification on receiving alerts
-   updating message canvas
-   UX changes for footer in QueueDataTable

### Fixed

-   Added the limitation over sending both text and attachments in the same message with some help text
-   bring back default prop removeLabelForSingleTab  in Tabs component
-   Fixed key issue on ContentTemplateBrowser variables
-   Fixed the bug where filters were collapsible when 1 filter present.
-   Guard against undefined object
-   Updated dompurify package to latest

## 2.11.0

### Fixed

-   Fix react types versions
-   Improving participant handling for multi tasks
-   Styling of message bubble in case of ordered list.
-   Updated sort icons on the column header in dataTable component
-   Z-index fix for tabs where the content was overlapping the labels when scrolled

### Added

-   Added content template browser for sending rich content messages.
-   Added content template browser open/close button under message input.
-   Added missing jsdocs for ConversationHelper
-   Modified UserCard component to make secondLine as an optional parameter


## 2.10.0

### Fixed

-   Account for a conditionally rendered Tab which is selected no longer being rendered
-   Added unsubscribe method to remove conversation listeners post transfer.
-   Bump flex-sdk version, with the autoAcceptIncomingCalls flag
-   Improving participant handling for multi tasks

### Added

-   Changes for Reset label in Filter Panel
-   Adding AMB specfic icons
-   Upgraded flex-sdk

## 2.9.0

### Fixed

-   Bring back awareness of feature flag and error code that disable telemetry
-   Fix bug with index pop on tabs component
-   Fix the author email for inbound email
-   Fixed use applied legacy filter value from redux to populate side panel
-   Made the agent/worker column as pinned and added horizontal scroll to Teams view table
-   Prevent accessing non-existent recipients paginator page
-   Reverted horizontal scroll from Teams view table
-   Upgraded to twilio-chat 6 to remove rfc6902 vulnerability

### Changed

-   Add ProfileHeaderText to Customization definitions
-   Bump flex-sdk version and consume disableDataClient Flag

### Added

-   Add isHighlight flag for highlighting
-   Add support for single tab to take up full view with a separator at the top of the component
-   Added an export of NotificationBarContainer so I can use it to rebuild the notification bar for timeline
-   Support hide footer

## 2.8.2

### Fixed

-   Upgrade FlexSDK to fix duplicate TR instances

## 2.8.1

### Fixed

-   Fix bug with index pop on tabs component

## 2.8.0

### Changed

-   Added a helper function so MessagingBubble can grab display name from state store

### Added

-   Add cold transfer for CBM tasks
-   Added getDistanceToNow to dateUtils library
-   Added refresh icon
-   Adding a 'ref' to the `Tabs` component
-   Validate date input on dateUtils to prevent RangeErrors

### Fixed

-   Add missing template strings
-   Adding logic to handle notifications mode set to 'always'
-   Fix invalid DOM element
-   Fix visual bug in notifications if 'actions' resolves to an empty array
-   JS injection fixed in plate editor
-   Prevent undefined overriding author name
-   Updated parent component to listen to focus event rather than click event

## 2.7.1

### Fixed

-   Fixed invalid DOM element
-   Prevent undefined overriding author name
-   Updated parent component to listen to focus event rather than click event

### Added

-   Pass data-testid to TabHeader component

## 2.7.0

### Changed

-   Bump flex-sdk version to 0.99.3-dev
-   Update fonts use to Twilio hosted ones

### Added

-   add new icons and `title` attr support for custom icons
-   add subMonths dateUtil
-   Add support Icon
-   Added a new date util method
-   Added LocaleSelector to the nativeComponent API
-   bumped flex sdk to 2.2.7 for DR support
-   Email pause feat
-   introduce new modular folder structure inside flex-sdk
-   upgraded to Node 20
-   upgraded to Node 20

### Chore

-   Add support for multitab in browser notifications
-   Bump FlexSDK to 0.99.2-dev
-   Clear shown notifications on logout
-   Extend ChatManager to accept multiTab support flag
-   Fix typescript errors
-   prettier changes that got picked up in my branch for some reason
-   Restrict changes to browser notifications behaviour is only to the MultiTab feature flag
-   Type on changelog
-   Update definitions files
-   updated the package.json and changelog for 2.6 release

### Fixed

-   Added optional disable for email list items
-   Dark mode fix changes for email conversation
-   Prevent browser notifications with the same title and body from being shown multiple times under a second
-   Redesigned Agents/Queues Tab
-   revert to Node 14
-   set local message state after SetInputText action for email
-   Upgraded axios to fix vulnerability

## 2.6.2

### Fixed

-   Fix invalid DOM element
-   Prevent undefined overriding author name

## 2.6.1

### Added

-   bumped flex sdk to 2.2.7 for DR support

## 2.6.0

### Fixed

-   Add background color token to MessageInputArea to correct dark mode bug
-   Fixed a bug where Paste selects on dark theme on Windows were not readable
-   Fixed missing "from" in outbound threads
-   Make aggregated data tiles focusable from keyboard to enable keyboard scroll.
-   Removed the conditional color from tsx file
-   Safe accessor for message input and email editor components
-   Updated date-fns version
-   Upgrade Flex SDK

### Added

-   Updated customization enum to include device manager
-   Upgrade webpack to 5

## 2.5.2

### Fixed

-   updated date-fns version
-   Upgrade Flex SDK

### Chore

-   removed @types/date-fns

## 2.5.1

### Fixed

-   Make aggregated data tiles focusable from keyboard to enable keyboard scroll.

## 2.5.0

### Added

-   adding test ids to the tabs that actually render on the dom.
-   Icons can now be passed a data-testid and it will render with the passed id instead of a generic. Passing nothing will default to the generic test-id.
-   Icons white space change on file won't go away

### Changed

-   New queue stats page cards view common component

### Fixed

-   Improved performance of `MessageInputArea` component

## 2.4.0

### Fixed

-   Fix for element locator (Till UI is updated)
-   Fix for email telemetry logs.
-   Fix for webchat error notification.
-   Fix issue when chat transcripts don't load after opeing once
-   fixed a bug where multiline filter in teams view and send label instead of value onchange
-   Increased SidePanel width
-   Remove console warning for addWrapper API and make this fully supported
-   reverted FLXUIAPPIN-1841
-   updated conversation SDK to 2.4.1
-   Updated disable behaviour for Apply button in Teams view filter
-   upgraded `@reduxjs/toolkit`
-   upgraded `slate`

### Added

-   added action to update number in dialpad
-   Added the new declarative customization API to Flex UI
-   Brought in Error boundary from aion for timeline and udl components. To wrap functional and class components with an error boundary that will only crash the portion of the app not the whole thing.
-   bumped source-map-loader and core-js to latest minor
-   Citrix Flex v2 Optimisation
-   Forward module property of error into Telemetry

### Changed

-   Changed default font version
-   Refactor test ids from `data-test` to `data-testid`

## 2.3.2

### Added

-   Added action for Salesforce integration

## 2.3.1

### Fixed

-   Fixed email, vdi and chat related bugs

## 2.3.0

### Fixed

-   Fixed initialisation issues using timeout for dependencies

## 2.2.1

### Added

-   Forward module property of error into Telemetry

## 2.2.0

### Added

-   Added functionality for saving, retrieving and deleting draft email from session storage
-   Added separate components `TranscriptMessagingCanvas`, `TranscriptMessageList`, `TranscriptMessageListItem`, and `TranscriptMessageBubble` to show the transcript. Purposfully wrote separate components, so that we don't break any exisiting functionalities of the Chat canvas.
-   Replace email send material ui button with Paste component
-   The above created components are making use of the latest paste (design-system) components.

### Fixed

-   Added style related changes to fix various Email UI issues in dark mode of Flex.
-   Fix colors for view full email thread window in dark mode

## 2.1.2

### Added

-   Telemetry utils for sdk initializations

## 2.1.1

### Added

-   Email draft feature
-   Telemetry for plugins library

## 2.1.0

### Added

-   Add keyboard shortcuts notifications

### Fixed

-   Chat counter (message notification bubble) is not being displayed in the first interaction in Flex
-   Fix messagelist accessibility when switching conversation
-   Updated country selector to support multiple calling codes for a country

## 2.0.2

### Added

-   Forward module property of error into Telemetry

## 2.0.1

### Fixed

-   Fix messagelist accessibility when switching conversation

## 2.0.0

### Changed

-   Changed API signature for the `DownloadMedia` action. Previously, the action required `message` with a `media` object as part of the payload. From now on, this action will require a `media` object directly, so you don't have to pass a full message.
-   Bumped Flex SDK version to 0.9.0
-   File attachment config from TaskChannelDefinition (CBM) or appConfig.js (legacy)
-   ChatManager now has static methods `isCBM`, `getFileAttachmentConfigFromConversationSid`
-   Anchored reply box to the end of email message list
-   Show reply button after accepting an email task
-   Improved accessibility of new chat input component
-   Support for media and text in the same message bubble
-   Upgrade Paste libraries to latest
-   Removing flex-webchat-ui package
-   Side Panel title changed to h3
-   Change panel headers in SplitContentContainer to hidden h3 headers
-   Change VerticalTabs so each list item is a h5
-   added eslint rule and removed unused exports
-   Added a focus indicator to the attach file button when it is in a disabled state
-   Screenreader gives reasons when the message input text area is disabled
-   Screenreader gives reasons when the remove file attachment button is disabled
-   Added `registerIfEqualsHelper()` function to `initialize.ts` and associated test in `initialize.test.ts`
-   Reviewed and replaced header tag usages to improve structure for accessibility
-   Bump flex-sdk version

### Added

-   Added parameter for passing Flex UI version to call to fetch service config
-   Introducing new default props `rows` to messageInputV2 to set the default height
-   Support for delivery receipt for messages
-   Announce new chat messages
-   Can monitor attachments in chat
-   Add support for loading state to DataTable
-   Support `.credit` domain link highlighting
-   Refurbished user controls and new profile card component
-   Message loading indicator
-   Add scroll to newest message button for Agent UI
-   New message separator for all incoming messages
-   Added showNotificationSingle helper
-   Selectors for email test added
-   Added test attributes to cypress page objects
-   Added test attributes for page objects to enable efficient automation tests
-   Add selectionStart and selectionEnd as part of conversationInput state
-   File size rounding and support of multiple units (KB through TB)
-   Now scroll positions get preserved between conversations
-   Add feedback for disabled drag and drop
-   Added data-test ids for composite notification bar elements
-   Multiple attachments supported
-   Chat messages are now keyboard navigable using the up/down arrow keys
-   New data-test selector for customer tab

### Fixed

-   Typings of tokens in theme
-   Themes of components in the theme object are typed as CSSObject
-   Email editor blocking message list
-   No preceding whitespace included in url regex string
-   Fixed bug of message author not showing in taskListItem on new chat conversation
-   Add a default filename for unnamed media messages received
-   New message line indicator is not getting disappeared upon focusing the input field
-   Dark theme notification bar background
-   Sent message text no longer stuck in input after tab switching
-   Changed `mb` to `MB` for file size to make it common across all error messages
-   Numpad enter no longer behaves erroneously
-   Prevent multiple simultaneous file attachments
-   Input now retains focus when sending message via button click
-   Fix markdown links without specific protocol being interpreted as internal links
-   Fixed issue where empty messages were sent with old input component
-   Bug fix to handle null message body
-   Supervisor View - New message line separator is not getting disappeared in the chat canvas of supervisor view
-   Supervisor View - New message line separator is not getting disappeared in the chat canvas of supervisor view
-   Fix console error resulting from mismatched prop type in AttachFileButton
-   Fix issue with loading wrapped up conversations when switching away from agent desktop and back
-   Fix console error resulting from absence of keys on list items rendered by Tabs
-   Supervisor View - New message line separator is not getting disappeared in the chat canvas of supervisor view
-   Supervisor View - New message line separator is not getting disappeared in the chat canvas of supervisor view
-   Fix console error resulting from mismatched prop type in AttachFileButton
-   Fix issue with loading wrapped up conversations when switching away from agent desktop and back
-   Fix console error resulting from absence of keys on list items rendered by Tabs
-   Supervisor View - New message line separator is not getting disappeared in the chat canvas of supervisor view
-   Fix console error resulting from mismatched prop type in AttachFileButton
-   Fix issue with loading wrapped up conversations when switching away from agent desktop and back
-   Fix console error resulting from absence of keys on list items rendered by Tabs
-   Fixed keyboard navigation for SMS messages
-   FlexUI Core TSC files
-   Added theme props for the first and second line info containers for the UserCard component
-   Fixed issue causing audio icons for mp3 and amr file types to show as a generic icon
-   Prevent unnecessary renders of NotificationBar
-   Prevent unnecessary renders of NotificationBar
-   Added error notification if sending a chat message failed
-   Adds line breaks to long error notifications in the chat canvas of supervisor view, so that the agent/supervisor can close the notification
-   Ensure all messages are read in wrapped up state
-   Fixed notification not showing if pasting files over allowed file limit and notification not showing if pasting when attachments have been disabled in service config
-   Fix issue with styling of buttons when disabled
-   Chat messages are now correctly sorted both visually and structurally
-   Fixed a bug causing crash of loading Conversation screen with email conversation
-   Fix logic around calculating unread messages state when lastMessageReadIndex is updated
-   Stopped attachment bubble overflowing, adjusted styling to keep the behaviour consistent
-   Fixed error message for invalid file type attachment for download & send attachment scenarios
-   Preserve text input across state when file is attached
-   MessagingCanvas now fetches oldest messages if all the newer messages are displayed - even without scroll interaction
-   Some notifications are only shown if they are related to the selected task
-   Scroll to top of messagelist when rendering loading spinner so it is visible
-   Improve Notifications Framework stability
-   New logic for hoc
-   DebuggerUI renders outside of FlexUI when rendered inside small iframes
-   Changing the colour of the close/reset icons on the dialer (dark mode)

    **Before:**

    ```js
    // Using Conversation SID
    Actions.invokeAction("DownloadMedia", { message, conversationSid });

    // Using a direct reference to the conversation object
    Actions.invokeAction("DownloadMedia", { message, conversation });
    ```

    **After:**

    ```js
    // Using Conversation SID
    Actions.invokeAction("DownloadMedia", { media, conversationSid });

    // Using a direct reference to the conversation object
    Actions.invokeAction("DownloadMedia", { media, conversation });
    ```

## 0.50.5

### Changed

-   Increased event limit for notification event emitter

## 0.50.4

### Fixed

-   Dropping character(s) issue

## 0.50.2

### Fixed

-   Update regex not to use lookbehind

## 0.50.1

### Fixed

-   Overflowing code element markdown text

### Added

-   .app domain is now added to the markdown allowlist

### Fixed

-   Code element markdown text is overflowing the message bubble

## 0.47.0

### Added

-   Telemetry for TaskChannelDefinition and Actions framework.

### Fixed

-   Group inbound chat messages by date.

### Changed

-   Changed the design of the initialization error screen.

## 0.46.0

### Added

-   `Markdown` component is now exported. It uses `markdown-to-jsx` under the hood. Check the library for the documentation.

### Fixed

-   PredefinedMessage renders with wrong timestamp

## 0.45.1

### Changed

-   Import only required component from Material UI

## 0.45.0

### Fixed

-   Chat link parser now recognise domain and params not separated by a slash. For instance: "http://flex.twilio.com?test=true".

## 0.43.1

-   Add `headerColSpanKey` prop to `DataTable.ColumnDefinition` for rendering headers with colspan.
-   Add `subHeader` prop to `DataTable.ColumnDefinition` to allow rendering additional header row.
-   Add `theme.DataTable.SubHeader` to customize DataTable sub-headers.
-   Add `theme.DataTable.Header.withSubHeader` to customize DataTable header with sub-header below.
-   Add `name` property to `ColumnDefinition`, which is used to add custom classes to `DataTable` cells.
-   Add `renderMarker` property to `Legend` and `LegendItem` components providing a way to customise markers.

## 0.42.0

### Dependencies updated

-   [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 should the data 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.

### Fixed

-   Improved chat message input rendering performance by debouncing store update on keypress.

## 0.41.0

### Changed

-   Browser notifications now gets triggered whenever a notification trigger kicks in and the browser is not focused.

## 0.40.0

## 0.39.0

### Changed

-   In default theme darker chat bubbles (and in dark mode) show links that are of text color, not standard browser link color.

### Fixed

-   Improved chat messages rendering performance
-   Prevented redundant scroll position updates from being dispatched

## 0.38.1

### Fixed

-   Highlight URLs only if they are not part of another string
-   Fix Handlebars 4.7.0+ errors
-   Notify user for new chat message only if they are participant

## 0.38.0

### Fixed

-   Fix chat messages read status
-   Fix 'unmounted components' errors for outbound dialer
-   Fix on dialer input field when flags load

## 0.37.0

### Fixed

-   Fix country selector not disabled issue

## 0.36.3

### Fixed

-   Fix a bug with incorrect number of typing members in the chat

## 0.36.2

### Added

-   Bundling doc tutorials and resources for Flex and Webchat

## 0.36.1

-   Remove `MessagingCanvas` scroll debounce callback when component gets unmounted

## 0.36.0

### Added

-   Add `hideFooterOnInactive` prop to `MessagingCanvas`. Defaults to false.

## 0.35.1

### Added

-   `unconsumedMessages` property to ChatChannel state that contains unread messages
-   New component `MarkdownRenderer` that renders a formatted text (bold, italic, bullet list and numbered are supported).
-   New default notification with id `NewChatMessage` which enables browser notifications for new messages if window is not active. `Notification.requestPermission()` must be called to allow browser notifications.
    -   Template `NewChatMessageNotificationTitle` with default value "New message from {{lastMessage.authorName}}"
    -   Template `NewChatMessageNotificationBody` with default value "{{lastMessage.body}}"
-   Introduced helper component NotificationBar.Action, that can be used for providing clickable action to notification definition.

```typescript
interface NotificationBarActionProps {
    label: React.ReactText; // Can be simple text string or a template string
    onClick: NotificationBarActionCallback;
    icon?: string;
}
```

-   Add support for the following Markdown elements:

| Options       | Syntax                      |
| ------------- | --------------------------- |
| Bold          | **Bold**                    |
| Italic        | _Italic_                    |
| Strikethrough | ~Strikethrough~             |
| Bullet list   | _ List<br>_ List<br>\* List |

### Changed

-   `invokeAction` now returns an Error when the Promise is rejected
-   Typing indicator in chat canvas now shows count of people typing if that number is above 1.
-   Notifications now have a new `onClick` property. If set and the internal notification bar shows hyperlinks then this callback is called when any of the links are clicked.
-   The `useLocalState` prop of `MessageInput` is enabled by default.
-   Notification definition got a new property actions that can be used by in app notifications to show clickable action items.

```typescript
actions?: Array<React.ReactElement>;
```

Example:
To register a notification with actions

```typescript
Notification.registerNotification({
    id: "newNotification",
    closeButton: true,
    content: "New Notification handler",
    timeout: 0,
    type: NotificationType.warning,
    actions: [
        <NotificationBar.Action label="Hello" onClick={(event, notification) => {}} icon="Bell" />, // using the action component.
        <button type="button" onClick={(event, notification) => {}}>
            Hello world
        </button> // using custom action button
    ]
});
```

## 0.34.0

-   Minor internal refactoring

## 0.33.2

### Updated

-   `DynamicForm` email validation now correctly supports 2-chars domains, subdomains.

## Added

-   Add `GreenIndicator` and `GreyIndicator` icons.
-   `MemberState` has a new property `online` that represents if the member is online or not.
-   Introduced `ChatChannelHelper` class to wrap all Chat Channel specific helper methods. An instance for a task can be obtained from `TaskHelper.chat` property. `TaskHelper.lastChatMessage` method was deprecated, use `ChatChannelHelper.lastMessage` instead.
-   Add method to `ChatChannelHelper` named `isCustomerOnline` to detemine if the customer in the channel is online or not.

## 0.33.0

### Added

-   Add `AudioPlayerManager` API for playing sounds. It supports playing and stopping sounds

Example:

Media to be played is defined as:

```
export interface MediaData {
    url: string;
    repeatable: boolean;
}
```

Note:

-   Repeatable medias are played in a loop, like a phone ringing that goes on and on. The only way to stop a repeatable media is to manually call the stop method.
-   Non-repeatable medias are played once, like a beep or bleep. Non-repeatable medias automatically stop after being played once.

To play media, make sure you specify the url and if it is repeatable or not

```
const mediaId = AudioPlayerManager.play(
    {
        url: "sound-url",
        repeatable: true
    },
    (error: AudioPlayerError) => {
        // handle error
    }
);
```

To stop media, use the media id returned from the `play` method:

```
AudioPlayerManager.stop(mediaId);
```

To mute or unmute sound, use the `toggleSound` method:

```
AudioPlayerManager.toggleSound(true); // to mute
AudioPlayerManager.toggleSound(false); // to unmute
```

### Fixed

-   Fix exception thrown when rendering table rows.

## 0.32.0

### Added

-   Added `Dialpad` and `Dialer` components. Former is for showing a numeric dialpad, latter is a more comprehensive dialpad with call button and edit field for chosen number.a

### Fixed

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

## 0.31.0

### Added

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

    Example on how to set aria attributes:

    ```
    Flex.MessageInput.defaultProps.sendButtonAriaProps = {
        ariaLabel: "Send Message",
        ariaLive: Flex.AriaLive.Polite
    };

    Flex.MessageInput.defaultProps.textAreaAriaProps = {
        ariaLabel: "Enter your message here to get help",
        ariaLive: Flex.AriaLive.Assertive
    };

    Flex.MessageList.defaultProps.listContainerAriaProps = {
        ariaLabel: "Message list",
        ariaLive: Flex.AriaLive.Off
    };
    ```

### Changed

-   `CheckboxGroup` now supports custom options IDs

### Fixed

-   `DynamicForm` email validation now correctly supports numbers, dashes and dots.
-   `Notifications.dismissNotificationById` did not dismiss ALL notifications by that ID
-   Chat button can now be themed with `theme.Chat.MessageInput.Button`. Example on how to change the icon for a text:

```
appConfig = {
    <...>
    Chat: {
        MessageInput: {
            Button: {
                borderRadius: "5px",
                width: "100px",
                fontSize: "18px",
                svg: {
                    display: "none"
                },
                ":after": {
                    content: '"Send Button text"'
                }
            }
        }
    },
    <...>
```

## 0.30.2

### Changed

-   `CheckboxGroup` now supports custom options IDs

## 0.30.1

### Fixed

-   Components properly inherit font property of the `RootContainer`, thus allowing to change font consistently in whole application:

```
appConfig = {
    <...>
    colorTheme: {
        baseName: "FlexLight",
        overrides: {
            RootContainer: {
                "font-family": "Apple Chancery"
            }
        }
    }
```

## 0.30.0

### Added

-   `theme.FormComponents.Select` to Theme to customise the Select input item
-   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. 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 = false;
```

-   `DynamiComponent` got a new property `rootContainerStyles` which is the set of CSS rules that are going to be applied by `DynamicComponent` to the main root container it is rendering. Default value of this is

```
    display: flex;
    position: relative;
    overflow-x: hidden;
```

### Changed

-   `TextareaItem` now uses MaterialUI's textarea to improve style consistency with `InputItem`.
-   `theme.FormComponents.TextArea` now applies to the textarea container, not directly to the element itself. This is to enforce consistency between form item.
-   `ConnectingAnimation` now works in any size of container. Also the size of animation elements inside can be controlled with new `sizeMultiplier` property.

### Removed

-   Removed `cols` support for textarea.
-   Removed `connect` export from the `ChatModule`

## 0.29.1

### Fixed

-   Minor error handling - catching a few unhandled promise rejections

## 0.29.0

-   A few new reusable components added to the library

## 0.28.0

-   `AgentDesktopView` `splitterOptions` were not settable anymore via config (only via default props)

## 0.27.2

### Fixed

-   Content splitter component showed visible scroll bars when size of the area was not detected properly.

## 0.27.1

### Fixed

-   Window resize detection for Chrome v74 if parent iframe was hidden
-   Handling warning when sending typing indicator multiple times

## 0.27.0

### Added

-   New prop `autoInitChannel?: boolean` added to `MessagingCanvas` to automatically initialize chat channel if not initialized already.

### Changed

-   `MessageInput` is disabled with a message if user is not a member of the channel.

### Dependencies updated

-   [twilio-chat] to version 3.2.3
-   [@material-ui/core] to version 3.9.3

## 0.26.2

### Added

-   Add `Supportability` and `SupportabilityBold` icons.

### Changed

-   `ModalPopupWithEntryControl`'s `entryPoint` prop now accepts both `ReactElement` and `(isModalOpen: boolean) => ReactElement`
-   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.
-   `registerGlobalStyles` method is renamed to `registerStyles`. The `registerGlobalStyles` method is still available for backward compatibility.
-   CSS reset is no longer applied when `registerGlobalStyles` or `registerStyles` is called
-   New `resetCSS` method from `@twilio/frame-ui` package

### Fixed

-   MessagingCanvas loading issues before joining the channel.

## 0.25.0

### Added

-   Add `useLocalState` prop to `MessageInput`.
    This property, if set to true, will allow the developer to store the message input value in the component state instead of the Redux state.

**Please note:** `useLocalState` should be set to false if there's the intention of changing the input value using the "SetInputText" action.

### Fixed

-   Removed redundant scrollbar from `MessageCanvasTray`
-   Fix chat's `InlineMessage` margin logic
-   Dynamic form validation now it should work and display errors properly
-   Dynamic form's `Select` now uses the same label, error message and spacing of the other fields

### Changed

-   `ThemeDef` interface renamed to `ThemeColorsDefinition`
-   Several components interfaces refactored to enforce naming convention (Component**Props**, Component**ChildrenProps**, Component**ThemeProps**)

## 0.24.0

### Changed

-   `MessagingCanvas` now initializes channel state if user is not a member.

### Added

-   `ActionStateListener` component to listen on action invocation state
-   Actions State concept introduced to Actions framework. Can be used together with `ActionStateListener` component to determine whether an action with payload is being invoked or has been explicitly blocked by code.
    -   `Actions.blockAction(action: string, payload?: any)` function added to block action with payload
    -   `Actions.unblockAction(action: string, payload?: any)` function added to unblock previously blocked action with payload

### Fixed

-   `SendMessage` action cannot be invoked twice with the same payload anymore while previous message is being sent

## 0.23.0

### Added

-   Added support for predefined message inside chat widget (MessagingCanvas)
-   Add `StackedBarChart`, `Legend`, `AggregatedDataTile`, `Link` component
-   Add `hasHoverStyle` prop to `DataTable` to make the hover style optional.

### Changed

-   Updated default styles of `DynamicFrom`
-   `FormFieldAttributes` is now deprecated in favor or field-specific attributes

### Fixed

-   Chat widget should not show "read" status for messages when the channel has just one member
-   `FormField` type now correctly allows `TextareaField`, `InputField`, `SelectField`, `RadioField` types.

## 0.22.0

### Added

-   `ConnectingAnimation` component to display a generic loading dots animation
-   `ConnectingAnimation` property to theme to set the ConnectingAnimation dots color
-   `showAvailabilityIcon` property to Avatar component (`true` by default) to be able to turn drawing availability widget on and off
-   `noStyling` property to Avatar component (`false` by default)

### Fixed

-   Prop `minimumSecondPanelSize` is now properly used in `SplitContentContainer` when provided in pixels

## 0.21.1

### Fixed

-   User could not write text in the middle of chat input anymore.
-   Friendly name was not shown as message sender for other than members of the chat channel.
-   Make sure to insert global Flex styles into the head of the document even if other styles are not there

## 0.21.0

### Changed

-   Fixed a issue where now we can set values for multiple fields in preengagement form.

### Added

-   `staticBackgroundBorderColor` property added to `theme.Progress.Circular` object.
    This property defines the color of the background border of the loading spinner, when not animating.
-   `animatingBackgroundBorderColor` property added to `theme.Progress.Circular` object.
    This property defines the color of the background border of the loading spinner, when animating.
-   `animatingForegroundBorderColor` property added to `theme.Progress.Circular` object.
    This property defines the color of the foreground border of the loading spinner, when animating.

### Removed

-   `circularProgressColor` property removed from `theme.colors` object.
-   `borderColor` and `fadeColor` properties removed from `theme.Progress.Circular` object.

## 0.20.0

### Added

-   `renderChildren` optional prop to `DynamicComponent`. Signature `(children: React.ReactNode[], align: string) => React.ReactNode[]`. This property is a callback that user
    of `DynamicComponent` can use if they want to alter the children of the fragments before rendering. By default DynamicComponent builds the list of children into its fragments from default children, children added via programmability and children added to the component tree via JSX. If `renderChildren` is specified then prior to any of the fragments rendered this callback is called to allow user the chance to change what the final rendered result will be. For example user may still want to filter out some of the children, wrap them all in some wrapper or maybe create brand new React components instead. `children` notes the children about to be rendered, `align` notes the name of the fragment rendered, which unless user has specified custom fragments, can be either `start` or `end`.

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

```javascript
// Valid
Flex.Actions.addListener("beforeNavigateToView", (payload) => {
    payload.url = "test";
});

// Valid as well.
// NavigateToView action will wait for the returned promise to be resolved.
Flex.Actions.addListener(
    "beforeNavigateToView",
    (payload) =>
        new Promise((res) => {
            asyncCall(() => {
                payload.url = "myPromise";
                res();
            });
        })
);
```

-   Added character count indicator below text input when agent exceeds the limit.

### Changed

-   Moved reset CSS to top of head to allow any custom CSS to override it.
-   `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.
-   Fixed UI issues with Chat input when shift+enter is pressed.
-   Fixed `selectItem` type in pre-engagement form by passing the missing value prop to `Select` and fixed the styles for the same.
-   Fixed the container width of `DynamicFrom` for webchat forms.

## 0.19.0

### Changed

`baseNames` theme names changed

| Deprecated name | New Theme name |
| --------------- | -------------- |
| DarkTheme       | GreyDark       |
| MediumTheme     | GreyLight      |
| BlueMediumTheme | FlexLight      |
| BlueDarkTheme   | FlexDark       |

### Added

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