@tp3/chat-widget 0.1.1 → 0.1.3
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 +52 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# @tp3/chat-widget
|
|
2
|
+
|
|
3
|
+
Chat widget React para el agente de servicio al cliente de Tp3studio. Se conecta por WebSocket a un [Workers Agent SDK](https://developers.cloudflare.com/agents/) con DeepSeek.
|
|
4
|
+
|
|
5
|
+
## Instalación
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @tp3/chat-widget
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Uso
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import ChatWidget from "@tp3/chat-widget";
|
|
15
|
+
|
|
16
|
+
<ChatWidget agentHost="tp3studio-chat.iaforchange.workers.dev" />
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### Props
|
|
20
|
+
|
|
21
|
+
| Prop | Default | Descripción |
|
|
22
|
+
|------|---------|-------------|
|
|
23
|
+
| `agentHost` | *(requerido)* | Host del Worker Cloudflare |
|
|
24
|
+
| `agentName` | `"tp3-chat-agent"` | DO binding en kebab-case |
|
|
25
|
+
| `brandName` | `"Tp3studio"` | Nombre en el header |
|
|
26
|
+
| `brandSubtitle` | `"Asistente virtual"` | Subtítulo en el header |
|
|
27
|
+
| `welcomeMessage` | `"👋 ¡Hola!..."` | Mensaje de bienvenida |
|
|
28
|
+
|
|
29
|
+
## Personalización
|
|
30
|
+
|
|
31
|
+
El widget expone 12 [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) con defaults. Redefinelas en tu CSS:
|
|
32
|
+
|
|
33
|
+
```css
|
|
34
|
+
:root {
|
|
35
|
+
--chat-primary: #4A7C59;
|
|
36
|
+
--chat-primary-fg: #fff;
|
|
37
|
+
--chat-primary-hover: #3A6348;
|
|
38
|
+
--chat-bot-bubble: #F0F2F0;
|
|
39
|
+
--chat-bot-text: #1A1A1A;
|
|
40
|
+
--chat-font-heading: "Proza Libre", sans-serif;
|
|
41
|
+
--chat-font-body: "Inter", sans-serif;
|
|
42
|
+
--chat-border: #D4D4D4;
|
|
43
|
+
--chat-shadow: 0 8px 24px rgba(0,0,0,.12);
|
|
44
|
+
--chat-shadow-lg: 0 12px 48px rgba(0,0,0,.18);
|
|
45
|
+
--chat-code-bg: rgba(74,124,89,.12);
|
|
46
|
+
--chat-close-btn-bg: rgba(255,255,255,.15);
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Licencia
|
|
51
|
+
|
|
52
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tp3/chat-widget",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"main": "dist/ChatWidget.js",
|
|
5
5
|
"module": "dist/ChatWidget.mjs",
|
|
6
6
|
"types": "dist/ChatWidget.d.ts",
|
|
@@ -20,6 +20,6 @@
|
|
|
20
20
|
"typescript": "^5.0.0"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
|
-
"react": "
|
|
23
|
+
"react": ">=18.0.0"
|
|
24
24
|
}
|
|
25
25
|
}
|