@kookee/react 0.0.1 → 0.0.2
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 +137 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
# @kookee/react
|
|
2
|
+
|
|
3
|
+
Official React chat widget for [Kookee](https://kookee.dev) - AI-powered support chat using your help center articles.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **AI Chat** - Answers questions using your help center content via RAG
|
|
8
|
+
- **Lightweight** - Small bundle, React as peer dependency
|
|
9
|
+
- **Two Modes** - Floating widget (Intercom-like) or inline chat component
|
|
10
|
+
- **Themeable** - Light, dark, auto themes with CSS variable customization
|
|
11
|
+
- **TypeScript-first** - Full type definitions out of the box
|
|
12
|
+
- **Open source** - [MIT licensed](https://github.com/kookee-dot-dev/kookee-react)
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @kookee/react
|
|
18
|
+
# or
|
|
19
|
+
pnpm add @kookee/react
|
|
20
|
+
# or
|
|
21
|
+
yarn add @kookee/react
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Don't forget to import the styles:
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
import '@kookee/react/styles.css';
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Quick Start
|
|
31
|
+
|
|
32
|
+
### Floating Widget (Intercom-like)
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { KookeeChatWidget } from '@kookee/react';
|
|
36
|
+
import '@kookee/react/styles.css';
|
|
37
|
+
|
|
38
|
+
function App() {
|
|
39
|
+
return (
|
|
40
|
+
<>
|
|
41
|
+
{/* Your app */}
|
|
42
|
+
<KookeeChatWidget
|
|
43
|
+
apiKey="your-api-key"
|
|
44
|
+
position="bottom-right"
|
|
45
|
+
theme="auto"
|
|
46
|
+
primaryColor="#6366f1"
|
|
47
|
+
greeting="Hi! How can I help?"
|
|
48
|
+
placeholder="Ask a question..."
|
|
49
|
+
suggestions={['How do I get started?', 'What are the pricing plans?']}
|
|
50
|
+
/>
|
|
51
|
+
</>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### Inline Chat
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import { KookeeChat } from '@kookee/react';
|
|
60
|
+
import '@kookee/react/styles.css';
|
|
61
|
+
|
|
62
|
+
function SupportPage() {
|
|
63
|
+
return (
|
|
64
|
+
<div style={{ height: 500 }}>
|
|
65
|
+
<KookeeChat
|
|
66
|
+
apiKey="your-api-key"
|
|
67
|
+
locale="en"
|
|
68
|
+
suggestions={['How do I get started?']}
|
|
69
|
+
/>
|
|
70
|
+
</div>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Components
|
|
76
|
+
|
|
77
|
+
### `KookeeChatWidget`
|
|
78
|
+
|
|
79
|
+
Floating bubble + chat panel. Props:
|
|
80
|
+
|
|
81
|
+
| Prop | Type | Default | Description |
|
|
82
|
+
|---|---|---|---|
|
|
83
|
+
| `apiKey` | `string` | required | Your Kookee API key |
|
|
84
|
+
| `position` | `'bottom-right' \| 'bottom-left'` | `'bottom-right'` | Widget position |
|
|
85
|
+
| `theme` | `'light' \| 'dark' \| 'auto'` | `'light'` | Color theme |
|
|
86
|
+
| `primaryColor` | `string` | `#6366f1` | Accent color |
|
|
87
|
+
| `greeting` | `string` | — | Welcome message |
|
|
88
|
+
| `placeholder` | `string` | `'Ask a question...'` | Input placeholder |
|
|
89
|
+
| `locale` | `string` | — | Locale for responses |
|
|
90
|
+
| `suggestions` | `string[]` | — | Quick-start suggestion pills |
|
|
91
|
+
|
|
92
|
+
### `KookeeChat`
|
|
93
|
+
|
|
94
|
+
Inline chat component (renders in parent container). Same props as above except `position` and `theme`.
|
|
95
|
+
|
|
96
|
+
### `KookeeChatProvider` + `useKookeeChat`
|
|
97
|
+
|
|
98
|
+
For advanced usage with custom layouts:
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
import { KookeeChatProvider, useKookeeChat } from '@kookee/react';
|
|
102
|
+
|
|
103
|
+
function CustomChat() {
|
|
104
|
+
const { messages, isLoading, sendMessage, isOpen, toggle } = useKookeeChat();
|
|
105
|
+
// Build your own UI
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
function App() {
|
|
109
|
+
return (
|
|
110
|
+
<KookeeChatProvider apiKey="your-api-key">
|
|
111
|
+
<CustomChat />
|
|
112
|
+
</KookeeChatProvider>
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## Theming
|
|
118
|
+
|
|
119
|
+
Customize via CSS variables:
|
|
120
|
+
|
|
121
|
+
```css
|
|
122
|
+
:root {
|
|
123
|
+
--kookee-primary: #6366f1;
|
|
124
|
+
--kookee-primary-hover: #4f46e5;
|
|
125
|
+
--kookee-bg: #ffffff;
|
|
126
|
+
--kookee-bg-secondary: #f9fafb;
|
|
127
|
+
--kookee-text: #111827;
|
|
128
|
+
--kookee-text-secondary: #6b7280;
|
|
129
|
+
--kookee-border: #e5e7eb;
|
|
130
|
+
--kookee-radius: 12px;
|
|
131
|
+
--kookee-font-size: 14px;
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
## License
|
|
136
|
+
|
|
137
|
+
MIT
|