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.

Requisitos:

Estrutura da Interface:

• 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.

Funcionalidades:

• 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.

Integração com a API da OpenAI:

• 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.

Estilo e Design:

• 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.

Bônus:

• 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.

Instruções:

• 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.

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.

Entrega:

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!