@marketrix.ai/widget 3.8.10 → 3.8.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +158 -169
- package/dist/src/components/MarketrixWidget.d.ts +0 -1
- package/dist/src/components/base/Avatar.d.ts +0 -1
- package/dist/src/components/base/Badge.d.ts +0 -1
- package/dist/src/components/base/Button.d.ts +0 -1
- package/dist/src/components/base/Card.d.ts +0 -1
- package/dist/src/components/base/Dialog.d.ts +6 -7
- package/dist/src/components/base/Flex.d.ts +0 -1
- package/dist/src/components/base/Icon.d.ts +0 -1
- package/dist/src/components/base/IconButton.d.ts +0 -1
- package/dist/src/components/base/Indicator.d.ts +0 -1
- package/dist/src/components/base/Menu.d.ts +4 -5
- package/dist/src/components/base/Pill.d.ts +0 -1
- package/dist/src/components/base/Spinner.d.ts +0 -1
- package/dist/src/components/base/Stack.d.ts +0 -1
- package/dist/src/components/base/Surface.d.ts +0 -1
- package/dist/src/components/base/Text.d.ts +0 -1
- package/dist/src/components/base/Textarea.d.ts +0 -1
- package/dist/src/components/base/Video.d.ts +0 -1
- package/dist/src/components/base/icons.d.ts +0 -1
- package/dist/src/components/base/layoutProps.d.ts +0 -1
- package/dist/src/components/base/tokens.d.ts +0 -1
- package/dist/src/components/base/useDisclosure.d.ts +0 -1
- package/dist/src/components/blocks/ChatInput.d.ts +0 -1
- package/dist/src/components/blocks/HeaderBar.d.ts +0 -1
- package/dist/src/components/blocks/NotificationToast.d.ts +0 -1
- package/dist/src/components/blocks/TabBar.d.ts +1 -2
- package/dist/src/components/blocks/WidgetDialog.d.ts +0 -1
- package/dist/src/components/blocks/WidgetFab.d.ts +0 -1
- package/dist/src/components/chat/MessageContent.d.ts +0 -1
- package/dist/src/components/chat/MessageItem.d.ts +0 -1
- package/dist/src/components/chat/MessageList.d.ts +1 -2
- package/dist/src/components/chat/ProgressLine.d.ts +0 -1
- package/dist/src/components/chat/SuggestedActions.d.ts +0 -1
- package/dist/src/components/chat/TaskStatusIcon.d.ts +0 -1
- package/dist/src/components/chat/ThinkingIndicator.d.ts +0 -1
- package/dist/src/components/chat/VideoStreamDisplay.d.ts +0 -1
- package/dist/src/components/navigation/MessengerShell.d.ts +0 -1
- package/dist/src/components/navigation/ResizeHandles.d.ts +0 -1
- package/dist/src/components/navigation/ShellTabBar.d.ts +0 -1
- package/dist/src/components/navigation/ViewTransition.d.ts +0 -1
- package/dist/src/components/ui/StateMessage.d.ts +0 -1
- package/dist/src/components/ui/WidgetSettingsLoader.d.ts +1 -2
- package/dist/src/components/views/ChatView.d.ts +0 -1
- package/dist/src/components/views/HomeView.d.ts +0 -1
- package/dist/src/constants/config.d.ts +0 -1
- package/dist/src/constants/theme.d.ts +0 -1
- package/dist/src/context/ChatContext.d.ts +0 -1
- package/dist/src/context/TaskContext.d.ts +0 -1
- package/dist/src/context/UIStateContext.d.ts +0 -1
- package/dist/src/context/WidgetProviders.d.ts +0 -1
- package/dist/src/context/sseReducer.d.ts +0 -1
- package/dist/src/design-system/component-tokens.d.ts +0 -1
- package/dist/src/design-system/layers.d.ts +0 -1
- package/dist/src/design-system/semantic-tokens.d.ts +0 -1
- package/dist/src/design-system/shadows.d.ts +0 -1
- package/dist/src/design-system/token-adapter.d.ts +0 -1
- package/dist/src/hooks/useDragSnap.d.ts +0 -1
- package/dist/src/hooks/useFocusTrap.d.ts +0 -1
- package/dist/src/hooks/useResize.d.ts +0 -1
- package/dist/src/hooks/useScreenShare.d.ts +0 -1
- package/dist/src/hooks/useScrollLock.d.ts +0 -1
- package/dist/src/hooks/useWidget.d.ts +0 -1
- package/dist/src/index.d.ts +0 -1
- package/dist/src/lib/utils.d.ts +0 -1
- package/dist/src/sdk/contract.d.ts +0 -371
- package/dist/src/sdk/contracts/activityLog.d.ts +0 -25
- package/dist/src/sdk/contracts/application.d.ts +54 -5
- package/dist/src/sdk/contracts/chat.d.ts +0 -1
- package/dist/src/sdk/contracts/common.d.ts +10 -14
- package/dist/src/sdk/contracts/entities.d.ts +12 -271
- package/dist/src/sdk/contracts/widget.d.ts +0 -973
- package/dist/src/sdk/index.d.ts +1 -372
- package/dist/src/services/ApiService.d.ts +1 -3
- package/dist/src/services/ChatService.d.ts +2 -4
- package/dist/src/services/ConfigManager.d.ts +0 -1
- package/dist/src/services/DomService.d.ts +3 -4
- package/dist/src/services/ScreenShareService.d.ts +0 -6
- package/dist/src/services/SessionManager.d.ts +0 -1
- package/dist/src/services/SessionRecorder.d.ts +0 -1
- package/dist/src/services/ShowModeService.d.ts +0 -1
- package/dist/src/services/StorageService.d.ts +0 -1
- package/dist/src/services/StreamClient.d.ts +0 -2
- package/dist/src/services/ToolService.d.ts +3 -4
- package/dist/src/services/ValidationService.d.ts +9 -12
- package/dist/src/services/WidgetService.d.ts +0 -2
- package/dist/src/test/a11y-utils.d.ts +0 -1
- package/dist/src/test/fixtures.d.ts +0 -1
- package/dist/src/test/setup.d.ts +0 -1
- package/dist/src/types/browserTools.d.ts +0 -7
- package/dist/src/types/index.d.ts +3 -10
- package/dist/src/utils/apiUtils.d.ts +0 -1
- package/dist/src/utils/bootstrap.d.ts +0 -1
- package/dist/src/utils/chat.d.ts +0 -11
- package/dist/src/utils/common.d.ts +0 -1
- package/dist/src/utils/dom.d.ts +0 -6
- package/dist/src/utils/format.d.ts +0 -1
- package/dist/src/utils/suggestedActions.d.ts +0 -1
- package/dist/src/utils/validation.d.ts +0 -5
- package/dist/src/utils/widgetPositioning.d.ts +0 -1
- package/dist/widget.mjs +65 -65
- package/dist/widget.mjs.map +1 -1
- package/package.json +12 -12
- package/dist/index.html +0 -1697
- package/dist/src/components/MarketrixWidget.d.ts.map +0 -1
- package/dist/src/components/base/Avatar.d.ts.map +0 -1
- package/dist/src/components/base/Badge.d.ts.map +0 -1
- package/dist/src/components/base/Button.d.ts.map +0 -1
- package/dist/src/components/base/Card.d.ts.map +0 -1
- package/dist/src/components/base/Dialog.d.ts.map +0 -1
- package/dist/src/components/base/Flex.d.ts.map +0 -1
- package/dist/src/components/base/Icon.d.ts.map +0 -1
- package/dist/src/components/base/IconButton.d.ts.map +0 -1
- package/dist/src/components/base/Indicator.d.ts.map +0 -1
- package/dist/src/components/base/Menu.d.ts.map +0 -1
- package/dist/src/components/base/Pill.d.ts.map +0 -1
- package/dist/src/components/base/Spinner.d.ts.map +0 -1
- package/dist/src/components/base/Stack.d.ts.map +0 -1
- package/dist/src/components/base/Surface.d.ts.map +0 -1
- package/dist/src/components/base/Text.d.ts.map +0 -1
- package/dist/src/components/base/Textarea.d.ts.map +0 -1
- package/dist/src/components/base/Video.d.ts.map +0 -1
- package/dist/src/components/base/icons.d.ts.map +0 -1
- package/dist/src/components/base/index.d.ts +0 -22
- package/dist/src/components/base/index.d.ts.map +0 -1
- package/dist/src/components/base/layoutProps.d.ts.map +0 -1
- package/dist/src/components/base/tokens.d.ts.map +0 -1
- package/dist/src/components/base/useDisclosure.d.ts.map +0 -1
- package/dist/src/components/blocks/ChatInput.d.ts.map +0 -1
- package/dist/src/components/blocks/HeaderBar.d.ts.map +0 -1
- package/dist/src/components/blocks/NotificationToast.d.ts.map +0 -1
- package/dist/src/components/blocks/TabBar.d.ts.map +0 -1
- package/dist/src/components/blocks/WidgetDialog.d.ts.map +0 -1
- package/dist/src/components/blocks/WidgetFab.d.ts.map +0 -1
- package/dist/src/components/blocks/index.d.ts +0 -7
- package/dist/src/components/blocks/index.d.ts.map +0 -1
- package/dist/src/components/chat/MessageContent.d.ts.map +0 -1
- package/dist/src/components/chat/MessageItem.d.ts.map +0 -1
- package/dist/src/components/chat/MessageList.d.ts.map +0 -1
- package/dist/src/components/chat/ProgressLine.d.ts.map +0 -1
- package/dist/src/components/chat/SuggestedActions.d.ts.map +0 -1
- package/dist/src/components/chat/TaskStatusIcon.d.ts.map +0 -1
- package/dist/src/components/chat/ThinkingIndicator.d.ts.map +0 -1
- package/dist/src/components/chat/VideoStreamDisplay.d.ts.map +0 -1
- package/dist/src/components/navigation/MessengerShell.d.ts.map +0 -1
- package/dist/src/components/navigation/ResizeHandles.d.ts.map +0 -1
- package/dist/src/components/navigation/ShellTabBar.d.ts.map +0 -1
- package/dist/src/components/navigation/ViewTransition.d.ts.map +0 -1
- package/dist/src/components/ui/StateMessage.d.ts.map +0 -1
- package/dist/src/components/ui/WidgetSettingsLoader.d.ts.map +0 -1
- package/dist/src/components/views/ChatView.d.ts.map +0 -1
- package/dist/src/components/views/HomeView.d.ts.map +0 -1
- package/dist/src/constants/config.d.ts.map +0 -1
- package/dist/src/constants/theme.d.ts.map +0 -1
- package/dist/src/context/ChatContext.d.ts.map +0 -1
- package/dist/src/context/TaskContext.d.ts.map +0 -1
- package/dist/src/context/UIStateContext.d.ts.map +0 -1
- package/dist/src/context/WidgetProviders.d.ts.map +0 -1
- package/dist/src/context/sseReducer.d.ts.map +0 -1
- package/dist/src/design-system/component-tokens.d.ts.map +0 -1
- package/dist/src/design-system/layers.d.ts.map +0 -1
- package/dist/src/design-system/semantic-tokens.d.ts.map +0 -1
- package/dist/src/design-system/shadows.d.ts.map +0 -1
- package/dist/src/design-system/themes/default.d.ts +0 -7
- package/dist/src/design-system/themes/default.d.ts.map +0 -1
- package/dist/src/design-system/themes/high-contrast.d.ts +0 -4
- package/dist/src/design-system/themes/high-contrast.d.ts.map +0 -1
- package/dist/src/design-system/themes/index.d.ts +0 -3
- package/dist/src/design-system/themes/index.d.ts.map +0 -1
- package/dist/src/design-system/token-adapter.d.ts.map +0 -1
- package/dist/src/hooks/useDragSnap.d.ts.map +0 -1
- package/dist/src/hooks/useFocusTrap.d.ts.map +0 -1
- package/dist/src/hooks/useResize.d.ts.map +0 -1
- package/dist/src/hooks/useScreenShare.d.ts.map +0 -1
- package/dist/src/hooks/useScrollLock.d.ts.map +0 -1
- package/dist/src/hooks/useWidget.d.ts.map +0 -1
- package/dist/src/index.d.ts.map +0 -1
- package/dist/src/lib/utils.d.ts.map +0 -1
- package/dist/src/sdk/contract.d.ts.map +0 -1
- package/dist/src/sdk/contracts/activityLog.d.ts.map +0 -1
- package/dist/src/sdk/contracts/agent.d.ts +0 -3243
- package/dist/src/sdk/contracts/agent.d.ts.map +0 -1
- package/dist/src/sdk/contracts/application.d.ts.map +0 -1
- package/dist/src/sdk/contracts/chat.d.ts.map +0 -1
- package/dist/src/sdk/contracts/common.d.ts.map +0 -1
- package/dist/src/sdk/contracts/entities.d.ts.map +0 -1
- package/dist/src/sdk/contracts/widget.d.ts.map +0 -1
- package/dist/src/sdk/index.d.ts.map +0 -1
- package/dist/src/services/ApiService.d.ts.map +0 -1
- package/dist/src/services/ChatService.d.ts.map +0 -1
- package/dist/src/services/ConfigManager.d.ts.map +0 -1
- package/dist/src/services/DomService.d.ts.map +0 -1
- package/dist/src/services/ScreenShareService.d.ts.map +0 -1
- package/dist/src/services/SessionManager.d.ts.map +0 -1
- package/dist/src/services/SessionRecorder.d.ts.map +0 -1
- package/dist/src/services/ShowModeService.d.ts.map +0 -1
- package/dist/src/services/StorageService.d.ts.map +0 -1
- package/dist/src/services/StreamClient.d.ts.map +0 -1
- package/dist/src/services/ToolService.d.ts.map +0 -1
- package/dist/src/services/ValidationService.d.ts.map +0 -1
- package/dist/src/services/WidgetService.d.ts.map +0 -1
- package/dist/src/test/a11y-utils.d.ts.map +0 -1
- package/dist/src/test/fixtures.d.ts.map +0 -1
- package/dist/src/test/setup.d.ts.map +0 -1
- package/dist/src/types/browserTools.d.ts.map +0 -1
- package/dist/src/types/index.d.ts.map +0 -1
- package/dist/src/utils/apiUtils.d.ts.map +0 -1
- package/dist/src/utils/bootstrap.d.ts.map +0 -1
- package/dist/src/utils/chat.d.ts.map +0 -1
- package/dist/src/utils/common.d.ts.map +0 -1
- package/dist/src/utils/dom.d.ts.map +0 -1
- package/dist/src/utils/format.d.ts.map +0 -1
- package/dist/src/utils/suggestedActions.d.ts.map +0 -1
- package/dist/src/utils/validation.d.ts.map +0 -1
- package/dist/src/utils/widgetPositioning.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -1,249 +1,238 @@
|
|
|
1
1
|
# Marketrix Widget
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The embeddable Marketrix support widget. Drop it into any web page and your users get an in-product assistant that can **Tell** them how something works, **Show** them step-by-step with on-page highlighting, or **Do** the task for them in the browser.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Published to npm as [`@marketrix.ai/widget`](https://www.npmjs.com/package/@marketrix.ai/widget). Ships as a single ES module (`widget.mjs`) plus a classic `loader.js` bootstrap.
|
|
6
|
+
|
|
7
|
+
> **React 19 is required.** The widget treats `react` and `react-dom` as **peer dependencies** and does not bundle them — the host page must provide React 19. The script-tag loader injects a React 19 importmap for you; npm consumers already have React in their app.
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## Install
|
|
12
|
+
|
|
13
|
+
There are two integration paths. Most sites should use the **script tag** — it's the simplest and provides React for you.
|
|
14
|
+
|
|
15
|
+
### 1. Script tag (recommended)
|
|
16
|
+
|
|
17
|
+
Add one `<script>` to your page `<head>`, **before any `<script type="module">` tags** (the loader installs the React importmap that your module scripts rely on):
|
|
6
18
|
|
|
7
19
|
```html
|
|
8
20
|
<script
|
|
9
21
|
src="https://widget.marketrix.ai/loader.js"
|
|
10
|
-
mtx-api-host="https://api.marketrix.ai"
|
|
11
22
|
mtx-id="your-marketrix-id"
|
|
12
23
|
mtx-key="your-marketrix-key"
|
|
24
|
+
mtx-api-host="https://api.marketrix.ai"
|
|
13
25
|
></script>
|
|
14
26
|
```
|
|
15
27
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
### Script Attributes
|
|
19
|
-
|
|
20
|
-
| Attribute | Type | Required | Description |
|
|
21
|
-
| -------------- | ------ | -------- | ------------------------------------------------- |
|
|
22
|
-
| `mtx-id` | string | \* | Your Marketrix ID (production mode) |
|
|
23
|
-
| `mtx-key` | string | \* | Your Marketrix API key (production mode) |
|
|
24
|
-
| `mtx-app` | number | \* | Application ID (dev mode) |
|
|
25
|
-
| `mtx-agent` | number | \* | Agent ID (dev mode) |
|
|
26
|
-
| `mtx-api-host` | string | yes | API server URL (e.g., `https://api.marketrix.ai`) |
|
|
28
|
+
`loader.js`:
|
|
27
29
|
|
|
28
|
-
|
|
30
|
+
1. Injects a React 19 importmap (defaults to `esm.sh/react@19`). If your page already has an importmap, the loader **merges** it and your mappings win — so a host that already ships React 19 keeps its own copy.
|
|
31
|
+
2. Injects `<script type="module" src=".../widget.mjs">` from the same origin as the loader.
|
|
32
|
+
3. Forwards every `mtx-*` attribute from the loader tag to the widget.
|
|
29
33
|
|
|
30
|
-
|
|
34
|
+
The widget then **auto-initializes** from those attributes — no extra JavaScript required.
|
|
31
35
|
|
|
32
|
-
|
|
36
|
+
### 2. npm / programmatic
|
|
33
37
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
## Programmatic Usage
|
|
38
|
+
```bash
|
|
39
|
+
npm install @marketrix.ai/widget
|
|
40
|
+
# react@^19.2.3 and react-dom@^19.2.3 must already be installed in your app
|
|
41
|
+
```
|
|
39
42
|
|
|
40
|
-
|
|
43
|
+
```ts
|
|
44
|
+
import { mountWidget } from '@marketrix.ai/widget';
|
|
41
45
|
|
|
42
|
-
|
|
43
|
-
import {
|
|
44
|
-
initWidget,
|
|
45
|
-
unmountWidget,
|
|
46
|
-
updateMarketrixConfig,
|
|
47
|
-
startRecording,
|
|
48
|
-
stopRecording,
|
|
49
|
-
getRecordingState,
|
|
50
|
-
} from '@marketrix.ai/widget';
|
|
51
|
-
|
|
52
|
-
// Production
|
|
53
|
-
await initWidget({
|
|
46
|
+
await mountWidget({
|
|
54
47
|
mtxId: 'your-marketrix-id',
|
|
55
48
|
mtxKey: 'your-marketrix-key',
|
|
56
49
|
mtxApiHost: 'https://api.marketrix.ai',
|
|
57
50
|
});
|
|
51
|
+
```
|
|
58
52
|
|
|
59
|
-
|
|
60
|
-
await initWidget({
|
|
61
|
-
mtxApp: 123,
|
|
62
|
-
mtxAgent: 456,
|
|
63
|
-
mtxApiHost: 'https://api.marketrix.ai',
|
|
64
|
-
});
|
|
53
|
+
`mountWidget` auto-detects the credential mode (production / dev / preview) from the config you pass.
|
|
65
54
|
|
|
66
|
-
|
|
67
|
-
await initWidget(config, document.getElementById('my-container')!);
|
|
55
|
+
---
|
|
68
56
|
|
|
69
|
-
|
|
70
|
-
await updateMarketrixConfig({ mtxApiHost: 'https://new-api.marketrix.ai' });
|
|
57
|
+
## Credential modes
|
|
71
58
|
|
|
72
|
-
|
|
73
|
-
await startRecording();
|
|
74
|
-
stopRecording();
|
|
75
|
-
const isRecording = getRecordingState();
|
|
59
|
+
The widget supports three modes, auto-detected from the credentials you provide.
|
|
76
60
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
61
|
+
| Mode | Credentials | Script attributes | Network |
|
|
62
|
+
| -------------- | -------------------------------- | -------------------- | --------------------------------------------------------------- |
|
|
63
|
+
| **Production** | `mtxId` + `mtxKey` | `mtx-id` + `mtx-key` | Fetches settings from the API, opens the live stream |
|
|
64
|
+
| **Dev** | `mtxApp` (application id) | `mtx-app` | Same as production, keyed by id instead of credentials |
|
|
65
|
+
| **Preview** | `settings` object passed in code | — | No network — renders appearance only from the supplied settings |
|
|
80
66
|
|
|
81
|
-
|
|
67
|
+
All modes also accept the common options below.
|
|
82
68
|
|
|
83
|
-
|
|
84
|
-
import { MarketrixWidget } from '@marketrix.ai/widget';
|
|
69
|
+
---
|
|
85
70
|
|
|
86
|
-
|
|
87
|
-
return (
|
|
88
|
-
<MarketrixWidget
|
|
89
|
-
settings={{ widget_enabled: true, widget_position: 'bottom_right' /* ... */ }}
|
|
90
|
-
mtxApiHost='https://api.marketrix.ai'
|
|
91
|
-
/>
|
|
92
|
-
);
|
|
93
|
-
}
|
|
94
|
-
```
|
|
71
|
+
## Configuration options
|
|
95
72
|
|
|
96
|
-
|
|
73
|
+
These apply to every mode (script attribute → config key):
|
|
97
74
|
|
|
98
|
-
|
|
75
|
+
| Config key | Script attribute | Type | Description |
|
|
76
|
+
| ----------------- | --------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
77
|
+
| `mtxApiHost` | `mtx-api-host` | string | API server URL, e.g. `https://api.marketrix.ai`. The widget has no baked-in API host — you must supply it. |
|
|
78
|
+
| `container` | — | `HTMLElement` | Element to mount inside (programmatic only). Defaults to a container appended to `<body>`. |
|
|
79
|
+
| `userId` | — | number | Associates widget activity with one of your users. |
|
|
80
|
+
| `show_widget` | — | boolean | When `false`, the widget initializes fully but its UI stays hidden. Default `true`. |
|
|
81
|
+
| `use_screenshare` | `mtx-use-screenshare` | boolean | When `false`, screen-share requests are auto-denied and the Share Screen button is hidden. Default `true`. Disable via `mtx-use-screenshare="false"`. |
|
|
99
82
|
|
|
100
|
-
|
|
83
|
+
Widget **appearance and behavior** (position, colors, sizing, border radius, animation, enabled Tell/Show/Do/Human features, device visibility, header/body/greeting text, and quick-action chips) are configured in the Marketrix dashboard and fetched from the API at init. You don't set them in the embed — except in preview mode, where you pass them inline as `settings`.
|
|
101
84
|
|
|
102
|
-
|
|
85
|
+
### Full script-tag example
|
|
103
86
|
|
|
104
|
-
|
|
87
|
+
```html
|
|
88
|
+
<!doctype html>
|
|
89
|
+
<html>
|
|
90
|
+
<head>
|
|
91
|
+
<script
|
|
92
|
+
src="https://widget.marketrix.ai/loader.js"
|
|
93
|
+
mtx-id="your-marketrix-id"
|
|
94
|
+
mtx-key="your-marketrix-key"
|
|
95
|
+
mtx-api-host="https://api.marketrix.ai"
|
|
96
|
+
mtx-use-screenshare="false"
|
|
97
|
+
></script>
|
|
98
|
+
</head>
|
|
99
|
+
<body>
|
|
100
|
+
<!-- your app -->
|
|
101
|
+
</body>
|
|
102
|
+
</html>
|
|
103
|
+
```
|
|
105
104
|
|
|
106
|
-
|
|
105
|
+
The loader takes care of the React 19 importmap. If you manage your own importmap, place it before the loader and the loader will merge (and defer to) it:
|
|
107
106
|
|
|
108
|
-
|
|
107
|
+
```html
|
|
108
|
+
<script type="importmap">
|
|
109
|
+
{
|
|
110
|
+
"imports": {
|
|
111
|
+
"react": "https://esm.sh/react@19",
|
|
112
|
+
"react-dom": "https://esm.sh/react-dom@19",
|
|
113
|
+
"react-dom/client": "https://esm.sh/react-dom@19/client",
|
|
114
|
+
"react/jsx-runtime": "https://esm.sh/react@19/jsx-runtime"
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
</script>
|
|
118
|
+
<script src="https://widget.marketrix.ai/loader.js" mtx-id="..." mtx-key="..." mtx-api-host="..."></script>
|
|
119
|
+
```
|
|
109
120
|
|
|
110
|
-
|
|
121
|
+
---
|
|
111
122
|
|
|
112
|
-
|
|
123
|
+
## Programmatic API
|
|
113
124
|
|
|
114
|
-
|
|
125
|
+
All functions are named exports of `@marketrix.ai/widget` (also available on the default export).
|
|
115
126
|
|
|
116
|
-
|
|
127
|
+
```ts
|
|
128
|
+
import {
|
|
129
|
+
mountWidget,
|
|
130
|
+
initWidget,
|
|
131
|
+
unmountWidget,
|
|
132
|
+
updateMarketrixConfig,
|
|
133
|
+
getCurrentConfig,
|
|
134
|
+
startRecording,
|
|
135
|
+
stopRecording,
|
|
136
|
+
getRecordingState,
|
|
137
|
+
MarketrixWidget,
|
|
138
|
+
} from '@marketrix.ai/widget';
|
|
139
|
+
```
|
|
117
140
|
|
|
118
|
-
|
|
141
|
+
### `mountWidget(config): Promise<void>`
|
|
119
142
|
|
|
120
|
-
|
|
143
|
+
Auto-detects the mode (preview / production / dev) from `config` and initializes the widget. The recommended entry point for programmatic use.
|
|
121
144
|
|
|
122
|
-
|
|
145
|
+
```ts
|
|
146
|
+
// Production
|
|
147
|
+
await mountWidget({ mtxId, mtxKey, mtxApiHost });
|
|
123
148
|
|
|
124
|
-
|
|
149
|
+
// Dev
|
|
150
|
+
await mountWidget({ mtxApp: 123, mtxApiHost });
|
|
125
151
|
|
|
126
|
-
|
|
152
|
+
// Preview (no network — just renders the appearance)
|
|
153
|
+
await mountWidget({ settings: { widget_enabled: true, widget_position: 'bottom_right' /* ... */ } });
|
|
154
|
+
```
|
|
127
155
|
|
|
128
|
-
|
|
156
|
+
### `initWidget(config, container?): Promise<void>`
|
|
129
157
|
|
|
130
|
-
|
|
158
|
+
Lower-level production/dev initializer. Validates credentials, fetches settings from the API, mounts into a closed Shadow DOM, opens the event stream, and starts session recording once a chat id exists. Optionally mounts inside a specific `container`. Concurrent and duplicate calls are deduplicated; only one production widget runs per page.
|
|
131
159
|
|
|
132
|
-
|
|
160
|
+
```ts
|
|
161
|
+
await initWidget({ mtxId, mtxKey, mtxApiHost }, document.getElementById('my-container')!);
|
|
162
|
+
```
|
|
133
163
|
|
|
134
|
-
|
|
164
|
+
### `unmountWidget(): void`
|
|
135
165
|
|
|
136
|
-
|
|
137
|
-
interface MarketrixConfig {
|
|
138
|
-
mtxId?: string;
|
|
139
|
-
mtxKey?: string;
|
|
140
|
-
mtxApp?: number;
|
|
141
|
-
mtxAgent?: number;
|
|
142
|
-
mtxApiHost?: string;
|
|
143
|
-
userId?: number;
|
|
144
|
-
widget_position_offset?: { x?: number; y?: number };
|
|
145
|
-
widget_position_z_index?: number;
|
|
146
|
-
isPreviewMode?: boolean;
|
|
147
|
-
// All WidgetSettingsData fields (optional)
|
|
148
|
-
}
|
|
149
|
-
```
|
|
166
|
+
Destroys the widget, stops session recording, closes the stream connection, and cleans up all resources.
|
|
150
167
|
|
|
151
|
-
|
|
168
|
+
### `updateMarketrixConfig(partial): Promise<void>`
|
|
152
169
|
|
|
153
|
-
|
|
170
|
+
Merges `partial` into the current config and re-initializes (unmount + `initWidget`). Use to switch API host, credentials, etc. at runtime.
|
|
154
171
|
|
|
155
|
-
|
|
156
|
-
- npm
|
|
172
|
+
### `getCurrentConfig(): MarketrixConfig | null`
|
|
157
173
|
|
|
158
|
-
|
|
174
|
+
Returns the active configuration, or `null` if the widget isn't initialized.
|
|
159
175
|
|
|
160
|
-
|
|
161
|
-
git clone <repository-url>
|
|
162
|
-
cd widget
|
|
163
|
-
npm install
|
|
164
|
-
npm start # dev server on port 9001 (widget.marketrix.localhost)
|
|
165
|
-
npm run build # production build → dist/widget.mjs
|
|
166
|
-
```
|
|
176
|
+
### Session recording
|
|
167
177
|
|
|
168
|
-
|
|
178
|
+
The widget records user sessions (via rrweb) automatically once initialized. These helpers let you control it:
|
|
169
179
|
|
|
170
|
-
|
|
171
|
-
widget
|
|
172
|
-
|
|
173
|
-
│ ├── components/ # React components (base, blocks, chat, navigation, ui, views)
|
|
174
|
-
│ ├── design-system/ # design tokens + primitives
|
|
175
|
-
│ ├── context/ # WidgetContext provider
|
|
176
|
-
│ ├── hooks/ # Custom React hooks
|
|
177
|
-
│ ├── services/ # Core services (StreamClient, ChatService, SessionRecorder, ToolService, …)
|
|
178
|
-
│ ├── sdk/ # oRPC client + scoped contract mirror (contract.ts + contracts/*)
|
|
179
|
-
│ ├── types/ # TypeScript types
|
|
180
|
-
│ ├── utils/ # Utility functions (incl. bootstrap.tsx — closed Shadow DOM mount)
|
|
181
|
-
│ ├── constants/ # Config constants
|
|
182
|
-
│ ├── lib/ # shared helpers
|
|
183
|
-
│ └── index.tsx # Main entry point (public API)
|
|
184
|
-
├── public/loader.js # classic script-tag loader
|
|
185
|
-
├── vite.config.ts
|
|
186
|
-
├── tsconfig.json
|
|
187
|
-
└── package.json
|
|
188
|
-
```
|
|
180
|
+
- `startRecording(): Promise<void>` — start or resume recording. Throws if the widget wasn't initialized with `mtxApiHost` and an application (`mtxApp`).
|
|
181
|
+
- `stopRecording(): void` — pause recording without unmounting the widget.
|
|
182
|
+
- `getRecordingState(): boolean` — whether recording is currently active.
|
|
189
183
|
|
|
190
|
-
|
|
184
|
+
### `MarketrixWidget` — React component (preview)
|
|
191
185
|
|
|
192
|
-
|
|
186
|
+
For previewing appearance inside a React app (e.g. a settings/configuration screen). Renders into its own Shadow DOM and makes no network calls.
|
|
193
187
|
|
|
194
|
-
|
|
188
|
+
```tsx
|
|
189
|
+
import { MarketrixWidget } from '@marketrix.ai/widget';
|
|
195
190
|
|
|
196
|
-
|
|
197
|
-
|
|
191
|
+
function Preview() {
|
|
192
|
+
return (
|
|
193
|
+
<MarketrixWidget
|
|
194
|
+
settings={{ widget_enabled: true, widget_position: 'bottom_right' /* ...WidgetSettingsData */ }}
|
|
195
|
+
mtxApiHost='https://api.marketrix.ai'
|
|
196
|
+
/>
|
|
197
|
+
);
|
|
198
|
+
}
|
|
199
|
+
```
|
|
198
200
|
|
|
199
|
-
|
|
201
|
+
Props: `settings` (required), `container?`, `mtxId?`, `mtxKey?`, `mtxApiHost?`.
|
|
200
202
|
|
|
201
|
-
|
|
203
|
+
---
|
|
202
204
|
|
|
203
|
-
|
|
204
|
-
| --------- | -------------------- | ------------------------------------------------------------------------------- |
|
|
205
|
-
| `validate` | Push / PR to `dev` | type-check, lint, build, format:check, test:run, visual/a11y/bundle checks |
|
|
206
|
-
| `build` | Tag push (`v*`) | Build Docker image → `marketrix.azurecr.io/widget:{version}` (v-prefix stripped) |
|
|
207
|
-
| `publish` | Tag push (`v*`) | `npm publish @marketrix.ai/widget` (skipped if version already on registry) |
|
|
205
|
+
## Interaction modes
|
|
208
206
|
|
|
209
|
-
|
|
207
|
+
- **Tell** — the agent explains concepts and answers questions in chat.
|
|
208
|
+
- **Show** — the agent walks the user through a task step-by-step, highlighting the relevant elements on the page.
|
|
209
|
+
- **Do** — the agent performs the actions in the browser on the user's behalf.
|
|
210
210
|
|
|
211
|
-
|
|
211
|
+
---
|
|
212
212
|
|
|
213
|
-
|
|
214
|
-
npm run tag <version> # bumps package.json, refreshes lockfile, builds, commits, tags vX
|
|
215
|
-
git push origin HEAD && git push origin v<version>
|
|
216
|
-
```
|
|
213
|
+
## Exported types
|
|
217
214
|
|
|
218
|
-
|
|
215
|
+
TypeScript types are bundled with the package:
|
|
219
216
|
|
|
220
|
-
|
|
217
|
+
- `MarketrixConfig` — full config for `initWidget` / `updateMarketrixConfig` (`mtxId`, `mtxKey`, `mtxApp`, `mtxApiHost`, `userId`, `show_widget`, `use_screenshare`, plus all widget appearance settings, optional).
|
|
218
|
+
- `AddWidgetConfig` — discriminated config for `mountWidget` (production / dev / preview variants + common options).
|
|
219
|
+
- `MarketrixWidgetProps` — props for the `MarketrixWidget` component.
|
|
220
|
+
- `ChatMessage`, `WidgetState`, `InstructionType` (`'tell' | 'show' | 'do'`).
|
|
221
221
|
|
|
222
|
-
|
|
223
|
-
- `@rrweb/record` — session recording
|
|
224
|
-
- `@orpc/client` / `@orpc/contract` ^1 — type-safe API client (oRPC)
|
|
225
|
-
- `@base-ui/react` — UI primitives
|
|
226
|
-
- `zod` ^4 — schema validation
|
|
227
|
-
- `tailwind-merge` — class merging
|
|
222
|
+
---
|
|
228
223
|
|
|
229
|
-
|
|
224
|
+
## Requirements
|
|
230
225
|
|
|
231
|
-
-
|
|
232
|
-
-
|
|
233
|
-
-
|
|
234
|
-
- Vitest + Testing Library + axe (unit, integration, a11y)
|
|
235
|
-
- ESLint 10 + Prettier
|
|
236
|
-
- Terser for production minification
|
|
226
|
+
- **React 19** (`react`/`react-dom` `^19.2.3`) on the host page — peer dependency, not bundled. The script-tag loader provides it via importmap; npm consumers supply it from their app.
|
|
227
|
+
- A reachable Marketrix API host (`mtxApiHost` / `mtx-api-host`).
|
|
228
|
+
- Valid credentials for production (`mtxId` + `mtxKey`) or dev (`mtxApp`) mode.
|
|
237
229
|
|
|
238
|
-
|
|
230
|
+
---
|
|
239
231
|
|
|
240
232
|
## License
|
|
241
233
|
|
|
242
|
-
Apache License 2.0
|
|
234
|
+
Apache License 2.0 — see the `LICENSE` file.
|
|
243
235
|
|
|
244
236
|
## Support
|
|
245
237
|
|
|
246
|
-
|
|
247
|
-
in the repository.
|
|
248
|
-
|
|
249
|
-
[Back to top](#marketrix-widget)
|
|
238
|
+
Contact the Marketrix team or open an issue in the repository.
|
|
@@ -11,4 +11,3 @@ export interface AvatarProps extends Omit<React.ImgHTMLAttributes<HTMLImageEleme
|
|
|
11
11
|
}
|
|
12
12
|
export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLImageElement>>;
|
|
13
13
|
export {};
|
|
14
|
-
//# sourceMappingURL=Avatar.d.ts.map
|
|
@@ -14,4 +14,3 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
14
14
|
}
|
|
15
15
|
export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
16
16
|
export {};
|
|
17
|
-
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -14,4 +14,3 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
14
14
|
* Used for: recent conversation card, help about card, chat input container, etc.
|
|
15
15
|
*/
|
|
16
16
|
export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
17
|
-
//# sourceMappingURL=Card.d.ts.map
|
|
@@ -8,20 +8,19 @@ interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
8
8
|
children: React.ReactNode;
|
|
9
9
|
variant?: 'default' | 'confirm' | 'info';
|
|
10
10
|
}
|
|
11
|
-
export declare function Dialog({ children, defaultOpen, onOpenChange, open }: DialogProps): import("react
|
|
12
|
-
export declare function DialogTrigger({ children, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>): import("react
|
|
13
|
-
export declare function DialogContent({ children, className, onKeyDown, ...props }: DialogContentProps): import("react
|
|
11
|
+
export declare function Dialog({ children, defaultOpen, onOpenChange, open }: DialogProps): import("react").JSX.Element;
|
|
12
|
+
export declare function DialogTrigger({ children, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
|
|
13
|
+
export declare function DialogContent({ children, className, onKeyDown, ...props }: DialogContentProps): import("react").JSX.Element | null;
|
|
14
14
|
interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
|
|
15
15
|
variant?: 'default' | 'confirm' | 'info';
|
|
16
16
|
}
|
|
17
|
-
export declare function DialogTitle({ className, variant, ...props }: DialogTitleProps): import("react
|
|
17
|
+
export declare function DialogTitle({ className, variant, ...props }: DialogTitleProps): import("react").JSX.Element;
|
|
18
18
|
interface DialogDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
|
|
19
19
|
variant?: 'default' | 'confirm';
|
|
20
20
|
}
|
|
21
|
-
export declare function DialogDescription({ className, variant, ...props }: DialogDescriptionProps): import("react
|
|
21
|
+
export declare function DialogDescription({ className, variant, ...props }: DialogDescriptionProps): import("react").JSX.Element;
|
|
22
22
|
interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
23
23
|
variant?: 'default' | 'info';
|
|
24
24
|
}
|
|
25
|
-
export declare function DialogClose({ children, className, onClick, variant, ...props }: DialogCloseProps): import("react
|
|
25
|
+
export declare function DialogClose({ children, className, onClick, variant, ...props }: DialogCloseProps): import("react").JSX.Element;
|
|
26
26
|
export {};
|
|
27
|
-
//# sourceMappingURL=Dialog.d.ts.map
|
|
@@ -15,4 +15,3 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
|
|
|
15
15
|
}
|
|
16
16
|
export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
17
17
|
export {};
|
|
18
|
-
//# sourceMappingURL=IconButton.d.ts.map
|
|
@@ -10,9 +10,8 @@ interface MenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
10
10
|
interface MenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
11
11
|
children: React.ReactNode;
|
|
12
12
|
}
|
|
13
|
-
export declare function Menu({ children, defaultOpen, onOpenChange, open }: MenuProps): import("react
|
|
14
|
-
export declare function MenuTrigger({ children, className, onClick, ...props }: MenuTriggerProps): import("react
|
|
15
|
-
export declare function MenuContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react
|
|
16
|
-
export declare function MenuItem({ children, className, onClick, ...props }: MenuItemProps): import("react
|
|
13
|
+
export declare function Menu({ children, defaultOpen, onOpenChange, open }: MenuProps): import("react").JSX.Element;
|
|
14
|
+
export declare function MenuTrigger({ children, className, onClick, ...props }: MenuTriggerProps): import("react").JSX.Element;
|
|
15
|
+
export declare function MenuContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element | null;
|
|
16
|
+
export declare function MenuItem({ children, className, onClick, ...props }: MenuItemProps): import("react").JSX.Element;
|
|
17
17
|
export {};
|
|
18
|
-
//# sourceMappingURL=Menu.d.ts.map
|
|
@@ -13,4 +13,3 @@ export interface StackProps extends LayoutProps, Omit<React.HTMLAttributes<HTMLD
|
|
|
13
13
|
children?: ReactNode;
|
|
14
14
|
}
|
|
15
15
|
export declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
16
|
-
//# sourceMappingURL=Stack.d.ts.map
|
|
@@ -16,4 +16,3 @@ export interface SurfaceProps extends LayoutProps, Omit<React.HTMLAttributes<HTM
|
|
|
16
16
|
export declare const backgroundClasses: Record<SurfaceBackground, string>;
|
|
17
17
|
export declare const paddingPresetClasses: Record<SurfacePadding, string>;
|
|
18
18
|
export declare const Surface: import("react").ForwardRefExoticComponent<SurfaceProps & import("react").RefAttributes<HTMLElement>>;
|
|
19
|
-
//# sourceMappingURL=Surface.d.ts.map
|
|
@@ -7,4 +7,3 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
|
|
|
7
7
|
}
|
|
8
8
|
export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
9
9
|
export {};
|
|
10
|
-
//# sourceMappingURL=Textarea.d.ts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import type { IconName } from '../base/icons';
|
|
3
3
|
export interface TabBarProps {
|
|
4
4
|
tabs: {
|
|
5
5
|
id: string;
|
|
@@ -10,4 +10,3 @@ export interface TabBarProps {
|
|
|
10
10
|
onChange: (id: string) => void;
|
|
11
11
|
}
|
|
12
12
|
export declare const TabBar: React.FC<TabBarProps>;
|
|
13
|
-
//# sourceMappingURL=TabBar.d.ts.map
|