AI Assistant Interface

The client is a wholesale distributor. The brief, through the agency, was an AI assistant interface — a chat experience where staff ask questions and read answers as they stream back, inside the company’s own tools.

I built the frontend as a frontend developer, working from approved Figma screens: the conversation view, the message composer, and the states around them.

A chat application with streamed responses that render as they arrive, message reactions — like and dislike — for feedback, and file attachments on the conversation. State is managed with Angular Signals, so the view stays in sync with the conversation without a heavier store.

Services are decoupled, and overlays — menus, dialogs, attachment previews — run through Angular CDK Overlay rather than ad-hoc DOM. The interface adapts responsively from desktop down to mobile.

The conversation is a signal-backed message list. As an answer streams in, chunks append to the active message and the view updates in place — no full re-render, no manual change detection. Computed signals derive the view state the template needs — whether a response is still streaming, whether the composer can submit — so the UI is a function of the conversation rather than a pile of imperative flags.

Overlays are positioned through CDK Overlay’s positioning strategies, which keeps menus, dialogs and attachment previews anchored correctly as the layout reflows from desktop to mobile, and centralises focus and dismiss behaviour instead of scattering it across components. Data and side effects sit behind injected services, so the components stay presentational and the streaming, reactions and attachment logic can be tested and swapped independently.

I lean on AI as a working partner to scaffold components and cross-check the state flows, so my attention goes to the interaction details and the responsive edge cases rather than the boilerplate.

From the Figma frame to a merged pull request — the same path on every project.