@youfocus-technology/chat-agent 0.0.0-stage → 0.1.1

package/README.md

@@ -1,3 +1,108 @@
-# Temporary Holding Version
+# @youfocus-technology/chat-agent
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+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.
+
+> A versão `0.1.x` ainda usa dados mock: as respostas, sugestões e o histórico não vêm do backend.
+
+## Instalação
+
+```bash
+npm install @youfocus-technology/chat-agent
+```
+
+## Uso
+
+Importar o pacote uma vez registra a tag `<youfocus-agent>` na página:
+
+```js
+import '@youfocus-technology/chat-agent'
+```
+
+```html
+<youfocus-agent
+  whatsapp-url="https://wa.me/5500000000000"
+  human-agent-url="https://wa.me/5500000000000"
+></youfocus-agent>
+```
+
+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`.
+
+Os estilos ficam isolados no Shadow DOM. No documento, o pacote registra só a `@font-face` da fonte Figtree. Nenhuma `@property` é registrada, então o widget não interfere no Tailwind do site (v3 ou v4). Em SSR, o import não quebra: a tag só é registrada quando existe `window`.
+
+| Atributo          | Descrição                                                                 |
+| ----------------- | ------------------------------------------------------------------------- |
+| `whatsapp-url`    | Link do WhatsApp no rodapé.                                               |
+| `human-agent-url` | Link do botão "Falar com um agente humano". Sem ele, usa o `whatsapp-url`. |
+
+| Evento  | Quando                               |
+| ------- | ------------------------------------ |
+| `close` | O usuário clicou no botão de fechar. |
+
+### HTML puro
+
+```html
+<youfocus-agent whatsapp-url="https://wa.me/5500000000000"></youfocus-agent>
+
+<script>
+  const agent = document.querySelector('youfocus-agent')
+  agent.addEventListener('close', () => {
+    agent.hidden = true
+  })
+</script>
+```
+
+### Vue 2
+
+Avise o Vue que a tag é um elemento externo, para ele não tentar resolvê-la como componente:
+
+```js
+import Vue from 'vue'
+import '@youfocus-technology/chat-agent'
+
+Vue.config.ignoredElements = ['youfocus-agent']
+```
+
+```html
+<youfocus-agent v-if="showAgent" :whatsapp-url="whatsappUrl" @close="showAgent = false" />
+```
+
+### Vue 3 (Vite)
+
+```js
+// vite.config.js
+vue({
+  template: {
+    compilerOptions: {
+      isCustomElement: (tag) => tag === 'youfocus-agent',
+    },
+  },
+})
+```
+
+```html
+<youfocus-agent v-if="showAgent" :whatsapp-url="whatsappUrl" @close="showAgent = false" />
+```
+
+## Desenvolvimento
+
+Requer Node 22 ou superior.
+
+```bash
+npm install
+npm run dev      # playground em index.html
+npm test
+npm run lint
+npm run build    # gera dist/youfocus-agent.js (ES) e dist/youfocus-agent.umd.cjs (UMD)
+```
+
+## Publicação
+
+O `prepublishOnly` roda o build antes de publicar, e o `publishConfig` já deixa o pacote público.
+
+```bash
+npm login
+npm version patch   # ou minor; pular na primeira publicação (0.1.0)
+npm publish --access public
+```
+
+Antes de publicar, `npm pack --dry-run` mostra o que vai no pacote: só `dist/`, `README.md` e `package.json`.