# 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](https://developers.openai.com/api/docs/guides/function-calling), 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.