Atualização

Menu Lateral Recolhível - Nova Funcionalidade

Menu Lateral Recolhível - Nova Funcionalidade O CHAT - SPX agora oferece a funcionalidade de recolher e expandir o menu lateral, permitindo que você maximize o espaço de trabalho quando necessário. Esta funcionalidade oferece maior flexibilidade na interface, especialmente útil para usuários que desejam focar no conteúdo principal das conversas. Como Funciona Expandir e Recolher o Menu No topo do menu lateral, você encontrará um botão de toggle que permite alternar entre os estados expandido e recolhido: • Estado Expandido (Padrão) 📖: O menu lateral exibe ícones e textos completos de todos os itens, com largura de 200px • Estado Recolhido 📐: O menu lateral mostra apenas os ícones, com largura reduzida para 64px, maximizando o espaço disponível Exemplo Visual Abaixo você pode ver como o menu lateral aparece em cada estado: Menu lateral no estado expandido - mostra ícones e textos completos Menu lateral no estado recolhido - mostra apenas os ícones Botão de Toggle O botão de toggle está localizado no topo do menu lateral, ao lado do logo do CHAT - SPX: • Quando Expandido ➡️: Exibe o ícone de "recolher" (painel fechando) • Quando Recolhido ⬅️: Exibe o ícone de "expandir" (painel abrindo) Ao passar o mouse sobre o botão, você verá uma dica de ferramenta indicando a ação que será executada: • "Recolher menu lateral" (quando expandido) • "Expandir menu lateral" (quando recolhido) Funcionalidades no Modo Recolhido Quando o menu está recolhido, você ainda tem acesso a todas as funcionalidades principais: Navegação por Ícones • Todos os itens do menu permanecem acessíveis através de seus ícones • Ao passar o mouse sobre qualquer ícone, uma dica de ferramenta (tooltip) exibe o nome completo do item • Os ícones são centralizados para melhor visualização Itens Principais Mesmo no modo recolhido, você pode acessar: • 📥 Caixa de Entrada: Ícone de caixa de entrada • 💬 Conversas: Ícone de mensagem • 👥 Contatos: Ícone de contato • 📊 Relatórios: Ícone de gráfico • 📢 Campanhas: Ícone de megafone • 📚 Central de Ajuda: Ícone de biblioteca • ⚙️ Configurações: Ícone de raio Busca e Ações Rápidas • 🔎 Campo de Busca: Exibe apenas o ícone de busca (clique para abrir a busca) • ✏️ Nova Conversa: Botão de criar conversa permanece visível como ícone • 👤 Perfil do Usuário: Avatar do usuário permanece visível no rodapé do menu Submenus Quando o menu está recolhido, os submenus (como as opções dentro de "Conversas" ou "Contatos") são automaticamente ocultados para manter a interface limpa. Para acessar esses itens, expanda o menu lateral novamente. Persistência do Estado O estado do menu lateral (expandido ou recolhido) é salvo automaticamente nas suas configurações de interface. Isso significa que: ✅ Sua preferência será mantida mesmo após fechar e reabrir o navegador ✅ O estado é sincronizado entre diferentes dispositivos quando você faz login na mesma conta ✅ Você pode definir uma vez e o sistema lembrará da sua preferência Benefícios Mais Espaço para Trabalhar • 📏 Aumento de espaço horizontal: Quando recolhido, o menu ocupa apenas 64px em vez de 200px • 🎯 Foco no conteúdo: Ideal para visualizar conversas e detalhes com mais espaço • 👤 Experiência personalizada: Escolha o modo que melhor se adapta ao seu fluxo de trabalho Acessibilidade Mantida • 💡 Tooltips informativos: Todos os ícones exibem seus nomes completos ao passar o mouse • 🧭 Navegação intuitiva: A estrutura visual permanece familiar mesmo no modo recolhido • 🔧 Funcionalidade completa: Todas as funcionalidades principais permanecem acessíveis Dicas de Uso 1. 🎯 Para trabalho focado: Use o modo recolhido quando precisar focar nas conversas e detalhes 2. 🧭 Para navegação completa: Use o modo expandido quando precisar navegar entre diferentes seções frequentemente 3. ⚡ Alternância rápida: O botão de toggle permite alternar entre os modos instantaneamente, sem recarregar a página 4. ⌨️ Acesso por teclado: Você pode usar o mouse ou tocar no botão de toggle para alternar os estados Compatibilidade Esta funcionalidade está disponível em: ✅ Navegadores desktop (Chrome, Firefox, Safari, Edge) ✅ Modo responsivo desktop (tablets em modo paisagem) ⚠️ Nota: Em dispositivos móveis, o menu lateral já possui um comportamento otimizado específico para telas pequenas, e esta funcionalidade não afeta esse comportamento Suporte Se você tiver dúvidas sobre esta funcionalidade ou encontrar algum problema, entre em contato com nossa equipe de suporte através da Central de Ajuda ou abra um ticket de suporte.

Validação de Time Obrigatório para Resolver Conversas - Nova Funcionalidade

O CHAT - SPX agora exige que um time seja atribuído antes de permitir que uma conversa seja resolvida. Esta funcionalidade garante melhor organização e rastreabilidade das conversas, assegurando que todas as conversas resolvidas tenham um time responsável atribuído. Como Funciona Validação Automática ao Resolver Quando um agente tenta resolver uma conversa, o sistema verifica automaticamente se há um time atribuído: • Com Time Atribuído ✅: A conversa é resolvida normalmente, sem interrupções • Sem Time Atribuído ⚠️: O sistema exibe um modal solicitando a seleção de um time antes de permitir a resolução Exemplo Visual Abaixo você pode ver como o sistema se comporta quando tenta resolver sem time: Modal exibido quando tenta resolver conversa sem time atribuído Fluxo de Resolução Quando você tenta resolver uma conversa sem time atribuído: 1. Clique em "Resolve" ou use qualquer método de resolução (botão, menu de contexto, atalho de teclado) 2. Modal de Seleção Aparece: O sistema detecta a ausência de time e exibe um modal com a lista de times disponíveis 3. Selecione um Time: Escolha o time apropriado da lista apresentada 4. Confirmação: Após selecionar, o sistema automaticamente:    - Atribui o time selecionado à conversa    - Resolve a conversa imediatamente    - Exibe mensagem de sucesso Pontos de Resolução Cobertos Esta validação funciona em todos os pontos onde uma conversa pode ser resolvida: Interface Principal • 🔘 Botão "Resolve": No cabeçalho da conversa • 📋 Menu de Contexto: Ao clicar com botão direito na conversa e selecionar "Marcar como resolvida" • ⌨️ Atalhos de Teclado:   - Alt + E - Resolver conversa atual   - Cmd/Ctrl + Alt + E - Resolver e avançar para próxima • 🎯 Command Bar: Ao usar a barra de comandos (Cmd/Ctrl + K) e selecionar "Resolve Conversation" Ações em Massa • 📦 Bulk Actions: Ao selecionar múltiplas conversas e tentar resolver em massa • 🔄 Validação Inteligente: Se algumas conversas têm time e outras não, o sistema solicita seleção de time apenas para as que não possuem Modal de Seleção de Time Características do Modal O modal de seleção possui as seguintes características: • 📝 Título Claro: "Selecionar Time" • 💬 Mensagem Informativa: Explica que é necessário selecionar um time para resolver a conversa • 📋 Lista de Times: Exibe todos os times disponíveis na conta • ✅ Seleção Visual: Ao passar o mouse sobre um time, ele é destacado; ao clicar, fica selecionado com indicador visual • 🔘 Botões de Ação:   - "Cancelar" - Fecha o modal sem fazer alterações   - "Confirmar" - Atribui o time e resolve a conversa (habilitado apenas após seleção) Comportamento em Ações em Massa Quando resolve múltiplas conversas: • 🎯 Time Único: O time selecionado será atribuído a todas as conversas que não possuem time • ⚡ Processamento Automático: Após selecionar, o sistema atribui o time e resolve todas as conversas automaticamente • ✅ Feedback Visual: Mensagem de sucesso informando quantas conversas foram resolvidas Validação de Segurança Camadas de Proteção O sistema possui validação em múltiplas camadas para garantir a segurança: Frontend (Interface) • Validação antes de enviar a requisição ao servidor • Modal amigável para seleção de time quando necessário • Prevenção de ações sem time atribuído Backend (Servidor) • Validação no endpoint da API antes de processar a resolução • Retorno de erro apropriado se tentar resolver sem time • Validação no modelo de dados para garantir integridade Validação no Modelo • O modelo Conversation possui validação que impede mudar status para "resolved" sem team_id • Garante que mesmo chamadas diretas à API respeitem a regra Mensagens e Feedback Mensagens do Sistema O sistema exibe mensagens claras em português brasileiro: • Modal de Seleção: "Selecione um time para resolver esta conversa" • Sucesso Individual: "Conversa resolvida com sucesso" • Sucesso em Massa: "Conversas atualizadas com sucesso" • Erro: "Um time deve ser atribuído antes de resolver esta conversa" • Sem Times Disponíveis: "Nenhum time disponível. Por favor, crie um time primeiro." Tratamento de Erros • Se não houver times disponíveis, o modal informa e orienta a criar um time primeiro • Erros de rede ou servidor são tratados com mensagens apropriadas • O modal pode ser cancelado a qualquer momento sem afetar a conversa Benefícios Melhor Organização • 📊 Rastreabilidade: Todas as conversas resolvidas têm um time responsável identificado • 📈 Relatórios Precisos: Relatórios por time ficam mais confiáveis • 👥 Responsabilidade Clara: Facilita identificar qual time está lidando com cada conversa Fluxo de Trabalho Aprimorado • ⚡ Processo Automatizado: Atribuição e resolução acontecem em uma única ação • 🎯 Prevenção de Erros: Evita esquecimento de atribuir time antes de resolver • ✅ Consistência: Garante que todas as conversas resolvidas sigam o mesmo padrão Experiência do Usuário • 💡 Interface Intuitiva: Modal claro e fácil de usar • 🚀 Ação Rápida: Processo completo em poucos cliques • 🔄 Flexibilidade: Permite cancelar e escolher outro time se necessário Casos de Uso Cenário 1: Resolução Individual 1. Agente trabalha em uma conversa 2. Ao finalizar, clica em "Resolve" 3. Sistema detecta ausência de time 4. Modal aparece com lista de times 5. Agente seleciona seu time 6. Conversa é resolvida automaticamente Cenário 2: Resolução em Massa 1. Agente seleciona 10 conversas 2. Clica em "Resolve" para todas 3. Sistema verifica: 7 têm time, 3 não têm 4. Modal aparece solicitando time para as 3 sem time 5. Agente seleciona um time 6. Time é atribuído às 3 conversas 7. Todas as 10 conversas são resolvidas Cenário 3: Via Menu de Contexto 1. Agente clica com botão direito em uma conversa 2. Seleciona "Marcar como resolvida" 3. Sistema valida e detecta ausência de time 4. Modal aparece 5. Após seleção, conversa é resolvida Compatibilidade Esta funcionalidade está disponível em: ✅ Todas as formas de resolução de conversas (botão, menu, atalhos, command bar) ✅ Ações individuais e em massa ✅ Todos os navegadores desktop e mobile ✅ Interface em português brasileiro Notas Técnicas Para Administradores • A validação é aplicada automaticamente, sem necessidade de configuração • Funciona com todos os times existentes na conta • Não afeta conversas já resolvidas antes da implementação • A validação pode ser contornada apenas por processos automáticos do sistema (como auto-resolve por tempo) Para Desenvolvedores • Validação implementada no frontend (Vue.js) e backend (Ruby on Rails) • Endpoint: POST /api/v1/accounts/:account_id/conversations/:id/toggle_status • Validação no modelo: Conversation#team_required_for_resolution • Mensagens de erro retornam status HTTP 422 (Unprocessable Entity) Suporte Se você tiver dúvidas sobre esta funcionalidade ou encontrar algum problema: • Entre em contato com nossa equipe de suporte através da Central de Ajuda • Abra um ticket de suporte descrevendo o problema encontrado • Verifique se há times disponíveis na conta antes de tentar resolver conversas

Botão "Anterior" Disponível em Ambos os Layouts - Nova Funcionalidade

O CHAT - SPX agora exibe o botão "Anterior" em ambos os layouts de conversação (Condensado e Expandido), facilitando a navegação entre conversas independentemente do layout escolhido. Esta funcionalidade melhora a experiência do usuário ao fornecer acesso consistente à navegação de retorno em qualquer visualização. Como Funciona Exibição Adaptativa por Layout O botão "Anterior" se adapta automaticamente ao layout selecionado: • Layout Expandido 📱: Exibe ícone + texto "Anterior" para maior clareza • Layout Condensado 📋: Exibe apenas o ícone para economizar espaço Localização O botão aparece sempre ao lado do avatar e nome do contato no cabeçalho da conversa, facilitando o acesso rápido para voltar à lista de conversas. Exemplo Visual Abaixo você pode ver como o botão aparece em cada layout: Botão com ícone + texto no layout expandido Botão apenas com ícone no layout condensado Funcionalidade Navegação Intuitiva Ao clicar no botão "Anterior", o sistema: 1. Retorna à Lista de Conversas: Volta para a visualização anterior (lista de conversas, filtros aplicados, etc.) 2. Mantém Contexto: Preserva os filtros e visualizações que você estava usando antes 3. Navegação Rápida: Permite alternar rapidamente entre visualizar uma conversa e a lista de conversas Comportamento Inteligente • Preserva Filtros: Ao voltar, mantém os filtros que você havia aplicado (por status, inbox, time, etc.) • Mantém Visualização: Retorna para a mesma visualização de lista que você estava usando • Navegação Contextual: O botão sempre leva você de volta para o contexto correto da lista de conversas Acesso ao Botão Disponibilidade O botão "Anterior" está disponível em: ✅ Layout Expandido: Botão completo com ícone e texto "Anterior" ✅ Layout Condensado: Botão compacto apenas com ícone ✅ Todas as Conversas: Aparece em qualquer conversa aberta ✅ Exceto em Inbox View: Não aparece quando você está visualizando diretamente uma inbox específica Alternância de Layout Você pode alternar entre os layouts usando: • Botão de Alternar Layout: Localizado no cabeçalho da lista de conversas • Comportamento Adaptativo: O botão "Anterior" se ajusta automaticamente ao layout selecionado Interface e Design Layout Expandido • Ícone: Seta para a esquerda (chevron-left) • Texto: "Anterior" em português brasileiro • Espaçamento: Margem adequada entre ícone e texto para melhor legibilidade • Visual: Botão discreto que não interfere na visualização da conversa Layout Condensado • Apenas Ícone: Seta para a esquerda (chevron-left) • Espaço Otimizado: Ocupa menos espaço horizontal, ideal para telas menores ou layout compacto • Visual Limpo: Mantém a interface organizada mesmo com espaço reduzido Estilo Visual • Cor: Texto em tom neutro que não compete com outros elementos • Hover: Efeito visual ao passar o mouse indicando que é clicável • Posicionamento: Alinhado ao lado esquerdo do avatar do contato Casos de Uso Cenário 1: Navegação Rápida 1. Agente está visualizando uma conversa no layout expandido 2. Precisa verificar outra conversa rapidamente 3. Clica no botão "Anterior" (ícone + texto visível) 4. Retorna à lista de conversas 5. Seleciona outra conversa para visualizar Cenário 2: Trabalho em Layout Compacto 1. Agente prefere usar o layout condensado para ter mais espaço 2. Está visualizando uma conversa 3. Precisa voltar para a lista 4. Clica no ícone do botão "Anterior" (apenas ícone) 5. Retorna rapidamente à lista mantendo o layout condensado Cenário 3: Alternância de Layouts 1. Agente está no layout expandido com botão completo visível 2. Alterna para layout condensado 3. Botão se adapta automaticamente, mostrando apenas o ícone 4. Funcionalidade permanece a mesma, apenas o visual muda Benefícios Experiência Consistente • 🎯 Acesso Universal: Botão disponível independentemente do layout escolhido • 🔄 Consistência: Mesma funcionalidade em ambos os layouts • 👁️ Visibilidade: Sempre visível quando necessário, facilitando a navegação Flexibilidade de Uso • 📱 Adaptação Automática: Se ajusta automaticamente ao layout selecionado • ⚡ Navegação Rápida: Acesso imediato para voltar à lista de conversas • 🎨 Interface Limpa: Design discreto que não polui a interface Produtividade • 🚀 Menos Cliques: Não precisa fechar a conversa manualmente para ver a lista • 💡 Intuitivo: Posicionamento lógico ao lado do avatar do contato • 🔄 Contexto Preservado: Mantém filtros e visualizações ao voltar Compatibilidade Esta funcionalidade está disponível em: ✅ Layout Expandido (EXPANDED) ✅ Layout Condensado (CONDENSED) ✅ Todas as conversas individuais ✅ Todos os navegadores desktop e mobile ✅ Interface em português brasileiro Notas Técnicas Para Usuários • O botão aparece automaticamente em todas as conversas • Não requer configuração adicional • Funciona com qualquer layout selecionado • A alternância de layout é instantânea e o botão se adapta automaticamente Para Administradores • Funcionalidade habilitada por padrão • Não requer configuração no painel administrativo • Compatível com todas as configurações de conta existentes Para Desenvolvedores • Implementação em Vue.js (Composition API) • Componente: BackButton.vue com prop iconOnly • Integração: ConversationHeader.vue e ConversationBox.vue • Adaptação baseada em isOnExpandedLayout do ConversationBox • Estilos usando Tailwind CSS Suporte Se você tiver dúvidas sobre esta funcionalidade ou encontrar algum problema: • Entre em contato com nossa equipe de suporte através da Central de Ajuda • Abra um ticket de suporte descrevendo o problema encontrado • Verifique se o layout está sendo alternado corretamente no cabeçalho da lista de conversas

Pesquisa Interna de Mensagens na Conversa - Nova Funcionalidade

O CHAT - SPX agora permite que você pesquise mensagens específicas dentro da conversa aberta, facilitando a localização rápida de informações importantes sem precisar rolar manualmente por todo o histórico. Esta funcionalidade melhora significativamente a produtividade dos agentes ao permitir buscar termos, frases ou palavras-chave diretamente na conversa ativa. Como Funciona Pesquisa Contextual e Inteligente A pesquisa interna funciona de forma inteligente e contextual: • Busca Específica na Conversa: Pesquisa apenas nas mensagens da conversa atualmente aberta, não em todo o sistema • Resultados em Tempo Real: Conforme você digita, os resultados são filtrados dinamicamente • Busca Parcial: Não precisa digitar a palavra exata - a busca encontra termos parciais (ex: "baca" encontra "bacana") • Case-Insensitive: Não diferencia maiúsculas de minúsculas (ex: "BOA TARDE" encontra "boa tarde") Localização O botão de pesquisa aparece no cabeçalho da conversa, ao lado das informações do contato, facilitando o acesso rápido sempre que necessário. Exemplo Visual Abaixo você pode ver como funciona a pesquisa: Botão de pesquisa localizado no cabeçalho da conversa Modal exibindo resultados da pesquisa com navegação Funcionalidade Interface de Pesquisa Ao clicar no botão de pesquisa (ícone de lupa), um modal é aberto com: 1. Campo de Busca: Digite qualquer termo que deseja encontrar na conversa 2. Lista de Resultados: Exibe todas as mensagens que contêm o termo pesquisado 3. Informações de Contexto: Cada resultado mostra o remetente, timestamp e conteúdo da mensagem 4. Navegação Direta: Clique em qualquer resultado para navegar diretamente até aquela mensagem na conversa Navegação Intuitiva Ao usar a pesquisa, o sistema: 1. Filtra em Tempo Real: Conforme você digita, os resultados são atualizados instantaneamente 2. Destaca Resultados: Mostra claramente quais mensagens contêm o termo pesquisado 3. Navegação Direta: Ao clicar em um resultado, o modal fecha e a conversa rola automaticamente até a mensagem encontrada 4. Preserva Contexto: A conversa permanece aberta, permitindo ver o contexto completo da mensagem Comportamento Inteligente • Busca Parcial: Encontra termos parciais dentro das palavras (ex: "serv" encontra "servidores", "servidor", "servir") • Múltiplos Resultados: Exibe todos os resultados ordenados por data (mais recentes primeiro) • Timestamp em Português: Mostra "há cerca de 3 horas" ao invés de "about 3 hours ago" • Sem Resultados: Exibe mensagem clara quando nenhuma mensagem contém o termo pesquisado Acesso ao Recurso Disponibilidade A pesquisa interna está disponível em: ✅ Todas as Conversas: Funciona em qualquer conversa aberta ✅ Todos os Layouts: Disponível tanto no layout expandido quanto condensado ✅ Todos os Tipos de Inbox: WhatsApp, Email, Web Widget, etc. ✅ Mensagens de Entrada e Saída: Pesquisa em mensagens do contato e do agente Como Acessar 1. Abra qualquer conversa 2. Localize o ícone de lupa 🔍 no cabeçalho da conversa 3. Clique no ícone para abrir o modal de pesquisa 4. Digite o termo que deseja buscar 5. Clique em qualquer resultado para navegar até a mensagem Interface e Design Modal de Pesquisa • Campo de Busca: Input limpo e focado automaticamente ao abrir • Placeholder: "Pesquisar mensagens nesta conversa..." para orientar o usuário • Lista de Resultados: Cards organizados com informações claras • Scroll Infinito: Suporta muitos resultados sem sobrecarregar a interface Cartões de Resultado Cada resultado exibe: • Avatar do Remetente: Foto do contato ou agente que enviou a mensagem • Nome do Remetente: Identificação clara de quem enviou • Timestamp: "há cerca de 3 horas" em português brasileiro • Conteúdo da Mensagem: Prévia do texto com o termo pesquisado destacado • Efeito Hover: Destaque visual ao passar o mouse indicando que é clicável Estilo Visual • Cores: Interface consistente com o tema do CHAT - SPX • Espaçamento: Margem adequada entre resultados para melhor legibilidade • Responsivo: Funciona bem em diferentes tamanhos de tela • Feedback Visual: Estado de carregamento enquanto busca os resultados Casos de Uso Cenário 1: Localizar Informação Específica 1. Cliente mencionou um número de protocolo há 3 dias atrás 2. Conversa tem centenas de mensagens 3. Agente abre a pesquisa interna 4. Digita "protocolo" ou parte do número 5. Encontra a mensagem imediatamente 6. Clica no resultado e é levado diretamente até a mensagem Cenário 2: Recuperar Compromisso Agendado 1. Agente precisa confirmar data combinada com cliente 2. Não lembra quando foi mencionada 3. Abre pesquisa e digita "23/12" ou "dezembro" 4. Sistema encontra todas as mensagens com essas referências 5. Agente localiza rapidamente a data agendada 6. Confirma informação com o cliente Cenário 3: Encontrar Termo Técnico 1. Cliente mencionou problema com "nobreak" várias vezes 2. Agente precisa revisar todas as menções 3. Pesquisa por "nobreak" 4. Vê todos os contextos onde o termo foi usado 5. Navega entre os resultados para entender o histórico completo 6. Fornece resposta baseada em todas as menções anteriores Cenário 4: Auditoria de Conversa 1. Supervisor precisa revisar o que foi prometido ao cliente 2. Conversa tem meses de histórico 3. Pesquisa por "prometido", "garantir", "comprometo" 4. Encontra todas as promessas feitas 5. Verifica se foram cumpridas 6. Toma ações necessárias baseado no histórico Benefícios Produtividade • ⚡ Localização Instantânea: Encontre qualquer mensagem em segundos ao invés de minutos rolando manualmente • 🎯 Precisão: Busca exata pelo termo desejado, sem depender de memória • ⏱️ Economia de Tempo: Reduz drasticamente o tempo gasto procurando informações específicas Experiência do Usuário • 🔍 Busca Inteligente: Entende buscas parciais e ignora diferenças de maiúsculas/minúsculas • 🌐 Interface em Português: Timestamps e mensagens totalmente em português brasileiro • 👁️ Visibilidade Clara: Resultados organizados com contexto completo (quem, quando, o quê) Qualidade do Atendimento • 📝 Respostas Precisas: Acesse informações exatas compartilhadas anteriormente • 🔄 Contexto Completo: Veja o contexto da mensagem ao navegar até ela • ✅ Menos Erros: Não dependa de memória, confirme informações diretamente no histórico Versatilidade • 🔎 Pesquisa Ampla: Funciona com qualquer tipo de conteúdo de mensagem • 📱 Responsivo: Funciona bem em desktop e dispositivos móveis • 🚀 Rápido: Resultados aparecem instantaneamente conforme você digita Diferencial: Pesquisa Global vs. Pesquisa Interna Pesquisa Global (ícone de lupa na barra superior) • Pesquisa em todas as conversas da conta • Útil para encontrar conversas que mencionam um termo • Resultados mostram conversas diferentes • Use quando não sabe em qual conversa está a informação Pesquisa Interna (ícone de lupa no cabeçalho da conversa) • Pesquisa apenas na conversa atualmente aberta • Útil para encontrar mensagens específicas dentro do histórico da conversa • Resultados mostram mensagens individuais • Use quando sabe que a informação está na conversa aberta Ambas as funcionalidades são independentes e complementares! Compatibilidade Esta funcionalidade está disponível em: ✅ Todas as conversas individuais ✅ Todos os tipos de inbox (WhatsApp, Email, Web Widget, SMS, etc.) ✅ Layout Expandido e Condensado ✅ Todos os navegadores modernos (Chrome, Firefox, Safari, Edge) ✅ Dispositivos desktop e mobile ✅ Interface totalmente em português brasileiro Notas Técnicas Para Usuários • A pesquisa interna NÃO afeta a pesquisa global do sistema • Os resultados são atualizados em tempo real conforme você digita • Não há limite de resultados - todas as mensagens correspondentes são exibidas • A pesquisa funciona apenas em mensagens com conteúdo de texto Para Administradores • Funcionalidade habilitada por padrão para todos os usuários • Não requer configuração adicional no painel administrativo • Compatível com todas as versões de inbox e integrações • Performance otimizada mesmo em conversas com milhares de mensagens Para Desenvolvedores • Implementação em Vue.js (Composition API com <script setup>) • Componente principal: ConversationSearchModal.vue • Store Vuex: conversationSearch module • API Backend: SearchService com suporte a conversation_id • Estilos usando Tailwind CSS • Timestamps formatados com date-fns e locale ptBR Atalhos de Teclado Abrir Pesquisa • Clique no ícone de lupa no cabeçalho da conversa Dentro do Modal de Pesquisa • ESC: Fecha o modal de pesquisa • Enter: Navega até o primeiro resultado (se houver) • Setas ↑/↓: Navega entre os resultados Perguntas Frequentes P: A pesquisa interna substitui a pesquisa global? R: Não! São funcionalidades complementares. A pesquisa global busca em todas as conversas, enquanto a pesquisa interna busca apenas na conversa aberta. P: Posso pesquisar em anexos ou imagens? R: Atualmente a pesquisa funciona apenas no conteúdo de texto das mensagens. P: A pesquisa diferencia maiúsculas de minúsculas? R: Não! A pesquisa é case-insensitive, ou seja, "BOA TARDE" encontra "boa tarde", "Boa Tarde", etc. P: Preciso digitar a palavra completa? R: Não! A pesquisa encontra termos parciais. Digite "serv" para encontrar "servidores", "servidor", "servir", etc. P: Quantos resultados são exibidos? R: Todos os resultados que correspondem à sua busca são exibidos, ordenados do mais recente para o mais antigo. P: A pesquisa funciona em conversas arquivadas? R: Sim! Funciona em qualquer conversa que você tenha aberto, incluindo arquivadas. Suporte Se você tiver dúvidas sobre esta funcionalidade ou encontrar algum problema: • Entre em contato com nossa equipe de suporte através da Central de Ajuda • Abra um ticket de suporte descrevendo o problema encontrado • Verifique se está usando a versão mais recente do CHAT - SPX • Certifique-se de que a conversa está totalmente carregada antes de pesquisar

Conexões WhatsApp - Gerenciamento de Conexões - Nova Funcionalidade

O CHAT - SPX agora oferece a funcionalidade de gerenciamento de Conexões WhatsApp, permitindo que você conecte e gerencie múltiplas contas WhatsApp para atendimento. Esta ferramenta é essencial para empresas que precisam atender clientes através do WhatsApp de forma profissional e organizada, com a capacidade de gerenciar várias conexões simultaneamente. ## Como Funciona ### Acesso às Conexões A funcionalidade de Conexões WhatsApp está disponível nas configurações do sistema: 1. Navegue até Configurações: Acesse o menu lateral e clique em Configurações 2. Selecione "Conexões WhatsApp": Clique na opção "Conexões WhatsApp" no menu de configurações 3. Visualize o Dashboard: A página carrega automaticamente mostrando todas as suas conexões ### Interface do Gerenciador O gerenciador apresenta uma interface moderna e intuitiva com os seguintes elementos: • Cabeçalho Centralizado: Título "Conexões WhatsApp" com descrição e logo do WhatsApp • Botão Principal: Botão grande e destacado para "Adicionar Nova Conexão" • Indicadores de Status: Mostra atualização automática e última atualização • Grid de Cards: Cada conexão é exibida em um card individual com todas as informações ## Exemplo Visual Abaixo você pode ver como o gerenciador aparece na interface: Visão geral do gerenciador mostrando todas as conexões WhatsApp Modal para adicionar uma nova conexão WhatsApp ## Funcionalidades Principais ### Criar Nova Conexão Para criar uma nova conexão WhatsApp: Passo 1: Adicionar Conexão ➕ - Clique no botão "Adicionar Nova Conexão" - Um modal será aberto solicitando o nome da conexão Passo 2: Definir Nome 📝 - Digite um nome descritivo para a conexão (ex: "Atendimento Principal", "Vendas", "Suporte") - O nome será usado para identificar a conexão no sistema - Uma caixa de entrada será criada automaticamente e vinculada à conexão Passo 3: Escanear QR Code 📱 - Após criar, um QR Code será exibido automaticamente - Escaneie o QR Code com seu WhatsApp para conectar - A conexão será estabelecida automaticamente após o escaneamento ### Status das Conexões Cada conexão pode estar em diferentes estados: 🟢 Conectado (WORKING) - Conexão ativa e funcionando - WhatsApp vinculado e pronto para receber/enviar mensagens - Indicador verde visível no card 🟡 Escanear QR Code (SCAN_QR_CODE) - Conexão criada, aguardando escaneamento do QR Code - QR Code disponível para escanear - Botão "QR Code" disponível para visualizar 🔴 Falhou (FAILED) - Conexão falhou ao estabelecer - QR Code pode ter expirado - Botão "Reiniciar" disponível para tentar novamente ⚪ Desconectado (STOPPED) - Conexão foi desconectada manualmente - Não está ativa no momento - Botões "Conectar" e "QR Code" disponíveis 🔄 Iniciando (STARTING) - Conexão está sendo iniciada - Processo de conexão em andamento - Indicador de carregamento visível ### Informações do Card Cada card de conexão exibe: Informações Básicas 📋 - Nome da Conexão: Nome definido ao criar - Status: Badge colorido indicando o estado atual - Logo WhatsApp: Ícone do WhatsApp com indicador de status Detalhes da Conexão 📞 - Número de Telefone: Número do WhatsApp conectado (quando conectado) - Caixa de Entrada: Nome da caixa de entrada vinculada - Data de Criação: Quando a conexão foi criada Ações Disponíveis ⚙️ - Botões de ação variam conforme o status: - QR Code: Ver/gerar QR Code para escanear - Conectar: Iniciar conexão desconectada - Desconectar: Desconectar conexão ativa - Reiniciar: Reiniciar conexão que falhou - Excluir: Remover conexão permanentemente ### Gerenciamento de QR Code O sistema oferece um modal completo para gerenciar o QR Code: Visualização do QR Code 📱 - QR Code grande e claro para fácil escaneamento - Atualização automática do QR Code quando necessário - Timer mostrando tempo decorrido desde a geração Instruções Passo a Passo 📖 - Instruções claras de como escanear: 1. Abrir WhatsApp no celular 2. Acessar Menu ou Configurações 3. Ir em "Aparelhos conectados" → "Conectar um aparelho" 4. Escanear o QR Code na tela Monitoramento Automático 🔄 - Sistema verifica automaticamente se o QR Code foi escaneado - Atualização a cada 3 segundos - Notificação automática quando conectado Estados do QR Code ⚡ - Aguardando: QR Code ativo, aguardando escaneamento - Conectado: Conexão estabelecida com sucesso - Expirado: QR Code expirou, precisa reiniciar - Erro: Erro ao carregar QR Code, opção de tentar novamente ### Ações Disponíveis Conectar 🔌 - Inicia uma conexão que está desconectada - Gera novo QR Code automaticamente - Abre modal de QR Code para escanear Desconectar 🔌 - Desconecta uma conexão ativa - Útil para manutenção ou pausa temporária - Conexão pode ser reconectada depois Reiniciar 🔄 - Reinicia uma conexão que falhou - Gera novo QR Code - Útil quando QR Code expirou ou conexão falhou Excluir 🗑️ - Remove permanentemente uma conexão - Atenção: A caixa de entrada associada também será excluída - Confirmação obrigatória antes de excluir Ver QR Code 📱 - Visualiza o QR Code de uma conexão existente - Útil para reconectar ou escanear novamente - Atualiza automaticamente se necessário ### Atualização Automática O sistema mantém os dados atualizados automaticamente: Polling Automático ⚡ - Atualiza status das conexões a cada 5 segundos - Não requer ação manual do usuário - Mantém informações sempre atualizadas Indicador Visual 🟢 - Ponto verde pulsante indicando atualização ativa - Mostra horário da última atualização - Botão manual de atualização disponível Sincronização em Tempo Real 🔄 - Mudanças de status são refletidas imediatamente - Cards atualizam automaticamente - Status badges mudam de cor conforme estado ## Como Usar ### Passo a Passo: Criar e Conectar uma Nova Conexão 1. Acesse o Gerenciador - Navegue até Configurações → Conexões WhatsApp - Aguarde o carregamento das conexões existentes 1. Crie uma Nova Conexão - Clique no botão "Adicionar Nova Conexão" - Digite um nome descritivo (ex: "Atendimento Principal") - Clique em "Criar Conexão" 1. Escanee o QR Code - O modal de QR Code abrirá automaticamente - Abra o WhatsApp no seu celular - Vá em Menu → Configurações → Aparelhos conectados → Conectar um aparelho - Escaneie o QR Code exibido na tela 1. Aguarde a Conexão - O sistema verificará automaticamente se você escaneou - Quando conectado, uma mensagem de sucesso aparecerá - A conexão estará pronta para uso 1. Verifique o Status - Volte à lista de conexões - Verifique se o status mudou para "Conectado" - O número de telefone deve aparecer no card ### Gerenciar Conexões Existentes Reconectar uma Conexão Desconectada 1. Localize a conexão com status "Desconectado" 2. Clique em "Conectar" 3. Escaneie o QR Code exibido 4. Aguarde a conexão ser estabelecida Reiniciar uma Conexão que Falhou 1. Localize a conexão com status "Falhou" 2. Clique em "Reiniciar" 3. Um novo QR Code será gerado 4. Escaneie o novo QR Code Desconectar uma Conexão Ativa 1. Localize a conexão com status "Conectado" 2. Clique em "Desconectar" 3. Confirme a ação 4. A conexão será desconectada Excluir uma Conexão 1. Localize a conexão que deseja excluir 2. Clique no botão de excluir (ícone de lixeira) 3. Confirme a exclusão 4. Atenção: A caixa de entrada associada também será excluída ### Dicas de Uso 🎯 Nomes Descritivos: Use nomes claros para identificar facilmente cada conexão (ex: "Vendas", "Suporte Técnico", "Atendimento Geral") 📱 Múltiplas Conexões: Você pode criar várias conexões para diferentes departamentos ou finalidades 🔄 Manutenção Preventiva: Desconecte e reconecte conexões periodicamente para manter estabilidade ⚡ Monitoramento: Use a atualização automática para monitorar o status de todas as conexões 🔒 Segurança: Mantenha o QR Code privado e não compartilhe com pessoas não autorizadas ## Casos de Uso ### Para Empresas com Múltiplos Departamentos Organização por Departamento 🏢 - Crie uma conexão para cada departamento - Exemplos: "Vendas", "Suporte", "Financeiro", "RH" - Facilita organização e roteamento de mensagens Atendimento Especializado 👥 - Diferentes equipes podem usar diferentes conexões - Cada equipe gerencia sua própria conexão - Melhor organização e responsabilização ### Para Empresas com Múltiplos Números Múltiplos Números WhatsApp 📞 - Conecte vários números WhatsApp à mesma conta - Útil para empresas com múltiplas linhas - Centralize o atendimento em uma plataforma Backup e Redundância 🔄 - Mantenha conexões de backup - Se uma falhar, outra pode assumir - Maior disponibilidade do serviço ### Para Gestão e Monitoramento Visão Centralizada 👁️ - Veja todas as conexões em um só lugar - Status de cada conexão claramente visível - Fácil identificação de problemas Manutenção Rápida 🔧 - Reconecte conexões com um clique - Reinicie conexões que falharam facilmente - Gerenciamento simplificado ## Características Técnicas ### Performance • Atualização Automática: Status atualizado a cada 5 segundos • Carregamento Rápido: Interface otimizada para carregamento rápido • Polling Eficiente: Sistema de polling otimizado para não sobrecarregar o servidor • Cache Inteligente: Dados cacheados para melhor performance ### Segurança • QR Code Temporário: QR Codes expiram após um tempo para segurança • Confirmação de Exclusão: Exclusão de conexões requer confirmação • Validação de Dados: Validação de nomes e dados antes de criar conexões • Isolamento de Sessões: Cada conexão é isolada e segura ### Integração • Integração WAHA: Utiliza WhatsApp HTTP API (WAHA) para conexões • Criação Automática de Inbox: Caixa de entrada criada automaticamente • Vinculação Automática: Conexão vinculada automaticamente à inbox • Sincronização: Status sincronizado com o servidor WAHA ## Benefícios ### Eficiência Operacional • ⚡ Gerenciamento Centralizado: Todas as conexões em um só lugar • 🔄 Atualização Automática: Status sempre atualizado sem intervenção manual • 📱 Conexão Rápida: Processo simples de criar e conectar • 🎯 Múltiplas Conexões: Suporte para várias conexões simultâneas ### Facilidade de Uso • 🎨 Interface Intuitiva: Design limpo e fácil de usar • 📖 Instruções Claras: Passo a passo claro para escanear QR Code • 🔔 Feedback Visual: Status claramente indicado com cores e ícones • ⚡ Ações Rápidas: Botões de ação diretos e acessíveis ### Organização • 🏷️ Nomes Personalizados: Identifique facilmente cada conexão • 📊 Visão Geral: Veja todas as conexões e seus status de uma vez • 🔍 Informações Completas: Todos os detalhes importantes em cada card • 📅 Histórico: Data de criação visível para referência ## Compatibilidade Esta funcionalidade está disponível em: ✅ Navegadores desktop (Chrome, Firefox, Safari, Edge) ✅ Navegadores móveis modernos (iOS Safari, Chrome Mobile) ✅ Tablets (iPad, Android tablets) ✅ Diferentes resoluções de tela ⚠️ Nota: Para escanear o QR Code, você precisará de um dispositivo móvel com WhatsApp instalado. O QR Code deve ser escaneado do celular, não da mesma tela onde está sendo exibido. ## Limitações Conhecidas • QR Code Expira: QR Codes têm tempo de expiração e precisam ser renovados • Uma Conexão por Vez: Cada número WhatsApp pode ter apenas uma conexão ativa por vez • Dependência WAHA: Requer servidor WAHA configurado e funcionando • Exclusão de Inbox: Excluir conexão também exclui a caixa de entrada associada ## Solução de Problemas ### QR Code não aparece Possíveis causas: - Erro ao criar conexão - Servidor WAHA não está respondendo - Problema de conexão com a internet Soluções: - Verifique se o servidor WAHA está funcionando - Tente criar a conexão novamente - Verifique sua conexão com a internet - Entre em contato com o suporte técnico ### QR Code expira muito rápido Possíveis causas: - Tempo padrão de expiração do WhatsApp - Demora para escanear Soluções: - Escaneie o QR Code o mais rápido possível após gerar - Use o botão "Reiniciar" para gerar um novo QR Code - Certifique-se de que o celular está próximo e com boa iluminação ### Conexão não conecta após escanear Possíveis causas: - QR Code já foi usado - Problema com o servidor WAHA - WhatsApp não está atualizado Soluções: - Aguarde alguns segundos, o sistema verifica automaticamente - Tente reiniciar a conexão - Verifique se o WhatsApp está atualizado - Entre em contato com o suporte se o problema persistir ### Status não atualiza Possíveis causas: - Polling automático parou - Problema de conexão - Servidor WAHA não responde Soluções: - Clique no botão "Atualizar" manualmente - Recarregue a página - Verifique sua conexão com a internet - Verifique se o servidor WAHA está funcionando ### Não consigo excluir conexão Possíveis causas: - Conexão está em uso - Permissões insuficientes - Erro no servidor Soluções: - Desconecte a conexão antes de excluir - Verifique suas permissões de administrador - Tente novamente após alguns segundos - Entre em contato com o suporte se necessário ## Suporte Se você tiver dúvidas sobre esta funcionalidade ou encontrar algum problema: • Entre em contato com nossa equipe de suporte através da Central de Ajuda • Abra um ticket de suporte descrevendo o problema encontrado • Consulte outros artigos da Central de Ajuda para mais informações sobre configurações e funcionalidades relacionadas