Chat Product Carousel Message

Normalized message and UI state examples for ChatMessage, ProductCarousel, ProductCard, ProductDetailModal, and VariantSelectionModal.

What This Example Demonstrates

This fixture shows how one normalized runtime message can feed several presentation components. The chat message introduces the result, the carousel lists choices, the product card exposes the primary action, and the detail and variant modals gather a valid purchasable selection.

How to Use It

Keep the runtime payload as data and let the frontend choose the responsive presentation. A mobile client may use a horizontal carousel while an accessible fallback uses a list. Disable add-to-cart until required variant options are selected and the chosen option is in stock.

{
  "description": "Normalized state for the reference chat UI in reference-frontend. ChatMessage renders ProductCarousel when a message has products.",
  "messages": [
    {
      "id": "msg_user_001",
      "role": "user",
      "content": "I need a black waterproof jacket for hiking."
    },
    {
      "id": "msg_assistant_001",
      "role": "assistant",
      "content": "I found a few good options.",
      "products": [
        {
          "id": "prd_01HX7JACKETBLACK",
          "sku": "JACKET-BLK-M",
          "name": "Black Waterproof Hiking Jacket",
          "brand": "Example Brand",
          "price": 129.9,
          "original_price": 159.9,
          "price_text": "$129.90",
          "url": "https://store.example.com/products/black-waterproof-hiking-jacket",
          "image": "https://cdn.example.com/products/jacket-black-main.jpg",
          "description": "Lightweight waterproof shell with adjustable hood and sealed seams.",
          "in_stock": true,
          "storeName": "Example Brand Store",
          "productId": "1234567890",
          "images": [
            {
              "image": "https://cdn.example.com/products/jacket-black-main.jpg",
              "order": 1
            },
            {
              "image": "https://cdn.example.com/products/jacket-black-detail.jpg",
              "order": 2
            }
          ],
          "variants": [
            {
              "attribute_name": "Color",
              "attribute_key": "color",
              "options": [
                {
                  "label": "Black",
                  "value": "black",
                  "is_selected": true,
                  "in_stock": true
                }
              ]
            },
            {
              "attribute_name": "Size",
              "attribute_key": "size",
              "options": [
                {
                  "label": "S",
                  "value": "S",
                  "is_selected": false,
                  "in_stock": true,
                  "product": {
                    "pk": 10011
                  }
                },
                {
                  "label": "M",
                  "value": "M",
                  "is_selected": true,
                  "in_stock": true,
                  "product": {
                    "pk": 10012
                  }
                }
              ]
            }
          ]
        }
      ],
      "suggestions": [
        "Show cheaper jackets",
        "Only show in-stock medium sizes",
        "Compare the first two"
      ]
    },
    {
      "id": "msg_assistant_002",
      "role": "assistant",
      "content": "Your cart is ready. Continue to checkout?",
      "showActions": true,
      "actionType": "checkout_confirm"
    }
  ],
  "componentProps": {
    "ChatMessage": {
      "role": "assistant",
      "content": "I found a few good options.",
      "products": "{{messages[1].products}}",
      "cartType": "product",
      "activeCartMerchant": "Example Brand Store"
    },
    "ProductCarousel": {
      "products": "{{messages[1].products}}",
      "cartType": "product"
    },
    "ProductCard": {
      "name": "Black Waterproof Hiking Jacket",
      "price": "$129.90",
      "image": "https://cdn.example.com/products/jacket-black-main.jpg",
      "url": "https://store.example.com/products/black-waterproof-hiking-jacket",
      "storeName": "Example Brand Store",
      "details": "{{messages[1].products[0]}}"
    },
    "ProductDetailModal": {
      "product": {
        "id": "prd_01HX7JACKETBLACK",
        "name": "Black Waterproof Hiking Jacket",
        "price": 129.9,
        "priceText": "$129.90",
        "image": "https://cdn.example.com/products/jacket-black-main.jpg",
        "url": "https://store.example.com/products/black-waterproof-hiking-jacket",
        "description": "Lightweight waterproof shell with adjustable hood and sealed seams.",
        "images": "{{messages[1].products[0].images}}",
        "variants": "{{messages[1].products[0].variants}}"
      }
    },
    "VariantSelectionModal": {
      "product": "{{componentProps.ProductDetailModal.product}}"
    }
  }
}