Desafio Técnico: Desenvolvimento de Interface de Chat com Vue.js 2 (com histórico de chats e integração OpenAI)
Objetivo: O objetivo deste desafio é avaliar suas habilidades técnicas em relação ao desenvolvimento de interfaces utilizando Vue.js 2, sua capacidade de criar uma experiência de usuário interativa e amigável, além de integrar a API da OpenAI para gerar respostas simuladas do ChatGPT. O desafio consiste em criar uma interface de chat que simule uma conversa com o ChatGPT, com múltiplos chats, histórico de conversas e integração com a OpenAI.
- Crie uma interface de chat que permita a criação de diferentes chats simulados. Cada chat deve ter seu próprio histórico de mensagens.
- No canto esquerdo da interface, adicione uma lista de chats disponíveis, exibindo um nome ou título para cada chat.
- Ao clicar em um chat na lista, o histórico de mensagens desse chat específico deve ser exibido na área de conversa.
- Cada chat deve ter sua própria área de histórico de mensagens e campo de entrada de texto para digitar novas mensagens.
- Ao alternar entre chats, o histórico de mensagens deve ser atualizado de acordo com o chat selecionado.
- O usuário deve poder criar novas mensagens em cada chat e receber respostas simuladas do ChatGPT, obtidas através da integração com a API da OpenAI.
- As mensagens do ChatGPT geradas pela API devem ser exibidas na interface como respostas do bot.
- O histórico da conversa deve ser rolável, permitindo que o usuário visualize mensagens anteriores.
- Crie uma conta na plataforma da OpenAI (se ainda não tiver uma).
- Obtenha um token de API a partir do painel de controle da OpenAI para autenticar suas solicitações à API.
- Estilize a interface para que ela tenha uma aparência agradável e responsiva.
- Use CSS para criar as bolhas de mensagens, distinguido visualmente as mensagens do usuário das respostas do ChatGPT.
- Adicione transições suaves ao alternar entre chats e exibir novas mensagens.
- Implemente um mecanismo de troca de mensagens em tempo real, para simular uma conversa mais dinâmica.
- Adicione animações quando as mensagens aparecem ou são trocadas.
- Use o Vue.js 2 para construir a interface e gerenciar o estado da aplicação.
- Crie uma conta na OpenAI e obtenha um token de API para realizar chamadas à API.
- Integre a API da OpenAI para gerar respostas simuladas do ChatGPT.
- Você pode criar o aplicativo usando componentes Vue.js.
- Fique à vontade para usar bibliotecas de estilo como Bootstrap, Vuetify ou outras, se desejar.
- O código deve ser versionado em um repositório Git público (por exemplo, GitHub) para avaliação.
Sua solução será avaliada com base na qualidade do código, na implementação das funcionalidades solicitadas, na integração com a API da OpenAI, no design da interface, na organização dos componentes Vue.js, na responsividade da interface e na capacidade de criar uma experiência de chat interativa e agradável.
Envie email para fernandomoraes@compayz.com com o link do repositório Git contendo o código da solução com instruções claras sobre como executá-la localmente, incluindo detalhes sobre como configurar a integração com a API da OpenAI.
Este desafio expandido incorpora a integração com a API da OpenAI para obter respostas simuladas do ChatGPT, permitindo que você demonstre habilidades na criação de interfaces interativas, organização de dados em Vue.js 2 e integração de serviços externos. Boa sorte!