{"_id":"@avaya/axp-omni-sdk-messaging-ui","_rev":"16-47f4a3cf4d848ec0e55cf063b2659aeb","name":"@avaya/axp-omni-sdk-messaging-ui","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@avaya/axp-omni-sdk-messaging-ui","version":"1.0.0","license":"SEE LICENSE IN LICENSE.txt","_id":"@avaya/axp-omni-sdk-messaging-ui@1.0.0","maintainers":[{"name":"axp-sdk-automation","email":"axp-sdk-automation@avaya.com"},{"name":"kahagerman","email":"kahagerman@avaya.com"},{"name":"amarasescu","email":"amarasescu@avaya.com"},{"name":"digitalpipeline","email":"bvishwakarma@avaya.com"},{"name":"enrique-prado","email":"enriquep@avaya.com"},{"name":"jonathanavaya","email":"jonathanr@avaya.com"},{"name":"yangatavaya","email":"chungguangy@avaya.com"},{"name":"joe-s-avaya","email":"joe.sebast.avaya@gmail.com"},{"name":"mrazian","email":"mrazian@avaya.com"},{"name":"cpaas.devops","email":"cpaasops@avaya.com"},{"name":"bvazmer","email":"bvazmer@avaya.com"}],"dist":{"shasum":"b57ee13e4507c39b719a8e00fed33db6d9eae5cd","tarball":"https://registry.npmjs.org/@avaya/axp-omni-sdk-messaging-ui/-/axp-omni-sdk-messaging-ui-1.0.0.tgz","fileCount":5,"integrity":"sha512-ZcI3zlTYu5CwV5enFEC0yt54Sx735EB50o0KLh7uEkWbNkAZiehwyYHwQ0mBB9Z61/qn0VBa6xzh/hNnjMcsJw==","signatures":[{"sig":"MEYCIQCLfBTq0/Ibcj2+Vv7FkSQET34ajd0Sd0MWp8B1jzljKwIhAKKxcbhpMSkDt7BsQLcQPfFTC5ApoC4T9JgAjxAFN4ol","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3169615},"type":"module","_from":"file:candidate/avaya-axp-omni-sdk-messaging-ui-1.0.0.tgz","exports":{".":{"types":"./lib/index.d.ts","import":"./lib/axp-omni-sdk-messaging-ui.min.js"}},"_npmUser":{"name":"axp-sdk-automation","email":"axp-sdk-automation@avaya.com"},"_resolved":"/home/runner/work/sdk/sdk/candidate/avaya-axp-omni-sdk-messaging-ui-1.0.0.tgz","_integrity":"sha512-ZcI3zlTYu5CwV5enFEC0yt54Sx735EB50o0KLh7uEkWbNkAZiehwyYHwQ0mBB9Z61/qn0VBa6xzh/hNnjMcsJw==","_npmVersion":"10.7.0","description":"AXP Omni SDK Messaging UI provides a highly customizable user interface as a [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) for messaging that can be easily integrated into the Client website to enable messaging capabilit","directories":{},"_nodeVersion":"20.15.1","dependencies":{"antd":"^5.15.4","react":"^18.2.0","redux":"^5.0.0","lodash":"^4.17.21","i18next":"^23.10.1","react-dom":"^18.2.0","emoji-mart":"^5.5.2","react-uuid":"^2.0.0","react-redux":"^9.0.4","react-i18next":"^14.1.0","@avaya/neo-react":"^1.1.10","@emoji-mart/data":"^1.1.2","@reduxjs/toolkit":"^2.2.2","@emoji-mart/react":"^1.1.1","@testing-library/react":"^16.0.0","@avaya/axp-omni-sdk-core":"^1.0.0","@testing-library/jest-dom":"^6.4.5","react-custom-scrollbars-2":"^4.5.0","@avaya/axp-omni-sdk-messaging":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/axp-omni-sdk-messaging-ui_1.0.0_1722296822101_0.7410351635516754","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@avaya/axp-omni-sdk-messaging-ui","version":"1.1.0","license":"SEE LICENSE IN LICENSE.txt","_id":"@avaya/axp-omni-sdk-messaging-ui@1.1.0","maintainers":[{"name":"axp-sdk-automation","email":"axp-sdk-automation@avaya.com"},{"name":"kahagerman","email":"kahagerman@avaya.com"},{"name":"amarasescu","email":"amarasescu@avaya.com"},{"name":"digitalpipeline","email":"bvishwakarma@avaya.com"},{"name":"enrique-prado","email":"enriquep@avaya.com"},{"name":"jonathanavaya","email":"jonathanr@avaya.com"},{"name":"yangatavaya","email":"chungguangy@avaya.com"},{"name":"joe-s-avaya","email":"joe.sebast.avaya@gmail.com"},{"name":"mrazian","email":"mrazian@avaya.com"},{"name":"cpaas.devops","email":"cpaasops@avaya.com"},{"name":"bvazmer","email":"bvazmer@avaya.com"}],"dist":{"shasum":"61da98326ead5e10b7379967039b4bc99a57aeca","tarball":"https://registry.npmjs.org/@avaya/axp-omni-sdk-messaging-ui/-/axp-omni-sdk-messaging-ui-1.1.0.tgz","fileCount":5,"integrity":"sha512-Y+NsR8UHyoaz0QD6uObEPMSKQH6fcWcetUanpQIDu27cCjfql3IlyaPc6t5OWCeOS/0z7dVNw6pziqXqXZr8HQ==","signatures":[{"sig":"MEUCIFaSRA25NzheeyJVQ4XFf1X0d+71EVm3uYg3AlkIi4rEAiEAitMTubD1z4/BHeJ1WG2/O5qvEJFhvQEK4I48r+n1+FE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3309567},"type":"module","_from":"file:candidate/avaya-axp-omni-sdk-messaging-ui-1.1.0.tgz","exports":{".":{"types":"./lib/index.d.ts","import":"./lib/axp-omni-sdk-messaging-ui.min.js"}},"_npmUser":{"name":"axp-sdk-automation","email":"axp-sdk-automation@avaya.com"},"_resolved":"/home/runner/work/sdk/sdk/candidate/avaya-axp-omni-sdk-messaging-ui-1.1.0.tgz","_integrity":"sha512-Y+NsR8UHyoaz0QD6uObEPMSKQH6fcWcetUanpQIDu27cCjfql3IlyaPc6t5OWCeOS/0z7dVNw6pziqXqXZr8HQ==","_npmVersion":"10.8.2","description":"AXP Omni SDK Messaging UI provides a highly customizable user interface as a [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) for messaging that can be easily integrated into the Client website to enable messaging capabilit","directories":{},"_nodeVersion":"20.17.0","dependencies":{"antd":"^5.15.4","react":"^18.2.0","redux":"^5.0.0","lodash":"^4.17.21","i18next":"^23.10.1","react-dom":"^18.2.0","emoji-mart":"^5.5.2","react-uuid":"^2.0.0","react-redux":"^9.0.4","react-i18next":"^15.0.1","@avaya/neo-react":"^1.1.10","@emoji-mart/data":"^1.1.2","@reduxjs/toolkit":"^2.2.2","@ant-design/icons":"^5.4.0","@emoji-mart/react":"^1.1.1","@testing-library/react":"^16.0.0","@avaya/axp-omni-sdk-core":"^1.1.0","@testing-library/jest-dom":"^6.4.5","react-custom-scrollbars-2":"^4.5.0","@avaya/axp-omni-sdk-messaging":"^1.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/axp-omni-sdk-messaging-ui_1.1.0_1728419023803_0.41747731612811934","host":"s3://npm-registry-packages"}}},"time":{"created":"2024-07-29T23:47:01.884Z","modified":"2026-02-04T12:58:19.927Z","0.0.0":"2024-07-25T21:16:27.346Z","1.0.0":"2024-07-29T23:47:02.308Z","1.1.0":"2024-10-08T20:23:44.191Z"},"license":"SEE LICENSE IN LICENSE.txt","description":"AXP Omni SDK Messaging UI provides a highly customizable user interface as a [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) for messaging that can be easily integrated into the Client website to enable messaging capabilit","maintainers":[{"email":"mrazian@avaya.com","name":"mrazian"},{"email":"cpaasops@avaya.com","name":"cpaas.devops"},{"email":"bvazmer@avaya.com","name":"bvazmer"},{"email":"gaffara@avaya.com","name":"gaffara"},{"email":"amarasescu@avaya.com","name":"amarasescu"},{"email":"bvishwakarma@avaya.com","name":"digitalpipeline"},{"email":"kahagerman@avaya.com","name":"kahagerman"},{"email":"axp-sdk-automation@avaya.com","name":"axp-sdk-automation"},{"email":"raziandev@gmail.com","name":"raziandev"},{"email":"ptognini@avaya.com","name":"ptognini77"},{"email":"kamau3@avaya.com","name":"kamau3"},{"email":"lancecramlet@avaya.com","name":"lcramlet-avaya"},{"email":"jmidd@avaya.com","name":"jmiddd"},{"email":"ggoulet@avaya.com","name":"ggoulet_avaya"},{"email":"peter.c.schuelke@gmail.com","name":"shulkdog"}],"readme":"# AXP Messaging UI\n\nAXP Omni SDK Messaging UI provides a highly customizable user interface as a [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) for messaging that can be easily integrated into the Client website to enable messaging capabilities. It empowers developers to finely tailor the messaging interface, allowing customization of colors, strings, icons, typography, etc., to meet the specific visual requirements of your application.\n\nThe AXP Messaging UI is build on top of [AXP Core](https://github.com/AvayaExperiencePlatform/omni-sdk-js/blob/v1.1.0/core.md) and [AXP Messaging](https://github.com/AvayaExperiencePlatform/omni-sdk-js/blob/v1.1.0/messaging.md) SDKs. Before using the AXP Omni SDK Messaging UI, please refer to [this page](https://developers.avayacloud.com/avaya-experience-platform/docs/omni-sdk-introduction#next-steps) for a list of prerequisites.\n\n## Features\n\n- **Show messages with status:** Shows the messages from various sources such as agents, supervisors, and bots with time and status indicators, including real-time updates for messages being sent, successfully delivered to AXP, or requiring a retry due to failure.\n- **Message Organization:** Organizes messages based on the date, providing users with a structured and easily navigable conversation timeline for a seamless and enjoyable messaging experience.\n- **Show participants:** Shows a list of all active participants involved in a conversation along with the name of the sender in every message. This is particularly useful for non-customers, as it makes it easy for users to identify and follow the discussion flow.\n- **Message History:** Retrieve and display historical messages in a conversation, enabling users to reference messages from previous interactions for context and continuity.\n- **Infinite Scrolling:** Improve user experience by automatically fetching older messages as users scroll to the top, ensuring a seamless and uninterrupted conversation exploration.\n- **Message Retry:** Facilitate communication resilience by allowing users to retry sending messages that may have failed in previous attempts.\n- **Attachments:** Enhances communication capabilities by enabling users to send attachments, either independently or with accompanying text messages, fostering a richer and more interactive messaging experience.\n- **Location Sharing:** Empower users to share location information seamlessly when requested by an agent, enhancing the contextual richness of conversations.\n- **Rich Media:** Supports rich media messages like links, post backs, replies, and carousels, allowing for dynamic and engaging content within the messaging interface.\n- **Typing indicators:** Provides real-time typing indicators to show when the participants in a Conversation are typing, enhancing the conversational experience by providing immediate feedback on the other party's engagement.\n- **Customizability**: Provides fine grained customizations options for developers to tweak the messaging interface to meet the specific visual requirements of their brand.\n\n## Installation\n\nTo install the AXP Omni SDK Messaging UI, run the following command:\n\n```bash\nnpm install --save @avaya/axp-omni-sdk-messaging-ui\n```\n\nThe AXP Omni SDK Messaging UI depends on the AXP Core SDK and AXP Messaging SDK, which are bundled with the AXP Omni SDK Messaging UI.\n\n## Usage\n\nThe AXP Omni SDK Messaging UI exports a Web Component `` that can be used in your HTML code. Once the browser encounters the web component `` in the HTML document, it will instantiate it and the component will be rendered onto the screen. **Hence, it is important to note that all the configurations must be done before the component can be render. This is to make sure it picks up the correct configuration values while rendering. These configurations include the required AXP related configurations, callbacks and optional customizations.**\n\n### Configuration\n\nAs stated above the AXP Omni SDK Messaging UI requires some configurations to be set before it can be rendered. This should be done by setting an config object by name `AxpOmniSdkMessagingUiConfig` on the `window` object before loading your website's script that uses (imports) the AXP Omni SDK Messaging UI.\n\n**Example:**\n\nConfiguration script: `axp-messaging-ui-config.js`\n\n```js\n// Configuration script - axp-messaging-ui-config.js\nwindow.AxpOmniSdkMessagingUiConfig = {\n\t// Required AXP configurations\n\t// Full list of AXP configurations are ignored here for brevity. Please refer to the Configuration options section below to know more.\n};\n```\n\n```js\n// Alternatively, you can declare the config object using the `var` keyword.\nvar AxpOmniSdkMessagingUiConfig = {\n\t// ...\n};\n```\n\nYour website's script that uses the AXP Omni SDK Messaging UI: `your-website-script.js`\n\n```js\nimport { AxpOmniSdkMessagingUi } '@avaya/axp-omni-sdk-messaging-ui';\n\n// Your code ...\n```\n\nYour website's main HTML file: `index.html`\n\n```html\n\n\n\n\t\n\t\t\n\t\t\n\t\tMessaging-App-UI\n\t\t\n\t\t\n\t\n\t\n\t\t\n\t\n\n```\n\n#### Configuration options\n\nThe AXP Omni SDK Messaging UI supports following configuration options:\n\n| Option | Type | Required/Optional | Description |\n| ---------------------------------- | -------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `host` | `string` | Required | Hostname of the AXP API endpoint to connect to or an AXP region code. If a region code is provided (e.g., \"na\" for North America), it will be converted to the corresponding hostname (e.g., \"na.api.avayacloud.com\"). If a full hostname is provided (e.g., \"na.api.avayacloud.com\"), it will be used as is. |\n| `integrationId` | `string` | Required | The unique 36 character Integration ID available to your account administrator when the integration was created. |\n| `appKey` | `string` | Required | The unique key associate with tenant in case of APIXH integration. |\n| `sessionParameters` | `object` | Optional | The session parameters to be passed to the AXP server. |\n| `logLevel` | `LogLevel` | Optional | The log level for the AXP Omni SDK Messaging UI. Default is `WARN`. |\n| `idleTimeoutDuration` | `number` | Optional | The duration in milliseconds after which the user is considered idle. |\n| `idleShutdownGraceTimeoutDuration` | `number` | Optional | The duration in milliseconds after idle timeout after which and the session is closed automatically due to user inactivity. |\n| `locale` | `string` | Optional | The locale to be used for the AXP Omni SDK Messaging UI. Default is `en-US`. |\n| `onMessageBubbleClicked` | `function` | Optional | The callback function to be called when the message bubble is clicked. |\n| `onInit` | `function` | Optional | The callback function to be called when the AXP Omni SDK Messaging UI is initialized for the current User (identified by the JWT). |\n| `onShutdown` | `function` | Optional | The callback function to be called when the current session for the current User is closed. |\n| `onIdleTimeout` | `function` | Optional | The callback function to be called when the current User is considered idle. |\n| `onLocationRequest` | `function` | Optional | The callback function to be called when the User is requested to share their location. |\n| `beforeMessageSend` | `function` | Optional | The callback function to be called before a message is sent. |\n| `beforeMessageRender` | `function` | Optional | The callback function to be called before a message is rendered on the screen. |\n| `displayStrings` | `DisplayStrings` | Optional | An object containing the display strings and their translations to be used in the AXP Omni SDK Messaging UI. See [custom display strings and translations](#custom-display-strings-and-translations) section. |\n| `emojiMartTranslations` | `Record` | Optional | AXP Omni SDK Messaging UI uses [Emoji Mart](https://github.com/missive/emoji-mart) Component as emoji picker. This configuration expects an object containing the display strings and their translations to be used for the emoji mart component. |\n| `themeCustomizations` | `Record` | Optional | An object containing the theme customizations for the AXP Omni SDK Messaging UI. Each key is a theme name and the value is the customizations for that theme. See [theme customization](#theme-customization) section. |\n| `defaultTheme` | `string` | Optional | Name of the default theme out of the themes provided via the `themeCustomizations` configuration to be used for the AXP Omni SDK Messaging UI. |\n\n### Authentication\n\nThe AXP Omni SDK Messaging UI doesn't authenticate the User. It expects the User to be authenticated by your website and its backend web application. The AXP Omni SDK Messaging UI uses JSON Web Tokens (JWT) and requires a valid JWT to function. The JWT is obtained from your own backend web application that communicates with AXP's authentication API.\n\nThe AXP Omni SDK Messaging UI expects an implementation of the `JwtProvider` interface to be provided during [initialization](#initialization). The `JwtProvider` implementation must have two methods:\n\n1. `onExpiryWarning`: This method is called when the JWT is about to expire. In the argument of this method, the remaining time in milliseconds before the JWT expires is provided.\n2. `onExpiry`: This method is called when the JWT has expired.\n\n**The consumers of SDK should call the `AxpOmniSdkMessagingUi.setJwt()` to provide a new JWT to the SDK.**\n\nJWT Provider example (in TypeScript):\n\n```typescript\nimport { JwtProvider } from \"@avaya/axp-omni-sdk-messaging-ui\";\n\nclass MyJwtProvider implements JwtProvider {\n\tonExpiryWarning(timeToExpiry: number): void {\n\t\t// ...\n\t}\n\n\tonExpiry(): void {\n\t\t// ...\n\t}\n}\n```\n\nJWT Provider example (in JavaScript):\n\n```js\nclass MyJwtProviderJS {\n onExpiryWarning(timeToExpiry) {\n // ...\n }\n\n onExpiry(): void {\n // ...\n }\n}\n```\n\n### Initialization\n\nBefore the User can start sending messages, the AXP Omni SDK Messaging UI must be initialized. The initialization process creates a new session for the current user (identified by the JWT) post which the user can start sending messages. The initialization can be done by calling the `init` method on the instance of the `` Web Component. The AXP Omni SDK Messaging UI exports the class responsible for the Web Component as `AxpOmniSdkMessagingUi`.\n\nIt can be imported as follows:\n\n```ts\nimport { AxpOmniSdkMessagingUi } from \"@avaya/axp-omni-sdk-messaging-ui\";\n```\n\nOnce imported, the instance can be procured by using the static method `getInstance()` on the class `AxpOmniSdkMessagingUi`. The `init` method can then be called on the returned instance object to initialize the AXP Omni SDK Messaging UI.\n\n**⚠️ Important Note: Currently AXP Omni SDK Messaging UI supports a single instance, using multiple instances of the `` can lead to unpredictable behavior.**\n\n**Example:**\n\n```js\nconst axpOmniSdkMessagingUi = AxpOmniSdkMessagingUi.getInstance();\n\n// Arguments excluded in this example for brevity.\naxpOmniSdkMessagingUi.init(...);\n```\n\nThe `init()` method takes an object of type `AxpOmniSdkMessagingUiInitParams` containing the following properties:\n\n- `jwtProvider`: An implementation of the `JwtProvider` interface. See [Authentication](#authentication) section.\n- `userName` (optional): The name of the current User to be displayed in the AXP Omni SDK Messaging UI.\n- `jwt`: The JWT for the current User.\n- `contextParameters` (optional): The context parameters to be passed to the AXP server for routing.\n- `sessionParameters` (optional): The session parameters to be passed to the AXP server.\n\nThe `init()` method returns a `Promise` which resolves when the AXP Omni SDK Messaging UI is initialized successfully.\n\nFull example:\n\n```ts\nimport { AxpOmniSdkMessagingUi } from '@avaya/axp-omni-sdk-messaging-ui';\n\nconst axpOmniSdkMessagingUi = AxpOmniSdkMessagingUi.getInstance();\n\nconst axpOmniSdkMessagingUiInitParameters = {\n jwtProvider: new MyJwtProvider();\n jwt: '',\n displayName: 'John Doe',\n contextParameters: {\n 'key1': 'value1',\n 'key2': 'value2',\n // ...\n }\n}\n\n// Arguments excluded in this example for brevity.\nawait axpOmniSdkMessagingUi.init(axpOmniSdkMessagingUiInitParameters);\n```\n\n#### Waiting for initialization\n\nAs shown in above example the `init()` method returns a `Promise` which resolves when the AXP Omni SDK Messaging UI is initialized successfully, developers can `await` on this promise.\n\nAlternatively, developers can also listen to the `onInit` callback provided during [configuration](#configuration) to know when the AXP Omni SDK Messaging UI is initialized successfully. The `onInitialized()` callback is called when the SDK is initialized successfully. The instance on which the initialization occurred is passed as an argument to the callback.\n\n#### When to initialize\n\nSince the initialization process creates a new session for the User, it should be done whenever the User changes. See [shutdown](#shutting-down) section to know how to end the previous User's session when the current User changes.\n\nSince, the AXP Omni SDK Messaging UI doesn't authenticate the User, it gives the flexibility to the Client Website to decide when to initialize the AXP Omni SDK Messaging UI. The initialization can be done when the User logs in or whenever the User clicks on the messaging bubble, or any other flow that your website has.\n\nTo know when a User has clicked on the messaging bubble, the AXP Omni SDK Messaging UI provides a callback `onMessageBubbleClicked` which is called when the User clicks on the messaging bubble. This callback must be provided during [configuration](#configuration).\n\nThe `onMessageBubbleClicked` callback automatically receives the instance of the `` Web Component on which the User had clicked. This instance can be used to call the `init` method to initialize the AXP Omni SDK Messaging UI.\n\n### Shutting down\n\nWhenever the User changes or the User logs out, the AXP Omni SDK Messaging UI should be shut down to end the current User's session. Post that the AXP Omni SDK Messaging UI can be re-[initialized](#initialization) for the new User.\n\nTo shutdown, the AXP Omni SDK Messaging UI provides a `shutdown()` method on the instance of the `` Web Component. The `shutdown()` method returns a `Promise` which resolves when the AXP Omni SDK Messaging UI is shut down successfully.\n\n**Example:**\n\n```ts\nimport { AxpOmniSdkMessagingUi } from \"@avaya/axp-omni-sdk-messaging-ui\";\n\nconst axpOmniSdkMessagingUi = AxpOmniSdkMessagingUi.getInstance();\n\nawait axpOmniSdkMessagingUi.shutdown();\n```\n\nAlternatively, you can also listen to the shutdown event by providing the `onShutdown()` callback during [configuration](#configuration). The `onShutdown()` callback is called when the SDK is shut down. The instance on which the shutdown event occurred is passed as an argument to the callback.\n\n### User Activity\n\nThe AXP Omni SDK Messaging UI internally has two timers to track the User's inactivity.\n\nThe first timer is the idle timer which is started right after the session is created. This timer expires when there are no activities for the configured duration. Once this timer expires the AXP Omni SDK Messaging UI will emit the Idle Timeout Invoked event and provide the configured grace period duration in the event's payload. The Client can show an appropriate message on the UI, warning the User about inactivity, by handling this event. Any activity from the User like sending a message etc will reset this timer.\n\nThe second timer is idle shutdown grace timer which runs after the idle timer has expired. This timer provides additional grace period for User or the Client to extend the session. After this timer expires, the session is terminated automatically and the AXP Omni SDK Messaging UI will raise the shutdown event and shut itself down (see [shutdown](#shutting-down) section for more details). If the Client wants to continue it must be reinitialize the SDK to do so.\n\nBoth the timeout values can be [configured](#configuration).\n\nDevelopers can listen to the Idle Timeout Invoked event by providing the `onIdleTimeout()` callback during [configuration](#configuration). Alternatively, developers can also add listener for the Idle Timeout Invoked event by calling the static method `addIdleTimeOutInvokedListener()` on the class `AxpOmniSdkMessagingUi`. Regardless of which approach is used, the callback will be called when the User is considered idle. And the instance on which the event occurred is passed as an argument to the callback.\n\n#### Extending the session\n\nThe AXP Omni SDK Messaging UI provides a static method `resetIdleTimeout()` on the class `AxpOmniSdkMessagingUi` to reset the idle timer. This method helps the Client Website to extend the session in scenarios where the Client Website is aware that the User is active based on events from its UI.\n\n### Custom display strings and translations\n\nThe AXP Omni SDK Messaging UI provides an option to customize the display strings used in the UI. This can be done by providing the `displayStrings` configuration during [initialization](#configuration).\n\nCheck out the [`DisplayStrings`](https://avayaexperienceplatform.github.io/omni-sdk-js/types/_avaya_axp_omni_sdk_messaging_ui.DisplayStrings.html) type exported by the AXP Omni SDK Messaging UI to know the strings that can be customized.\n\nThe `displayNames` property of the `DisplayStrings` can take either [`TextConfig`](https://avayaexperienceplatform.github.io/omni-sdk-js/types/_avaya_axp_omni_sdk_messaging_ui.TextConfig.html) or [`displayNameModifier`](https://avayaexperienceplatform.github.io/omni-sdk-js/types/_avaya_axp_omni_sdk_messaging_ui.DisplayNameModifier.html) callback function as a value for each of the participants. This function provides participant name as the parameter and expects a string in return.\n\nThe locale of the messaging UI can be changed by calling the static method `setLocale()` on the class `AxpOmniSdkMessagingUi`, which takes the locale string as an argument.\n\nNote: The custom display name to use for anonymous user can be provided through the `userDetails`.\n\n### Theme Customization\n\nThe AXP Omni SDK Messaging UI provides an option to customize the visual elements of the UI like colors, fonts, icons etc. Developers can create multiple themes and pass them to the AXP Omni SDK Messaging UI in the `themeCustomizations` in the [configuration](#configuration).\n\nThe themes can be changed by calling the static method `setTheme()` on the class `AxpOmniSdkMessagingUi`.\n\nThe [`AxpOmniSdkMessagingUiTheme`](https://avayaexperienceplatform.github.io/omni-sdk-js/types/_avaya_axp_omni_sdk_messaging_ui.AxpOmniSdkMessagingUiTheme.html) type exported by the AXP Omni SDK Messaging UI provides the structure of the theme object and all available options that can be changed. The options are organized by the various regions in the UI.\n\n**Note**: Browsers on iOS devices may auto zoom on the input fields if their fontSize is less than `16px`. To avoid this behavior, the `fontSize` of the `textInput` field in the theme configuration should be set to `16px` or more.\n\n#### Typing indicator customization\n\nAXP Omni SDK Messaging UI's typing indicator is composed of three parts namely the participant avatar(s), typing text and animation. They are displayed in the same order. The following customizations are available under the `typingIndicators` section of the `AxpOmniSdkMessagingUiTheme` -\n\n1. Participant avatar(s): The participant avatars can be hidden by setting the `show` property of `participantAvatars` to `false`.\n\n2. Typing text: By default, the typing text will contain names of the participants who are typing. The participant names can be excluded from the typing text by setting the `show` property of `participantNames` to `false` in the `typingText` subsection.\n\n3. Animation: The color of the typing indicator animation can be customized by setting the `indicatorColor` property of `animation`.\n\n### Other utilities and methods\n\n#### Instance Properties\n\nThe AXP Omni SDK Messaging UI provides the following properties on `AxpOmniSdkMessagingUi` class instance:\n\n- `initialized`: A boolean value indicating whether the AXP Omni SDK Messaging UI is initialized or not. This is available on the instance of the `AxpOmniSdkMessagingUi` class.\n\n#### Static Properties\n\nThe AXP Omni SDK Messaging UI provides the following static properties on `AxpOmniSdkMessagingUi` class:\n\n- `currentThemeName`: The name of the current theme being used by the AXP Omni SDK Messaging UI. This is available as a static property of the `AxpOmniSdkMessagingUi` class.\n\n#### Instance Methods\n\nThe AXP Omni SDK Messaging UI provides the following methods on `AxpOmniSdkMessagingUi` class instance:\n\n- `minimize()`: Minimizes the AXP Omni SDK Messaging UI to the messaging bubble. This is available as a static method of the `AxpOmniSdkMessagingUi` class.\n- `maximize()`: Maximizes the AXP Omni SDK Messaging UI from the messaging bubble. This is available as a static method of the `AxpOmniSdkMessagingUi` class. This method can be called only when the AXP Omni SDK Messaging UI has been initialized.\n\n#### Static Methods\n\nThe AXP Omni SDK Messaging UI provides the following static methods on `AxpOmniSdkMessagingUi` class:\n\n- `setLogLevel()` : Sets the log level for the AXP Omni SDK Messaging UI. This is available as a static method of the `AxpOmniSdkMessagingUi` class.\n- `setShutdownListener()`: Sets the event handler callback that needs to be invoked when the AXP Omni SDK Messaging UI is shutdown. This method will reset the event handler callback that was previously configured in the global configuration object `axpOmniSdkMessagingUiConfig` (of type `AxpOmniSdkMessagingUiConfig`).\n- `setIdleTimeOutInvokedListener()`: Sets the event handler callback that needs to be invoked when the idle timeout is reached. This method will reset the event handler callback that was previously configured in the global configuration object `axpOmniSdkMessagingUiConfig` (of type `AxpOmniSdkMessagingUiConfig`).\n- `setInitializedListener()`: Sets the event handler callback that needs to be invoked when the AXP Omni SDK Messaging UI is initialized. This method will reset the event handler callback that was previously configured in the global configuration object `axpOmniSdkMessagingUiConfig` (of type `AxpOmniSdkMessagingUiConfig`).\n- `clearShutdownListener()`: Clears the event handler callback that was attached to the AXP Omni SDK Messaging UI shutdown event. This method will remove the event handler callback that was previously configured in the global configuration object `axpOmniSdkMessagingUiConfig` (of type `AxpOmniSdkMessagingUiConfig`).\n- `clearIdleTimeOutInvokedListener()`: Clears the event handler callback that was attached to the AXP Omni SDK Messaging UI idle timeout event. This method will remove the event handler callback that was previously configured in the global configuration object `axpOmniSdkMessagingUiConfig` (of type `AxpOmniSdkMessagingUiConfig`).\n- `clearInitializedListener()`: Clears the event handler callback that was attached to the AXP Omni SDK Messaging UI initialization event. This method will remove the event handler callback that was previously configured in the global configuration object `axpOmniSdkMessagingUiConfig` (of type `AxpOmniSdkMessagingUiConfig`).\n","readmeFilename":"README.md"}