import { ClientOptions as ConversationsOptions } from "@twilio/conversations"; import { AccountConfigData, ClientOptions, DebuggerIntegration, FlexUiStatusReport, ChannelConfig as RemoteChannelConfig } from "@twilio/flex-sdk"; import { CoreThemeColors, DeepPartial, FileAttachmentConfig, Tokens } from "../flex-ui-core/src"; import { Call, Device } from "@twilio/voice-sdk"; import { LogLevelDesc } from "loglevel"; import { WorkerOptions } from "twilio-taskrouter"; import { BaseThemeColors, Theme } from "../components/theme"; import { CompatibilityOptions } from "../core/CompatibilityChecker"; import { HistoryBuildOptions } from "../history"; import { ITask } from "../models"; import { TaskWorkflowType } from "./Email.definitions"; import { QueuesConfig } from "./QueuesState/QueuesStateTypes"; /** * @category Core * @namespace Configuration */ /** * Task filter callback * @callback TaskFilterCallback * @private * @returns {boolean} whether task should be included */ export type TaskFilterCallback = (task: ITask) => boolean; /** * Task filter definition * @typedef TaskFilter * @property {TaskFilterCallback} callback callback to filter the tasks * @property {string} [text] label to be shown for the filter * @private */ export interface TaskFilter { callback: TaskFilterCallback; text?: string; } /** * Theme configuration * @typedef DeprecatedThemeConfigProps * @property {PredefinedThemeName} [baseName] predefined theme name to take as base * @property {CoreThemeColors | BaseThemeColors} [colors] color overrides to be applied * @property {boolean} [light] whether theme is light or not * @property {DeepPartial} [overrides] Overrides for the theme object * @deprecated * @deprecatedSince 2.0.0 * @altRecommendation Use `ThemeConfigProps` instead * @altRecommendationExample * import { ThemeConfigProps } from "@twilio/flex-ui"; * const themeConfig: ThemeConfigProps = {}; * @ignore */ export interface DeprecatedThemeConfigProps { baseName?: PredefinedThemeName; colors?: Partial; light?: boolean; overrides?: DeepPartial; } /** * @typedef ThemeConfigProps * @memberof Config * @property {boolean} [isLight] Represents whether light or dark theme should be used * @property {DeepPartial} [tokens] Paste tokens. For more on each token information, please refer to Twilio Paste * @property {Theme} [componentThemeOverrides] Object containing styles of the component which is to be overridden. See Theme Interface */ export interface ThemeConfigProps { isLight?: boolean; tokens?: DeepPartial; componentThemeOverrides?: DeepPartial>; } /** * Extension of the DeviceOptions interface to be used to initialise a Device, with an additional * acceptOptions property to be passed as a parameter when calling Call.accept() * See parent interface [here](https://www.twilio.com/docs/voice/sdks/javascript/twiliodevice#deviceoptions) * @typedef VoiceOptions * @property {Call.AcceptOptions} [acceptOptions] options to be passed in call.accept(). [See](https://www.twilio.com/docs/voice/sdks/javascript/twiliocall#callacceptacceptoptions) * @property {MediaTrackConstraints} [audioConstraints] options to be passed in device.audio.setAudioConstraints(). [See](https://www.twilio.com/docs/voice/sdks/javascript/twiliodevice/device-audio#deviceaudiosetaudioconstraintsaudioconstraints) * @property {string[]} [codecPreferences] codec names to be passed in device.options.codecPreferences. These can optionally use the `Device.Codec` type values from `@twilio/voice-sdk`. * @property {Record} [sounds] sounds names to be passed in device.options.sounds. These can optionally use the `Call.Sounds` type values from `@twilio/voice-sdk` for the object keys. * @memberof Config */ export interface VoiceOptions extends Omit { acceptOptions?: Call.AcceptOptions; audioConstraints?: MediaTrackConstraints; codecPreferences?: string[]; sounds?: Record; } /** * Options for Twilio SDKs used by Flex * @typedef Config.SDKOptions * @property {WorkerOptions} [worker] options to pass to TaskRouter Worker SDK. [See](https://twilio.github.io/twilio-taskrouter.js/Worker.html#Worker__anchor) * @property {ConversationsOptions} [chat] options to pass to Chat SDK. [See](https://media.twiliocdn.com/sdk/js/chat/releases/3.4.0/docs/Client.html#.create__anchor) * @property {VoiceOptions} [voice] options to pass to Voice SDK. [See](https://www.twilio.com/docs/voice/sdks/javascript/twiliodevice#deviceoptions) * @property {object} [insights] options to pass to Sync SDK. [See](https://media.twiliocdn.com/sdk/js/sync/releases/0.11.1/docs/Client.html#Client__anchor) * @property {DeepPartial} [flex] to pass to Flex SDK. * @memberof Config */ export interface SDKOptions { worker?: WorkerOptions; chat?: ConversationsOptions; voice?: VoiceOptions; insights?: object; flex?: DeepPartial; } type DeprecatedThemeName = "MediumTheme" | "DarkTheme" | "BlueMediumTheme" | "BlueDarkTheme"; /** * Predefined theme name * @typedef {"GreyLight" | "GreyDark" | "FlexLight" | "FlexDark"} PredefinedThemeName */ export type PredefinedThemeName = DeprecatedThemeName | "GreyLight" | "GreyDark" | "FlexLight" | "FlexDark"; /** * Plugin Service interface * @typedef PluginService * @property {boolean} [enabled] Whether the plugin service is enabled or not * @memberof Config */ export interface PluginService { enabled?: boolean; initializationTimeout?: number; } /** * Custom plugins interface * @typedef {object} CustomPlugins * @property {number} phase plugin phase * @property {string} name plugin name * @property {string} src url where plugin can be found * @property {string} [version] plugin version */ export interface CustomPlugins { phase: number; name: string; src: string; version?: string; } /** * Plugin service attributes interface * @typedef {object} PluginServiceAttributes * @property {string} [custom_plugins_url] url to the plugin JSON * @property {CustomPlugins} [custom_plugins] array of plugins */ export interface PluginServiceAttributes { custom_plugins_url?: string; custom_plugins?: CustomPlugins[]; } /** * @typedef {object} LocationConfig * @property {string} name region name * @property {Array | string} edge array of edge names or edge name * @memberof Config */ export interface LocationConfig { name: string; edge: Array | string; } /** * @typedef {object} OutboundConfig * @property {object} email Configuration object for outbound email * @property {string} email.defaultAddress.address_metadata.from_name The sender name * @property {string} email.defaultAddress.coordinates.address The senders email address * @property {string} email.defaultSettings.workflow_sid Sid of the workflow to use for task assignment * @property {string} email.defaultAddress.queue_sid Sid of the queue to use for task assignment * @memberof Config */ export interface OutboundConfig { email: { defaultAddress: { address_metadata: { from_name: string; }; coordinates: { address: string; }; }; defaultSettings: { workflow_sid: string; queue_sid: string; }; }; } /** * @typedef {object} EmailChannelStatus * @property {object} status The current provision status */ export interface EmailChannelStatus { status: string; } /** * @typedef {object} InsightsProvisionStatus * @property {object} enabled The current provision status * @property {object} timeZone The configured time zone */ export interface InsightsProvisionStatus { enabled: boolean; time_zone: string; } /** * @typedef {object} TeamsContextStatus * @property {boolean} team_setup_complete The team setup status * @since 2.10.0 */ export interface TeamsContextStatus { team_setup_complete: boolean; } /** * @typedef {object} ChannelConfig * @property {string} addressType Channel type * @property {object} cbmAttachments Configuration object for cbm attachment settings * @property {boolean} cbmAttachments.enabled Whether attachments are enabled * @property {number} cbmAttachments.numberOfAttachments Maximum number of attachments allowed * @property {number} cbmAttachments.maxFileSize Maximum allowed file size in bytes * @property {number} cbmAttachments.maxTotalFileSize Limit in bytes for the cumulative size of all attachments * @property {Array} cbmAttachments.acceptedExtensions Array of allowed file extensions * @memberof Config */ export interface ChannelConfig { addressType: string; cbmAttachments: { enabled: boolean; numberOfAttachments: number; maxFileSize: number; maxTotalFileSize: number; acceptedExtensions: string[]; }; } /** * Flex UI's configuration allows you to control the way the overall app loads, as well as the behavior of individual Flex Components. * In the configuration object, you can define the default properties of your Flex Components. You can also configure properties that are not tied to specific Components. * @typedef {object} Config * @category Overview * @docname Configuration * @menuorder 200 * @property {string} [language] language code, not used * @property {"silent" | "error" | "warning" | "info" | "debug" | "trace"} [logLevel="error"] level for logger * @property {ThemeConfigProps} [theme] theme configuration * @property {SDKOptions} [sdkOptions] SDK options * @property {SSOConfiguration} [sso] SSO configuration * @property {OAuthConfiguration} [oauth] OAuth2.0 configuration. Only available if account has set up SSO after using Flex UI >= 2.5.0. [See docs for more info.](https://www.twilio.com/docs/flex/admin-guide/setup/sso-configuration#enhanced-and-legacy-sso-configuration) * @property {PluginService} [pluginService] PluginService configuration * @property {object} [componentProps] Props to be set for React components. Key of the object is component name. e.g. { AgentDesktopView: { showPanel2: false } } * @property {object} [router] Router configuration * @property {"browser" | "memory"} [router.type] type of the router * @property {object} [router.history] history object to use for routing * @property {boolean} [router.isolate] whether to isolate Flex routing from other routing. Makes Flex to use memory router. * @property {boolean} [disableBrowserVoice] whether to disable Twilio Voice SDK instantiation * @property {boolean} [initialDeviceCheck] Whether to conduct an initial audio device check * @property {boolean} [rejectPendingReservations] whether to reject all pending reservations if user goes to an offline activity * @property {object} [insights] insights configuration object * @property {boolean} [enableClientCalling] Whether to enable client calling * @property {FileAttachmentConfig} [fileAttachment] File attachment configuration * @property {string} [holdMusicUrl] url for audio file to play when call is on hold * @property {string} [holdMusicMethod] holdMusicMethod * @property {Array} [locations] array of LocationConfig objects * @property {boolean} [disableTelemetry] whether to disable telemetry * @property {boolean} [enableReduxLogging] whether to enable redux logging * @property {object} [markdown] markdown configuration * @property {object} [notifications] Notification configuration * @property {OutboundConfig} [outboundSettings] Outbound configuration * @property {Array} [channelConfig] array of channel configurations * @property {FlexUiStatusReport} [flexUiStatusReport] configuration of UI display of status report * @property {DebuggerIntegration} [debuggerIntegration] configuration of debugger integration * @property {boolean} [isEmailChannelEnabled] whether email channel is enabled * @property {citrixVoiceVdi} [citrixVoiceVdi] configuration of Enable Voice on Citrix VDI */ export interface Config { language?: string; logLevel?: LogLevelDesc; colorTheme?: DeprecatedThemeConfigProps | PredefinedThemeName; theme?: ThemeConfigProps; serviceBaseUrl?: string; sdkOptions?: SDKOptions; sso?: SSOConfig; oauth?: OAuthConfig; privateBucketUrl?: string; pluginService?: PluginService; componentProps?: any; router?: { type: "browser" | "memory"; history?: HistoryBuildOptions; isolate?: boolean; }; disableBrowserVoice?: boolean; initialDeviceCheck?: boolean; rejectPendingReservations?: boolean; insights?: { baseUrl?: string; analyticsUrl?: string; identityUrl?: string; questionnairesUrl?: string; assessmentsApiUrl?: string; ssoUrl?: string; player?: { baseUrl: string; mediaApiUrl: string; }; }; enableClientCalling?: boolean; fileAttachment?: FileAttachmentConfig; holdMusicUrl?: string; holdMusicMethod?: string; locations?: Array; disableTelemetry?: boolean; enableReduxLogging?: boolean; hasSupportForChannelsOnStore?: boolean; markdown?: { enabled: boolean; mode: "readOnly" | "readWrite"; }; notifications?: { enabled: boolean; mode: "whenNotInFocus" | "always"; }; outboundSettings?: OutboundConfig; channelConfigs?: ChannelConfig[]; flexUiStatusReport?: FlexUiStatusReport; debuggerIntegration?: DebuggerIntegration; isEmailChannelEnabled?: boolean; isConversationalInsightsProvisioned?: boolean; conversationalInsightsTimeZoneConfig?: string; isHighChartsLoaded?: boolean; isTeamsContextEnabled?: boolean; highChartsUrl?: string; citrixVoiceVdi?: { enabled: boolean; }; virtualAgentDataUrl?: string; } /** * Skill definition * @typedef Config.SkillDefinition * @property {string} name name of the skill * @property {boolean} multivalue whether skill may have a numerical level * @property {number} [minimum] maximum value for level * @property {number} [maximum] minimum value for level * @memberof Config * @memberof Configuration */ export interface SkillDefinition { name: string; multivalue: boolean; minimum?: number; maximum?: number; } interface IntegrationsConfig { name: string; type: string; active: boolean; config: any; logo?: string; author?: string; } interface OutboundFlows { [key: string]: { enabled: boolean; caller_id: string; queue_sid: string; location: string; workflow_sid: string; }; } /** * Service configuration * @typedef {object} ServiceConfiguration * @property {string} account_sid account SID * @property {string} chat_service_instance_sid chat service instance SID * @property {string} runtime_domain Twilio Runtime Domain * @property {string} taskrouter_workspace_sid Task Router Workspace SID for Flex * @property {string} taskrouter_target_taskqueue_sid Task Router Task Queue SID * @property {string} taskrouter_target_workflow_sid Task Router Workflow SID * @property {any} outbound_call_flows Outbound call flows * @property {Array} taskrouter_skills all possible skills that can be assigned */ export interface ServiceConfiguration { account_sid: string; agent_conv_end_methods?: { dateUpdated: string; enabled: TaskWorkflowType[]; }; attributes: any; call_recording_enabled: boolean; call_recording_webhook_url: string | null; chat_service_instance_sid: string; crm_attributes: any; integrations?: Array; crm_callback_url: string; plugin_service_attributes: PluginServiceAttributes; crm_enabled: boolean; crm_fallback_url: string; crm_type: string; date_created: string; date_updated: string; messaging_service_instance_sid: string; queue_stats_configuration: null | QueuesConfig; runtime_domain: string; flex_service_instance_sid: string | null; flex_instance_sid: string | null; outbound_call_flows: OutboundFlows; plugin_service_enabled: boolean | null; public_attributes: object; service_version: string; serverless_service_sids: Array; status: string; taskrouter_offline_activity_sid?: string; taskrouter_skills?: Array; taskrouter_target_taskqueue_sid: string; taskrouter_target_workflow_sid: string; taskrouter_taskqueues: any; taskrouter_worker_attributes: any; taskrouter_worker_channels: any; taskrouter_workspace_sid: string; ui_dependencies: { [key: string]: string; } | null; ui_attributes: Partial & { version_compatibility?: CompatibilityOptions; version_message?: string; }; ui_language: string; ui_version: string; url: string; markdown: { enabled: boolean; mode: "readOnly" | "readWrite"; }; notifications: { enabled: boolean; mode: "whenNotInFocus" | "always"; }; channel_configs: Array | null; debugger_integration: { enabled: boolean; } | null; flex_ui_status_report: { enabled: boolean; } | null; citrix_voice_vdi?: { enabled: boolean; } | null; } /** * SSO Configuration interface * @typedef {object} SSOConfiguration * @property {string} [accountSid] account SID * @property {string} [idpUrl] idpUrl * @property {boolean} [loginPopup=false] whether to launch IdP login in a new window * @property {string} [loginPopupFeatures] standard window.open() features param to be applied to popup window * @property {Array} [products] array of products * @property {string} [redirectUrl=window.location.href] redirect url where to return back from identity provider to log in to Flex * @memberof Config */ export interface SSOConfig extends FlexSSOUrls { accountSid?: string; idpUrl?: string; loginPopup?: boolean; loginPopupFeatures?: string; products?: Array; redirectUrl?: string; tokenRefreshThresholdMs?: number; hasSSOConfigured?: boolean; } /** * OAuth2.0 Configuration interface * @typedef {object} OAuthConfiguration * @property {string} clientId client ID for the account * @property {string} connection connection name for the account. Referred to as `sso_profile_sid` in some services. * @property {boolean} [loginPopup=false] whether to launch OAuth2.0 login in a new window * @property {string} [redirectUrl] the url to redirect to after authorization. Used when Flex is self-hosted. * @property {string} [accountSid] account SID * @memberof Config */ export interface OAuthConfig { clientId: string; connection: string; loginPopup?: boolean; redirectUrl?: string; authorizeUrl?: string; serviceBaseUrl?: string; tokenUrl?: string; serviceRedirectUrl?: string; tokenUrlSSOv2?: boolean; accountSid?: string; } export interface FlexSSOUrls { flexSSOServiceRedirectUrl?: string; flexSSOAuthorizeUrl?: string; flexSSOTokenUrl?: string; } /** * Flex SDK Account Configuration interface * * @typedef {Object} FlexSDKAccountConfiguration * @private */ export interface FlexSDKAccountConfiguration extends AccountConfigData { markdown: { enabled: boolean; mode: "readOnly" | "readWrite"; }; notifications: { enabled: boolean; mode: "whenNotInFocus" | "always"; }; citrixVoiceVdi: { enabled: boolean; }; } export {};