{
  "element": "nve-chat-message",
  "entrypoint": "@nvidia-elements/core/chat-message/chat-message.examples.json",
  "items": [
    {
      "id": "chat-message",
      "name": "Default",
      "template": "<nve-chat-message> Your deployment completed successfully. All services are running as expected. </nve-chat-message>\n",
      "summary": "Basic chat message with default styling and behavior. Use this for simple text-based chat interactions.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "chat-message-arrow-position",
      "name": "ArrowPosition",
      "template": "<section nve-layout=\"column gap:lg\">\n  <nve-chat-message>Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"top-start\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message arrow-position=\"top-end\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message arrow-position=\"bottom-start\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message arrow-position=\"bottom-end\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n</section>\n",
      "summary": "Different arrow positions for chat messages. Useful for creating chat bubbles that point to specific elements or users.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "chat-message-flat",
      "name": "Flat",
      "template": "<section nve-layout=\"column gap:lg full\">\n  <nve-chat-message container=\"flat\">\n    <nve-avatar slot=\"prefix\" color=\"green-grass\">AI</nve-avatar>\n    Your deployment completed successfully. All services are running as expected.\n  </nve-chat-message>\n  <nve-chat-message container=\"flat\" style=\"width: 300px\">\n    <nve-avatar slot=\"prefix\" color=\"green-grass\">AI</nve-avatar>\n    The build pipeline finished processing all stages. Tests passed with 98% coverage, and the deployment to staging was\n    successful. Review the detailed logs in the CI dashboard for more information.\n  </nve-chat-message>\n</section>\n",
      "summary": "Flat container style with avatar integration. Perfect for modern chat interfaces where messages have a cleaner, flatter appearance.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "chat-message-prefix-suffix",
      "name": "PrefixSuffix",
      "template": "<section nve-layout=\"column gap:lg full\" style=\"max-width: 600px\">\n  <nve-chat-message style=\"max-width: 70%\">\n    <nve-avatar slot=\"prefix\" color=\"gray-denim\">AI</nve-avatar>\n    Hello, how may I assist you today?\n  </nve-chat-message>\n  <nve-chat-message style=\"max-width: 70%; margin-left: auto\">\n    How do I use the chat message component?\n    <nve-avatar slot=\"suffix\" color=\"green-grass\">NV</nve-avatar>\n  </nve-chat-message>\n  <nve-chat-message style=\"max-width: 70%\">\n    <nve-avatar slot=\"prefix\" color=\"gray-denim\">AI</nve-avatar>\n    <p nve-text=\"body\">To use the <code nve-text=\"code\">nve-chat-message</code> first import the element.</p>\n    <nve-codeblock language=\"typescript\"> import '@nvidia-elements/code/codeblock/define.js'; </nve-codeblock>\n  </nve-chat-message>\n</section>\n",
      "summary": "Chat conversation with prefix and suffix avatars. Ideal for multi-user chat applications where you need to distinguish between different participants.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "chat-message-codeblock",
      "name": "Codeblock",
      "template": "<section nve-layout=\"column gap:lg full\">\n  <nve-chat-message container=\"flat\" style=\"margin-left: auto\">\n    How do I use the chat message component?\n  </nve-chat-message>\n  <nve-chat-message container=\"flat\">\n    Here's the steps you need to do follow to use the chat message component\n    <nve-codeblock language=\"typescript\">\n      import '@nvidia-elements/core/chat-message/define.js';\n      <code nve-text=\"code\"><nve-chat-message></nve-chat-message></code>\n    </nve-codeblock>\n  </nve-chat-message>\n</section>\n",
      "summary": "Chat messages with code blocks for technical discussions. Perfect for developer chat interfaces or documentation systems.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "chat-message-top-offset",
      "name": "TopOffset",
      "template": "<nve-chat-message arrow-position=\"top-start\" style=\"--top-offset: var(--nve-ref-space-sm)\">\n  <nve-avatar slot=\"prefix\" color=\"gray-denim\">AI</nve-avatar>\n  Hello, how may I assist you today?\n</nve-chat-message>\n",
      "summary": "Custom top offset positioning for precise arrow placement. Useful when you need fine-tuned control over the chat bubble positioning.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "chat-message-color",
      "name": "Color",
      "template": "<section nve-layout=\"column gap:md\">\n  <nve-chat-message>Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"red-cardinal\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"gray-slate\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"gray-denim\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"blue-indigo\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"blue-cobalt\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"blue-sky\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"teal-cyan\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"green-mint\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"teal-seafoam\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"green-grass\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"yellow-amber\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"orange-pumpkin\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"red-tomato\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"pink-magenta\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"purple-plum\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"purple-violet\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"purple-lavender\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"pink-rose\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"green-jade\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"lime-pear\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"yellow-nova\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"brand-green\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n</section>\n",
      "summary": "All available color variants for chat messages. Use these to create themed chat interfaces or to differentiate message types and priorities.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}