@youfocus-technology/chat-agent 0.0.0-stage → 0.1.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 +105 -2
- package/dist/youfocus-agent.js +4115 -0
- package/dist/youfocus-agent.umd.cjs +86 -0
- package/package.json +55 -4
package/README.md
CHANGED
|
@@ -1,3 +1,106 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @youfocus-technology/chat-agent
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Widget do agente de IA da YouFocus, entregue como Web Component (`<youfocus-agent>`). O Vue 3 e o CSS já vão dentro do pacote, então ele funciona em HTML puro, Vue 2 e Vue 3 sem dependências extras.
|
|
4
|
+
|
|
5
|
+
> A versão `0.1.x` ainda usa dados mock: as respostas, sugestões e o histórico não vêm do backend.
|
|
6
|
+
|
|
7
|
+
## Instalação
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @youfocus-technology/chat-agent
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Uso
|
|
14
|
+
|
|
15
|
+
Importar o pacote uma vez registra a tag `<youfocus-agent>` na página:
|
|
16
|
+
|
|
17
|
+
```js
|
|
18
|
+
import '@youfocus-technology/chat-agent'
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
```html
|
|
22
|
+
<youfocus-agent
|
|
23
|
+
whatsapp-url="https://wa.me/5500000000000"
|
|
24
|
+
human-agent-url="https://wa.me/5500000000000"
|
|
25
|
+
></youfocus-agent>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
O projeto que hospeda o widget decide onde e quando mostrar a tag. O widget não se esconde sozinho ao fechar: ele só emite o evento `close`.
|
|
29
|
+
|
|
30
|
+
| Atributo | Descrição |
|
|
31
|
+
| ----------------- | ------------------------------------------------------------------------- |
|
|
32
|
+
| `whatsapp-url` | Link do WhatsApp no rodapé. |
|
|
33
|
+
| `human-agent-url` | Link do botão "Falar com um agente humano". Sem ele, usa o `whatsapp-url`. |
|
|
34
|
+
|
|
35
|
+
| Evento | Quando |
|
|
36
|
+
| ------- | ------------------------------------ |
|
|
37
|
+
| `close` | O usuário clicou no botão de fechar. |
|
|
38
|
+
|
|
39
|
+
### HTML puro
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<youfocus-agent whatsapp-url="https://wa.me/5500000000000"></youfocus-agent>
|
|
43
|
+
|
|
44
|
+
<script>
|
|
45
|
+
const agent = document.querySelector('youfocus-agent')
|
|
46
|
+
agent.addEventListener('close', () => {
|
|
47
|
+
agent.hidden = true
|
|
48
|
+
})
|
|
49
|
+
</script>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Vue 2
|
|
53
|
+
|
|
54
|
+
Avise o Vue que a tag é um elemento externo, para ele não tentar resolvê-la como componente:
|
|
55
|
+
|
|
56
|
+
```js
|
|
57
|
+
import Vue from 'vue'
|
|
58
|
+
import '@youfocus-technology/chat-agent'
|
|
59
|
+
|
|
60
|
+
Vue.config.ignoredElements = ['youfocus-agent']
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<youfocus-agent v-if="showAgent" :whatsapp-url="whatsappUrl" @close="showAgent = false" />
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Vue 3 (Vite)
|
|
68
|
+
|
|
69
|
+
```js
|
|
70
|
+
// vite.config.js
|
|
71
|
+
vue({
|
|
72
|
+
template: {
|
|
73
|
+
compilerOptions: {
|
|
74
|
+
isCustomElement: (tag) => tag === 'youfocus-agent',
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
})
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
```html
|
|
81
|
+
<youfocus-agent v-if="showAgent" :whatsapp-url="whatsappUrl" @close="showAgent = false" />
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## Desenvolvimento
|
|
85
|
+
|
|
86
|
+
Requer Node 22 ou superior.
|
|
87
|
+
|
|
88
|
+
```bash
|
|
89
|
+
npm install
|
|
90
|
+
npm run dev # playground em index.html
|
|
91
|
+
npm test
|
|
92
|
+
npm run lint
|
|
93
|
+
npm run build # gera dist/youfocus-agent.js (ES) e dist/youfocus-agent.umd.cjs (UMD)
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## Publicação
|
|
97
|
+
|
|
98
|
+
O `prepublishOnly` roda o build antes de publicar, e o `publishConfig` já deixa o pacote público.
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
npm login
|
|
102
|
+
npm version patch # ou minor; pular na primeira publicação (0.1.0)
|
|
103
|
+
npm publish --access public
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
Antes de publicar, `npm pack --dry-run` mostra o que vai no pacote: só `dist/`, `README.md` e `package.json`.
|