Message entry

<article data-kit-role="message-entry">
  <header>
    <span data-kit-region="author"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">AK</span><span data-kit-region="picture" style="background-image: url(&quot;data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIGZpbGw9IiM4ZmE1YjYiLz48Y2lyY2xlIGN4PSI0OCIgY3k9IjM4IiByPSIxOCIgZmlsbD0iI2U4YzlhOCIvPjxwYXRoIGQ9Ik00OCA2MGMtMTcgMC0yOSAxMS0zMSAyNnYxMGg2MlY4NmMtMi0xNS0xNC0yNi0zMS0yNnoiIGZpbGw9IiMzZjVkNTIiLz48cGF0aCBkPSJNMzAgMzRjMC0xMiA4LTIwIDE4LTIwczE4IDggMTggMjBjMC02LTYtOC0xOC04cy0xOCAyLTE4IDh6IiBmaWxsPSIjNGEzYTJmIi8+PC9zdmc+&quot;)"></span><span data-kit-region="availability" aria-hidden="true"></span></span>Aisha Khan<span data-kit-region="availability"> Away</span></span>
    <time data-kit-region="time" datetime="2025-02-03T09:12+00:00"><span>3 February 2025</span><wbr><span> at 09:12</span></time>
  </header>
  <div data-kit-region="body" data-kit-authored-text="true"><h5>Before you arrive</h5><p>Ask <a data-kit-region="mention" href="#role-message-entry">@Aisha Khan</a> to confirm <strong>the address</strong> for <span data-kit-region="mention">B-1042 Garden room</span> before <time datetime="2025-03-14">14 March 2025</time>.<br>Read the <a href="https://example.com/hire-terms">hire terms</a> first, <em>then</em> use <code>4721</code> at the gate.</p><ul><li><p>Bring your own chairs.</p></li><li><p>Leave the hall by ten.</p></li></ul><ol><li><p>Ring the bell by the side gate.</p></li><li><p>Wait for the caretaker.</p></li></ol><ul><li><svg data-kit-icon="check-square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM224,48V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM208,208V48H48V208H208Z"></path></svg><span data-kit-region="spoken">Done</span><p>Deposit paid</p></li><li><svg data-kit-icon="square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,176H48V48H208V208Z"></path></svg><span data-kit-region="spoken">Not done</span><p>Key returned</p></li></ul><blockquote><p>The side door sticks in the cold.</p></blockquote><pre><code>Gate: 4721
Alarm: 0990</code></pre><p>Floor plan: <a href="#role-message-entry">garden-room-plan.pdf</a></p></div>
  <ul data-kit-region="files">
    <li><a href="#role-message-entry">rehearsal-schedule.pdf</a></li>
    <li><a href="#role-message-entry">floor-sealing-dates.pdf</a></li>
  </ul>
  <p data-kit-region="delivery"><span data-kit-role="stamp" data-kit-state="settled">Delivered</span> <span data-kit-region="destination">to bookings@oakmerevillagehall.org</span></p>
</article>
<article data-kit-role="message-entry">
  <header>
    <span data-kit-region="author"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">OH</span></span>You</span>
    <time data-kit-region="time" datetime="2025-02-03T11:40+00:00"><span>3 February 2025</span><wbr><span> at 11:40</span></time>
  </header>
  <div data-kit-region="body" data-kit-authored-text="true"><p>The Garden room is free that week. I have moved the rehearsal and kept the fee as it stands.</p></div>
  <p data-kit-region="delivery"><span data-kit-role="stamp" data-kit-state="neutral">Sending</span> <span data-kit-region="destination">to aisha@oakmereprimary.org</span></p>
</article>
<article data-kit-role="message-entry">
  <header>
    <span data-kit-region="author"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">PS</span></span>Priya Shah, St Anne’s Scout Group committee</span>
    <time data-kit-region="time" datetime="2025-02-04T18:05+00:00"><span>4 February 2025</span><wbr><span> at 18:05</span></time>
  </header>
  <div data-kit-region="body" data-kit-authored-text="true"><p>Thank you. We will bring our own chairs on the night.</p></div>
  <p data-kit-region="delivery"><span data-kit-role="stamp" data-kit-state="settled">Delivered</span> <span data-kit-region="destination">to bookings@oakmerevillagehall.org</span></p>
</article>
<article data-kit-role="message-entry">
  <header>
    <span data-kit-region="author"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">PS</span></span>Priya Shah, St Anne’s Scout Group committee</span>
    <time data-kit-region="time" datetime="2025-02-04T18:20+00:00"><span>4 February 2025</span><wbr><span> at 18:20</span></time>
  </header>
  <div data-kit-region="body" data-kit-authored-text="true"><p>Could we also borrow the long tables for the evening?</p></div>
  <p data-kit-region="delivery"><span data-kit-role="stamp" data-kit-state="settled">Delivered</span> <span data-kit-region="destination">to bookings@oakmerevillagehall.org</span></p>
  <div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Reply</span></button><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Forward</span></button><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Mark as unread</span></button><div id="role-message-entry-fold" data-kit-role="action-menu"><button aria-controls="role-message-entry-fold-layer" aria-haspopup="menu" aria-label="More actions for this message" data-kit-role="icon-action" id="role-message-entry-fold-trigger" type="button"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"></path></svg></button><ul data-kit-role="popover" id="role-message-entry-fold-layer" popover="manual" role="menu" aria-labelledby="role-message-entry-fold-trigger"></ul></div></div>
</article>
<p class="specimen-case-line">With one action unavailable among the others.</p>
<article data-kit-role="message-entry">
  <header>
    <span data-kit-region="author"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">PS</span></span>Priya Shah, St Anne’s Scout Group committee</span>
    <time data-kit-region="time" datetime="2025-02-04T18:20+00:00"><span>4 February 2025</span><wbr><span> at 18:20</span></time>
  </header>
  <div data-kit-region="body" data-kit-authored-text="true"><p>Could we also borrow the long tables for the evening?</p></div>
  <p data-kit-region="delivery"><span data-kit-role="stamp" data-kit-state="settled">Delivered</span> <span data-kit-region="destination">to bookings@oakmerevillagehall.org</span></p>
  <div data-kit-region="actions" data-kit-holds="words"><button type="button" id="role-message-entry-reply" data-kit-role="subtle-action" data-kit-state="inert" disabled aria-describedby="role-message-entry-reply-words"><span data-kit-region="label">Reply</span></button><p data-kit-region="words" id="role-message-entry-reply-words">Reopen this booking before replying.</p><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Forward</span></button><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Mark as unread</span></button></div>
</article>
<p class="specimen-case-line">While a model’s turn saves, How this was made waits.</p>
<article data-kit-role="message-entry">
  <header>
    <span data-kit-region="author">Booking assistant</span>
    <time data-kit-region="time" datetime="2025-02-03T11:42+00:00"><span>3 February 2025</span><wbr><span> at 11:42</span></time>
    <p data-kit-region="mark"><span data-kit-role="stamp" data-kit-state="neutral">Summary</span><button type="button" data-kit-role="subtle-action" id="role-message-entry-turn-how" data-kit-state="inert" disabled aria-describedby="role-message-entry-turn-how-words" popovertarget="role-message-entry-turn"><span data-kit-region="label">How this was made</span></button></p>
    <div id="role-message-entry-turn" data-kit-role="popover" popover="auto">
      <p data-kit-region="made-by">Written by the booking assistant from the messages in this conversation.</p>
      <p data-kit-region="made-at"><time datetime="2025-02-03T11:42+00:00"><span>3 February 2025</span><wbr><span> at 11:42</span></time></p>
      <p data-kit-region="caution">It can be wrong. Check it against the messages.</p>
    </div>
  </header>
  <p data-kit-region="words" id="role-message-entry-turn-how-words">Wait for the summary to save to see how it was made.</p>
  <div data-kit-region="body" data-kit-authored-text="true" aria-live="polite"><p>The choir asks to move its rehearsals to the Garden room while the hall floor is sealed. The Garden room is free those evenings.</p></div>
  <div data-kit-region="actions">
    <button type="button" data-kit-role="secondary-action" data-kit-resting-label="Copy" data-kit-changed-label="Copied"><span data-kit-region="label">Copy</span></button>
    <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Retry</span></button>
  </div>
</article>

<article data-kit-role="message-entry">
  <header>
    <span data-kit-region="author"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">PS</span></span>You</span>
    <time data-kit-region="time" datetime="2025-02-05T10:20+00:00"><span>5 February 2025</span><wbr><span> at 10:20</span></time>
  </header>
  <div data-kit-region="body" data-kit-authored-text="true"><p>The side door sticks in the cold. Send deliveries to the main entrance.</p></div>
  <div data-kit-region="standing" data-kit-state="failed"><p role="alert">This note was not added: the connection dropped before it saved.</p><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Try again</span></button></div>
</article>
<p class="specimen-case-line">With Try again unavailable.</p>
<article data-kit-role="message-entry">
  <header>
    <span data-kit-region="author"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">PS</span></span>You</span>
    <time data-kit-region="time" datetime="2025-02-05T10:20+00:00"><span>5 February 2025</span><wbr><span> at 10:20</span></time>
  </header>
  <div data-kit-region="body" data-kit-authored-text="true"><p>The side door sticks in the cold. Send deliveries to the main entrance.</p></div>
  <div data-kit-region="standing" data-kit-state="failed"><p role="alert">This note was not added: the connection dropped before it saved.</p><button type="button" id="role-message-entry-failed-try-again" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="role-message-entry-failed-try-again-words"><span data-kit-region="label">Try again</span></button><p data-kit-region="words" id="role-message-entry-failed-try-again-words">Try again once you are back online.</p></div>
</article>

<article data-kit-role="message-entry">
  <header>
    <span data-kit-region="author"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">PS</span></span>You</span>
    <time data-kit-region="time" datetime="2025-02-05T10:20+00:00"><span>5 February 2025</span><wbr><span> at 10:20</span></time>
  </header>
  <div data-kit-region="body" data-kit-authored-text="true"><p>The side door sticks in the cold. Send deliveries to the main entrance.</p></div>
  <div data-kit-region="standing" data-kit-state="conflict"><p role="alert">Maya Patel closed this booking while you were adding this note.</p><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Add it to the closed booking</span></button></div>
</article>
<p class="specimen-case-line">With the action unavailable.</p>
<article data-kit-role="message-entry">
  <header>
    <span data-kit-region="author"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">PS</span></span>You</span>
    <time data-kit-region="time" datetime="2025-02-05T10:20+00:00"><span>5 February 2025</span><wbr><span> at 10:20</span></time>
  </header>
  <div data-kit-region="body" data-kit-authored-text="true"><p>The side door sticks in the cold. Send deliveries to the main entrance.</p></div>
  <div data-kit-region="standing" data-kit-state="conflict"><p role="alert">Maya Patel closed this booking while you were adding this note.</p><button type="button" id="role-message-entry-conflict-action" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="role-message-entry-conflict-action-words"><span data-kit-region="label">Add it to the closed booking</span></button><p data-kit-region="words" id="role-message-entry-conflict-action-words">Reopen this booking before adding to it.</p></div>
</article>

<article data-kit-role="message-entry">
  <header>
    <span data-kit-region="author"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">PS</span></span>You</span>
    <time data-kit-region="time" datetime="2025-02-05T10:20+00:00"><span>5 February 2025</span><wbr><span> at 10:20</span></time>
  </header>
  <div data-kit-region="body" data-kit-authored-text="true"><p>The side door sticks in the cold. Send deliveries to the main entrance.</p></div>
  <div data-kit-region="standing" data-kit-state="processing"><p role="status">Adding this note…</p></div>
</article>

<article data-kit-role="message-entry">
  <header>
    <span data-kit-region="author"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">PS</span></span>You</span>
    <time data-kit-region="time" datetime="2025-02-05T10:20+00:00"><span>5 February 2025</span><wbr><span> at 10:20</span></time>
  </header>
  <div data-kit-region="body" data-kit-authored-text="true"><p>The side door sticks in the cold. Send deliveries to the main entrance.</p></div>
  <div data-kit-region="standing" data-kit-state="unsaved"><p role="status">This note will be added when you are back online.</p></div>
</article>