{
  "definitions": {
    "events": {
      "$ref": "#/definitions/Events",
      "$schema": "http://json-schema.org/draft-07/schema#",
      "definitions": {
        "Events": {
          "additionalProperties": false,
          "properties": {
            "action": {
              "additionalProperties": false,
              "properties": {
                "action": {
                  "type": "string"
                },
                "messageId": {
                  "type": "string"
                }
              },
              "required": [
                "messageId",
                "action"
              ],
              "type": "object"
            }
          },
          "required": [
            "action"
          ],
          "type": "object"
        }
      }
    },
    "component": {
      "$ref": "#/definitions/Component",
      "$schema": "http://json-schema.org/draft-07/schema#",
      "definitions": {
        "Component": {
          "additionalProperties": false,
          "properties": {
            "actions": {
              "items": {
                "additionalProperties": false,
                "properties": {
                  "icon": {
                    "type": "string"
                  },
                  "name": {
                    "type": "string"
                  }
                },
                "required": [
                  "icon",
                  "name"
                ],
                "type": "object"
              },
              "type": "array"
            },
            "authors": {
              "items": {
                "$ref": "#/definitions/TAuthor"
              },
              "type": "array"
            },
            "id": {
              "type": "string"
            },
            "messages": {
              "items": {
                "$ref": "#/definitions/TMessage"
              },
              "type": "array"
            },
            "options": {
              "additionalProperties": false,
              "properties": {
                "bubbles": {
                  "type": "boolean"
                },
                "showAvatar": {
                  "type": "boolean"
                },
                "showName": {
                  "type": "boolean"
                },
                "showTimestamp": {
                  "type": "boolean"
                }
              },
              "type": "object"
            },
            "style": {
              "type": "string"
            }
          },
          "required": [
            "messages",
            "authors"
          ],
          "type": "object"
        },
        "TAuthor": {
          "additionalProperties": false,
          "properties": {
            "avatar": {
              "type": "string"
            },
            "id": {
              "type": "string"
            },
            "isAI": {
              "type": "boolean"
            },
            "me": {
              "type": "boolean"
            },
            "name": {
              "type": "string"
            },
            "status": {
              "enum": [
                "online",
                "offline",
                "away",
                "busy"
              ],
              "type": "string"
            }
          },
          "required": [
            "id",
            "name"
          ],
          "type": "object"
        },
        "TMessage": {
          "additionalProperties": false,
          "properties": {
            "authorId": {
              "type": "string"
            },
            "id": {
              "type": "string"
            },
            "language": {
              "type": "string"
            },
            "quotedMessageId": {
              "type": "string"
            },
            "reply": {
              "type": "boolean"
            },
            "status": {
              "enum": [
                "pending",
                "sent",
                "received",
                "read"
              ],
              "type": "string"
            },
            "system": {
              "type": "boolean"
            },
            "text": {
              "type": "string"
            },
            "timestamp": {
              "format": "date-time",
              "type": "string"
            },
            "type": {
              "enum": [
                "text",
                "image",
                "video",
                "audio",
                "file",
                "code"
              ],
              "type": "string"
            },
            "uri": {
              "type": "string"
            }
          },
          "required": [
            "id",
            "text",
            "timestamp",
            "type"
          ],
          "type": "object"
        }
      }
    }
  },
  "description": "Renders a conversation from `messages` joined to `authors`: aligned bubbles for self vs others, optional avatars and names, timestamps, and code blocks with language badges when `type` is `code`. `options` toggle bubbles, avatars, names, and time; `actions` adds per-message icon buttons that dispatch `action` with `messageId` and action name. Consecutive messages from the same author collapse avatar spacing within a short time window.",
  "storybookArgs": {
    "messages": {
      "control": {
        "type": "object"
      }
    },
    "authors": {
      "control": {
        "type": "object"
      }
    },
    "options": {
      "control": {
        "type": "object"
      }
    },
    "actions": {
      "control": {
        "type": "object"
      }
    },
    "action": {
      "action": "action"
    }
  },
  "styleSetup": {
    "vars": [
      {
        "name": "--bulma-primary",
        "valueType": "color",
        "defaultValue": "#00d1b2",
        "description": "\"Self\" bubble background and accents."
      },
      {
        "name": "--bulma-primary-invert",
        "valueType": "color",
        "defaultValue": "#fff",
        "description": "Text on primary bubble background."
      },
      {
        "name": "--bulma-border",
        "valueType": "color",
        "defaultValue": "#dbdbdb",
        "description": "Peer / neutral bubble borders."
      },
      {
        "name": "--bulma-text",
        "valueType": "color",
        "defaultValue": "#363636",
        "description": "Sets the default message and caption color inside bubbles and neutral areas so transcript text stays readable when you change backgrounds."
      },
      {
        "name": "--bulma-text-weak",
        "valueType": "color",
        "defaultValue": "#7a7a7a",
        "description": "Muted text (timestamps, \"You\" label)."
      },
      {
        "name": "--bulma-background",
        "valueType": "color",
        "defaultValue": "#f5f5f5",
        "description": "Page-level background on `:host` (transcript canvas). Prefer setting Bulma theme on `html`/`body` or `data-theme` so light/dark tokens apply."
      },
      {
        "name": "--bulma-scheme-main-bis",
        "valueType": "color",
        "defaultValue": "#f5f5f5",
        "description": "Elevated bubble surface (peer / neutral); falls back with `light-dark()` if unset."
      },
      {
        "name": "--bulma-scheme-main-ter",
        "valueType": "color",
        "defaultValue": "#f0f0f0",
        "description": "Slightly stronger surface (e.g. code language chip mix)."
      },
      {
        "name": "--bulma-scheme-main",
        "valueType": "color",
        "defaultValue": "#fff",
        "description": "Code block foreground mix target (high-contrast snippet text)."
      },
      {
        "name": "--hb-messages-list-canvas",
        "valueType": "color",
        "defaultValue": "unset",
        "description": "Optional background for the transcript area. Omit this custom property so the host uses `--bulma-background` (Bulma page tone), then `transparent`."
      },
      {
        "name": "--hb-messages-scrollbar-width",
        "valueType": "number",
        "defaultValue": "9px",
        "description": "Width of the vertical scrollbar gutter (WebKit); Firefox uses `scrollbar-width: thin`."
      },
      {
        "name": "--hb-messages-scrollbar-thumb",
        "valueType": "color",
        "defaultValue": "computed",
        "description": "Scrollbar thumb; omit to use the built-in theme mix (text + `--bulma-scheme-main-ter`)."
      },
      {
        "name": "--hb-messages-scrollbar-thumb-hover",
        "valueType": "color",
        "defaultValue": "computed",
        "description": "Scrollbar thumb hover; omit to use a mix with `--bulma-link`."
      },
      {
        "name": "--hb-messages-scrollbar-track",
        "valueType": "color",
        "defaultValue": "computed",
        "description": "Track behind the thumb (Firefox). WebKit uses a transparent track with a floating pill thumb."
      },
      {
        "name": "--bulma-radius-large",
        "valueType": "number",
        "defaultValue": "0.75rem",
        "description": "Bubble corner radius."
      },
      {
        "name": "--bulma-radius-rounded",
        "valueType": "number",
        "defaultValue": "9999px",
        "description": "Circular action buttons and avatars."
      }
    ],
    "parts": [
      {
        "name": "message-body",
        "description": "Inner bubble body (text / code content)."
      },
      {
        "name": "message",
        "description": "Outer bubble wrapper for a single message."
      },
      {
        "name": "message-bubble-me",
        "description": "Bubble for the author marked `me`."
      },
      {
        "name": "message-bubble-them",
        "description": "Bubble for other participants."
      },
      {
        "name": "message-timestamp",
        "description": "Timestamp label next to a message."
      },
      {
        "name": "empty-state",
        "description": "Placeholder when there are no messages."
      }
    ]
  },
  "contributors": [],
  "htmlSlots": [],
  "i18n": [],
  "examples": [
    {
      "name": "default",
      "data": {
        "messages": [
          {
            "id": "1",
            "text": "Hello",
            "timestamp": "2026-04-30T22:22:08.050Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "2",
            "text": "Hi",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          }
        ],
        "authors": [
          {
            "id": "1",
            "name": "John",
            "avatar": "https://i.pravatar.cc/300?img=1",
            "status": "online",
            "me": true
          },
          {
            "id": "2",
            "name": "Mary",
            "avatar": "https://i.pravatar.cc/300?img=2",
            "status": "online"
          }
        ]
      }
    },
    {
      "name": "moreMessages",
      "data": {
        "messages": [
          {
            "id": "1",
            "text": "Hello",
            "timestamp": "2026-04-30T22:22:08.050Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "2",
            "text": "Hi",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          },
          {
            "id": "3",
            "text": "How are you?",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          },
          {
            "id": "4",
            "text": "I'm fine, thanks, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are you? I'm fine too, thanks for asking, how are",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "5",
            "text": "What about you?",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          },
          {
            "id": "6",
            "text": "I'm fine too, thanks for asking",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "7",
            "text": "You're welcome",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          },
          {
            "id": "8",
            "text": "Bye",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "9",
            "text": "Bye",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          },
          {
            "id": "10",
            "text": "See you later",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "11",
            "text": "See you later",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          },
          {
            "id": "12",
            "text": "Bye",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "13",
            "text": "Bye",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          }
        ],
        "authors": [
          {
            "id": "1",
            "name": "John",
            "avatar": "https://i.pravatar.cc/300?img=1",
            "status": "online",
            "me": true
          },
          {
            "id": "2",
            "name": "Mary",
            "avatar": "https://i.pravatar.cc/300?img=2",
            "status": "online"
          }
        ]
      }
    },
    {
      "name": "mixedMessageTypes",
      "description": "Example with different message types: text, image, code, video, audio, and file",
      "data": {
        "messages": [
          {
            "id": "1",
            "text": "Check out this image!",
            "timestamp": "2026-04-30T22:22:40.450Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "2",
            "text": "Nice photo!",
            "timestamp": "2026-04-30T22:22:40.550Z",
            "type": "image",
            "status": "received",
            "authorId": "2",
            "uri": "https://picsum.photos/300/200"
          },
          {
            "id": "3",
            "text": "Here's a code snippet:",
            "timestamp": "2026-04-30T22:22:41.050Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "4",
            "text": "function hello() {\n  console.log('Hello World!');\n}",
            "timestamp": "2026-04-30T22:22:41.150Z",
            "type": "code",
            "status": "sent",
            "authorId": "1",
            "language": "javascript"
          },
          {
            "id": "5",
            "text": "Great code! Here's a video response:",
            "timestamp": "2026-04-30T22:22:41.550Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          },
          {
            "id": "6",
            "text": "Video message",
            "timestamp": "2026-04-30T22:22:41.650Z",
            "type": "video",
            "status": "received",
            "authorId": "2",
            "uri": "https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4"
          },
          {
            "id": "7",
            "text": "Audio message",
            "timestamp": "2026-04-30T22:22:42.050Z",
            "type": "audio",
            "status": "sent",
            "authorId": "1",
            "uri": "https://www.soundjay.com/misc/sounds/bell-ringing-05.wav"
          },
          {
            "id": "8",
            "text": "Document.pdf",
            "timestamp": "2026-04-30T22:22:42.550Z",
            "type": "file",
            "status": "received",
            "authorId": "2",
            "uri": "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
          }
        ],
        "authors": [
          {
            "id": "1",
            "name": "John",
            "avatar": "https://i.pravatar.cc/300?img=1",
            "status": "online",
            "me": true
          },
          {
            "id": "2",
            "name": "Mary",
            "avatar": "https://i.pravatar.cc/300?img=2",
            "status": "online"
          }
        ]
      }
    },
    {
      "name": "differentAuthorStatuses",
      "description": "Example showing different author statuses: online, away, busy, and offline",
      "data": {
        "messages": [
          {
            "id": "1",
            "text": "Hello",
            "timestamp": "2026-04-30T22:22:08.050Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "2",
            "text": "Hi",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          }
        ],
        "authors": [
          {
            "id": "1",
            "name": "John",
            "avatar": "https://i.pravatar.cc/300?img=1",
            "status": "online",
            "me": true
          },
          {
            "id": "2",
            "name": "Mary",
            "avatar": "https://i.pravatar.cc/300?img=2",
            "status": "away"
          },
          {
            "id": "3",
            "name": "Bob",
            "avatar": "https://i.pravatar.cc/300?img=3",
            "status": "busy"
          },
          {
            "id": "4",
            "name": "Alice",
            "avatar": "https://i.pravatar.cc/300?img=4",
            "status": "offline"
          }
        ]
      }
    },
    {
      "name": "aiConversation",
      "description": "Example with AI assistant conversation including code snippets",
      "data": {
        "messages": [
          {
            "id": "1",
            "text": "What's the weather like today?",
            "timestamp": "2026-04-30T22:22:40.450Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "2",
            "text": "I don't have access to real-time weather data, but I can help you find weather information. You can check your local weather app or visit a weather website like weather.com.",
            "timestamp": "2026-04-30T22:22:40.550Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          },
          {
            "id": "3",
            "text": "Can you help me write a function in JavaScript?",
            "timestamp": "2026-04-30T22:22:41.050Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "4",
            "text": "Of course! Here's a simple JavaScript function:",
            "timestamp": "2026-04-30T22:22:41.150Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          },
          {
            "id": "5",
            "text": "function greet(name) {\n  return `Hello, ${name}!`;\n}\n\nconsole.log(greet('World'));",
            "timestamp": "2026-04-30T22:22:41.250Z",
            "type": "code",
            "status": "received",
            "authorId": "2",
            "language": "javascript"
          }
        ],
        "authors": [
          {
            "id": "1",
            "name": "User",
            "avatar": "https://i.pravatar.cc/300?img=1",
            "status": "online",
            "me": true
          },
          {
            "id": "2",
            "name": "AI Assistant",
            "avatar": "https://i.pravatar.cc/300?img=5",
            "status": "online",
            "isAI": true
          }
        ]
      }
    },
    {
      "name": "systemMessagesAndReplies",
      "description": "Example with system messages and reply functionality",
      "data": {
        "messages": [
          {
            "id": "1",
            "text": "Mary joined the chat",
            "timestamp": "2026-04-30T22:22:40.450Z",
            "type": "text",
            "status": "received",
            "authorId": "2",
            "system": true
          },
          {
            "id": "2",
            "text": "Hello everyone!",
            "timestamp": "2026-04-30T22:22:40.550Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "3",
            "text": "Hi John! How are you?",
            "timestamp": "2026-04-30T22:22:40.650Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          },
          {
            "id": "4",
            "text": "I'm doing great, thanks for asking!",
            "timestamp": "2026-04-30T22:22:40.750Z",
            "type": "text",
            "status": "sent",
            "authorId": "1",
            "reply": true,
            "quotedMessageId": "3"
          },
          {
            "id": "5",
            "text": "That's wonderful to hear!",
            "timestamp": "2026-04-30T22:22:40.850Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          }
        ],
        "authors": [
          {
            "id": "1",
            "name": "John",
            "avatar": "https://i.pravatar.cc/300?img=1",
            "status": "online",
            "me": true
          },
          {
            "id": "2",
            "name": "Mary",
            "avatar": "https://i.pravatar.cc/300?img=2",
            "status": "online"
          }
        ]
      }
    },
    {
      "name": "messageStatuses",
      "description": "Example showing different message statuses: pending, sent, received, and read",
      "data": {
        "messages": [
          {
            "id": "1",
            "text": "This message is pending...",
            "timestamp": "2026-04-30T22:22:43.050Z",
            "type": "text",
            "status": "pending",
            "authorId": "1"
          },
          {
            "id": "2",
            "text": "This message was sent",
            "timestamp": "2026-04-30T22:22:42.050Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "3",
            "text": "This message was received",
            "timestamp": "2026-04-30T22:22:41.050Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          },
          {
            "id": "4",
            "text": "This message was read",
            "timestamp": "2026-04-30T22:22:40.050Z",
            "type": "text",
            "status": "read",
            "authorId": "2"
          }
        ],
        "authors": [
          {
            "id": "1",
            "name": "John",
            "avatar": "https://i.pravatar.cc/300?img=1",
            "status": "online",
            "me": true
          },
          {
            "id": "2",
            "name": "Mary",
            "avatar": "https://i.pravatar.cc/300?img=2",
            "status": "online"
          }
        ]
      }
    },
    {
      "name": "noTimestamps",
      "description": "Example with timestamps disabled",
      "data": {
        "messages": [
          {
            "id": "1",
            "text": "Hello",
            "timestamp": "2026-04-30T22:22:08.050Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "2",
            "text": "Hi",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          }
        ],
        "authors": [
          {
            "id": "1",
            "name": "John",
            "avatar": "https://i.pravatar.cc/300?img=1",
            "status": "online",
            "me": true
          },
          {
            "id": "2",
            "name": "Mary",
            "avatar": "https://i.pravatar.cc/300?img=2",
            "status": "online"
          }
        ],
        "options": {
          "showTimestamp": false,
          "showAvatar": true,
          "showName": true,
          "bubbles": true
        },
        "actions": [
          {
            "icon": "clipboard",
            "name": "copy"
          },
          {
            "icon": "trash",
            "name": "delete"
          },
          {
            "icon": "pencil",
            "name": "edit"
          }
        ]
      }
    },
    {
      "name": "noAvatars",
      "description": "Example with avatars disabled",
      "data": {
        "messages": [
          {
            "id": "1",
            "text": "Hello",
            "timestamp": "2026-04-30T22:22:08.050Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "2",
            "text": "Hi",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          }
        ],
        "authors": [
          {
            "id": "1",
            "name": "John",
            "avatar": "https://i.pravatar.cc/300?img=1",
            "status": "online",
            "me": true
          },
          {
            "id": "2",
            "name": "Mary",
            "avatar": "https://i.pravatar.cc/300?img=2",
            "status": "online"
          }
        ],
        "options": {
          "showTimestamp": true,
          "showAvatar": false,
          "showName": true,
          "bubbles": true
        },
        "actions": [
          {
            "icon": "clipboard",
            "name": "copy"
          },
          {
            "icon": "trash",
            "name": "delete"
          },
          {
            "icon": "pencil",
            "name": "edit"
          }
        ]
      }
    },
    {
      "name": "noBubbles",
      "description": "Example with bubble styling disabled",
      "data": {
        "messages": [
          {
            "id": "1",
            "text": "Hello",
            "timestamp": "2026-04-30T22:22:08.050Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "2",
            "text": "Hi",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          }
        ],
        "authors": [
          {
            "id": "1",
            "name": "John",
            "avatar": "https://i.pravatar.cc/300?img=1",
            "status": "online",
            "me": true
          },
          {
            "id": "2",
            "name": "Mary",
            "avatar": "https://i.pravatar.cc/300?img=2",
            "status": "online"
          }
        ],
        "options": {
          "showTimestamp": true,
          "showAvatar": true,
          "showName": true,
          "bubbles": false
        },
        "actions": [
          {
            "icon": "clipboard",
            "name": "copy"
          },
          {
            "icon": "trash",
            "name": "delete"
          },
          {
            "icon": "pencil",
            "name": "edit"
          }
        ]
      }
    },
    {
      "name": "minimalOptions",
      "description": "Example with minimal options enabled",
      "data": {
        "messages": [
          {
            "id": "1",
            "text": "Hello",
            "timestamp": "2026-04-30T22:22:08.050Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "2",
            "text": "Hi",
            "timestamp": "2026-04-30T22:22:44.050Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          }
        ],
        "authors": [
          {
            "id": "1",
            "name": "John",
            "avatar": "https://i.pravatar.cc/300?img=1",
            "status": "online",
            "me": true
          },
          {
            "id": "2",
            "name": "Mary",
            "avatar": "https://i.pravatar.cc/300?img=2",
            "status": "online"
          }
        ],
        "options": {
          "showTimestamp": false,
          "showAvatar": false,
          "showName": false,
          "bubbles": false
        },
        "actions": [
          {
            "icon": "clipboard",
            "name": "copy"
          },
          {
            "icon": "trash",
            "name": "delete"
          },
          {
            "icon": "pencil",
            "name": "edit"
          }
        ]
      }
    },
    {
      "name": "fullOptions",
      "description": "Example with all options enabled",
      "data": {
        "messages": [
          {
            "id": "1",
            "text": "Check out this image!",
            "timestamp": "2026-04-30T22:22:40.450Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "2",
            "text": "Nice photo!",
            "timestamp": "2026-04-30T22:22:40.550Z",
            "type": "image",
            "status": "received",
            "authorId": "2",
            "uri": "https://picsum.photos/300/200"
          },
          {
            "id": "3",
            "text": "Here's a code snippet:",
            "timestamp": "2026-04-30T22:22:41.050Z",
            "type": "text",
            "status": "sent",
            "authorId": "1"
          },
          {
            "id": "4",
            "text": "function hello() {\n  console.log('Hello World!');\n}",
            "timestamp": "2026-04-30T22:22:41.150Z",
            "type": "code",
            "status": "sent",
            "authorId": "1",
            "language": "javascript"
          },
          {
            "id": "5",
            "text": "Great code! Here's a video response:",
            "timestamp": "2026-04-30T22:22:41.550Z",
            "type": "text",
            "status": "received",
            "authorId": "2"
          },
          {
            "id": "6",
            "text": "Video message",
            "timestamp": "2026-04-30T22:22:41.650Z",
            "type": "video",
            "status": "received",
            "authorId": "2",
            "uri": "https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4"
          },
          {
            "id": "7",
            "text": "Audio message",
            "timestamp": "2026-04-30T22:22:42.050Z",
            "type": "audio",
            "status": "sent",
            "authorId": "1",
            "uri": "https://www.soundjay.com/misc/sounds/bell-ringing-05.wav"
          },
          {
            "id": "8",
            "text": "Document.pdf",
            "timestamp": "2026-04-30T22:22:42.550Z",
            "type": "file",
            "status": "received",
            "authorId": "2",
            "uri": "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
          }
        ],
        "authors": [
          {
            "id": "1",
            "name": "John",
            "avatar": "https://i.pravatar.cc/300?img=1",
            "status": "online",
            "me": true
          },
          {
            "id": "2",
            "name": "Mary",
            "avatar": "https://i.pravatar.cc/300?img=2",
            "status": "away"
          },
          {
            "id": "3",
            "name": "Bob",
            "avatar": "https://i.pravatar.cc/300?img=3",
            "status": "busy"
          },
          {
            "id": "4",
            "name": "Alice",
            "avatar": "https://i.pravatar.cc/300?img=4",
            "status": "offline"
          }
        ],
        "options": {
          "showTimestamp": true,
          "showAvatar": true,
          "showName": true,
          "bubbles": true
        },
        "actions": [
          {
            "icon": "clipboard",
            "name": "copy"
          },
          {
            "icon": "trash",
            "name": "delete"
          },
          {
            "icon": "pencil",
            "name": "edit"
          }
        ]
      }
    }
  ],
  "iifeIntegrity": "sha384-w5BHPebkBElyqNVNcuuDolGEAPvD/mFdI8aDw2LRK8Ytzw198fmZHawVA/EHlvbb",
  "dependencies": [],
  "screenshots": [],
  "licenses": [
    {
      "type": "Apache-2.0",
      "path": "LICENSE.md",
      "cost": 0,
      "currency": "EUR"
    }
  ],
  "readmePath": "README.md",
  "name": "hb-messages-list",
  "category": "messaging",
  "tags": [
    "messaging",
    "chat"
  ],
  "size": {},
  "iifePath": "main.iife.js",
  "repoName": "@htmlbricks/hb-messages-list",
  "version": "0.76.5"
}