Component reference

ChatQuestion

A question the assistant asks the user, with choices and a written answer.

Preview

Choices and a written answer

The question comes first and options are visible. Selecting does not send; a local receipt only appears after you confirm and submit. Switching input modes keeps the draft.

packages/meowtail/stories/chat-question.stories.tsxline 22tsx

render: () => (
  <form data-question-form>
    <ChatQuestion
      question="Before you chose to retry, had the Meowland host already been rebuilt or restarted?"
      questionId="restart-question"
      description="The Cell retry still did not succeed, so the current host state needs confirmation."
      actions={[
        <Button type="submit">Submit answer</Button>,
        <Button variant="quiet" size="small" data-question-mode>
          Answer in writing
        </Button>,
        <Button variant="quiet" size="small" data-question-cancel>
          Cancel question
        </Button>,
      ]}
    >
      <div data-question-choices>
        <ChoiceGroup
          id="restart-choice"
          name="answer"
          label="Choose an answer"
          hideLabel
          required
          options={[
            {
              value: "restarted",
              label: "Already restarted",
              description: "The host was rebuilt and restarted; investigation can continue.",
            },
            {
              value: "not-yet",
              label: "Not restarted yet",
              description: "Preserve the current state first and explain what to do next.",
            },
            {
              value: "unsure",
              label: "Not sure",
              description: "Help me confirm which version is currently running.",
            },
          ]}
        />
      </div>
      <div data-question-text hidden>
        <Textarea
          aria-label="Your answer"
          name="freeAnswer"
          rows={3}
          placeholder="Describe the current situation…"
          disabled
        />
      </div>
      <Note data-question-feedback role="status" hidden />
    </ChatQuestion>
  </form>
)

Installation

bun add meowtail

Usage

usage.tsts

import { ChatQuestion } from "meowtail";

Examples

The other stories that show this component.

Long content and conflict feedback

A static composition showing a long question, long options and conflict feedback; the buttons are not wired to business actions, and async submission or input retention is not verified.

packages/meowtail/stories/chat-question.stories.tsxline 130tsx

render: () => (
  <ChatQuestion
    question="The service still returns 503. If the host cannot be restarted for now, do you want to preserve the current state and keep investigating, or look at the component source and verification notes that are already done?"
    questionId="conflict-question"
    feedback="The question was updated and this answer has not been submitted. The content is kept; you can copy it and then read the new question."
    actions={[
      <Button>View new question</Button>,
      <Button variant="quiet" size="small">
        Copy answer
      </Button>,
    ]}
  >
    <ChoiceGroup
      id="long-answer"
      name="longAnswer"
      label="Your answer"
      hideLabel
      defaultValue="keep"
      options={[
        {
          value: "keep",
          label:
            "Keep the service's current state and logs, keep investigating why activation failed, and do not restart the running host for now",
        },
        {
          value: "source",
          label:
            "Look at the component source and test notes first; handle the service runtime problem later",
        },
      ]}
    />
  </ChatQuestion>
)

API reference

Presentation only: submission, cancellation and question lifetime belong to the host.

Props

Prop	Type	Default
`label`	`Child`	`"Needs your answer"`
`question`	`Child`	–
`questionId`	`string`	–
`description`	`Child`	–
`feedback`	`Child`	–
`actions`	`Child`	–

Also takes className, children and the attributes and events of its root element.

DOM parts

rooteyebrowtitledescriptioncontentfeedbackactions

Registry

The component is registered as chat-question in the meowtail component registry.