Sobre

Este pacote contém os componentes visuais do webchat SM Click publicados como biblioteca npm. Ele é consumido por dois projetos:

• sm-click-webchat-widget — o widget embedável que roda no iframe dentro do site do cliente
• sm-zap-front — a prévia ao vivo na tela de customização da instância webchat

Mantendo os componentes neste pacote separado, a aparência da prévia e do widget real são garantidamente idênticas.

Estrutura

src/
├── index.js                        # Entrypoint da lib — exporta WebchatShell
├── main.js                         # Entrypoint do servidor de dev (App.vue)
├── tailwind.css                    # Base Tailwind injetada no bundle da lib
├── WebchatShell.vue                # Componente raiz exportado — orquestra todos os estados
├── App.vue                         # Wrapper apenas para desenvolvimento local
│
├── components/
│   ├── ChatHeader.vue              # Cabeçalho com título, avatar e botão fechar
│   ├── ChatComposer.vue            # Campo de texto + botão de envio
│   ├── ChatLoadingState.vue        # Tela de carregamento com spinner e mensagens cíclicas
│   ├── ChatBlockedState.vue        # Tela de widget indisponível/bloqueado
│   ├── MessageBubble.vue           # Balão de mensagem (delega para os sub-tipos abaixo)
│   │
│   ├── messages/
│   │   ├── MessageText.vue         # Mensagem de texto simples
│   │   ├── MessageImage.vue        # Mensagem com imagem
│   │   ├── MessageAudio.vue        # Mensagem de áudio
│   │   └── MessageVideo.vue        # Mensagem de vídeo
│   │
│   └── __tests__/                  # Testes unitários (Vitest + @vue/test-utils)
│       ├── ChatBlockedState.test.js
│       ├── ChatComposer.test.js
│       ├── ChatHeader.test.js
│       └── ChatLoadingState.test.js
│
└── composables/
    └── useTheme.js                 # Aplica as CSS custom properties do tema no elemento raiz

Stack

| | | |---|---| | Framework | Vue 3 (Composition API) | | Estilo | Tailwind CSS + CSS custom properties | | Build | Vite (library mode) | | Publicação | npm público |

Usando em outro projeto

npm install sm-click-webchat-library-ui

import { WebchatShell } from "sm-click-webchat-library-ui";
import "sm-click-webchat-library-ui/style.css";

<WebchatShell
  :messages="messages"
  :connected="true"
  header-title="Suporte"
  primary-color="#49d3c4"
  @send="handleSend"
  @close="handleClose"
/>

Props

| Prop | Tipo | Default | Descrição | |------|------|---------|-----------| | primaryColor | String | #49d3c4 | Cor principal (header, balão enviado, botão) | | secondaryColor | String | #f1f2f4 | Cor dos balões recebidos | | headerTitle | String | "" | Título exibido no cabeçalho | | avatarUrl | String | "" | URL da imagem de avatar | | borderRadius | String | medium | Estilo de borda: none | small | medium | large | rounded | | messages | Array | [] | Lista de mensagens { id, fromMe, content, time? } | | connected | Boolean | false | Se a conexão com o atendimento está ativa | | loading | Boolean | false | Exibe spinner de carregamento | | blocked | Boolean | false | Exibe tela de widget bloqueado | | blockReason | String | "" | Motivo de bloqueio exibido na tela bloqueada | | chatId | String | "" | ID do chat (exibido no rodapé para debug) | | interactive | Boolean | true | false = modo prévia, composer sempre habilitado | | sending | Boolean | false | Exibe spinner de envio no botão | | visualStyle | String | classic | Estilo visual: classic | modern | minimal |

Eventos

| Evento | Payload | Descrição | |--------|---------|-----------| | send | string | Texto digitado ao enviar mensagem | | close | — | Clique no botão fechar |

Desenvolvimento local

npm install
npm run dev    # servidor de desenvolvimento com hot-reload (App.vue)
npm run build  # gera dist/

Verificar formatação

npm run format:check  # verifica se o código está formatado
npm run format        # corrige automaticamente com Prettier

Usando a versão local em outro projeto

Para testar alterações na lib sem publicar, use o caminho local no vite.config do projeto consumidor:

// vite.config.ts do sm-click-webchat-widget
resolve: {
  alias: {
    "sm-click-webchat-library-ui": "/caminho/para/sm-click-webchat-library-ui/src/index.js"
  }
}