Message

<sl-message></sl-message>

<sl-message user-initials="FL" >
  <span slot="user-message">The avatar is placed in the top right to anchor the message content when there are two or more lines.</span>
</sl-message>

<sl-message type="agent">
  <span slot="agent-message">The avatar is placed in the top right to anchor the message content when there are two or more lines.</span>
</sl-message>

<sl-message
  type="agent"
  show-agent-label
  agent-label="AI agent"
>
<span slot="agent-message">The avatar is placed in the top right to anchor the message content when there are two or more lines.</span>
</sl-message>

<sl-message type="agent" >
  <span slot="agent-message">Quam orci neque aliquam diam volutpat aliquam tincidunt erat amet. Faucibus pretium ornare egestas lacus. Mauris scelerisque dignissim ipsum aliquam rhoncus dignissim.</span>
  <sl-card class="card-basic">
    This is just a basic card. No image, no header, and no footer. Just your content.
  </sl-card>
</sl-message>

<sl-message type="user">
</sl-message>

<sl-message type="agent">
</sl-message>

<sl-message type="user" user-message="A sample prompt from the user.">
</sl-message>

<sl-message type="agent" agent-message="A message from your agent.">
</sl-message>

<sl-message
  type="user-agent"
  agent-message="Plain text."
  user-initials="FL"
  user-message="Plain response."
>
  <span slot="user-message">
    The avatar is placed in the top right to anchor the message content when there are two or more lines.
  </span>
  <span slot="agent-message">
    Quam orci neque aliquam diam volutpat aliquam tincidunt erat amet. Faucibus pretium ornare egestas lacus. Mauris scelerisque dignissim ipsum aliquam rhoncus dignissim.
  </span>
</sl-message>

<sl-message
  type="user-agent"
  user-initials="FL"
>
  <span slot="user-message">
    This is a short plain text prompt by the user.
  </span>
  <span slot="agent-message">
    Quam orci neque aliquam diam volutpat aliquam tincidunt erat amet. Faucibus pretium ornare egestas lacus. Mauris scelerisque dignissim ipsum aliquam rhoncus dignissim.
  </span>
</sl-message>

<sl-message
  type="user-agent"
  user-initials="FL"
>
  <span slot="user-message">
    The avatar is placed in the top right to anchor the message content when there are two or more lines.
  </span>
  <span slot="agent-message">
    Quam orci neque aliquam diam volutpat aliquam tincidunt erat amet. Faucibus pretium ornare egestas lacus. Mauris scelerisque dignissim ipsum aliquam rhoncus dignissim.
  </span>
</sl-message>

<sl-message
  type="user-agent"
  user-initials="FL"
>
  <span slot="user-message">
    Plain text prompt
  </span>
  <span slot="agent-message">That’s outside what we can help with here. Alternatively, we can provide information on the following prompts.</span>
  <div class="button-group">
    <sl-button variant="tertiary">Prompt</sl-button>
    <sl-button variant="tertiary">Prompt</sl-button>
    <sl-button variant="tertiary">Prompt</sl-button>
  </div>
</sl-message>

<div class="conversation-container">
  <div class="message">
    <sl-message
      type="user"
      user-initials="FL"
    >
    <span slot="user-message">
      Plain text prompt
    </span>
    </sl-message>
    <div class="agent-message-container">
      <sl-message
        type="agent"
      >
      <div slot="agent-message">
        <span>
          Lorem ipsum dolor sit amet consectetur. Mauris augue in turpis vitae. Natoque lectus varius malesuada nibh. Sit risus hendrerit neque pharetra nibh placerat enim morbi viverra. Tristique quis interdum dictumst diam leo donec massa ut proin. Rutrum egestas cursus sagittis arcu fames ultrices proin tempus.
        </span>
        <br>
        <span>
          Dui proin eget viverra nibh elit sit aenean. Purus ut tristique non faucibus sit a. Viverra imperdiet vulputate vitae elementum odio ultrices amet senectus. Diam massa volutpat elementum facilisis nullam pharetra purus id diam. Id eget risus nunc pulvinar urna nulla lectus. Nec massa ullamcorper tempor adipiscing nisi nisi dictum. Egestas imperdiet quam nec semper dui sit velit. Pharetra nibh enim commodo eu pellentesque dui. Venenatis facilisis pulvinar neque elementum.
        </span>
      </div>
      </sl-message>
    </div>
  </div>
  <sl-ai-prompt></sl-ai-prompt>
</div>

<style>
  .conversation-container {
    display: flex;
    flex-direction: column;
    gap: var(--hds-space-10x, 40px);

  }

  .message {
    overflow: auto;
  }

  .agent-message-container {
    max-height: 200px;
  }
</style>