@helpai/elements 1.9.0 → 1.10.0

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/llms.txt CHANGED
@@ -1,36 +1,37 @@
1
1
  # Help AI Elements
2
2
 
3
- > Help AI's AI chat widget for any website: an AI agent that answers visitors from the customer's own help content, can hand the chat to a person, and shows Help articles and News. Install it with one script tag, the `<web-ai-chat>` element, the npm API or the React kit. These docs match @helpai/elements@1.9.0.
3
+ > Help AI's AI chat widget for any website: an AI agent that answers visitors from the customer's own help content, can hand the chat to a person, and shows Help articles and News. Install it with one script tag, the `<web-ai-chat>` element, the npm API or the React kit. These docs match @helpai/elements@1.10.0.
4
4
 
5
5
  What a coding agent needs to install it right the first time:
6
6
 
7
7
  - Two values come from the deployment's Install page in the Help AI dashboard: the public key (`agent_pk_…`) and the AI agent deployment id (a UUID). Both belong in browser code. The deployment's secret key never does.
8
- - Plain HTML, WordPress or any CMS: `<script src="https://cdn.help.ai/sdk/js/elements/1.9.0/elements.js" data-public-key="agent_pk_…" data-ai-agent-deployment-id="…" defer></script>`.
8
+ - Plain HTML, WordPress or any CMS: `<script src="https://cdn.help.ai/sdk/js/elements/1.10.0/elements.js" data-public-key="agent_pk_…" data-ai-agent-deployment-id="…" defer></script>`.
9
9
  - React, Next.js, Remix: install `@helpai/elements` and render `<HelpAI publicKey="…" aiAgentDeploymentId="…" />` from `@helpai/elements/react` once, in the root layout. `useHelpAI()` in any component returns `{ state, ask, open, close, reset }`. It is server-render safe; import everything from `@helpai/elements/react`.
10
10
  - Vue, Svelte, Angular and other bundlers: `import '@helpai/elements/web-component'`, then `<web-ai-chat public-key="…" ai-agent-deployment-id="…"></web-ai-chat>`. JSX typings: `@helpai/elements/jsx/react`, `/jsx/vue`, `/jsx/svelte`.
11
11
  - Site buttons need no JavaScript: `data-helpai-ask="Which plan fits a team of 10?"` puts the question in the chat, `data-helpai-open="help"` opens a tab (`home`, `chats`, `help`, `news`). In code, `ask(text)` fills the composer and sends only with `{ send: true }`.
12
+ - Logged-in users: your server signs a JWT with the deployment's secret key (HS256; `sub` = your user id, `exp`; optional `name`, `email`), and the widget gets a function that fetches it: `userToken` at init, `login(fn)` after sign-in, `reset()` at sign-out. Their chats then follow them to any device. Never sign tokens in the browser.
12
13
  - `theme: 'host'` (`theme="host"`) follows the site's own light/dark switch.
13
14
  - Pin the exact version in production, as above; `latest` changes under you.
14
15
  - It works when the launcher shows in the bottom corner and `HelpAI.ready()` (or `chat.ready`) resolves.
15
16
 
16
17
  ## Docs
17
18
 
18
- - [Quickstart](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/quickstart.md): credentials, the install paths and a first check, in five minutes
19
- - [Installation](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/installation.md): every install path in depth: script tag, async loader, npm, web component, CDN URLs and version pinning
20
- - [Frameworks](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/frameworks.md): the React kit (`<HelpAI />`, `useHelpAI()`), Next.js, Remix, Vue, Nuxt, Svelte, Astro, Angular, WordPress, Shopify, Webflow
21
- - [Configuration](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md): every option by group, with examples
22
- - [Option reference](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/options.md): the table of every option, generated from the schemas; authoritative
23
- - [API reference](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/api-reference.md): exports, instance methods (`ask`, `open`, `state`, `ready`, `reset`, …), the global API, no-script triggers, deep links, JSX typings
24
- - [Events and hooks](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/events-and-hooks.md): every event and its payload, `on()` and `hook()`
25
- - [Theming](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/theming.md): colors, shapes, fonts, launcher styles, `theme: "host"` and `::part()` styling
26
- - [Recipes](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md): copy-paste solutions for common integrations
27
- - [Analytics](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/analytics.md): sending widget activity to Google Analytics, Segment, PostHog and other trackers
28
- - [Security and privacy](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/security-privacy.md): isolation, CSP, what the widget stores and sends
29
- - [Browser support](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/browser-support.md): supported browsers and fallbacks
30
- - [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/troubleshooting.md): an install that does not show, connect or answer
31
- - [FAQ](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/faq.md): short answers to common questions
32
- - [Overview](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/README.md): the whole SDK on one page
19
+ - [Quickstart](https://cdn.help.ai/sdk/js/elements/1.10.0/docs/quickstart.md): credentials, the install paths and a first check, in five minutes
20
+ - [Installation](https://cdn.help.ai/sdk/js/elements/1.10.0/docs/installation.md): every install path in depth: script tag, async loader, npm, web component, CDN URLs and version pinning
21
+ - [Frameworks](https://cdn.help.ai/sdk/js/elements/1.10.0/docs/frameworks.md): the React kit (`<HelpAI />`, `useHelpAI()`), Next.js, Remix, Vue, Nuxt, Svelte, Astro, Angular, WordPress, Shopify, Webflow
22
+ - [Configuration](https://cdn.help.ai/sdk/js/elements/1.10.0/docs/configuration.md): every option by group, with examples
23
+ - [Option reference](https://cdn.help.ai/sdk/js/elements/1.10.0/docs/options.md): the table of every option, generated from the schemas; authoritative
24
+ - [API reference](https://cdn.help.ai/sdk/js/elements/1.10.0/docs/api-reference.md): exports, instance methods (`ask`, `open`, `state`, `ready`, `reset`, …), the global API, no-script triggers, deep links, JSX typings
25
+ - [Events and hooks](https://cdn.help.ai/sdk/js/elements/1.10.0/docs/events-and-hooks.md): every event and its payload, `on()` and `hook()`
26
+ - [Theming](https://cdn.help.ai/sdk/js/elements/1.10.0/docs/theming.md): colors, shapes, fonts, launcher styles, `theme: "host"` and `::part()` styling
27
+ - [Recipes](https://cdn.help.ai/sdk/js/elements/1.10.0/docs/recipes.md): copy-paste solutions for common integrations
28
+ - [Analytics](https://cdn.help.ai/sdk/js/elements/1.10.0/docs/analytics.md): sending widget activity to Google Analytics, Segment, PostHog and other trackers
29
+ - [Security and privacy](https://cdn.help.ai/sdk/js/elements/1.10.0/docs/security-privacy.md): isolation, CSP, what the widget stores and sends
30
+ - [Browser support](https://cdn.help.ai/sdk/js/elements/1.10.0/docs/browser-support.md): supported browsers and fallbacks
31
+ - [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.10.0/docs/troubleshooting.md): an install that does not show, connect or answer
32
+ - [FAQ](https://cdn.help.ai/sdk/js/elements/1.10.0/docs/faq.md): short answers to common questions
33
+ - [Overview](https://cdn.help.ai/sdk/js/elements/1.10.0/docs/README.md): the whole SDK on one page
33
34
 
34
35
  ## Optional
35
36
 
36
- - [Every doc in one file](https://cdn.help.ai/sdk/js/elements/1.9.0/llms-full.txt): the docs above, concatenated
37
+ - [Every doc in one file](https://cdn.help.ai/sdk/js/elements/1.10.0/llms-full.txt): the docs above, concatenated
package/package.json CHANGED
@@ -117,5 +117,5 @@
117
117
  ],
118
118
  "type": "module",
119
119
  "types": "./index.d.ts",
120
- "version": "1.9.0"
120
+ "version": "1.10.0"
121
121
  }
package/react.d.ts CHANGED
@@ -899,6 +899,8 @@ interface ResolvedTracking {
899
899
  * alongside at the top level — they're function / DOM types that can't be
900
900
  * serialised on the wire.
901
901
  */
902
+ /** A signed user token, or a function that returns a fresh one (see {@link ChatWidgetOptions.userToken}). */
903
+ type UserTokenSource = string | (() => string | Promise<string>);
902
904
  interface ChatWidgetOptions {
903
905
  /**
904
906
  * Stable identifier for this widget instance. Use when mounting more
@@ -974,6 +976,14 @@ interface ChatWidgetOptions {
974
976
  * interface (`get` / `set` / `remove` / `clear`).
975
977
  */
976
978
  storage?: ClientStorage;
979
+ /**
980
+ * Proves who the logged-in visitor is: a JWT your server signs (HS256) with the deployment's secret key, carrying
981
+ * `sub` (your user id) and `exp`, optionally `name` and `email`. A function is called when a token is first
982
+ * needed and again when the server rejects the current one as expired, so return a fresh token from it. Their
983
+ * conversations then follow them to any device; `chat.login(token)` sets it after sign-in, `chat.reset()` on
984
+ * sign-out. Sent only to the agent API, as `x-user-token`.
985
+ */
986
+ userToken?: UserTokenSource;
977
987
  onMessage?: (msg: {
978
988
  role: string;
979
989
  text: string;
@@ -1084,6 +1094,7 @@ interface ResolvedOptions {
1084
1094
  tracking: ResolvedTracking;
1085
1095
  /** Resolved storage adapter — defaults to `LocalStorageAdapter`. */
1086
1096
  storage: ClientStorage;
1097
+ userToken?: UserTokenSource;
1087
1098
  onMessage?: ChatWidgetOptions['onMessage'];
1088
1099
  onOpen?: ChatWidgetOptions['onOpen'];
1089
1100
  onClose?: ChatWidgetOptions['onClose'];
@@ -3384,6 +3395,18 @@ export interface ChatWidgetInstance {
3384
3395
  * Listeners added with `on()` stay.
3385
3396
  */
3386
3397
  reset: () => void;
3398
+ /**
3399
+ * Sign the visitor in as your logged-in user, after they log in to your site: `userToken` is a JWT your server
3400
+ * signs with the deployment's secret key (`sub`, `exp`; optional `name`, `email`), or a function that returns a
3401
+ * fresh one. The widget reconnects as that user: their earlier chats on this browser move to them, and their
3402
+ * conversations follow them to any device. Call `reset()` when they log out.
3403
+ *
3404
+ * @example
3405
+ * ```ts
3406
+ * chat.login(async () => (await fetch('/api/help-ai-token')).text());
3407
+ * ```
3408
+ */
3409
+ login: (userToken: UserTokenSource) => void;
3387
3410
  /**
3388
3411
  * Subscribe to a lifecycle event. Returns an `off` function. See
3389
3412
  * {@link EventMap} for the full set + payload shapes — currently
@@ -3549,4 +3572,4 @@ export interface HelpAIControls {
3549
3572
  * the widget has mounted does nothing; `state.ready` turns true once it takes them.
3550
3573
  */
3551
3574
  export declare function useHelpAI(widgetId?: string): HelpAIControls;
3552
- export type { AskOptions, Asset, BlocksConfig, ChatWidgetOptions, ConnectionConfig, ConnectionConfigPartial, EventMap, EventName, HandshakeResponse, HookListener, Link, LogEntry, LogLevel, OpenTarget, ResolvedOptions, ServerConfig, SiteConfig, WidgetConfig, WidgetConfigPartial, WidgetSettings, WidgetSettingsPartial, WidgetState };
3575
+ export type { AskOptions, Asset, BlocksConfig, ChatWidgetOptions, ConnectionConfig, ConnectionConfigPartial, EventMap, EventName, HandshakeResponse, HookListener, Link, LogEntry, LogLevel, OpenTarget, ResolvedOptions, ServerConfig, SiteConfig, UserTokenSource, WidgetConfig, WidgetConfigPartial, WidgetSettings, WidgetSettingsPartial, WidgetState };