@moveo-ai/web-client 0.109.0 → 0.110.0-true.10

package/README.md

@@ -121,9 +121,11 @@ into an analytics tool:
 
 ```javascript
 MoveoAI.init({ integrationId: 'YOUR_INTEGRATION_ID' }).then((controller) => {
-  controller.onAnalyticsEvent(({ timestamp, event, session_id, properties }) => {
-    console.debug('[moveo]', timestamp, event, session_id, properties);
-  });
+  controller.onAnalyticsEvent(
+    ({ timestamp, event, session_id, properties }) => {
+      console.debug('[moveo]', timestamp, event, session_id, properties);
+    }
+  );
 });
 ```
 
@@ -168,14 +170,14 @@ MoveoAI.init({ integrationId: 'YOUR_INTEGRATION_ID' }).then((controller) => {
 
 Initializes the chat widget.
 
-| Parameter       | Type                    | Required | Description                                              |
-| --------------- | ----------------------- | -------- | -------------------------------------------------------- |
-| `integrationId` | `string`                | Yes      | Your Moveo.ai integration ID                             |
-| `host`          | `string`                | No       | Regional channels host, when it differs from the default |
-| `element`       | `HTMLElement \| string` | No       | Embed target, required for the `embed` widget position   |
-| `identityToken` | `string`                | No       | Signed token that verifies the user's identity on the session |
-| `voiceIntegrationId` | `string`           | No       | Voice pairing override for the in-widget call            |
-| `variant`       | `'default' \| 'nbg' \| 'alpha' \| 'fiserv'` | No | Visual variant                       |
+| Parameter            | Type                                        | Required | Description                                                   |
+| -------------------- | ------------------------------------------- | -------- | ------------------------------------------------------------- |
+| `integrationId`      | `string`                                    | Yes      | Your Moveo.ai integration ID                                  |
+| `host`               | `string`                                    | No       | Regional channels host, when it differs from the default      |
+| `element`            | `HTMLElement \| string`                     | No       | Embed target, required for the `embed` widget position        |
+| `identityToken`      | `string`                                    | No       | Signed token that verifies the user's identity on the session |
+| `voiceIntegrationId` | `string`                                    | No       | Voice pairing override for the in-widget call                 |
+| `variant`            | `'default' \| 'nbg' \| 'alpha' \| 'fiserv'` | No       | Visual variant                                                |
 
 Any other key passes through as a widget-config override for the loaded integration.
 
@@ -183,43 +185,70 @@ Any other key passes through as a widget-config override for the loaded integrat
 
 ### WidgetController Methods
 
-| Method                          | Description                                            |
-| ------------------------------- | ------------------------------------------------------ |
-| `openWindow()`                  | Opens the chat window                                  |
-| `closeWindow()`                 | Closes the chat window                                 |
-| `closeConversation({ hide })`   | Ends the conversation; the widget hides unless `hide: false` |
-| `sendMessage({ text })`         | Sends a message to the agent                           |
-| `showTeaserMessage(message?)`   | Shows the teaser bubble                                |
-| `updateContext(ctx)`            | Updates the conversation context                       |
-| `setCSSVariables(vars)`         | Overrides widget CSS variables                         |
-| `setLocale(locale)`             | Switches the widget language                           |
-| `destroy()`                     | Removes the widget from the page                       |
+| Method                        | Description                                                  |
+| ----------------------------- | ------------------------------------------------------------ |
+| `openWindow()`                | Opens the chat window                                        |
+| `closeWindow()`               | Closes the chat window                                       |
+| `closeConversation({ hide })` | Ends the conversation; the widget hides unless `hide: false` |
+| `sendMessage({ text })`       | Sends a message to the agent                                 |
+| `showTeaserMessage(message?)` | Shows the teaser bubble                                      |
+| `updateContext(ctx)`          | Updates the conversation context                             |
+| `setCSSVariables(vars)`       | Overrides widget CSS variables                               |
+| `setLocale(locale)`           | Switches the widget language                                 |
+| `destroy()`                   | Removes the widget from the page                             |
 
 ### WidgetController Events
 
 Register a callback per event. Every callback returns nothing and receives the
 payload listed below.
 
-| Method                        | Fires when                                     | Payload                                              |
-| ----------------------------- | ---------------------------------------------- | ---------------------------------------------------- |
-| `onSessionCreated(cb)`        | A new session opens                            | `{ user_id, session_id, display_name }`              |
-| `onSessionReconnected(cb)`    | An existing session reconnects                 | `{ user_id, session_id, display_name }`              |
-| `onSessionClosed(cb)`         | The session closes                             | —                                                    |
-| `onConversationClosed(cb)`    | The user ends the conversation                 | —                                                    |
-| `onWebchatOpened(cb)`         | The user opens the widget                      | `{ isFull, is_mobile? }`                             |
-| `onWebchatClosed(cb)`         | The user closes the widget                     | `{ isFull }`                                         |
-| `onLinkClicked(cb)`           | The user clicks a link inside the chat         | `{ url }`                                            |
-| `onUnreadMessages(cb)`        | Unread messages exist while the widget is shut | —                                                    |
-| `onNoUnreadMessages(cb)`      | The unread indicator clears                    | —                                                    |
-| `onUserActivity(cb)`          | The visitor interacts with the widget          | —                                                    |
-| `onMemberLeave(cb)`           | An agent leaves the conversation               | —                                                    |
-| `onAnalyticsEvent(cb)`        | Any interaction event (see below)              | `{ timestamp, event, session_id?, properties }`      |
+| Method                     | Fires when                                     | Payload                                         |
+| -------------------------- | ---------------------------------------------- | ----------------------------------------------- |
+| `onSessionCreated(cb)`     | A new session opens                            | `{ user_id, session_id, display_name }`         |
+| `onSessionReconnected(cb)` | An existing session reconnects                 | `{ user_id, session_id, display_name }`         |
+| `onSessionClosed(cb)`      | The session closes                             | —                                               |
+| `onConversationClosed(cb)` | The user ends the conversation                 | —                                               |
+| `onWebchatOpened(cb)`      | The user opens the widget                      | `{ isFull, is_mobile? }`                        |
+| `onWebchatClosed(cb)`      | The user closes the widget                     | `{ isFull }`                                    |
+| `onLinkClicked(cb)`        | The user clicks a link inside the chat         | `{ url }`                                       |
+| `onUnreadMessages(cb)`     | Unread messages exist while the widget is shut | —                                               |
+| `onNoUnreadMessages(cb)`   | The unread indicator clears                    | —                                               |
+| `onUserActivity(cb)`       | The visitor interacts with the widget          | —                                               |
+| `onMemberLeave(cb)`        | An agent leaves the conversation               | —                                               |
+| `onAnalyticsEvent(cb)`     | The widget loads, and every interaction        | `{ timestamp, event, session_id?, properties }` |
 
 `onAnalyticsEvent` receives every interaction the widget tracks, identified by
 the `event` field: `session_start`, `session_end`, `message_sent` (the user sent
 a message — never carries the text), `launcher_clicked`, `rating_submitted`, and
 the rest of the `AnalyticsEvent` enum in `src/hooks/useAnalytics.ts`.
 
+It also receives one event that is not an interaction: **`widget_loaded`**,
+raised as soon as the widget renders on the page. It carries no `session_id`,
+because a session opens only when the visitor opens the chat. Register the
+callback at any time — a callback added after the widget loaded still receives
+`widget_loaded` on registration, so the event cannot be missed in the race
+between `init()` resolving and your `.then()` running.
+
+#### Header control changes
+
+The header no longer carries a separate minimize button. The close button hides
+the panel and leaves the conversation open, and **Restart** moved into the
+header menu, where it asks before it ends the conversation. Three consequences
+for anything you already bind:
+
+- **`minimize_icon_clicked` no longer exists.** It left the `AnalyticsEventName`
+  union with the button. A filter on that name now matches nothing, silently.
+  There is no replacement: the close button reports `close_icon_clicked`.
+- **`close_icon_clicked` no longer implies the conversation ended.** It now
+  means the visitor hid the panel. Counting it as an end overstates your
+  conversation count.
+- **`restart_conversation_clicked` is new.** It fires when the visitor opens
+  Restart from the header menu, before the confirmation. `onConversationClosed`
+  still fires only if they confirm, so the two are not interchangeable.
+
+During a voice call the close button keeps its old meaning and ends the call,
+after a confirmation.
+
 ### Forward widget events into your analytics
 
 The widget never writes into your analytics tools. If you want chat activity in
@@ -230,9 +259,17 @@ and where. With Quantum Metric, for example:
 MoveoAI.init({ integrationId: 'YOUR_INTEGRATION_ID' }).then((controller) => {
   // Event ids must exist in your Quantum Metric configuration first:
   // sendEvent() silently drops ids that are not defined for the page.
-  const QM_MOVEO_SESSION = 901; // example ids — define your own
+  const QM_MOVEO_LOADED = 900; // example ids — define your own
+  const QM_MOVEO_SESSION = 901;
   const QM_MOVEO_MESSAGE = 902;
 
+  controller.onAnalyticsEvent(({ event }) => {
+    if (event === 'widget_loaded') {
+      // Fires on every page that carries the widget, with no visitor action.
+      window.QuantumMetricAPI?.sendEvent(QM_MOVEO_LOADED, 0, '');
+    }
+  });
+
   controller.onSessionCreated(({ session_id }) => {
     // The Moveo session id becomes searchable on the QM session,
     // joining every replay to its Moveo conversation.
@@ -276,6 +313,141 @@ MoveoAI.init({
 });
 ```
 
+### Inactivity Timeout
+
+The widget opens an inactivity modal once the visitor goes quiet, and asks
+whether to keep the conversation. Set `inactivity_timeout` in minutes to change
+when it appears. Set it in the integration's configuration, or override it on
+`init()`:
+
+```javascript
+MoveoAI.init({
+  integrationId: 'YOUR_INTEGRATION_ID',
+  inactivity_timeout: 20, // minutes; 0 turns the modal off
+});
+```
+
+| Value                             | Effect                                     |
+| --------------------------------- | ------------------------------------------ |
+| `0`                               | No modal. The widget still tracks activity |
+| `3` to `30`                       | The modal opens after that many minutes    |
+| Below `3`, or above `30`          | Clamped into the 3 to 30 minute range      |
+| Absent, negative, or not a number | The default, 10 minutes                    |
+
+Below 3 minutes the modal interrupts a visitor who only stopped to read. Above
+30 it holds a dead session open for hours. A negative value falls back to the
+default rather than to `0`, so a malformed configuration cannot switch the
+modal off without anyone noticing.
+
+Only activity inside the widget counts. A visitor who scrolls your page but
+does not touch the chat is inactive.
+
+### CSS Variables
+
+Pass any of these to `setCSSVariables()` to restyle the widget. Every value is
+a plain CSS value, applied inside the widget iframe.
+
+```javascript
+const widget = await MoveoAI.init({ integrationId: 'YOUR_INTEGRATION_ID' });
+
+widget.setCSSVariables({
+  '--moveo-border-radius-surface': '8px',
+  '--moveo-font-primary': "'Roboto', sans-serif",
+});
+```
+
+| Variable                        | Default                      | Controls                                                       |
+| ------------------------------- | ---------------------------- | -------------------------------------------------------------- |
+| `--moveo-font-primary`          | unset, see below             | The widget font family                                         |
+| `--moveo-border-radius-surface` | `16px`                       | Corner radius of the chat panel, dialogs and the webview sheet |
+| `--moveo-border-radius-base`    | `5px`                        | Corner radius of inline media and the launcher teaser pill     |
+| `--moveo-header-height`         | `68px`                       | Header height, and the offset every screen below it starts at  |
+| `--moveo-header-background`     | from the theme               | Header background; `theme_colors.header_color` sets it too     |
+| `--moveo-header-text-color`     | from the theme               | Header text and icon colour                                    |
+| `--moveo-shadow-bubble`         | `0px 0px 10px 0px #10182824` | Launcher bubble shadow                                         |
+| `--moveo-loadingIcon-size`      | `1rem`                       | Size of the loading spinner                                    |
+| `--moveo-modal-tall-height`     | `min(600px, 100%)`           | Height of a `tall` webview dialog; never exceeds the widget    |
+| `--moveo-modal-tall-width`      | `min(400px, 100%)`           | Width of a `tall` webview dialog; never exceeds the widget     |
+| `--moveo-expanded-chat-width`   | `672px`                      | Panel width in the expanded layout                             |
+| `--moveo-chat-width`            | from the config              | Panel width; the `chatWindow` config sets it                   |
+| `--moveo-chat-height`           | from the config              | Panel height; the `chatWindow` config sets it                  |
+| `--moveo-z-index`               | `10022`                      | Stacking of the widget against your page. See below            |
+
+#### Fonts
+
+`--moveo-font-primary` is unset by default. The widget then uses the font its
+configuration loads — the `font_family` setting, or the font that ships with
+your variant. Set the variable to override that, at any time and from either
+`setCSSVariables()` or your own stylesheet. The widget never writes it back, so
+your value survives a font that finishes loading later.
+
+#### Stacking order
+
+The widget renders in an iframe on your page, so its stacking is decided by
+your document, not by anything inside the widget. Raise it above a header or a
+cookie banner either from your own stylesheet:
+
+```css
+:root {
+  --moveo-z-index: 999999;
+}
+```
+
+or through the API, which applies it to the iframe on your page:
+
+```javascript
+widget.setCSSVariables({ '--moveo-z-index': '999999' });
+```
+
+Every other variable in the table applies inside the widget iframe.
+
+`--nbg-bg` also exists, for one account's variant styling. It is not part of
+the supported surface.
+
+#### Colours
+
+Set colours in the integration's `theme_colors` config, which carries a `light`
+and a `dark` set. Each key writes one CSS variable, so the same colours can be
+overridden at runtime through `setCSSVariables()`, which wins over the config.
+
+| `theme_colors` key     | CSS variable                        | Controls                                                    |
+| ---------------------- | ----------------------------------- | ----------------------------------------------------------- |
+| `accent_color`         | `--color-accent`                    | The accent, and the default for every colour marked below   |
+| `background_color`     | `--color-background`                | The widget surface, and the area behind the messages        |
+| `border_color`         | `--color-border`                    | Panel, composer and card borders                            |
+| `header_color`         | `--moveo-header-background`         | Header background                                           |
+| `text_color_header`    | `--moveo-header-text-color`         | Header text and icons                                       |
+| `text_color_user`      | `--color-text-primary-foreground`   | Text inside the visitor's own bubbles                       |
+| `text_color_agent`     | `--color-text-secondary-foreground` | Text inside the agent's bubbles                             |
+| `launcher_background`  | `--color-launcher-background`       | Launcher bubble; defaults to the accent                     |
+| `launcher_foreground`  | `--color-launcher-foreground`       | Launcher icon; defaults to the widget background            |
+| `link_color`           | `--color-link`                      | Links in messages; defaults to the accent                   |
+| `rating_background`    | `--color-rating-background`         | Selected rating button; defaults to the accent              |
+| `send_icon_color`      | `--color-send-icon`                 | Send icon in the composer; defaults to the accent           |
+| `swimmlane_background` | `--color-swimmlane-background`      | System message pill background                              |
+| `swimmlane_foreground` | `--color-swimmlane-foreground`      | System message pill text; defaults to the agent text colour |
+
+A colour that says "defaults to" follows `--color-accent` — or the colour named
+— until you set it. So an accent alone restyles the links, the rating, the send
+icon and the launcher, and `--color-chat-background` follows the background.
+
+Four more colours have no `theme_colors` key, so they are set through
+`setCSSVariables()` only:
+
+| Variable                     | Controls                                             |
+| ---------------------------- | ---------------------------------------------------- |
+| `--color-chat-background`    | The area behind the messages; follows the background |
+| `--color-options-background` | Quick reply button background                        |
+| `--color-options-foreground` | Quick reply button label; defaults to the accent     |
+| `--color-options-border`     | Quick reply button border; defaults to the accent    |
+
+#### Renamed variables
+
+`--moveo-new-header-height` and `--moveo-new-border-radius-base` are the former
+names of `--moveo-header-height` and `--moveo-border-radius-surface`. Setting
+either still works, so existing integrations need no change, but use the names
+in the table above.
+
 ### Supported Languages
 
 The widget supports 26 locales including: English, Spanish, French, German, Italian, Portuguese, Dutch, Greek, Arabic, Hebrew, and more.

package/dist/63.min.js.LICENSE.txt

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @moveo-ai/web-client v0.109.0
+ *   @moveo-ai/web-client v0.110.0-true.10
  *   Copyright (c) Moveo.ai (TM)
  *
  */

package/dist/752.min.js.LICENSE.txt

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @moveo-ai/web-client v0.109.0
+ *   @moveo-ai/web-client v0.110.0-true.10
  *   Copyright (c) Moveo.ai (TM)
  *
  */

package/dist/882.min.js.LICENSE.txt

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @moveo-ai/web-client v0.109.0
+ *   @moveo-ai/web-client v0.110.0-true.10
  *   Copyright (c) Moveo.ai (TM)
  *
  */

package/dist/929.min.js.LICENSE.txt

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @moveo-ai/web-client v0.109.0
+ *   @moveo-ai/web-client v0.110.0-true.10
  *   Copyright (c) Moveo.ai (TM)
  *
  */