{
  "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file",
  "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json",
  "apiVersion": "1.0.0",
  "name": "Chat",
  "description": "Conversational log that displays an ordered list of inbound and outbound chat messages, bookend separators that mark the start and end of a session, and event entries that narrate session-level changes between a customer and a service agent.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./chat.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "chat",
    "restrict": [
      "section"
    ],
    "description": "Root chat log container. Carries role=log to communicate the live message log semantics.",
    "attributes": {
      "static": {
        "class": "slds-chat"
      }
    },
    "modifiers": [
      {
        "name": "past",
        "attribute": "class",
        "value": "slds-chat_past",
        "description": "Renders the chat in the past-session treatment used for read-only history scanning."
      }
    ],
    "children": [
      {
        "name": "list",
        "restrict": [
          "ul"
        ],
        "description": "Ordered list that holds every chat entry (messages, bookends, events).",
        "attributes": {
          "static": {
            "class": "slds-chat-list"
          }
        },
        "children": [
          {
            "name": "listitem",
            "restrict": [
              "li"
            ],
            "description": "Single entry in the chat log. Each entry hosts exactly one of: a message, a bookend, or an event, with the listitem variant selecting the entry type and spacing.",
            "repeats": true,
            "attributes": {
              "static": {
                "class": "slds-chat-listitem"
              }
            },
            "variants": [
              {
                "name": "type",
                "description": "Mutually exclusive entry type that controls listitem spacing and alignment.",
                "options": [
                  {
                    "value": "inbound",
                    "class": "slds-chat-listitem_inbound",
                    "description": "Customer-side message entry."
                  },
                  {
                    "value": "outbound",
                    "class": "slds-chat-listitem_outbound",
                    "description": "Agent-side message entry, aligned to the inline-end edge."
                  },
                  {
                    "value": "bookend",
                    "class": "slds-chat-listitem_bookend",
                    "description": "Session start or stop bookend entry."
                  },
                  {
                    "value": "event",
                    "class": "slds-chat-listitem_event",
                    "description": "Session-level event entry (transfer, flag, error, etc.)."
                  }
                ]
              }
            ],
            "children": [
              {
                "name": "message",
                "restrict": [
                  "div"
                ],
                "description": "Wrapper for a single chat message and its avatar/body content.",
                "renderWhen": {
                  "prop": "type",
                  "eq": "inbound"
                },
                "attributes": {
                  "static": {
                    "class": "slds-chat-message"
                  }
                },
                "modifiers": [
                  {
                    "name": "fauxAvatar",
                    "attribute": "class",
                    "value": "slds-chat-message_faux-avatar",
                    "description": "Adds inline-start padding so a consecutive inbound message aligns with the prior message's body instead of repeating the avatar."
                  }
                ],
                "children": [
                  {
                    "name": "avatar",
                    "restrict": [
                      "span"
                    ],
                    "description": "Avatar shown on inbound messages. Combines the cross-component avatar classes with the chat-specific spacing class.",
                    "renderWhen": "propFilled",
                    "attributes": {
                      "static": {
                        "class": "slds-avatar slds-avatar_circle slds-chat-avatar"
                      }
                    },
                    "children": [
                      {
                        "name": "avatarInitials",
                        "restrict": [
                          "abbr"
                        ],
                        "description": "Initials rendered inside the avatar.",
                        "attributes": {
                          "static": {
                            "class": "slds-avatar__initials slds-avatar__initials_inverse"
                          }
                        }
                      }
                    ]
                  },
                  {
                    "name": "body",
                    "restrict": [
                      "div"
                    ],
                    "description": "Vertical stack that holds the message text/file/image plus meta and resend action.",
                    "attributes": {
                      "static": {
                        "class": "slds-chat-message__body"
                      }
                    },
                    "modifiers": [
                      {
                        "name": "imageLoading",
                        "attribute": "class",
                        "value": "slds-chat-message__image_loading",
                        "description": "Reserves the loading footprint sized for an image attachment while it loads."
                      },
                      {
                        "name": "fileLoading",
                        "attribute": "class",
                        "value": "slds-chat-message__file_loading",
                        "description": "Reserves the loading footprint sized for a file attachment while it loads."
                      }
                    ],
                    "children": [
                      {
                        "name": "text",
                        "restrict": [
                          "div"
                        ],
                        "description": "Text payload of the message. The textStyle variant selects the bubble treatment.",
                        "attributes": {
                          "static": {
                            "class": "slds-chat-message__text"
                          }
                        },
                        "modifiers": [
                          {
                            "name": "sneakPeek",
                            "attribute": "class",
                            "value": "slds-chat-message__text_sneak-peek",
                            "description": "Italicizes the text and spaces the typing icon when sneak-peek of the customer's draft is shown."
                          }
                        ],
                        "variants": [
                          {
                            "name": "textStyle",
                            "description": "Mutually exclusive bubble treatment for the message text.",
                            "options": [
                              {
                                "value": "inbound",
                                "class": "slds-chat-message__text_inbound",
                                "description": "Customer-side text bubble."
                              },
                              {
                                "value": "outbound",
                                "class": "slds-chat-message__text_outbound",
                                "description": "Agent-side text bubble for the current agent."
                              },
                              {
                                "value": "outboundAgent",
                                "class": "slds-chat-message__text_outbound-agent",
                                "description": "Agent-side text bubble for a different agent in the conversation."
                              },
                              {
                                "value": "unsupportedType",
                                "class": "slds-chat-message__text_unsupported-type",
                                "description": "Treatment for an inbound message whose type is not supported."
                              },
                              {
                                "value": "deliveryFailure",
                                "class": "slds-chat-message__text_delivery-failure",
                                "description": "Treatment for an outbound message that failed to deliver."
                              }
                            ]
                          }
                        ],
                        "children": [
                          {
                            "name": "deliveryFailureReason",
                            "restrict": [
                              "div"
                            ],
                            "description": "Inline explanation rendered inside a delivery-failure bubble describing why the message did not send. Carries role=alert.",
                            "renderWhen": {
                              "prop": "textStyle",
                              "eq": "deliveryFailure"
                            },
                            "attributes": {
                              "static": {
                                "class": "slds-chat-message__text_delivery-failure-reason"
                              }
                            }
                          }
                        ]
                      },
                      {
                        "name": "image",
                        "restrict": [
                          "div"
                        ],
                        "description": "Image attachment payload. Hosts the absorbed file component preview.",
                        "attributes": {
                          "static": {
                            "class": "slds-chat-message__image"
                          }
                        },
                        "variants": [
                          {
                            "name": "imageStyle",
                            "description": "Mutually exclusive bubble treatment for an image attachment.",
                            "options": [
                              {
                                "value": "inbound",
                                "class": "slds-chat-message__image_inbound",
                                "description": "Customer-side image bubble."
                              },
                              {
                                "value": "outbound",
                                "class": "slds-chat-message__image_outbound",
                                "description": "Agent-side image bubble."
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "name": "file",
                        "restrict": [
                          "div"
                        ],
                        "description": "File attachment payload. Hosts the absorbed file component card.",
                        "attributes": {
                          "static": {
                            "class": "slds-chat-message__file"
                          }
                        },
                        "variants": [
                          {
                            "name": "fileStyle",
                            "description": "Mutually exclusive bubble treatment for a file attachment.",
                            "options": [
                              {
                                "value": "inbound",
                                "class": "slds-chat-message__file_inbound",
                                "description": "Customer-side file bubble."
                              },
                              {
                                "value": "outbound",
                                "class": "slds-chat-message__file_outbound",
                                "description": "Agent-side file bubble."
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "name": "meta",
                        "restrict": [
                          "div"
                        ],
                        "description": "Author + timestamp metadata caption rendered below the message bubble. Typically carries an aria-label describing who said what when.",
                        "attributes": {
                          "static": {
                            "class": "slds-chat-message__meta"
                          }
                        }
                      },
                      {
                        "name": "actionRow",
                        "restrict": [
                          "div"
                        ],
                        "description": "Row that pairs the meta caption with a resend action for delivery-failure messages.",
                        "renderWhen": {
                          "prop": "textStyle",
                          "eq": "deliveryFailure"
                        },
                        "attributes": {
                          "static": {
                            "class": "slds-grid slds-grid_align-spread slds-grid_vertical-align-start"
                          }
                        },
                        "children": [
                          {
                            "name": "action",
                            "restrict": [
                              "button"
                            ],
                            "description": "Resend button for a failed outbound message. Carries the absorbed button classes plus a top spacing utility.",
                            "attributes": {
                              "static": {
                                "class": "slds-button slds-chat-message__action slds-m-top_xxx-small"
                              }
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "name": "bookend",
                "restrict": [
                  "div"
                ],
                "description": "Bookend block that marks the start or stop of a chat session.",
                "renderWhen": {
                  "prop": "type",
                  "eq": "bookend"
                },
                "attributes": {
                  "static": {
                    "class": "slds-chat-bookend"
                  }
                },
                "modifiers": [
                  {
                    "name": "stop",
                    "attribute": "class",
                    "value": "slds-chat-bookend_stop",
                    "description": "Stop-bookend treatment: top border instead of bottom border."
                  }
                ],
                "children": [
                  {
                    "name": "bookendIcon",
                    "restrict": [
                      "span"
                    ],
                    "description": "Leading icon for the bookend. Carries the absorbed icon-container classes plus the chat-specific spacing class.",
                    "attributes": {
                      "static": {
                        "class": "slds-icon_container slds-chat-icon"
                      }
                    },
                    "children": [
                      {
                        "name": "bookendIconSvg",
                        "restrict": [
                          "svg"
                        ],
                        "description": "Icon glyph rendered inside the bookend icon container.",
                        "attributes": {
                          "static": {
                            "class": "slds-icon slds-icon_x-small slds-icon-text-default"
                          }
                        }
                      }
                    ]
                  },
                  {
                    "name": "bookendText",
                    "restrict": [
                      "p"
                    ],
                    "description": "Bookend label such as 'Chat started by Andy Martinez'."
                  }
                ]
              },
              {
                "name": "event",
                "restrict": [
                  "div"
                ],
                "description": "Session-level event entry such as transfer requests, flags, or errors. Carries role=alert when the event is an error.",
                "renderWhen": {
                  "prop": "type",
                  "eq": "event"
                },
                "attributes": {
                  "static": {
                    "class": "slds-chat-event"
                  }
                },
                "children": [
                  {
                    "name": "eventBody",
                    "restrict": [
                      "div"
                    ],
                    "description": "Inline row holding the event icon and the event description text.",
                    "attributes": {
                      "static": {
                        "class": "slds-chat-event__body"
                      }
                    },
                    "children": [
                      {
                        "name": "eventIcon",
                        "restrict": [
                          "span"
                        ],
                        "description": "Leading icon for the event. Carries the absorbed icon-container classes plus the chat-specific spacing class.",
                        "attributes": {
                          "static": {
                            "class": "slds-icon_container slds-chat-icon"
                          }
                        },
                        "children": [
                          {
                            "name": "eventIconSvg",
                            "restrict": [
                              "svg"
                            ],
                            "description": "Icon glyph rendered inside the event icon container.",
                            "attributes": {
                              "static": {
                                "class": "slds-icon slds-icon_x-small slds-icon-text-default"
                              }
                            }
                          },
                          {
                            "name": "eventIconAssistiveText",
                            "restrict": [
                              "span"
                            ],
                            "description": "Visually hidden label describing the event icon (e.g. 'warning').",
                            "renderWhen": "propFilled",
                            "attributes": {
                              "static": {
                                "class": "slds-assistive-text"
                              }
                            }
                          }
                        ]
                      },
                      {
                        "name": "eventText",
                        "restrict": [
                          "p"
                        ],
                        "description": "Event description text such as 'Jason Dewar sent a transfer request to Amber Cann'."
                      }
                    ]
                  },
                  {
                    "name": "agentMessage",
                    "restrict": [
                      "div"
                    ],
                    "description": "Secondary agent-authored note attached to an event (e.g. context shared on transfer).",
                    "attributes": {
                      "static": {
                        "class": "slds-chat-event__agent-message"
                      }
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "stateClasses": [
    {
      "state": "error",
      "class": "slds-has-error"
    }
  ],
  "states": [
    {
      "name": "error",
      "type": "boolean",
      "description": "Whether the component is in the error state"
    }
  ]
}