{
  "surface_id": "email-viewer-surface",
  "surface_version": 1,
  "payload": {
    "objects": [
      {
        "beginRendering": {
          "surfaceId": "email-viewer-surface",
          "root": "root-card"
        }
      },
      {
        "surfaceUpdate": {
          "surfaceId": "email-viewer-surface",
          "components": [
            {
              "id": "root-card",
              "component": {
                "Card": {
                  "child": "main-column"
                }
              }
            },
            {
              "id": "main-column",
              "component": {
                "Column": {
                  "children": {
                    "explicitList": [
                      "header-section",
                      "divider-1",
                      "subject-text",
                      "meta-row",
                      "divider-2",
                      "body-text",
                      "divider-3",
                      "action-row"
                    ]
                  }
                }
              }
            },
            {
              "id": "header-section",
              "component": {
                "Row": {
                  "children": {
                    "explicitList": [
                      "sender-avatar",
                      "sender-info-column"
                    ]
                  },
                  "alignment": "center"
                }
              }
            },
            {
              "id": "sender-avatar",
              "component": {
                "Image": {
                  "url": {
                    "path": "/sender/avatar"
                  }
                }
              }
            },
            {
              "id": "sender-info-column",
              "weight": 1,
              "component": {
                "Column": {
                  "children": {
                    "explicitList": [
                      "sender-name",
                      "sender-email"
                    ]
                  }
                }
              }
            },
            {
              "id": "sender-name",
              "component": {
                "Label": {
                  "text": {
                    "path": "/sender/name"
                  },
                  "variant": "bodySemibold"
                }
              }
            },
            {
              "id": "sender-email",
              "component": {
                "Label": {
                  "text": {
                    "path": "/sender/email"
                  },
                  "variant": "caption"
                }
              }
            },
            {
              "id": "divider-1",
              "component": {
                "Divider": {
                  "axis": "horizontal"
                }
              }
            },
            {
              "id": "subject-text",
              "component": {
                "Label": {
                  "text": {
                    "path": "/subject"
                  },
                  "variant": "title"
                }
              }
            },
            {
              "id": "meta-row",
              "component": {
                "Row": {
                  "children": {
                    "explicitList": [
                      "date-text",
                      "time-text"
                    ]
                  },
                  "alignment": "center"
                }
              }
            },
            {
              "id": "date-text",
              "component": {
                "Label": {
                  "text": {
                    "path": "/date"
                  },
                  "variant": "caption"
                }
              }
            },
            {
              "id": "time-text",
              "component": {
                "Label": {
                  "text": {
                    "path": "/time"
                  },
                  "variant": "caption"
                }
              }
            },
            {
              "id": "divider-2",
              "component": {
                "Divider": {
                  "axis": "horizontal"
                }
              }
            },
            {
              "id": "body-text",
              "component": {
                "Label": {
                  "text": {
                    "path": "/body"
                  },
                  "variant": "body"
                }
              }
            },
            {
              "id": "divider-3",
              "component": {
                "Divider": {
                  "axis": "horizontal"
                }
              }
            },
            {
              "id": "action-row",
              "component": {
                "Row": {
                  "children": {
                    "explicitList": [
                      "reply-button",
                      "forward-button",
                      "delete-button"
                    ]
                  },
                  "distribution": "spaceEvenly"
                }
              }
            },
            {
              "id": "reply-button",
              "component": {
                "Button": {
                  "child": "reply-text",
                  "primary": true,
                  "action": {
                    "name": "reply",
                    "context": [
                      {
                        "key": "emailId",
                        "value": {
                          "path": "/id"
                        }
                      }
                    ]
                  }
                }
              }
            },
            {
              "id": "reply-text",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Reply"
                  },
                  "variant": "body"
                }
              }
            },
            {
              "id": "forward-button",
              "component": {
                "Button": {
                  "child": "forward-text",
                  "primary": false,
                  "action": {
                    "name": "forward",
                    "context": [
                      {
                        "key": "emailId",
                        "value": {
                          "path": "/id"
                        }
                      }
                    ]
                  }
                }
              }
            },
            {
              "id": "forward-text",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Forward"
                  },
                  "variant": "body"
                }
              }
            },
            {
              "id": "delete-button",
              "component": {
                "Button": {
                  "child": "delete-text",
                  "primary": false,
                  "action": {
                    "name": "delete",
                    "context": [
                      {
                        "key": "emailId",
                        "value": {
                          "path": "/id"
                        }
                      }
                    ]
                  }
                }
              }
            },
            {
              "id": "delete-text",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Delete"
                  },
                  "variant": "body"
                }
              }
            }
          ]
        }
      },
      {
        "dataModelUpdate": {
          "surfaceId": "email-viewer-surface",
          "path": "/",
          "contents": [
            {
              "key": "id",
              "valueString": "email-001"
            },
            {
              "key": "sender",
              "valueMap": [
                {
                  "key": "name",
                  "valueString": "Alex Zhang"
                },
                {
                  "key": "email",
                  "valueString": "zhangwei@example.com"
                },
                {
                  "key": "avatar",
                  "valueString": "https://i.pravatar.cc/150?img=33"
                }
              ]
            },
            {
              "key": "subject",
              "valueString": "Next Week's Project Meeting Schedule"
            },
            {
              "key": "date",
              "valueString": "January 15, 2024"
            },
            {
              "key": "time",
              "valueString": "10:30 AM"
            },
            {
              "key": "body",
              "valueString": "Hi,\n\nI wanted to confirm next Wednesday's project progress meeting. It will take place in Conference Room A and is expected to last two hours.\n\nAgenda:\n1. Project progress review\n2. Discussion of current issues\n3. Planning for the next phase\n\nPlease prepare the relevant materials in advance, and let me know as soon as possible if you have a scheduling conflict.\n\nThanks,\nAlex Zhang"
            }
          ]
        }
      }
    ]
  }
}