{
  "type": "component",
  "meta": {
    "docsUrl": "https://v1.quasar.dev/vue-components/chat"
  },
  "behavior": {
    "$listeners": {
      "desc": "All native events are being propagated (you don't need the '.native' modifier)"
    }
  },
  "props": {
    "sent": {
      "type": "Boolean",
      "desc": "Render as a sent message (so from current user)",
      "category": "content"
    },
    "label": {
      "type": "String",
      "desc": "Renders a label header/section only",
      "examples": [
        "Friday, 18th"
      ],
      "category": "content"
    },
    "bg-color": {
      "type": "String",
      "desc": "Color name (from the Quasar Color Palette) for chat bubble background",
      "examples": [
        "primary",
        "teal-10"
      ],
      "category": "style"
    },
    "text-color": {
      "type": "String",
      "desc": "Color name (from the Quasar Color Palette) for chat bubble text",
      "examples": [
        "primary",
        "teal-10"
      ],
      "category": "style"
    },
    "name": {
      "type": "String",
      "desc": "Author's name",
      "examples": [
        "John Doe"
      ],
      "category": "content"
    },
    "avatar": {
      "type": "String",
      "desc": "URL to the avatar image of the author",
      "transformAssetUrls": true,
      "examples": [
        "(statics folder) src=\"statics/boy-avatar.png\"",
        "(assets folder) src=\"~assets/boy-avatar.png\"",
        "(relative path format) :src=\"require('./my_img.jpg')\"",
        "(URL) src=\"https://placeimg.com/500/300/nature\""
      ],
      "category": "content"
    },
    "text": {
      "type": "Array",
      "desc": "Array of strings that are the message body. Strings are not sanitized (see details in docs)",
      "examples": [
        ":text=\"['How are you?']\"",
        ":text=\"['I\\'m good, thank you!', 'And you?']\""
      ],
      "category": "content"
    },
    "stamp": {
      "type": "String",
      "desc": "Creation timestamp",
      "examples": [
        "13:55",
        "Yesterday at 13:51"
      ],
      "category": "content"
    },
    "size": {
      "type": "String",
      "desc": "1-12 out of 12 (same as col-*)",
      "examples": [
        "4",
        "6",
        "12"
      ],
      "category": "style"
    },
    "label-sanitize": {
      "type": "Boolean",
      "default": "false",
      "desc": "Force use of textContent instead of innerHTML to render label; Use it when the label might be unsafe (from user input)",
      "category": "behavior"
    },
    "name-sanitize": {
      "type": "Boolean",
      "default": "false",
      "desc": "Force use of textContent instead of innerHTML to render name; Use it when the name might be unsafe (from user input)",
      "category": "behavior"
    },
    "text-sanitize": {
      "type": "Boolean",
      "default": "false",
      "desc": "Force use of textContent instead of innerHTML to render text; Use it when the text might be unsafe (from user input)",
      "category": "behavior"
    },
    "stamp-sanitize": {
      "type": "Boolean",
      "default": "false",
      "desc": "Force use of textContent instead of innerHTML to render stamp; Use it when the stamp might be unsafe (from user input)",
      "category": "behavior"
    }
  },
  "slots": {
    "default": {
      "desc": "You can use this slot to define a custom message (overrides props)"
    },
    "avatar": {
      "desc": "Slot for avatar; Suggestion: QAvatar, img"
    }
  }
}