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:
-
Retorna à Lista de Conversas: Volta para a visualização anterior (lista de conversas, filtros aplicados, etc.)
-
Mantém Contexto: Preserva os filtros e visualizações que você estava usando antes
-
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
-
Agente está visualizando uma conversa no layout expandido
-
Precisa verificar outra conversa rapidamente
-
Clica no botão "Anterior" (ícone + texto visível)
-
Retorna à lista de conversas
-
Seleciona outra conversa para visualizar
Cenário 2: Trabalho em Layout Compacto
-
Agente prefere usar o layout condensado para ter mais espaço
-
Está visualizando uma conversa
-
Precisa voltar para a lista
-
Clica no ícone do botão "Anterior" (apenas ícone)
-
Retorna rapidamente à lista mantendo o layout condensado
Cenário 3: Alternância de Layouts
-
Agente está no layout expandido com botão completo visível
-
Alterna para layout condensado
-
Botão se adapta automaticamente, mostrando apenas o ícone
-
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