Level up your Twilio API skills in TwilioQuest, an educational game for Mac, Windows, and Linux. Download Now

Menu

Expand
Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Flex UI Release Notes

This page includes the release notes related directly to Flex UI. For the list of all Flex-related release notes, including backend updates and WebChat UI releases, please see this page.

v 1.13.0

@twilio/flex-ui@1.13.0

release date AUG 29, 2019

Fixed

  • Custom Task Channel Definitions for Chat tasks which were not using chat as TaskRouter task channel, could have caused Flex not to load and initialize the chat channels for accepted tasks in previous sessions.

Added

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

Changed

  • UI performance improvements
    • We will now unmount WorkersDataTable when user navigates away from Teams View. This allows us to avoid performance consuming updates on Teams View, if user does not have it opened.

v 1.12.1

@twilio/flex-ui@1.12.1

release date AUG 15, 2019

Fixed

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

v 1.12.0

@twilio/flex-ui@1.12.0

release date AUG 14, 2019

Added

  • We have added an AudioPlayerManager API, which makes it easier to add sound playback to your custom code when extending Flex UI. Read about it here.

  • ChatOrchestrator object now supports setting orchestrations based on a task. This will allow you to decide how to handle chat based tasks on per task basis.

const orchestrationsCallback = (task: ITask) => {
    if (task.sid === "WT12345") {
        return [];
    }
};
Flex.ChatOrchestrator.setOrchestrations("accepted", orchestrationsCallback);
  • We have added ability to send DTMF tones during a voice call to all parties on the call. This includes:
    • A new button to call toolbar to display DTMF Dialpad

DTMF dialpad
DTMF dialpad

  • A reusable Dialpad UI component

DTMF dialpad

export type DialpadButtonClickCallback = (value: string) => void;
export interface DialpadProps {
   onClick: DialpadButtonClickCallback;
}
  • 2 new actions are introduced:
    • An action ToggleDTMFDialpad to open and closed Dialpad in the CallCanvas.
    • An Action SetDTMFDialpadDigits to set digits in the DTMF

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

IncomingTaskCanvas action buttons

Example: Add an eye-iconed button to the end of the list of incoming task canvas actions using content property

Flex.IncomingTaskCanvasActions.Content.add(<IconButton key="hi" icon="Eye" />);

Example: Add an eye-iconed button to the end of the list of incoming task canvas actions using Task Channel Definitions API

Flex.DefaultTaskChannels.Call.addedComponents = [{
    target: "IncomingTaskCanvasActions",
    component: <IconButton key="hi" icon="Eye" />,
}];
  • Add new exports to refer to workers instead of agents: WorkersDataTable, WorkerListFilterSelect, WorkersDataTable, WorkersDataTableProps and WorkerListFilter.
  • Aria props properties to the following components to support accessibility:
    • MessageInput:
      • sendButtonAriaProps • AriaProps • Send button aria props ({ ariaLabel: "Send Message" } by default).
      • textAreaAriaProps • AriaProps • Text area aria props ({ ariaLabel: "Enter your message here to get help" } by default)
    • MessageList:
      • listContainerAriaProps • AriaProps • List container aria props ({ ariaLive: AriaLive.Off } by default).
    • EntryPoint:
      • collapsedIconAriaProps • AriaProps • Collapsed icon aria props ({ariaLabel: "Click here to open Web Chat and get help."} by default).
      • openedIconAriaProps • AriaProps • Opened icon aria props ({ariaLabel: "Hide Chat"} by default).

Example on how to set aria attributes:

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

FlexWebChat.MessageInput.defaultProps.textAreaAriaProps = {
    ariaLabel: "Enter your message here to get help",
    ariaLive: FlexWebChat.AriaLive.Assertive
};
  • Chat "Send message" button can now be themed with theme.Chat.MessageInput.Button and allows adding text

Chat.MessageInput.Button

Example on how to change the icon for a text:

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

Fixed

  • Facebook channel definition now expects channel type to be Facebook
  • Workers in Team View WorkersDataTable will now be correctly sorted and will maintain its proper position
  • Team View performance improvements
    • Fixed a bug that upon network reconnect started calling for Teams View info twice for every time needed resulting in deteriorating experience.
    • Removed the need for all components that showed animating time to have its own timers which consumed resources and hit performance.
    • Resolved root cause of occasional crashes that surfaced when user was trying to show more than 200 workers.
    • Introduced throttling Sync queries for tasks and workers
  • Fixed exception thrown when rendering table rows
  • IconButton now has default hover tone dependent on whether theme is dark or light.
  • Fixed chat crashing when media message is received. MessageBubble now displays MediaMessageError string on such message.
  • Notifications.dismissNotificationById will now dismiss ALL notifications by that ID

Plugin Builder v3

release date AUG 6, 2019

The Flex Plugin Builder v3 is now in Beta. This release enables you to build and deploy your plugins directly from the CLI by leveraging the Functions & Assets API. You can integrate the release of your hosted Flex plugins within a CI/CD pipeline.

To opt into the newest version, check our upgrade guide for using the Plugin Builder.

v 1.11.2

@twilio/flex-ui@1.11.2

release date JULY 4, 2019

Fixed

  • Agents in Team View now get correctly sorted and keep position.

v 1.11.1

@twilio/flex-ui@1.11.1

release date JULY 1, 2019

Fixed

  • Fixed issues with Twilio.Flex.runDefault() removing search string from query path.

v 1.11.0

@twilio/flex-ui@1.11.0

release date JUNE 25, 2019

Dependencies updated

  • [twilio-taskrouter] to version 0.4.0

Added

  • Voice warm transfers - now an agent can have a consult call a conference call with a customer and another agent, and transfer the call to another agent. You can read more about voice warm transfers here. Warm transfers are released in public beta with an option of opt in/out via a feature flag. Go to versioning page in Flex Admin UI to turn warm transfer on or off.

Screen Shot 2019-06-25 at 23.00.23.png

  • A legacy property to ContextProvider component. This resolves conflicts between multiple react-redux versions for self-hosted applications. We suggest not to use multiple react-redux versions, but if you need to use multiple versions, pass legacy={true}, then Flex ContextProvider instance will be rendered even with custom Redux store.
  • A theme.FormComponents.Select to Theme to customize the Select input item
  • A new property useSeparateInputStore introduced in the payload for action SetInputText. Setting it to true, will store the message text in separate state and improves performance of typing in Chat/Messaging/SMS dialog when handling a task. From the next major release of Flex, this prop will be defaulted to true. This can be changed by setting the new default property useSeparateInputStore of MessageInput.
Flex.MessageInput.defaultProps.useSeparateInputStore = true;
  • Added tasksA and tasksB arguments to AgentsDataTable.defaultProps.initialCompareFunction . This will allow to sort the list of agents based on task attributes rather than worker attributes. For example, you can do initial sort of the agents based on longest duration of the task.

Example:

Flex.AgentsDataTable.defaultProps.initialCompareFunction = (a: Flex.IWorker, b: Flex.IWorker, tasksA: Array<Flex.ITask>, tasksB: Array<Flex.ITask>) => {
return tasksA.length - tasksB.length;
}

Changed

  • Flex now loads only those chat channels that a worker is a member of and has an associated task with to optimize the loading time.
  • Call task canvas will now go to new list mode if participants would not otherwise fit.

Screen Shot 2019-06-25 at 22.38.53.png

In order to change ParticipantCanvas when it is in list mode, developer will need to use ParticipantCanvas.ListItem.

Example: Adding a button to the bottom of the normal participant

Flex.ParticipantCanvas.Content.add(<button key="key">Hi</button>);

Example: Adding a button to the end of participant that is shown in a list

Flex.ParticipantCanvas.ListItem.Content.add(<button key="key">Hi</button>);
  • theme.FormComponents.TextArea now applies to the textarea container, not directly to the element itself. This is to enforce consistency between form item.

Fixed

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

Example: How to set custom font for the whole Flex application

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

Removed

  • Removed cols support for text area.
  • Removed export of connect function which did not connect to correct Redux store.
  • Removed optional configuration URLs from TypeScript Config interface.

v 1.10.0

@twilio/flex-ui@1.10.0

release date JUNE 05, 2019

Added

  • CallCanvasActions component that is a set of buttons in the call canvas is now programmable. Now you can add, replace or remove buttons from the Call Canvas. This will allow you to add custom actions to live calls or remove actions you don’t want users to take on a live call.

Screen Shot 2019-06-05 at 13.33.26.png

You can add and remove buttons using Content object add and remove methods or using Task Channel Definition API

Example: Add an eye-iconed button using Content object

Flex.CallCanvasActions.Content.add(<IconButton key="hi" icon="Eye" />)

Example: Add an eye-iconed button using Task Channel Definition API

Flex.DefaultTaskChannels.Call.addedComponents = [{
    target: "CallCanvasActions",
    component: <IconButton key="hi" icon="Eye" />,
}];

Fixed

  • Supervisor.TaskCanvas.Header and Supervisor.WorkerCanvas.SectionCaption components were missing keys to override their themes. Now you can style TaskCanvas header and sub section header in WorkerCanvas respectively using Theme object

Screen Shot 2019-06-05 at 13.46.57.png

Supervisor.WorkerCanvas.SectionCaption

Screen Shot 2019-06-05 at 13.52.01.png

Supervisor.TaskCanvas.Header

v 1.9.2

@twilio/flex-ui@1.9.2

release date JUNE 03, 2019

Fixed

  • Resolves a situation that could result in an error when initiating supervisor monitoring
  • Hold button was displayed in the oposite state to the actual call hold state

v 1.9.1

@twilio/flex-ui@1.9.1

release date MAY 28, 2019

Fixed

  • initialFirstPanelSize can be set within Configuration for the AgentDesktopView.Panel1 component

v 1.9.0

@twilio/flex-ui@1.9.0

release date MAY 20, 2019

Dependencies updated

  • [twilio-chat] to version 3.2.3
  • [twilio-client] to version 1.7.2
  • [twilio-sync] to version 0.11.0
  • [twilio-taskrouter] to version 0.3.1
  • [@material-ui/core] to version 3.9.3

Added

Setting component state

A new action SetComponentState has been added. This action alters the current state of the component. Component states is a componentName => key/value pairs dictionary in Redux store that this action manipulates. Read more about this action in Actions Framework.

Additional reducers

We have added 2 new methods to support adding additional reducers:

  • Store enhancer flexStoreEnhancer to support adding additional reducers.

Example:

const myReduxStore = createStore(
    reducers,
    compose(
        applyFlexMiddleware(),
        flexStoreEnhancer // <-- Add enhancer part of compose
    )
);
  • addReducerapi tomanager.storeto add additional reducer.

Example:

manager.store.addReducer("new", newReducer);

Chat Orchestration

ChatOrchestrator object can now be used to disable default chat orchestration.

  • There are three chat orchestrations that are supported and enabled by default:
    • AddToChatChannel - Request agent to be added to the chat channel (by default runs on the accepted event from Reservation)
    • DeactivateChatChannel - Mark chat channel status as INACTIVE (by default runs on WrapupTask and CompleteTask actions and on the wrapup and completed event from Reservation object if it was not done already)
    • LeaveChatChannel - Remove agent from the chat channel (by default runs on CompleteTask action and on the completed event from Reservation object if it was not done already)
  • Orchestrations can be disabled completely by invoking ChatOrchestrator.clearAllOrchestrations().
  • Orchestrations can be enabled or disabled by Reservation events (accepted, wrapup, completed) which affects corresponding actions as well. For example:
    • Disable orchestrations for accepted event: Flex.ChatOrchestrator.setOrchestrations("accepted", []);
    • Disable marking chats channels as inactive: Flex.ChatOrchestrator.setOrchestrations("wrapup", []);
    • Enable removing agent on completed event: Flex.ChatOrchestrator.setOrchestrations("completed", ["LeaveChatChannel"]);

Setting activity state

Agents can move to an unavailable activity state even if they have pending reservations, and supervisors can set agents with pending reservations to an unavailable state. This capability can be disabled by setting the configuration option rejectPendingReservations to false or overriding it in the SetActivity action payload:

Actions.addListener("beforeSetActivity", (payload) => {
    payload.options.rejectPendingReservations = true;
});

Other

  • AgentDesktopView.Panel1 got a new default property splitterOrientation that determines whether orientation of the content will be vertical, horizontal or automatic ("auto") based on content size.
  • New localization strings added
    • TaskTabSupervisorCallLabel - Call task tab label in Supervisor task canvas.
    • TaskTabSupervisorChatLabel - Chat task tab label in Supervisor task canvas.
    • TaskHeaderStatusPending - Describes task that is in pending state. It's used in TaskCanvasHeader.
    • TaskHeaderGroupCallAccepted - Describes conference call task that is in accepted state. It's used in TaskCanvasHeader.
    • TaskHeaderStatusAccepted - Describes task that is in accepted state. It's used in TaskCanvasHeader.
    • TaskHeaderStatusWrapup - Describes task that is in wrapup state. It's used in TaskCanvasHeader.
    • TaskHeaderStatusCompleted - Describes task that is in completed state. It's used in TaskCanvasHeader.
  • TaskCanvasHeader now accepts a new prop secondLineTemplateCode. By default it describes the status of the task.
  • Added callSid to Participant object in Conferences state.

Changed

  • Chat orchestration failure now can prevent action invocations:
    • If chat orchestration fails to mark the chat channel inactive, then WrapupTask action will fail.
    • If chat orchestration fails to remove agent from chat channel, then CompleteTask action will fail.
  • Chat orchestration will update chat channels as inactive on the Reservation wrapup event (if it did not happen in WrapupTask action already)
  • Custom components are encouraged to use withTheme decorators to inject theme prop
  • Following type definitions are changed for consistency:
    • CallCanvasProps renamed to CallCanvasChildrenProps
    • TaskCanvasProps renamed to TaskCanvasChildrenProps
    • NoTaskCanvasProps renamed to NoTaskCanvasChildrenProps
    • ParticipantsCanvasProps split in a ParticipantsCanvasProps subset and ParticipantsCanvasChildrenProps
    • TaskCanvasHeaderProps split in a TaskCanvasHeaderProps subset and TaskCanvasHeaderChildrenProps
    • TaskCanvasTabsProps split in a TaskCanvasTabsProps subset and TaskCanvasTabsChildrenProps
    • TaskInfoPanelProps split in a TaskInfoPanelProps subset and TaskInfoPanelChildrenProps
    • MainHeaderProps split in a MainHeaderProps subset and MainHeaderChildrenProps
    • AgentDesktopViewProps split in a AgentDesktopViewProps subset and AgentDesktopViewChildrenProps
    • LoginViewProps split in a LoginViewProps subset and LoginViewChildrenProps
    • TeamsViewProps split in a TeamsViewProps subset and TeamsViewChildrenProps
    • CRMContainerProps split in a CRMContainerProps subset and CRMContainerChildrenProps
    • LiveCommsBarProps renamed in LiveCommsBarChildrenProps
    • MainContainerProps split in a MainContainerProps subset and MainContainerChildrenProps
    • MuteButtonProps split in a MuteButtonProps subset and MuteButtonImplProps
    • RootContainerProps renamed in RootContainerChildrenProps
    • SideNavProps split in a SideNavProps subset and SideNavImplProps
    • TaskListButtonsProps renamed in TaskListButtonsChildrenProps
    • ViewCollectionProps split in a ViewCollectionProps subset and ViewCollectionImplProps
  • SupervisorTaskCanvas tabs title changed from "Overview" to "Call" or "Chat" based on the type of task.

v 1.8.2

@twilio/flex-ui@1.8.2

release date MAY 8, 2019

Fixed

  • Resolves a situation that could cause Flex to error while logging in

v 1.8.1

@twilio/flex-ui@1.8.1

release date MAY 6, 2019

Fixed

  • Hold/Unhold buttons on CallCanvas correctly call HoldCall/UnholdCall Actions

v 1.8.0

@twilio/flex-ui@1.8.0

release date APR 26, 2019

Added

  • TaskListButtons component that is the set of buttons in a tasklist item is now programmable (buttons can be added/removed). Example that shows a button as the last button for call tasks that have status as "accepted":
        const shouldShow = (props) => {
            return props.task.status == "accepted";
        };

        Flex.DefaultTaskChannels.Call.addedComponents = [{
            target: "TaskListButtons",
            component: <IconButton key="eye_button" icon="Eye" />,
            options: {if: shouldShow}}];
  • Action buttons will be disabled after user click until the action execution is finished to prevent users from invoking the action twice.
  • Actions ToggleSidebar are introduced with following payload:
{
    open?: boolean; // used to explicitly open or close the sidebar.
}

Fixed

  • Restored backwards compatibility with the first versions of the Dialpad plugin
  • General Flex UI styles (like headers, paragraphs or links) are now applied only to HTML elements that have a class starting with Twilio or their direct descendants without any class. The CSS attributes that are meant to be inherited are now under the Twilio-CommonStyles class.

v 1.7.4

@twilio/flex-ui@1.7.4

release date MAY 8, 2019

Fixed

  • Resolves a situation that could cause Flex to error while logging in

v 1.7.3

@twilio/flex-ui@1.7.3

release date MAY 6, 2019

Fixed

  • Resolves JS error when a messaging task is accepted
  • Hold/Unhold buttons on CallCanvas correctly call HoldCall/UnholdCall Actions

v 1.7.2

@twilio/flex-ui@1.7.2

release date APR 26, 2019

Fixed

  • Restored backwards compatibility with the first versions of the outbound dialer plugin

v 1.7.1

@twilio/flex-ui@1.7.1

release date APR 5, 2019

Added

  • New template TaskLineTitle used for default task channel in IncomingTaskCanvas

Fixed

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

v 1.7.0

@twilio/flex-ui@1.7.0

release date MAR 29, 2019

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

v 1.6.2

@twilio/flex-ui@1.6.2

release date APR 26, 2019

Fixed

  • Restored backwards compatibility with the first versions of the outbound dialer plugin

v 1.6.1

@twilio/flex-ui@1.6.1

release date MAR 28, 2019

Fixed

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

v 1.6.0

@twilio/flex-ui@1.6.0

release date MAR 12, 2019

Added

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

Changed

  • Visual update for voice call stage

v 1.5.0

@twilio/flex-ui@1.5.0

release date FEB 18, 2019

Added

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

Changed

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

Fixed

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

v 1.4.1

@twilio/flex-ui@1.4.1

release date FEB 6, 2019

Fixed

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

v 1.4.0

@twilio/flex-ui@1.4.0

release date JAN 11, 2019

Fixed

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

Changed

Added

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

v 1.3.3

@twilio/flex-ui@1.3.3

release date JAN 10, 2019

Fixed

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

Changed

  • Started consuming v0.2.15 of TaskRouter JS SDK

v 1.3.2

@twilio/flex-ui@1.3.2

release date JAN 9, 2019

Changed

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

Fixed

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

v 1.3.1

@twilio/flex-ui@1.3.1

release date DEC 20, 2018

Fixed

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

v 1.3.0

@twilio/flex-ui@1.3.0

release date DEC 19, 2018

Fixed

Voice

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

Messaging

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

Added

Plugins

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

Actions

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

Views and routing

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

Voice

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

Messaging

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

SSO login

  • SSO login in pop-up window support added. config.sso.loginPopup = true can be set to enable it. To gracefully handle blocked popups, new LoginFormView React component or provideLoginInfo or tryLogin Twilio.Flex API function can be used to launch it. Additionally pop-up window features for window.open() function can be set in config.sso.loginPopupFeatures configuration variable as string.
  • New API functions to run or log user in to Flex using Twilio.Flex interface:
/**
    * Runs Flex with default setup.
    * It will show loader and prompts for login information
    * if it is not provided in configuration object.
    *
    * @param [config] configuration object
    * @param [nodeOrSelector] DOM node or selector string where to render Flex
    * @returns {Promise<void>}
    */
    export function runDefault(config: Config = {}, nodeOrSelector: string | Element = "body"): Promise<void>;

    /**
    * Tries to log user in to Flex.
    * Can redirect the current browser window to the IdP URL or
    * open a new window to navigate to IdP URL if config.loginPopup is set.
    *
    * @param [config] SSO configuration object
    * @return {Promise<boolean>} true if there is valid token and user can be logged in.
    */
    function tryLogin(config: SSOConfig = {}): Promise<boolean>;

    /**
    * Helper function to provide additional account and user info if it is not set.
    * Updates the provided config object.
    *
    * Renders a LoginFormView component if accountSid is not provided or there are problems with signing user in.
    *
    * @param [config] configuration object
    * @param [nodeOrSelector] DOM node or selector string where to render the component
    * @returns {Promise<void>} if resolved, then Flex instance can be created with
    *      provided config object.
    */
    function provideLoginInfo(config: Config = {}, nodeOrSelector: string | Element = "body"): Promise<void>;
  • New LoginFormView React component to be used to provide account / user info with the following props:
interface LoginFormViewProps {
    onSuccess: (determinedConfig: Config) => any;
    userConfig: Config;
}
  • New strings for LoginFormView component:
    LoginContinue: "Continue anyway",
    LoginLaunch: "Launch",
    LoginTitle: "Twilio Flex",
    LoginErrorDomain: "Oops! Your runtime domain is incorrect.",
    LoginErrorDomainDetails: "Find your runtime domain " +
        "<a href='https://www.twilio.com/console/runtime/overview'>here</a>",
    LoginErrorSso: "Hmm, Single Sign-On has not been configured.",
    LoginErrorSsoDetails: "Find out how to configure Single Sign-On " +
        "<a href='https://www.twilio.com/console/flex/users/single-sign-on'>here</a>",
    LoginErrorPopupBlocked: "Sorry, pop-ups are blocked.",
    LoginErrorPopupBlockedDetails: "Find out how to enable pop-ups in your browser",
    LoginErrorGeneric: "Oops! Well, that didn’t work :( Please double check your configuration.",
    LoginIsAdmin: "Flex Admin?",
    LoginWithTwilio: "Login with Twilio.",

Changed

Views and routing

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

Example:

<View key="teams" name="teams" route={{ path: "/supervisor" }}> // both http:/domain/teams and http://domain/supervisor will work

<View key="teams" name="teams" route={{ path: ["/supervisor", "something"] }}> // both http:/domain/teams and http://domain/supervisor and http://domain/something will work
  • ViewCollection was not using DynamicComponent properly so all manipulations of it other than add via programmability did not work.

Voice

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

Other

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

v 1.2.0

@twilio/flex-ui@1.2.0

release date NOV 22, 2018

Fixed

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

Changed

  • baseNames theme names changed
Deprecated name New Theme name
DarkTheme GreyDark
MediumTheme GreyLight
BlueMediumTheme FlexLight
BlueDarkTheme FlexDark
  • "Active agents" filter is set as default in Teams View
  • Switch from icon to label in Tab label components in agent TaskCanvasTabs and supervisor TaskCanvas

Added

  • New localization strings for TaskTabAgentIncomingLabel, TaskTabAgentCallLabel, TaskTabAgentChatLabel, TaskTabAgentInfoLabel, TaskTabSupervisorInfoLabel and TaskTabSupervisorOverviewLabel
export interface Strings<T = string> extends FrameStrings<T> {
    ...
    TaskTabAgentIncomingLabel?: T;
    TaskTabAgentCallLabel?: T;
    TaskTabAgentChatLabel?: T;
    TaskTabAgentInfoLabel?: T;
    TaskTabSupervisorInfoLabel?: T;
    TaskTabSupervisorOverviewLabel?: T;
}
  • Views of ViewCollection got a new prop mountRule. If specified, keepMounted prop value is ignored. Definition of the prop is as follows:
export enum ViewMountRule {
    Always = "Always",  // View is mounted from the start of the application and never unmounted
    WhenActive = "WhenActive", // Views is mounted when activated and unmounted when deactivated
    WhenHasBeenActive = "WhenHasBeenActive" // View is mounted when first activated and never umounted
}

v 1.1.0

@twilio/flex-ui@1.1.0

release date NOV 6, 2018

Fixed

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

Added

  • Ability to transfer calls to a Queue from Directory Component (previously only workers were present there)
  • Action TransferTask was introduced. As with all other Task specific actions, if calling it, either task or sid must be specified, the other is autofilled then accordingly. When tapping into the action either with events or task replacement, both will be filled at execution time. Payload of the action:
{
    sid?: string; // sid of the ITask to transfer
    task?: ITask; // ITask object representing the Reservation being transferred
    targetSid: string; // sid of the Worker or Queue where the task should be transferred to
    options?: Object // options passed over to TaskRouter SDK transfer call. Refer to TaskRouter SDK documentation on Task.transfer option values.
}
  • Add optional label property to the Tab component. When provided, it will display a label into the Tab element. If the value matches a code in language strings array, the contents of the language string is used as template. Otherwise the value is used as just string. If label is not provided, icon property is considered and used.
  • Add optional alignment property to Tabs. When provided, it will change the tabs alignment. Possible values are left or center. Default is center.

New GA version of Flex UI has been released and are now available on NPM

  • @twilio/flex-ui@1.0

@twilio/frame-ui@0.15.0

Added

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

Changed

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

@twilio/frame-ui@0.15.0

Fixed

  • Styling
  • Avatar callback

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

Changed

  • Consume @twilio/flex-ui@0.14.0

@twilio/flex-ui@0.14.0

Changed

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

Added

  • Components can be removed using Task Channels API:
    export type TaskChannelComponentRemoveRequest = {
        target: keyof FlexComponents;
        key: React.Key;
        options?: RemoveComponentCallOptions;
    };
    TaskChannelDefinition.removedComponents?: Array<TaskChannelComponentRemoveRequest>;

    // For example:
    myOwnChatChannel.removedComponents = [
        { target: "TaskCanvasTabs", key: "info" }
    ];
  • TaskContext - Flex sets up Task Context using React Context API where it knows about an active or selected task. If Task has been selected in Agent Desktop View or Teams View then it can be obtained from Context. Interface of the TaskContext is shown below. Also withTaskContext helper function has been added that creates a HOC which adds the properties to the wrapped component.
export interface TaskContextProps {
    task?: ITask; // Task we are referring to, undefined if there is no task in context
    call?: PhoneCallState; // Call state that current task if related to, undefined if there is no task in context or there is no call for a task
    chatChannel?: ChatChannelState.ChannelState; // Chat channel state that current task if related to, undefined if there is no task in context or there is no chat for a task
    channelDefinition?: TaskChannelDefinition; // Matched task channel definition for a task, undefined if there is no task in context
}
  • Using TaskContext.Consumer:
import { withTaskContext } from "@twilio/flex-ui";

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

const MyComponentWithTask = withTaskContext(MyComponent);
// Register MyComponentWithTask component to Flex instead of MyComponent
  • Using withTaskContext :
import { withTaskContext } from "@twilio/flex-ui";

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

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

@twilio/frame-ui@0.14.0

Added

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

Syntax:

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

where

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

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

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

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

Changed

  • Consume @twilio/flex-ui@0.13.0

@twilio/flex-ui@0.13.0

Removed

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

Changed

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

Added

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

Task Channels API

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

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

In a task channel definition you can specify:

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

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

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

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

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

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

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

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

Default channel creation with default templates.

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

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

Example:

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

Flex.TaskChannels.register(myOwnChatChannel);

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

Interface of TaskChannelDefinition:

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

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

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

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

    name: string;

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

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

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

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

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

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

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

}

@twilio/frame-ui@0.13.0

Changed

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

Removed

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

Added

  • Add Circular Progress component

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

Changed

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

@twilio/flex-ui@0.12.0

Changed

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

Added

  • Showing a notification bar when session token expires.
  • Added staticFilter prop added to TaskList for stand-alone use.
  • Show a call bar to indicate an ongoing call when not viewing Agent Desktop
  • Added a few containers to Theme to accomodate more theming
    • MainContainer - CSS props for lowest level container that includes the whole application except Main Header and SideNav
    • Supervisor.Container - CSS props for main container in Supervisor Desktop
  • Added "UnholdCall" action to unhold calls. Payload same as HoldCall, including task. – Added support for views routes, which includes
    • New actions to navigate the browser to different locations in the way similar to HTML5 History API:
      • HistoryPush
      • HistoryReplace
      • HistoryGo
      • HistoryGoBack
      • HistoryGoForward
    • New property route for View component to mount a view to a route different from 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-ui@0.11.0

Changed

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

Fixed

  • Include ‘Open Sans’ font in production mode

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

Changed

  • Consume @twilio/flex-ui@0.9.0

Fixed

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

@twilio/flex-ui@0.10.0

Changed

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

Fixed

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

Removed

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

Added

  • Exported VERSION constant to indicate the version of the package
Rate this page:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.