Chat Panel

formCustominteractive

A conversational interface for interactive form filling.

Custom component — no upstream reference.

Variants

Empty Start

<div class="flex-chat-panel" data-session-id="example-session-empty">
  <div class="flex-chat-panel__messages">
  </div>
  <form class="flex-chat-panel__form" data-role="chat-form" method="post">
    <div class="flex-chat-panel__input-group">
      <textarea class="flex-textarea" name="message" placeholder="Type your response..." rows="3" required="" data-role="chat-input">
      </textarea>
    </div>
    <div class="flex-chat-panel__actions">
      <button class="flex-button" type="submit">Send</button>
    </div>
  </form>
</div>

Finished

What is your full legal name?

Jamie Rivera

Thanks, Jamie. What address should we use for correspondence?

123 Main St, Springfield, IL 62701

Thanks. That was the last question — your responses are recorded.

Conversation complete

<div class="flex-chat-panel" data-session-id="example-session-finished">
  <div class="flex-chat-panel__messages">
    <div class="flex-chat-panel__message" data-role="assistant">
      <div class="flex-chat-panel__message-content">What is your full legal name?</div>
    </div>
    <div class="flex-chat-panel__message" data-role="user">
      <div class="flex-chat-panel__message-content">Jamie Rivera</div>
    </div>
    <div class="flex-chat-panel__message" data-role="assistant">
      <div class="flex-chat-panel__message-content">Thanks, Jamie. What address should we use for correspondence?</div>
    </div>
    <div class="flex-chat-panel__message" data-role="user">
      <div class="flex-chat-panel__message-content">123 Main St, Springfield, IL 62701</div>
    </div>
    <div class="flex-chat-panel__message" data-role="assistant">
      <div class="flex-chat-panel__message-content">Thanks. That was the last question — your responses are recorded.</div>
    </div>
  </div>
  <div class="flex-chat-panel__finished">
    <p>Conversation complete</p>
  </div>
</div>

In Progress

What is your full legal name?

Jamie Rivera

Thanks, Jamie. What address should we use for correspondence?

<div class="flex-chat-panel" data-session-id="example-session-in-progress">
  <div class="flex-chat-panel__messages">
    <div class="flex-chat-panel__message" data-role="assistant">
      <div class="flex-chat-panel__message-content">What is your full legal name?</div>
    </div>
    <div class="flex-chat-panel__message" data-role="user">
      <div class="flex-chat-panel__message-content">Jamie Rivera</div>
    </div>
    <div class="flex-chat-panel__message" data-role="assistant">
      <div class="flex-chat-panel__message-content">Thanks, Jamie. What address should we use for correspondence?</div>
    </div>
  </div>
  <form class="flex-chat-panel__form" data-role="chat-form" method="post">
    <div class="flex-chat-panel__input-group">
      <textarea class="flex-textarea" name="message" placeholder="Type your response..." rows="3" required="" data-role="chat-input">
      </textarea>
    </div>
    <div class="flex-chat-panel__actions">
      <button class="flex-button" type="submit">Send</button>
    </div>
  </form>
</div>

Contract

Documented variants

InProgress — Active conversation: prior messages visible, input form rendered.
Finished — Completed conversation: final messages visible, input form replaced with a completion notice.
EmptyStart — Blank starting state: no prior messages, input form ready for the first response.

Behavior promises

○ Renders a textarea + submit control while the conversation is unfinished.
○ Replaces the input form with a "Conversation complete" notice once finished is true.
○ Each message exposes its role via the data-role attribute for styling and assistive tech.

Source CSS

/**
 * flex-chat-panel — conversational message transcript + input form.
 *
 * Used by the conversational form delivery mode. Wraps a scrolling
 * message stream with a persistent composer, and swaps the composer
 * for a completion notice once the session ends.
 */

@layer block {
  .flex-chat-panel {
    display: flex;
    flex-direction: column;
    gap: var(--flex-space-md);
    padding: var(--flex-space-md);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-md);
    background: var(--flex-color-surface);
  }

  .flex-chat-panel__messages {
    display: flex;
    flex-direction: column;
    gap: var(--flex-space-sm);
    max-height: 60vh;
    overflow-y: auto;
  }

  .flex-chat-panel__message {
    display: flex;
    padding: var(--flex-space-sm) var(--flex-space-md);
    border-radius: var(--flex-radius-md);
    max-width: 85%;
    line-height: 1.5;
  }

  .flex-chat-panel__message[data-role='user'] {
    align-self: flex-end;
    background: var(--flex-color-primary-lighter);
    color: var(--flex-color-primary-darker);
  }

  .flex-chat-panel__message[data-role='assistant'] {
    align-self: flex-start;
    background: var(--flex-color-base-lightest);
    color: var(--flex-color-base-darker);
  }

  .flex-chat-panel__message-content {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .flex-chat-panel__form {
    display: flex;
    flex-direction: column;
    gap: var(--flex-space-sm);
    padding-block-start: var(--flex-space-sm);
    border-block-start: 1px solid var(--flex-color-border);
  }

  .flex-chat-panel__input-group {
    display: flex;
  }

  .flex-chat-panel__actions {
    display: flex;
    justify-content: flex-end;
  }

  .flex-chat-panel__finished {
    padding: var(--flex-space-sm) var(--flex-space-md);
    border-radius: var(--flex-radius-md);
    background: var(--flex-color-success-lighter);
    color: var(--flex-color-success-darker);
    text-align: center;
  }
}