AI Assistant Interface
Scroll ↓

via OPTEN AG · Sep 2025

AI Assistant Interface.

Client
via OPTEN AG
Role
Frontend engineering
Stack
Angular 20 · Signals · CDK Overlay
Timeline
Sep 2025

A streaming chat interface for a wholesale distributor’s staff: responses render as they arrive, with reactions and file attachments. State managed with Angular Signals — the UI is a function of the conversation — and overlays centralised through CDK Overlay, responsive down to mobile.

Streaming is a UI problem

An assistant that answers a wholesale distributor’s staff has to feel like it is thinking out loud — responses render as they arrive rather than appearing complete after a wait. The engineering consequence is that the view re-renders constantly while the user is still reading, so every layout decision has to survive text growing underneath it: no jumping scroll position, no reflowing action buttons, no flicker on the message being written.

The UI is a function of the conversation

State lives in Angular Signals: messages, streaming status, attachments, reactions. The view derives from them instead of being synchronised with them, which removes the entire class of bug where a chat looks stale until you click something. Services stay fully decoupled from the components, so the transport can change without the interface knowing.

Drag the diagram sideways to read it

Signal-based state — the view derives from the conversation, no manual synchronisation

Overlays with one owner

Chat interfaces accumulate floating things — context menus, a lightbox for attachments, the sidebar with chat groups, create and delete flows. Handled ad hoc, they fight each other over stacking, focus and dismissal. Centralising them through CDK Overlay gave one set of rules for positioning and closing, which is why the interaction semantics stay predictable no matter how the user got there.

Mobile-first, not mobile-also

Staff use this between other tasks, often on a phone, so the narrow layout was the starting point rather than a late compression of the desktop one — touch targets, reachable actions, and a sidebar that becomes a gesture instead of a permanent column.

The narrow layout — dark theme on mobile, sidebar as gesture, actions in thumb reach
The narrow layout — dark theme on mobile, sidebar as gesture, actions in thumb reach

Streaming chat shipped with signal-based state and fully decoupled services.

Alexander built a full chat interface — chat groups, context menus, lightbox, sidebar interactions, creating and deleting chats — with careful attention to interaction semantics and mobile-first behaviour.
Noël BossartCEO & Co-Founder · Noevu GmbH — QA & technical oversight