Interface de Assistente de IA
Rolar ↓

via OPTEN AG · Set 2025

Interface de Assistente de IA.

Cliente
via OPTEN AG
Papel
Engenharia frontend
Stack
Angular 20 · Signals · CDK Overlay
Período
Set 2025

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

Streaming é um problema de UI

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. A consequência de engenharia é que 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.

Arraste o diagrama para o lado para ler

Estado baseado em signals — a view deriva da conversa, sem sincronização manual

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 é por isso que 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 layout estreito — tema escuro no mobile, sidebar como gesto, ações ao alcance do polegar
O layout estreito — tema escuro no mobile, sidebar como gesto, ações ao alcance do polegar

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

Alexander construiu uma interface de chat completa — grupos de conversa, menus de contexto, lightbox, interações da sidebar, criação e exclusão de conversas — com atenção cuidadosa à semântica de interação e ao comportamento mobile-first.
Noël BossartCEO & cofundador · Noevu GmbH — QA & supervisão técnica