@personaliai/react-widget 0.1.1 → 0.2.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/README.md +61 -73
- package/dist/index.cjs +68 -98023
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +81 -25
- package/dist/index.js +52 -71935
- package/dist/index.js.map +1 -1
- package/package.json +34 -22
- package/dist/chunk-PR4QN5HX.js +0 -43
- package/dist/chunk-PR4QN5HX.js.map +0 -1
- package/dist/emoji-picker-react.esm-JCK7JWXK.js +0 -26071
- package/dist/emoji-picker-react.esm-JCK7JWXK.js.map +0 -1
- package/dist/index.d.cts +0 -28
- package/dist/styles.css +0 -259
- package/src/ChatWidgetCore.tsx +0 -1919
- package/src/attach-menu.tsx +0 -60
- package/src/color-contrast.ts +0 -186
- package/src/index.ts +0 -1
- package/src/quick-emoji-picker.tsx +0 -75
- package/src/safe-markdown-link.tsx +0 -44
- package/src/voice-call-widget.tsx +0 -564
- package/src/widget-presets.css +0 -259
- package/src/widget-style.ts +0 -88
package/README.md
CHANGED
|
@@ -1,97 +1,85 @@
|
|
|
1
1
|
# @personaliai/react-widget
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
Chatty API directly, no iframe involved. Same UI and behavior as the
|
|
5
|
-
hosted `/embed/[botId]` widget (this package's `ChattyWidget` component
|
|
6
|
-
*is* that same component, extracted).
|
|
3
|
+
The official React SDK for [Chatty](https://chatty.personaliai.com) AI chatbots.
|
|
7
4
|
|
|
8
|
-
|
|
5
|
+
Loads the Chatty chat assistant into your React and Next.js applications using the lightweight **script method** inside an isolated Shadow DOM container. Zero CSS conflicts, 100% sharp typography, and under 2 kB bundle footprint.
|
|
9
6
|
|
|
10
|
-
|
|
11
|
-
loads the chat panel in an iframe. For a customer site on its own domain,
|
|
12
|
-
that's a **cross-origin** iframe, which Chrome's Site Isolation gives its
|
|
13
|
-
own separate rendering surface — this measurably softens text rendering
|
|
14
|
-
during/after browser zoom. For a React app that already has its own build
|
|
15
|
-
step, that iframe boundary is unnecessary: this package lets the same chat
|
|
16
|
-
UI run directly in the host page's own DOM instead, avoiding the cross-origin
|
|
17
|
-
surface entirely.
|
|
7
|
+
---
|
|
18
8
|
|
|
19
|
-
|
|
20
|
-
static HTML, Squarespace, etc.) — those still need a `<script>` tag, and
|
|
21
|
-
that's still iframe-based. This package is for teams building their own
|
|
22
|
-
React app who can `npm install` a component instead.
|
|
23
|
-
|
|
24
|
-
## Install
|
|
9
|
+
## Installation
|
|
25
10
|
|
|
26
11
|
```bash
|
|
27
12
|
npm install @personaliai/react-widget
|
|
13
|
+
# or
|
|
14
|
+
yarn add @personaliai/react-widget
|
|
15
|
+
# or
|
|
16
|
+
pnpm add @personaliai/react-widget
|
|
28
17
|
```
|
|
29
18
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Quickstart
|
|
33
22
|
|
|
34
|
-
|
|
23
|
+
Add the `<ChattyWidget />` component to your root layout or main application view:
|
|
35
24
|
|
|
36
|
-
```tsx
|
|
25
|
+
```tsx title="app/layout.tsx (Next.js App Router)"
|
|
37
26
|
import { ChattyWidget } from "@personaliai/react-widget";
|
|
38
|
-
import "@personaliai/react-widget/styles.css";
|
|
39
|
-
// Only needed if you use bot replies with math notation — same as the
|
|
40
|
-
// hosted embed, this isn't bundled in since it's ~1MB of embedded fonts.
|
|
41
|
-
import "katex/dist/katex.min.css";
|
|
42
27
|
|
|
43
|
-
function
|
|
28
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
44
29
|
return (
|
|
45
|
-
<
|
|
46
|
-
<
|
|
47
|
-
|
|
30
|
+
<html lang="en">
|
|
31
|
+
<body>
|
|
32
|
+
{children}
|
|
33
|
+
<ChattyWidget
|
|
34
|
+
botId="YOUR_BOT_UUID"
|
|
35
|
+
position="right"
|
|
36
|
+
color="#4F46E5"
|
|
37
|
+
/>
|
|
38
|
+
</body>
|
|
39
|
+
</html>
|
|
48
40
|
);
|
|
49
41
|
}
|
|
50
42
|
```
|
|
51
43
|
|
|
52
|
-
|
|
53
|
-
its container — it doesn't manage a floating launcher button, open/close
|
|
54
|
-
state, unread badge, or teaser message the way `widget.js` does. Wire your
|
|
55
|
-
own launcher button around it (show/hide the container, track unread via
|
|
56
|
-
the `onAssistantMessage` prop) the way this repo's own `EmbedClient.tsx`
|
|
57
|
-
wires it for the iframe route, or the way `widget.js` wires it for the
|
|
58
|
-
Shadow DOM mount in that (currently reverted) architecture.
|
|
44
|
+
---
|
|
59
45
|
|
|
60
|
-
##
|
|
46
|
+
## Programmatic Control with `useChatty()`
|
|
61
47
|
|
|
62
|
-
|
|
63
|
-
it mirrors the bot's dashboard settings 1:1: `botId` (required),
|
|
64
|
-
`originToken`, `paramColor`, `paramStyle`, `paramName`, `paramWelcome`,
|
|
65
|
-
`paramAvatarIcon`, `paramAvatarUrl`, `paramLogoUrl`, `paramLogoBgColor`,
|
|
66
|
-
`paramShowSenderTag`, `paramCsatEnabled`, `paramColorScheme`, plus the
|
|
67
|
-
optional bridge props (`onWidgetReady`, `onWidgetClose`,
|
|
68
|
-
`onAssistantMessage`, `onRequestNotificationPermission`,
|
|
69
|
-
`onTriggerNotification`, `forceFullscreen`, `notificationGranted`) for
|
|
70
|
-
wiring your own launcher chrome around it.
|
|
71
|
-
|
|
72
|
-
Only `botId` is required — everything else defaults to the bot's own
|
|
73
|
-
saved dashboard settings, fetched live from the Chatty API on mount.
|
|
74
|
-
|
|
75
|
-
## Origin verification
|
|
76
|
-
|
|
77
|
-
`originToken` is optional. Passing `null` (as in the example above) means
|
|
78
|
-
every chat call falls into the backend's stricter *unverified-origin*
|
|
79
|
-
rate-limit tier — never a hard block, just a lower message-per-minute
|
|
80
|
-
ceiling (see `main.py`'s `_widget_rate_limit_or_429`). The hosted
|
|
81
|
-
`widget.js`/iframe path gets a verified token via a server-side Referer
|
|
82
|
-
exchange that only a real iframe navigation can produce; this package runs
|
|
83
|
-
directly in your own page with no equivalent mechanism, so there is
|
|
84
|
-
currently no way to mint one from here. If your usage needs the higher
|
|
85
|
-
rate-limit tier, get in touch about a proper API-key-based verification
|
|
86
|
-
path for direct SDK usage instead.
|
|
87
|
-
|
|
88
|
-
## Building this package
|
|
48
|
+
Control the chat drawer from custom buttons or navbar triggers:
|
|
89
49
|
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
50
|
+
```tsx title="components/HelpButton.tsx"
|
|
51
|
+
"use client";
|
|
52
|
+
|
|
53
|
+
import { useChatty } from "@personaliai/react-widget";
|
|
54
|
+
|
|
55
|
+
export function HelpButton() {
|
|
56
|
+
const { open, close, toggle } = useChatty();
|
|
57
|
+
|
|
58
|
+
return (
|
|
59
|
+
<button onClick={open} className="btn-help">
|
|
60
|
+
💬 Chat with Support
|
|
61
|
+
</button>
|
|
62
|
+
);
|
|
63
|
+
}
|
|
94
64
|
```
|
|
95
65
|
|
|
96
|
-
|
|
97
|
-
|
|
66
|
+
---
|
|
67
|
+
|
|
68
|
+
## Props
|
|
69
|
+
|
|
70
|
+
| Prop | Type | Default | Description |
|
|
71
|
+
| :--- | :--- | :--- | :--- |
|
|
72
|
+
| `botId` | `string` | **Required** | Your bot's unique UUID from the Chatty dashboard. |
|
|
73
|
+
| `position` | `"right" \| "left"` | `"right"` | Corner anchor position for the launcher trigger button. |
|
|
74
|
+
| `color` | `string` | Dashboard color | Hex color override for the launcher trigger button. |
|
|
75
|
+
| `style` | `string` | Dashboard style | Visual style preset override (`"minimal"`, `"playful"`, etc.). |
|
|
76
|
+
| `mobileFullscreen` | `boolean` | `true` | When true, expands full-screen on mobile viewports. |
|
|
77
|
+
| `teaser` | `boolean` | `true` | Whether to display the greeting teaser bubble after delay. |
|
|
78
|
+
| `sound` | `boolean` | `true` | Whether to play sound chimes on incoming AI replies. |
|
|
79
|
+
| `widgetUrl` | `string` | `"https://chatty.personaliai.com/widget.js"` | Custom widget script URL (for self-hosting). |
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## License
|
|
84
|
+
|
|
85
|
+
MIT
|