{
  "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\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"top-end\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"bottom-start\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"bottom-end\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\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 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\"> How do I use the chat message component? </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\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"gray-slate\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"gray-denim\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"blue-indigo\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"blue-cobalt\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"blue-sky\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"teal-cyan\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"green-mint\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"teal-seafoam\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"green-grass\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"yellow-amber\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"orange-pumpkin\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"red-tomato\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"pink-magenta\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"purple-plum\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"purple-violet\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"purple-lavender\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"pink-rose\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"green-jade\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"lime-pear\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"yellow-nova\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"brand-green\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\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"
      ]
    }
  ]
}