IA Chat — Desafio Técnico Frontend

Interface conversacional responsiva entre usuário e agente de e-commerce, capaz de recomendar produtos com base em solicitações durante a conversa.

Stack

• Next.js 15 (App Router)
• React 19
• TypeScript (modo strict)
• Tailwind CSS v4
• Jest + Testing Library (testes unitários)

Pré-requisitos

• Node.js 18+
• npm, yarn ou pnpm

Instalação e execução local

# 1. Clone o repositório
git clone <url-do-repositório>
cd ia-chat

# 2. Instale as dependências
npm install

# 3. Inicie o servidor de desenvolvimento
npm run dev

Acesse http://localhost:3000 no navegador.

Scripts disponíveis

Comando	Descrição
npm run dev	Inicia em modo desenvolvimento com Turbopack
npm run build	Gera o build de produção
npm run start	Inicia o servidor de produção
npm run lint	Executa o ESLint
npm test	Executa os testes uma vez
npm run test:watch	Executa os testes em modo watch
npm run test:coverage	Gera relatório de cobertura

Estrutura do projeto

src/
├── app/
│   ├── layout.tsx          # Root layout (fontes, metadata)
│   ├── page.tsx            # Página principal
│   └── globals.css         # Estilos globais e animações
├── types/
│   └── index.ts            # Interfaces: Product, ChatMessage
├── data/
│   └── mockData.ts         # Mensagens e produtos simulados
└── components/
    ├── chat/
    │   ├── ChatWindow.tsx   # Orquestrador principal do chat
    │   ├── AgentMessage.tsx # Mensagem do agente com animação de texto
    │   └── UserRequest.tsx  # Mensagem do usuário
    ├── products/
    │   ├── ProductCard.tsx         # Card de produto (horizontal/vertical)
    │   └── ProductCardDisplay.tsx  # Lista com animação progressiva
    └── ui/
        ├── TextField.tsx   # Input de envio de mensagens
        └── StarRating.tsx  # Avaliação por estrelas (suporte a meia estrela)

Fluxo da aplicação

1. O usuário digita uma mensagem no TextField e pressiona Enter ou clica no botão de envio.
2. O ChatWindow adiciona a mensagem do usuário ao estado e agenda duas respostas simuladas:
   • 800ms → resposta principal do agente com lista de produtos
   • 5000ms → mensagem de follow-up do agente
3. O AgentMessage exibe o texto palavra a palavra (55ms/palavra) via setTimeout encadeado.
4. Ao concluir a animação de texto, o ProductCardDisplay revela os produtos progressivamente (600ms por card).
5. A cada nova mensagem, o chat rola automaticamente para o final via scrollIntoView.

Decisões técnicas

Animações em CSS puro

As animações (slide-up-fade para mensagens do usuário e product-enter para os cards) foram implementadas em CSS para garantir performance via GPU e desacoplar a lógica de timing do JavaScript.

Animação de texto palavra a palavra

Implementada com setTimeout recursivo no AgentMessage. Cada novo visibleCount agenda o próximo timeout, com cleanup no return do useEffect para evitar memory leaks em remontagens.

Layout responsivo com dois containers

O ProductCardDisplay renderiza dois containers (vertical para mobile, horizontal para desktop) controlados via classes Tailwind, evitando dependência de JavaScript para detecção de breakpoint e garantindo a transição correta no SSR.

Collapse do chat com grid-rows

O colapso do painel usa grid-rows-[0fr] → grid-rows-[1fr] com transition, que permite animar para height: 0 sem overflow: hidden quebrando outros layouts — técnica mais robusta que max-height.

Sem dependências externas de UI

Todos os componentes foram construídos do zero, incluindo o StarRating com suporte a meia estrela via dois SVGs sobrepostos e overflow-hidden.

Testes

O projeto possui 39 testes cobrindo todos os componentes:

npm test

Componentes cobertos: TextField, StarRating, UserRequest, AgentMessage, ChatWindow, ProductCard, ProductCardDisplay.