gentiq 0.7.0 → 0.7.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.
- package/README.md +55 -46
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,68 +1,77 @@
|
|
|
1
|
-
# Gentiq React UI
|
|
1
|
+
# Gentiq React UI Library (React)
|
|
2
2
|
|
|
3
|
-
**
|
|
3
|
+
**The core React library for building premium AI chatbot interfaces.**
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
`gentiq-react` provides a set of highly modular conversational components built on top of [Vercel AI SDK](https://sdk.vercel.ai/) and [Vite](https://vite.dev/). It offers both a complete, drop-in UI and low-level headless hooks for maximum flexibility.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
- **`<AdminPanel>`**: A complete admin dashboard UI with user analytics, chat history auditing, and user management.
|
|
9
|
-
- **Extensibility & Slots**: Deeply customize the UI via component slots (`TextPart`, `ToolPart`, etc.) and layout class names.
|
|
10
|
-
- **CSS Variable Theming**: Zero-config design tokens for easy theming without the need for Tailwind in your host app.
|
|
11
|
-
- **Dependency Injection**: Pluggable Authentication, API endpoints, and File handling via `GentiqProvider`.
|
|
12
|
-
- **Cache Isolation**: Zero-collision React Query state management.
|
|
7
|
+
---
|
|
13
8
|
|
|
14
|
-
##
|
|
9
|
+
## 🚀 Key Features
|
|
10
|
+
|
|
11
|
+
- **`<ChatUI>` Component**: A fully-featured, responsive chat interface supporting streaming, file attachments, and rich AI responses.
|
|
12
|
+
- **`<AdminPanel>`**: A complete dashboard for user analytics, chat history auditing, and balance management.
|
|
13
|
+
- **Surgical Component Overrides**: Replace any part of the UI (Message bubbles, Tool cards, Welcome screen) via a single unified `components` prop.
|
|
14
|
+
- **Headless Hooks (`useGentiqChat`)**: Build your own conversational logic from scratch while Gentiq handles persistence and streaming.
|
|
15
|
+
- **CSS Variable Theming**: Zero-config design tokens for easy theming without needing Tailwind in your host application.
|
|
16
|
+
- **i18n Ready**: Built-in support for internationalization with extensible translation resources.
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## 📦 Installation
|
|
15
21
|
|
|
16
22
|
```bash
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
"react-router-dom": "^6.x || ^7.x"
|
|
21
|
-
}
|
|
23
|
+
npm install gentiq
|
|
24
|
+
# or
|
|
25
|
+
pnpm add gentiq
|
|
22
26
|
```
|
|
23
27
|
|
|
24
|
-
|
|
28
|
+
*Note: For monorepo local development, you can link the package using `file:` in your `package.json`.*
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## 💡 Quick Start
|
|
25
33
|
|
|
26
34
|
```tsx
|
|
27
|
-
import {
|
|
28
|
-
import
|
|
29
|
-
import 'gentiq/style.css'
|
|
35
|
+
import { GentiqProvider, ChatUI } from 'gentiq';
|
|
36
|
+
import 'gentiq/style.css';
|
|
30
37
|
|
|
31
38
|
export default function App() {
|
|
32
39
|
return (
|
|
33
|
-
<GentiqProvider>
|
|
34
|
-
<
|
|
35
|
-
<Routes>
|
|
36
|
-
<Route path="/login" element={<UserLoginPage />} />
|
|
37
|
-
<Route path="/admin/*" element={<AdminPanel />} />
|
|
38
|
-
<Route
|
|
39
|
-
path="/*"
|
|
40
|
-
element={
|
|
41
|
-
<RequireAuth>
|
|
42
|
-
<ChatUI />
|
|
43
|
-
</RequireAuth>
|
|
44
|
-
}
|
|
45
|
-
/>
|
|
46
|
-
</Routes>
|
|
47
|
-
</BrowserRouter>
|
|
40
|
+
<GentiqProvider apiBaseUrl="http://localhost:8000">
|
|
41
|
+
<ChatUI />
|
|
48
42
|
</GentiqProvider>
|
|
49
|
-
)
|
|
43
|
+
);
|
|
50
44
|
}
|
|
51
45
|
```
|
|
52
46
|
|
|
53
|
-
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## 🎨 Customization (Slots)
|
|
54
50
|
|
|
55
|
-
|
|
56
|
-
- `ChatUI`: The primary chat interface component.
|
|
57
|
-
- `AdminPanel`: The full-featured administration dashboard.
|
|
58
|
-
- `RequireAuth`: High-order component for route protection (backend auth status).
|
|
59
|
-
- `UserLoginPage`: Pre-built user login interface.
|
|
60
|
-
- `gentiq/style.css`: Predictable Tailwind-based style resets and UI tokens.
|
|
51
|
+
Gentiq use a "slots" pattern via the `components` prop. No prop drilling required.
|
|
61
52
|
|
|
62
|
-
|
|
53
|
+
```tsx
|
|
54
|
+
const components = {
|
|
55
|
+
TextPart: ({ part }) => <p className="custom-bubble">{part.text}</p>,
|
|
56
|
+
WelcomeScreen: MyCustomWelcome,
|
|
57
|
+
toolComponents: {
|
|
58
|
+
get_weather: WeatherCard,
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
<ChatUI components={components} />
|
|
63
|
+
```
|
|
63
64
|
|
|
64
|
-
|
|
65
|
+
---
|
|
65
66
|
|
|
66
|
-
|
|
67
|
-
|
|
67
|
+
## 🛠️ Theming
|
|
68
|
+
|
|
69
|
+
Customize the look and feel by overriding the built-in CSS variables:
|
|
70
|
+
|
|
71
|
+
```css
|
|
72
|
+
:root {
|
|
73
|
+
--gentiq-radius: 0.75rem;
|
|
74
|
+
--gentiq-primary: oklch(0.623 0.214 259.815);
|
|
75
|
+
--gentiq-font-family: 'Inter', sans-serif;
|
|
76
|
+
}
|
|
68
77
|
```
|