@cossistant/react 0.0.3 → 0.0.4
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 +74 -0
- package/package.json +4 -2
package/README.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# Cossistant React SDK
|
|
2
|
+
|
|
3
|
+
Build fully featured customer support experiences in React with the official `@cossistant/react` package. The SDK wraps the REST and WebSocket APIs, comes with a prebuilt widget, hooks, and UI primitives so you can ship your support quickly and customize later.
|
|
4
|
+
|
|
5
|
+
> 📚 **New to Cossistant?** Follow the [Quickstart guide](https://cossistant/docs/quickstart) in our official documentation.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
Pick the command that matches your package manager:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
bun add @cossistant/react
|
|
13
|
+
# or
|
|
14
|
+
npm install @cossistant/react
|
|
15
|
+
# or
|
|
16
|
+
yarn add @cossistant/react
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Render the widget
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { SupportProvider, Support } from "@cossistant/react";
|
|
23
|
+
|
|
24
|
+
export function App() {
|
|
25
|
+
return (
|
|
26
|
+
<SupportProvider publicKey={process.env.NEXT_PUBLIC_COSSISTANT_KEY}>
|
|
27
|
+
<Support />
|
|
28
|
+
</SupportProvider>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
1. Wrap the subtree that should access support data with `SupportProvider` and supply your public key (A Cossistant account is mandatory)
|
|
34
|
+
2. Drop the `Support` component anywhere inside that provider to mount the floating widget.
|
|
35
|
+
3. Optionally pass `defaultOpen`, `quickOptions`, `defaultMessages`, or locale overrides straight into `Support` for instant personalization.
|
|
36
|
+
|
|
37
|
+
### Identify visitors and seed defaults
|
|
38
|
+
|
|
39
|
+
Use the helper components to identify a visitor, attach metadata or display different default messages or quick options.
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import {
|
|
43
|
+
IdentifySupportVisitor,
|
|
44
|
+
Support,
|
|
45
|
+
SupportConfig,
|
|
46
|
+
SupportProvider,
|
|
47
|
+
SenderType,
|
|
48
|
+
} from "@cossistant/react";
|
|
49
|
+
|
|
50
|
+
export function Dashboard({
|
|
51
|
+
visitor,
|
|
52
|
+
}: {
|
|
53
|
+
visitor: { id: string; email: string };
|
|
54
|
+
}) {
|
|
55
|
+
return (
|
|
56
|
+
<>
|
|
57
|
+
<IdentifySupportVisitor externalId={visitor.id} email={visitor.email} />
|
|
58
|
+
<SupportConfig
|
|
59
|
+
defaultMessages={[
|
|
60
|
+
{
|
|
61
|
+
content:
|
|
62
|
+
"Welcome in our your dashboard, if you need any help I'm here!",
|
|
63
|
+
senderType: SenderType.TeamMember,
|
|
64
|
+
},
|
|
65
|
+
]}
|
|
66
|
+
/>
|
|
67
|
+
</>
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Need help or spot a typo?
|
|
73
|
+
|
|
74
|
+
Open an issue in the main repository or start a discussion so we can improve the docs together. Screenshots, reproduction steps, and suggestions are welcome.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cossistant/react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Cossistant team",
|
|
6
6
|
"description": "Headless React SDK for building AI-powered support/chat widgets. Hooks + primitives, WS-driven, TypeScript-first. Next.js-ready, Tailwind optional.",
|
|
@@ -82,6 +82,8 @@
|
|
|
82
82
|
"dependencies": {
|
|
83
83
|
"@cossistant/core": "workspace:*",
|
|
84
84
|
"@cossistant/types": "workspace:*",
|
|
85
|
+
"class-variance-authority": "^0.7.1",
|
|
86
|
+
"clsx": "^2.1.1",
|
|
85
87
|
"nanoid": "^5.1.5",
|
|
86
88
|
"react-markdown": "^10.1.0",
|
|
87
89
|
"react-use-websocket": "^4.13.0",
|
|
@@ -91,7 +93,7 @@
|
|
|
91
93
|
"peerDependencies": {
|
|
92
94
|
"react": ">=18 <20",
|
|
93
95
|
"react-dom": ">=18 <20",
|
|
94
|
-
"@types/react": "
|
|
96
|
+
"@types/react": "",
|
|
95
97
|
"motion": "^12.18.1",
|
|
96
98
|
"tailwindcss": "*"
|
|
97
99
|
},
|