Release notes

FLEX UI 1.7.1

@twilio/flex-ui@1.7.1

release date APR 5, 2019

Added

• New template TaskLineTitle used for default task channel in IncomingTaskCanvas

Fixed

• Incoming task canvas failed to render for generic/custom task channels

FLEX WEBCHAT UI 2.0.0

@twilio/flex-webchat-ui@2.0.0

release date APRIL 1, 2019

Fixed

• We have added a character limit of 32kB to MessagingCanvas. Users will see a character limit notification and message submit will be disabled if the limit is reached. The SendMessage action will validate the character limit and fail the action if the limit is reached.
• Required validation in the pre-engagement form was fixed. Users will not be able to submit the form if all required fields are not filled.
• We have fixed several issues causing chat messages to be sent or rendered twice.

Added

• Breaking change: Set predefinedMessage defaultProp to Messaging to display and customise a predefined initial message to the user. It is set to be displayed by default, but can be customized or turned off completely. Read more about how predefined message is used in Installing and using Flex WebChat
• Added sdkOptions.chat key to configuration object that can be used to pass options to chat SDK during initialization.
• Breaking change: New function Twilio.FlexWebChat.renderWebChat added to initialize and render WebChat automatically. To create and render WebChat automatically (without configuring anything). Read more about ways to initializing and configure WebChat in Installing and using Flex WebChat.
• We have added an email type field to the pre-engagement form. Data entered in that filed by the user will need to pass email validation to be submitted.

Changed

• Breaking change: Global Twilio.Flex renamed to Twilio.FlexWebChat.
• Breaking change: Twilio.FlexWebChat.createWebChat now only creates an instance of WebChat, but does not render it automatically. Use Twilio.FlexWebChat.renderWebChat to render automatically (instead of createWebChat). Read more about ways to initializing and configure WebChat in Installing and using Flex WebChat.
• Breaking change: We have removed configure() method from returned Twilio.Flex.createWebChat object. Use manager.configuration member to set the configuration.
• Breaking change: We have removed a default pre-engagement form from the out-of-the-box WebChat experience. Now startEngagementOnInit by default is true, and the default preEngagementConfig is removed. Read about how to add a pre-engagement form in Pre-engagement and context
• Breaking change: We have changed the following component props of the EntryPoint component:
  • hideTaglineWhenExpanded - choose whether to hide the tagline when chat box is expanded.
  • iconClosed - name of the icon to be shown when chat box is closed.
  • iconExpanded - name of the icon to be shown when chat box is expanded.
  • tagline - tagline content.
• We have also removed the following EntryPoint props in favour EntryPoint.Container defined in the colorTheme object:
  • entryPointStyle
  • entryPointBorderStyle
  • entryPointClassName
  • widgetClassName
  • entryPointSize
  • entryPointLocation
  • bottom
  • right
  • background
  • color
• Breaking change: Added footer text as an attribute to pre-engagement config. Now use preEngagementConfig.footerLabel to set it. To style pre-engagement form footer text, use PreEngagementCanvas.Footer in colorTheme object.
• logLevel by default is set to error.
• Breaking change: Chat's MessageInput now uses localState by default. This will allow the developer to store the message input value in the component state instead of the Redux state. Please note: MessageInput.defaultProps.useLocalState should be set to false if there's the intention of changing the input value using the SetInputText action.
• Group engagement stage constants in an Enum EngagementStage
• Breaking change: setEngagementStage() method has been removed from returned Twilio.Flex.createWebChat object. Engagement stage is determined by configuration and chat state.
• We have removed the following unused config options:
  • Config.canvasBottom prop
  • Config.postEngagementConfig prop
  • Config.timeoutEngagementConfig prop
  • SessionState.sessionData prop
  • SessionState.waitingTimeoutSeconds prop
  • SessionState.preEngagementReady prop
  • Engagement stages
  • Session Actions

FLEX UI 1.7.0

@twilio/flex-ui@1.7.0

release date MAR 29, 2019

This release contains several minor fixes, some internal refactoring and foundational work for Warm Transfers

FLEX UI 1.6.1

@twilio/flex-ui@1.6.1

release date MAR 28, 2019

Fixed

• Breaking issues with`history` package imports (affected the self-hosted builds)
• Mitigation for multiple reservation events after connection drops

FLEX UI 1.6.0

@twilio/flex-ui@1.6.0

release date MAR 12, 2019

Added

• Call monitor works on calls delivered to agents on non-client endpoints, like hardphone or SIP

Changed

• Visual update for voice call stage

FLEX UI 1.5.0

@twilio/flex-ui@1.5.0

release date FEB 18, 2019

Added

• WFO identity client integrated and exposed through Twilio.Flex.Wfo.Identity
• New 'untrustedDomain' exception on login attempts from non-whitelisted domains
• TaskSid and ReservationSid are added to Task Info Panel for easier troubleshooting

Changed

• Flex now requires <meta name="referrer" content="no-referrer"> element to be present in <head> section of HTML. If such element does not exists then Flex will issue additional browser redirect in login flow after returning from IdP (and token is present in the URL).
• Deprecated Reserved and Assigned keys in TaskStatusBasedTypeBase for task channel definitions. Use new Accepted key for reservation accepted state.
• On logout, try to detect 'Offline' activity by "sid" (serviceConfiguration.attributes.taskrouter_offline_activity_sid and, if that's not provided, fallback to the name. You can now change the name of the 'Offline' activity and users will still be set that activity on logout, or choose a completely different activity that users should be set to on logout, by changing serviceConfiguration.attributes.taskrouter_offline_activity_sid in the Configuration Service

Fixed

• Use Pending task based status key from task channel definition if both Pending and Reserved were defined for TaskStatusBasedTypeBase
• Agent status in Agent Profile of Teams View now updates currectly, even if Agent is no longer shown in the list

FLEX BACKEND

release date FEB 11, 2019

Changed

• Default agent activities are now Offline, Unvailable, Available, and Break. These are configurable via the TaskRouter Activities API.
• The custom1, custom2, custom3, custom4, and custom5 Task Channels are no longer created by default. New channels used for routing can be created using the TaskRouter TaskChannels API.

FLEX UI 1.4.1

@twilio/flex-ui@1.4.1

release date FEB 6, 2019

Fixed

• "Active Agents" filter on the Teams View will find all agents in any activity that is available

FLEX UI 1.4.0

@twilio/flex-ui@1.4.0

release date JAN 11, 2019

Fixed

• Transfers call disconnect issue has now been fixed. Call Tasks will now be accepted with endConferenceOnExit set to true, so when agent ends the call the call will be ended for the customer as well. There is no reason anymore to override the acceptTask action to achieve this.

Changed

• Removed the disabledTransfers config option as it is obsolete due to the fixed know issue with Transfers call disconnect

Added

• Supervisor will now be able to change any agents activity state in the Teams View
• Agent activity duration will now be shown for the agent in the Main Header of the app and for supervisor in the Teams view
• Plugin service will now be enabled by default

FLEX WEBCHAT UI 1.2.0

@twilio/flex-webchat-ui@1.2.0

release date JAN 11, 2019

Fixed

• Values for for multiple fields in pre-engagement form cannot be set

• Name of the agent was not shown as message sender after chat was completed

• TypeScript definitions for TS based projects are broken

• WebChat failes to load if chat channel has been deleted

Added

• You can now use custom redux store with WebChat

FLEX UI 1.3.3

@twilio/flex-ui@1.3.3

release date JAN 10, 2019

Fixed

• When clicking in the middle of the entered text in the chat input field, cursor automatically jumped to the end

Changed

• Started consuming v0.2.15 of TaskRouter JS SDK

FLEX UI 1.3.2

@twilio/flex-ui@1.3.2

release date JAN 9, 2019

Changed

• Insert global Flex styles into the head of the document even if other styles are not there

Fixed

• When loginPopup is configured, two SSOLoginHandlers become active, which cause side effects for logout action and token updates

FLEX UI 1.3.1

@twilio/flex-ui@1.3.1

release date DEC 20, 2018

Fixed

• Race condition that resulted in "no-current-call" error when accepting a call

FLEX UI 1.3.0

@twilio/flex-ui@1.3.0

release date DEC 19, 2018

Fixed

Voice

• Global mute button indicated muted state even after the call had ended.

Messaging

• Fixed UI issues with Chat input when shift+enter is pressed.

Added

Plugins

• New FlexEvent FlexEvents.pluginsLoaded that fires after all plugins have finished loading.
• Exposed common dependencies like React, ReactDOM, Redux and ReactRedux to window object for plugins to depend on.

Actions

• MonitorCall action payload got a new param extraParams that is the equally named TR SDK param for Reservation.monitor call. It is optional and UI does not set it, but developer can alter it via programmability if need be.
• Error notification when browser is unable to access microphone.
• New option isolate for router configuration section: whenever set to true, Flex will ignore any navigation action (including URL change) except for internal.
• Registered a beforeSendMessage action to check if the message exceeds the limit and handle it accordingly.
• Support for promises to Actions framework. Now, if a before-action listener returns a Promise, the Actions framework will wait for it to be resolved before completing the action. This change is back-compatible, so a lister can still return return nothing.
• SendMessage action got optional messageAttributes property to its payload that, if specified, will be used as the equally named property of the Chat SDK sendMessage call.

Views and routing

• Default route may now be changed via componentProps by setting defaultLocation property for ViewCollection.
• Flex navigation action type is exposed through FLEX_LOCATION_CHANGE constant. It can be used to listen to Flex navigation actions or do dispatch Flex-specific navigation actions.

Voice

• disableBrowserVoice option for configuration. When specified Twilio Client SDK (for Browser voice capability) will not be initialized. Attempting to accept a task that is voice and with worker's contact_uri not pointing to a phone number, the attempt is blocked and warning is shown.

Messaging

• Character limit added to messages sent by agent. Character count indicator will be shown below text input when agent exceeds the limit. Character limits per channel:
  • SMS - 1600 characters
  • Web chat - 32768 characters (32 kB)
  • Channels (Facebook, Line, WhatApp) - 4000 characters
• Character limit information added to Task Channel Definition API as a new prop charLimit

SSO login

• SSO login in pop-up window support added. config.sso.loginPopup = true can be set to enable it. To gracefully handle blocked popups, new LoginFormView React component or provideLoginInfo or tryLogin Twilio.Flex API function can be used to launch it. Additionally pop-up window features for window.open() function can be set in config.sso.loginPopupFeatures configuration variable as string.
• New API functions to run or log user in to Flex using Twilio.Flex interface:

• New LoginFormView React component to be used to provide account / user info with the following props:

interface LoginFormViewProps {
    onSuccess: (determinedConfig: Config) => any;
    userConfig: Config;
}

• New strings for LoginFormView component:

Changed

Views and routing

• View now has multiple route path support. By default name prop is taken as string to be added to the path of the specified View. One can add alternative routes with route prop. Example:

• ViewCollection was not using DynamicComponent properly so all manipulations of it other than add via programmability did not work.

Voice

• Global mute button will be disabled if there are no active calls.

Other

• Moved reset CSS to top of head to allow any custom CSS to override it.

FLEX WEBCHAT UI 1.1.0

@twilio/flex-webchat-ui@1.1.0

release date DEC 19, 2018

Fixed

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

Added

• The startEngagementOnInit option now disables pre-engagement form

Changed

• User's friendly name default to Anonymous and can be defined through context argument as friendlyName field

FLEX UI 1.2.0

@twilio/flex-ui@1.2.0

release date Nov 22, 2018

Fixed

• Use react and react-dom version 16.5.2
• Performance optimization for Teams view

Changed

• baseNames theme names changed

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

Added

• New localization strings for TaskTabAgentIncomingLabel, TaskTabAgentCallLabel, TaskTabAgentChatLabel, TaskTabAgentInfoLabel, TaskTabSupervisorInfoLabel and TaskTabSupervisorOverviewLabel

• Views of ViewCollection got a new prop mountRule. If specified, keepMounted prop value is ignored. Definition of the prop is as follows:

FLEX UI 1.1.0

@twilio/flex-ui@1.1.0

release date Nov 6, 2018

Fixed

• TypeScript definitions of the package were referencing some missing files
• Regular agents were not able to open up directory button for transfers
• MainHeader now again accepts changing logoUrl default property
• CRMContainer and MessagingCanvas did not pass props down to their custom children
• Issues with broken UI when using custom store

Added

• Ability to transfer calls to a Queue from Directory Component (previously only workers were present there)
• Action TransferTask was introduced. As with all other Task specific actions, if calling it, either task or sid must be specified, the other is autofilled then accordingly. When tapping into the action either with events or task replacement, both will be filled at execution time. Payload of the action:

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

FLEX UI AND WEBCHAT UI 1.0.0

@twilio/flex-webchat-ui@0.8.0

Changed

• New configuration options required in the application configuration:
  • accountSid - Account SID where Flex is running
  • flexFlowSid - Flex Flow SID created at onboarding for chat

Removed

• Configuration options startEngagementUrl and serviceBaseUrl

@twilio/flex-ui0.15.0

Added

• Tasks can now be transferred to another available agent from Call Canvas via new Worker Directory.
• To enable call transfers, calls will be currently accepted with endConferenceOnExit set to false, meaning that the call will not stop for customer when agent stops the call.
• As alternative to the above, disableTransfers config options was created. By default false, if set to true, the endConferenceOnExit will be enabled but transfers to other agents will not be available.
• Agent Skilling. Can be disabled by setting WorkerCanvas component prop showSkills to false.
• public_identity from worker attributes gets set to agent's chat user friendly name. If that is not set, then full_name attribute is used.
• Call recording can be enabled from configuration service.

Changed

• All actions that had taskSid in payload will now expect sid instead. Potential breaking change!!!
• Task object in Actions framework got new field sourceObject which will be pointing to the actual SDK object. Reservation in case of TaskRouter, InsightsObject in case of Insights (Supervisor views). source is still there but is deprecated.
• Some actions got changed payload
  • SetActivity can now be called with just activityName in the payload.
  • SelectTaskInSupervisor now expects/provides object as payload in form of {task?: ITask, taskSid?: string}. Providing either will autofill the other also so both will be available for whoever taps into the action via Actions framework.
  • SelectWorkerInSupervisor now expects/provides object as payload in form of {worker?: ITask, workerSid?: string}. Providing either will autofill the other also so both will be available for whoever taps into the action via Actions framework.
  • MonitorCall now expects/provides object as payload in form of {task?: ITask, taskSid?: string}. Providing either will autofill the other also so both will be available for whoever taps into the action via Actions framework.
• Chat channels need to be created by channel orchestration service for agent to be able to join them.
• Templates and channel definitions use channelType attribute from task to detect chat channel type.

@twilio/frame-ui@0.15.0

Fixed

• Styling
• Avatar callback

@twilio/flex-agent-frame-sample@0.14.0

Changed

• Consume @twilio/flex-ui@0.14.0

@twilio/flex-ui@0.14.0

Changed

• SetActivity action now has payload in the form of {activitySid: string; activityName?: string; activityAvailable?: boolean}. Only activitySid is used in default implementation and are required when invoking the action by user, but other two are filled for better context for users who override the action and need more information on what the new activity will be.
• Property task type changed to ITask for task based components. Previously TaskState interface was used which had only source and reservation properties. Properties source and reservation stay the same as they used to, but now attributes and other task properties can be accessed from task object itself. For example this.props.task.attributes can be used where applicable and there should be no need to use source sub property anymore which is referring to Task Router SDK object.
• Consume TR 0.2.8 with Reservation based task completion. Special account flag needed for everything to work properly.
• Tasks in store are referenced by reservation sid now

Added

• Components can be removed using Task Channels API:

    export type TaskChannelComponentRemoveRequest = {
        target: keyof FlexComponents;
        key: React.Key;
        options?: RemoveComponentCallOptions;
    };
    TaskChannelDefinition.removedComponents?: Array<TaskChannelComponentRemoveRequest>;

    // For example:
    myOwnChatChannel.removedComponents = [
        { target: "TaskCanvasTabs", key: "info" }
    ];

• TaskContext - Flex sets up Task Context using React Context API where it knows about an active or selected task. If Task has been selected in Agent Desktop View or Teams View then it can be obtained from Context. Interface of the TaskContext is shown below. Also withTaskContext helper function has been added that creates a HOC which adds the properties to the wrapped component.

export interface TaskContextProps {
    task?: ITask; // Task we are referring to, undefined if there is no task in context
    call?: PhoneCallState; // Call state that current task if related to, undefined if there is no task in context or there is no call for a task
    chatChannel?: ChatChannelState.ChannelState; // Chat channel state that current task if related to, undefined if there is no task in context or there is no chat for a task
    channelDefinition?: TaskChannelDefinition; // Matched task channel definition for a task, undefined if there is no task in context
}

• Using TaskContext.Consumer:

import { withTaskContext } from "@twilio/flex-ui";

const MyComponent: (props) => {
    return (
        <div>{props.task.attributes.someAttribute}</div>
    );
}

const MyComponentWithTask = withTaskContext(MyComponent);
// Register MyComponentWithTask component to Flex instead of MyComponent

• Using withTaskContext :

import { withTaskContext } from "@twilio/flex-ui";

const MyComponent: (props) => {
    return (
        <div>{props.task.attributes.someAttribute}</div>
    );
}

const MyComponentWithTask = withTaskContext(MyComponent);
// Register MyComponentWithTask component to Flex instead of MyComponent

@twilio/frame-ui@0.14.0

Added

Component.Content.remove to allow removing components from dynamic component children (both native and programmatically added ones).

Syntax:

Component.Content.remove(key: string, options: {if?: (props: any) => boolean})

where

• key - key of the component to be removed
• if - boolean expression that decides at any given moment whether the removal should be active. props parameter is the object of all properties passed by the main component to children.

Example:

removes avatar from the canvas that shows "you have no tasks", but only if the user's name is not Bob.

Flex.NoTasksCanvas.Content.remove("avatar", {if: props => props.worker.attributes.full_name !== "Bob"});

@twilio/flex-agent-frame-sample@0.13.0

Changed

• Consume @twilio/flex-ui@0.13.0

@twilio/flex-ui@0.13.0

Removed

• Individual module files in the NPM module removed. All sources bundled into a single module bundle file referenced by the main field in package.json.
• Components TaskListChatItem and TaskListCallItem - can be customized not using Task Channels API. Or use TaskListItemto use them all.
• Theme property AltContainer and IconArea; and component property alternateColors removed from TaskListItem component.
• Theme property colors.channelColors removed. Channel colors are defined in Task Channel now.

Changed

• Rendering tasks from all channels now in TaskList using default task channel definition.
• All channels are defined by Task Channels API.

Added

• Incoming call notification bar
• In case of pending tasks Nav Bar is going to show red dot on top of main and agent-view button
• Task Channels API. See below for more detailed description and information about usage,

Task Channels API

All task channels that Flex handles are defined and registered by Task Channels API. Flex registers its default Task Channel definitions (see below), but users and plugins can register their own. When Flex task based components are rendered, the first matching channel definition for a given task will be used. If there is more than one channel definition match for a task, then most recently registered definition will be used (so that you can register more specific channel definition).

See below interface TaskChannelDefinition for what can be set up. All parameters are optional meaning that ones from Default task channel definition will be used if not specified. The The most important property of a task channel definition is isApplicable callback function. The callback receives a task as argument and must return boolean true if this definition can be used to handle given task.

In a task channel definition you can specify:

• callback to determine which tasks are applicable
• strings (templates) to use in different Flex components based on task status
• colors to be used in task list based on task status
• icons to be shown in task list, tabs and canvases based on task status
• custom components to be added to task based components if channel is applicable
• custom components to be replaced in task based components if channel is applicable

Predefined Task Channels definitions are available via Twilio.Flex.DefaultTaskChannels objects for reference. Channels that are defined by default:

• Call - Twilio.Flex.DefaultTaskChannels.Call
• Chat - Twilio.Flex.DefaultTaskChannels.Chat
• Chat SMS - Twilio.Flex.DefaultTaskChannels.ChatSMS
• Chat Line - Twilio.Flex.DefaultTaskChannels.ChatLine
• Chat Messenger - Twilio.Flex.DefaultTaskChannels.ChatMessenger
• Chat WhatsApp - Twilio.Flex.DefaultTaskChannels.ChatWhatsApp
• Default - Twilio.Flex.DefaultTaskChannels.Default

It is not recommended to change Twilio.Flex.DefaultTaskChannels them at runtime. You should create your own definition and register it instead.

Flex has the following helper functions to create channel definitions with default values for chat, call and generic: Chat channel creation with default chat templates:

Flex.DefaultTaskChannels.createChatTaskChannel(name: string, isApplicable: TaskChannelApplicableCb,
    icon: string | React.ReactNode = "Message", iconActive: string | React.ReactNode = "MessageBold", color: string = defaultChannelColors.chat): TaskChannelDefinition

Call channel creation with default templates. Call channel definition uses callbacks to determine the icon and colors (based on call state and destination to render):

Flex.DefaultTaskChannels.createCallTaskChannel(name: string, isApplicable: TaskChannelApplicableCb):: TaskChannelDefinition

Default channel creation with default templates.

Flex.DefaultTaskChannels.createDefaultTaskChannel(name: string, isApplicable: TaskChannelApplicableCb, icon: string | React.ReactNode = "GenericTask", iconActive: string | React.ReactNode = "GenericTaskBold", color: string = defaultChannelColors.custom): TaskChannelDefinition

To register a task channel definition use Flex.TaskChannels.register(definition: TaskChannelDefinition, mergeWithDefaultChannel = true). You must register your channel definitions before Flex starts up.

For example:

const myOwnChatChannel = Flex.DefaultTaskChannels.createChatTaskChannel("myChat",
  (task) => task.taskChannelUniqueName === "chat" && task.attributes.somethingSpecial === "mycCustom");
// can modify myOwnChatChannel here

Flex.TaskChannels.register(myOwnChatChannel);

Also new the following API exists: Flex.TaskChannels.unregister(myOwnChatChannel); - to unregister previously registered channel Flex.TaskChannels.getRegistered(); - to get all registered task channelsFlex.TaskChannels.getForTask(task: ITask); - to get a matching task channel definition for a task

Interface of TaskChannelDefinition:

export enum TaskChannelCapability {
    Info = "Info", // whether channel has info panel
    Call = "Call", // whether channel has call canvas capabilities
    Chat = "Chat", // whether channel has chat canvas capabilities
    Video = "Video", // whether channel has video calling capabilities
    Wrapup = "Wrapup" // whether channel needs to go to Wrapup state before can be completed
}

export type TaskCallbackType<T> = (task: ITask, componentType: React.ComponentType, ...args) => T;
export type TaskStatusBasedTypeBase<T> = {
    Reserved: T;
    Assigned: T;
    Wrapping: T;
    Completed: T;
    Canceled: T;
    Pending: T;
};
export type TaskStatusBasedType<T = string> = T | TaskCallbackType<T> | TaskStatusBasedTypeBase<T>;
export type TaskChannelApplicableCb = (task: ITask) => boolean;

export type TaskChannelComponentRegistration = {
    target: keyof FlexComponents;
    component: React.ReactChild;
    options?: ContentFragmentProps;
};

/**
 * Defines a task channel
 *
 * @export
 * @interface TaskChannelDefinition
 */
export interface TaskChannelDefinition {

    name: string;

    /**
     * Used in TaskList, TaskCard, Canvases
     */
    colors?: {
        main?: TaskStatusBasedType<string>;
    };

    /**
     * Returns whether this task channel is applicable for a given task.
     * @param task task instance to evaluate the channel for
     */
    isApplicable: TaskChannelApplicableCb;

    /**
     * Icons to render to the task channel
     */
    icons?: {
        /**
         * List icon to be used in TaskList and TaskCardList
         */
        list?: TaskStatusBasedType<string | React.ReactNode>;
        /**
         * Icon to be used in Tab headers if tab is not selected
         */
        main?: TaskStatusBasedType<string | React.ReactNode>;
        /**
         * Icon to be used in Tab headers if tab is selected and in Task Canvases as the main icon
         */
        active?: TaskStatusBasedType<string | React.ReactNode>;
    };

    /**
     * Templates for components
     */
    templates?: {
        IncomingTaskCanvas?: {
            firstLine?: TaskStatusBasedType<string>;
            secondLine?: TaskStatusBasedType<string>;
        };
        CallCanvas?: {
            firstLine?: TaskStatusBasedType<string>;
            secondLine?: TaskStatusBasedType<string>;
        };
        TaskListItem?: {
            firstLine?: TaskStatusBasedType<string>;
            secondLine?: TaskStatusBasedType<string>;
            extraInfo?: TaskStatusBasedType<string>;
        };
        TaskCanvasHeader?: {
            title?: TaskStatusBasedType<string>;
            endButton?: TaskStatusBasedType<string>;
        };
        TaskCard?: {
            firstLine?: TaskStatusBasedType<string>;
            secondLine?: TaskStatusBasedType<string>;
        };
        TaskInfoPanel?: {
            content: TaskStatusBasedType<string>;
        };
        Supervisor?: {
            TaskCanvasHeader?: {
                title?: TaskStatusBasedType<string>;
                endButton?: TaskStatusBasedType<string>;
            };
            TaskInfoPanel?: {
                content: TaskStatusBasedType<string>;
            };
            TaskOverviewCanvas: {
                firstLine?: TaskStatusBasedType<string>;
                secondLine?: TaskStatusBasedType<string>;
            }
        }
    };

    /**
     * Set of capabilities, used to render Tabs
     */
    capabilities: Set<TaskChannelCapability>;

    /**
     * Custom components to be added for this task channel. E.g. custom Tabs. Supports only components that have a static "Content" property
     */
    addedComponents?: Array<TaskChannelComponentRegistration>;

    /**
     * Custom components to be replaced for this task channel. Supports only components that have a static "Content" property
     */
    replacedComponents?: Array<TaskChannelComponentRegistration>;

}

@twilio/flex-webchat-ui@0.6.0

Removed

• Individual module files in the NPM module removed. All sources bundled into a single module bundle file referenced by the main field in package.json.

Changed

• Themeing was reworked and config parameters changed. User now has 4 distinct levels available to theme their application.

  • Not specifying a predefined theme, in that case BlueMediumTheme is chosen automatically.
  • Specifying predefined theme - either colorTheme:"DarkTheme" or colorTheme: {name: "DarkTheme"}. Available themes are MediumTheme, DarkTheme, BlueMediumTheme and BlueDarkTheme. A predefined theme specifies base colors used and also whether the theme is considered light or dark, which influences text and hover colors unless they are specifically changed.
  • Overriding all or a selection of colors and/or the lightness of the theme that was set by the predefined theme (note, specifying predefined theme was not compulsory, but in BllueMediumTheme was then used as default).
    • colors - variables base1..base11 are colors provided by the predefined theme that set the tone of the theme. User can override all (preferred) or some of those colors. User can also override any of the theme independent hardcoded colors like for example the red color of hangup button.
      • Available colors to override are:

        base1, base2, base3, base4, base5, base6, base7, base8, base9, base10, base11, defaultButtonColor, lightTextColor, darkTextColor, buttonHoverColor, tabSelectedColor, connectingColor, disconnectedColor, notificationBackgroundColorInformation, notificationBackgroundColorSuccess, notificationBackgroundColorError, notificationBackgroundColorWarning, notificationIconColorError, notificationIconColorWarning, userAvailableColor, userUnavailableColor, errorColor,​
        

    • light - Default text color, hover colors and rule of which base color is chosen for SideNav and MainHeader depend on this boolean.
  • The above mentioned parameters together with the built in color -> component css props mapping result in final theme where each component has a set of color specific css props. Should this not suffice there is a final step of providing overrides property that allows for overriding any parts of this result. Documenting that object is beyond the scope of this changelog, it is easiest to just monitor that object in debugger and decide on what params to change.

  Examples:

// Picks the default blue dark theme
config.colorTheme = "BlueDarkTheme";
// Picks dark theme, changes all of its base colors to new ones and tells the system that we still expect it to take the theme as dark (light parameter)
config.colorTheme = {
     name: "DarkTheme",
     colors: {
         base1: "blue",
         base2: "orange",
         base3: "yellow",
         base4: "black",
         base5: "white",
         base6: "pink",
         base7: "red",
         base8: "blue",
         base9: "brown",
         base10: "black",
         base11: "white"
     },
     light: false;
}

@twilio/frame-ui0.13.0

Changed

• Requiring key property for all custom components passed to Component.Content.register/add. E.g. <div key="custom-key"/>.

Removed

• Individual module files in the NPM module removed. All sources bundled into a single module bundle file referenced by the main field in package.json.

Added

• Add Circular Progress component

@twilio/flex-agent-frame-sample@0.12.0

Changed

• Consume @twilio/flex-ui@0.12.0
• Custom redux store sample updated
  
  

@twilio/flex-ui@0.12.0

Changed

• An optional SSO config option sso.tokenRefreshIntervalMs changed to sso.tokenRefreshThresholdMs to specify a threshold in milliseconds when token will be updated before it is expired
• TaskListContainer will now render only a single TaskList with static filter set as a property
• TaskList is animating now when task come and go
• "HoldCall" will no longer toggle the hold state but will be meant only for call holding. Separate "UnholdCall" action was added.
• SupervisorDesktopView component renamed to TeamsView
• Template SideNavSupervisorView renamed to SideNavTeamsView

Added

• Showing a notification bar when session token expires.
• Added staticFilter prop added to TaskList for stand-alone use.
• Show a call bar to indicate an ongoing call when not viewing Agent Desktop
• Added a few containers to Theme to accomodate more theming
  • MainContainer - CSS props for lowest level container that includes the whole application except Main Header and SideNav
  • Supervisor.Container - CSS props for main container in Supervisor Desktop
• Added "UnholdCall" action to unhold calls. Payload same as HoldCall, including task. – Added support for views routes, which includes
  • New actions to navigate the browser to different locations in the way similar to HTML5 History API:
    • HistoryPush
    • HistoryReplace
    • HistoryGo
    • HistoryGoBack
    • HistoryGoForward
  • New property route for View component to mount a view to a route different from it's name
  • Support for browser and memory history that is configurable through configuration file
  • Flex store enhancer for creating a custom store:

import { applyMiddleware, combineReducers, createStore, compose } from "redux";
import { createLogger } from "redux-logger";
import { FlexReducer, applyFlexMiddleware } from "@twilio/flex-ui";
import { myAppReducer } from ".MyRootReducer";

const reducers = combineReducers<MyStoreState>({
  flex: FlexReducer,
  myApp: myAppReducer
});

const middleware = applyMiddleware(createLogger());

export const myReduxStore = createStore(
  reducers,
  compose(
    middleware,
    applyFlexMiddleware()
  )
);

@twilio/frame-ui0.12.0

Changed

• Global CSS styles under .Twilio class name for standard HTML tags a, p, h1, h2, h6, hr, iframe and p are set now.
• CSS reset included. Resetting browser defaults for standard HTML elements.

Added

• Support for recursive componentProps is configuration: Can be used like:

componentProps: {
        CRMContainer: {
            uri: "http://twilio.com"
        },
        Supervisor: {
            TaskCanvas: {
                Header: {
                    titleTemplateCode: "MyOwnHeaderTemplate"
                }
            }
        }
    }

@twilio/flex-agent-frame-sample@0.11.0

Changed

• Consume @twilio/flex-ui@0.11.0

Removed

• No longer include the Open Sans font since flex-ui will handle it

@twilio/flex-ui@0.11.1

Fixed

• Global Twilio.Flex variable not overwritten anymore

@twilio/flex-ui@0.11.0

Removed

• Removed support for insecure login:
  • insecureLogin action is removed
  • Only JWE tokens are now supported
  • workerDefaultId and workerDefaultPassword configuration options are now obsolete

Added

• PluginManager - as a part of Flex initialization plugin loading can be enabled.
  • Can be enabled by setting configuration.pluginService.enabled to true.
  • Plugins can be initialized by calling Twilio.Flex.Plugins.init(MyPlugin).
• A new method for Manager's instances fetchConfiguration asynchronously retrieves a configuration from Flex Configuration service
• A new method for Manager's instance updateConfig merges provided configurations on top of existing configuration

Changed

• Manager's instance configuration behavior:

  • Whenever a new instance of Manager is created, it will fetch the remote configuration from Flex Configuration service. Local configuration will be applied on top of remote configuration
  • Manager's instance configuration setter is deprecated

• Themeing was reworked and config parameters changed. User now has 4 distinct levels available to theme their application.

  • Not specifying a predefined theme, in that case BlueMediumTheme is chosen automatically.
  • Specifying predefined theme - either colorTheme:"DarkTheme" or colorTheme: {name: "DarkTheme"}. Available themes are MediumTheme, DarkTheme, BlueMediumTheme and BlueDarkTheme. A predefined theme specifies base colors used and also whether the theme is considered light or dark, which influences text and hover colors unless they are specifically changed.
  • Overriding all or a selection of colors and/or the lightness of the theme that was set by the predefined theme (note, specifying predefined theme was not compulsory, but in BllueMediumTheme was then used as default).
    • colors - variables base1..base11 are colors provided by the predefined theme that set the tone of the theme. User can override all (preferred) or some of those colors. User can also override any of the theme independent hardcoded colors like for example the red color of hangup button.
      • Available colors to override are:

        base1, base2, base3, base4, base5, base6, base7, base8, base9, base10, base11, defaultButtonColor, lightTextColor, darkTextColor, buttonHoverColor, tabSelectedColor, connectingColor, disconnectedColor, notificationBackgroundColorInformation, notificationBackgroundColorSuccess, notificationBackgroundColorError, notificationBackgroundColorWarning, notificationIconColorError, notificationIconColorWarning, userAvailableColor, userUnavailableColor, errorColor, callColor, holdColor, declineColor, acceptColor, declineTextColor, acceptTextColor, completeTaskColor, liveCommsBackgroundColor, liveCommsContentColor, channelColors.inactive, channelColors.call, channelColors.video, channelColors.sms, channelColors.chat, channelColors.facebook, channelColors.line, channelColors.whatsapp, channelColors.custom​
        

    • light - Default text color, hover colors and rule of which base color is chosen for SideNav and MainHeader depend on this boolean.
  • The above mentioned parameters together with the built in color -> component css props mapping result in final theme where each component has a set of color specific css props. Should this not suffice there is a final step of providing overrides property that allows for overriding any parts of this result. Documenting that object is beyond the scope of this changelog, it is easiest to just monitor that object in debugger and decide on what params to change.

  Examples:

// Picks the default blue dark theme
config.colorTheme = "BlueDarkTheme";
// Picks dark theme, changes all of its base colors to new ones and tells the system that we still expect it to take the theme as dark (light parameter)
config.colorTheme = {
     name: "DarkTheme",
     colors: {
         base1: "blue",
         base2: "orange",
         base3: "yellow",
         base4: "black",
         base5: "white",
         base6: "pink",
         base7: "red",
         base8: "blue",
         base9: "brown",
         base10: "black",
         base11: "white"
     },
     light: false;
}

@twilio/frame-ui0.11.0

Changed

• Theming was redone. Each theme now uses the same base color to component mapping, just the colors will vary. baseplate0..baseplate6 variables that user could also override were removed and replaced by base1..base11.
• Overall chat look and feel in terms of colors was changed.
• Tab component property named visible changed to hidden. Tabs component looks only the new property of a tab.

Fixed

• Include ‘Open Sans’ font in production mode

@twilio/flex-agent-frame-sample@0.9.0

Changed

• Consume @twilio/flex-ui@0.9.0

Fixed

• Include Open Sans font in index.html
• Sample code for theme branding fixed

@twilio/flex-ui@0.10.0

Changed

• Changed Manager.create method signature (first accountSid parameter dropped). Old signature will work until next release though.
• Renamed ContactCenterManager to Manager
• "HangupCall" and "HoldCall" actions will now accept optional parameters taskSid:string or task:ITask in payload object. Actions will work without them also if just one call is available, but it is advised to use those params to be more specific for future multi call scenarios. Even if the task/taskSid are not specified, when adding listeners or overriding these actions, those parameters are filled out automatically.

Fixed

• Ensure that user roles (manager.user.roles) is always an array

Removed

• showSupervisorDesktopView setting from configuration object. Supervisor desktop depends on supervisor role of the user.

Added

• Exported VERSION constant to indicate the version of the package