azesavantai-widget 1.0.1

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.
Files changed (12) hide show
  1. package/README.md +140 -0
  2. package/dist/agent-ambassador-blink.png +0 -0
  3. package/dist/agent-ambassador.png +0 -0
  4. package/dist/agent-avatar.png +0 -0
  5. package/dist/agent-specialist-blink.png +0 -0
  6. package/dist/agent-specialist.png +0 -0
  7. package/dist/customer.html +47 -0
  8. package/dist/fr.html +46 -0
  9. package/dist/index.html +47 -0
  10. package/dist/test.html +55 -0
  11. package/dist/widget.js +473 -0
  12. package/package.json +36 -0
package/README.md ADDED
@@ -0,0 +1,140 @@
1
+ # AzeSavantAI embeddable widget
2
+
3
+ Standalone web component. Customers never see LiveKit, tokens, or API secrets.
4
+
5
+ Recommended install is one script from the API host plus one tag:
6
+
7
+ ```html
8
+ <script src="https://YOUR_API_HOST/widget.js" defer></script>
9
+ <azesavant-ai agent-id="agent_test_123"></azesavant-ai>
10
+ ```
11
+
12
+ Public attributes:
13
+
14
+ | Attribute | Required | Example |
15
+ | --- | --- | --- |
16
+ | `agent-id` | yes | `agent_test_123` |
17
+ | `title` | no | `Transend AI Team` |
18
+ | `theme-color` | no | `#007A58` |
19
+ | `position` | no | `right` or `left` |
20
+ | `persona` | no | `sales` or `order-details` |
21
+ | `language` | no | `en` (default) or `fr` |
22
+ | `avatar-url` | no | `https://apiagent.transend.ca/agent-ambassador.png` |
23
+
24
+ Do not expose `livekit-url`, `livekit-token`, `api-secret`, or `api-base-url`. The widget asks `POST /v1/sessions` on our API. The API mints a short-lived LiveKit token.
25
+
26
+ Older `data-agent-id` / `data-pos` snippets still work.
27
+
28
+ Full widget → API → LiveKit → agent flow: [../../widget-voice-flow.md](../../widget-voice-flow.md).
29
+
30
+ ## Run locally
31
+
32
+ Use the Vite **dev** server so the host HTML is served at `/`:
33
+
34
+ ```bash
35
+ cd apps/widget
36
+ npm install
37
+ npm run dev
38
+ ```
39
+
40
+ Open `http://localhost:4173`. You should see the floating widget on a fake customer page.
41
+
42
+ Also open `http://localhost:4173/customer.html`.
43
+
44
+ `npm run preview` serves `dist/` after `npm run build`.
45
+
46
+ ## Build
47
+
48
+ ```bash
49
+ npm run typecheck
50
+ npm run build
51
+ ```
52
+
53
+ That writes:
54
+
55
+ - `apps/widget/dist/widget.js` (npm + UNPKG + CDN file)
56
+ - `public/widget.js` (served by Next.js at `/widget.js`)
57
+ - `public/widget/v1/widget.js`
58
+ - `public/widget/v1.0.0/widget.js`
59
+
60
+ Serve `apps/widget/test.html` over HTTP after a build (not as a `file://` page):
61
+
62
+ ```bash
63
+ npx --yes serve -l 4174 apps/widget
64
+ ```
65
+
66
+ Then open `http://localhost:4174/test.html`.
67
+
68
+ ## Customer install
69
+
70
+ ### Official CDN
71
+
72
+ ```html
73
+ <script src="https://YOUR_API_HOST/widget.js" defer></script>
74
+ <azesavant-ai
75
+ agent-id="agent_test_123"
76
+ persona="order-details"
77
+ title="Transend AI Team"
78
+ theme-color="#007A58"
79
+ position="right"
80
+ language="en">
81
+ </azesavant-ai>
82
+ ```
83
+
84
+ Locally, use `http://localhost:4173/widget.js` or `http://localhost:3000/widget.js` after `npm run widget:build`.
85
+
86
+ ### npm
87
+
88
+ ```bash
89
+ npm install azesavantai-widget
90
+ ```
91
+
92
+ ```js
93
+ import "azesavantai-widget";
94
+ ```
95
+
96
+ ```html
97
+ <azesavant-ai agent-id="agent_test_123"></azesavant-ai>
98
+ ```
99
+
100
+ ### UNPKG (pinned)
101
+
102
+ ```html
103
+ <script
104
+ src="https://unpkg.com/azesavantai-widget@1.0.0/dist/widget.js"
105
+ defer
106
+ ></script>
107
+ <azesavant-ai agent-id="agent_test_123"></azesavant-ai>
108
+ ```
109
+
110
+ UNPKG and npm call `POST /v1/sessions` on `VITE_API_BASE_URL` from the widget build. They never talk to LiveKit with our API secret.
111
+
112
+ ## Publish (when ready)
113
+
114
+ Do not publish secrets. `dist/widget.js` must not contain `LIVEKIT_API_SECRET`.
115
+
116
+ ```bash
117
+ cd apps/widget
118
+ npm run typecheck
119
+ npm run build
120
+ npm pack --dry-run
121
+ npm publish --access public
122
+ ```
123
+
124
+ Versioning:
125
+
126
+ - `patch` — bug fixes
127
+ - `minor` — backward-compatible features
128
+ - `major` — breaking `<azesavant-ai>` API changes
129
+
130
+ Keep `/widget.js` as the stable URL. Pin `/widget/v1.0.0/widget.js` when a customer needs a frozen build.
131
+
132
+ ## Current behavior
133
+
134
+ - Custom element: `<azesavant-ai>`
135
+ - Shadow DOM styles
136
+ - Session: `POST /v1/sessions` when `VITE_MOCK_SESSION=false` (alias `POST /v1/session`)
137
+ - API origin: `VITE_API_BASE_URL` (local Vite: `http://localhost:3000`; production `widget:build`: the public Next.js host). If that is unset in a production build, the widget uses the origin of `widget.js`.
138
+ - Does **not** call `/api/chat`
139
+ - Does **not** send OpenAI or LiveKit secrets to the browser
140
+ - Connects to LiveKit with the short-lived token from the API
package/dist/agent-ambassador-blink.png ADDED
Binary file
package/dist/agent-ambassador.png ADDED
Binary file
package/dist/agent-avatar.png ADDED
Binary file
package/dist/agent-specialist-blink.png ADDED
Binary file
package/dist/agent-specialist.png ADDED
Binary file
package/dist/customer.html ADDED
@@ -0,0 +1,47 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Separate customer website</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ font-family: Arial, sans-serif;
11
+ padding: 32px;
12
+ }
13
+ pre {
14
+ overflow: auto;
15
+ padding: 16px;
16
+ background: #111;
17
+ color: #fafafa;
18
+ border-radius: 8px;
19
+ }
20
+ button {
21
+ all: unset;
22
+ }
23
+ </style>
24
+ </head>
25
+ <body>
26
+ <h1>Fake customer website</h1>
27
+ <p>Official install: one script plus <code>&lt;azesavant-ai&gt;</code>.</p>
28
+ <pre>&lt;script src="/widget.js" defer&gt;&lt;/script&gt;
29
+
30
+ &lt;azesavant-ai
31
+ agent-id="agent_test_123"
32
+ title="Transend AI Team"
33
+ theme-color="#007A58"
34
+ position="right"
35
+ avatar-url="https://apiagent.transend.ca/agent-ambassador.png"&gt;
36
+ &lt;/azesavant-ai&gt;</pre>
37
+
38
+ <script src="/widget.js" defer></script>
39
+ <azesavant-ai
40
+ agent-id="agent_test_123"
41
+ title="Acme Support"
42
+ theme-color="#1a73e8"
43
+ position="left"
44
+ avatar-url="https://apiagent.transend.ca/agent-ambassador.png">
45
+ </azesavant-ai>
46
+ </body>
47
+ </html>
package/dist/fr.html ADDED
@@ -0,0 +1,46 @@
1
+ <!doctype html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>AzeSavantAI widget — français</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ min-height: 100vh;
11
+ font-family: Georgia, serif;
12
+ background: #f4efe6;
13
+ color: #1c1917;
14
+ }
15
+
16
+ button {
17
+ all: unset;
18
+ }
19
+
20
+ .test-note {
21
+ padding: 0 32px 32px;
22
+ max-width: 40rem;
23
+ line-height: 1.5;
24
+ }
25
+
26
+ .test-note a {
27
+ color: #007a58;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body>
32
+ <h1 style="padding: 32px 32px 12px; font-size: 28px;">Azesavant Widget Test — Français</h1>
33
+ <p class="test-note">
34
+ Cette page utilise <code>language="fr"</code>. Les deux visages parlent français.
35
+ Retour à la <a href="/">page anglaise</a>. Même <code>agent-id</code>.
36
+ </p>
37
+ <script src="/widget.js" defer></script>
38
+ <azesavant-ai
39
+ agent-id="agent_test_123"
40
+ title="Équipe Transend AI"
41
+ theme-color="#007A58"
42
+ position="right"
43
+ language="fr"
44
+ ></azesavant-ai>
45
+ </body>
46
+ </html>
package/dist/index.html ADDED
@@ -0,0 +1,47 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>AzeSavantAI widget embed</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ min-height: 100vh;
11
+ font-family: Georgia, serif;
12
+ background: #f4efe6;
13
+ color: #1c1917;
14
+ }
15
+
16
+ button {
17
+ all: unset;
18
+ }
19
+
20
+ .test-note {
21
+ padding: 0 32px 32px;
22
+ max-width: 40rem;
23
+ line-height: 1.5;
24
+ }
25
+
26
+ .test-note a {
27
+ color: #007a58;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body>
32
+ <h1 style="padding: 32px 32px 12px; font-size: 28px;">Azesavant Widget Test — English</h1>
33
+ <p class="test-note">
34
+ This page uses <code>language="en"</code>. Both faces speak English.
35
+ Open the <a href="/fr.html">French test page</a> for <code>language="fr"</code>.
36
+ Same <code>agent-id</code> on both pages.
37
+ </p>
38
+ <script src="/widget.js" defer></script>
39
+ <azesavant-ai
40
+ agent-id="agent_test_123"
41
+ title="Transend AI Team"
42
+ theme-color="#007A58"
43
+ position="right"
44
+ language="en"
45
+ ></azesavant-ai>
46
+ </body>
47
+ </html>
package/dist/test.html ADDED
@@ -0,0 +1,55 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>AzeSavantAI embed test</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ min-height: 100vh;
11
+ font-family: Arial, sans-serif;
12
+ padding: 32px;
13
+ background: #f8fafc;
14
+ color: #0f172a;
15
+ }
16
+
17
+ /* Host CSS that must not break the Shadow DOM widget. */
18
+ button {
19
+ all: unset;
20
+ }
21
+
22
+ * {
23
+ box-sizing: border-box;
24
+ }
25
+
26
+ pre {
27
+ overflow: auto;
28
+ padding: 16px;
29
+ background: #111;
30
+ color: #fafafa;
31
+ border-radius: 8px;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body>
36
+ <h1>Customer embed test</h1>
37
+ <p>Serve this folder over HTTP. Keep <code>npm run dev</code> on port 3000 so Let’s Talk can call <code>/v1/sessions</code>. Avatars load from <code>dist/</code>.</p>
38
+ <pre>&lt;script src="/widget.js" defer&gt;&lt;/script&gt;
39
+
40
+ &lt;azesavant-ai
41
+ agent-id="agent_test_123"
42
+ title="Transend AI Team"
43
+ theme-color="#007A58"
44
+ position="right"&gt;
45
+ &lt;/azesavant-ai&gt;</pre>
46
+
47
+ <script src="/widget.js" defer></script>
48
+ <azesavant-ai
49
+ agent-id="agent_test_123"
50
+ title="Transend AI Team"
51
+ theme-color="#007A58"
52
+ position="right"
53
+ ></azesavant-ai>
54
+ </body>
55
+ </html>