@synchat/webchat 0.0.19 → 0.0.20

package/README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="docs/synchat-logo.svg" alt="Synchat" width="280" />
+</p>
+
 # @synchat/webchat
 
 Componente de chat para sites, integrado à plataforma **Synchat**. Exibe um botão flutuante que abre um painel com formulário (nome, e-mail, telefone, mensagem) ou mensagem de fora do horário de atendimento, conforme a configuração do canal no portal.
@@ -18,7 +22,7 @@ Para mais informações sobre a Synchat, acesse [synchat.com.br](https://synchat
 
 ---
 
-## Criar um canal WebChat e obter o secret
+## Criar um canal WebChat e obter o token
 
 1. No **portal**, vá em **Canais** (ou **Configurações** → **Canais**).
 2. Clique em **Novo canal** e escolha **WebChat**.
@@ -29,9 +33,9 @@ Para mais informações sobre a Synchat, acesse [synchat.com.br](https://synchat
    - Horários de atendimento (dias úteis e fim de semana), se usar restrição
    - **Quando inativo, enviar para a fila** (opcional)
 4. Clique em **Criar canal WebChat**.
-5. Após a criação, o portal exibe o **secret** do canal. **Copie e guarde** esse valor — ele será usado no componente no seu site.
+5. Após a criação, o portal exibe o **token** do canal. **Copie e guarde** esse valor — ele será usado no componente no seu site.
 
-O **secret** identifica o canal na API e no widget; não o compartilhe publicamente.
+O **token** identifica o canal na API e no widget; não o compartilhe publicamente.
 
 ---
 
@@ -51,29 +55,40 @@ npm install react react-dom @mui/material @mui/icons-material @emotion/react @em
 
 ## Uso básico
 
-Importe o componente e informe o **secret** (obtido no portal) e a **URL base da API** da Synchat:
+Importe o componente e informe o **token** (obtido no portal). A URL da API é opcional e tem valor padrão:
 
 ```tsx
 import { WebChat } from "@synchat/webchat";
 
 function App() {
   return (
-    <WebChat
-      secret="SEU_SECRET_DO_PORTAL"
-      apiBaseUrl="https://api.synchat.com.br"
-    />
+    <WebChat token="SEU_TOKEN_DO_PORTAL" />
   );
 }
 ```
 
-- **secret:** valor exibido ao criar o canal WebChat no portal.  
-- **apiBaseUrl:** URL base da API (ex.: `https://api.synchat.com.br` em produção).
+- **token:** valor exibido ao criar o canal WebChat no portal (obrigatório).  
+- **apiBaseUrl:** opcional. Se não informado, usa `https://api.synchat.com.br`. Só informe se sua API estiver em outra URL.
+- **primaryColor:** opcional. Cor do botão flutuante e do bloco "fora do horário". Padrão: cor Synchat (`#0D9488`). Ex.: `primaryColor="#007bff"` para azul.
 
 O widget exibe um **botão flutuante** no canto inferior direito. Ao clicar:
 
 - Se o canal estiver **ativo** e **dentro do horário** (ou sem restrição): mostra o formulário (nome, e-mail, telefone, mensagem) e o botão **Iniciar chat**.
 - Se estiver **fora do horário** (com restrição configurada): mostra a mensagem de horário de atendimento.
-- Se o canal estiver inativo ou o secret for inválido: mostra mensagem de indisponibilidade.
+- Se o canal estiver inativo ou o token for inválido: mostra mensagem de indisponibilidade.
+
+---
+
+## Mesmo WebSocket por negócio (businessId)
+
+O WebSocket da Synchat é **único por negócio**: `/ws/business/{businessId}`. Tanto o portal quanto o widget do webchat conectam no mesmo endpoint usando o `businessId`.
+
+A configuração do canal (retornada por `GET /channel/webchat/{token}`) inclui **businessId**. Assim, quem tem apenas o token do webchat pode:
+1. Chamar a API para obter a config (nome, status, horário, **businessId**).
+2. Conectar no mesmo WebSocket: `ws://.../ws/business/{businessId}`.
+3. Enviar/receber mensagens tipadas (ex.: `type: "webchat"` ou `type: "whatsapp"`) no mesmo canal.
+
+O componente recebe a config (com `businessId`) após o fetch; em `onStartChat` você pode usar `config.businessId` para abrir a conexão WebSocket se estiver guardando a config no estado.
 
 ---
 
@@ -81,15 +96,16 @@ O widget exibe um **botão flutuante** no canto inferior direito. Ao clicar:
 
 O **início da conversa** não é feito por API; será feito via **WebSocket**. Por isso, o componente espera que você implemente o callback **onStartChat** e, nele, conecte ao WebSocket da Synchat e envie os dados do visitante.
 
-Exemplo de uso com **onStartChat**:
+Exemplo de uso com **onStartChat** (conecte em `/ws/business/{businessId}` usando o `businessId` retornado na config):
 
 ```tsx
 <WebChat
-  secret="SEU_SECRET_DO_PORTAL"
+  token="SEU_TOKEN_DO_PORTAL"
   apiBaseUrl="https://api.synchat.com.br"
   onStartChat={async (data) => {
-    // Conectar ao WebSocket usando o secret e enviar
-    // name, email, phone, message conforme documentação da API/WebSocket
+    // config.businessId está disponível após fetch da config
+    // Conectar ao WebSocket: wsBase/ws/business/${config.businessId}
+    // e enviar name, email, phone, message conforme documentação
     await minhaConexaoWebSocket.iniciarChat(data);
   }}
 />
@@ -103,37 +119,70 @@ Se **onStartChat** não for passado, o widget exibe uma mensagem orientando a co
 
 | Prop            | Tipo     | Obrigatório | Descrição |
 |-----------------|----------|-------------|-----------|
-| **secret**      | `string` | Sim         | Secret do canal WebChat (portal → Canais → criar WebChat → copiar secret). |
-| **apiBaseUrl**  | `string` | Sim         | URL base da API (ex.: `https://api.synchat.com.br`). |
-| **onStartChat** | `(data) => void \| Promise<void>` | Não | Callback ao clicar em "Iniciar chat". Recebe `{ name, email, phone, message }`. Implemente aqui a conexão WebSocket. |
+| **token**       | `string` | Sim         | Token do canal WebChat (portal → Canais → criar WebChat → copiar token). |
+| **apiBaseUrl**  | `string` | Não         | URL base da API. Padrão: `https://api.synchat.com.br`. Só informe se a API estiver em outra URL. |
+| **primaryColor**| `string` | Não         | Cor do botão flutuante e do bloco "fora do horário". Padrão: cor Synchat (`#0D9488`). Aceita hex (ex.: `#007bff`) ou valor CSS. |
+| **onStartChat** | `(data) => void \| Promise<void>` | Não | Callback ao clicar em "Iniciar chat". Recebe `{ name, email, phone, message, businessId? }`. Implemente aqui a conexão WebSocket. |
 | **outOfHoursMessage** | `string` | Não | Mensagem customizada quando estiver fora do horário. Se não informado, usa o texto padrão com o horário configurado no canal. |
 
 ---
 
+## Estrutura do código (Atomic Design)
+
+O WebChat segue **Atomic Design**: átomos → moléculas → organismos → templates → páginas. O componente principal exportado é a página (`WebChat`). Para customização avançada, o pacote também exporta partes reutilizáveis (`FabTrigger`, `ChatPanel`, `WebChatLayout`, etc.). Detalhes em [docs/ATOMIC-DESIGN.md](docs/ATOMIC-DESIGN.md).
+
+---
+
 ## Variáveis de ambiente (sugestão)
 
-Em produção, evite deixar o secret no código. Use variáveis de ambiente:
+Em produção, evite deixar o token no código. Use variáveis de ambiente:
 
 ```env
-VITE_WEBCHAT_SECRET=seu_secret_aqui
-VITE_SYNCHAT_API_URL=https://api.synchat.com.br
+VITE_WEBCHAT_TOKEN=seu_token_aqui
+```
+
+```tsx
+<WebChat
+  token={import.meta.env.VITE_WEBCHAT_TOKEN ?? ""}
+  onStartChat={handleStartChat}
+/>
 ```
 
+Se a API estiver em outra URL, passe `apiBaseUrl`. Para customizar a cor do botão:
+
 ```tsx
 <WebChat
-  secret={import.meta.env.VITE_WEBCHAT_SECRET ?? ""}
-  apiBaseUrl={import.meta.env.VITE_SYNCHAT_API_URL ?? "https://api.synchat.com.br"}
+  token="..."
+  primaryColor="#007bff"
   onStartChat={handleStartChat}
 />
 ```
 
 ---
 
+## Pacote com URL da API fixa
+
+Se você **distribuir um build** do widget com a URL da API já embutida (para o cliente não precisar informar `apiBaseUrl`), faça o build do pacote com a variável de ambiente **SYNCHAT_API_URL**:
+
+```bash
+SYNCHAT_API_URL=https://api.synchat.com.br npm run build
+```
+
+Ou, para um ambiente próprio:
+
+```bash
+SYNCHAT_API_URL=https://api.empresa.com/synchat npm run build
+```
+
+O valor é injetado no código no momento do build. O cliente que instalar esse pacote (ou usar o bundle gerado) não precisa passar `apiBaseUrl` — o padrão será a URL que você definiu no build.
+
+---
+
 ## Resumo do fluxo
 
 1. **Cadastro:** [portal.synchat.com.br](https://portal.synchat.com.br) → Cadastre-se.  
-2. **Canal WebChat:** Portal → Canais → Novo canal → WebChat → preencher → Criar → **copiar o secret**.  
-3. **No site:** `npm install @synchat/webchat` e usar `<WebChat secret="..." apiBaseUrl="..." />`.  
+2. **Canal WebChat:** Portal → Canais → Novo canal → WebChat → preencher → Criar → **copiar o token**.  
+3. **No site:** `npm install @synchat/webchat` e usar `<WebChat token="..." />` (ou informar `apiBaseUrl` e `primaryColor` se quiser).  
 4. **Conversa:** Implementar **onStartChat** para conectar ao WebSocket e enviar a primeira mensagem quando o recurso estiver disponível.
 
 ---

package/dist/index.d.mts

@@ -24,6 +24,8 @@ interface WebChatSchedule {
     weekendEnd?: string;
 }
 interface WebChatConfig {
+    /** Business ID; use it to connect to the same WebSocket as the portal: ws://.../ws/business/{businessId} */
+    businessId: string;
     name: string;
     status: string;
     restrictBySchedule?: boolean;
@@ -31,16 +33,26 @@ interface WebChatConfig {
     sendToQueueWhenInactive?: boolean;
 }
 interface WebChatProps {
-    /** Channel secret (from portal when creating webchat channel). */
-    secret: string;
-    /** Base URL of the Synchat API (e.g. https://api.synchat.com.br). */
-    apiBaseUrl: string;
-    /** Called when user clicks "Iniciar chat". The app should connect via WebSocket and send the message (conversation start is not via API). */
+    /** Channel token (from portal when creating webchat channel). */
+    token: string;
+    /**
+     * Base URL of the Synchat API.
+     * Opcional: se não informado, usa o padrão (https://api.synchat.com.br).
+     * Em builds do pacote, a URL padrão pode ser fixada via SYNCHAT_API_URL (veja README).
+     */
+    apiBaseUrl?: string;
+    /**
+     * Cor principal do botão flutuante e do bloco "fora do horário" (ex.: "#0D9488").
+     * Se não informado, usa a cor padrão da Synchat.
+     */
+    primaryColor?: string;
+    /** Called when user clicks "Iniciar chat". The app should connect via WebSocket and send the message. businessId is provided so you can connect to /ws/business/{businessId}. */
     onStartChat?: (data: {
         name: string;
         email: string;
         phone: string;
         message: string;
+        businessId?: string;
     }) => void | Promise<void>;
     /** Optional: custom out-of-hours message. If not set, uses schedule from config. */
     outOfHoursMessage?: string;
@@ -52,6 +64,6 @@ interface WebChatFormData {
     message: string;
 }
 
-declare const WebChat: React__default.FC<WebChatProps>;
+declare const WebChatPage: React__default.FC<WebChatProps>;
 
-export { ChatButton, type ChatButtonProps, WebChat, type WebChatConfig, type WebChatFormData, type WebChatProps };
+export { ChatButton, type ChatButtonProps, WebChatPage as WebChat, type WebChatConfig, type WebChatFormData, type WebChatProps };

package/dist/index.d.ts

@@ -24,6 +24,8 @@ interface WebChatSchedule {
     weekendEnd?: string;
 }
 interface WebChatConfig {
+    /** Business ID; use it to connect to the same WebSocket as the portal: ws://.../ws/business/{businessId} */
+    businessId: string;
     name: string;
     status: string;
     restrictBySchedule?: boolean;
@@ -31,16 +33,26 @@ interface WebChatConfig {
     sendToQueueWhenInactive?: boolean;
 }
 interface WebChatProps {
-    /** Channel secret (from portal when creating webchat channel). */
-    secret: string;
-    /** Base URL of the Synchat API (e.g. https://api.synchat.com.br). */
-    apiBaseUrl: string;
-    /** Called when user clicks "Iniciar chat". The app should connect via WebSocket and send the message (conversation start is not via API). */
+    /** Channel token (from portal when creating webchat channel). */
+    token: string;
+    /**
+     * Base URL of the Synchat API.
+     * Opcional: se não informado, usa o padrão (https://api.synchat.com.br).
+     * Em builds do pacote, a URL padrão pode ser fixada via SYNCHAT_API_URL (veja README).
+     */
+    apiBaseUrl?: string;
+    /**
+     * Cor principal do botão flutuante e do bloco "fora do horário" (ex.: "#0D9488").
+     * Se não informado, usa a cor padrão da Synchat.
+     */
+    primaryColor?: string;
+    /** Called when user clicks "Iniciar chat". The app should connect via WebSocket and send the message. businessId is provided so you can connect to /ws/business/{businessId}. */
     onStartChat?: (data: {
         name: string;
         email: string;
         phone: string;
         message: string;
+        businessId?: string;
     }) => void | Promise<void>;
     /** Optional: custom out-of-hours message. If not set, uses schedule from config. */
     outOfHoursMessage?: string;
@@ -52,6 +64,6 @@ interface WebChatFormData {
     message: string;
 }
 
-declare const WebChat: React__default.FC<WebChatProps>;
+declare const WebChatPage: React__default.FC<WebChatProps>;
 
-export { ChatButton, type ChatButtonProps, WebChat, type WebChatConfig, type WebChatFormData, type WebChatProps };
+export { ChatButton, type ChatButtonProps, WebChatPage as WebChat, type WebChatConfig, type WebChatFormData, type WebChatProps };