Interactive electronics mockup

In Noor’s conversation, choose More options → Browse products, or send “Show me the electronics”. The catalog contains three fictional products with sample USD prices and generated studio images. This is a UI composition, not a vendor catalog, live inventory, cart checkout, payment flow, or ordering service.

Each role has its own component and method:

Role	Component	Method
Horizontal product collection	`Products/ProductStrip`	`showProducts`
Compare selected cards	`Products/ComparisonCard`	`compareProducts`
Color swatches and variant text	`Products/ColorOptions` / `ProductOptionsDialog`	`selectProduct`
Delivery radios	`ChoiceDialog` in single mode	`chooseDelivery`
Extras checkboxes	`ChoiceDialog` in multiple mode	`chooseExtras`
Review and save selection	`Products/SelectionCard`	`confirmSelection`
Poll creation and voting	`PollComposer` / `PollCard`	Independent poll actions
Forward a message or card	`ForwardDialog`	Send a new message with source provenance

Selections continue the conversation as new messages, with immutable snapshots so earlier choices remain readable. Every message has a stable ID, available under Message details. Forwarding creates a new ID, keeps the original conversation/message IDs, opens the destination conversation, and provides a link back to the source. The provider transcript includes these references as context. Natural demo questions such as “What did I choose?” recall the latest selected product and offer a link to its message.

Live provider requests expose validated presentation functions for product lists, comparisons, multiple chat messages, and references to IDs in the supplied transcript. The implementation follows the official OpenAI function-calling guide, using strict schemas and completed streamed function-call items. UI tools finish the current turn; the customer’s next choice is sent as ordinary transcript context. Only configured provider models supporting Responses function tools can use them. Live calls remain untested with a paid model; injected streaming mocks cover tool results and validation.

New incoming/outgoing bubbles use staged 0/20/40/60/80/100% keyframes: quiet entry, faster arrival, small overshoot, then settling. Product cards enter with staggered delays. Settings selects Slow (1000ms), Standard (620ms), or Quick (360ms). Typing uses dots; there is no stream caret or custom scrollbar cursor. The carousel uses native scrolling, indexed previous/next buttons and a progress bar. Reduced-motion settings disable the entrance animations.

Image prompts and saved asset paths are recorded in docs/design/product-images.md. They were generated with the built-in imagegen tool. Images depict the base finish; color choices are recorded in the swatch and selection data rather than simulated image recoloring.