Front-end Chatbot

[AldemirLucas]

Concluídas

Integração com Backend e Lógica Principal

• Criar hook useChatbot para gerenciar o estado do chat (mensagens, loading, erros).
• Implementar sistema de autenticação (useChatbotAuth) para proteger as rotas da API.
• Desenvolver a lógica para criação e gerenciamento de conversas (threads).
• Implementar o envio de mensagens para a API, tratando a comunicação com o backend.
• Abortar requisições em andamento (AbortController) caso o usuário envie uma nova mensagem.

Componentes de UI

• Desenvolver o componente Sidebar para navegação entre as conversas e início de um novo chat.
• Criar o componente ThreadList para listar o histórico de conversas do usuário.
• Implementar o ChatWindow como container principal para a exibição das mensagens.
• Criar o componente Message para renderizar as mensagens do usuário e do assistente.
• Desenvolver o campo de Search (input) para o usuário digitar e enviar perguntas.

Funcionalidades e Experiência do Usuário

• Implementar o recebimento de respostas em tempo real (streaming) via Fetch API.
• Adicionar um efeito de "digitação" para suavizar a exibição da resposta do assistente.
• Processar e renderizar respostas formatadas em Markdown, incluindo blocos de código e links.
• Adicionar funcionalidade de "Copiar" para os blocos de código.
• Implementar sistema de feedback (like/dislike) nas mensagens do assistente.
• Tratar e exibir os diferentes estados da aplicação (carregando, erro, sucesso).

Pendentes

Refinamentos de UI/UX

• Responsividade: Garantir que a interface do chatbot seja totalmente funcional e visualmente agradável em dispositivos móveis.
• Estados Vazios: Desenvolver e implementar telas de estado vazio para a lista de conversas (ThreadList) e para a janela de chat (ChatWindow) antes do início de uma conversa.
• Melhorar Indicadores de Carga: Substituir spinners simples por skeleton loaders para uma experiência de carregamento mais fluida.
• Tratamento de Erros: Aprimorar as mensagens de erro exibidas para o usuário, tornando-as mais claras e, se possível, oferecendo ações corretivas.

Funcionalidades

• Modificar o token no backend para levar o user_id no payload
• Gerenciamento de Threads: Exclua conversas antigas.
• Persistência de Estado: Salvar o estado da conversa atual no localStorage para evitar a perda de mensagens em caso de um recarregamento da página.
• Permitir que o usuário selecione uma conversa antiga para continuar a interação.

Qualidade e Testes

• Testes Unitários: Escrever testes para os hooks (useChatbot, useThreads, useChatbotAuth) para garantir a robustez da lógica de negócio.
• Testes de Componentes: Criar testes para os componentes de UI para validar seu comportamento de forma isolada.
• Testes End-to-End (E2E): Desenvolver testes E2E que simulem o fluxo completo do usuário, desde o início de uma conversa até o recebimento de uma resposta e o envio de feedback.

[laura-l-amaral]

Pequenos Ajustes

• Separação do fluxo de pensamento da resposta final
• Mudar os componentes para o nosso padrão

[laura-l-amaral]

• Arrumar o scroll
• Trocar a lógica de acesso a api
• Ajustar cookie