kit

Generated

Built revision v17.10.0

CSS core
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

Generated

A reply, with its sources

Suggested

Written by the booking assistant from this enquiry and the hire rules.

It can be wrong. Check it before you send it.

Before you arrive

Ask @Aisha Khan to confirm the address for B-1042 Garden room before .
Read the hire terms first, then use 4721 at the gate.

  • Bring your own chairs.

  • Leave the hall by ten.

  1. Ring the bell by the side gate.

  2. Wait for the caretaker.

  • Done

    Deposit paid

  • Not done

    Key returned

The side door sticks in the cold.

Gate: 4721
Alarm: 0990

Floor plan: garden-room-plan.pdf

A reply while its actions wait

Suggested

Wait for the reply to save to see how it was made.

Written by the booking assistant from this enquiry and the hire rules.

It can be wrong. Check it before you send it.

Hello Aisha,

The Garden room is free on the evenings you rehearse that week. I have held it for the choir until Friday.

Oakmere Village Hall

Wait for the reply to save before copying.

Wait for the reply to save before trying again.

Wait for the reply to save before using it.

A summary, with no sources

Summary

Written by the booking assistant from the messages in this conversation.

It can be wrong. Check it against the messages.

The choir asks to move its rehearsals to the Garden room while the hall floor is sealed. The Garden room is free those evenings.

A field a model filled

Suggested

Chosen by the booking assistant from the rooms free that week.

It can be wrong. Check the room before you save.

Garden room
A model’s turn
Booking assistant

Summary

Written by the booking assistant from the messages in this conversation.

It can be wrong. Check it against the messages.

The choir asks to move its rehearsals to the Garden room while the hall floor is sealed. The Garden room is free those evenings.

A fact a model wrote
Access notes

Suggested

Written by the booking assistant from the hirer’s messages.

It can be wrong. Check it with the hirer.

Use the side door. The key is under the blue planter.

An open expansion

Enquiry · 

Enquiry summary

Summary

Written by the booking assistant from this enquiry.

It can be wrong. Check it against the enquiry.

The school asks for the main hall on two Fridays for its spring concert.

Source
<details>
  <summary>A reply, with its sources</summary>
  <div data-kit-role="generated">
    <p data-kit-region="mark"><span data-kit-role="stamp" data-kit-state="neutral">Suggested</span><button type="button" data-kit-role="subtle-action" popovertarget="role-generated-reply"><span data-kit-region="label">How this was made</span></button></p>
    <div id="role-generated-reply" data-kit-role="popover" popover="auto">
      <p data-kit-region="made-by">Written by the booking assistant from this enquiry and the hire rules.</p>
      <ul data-kit-region="sources">
        <li><a href="#role-generated">Aisha Khan’s enquiry</a></li>
        <li><a href="#role-generated">Hire rules</a></li>
      </ul>
      <p data-kit-region="made-at"><time datetime="2025-02-03T09:14+00:00"><span>3 February 2025</span><wbr><span> at 09:14</span></time></p>
      <p data-kit-region="caution">It can be wrong. Check it before you send it.</p>
    </div>
    <div data-kit-region="content" data-kit-authored-text="true" aria-live="polite"><h5>Before you arrive</h5><p>Ask <a data-kit-region="mention" href="#role-generated">@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-generated">garden-room-plan.pdf</a></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>
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Use</span></button>
    </div>
  </div>
</details>
<details>
  <summary>A reply while its actions wait</summary>
  <div data-kit-role="generated">
    <p data-kit-region="mark"><span data-kit-role="stamp" data-kit-state="neutral">Suggested</span><button type="button" data-kit-role="subtle-action" id="role-generated-waiting-how" data-kit-state="inert" disabled aria-describedby="role-generated-waiting-how-words" popovertarget="role-generated-waiting"><span data-kit-region="label">How this was made</span></button></p>
    <p data-kit-region="words" id="role-generated-waiting-how-words">Wait for the reply to save to see how it was made.</p>
    <div id="role-generated-waiting" data-kit-role="popover" popover="auto">
      <p data-kit-region="made-by">Written by the booking assistant from this enquiry and the hire rules.</p>
      <ul data-kit-region="sources">
        <li><a href="#role-generated">Aisha Khan’s enquiry</a></li>
        <li><a href="#role-generated">Hire rules</a></li>
      </ul>
      <p data-kit-region="made-at"><time datetime="2025-02-03T09:14+00:00"><span>3 February 2025</span><wbr><span> at 09:14</span></time></p>
      <p data-kit-region="caution">It can be wrong. Check it before you send it.</p>
    </div>
    <div data-kit-region="content" data-kit-authored-text="true" aria-live="polite"><p>Hello Aisha,</p><p>The Garden room is free on the evenings you rehearse that week. I have held it for the choir until Friday.</p><p>Oakmere Village Hall</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" id="role-generated-waiting-copy" data-kit-state="inert" disabled aria-describedby="role-generated-waiting-copy-words"><span data-kit-region="label">Copy</span></button>
      <p data-kit-region="words" id="role-generated-waiting-copy-words">Wait for the reply to save before copying.</p>
      <button type="button" data-kit-role="secondary-action" id="role-generated-waiting-retry" data-kit-state="inert" disabled aria-describedby="role-generated-waiting-retry-words"><span data-kit-region="label">Retry</span></button>
      <p data-kit-region="words" id="role-generated-waiting-retry-words">Wait for the reply to save before trying again.</p>
      <button type="button" data-kit-role="secondary-action" id="role-generated-waiting-use" data-kit-state="inert" disabled aria-describedby="role-generated-waiting-use-words"><span data-kit-region="label">Use</span></button>
      <p data-kit-region="words" id="role-generated-waiting-use-words">Wait for the reply to save before using it.</p>
    </div>
  </div>
</details>
<details>
  <summary>A summary, with no sources</summary>
  <div data-kit-role="generated">
    <p data-kit-region="mark"><span data-kit-role="stamp" data-kit-state="neutral">Summary</span><button type="button" data-kit-role="subtle-action" popovertarget="role-generated-summary"><span data-kit-region="label">How this was made</span></button></p>
    <div id="role-generated-summary" 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>
    <div data-kit-region="content" 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>
  </div>
</details>
<details>
  <summary>A field a model filled</summary>
  <div data-kit-role="form-group" data-kit-width="medium" id="role-generated-room">
    <label for="role-generated-room-control">Room</label>
    <p data-kit-region="mark"><span data-kit-role="stamp" data-kit-state="neutral">Suggested</span><button type="button" data-kit-role="subtle-action" popovertarget="role-generated-field"><span data-kit-region="label">How this was made</span></button></p>
    <div id="role-generated-field" data-kit-role="popover" popover="auto">
      <p data-kit-region="made-by">Chosen by the booking assistant from the rooms free that week.</p>
      <p data-kit-region="made-at"><time datetime="2025-02-03T09:14+00:00"><span>3 February 2025</span><wbr><span> at 09:14</span></time></p>
      <p data-kit-region="caution">It can be wrong. Check the room before you save.</p>
    </div>
    <input id="role-generated-room-control" name="room" type="text" value="Garden room">
    <output for="role-generated-room-control">Garden room</output>
  </div>
</details>
<details>
  <summary>A model’s turn</summary>
  <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" popovertarget="role-generated-turn"><span data-kit-region="label">How this was made</span></button></p>
    <div id="role-generated-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>
    <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>
</details>
<details>
  <summary>A fact a model wrote</summary>
  <div data-kit-role="fact-group">
  <dl data-kit-role="labelled-fact" data-kit-holds="authored-text">
    <dt data-kit-region="name">Access notes</dt>
    <dd data-kit-region="value"><div data-kit-role="generated">
    <p data-kit-region="mark"><span data-kit-role="stamp" data-kit-state="neutral">Suggested</span><button type="button" data-kit-role="subtle-action" popovertarget="role-generated-fact"><span data-kit-region="label">How this was made</span></button></p>
    <div id="role-generated-fact" data-kit-role="popover" popover="auto">
      <p data-kit-region="made-by">Written by the booking assistant from the hirer’s messages.</p>
      <p data-kit-region="made-at"><time datetime="2025-02-03T09:14+00:00"><span>3 February 2025</span><wbr><span> at 09:14</span></time></p>
      <p data-kit-region="caution">It can be wrong. Check it with the hirer.</p>
    </div>
    <div data-kit-region="content" data-kit-authored-text="true" aria-live="polite"><p>Use the side door. The key is under the blue planter.</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>
    </div></dd>
  </dl>
  </div>
</details>
<details>
  <summary>An open expansion</summary>
  <article data-kit-role="row" data-kit-state="expanded">
    <div data-kit-region="content-column">
      <div data-kit-region="subject-column">
        <div data-kit-region="line">
          <div data-kit-region="subject-stamp">
            <a data-kit-region="subject" href="#role-generated">Oakmere Primary School</a>
          </div>
          <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Enquiry ·&nbsp;<time datetime="2025-02-03">3 February 2025</time></span></p></div>
        </div>
      </div>
    </div>
    <details data-kit-role="disclosure" data-kit-region="expansion" open>
      <summary><span data-kit-region="label">Enquiry summary</span></summary>
      <div data-kit-region="content">
        <div data-kit-role="generated">
    <p data-kit-region="mark"><span data-kit-role="stamp" data-kit-state="neutral">Summary</span><button type="button" data-kit-role="subtle-action" popovertarget="role-generated-expansion"><span data-kit-region="label">How this was made</span></button></p>
    <div id="role-generated-expansion" data-kit-role="popover" popover="auto">
      <p data-kit-region="made-by">Written by the booking assistant from this enquiry.</p>
      <p data-kit-region="made-at"><time datetime="2025-02-03T09:14+00:00"><span>3 February 2025</span><wbr><span> at 09:14</span></time></p>
      <p data-kit-region="caution">It can be wrong. Check it against the enquiry.</p>
    </div>
    <div data-kit-region="content" data-kit-authored-text="true" aria-live="polite"><p>The school asks for the main hall on two Fridays for its spring concert.</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>
        </div>
      </div>
    </details>
  </article>
</details>

Generated, streaming

Suggested

Written by the booking assistant from this enquiry and the hire rules.

It can be wrong. Check it before you send it.

Hello Aisha,

The Garden room is free on both evenings you asked about, and it seats up to forty. I can hold it for you

While the page loads, Stop and How this was made wait.

Suggested

Wait for the page to load to see how this was made.

Written by the booking assistant from this enquiry and the hire rules.

It can be wrong. Check it before you send it.

Hello Aisha,

The Garden room is free on both evenings you asked about, and it seats up to forty. I can hold it for you

Wait for the page to load before stopping the reply.

Source
<div data-kit-role="generated" data-kit-state="streaming">
  <p data-kit-region="mark"><span data-kit-role="stamp" data-kit-state="neutral">Suggested</span><button type="button" data-kit-role="subtle-action" popovertarget="role-generated-streaming-reply"><span data-kit-region="label">How this was made</span></button></p>
  <div id="role-generated-streaming-reply" data-kit-role="popover" popover="auto">
    <p data-kit-region="made-by">Written by the booking assistant from this enquiry and the hire rules.</p>
    <ul data-kit-region="sources">
      <li><a href="#role-generated-streaming">Aisha Khan’s enquiry</a></li>
      <li><a href="#role-generated-streaming">Hire rules</a></li>
    </ul>
    <p data-kit-region="made-at"><time datetime="2025-02-03T09:14+00:00"><span>3 February 2025</span><wbr><span> at 09:14</span></time></p>
    <p data-kit-region="caution">It can be wrong. Check it before you send it.</p>
  </div>
  <div data-kit-region="content" data-kit-authored-text="true" aria-live="polite" aria-busy="true"><p>Hello Aisha,</p><p>The Garden room is free on both evenings you asked about, and it seats up to forty. I can hold it for you</p></div>
  <div data-kit-region="actions">
    <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Stop</span></button>
  </div>
</div>
<p class="specimen-case-line">While the page loads, Stop and How this was made wait.</p>
<div data-kit-role="generated" data-kit-state="streaming">
  <p data-kit-region="mark"><span data-kit-role="stamp" data-kit-state="neutral">Suggested</span><button type="button" data-kit-role="subtle-action" id="role-generated-streaming-waiting-how" data-kit-state="inert" disabled aria-describedby="role-generated-streaming-waiting-how-words" popovertarget="role-generated-streaming-waiting"><span data-kit-region="label">How this was made</span></button></p>
  <p data-kit-region="words" id="role-generated-streaming-waiting-how-words">Wait for the page to load to see how this was made.</p>
  <div id="role-generated-streaming-waiting" data-kit-role="popover" popover="auto">
    <p data-kit-region="made-by">Written by the booking assistant from this enquiry and the hire rules.</p>
    <ul data-kit-region="sources">
      <li><a href="#role-generated-streaming">Aisha Khan’s enquiry</a></li>
      <li><a href="#role-generated-streaming">Hire rules</a></li>
    </ul>
    <p data-kit-region="made-at"><time datetime="2025-02-03T09:14+00:00"><span>3 February 2025</span><wbr><span> at 09:14</span></time></p>
    <p data-kit-region="caution">It can be wrong. Check it before you send it.</p>
  </div>
  <div data-kit-region="content" data-kit-authored-text="true" aria-live="polite" aria-busy="true"><p>Hello Aisha,</p><p>The Garden room is free on both evenings you asked about, and it seats up to forty. I can hold it for you</p></div>
  <div data-kit-region="actions">
    <button type="button" data-kit-role="secondary-action" id="role-generated-streaming-waiting-stop" data-kit-state="inert" disabled aria-describedby="role-generated-streaming-waiting-stop-words"><span data-kit-region="label">Stop</span></button>
    <p data-kit-region="words" id="role-generated-streaming-waiting-stop-words">Wait for the page to load before stopping the reply.</p>
  </div>
</div>