Todos os projetosInterface de Assistente de IA

via OPTEN AG · 2025

Interface de Assistente de IA

Uma interface de chat com streaming para a equipe de um distribuidor atacadista: as respostas aparecem conforme chegam, com reações e anexos. Estado em Angular Signals, overlays centralizados pelo CDK Overlay, responsivo até o mobile.

Resultado

Chat com streaming publicado com estado baseado em signals e serviços totalmente desacoplados.

Papel
Engenharia de frontend
Stack
Angular 20 · Signals · CDK Overlay
Período
set 2025

Um assistente que responde à equipe de um distribuidor atacadista precisa parecer que está pensando em voz alta — as respostas aparecem conforme chegam, em vez de surgirem prontas depois de uma espera.

Streaming é um problema de UI

A view re-renderiza sem parar enquanto o usuário ainda está lendo, então toda decisão de layout tem que sobreviver ao texto crescendo por baixo: sem pular a posição do scroll, sem reposicionar os botões de ação, sem piscar na mensagem que está sendo escrita.

A UI é uma função da conversa

O estado vive em Angular Signals: mensagens, status do streaming, anexos, reações. A view deriva deles em vez de ser sincronizada com eles, o que elimina a classe inteira de bug em que a conversa parece desatualizada até você clicar em algo. Os serviços ficam totalmente desacoplados dos componentes, então o transporte pode mudar sem a interface saber.

Overlays com um só dono

Interfaces de chat acumulam coisas flutuantes — menus de contexto, um lightbox para anexos, a sidebar com os grupos de conversa, os fluxos de criar e excluir. Tratadas caso a caso, elas brigam entre si por empilhamento, foco e fechamento. Centralizá-las pelo CDK Overlay deu um único conjunto de regras para posicionar e fechar, e a semântica de interação continua previsível não importa como o usuário chegou ali.

Mobile-first, não mobile-também

A equipe usa isso entre outras tarefas, muitas vezes no celular, então o layout estreito foi o ponto de partida em vez de uma compressão tardia do de desktop — alvos de toque, ações alcançáveis, e uma sidebar que vira gesto em vez de coluna permanente.

O assistente no celular, tema escuro
O layout estreito: tema escuro no celular, a barra lateral como gesto, ações ao alcance do polegar