---
status: beta
title: Message
desc: Allows users to enter a message or request for an AI system to process and respond to.
ico: mdi:message-processing
keywords:
  - ai
  - ask
  - chat
  - help
  - instruction
  - prompt
  - question
  - support

props:
  - class: .prs-message
    type: component
    desc: AI prompt
  - class: .prs-hint
    type: part
    desc: Hint subtext
  - class: .prs-message_hover
    type: state
    desc: Hover state
  - class: .prs-message_focus
    type: state
    desc: Focus state

controls:
  - name: message
    type: text
    label: Message
    desc: Message text.
    default: ''

  - name: withAttachments
    type: toggle
    label: With attachments
    desc: Show attachments.
    default: false

  - name: state
    type: radio
    label: State
    desc: These states will happen automatically when using valid sematic markup.
    default: default
    options:
      - default
      - hover
      - focus
      - disabled

previewHeight: 18.75
preview: |
  <div class="prs-message" :class="{
    'prs-message_hover': state === 'hover',
    'prs-message_focus': state === 'focus',
  }">
    <header x-show="withAttachments">
      <template x-for="i in 4" hidden>
        <div class="prs-attachment">
          <div class="prs-thumb"><svg width="24" height="24" role="img" fill="currentColor"><use href="/_assets/prs-icons.svg#content-type-blank-document"></use></svg></div>
          <div class="prs-meta">
            <div class="prs-name">file-name.pdf</div>
            <small class="prs-ext">application/pdf</small>
          </div>
          <button class="prs-close"><iconify-icon icon="mdi:close" noobserver></iconify-icon></button>
        </div>
      </template>
    </header>
    <label for="message-ai" class="sr-only">Message</label>
    <textarea x-model="message" id="massage-ai" placeholder="Type your message..." :disabled="state === 'disabled'"></textarea>
    <footer>
      <div>
        <button @click="withAttachments = !withAttachments" class="prs-btn prs-btn-tertiary prs-btn-square" :disabled="state === 'disabled'" aria-label="Attach"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" fill="currentColor"><use href="/_assets/prs-icons.svg#edit-add"></use></svg></button>
      </div>
      <div>
        <button class="prs-btn prs-btn-tertiary prs-btn-square" :disabled="state === 'disabled'" aria-label="Dictate"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" fill="currentColor"><use href="/_assets/prs-icons.svg#media-microphone"></use></svg></button>
        <button class="prs-btn prs-btn-primary prs-btn-square" :disabled="state === 'disabled' || !message.length" aria-label="Send"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" fill="currentColor"><use href="/_assets/prs-icons.svg#uncategorized-send"></use></svg></button>
      </div>
    </footer>
    <span class="prs-hint">AI can make mistakes. Don't type in personal information.</span>
  </div>

code:
  html: |
    <div class="prs-message{hover}{focus}">
      {head}<label for="message-ai" class="sr-only">Message</label>
      <textarea id="message-ai"{disabled}>{message}</textarea>
      <footer>
        <div><button class="prs-btn prs-btn-tertiary prs-btn-square"{disabled} aria-label="Attach">...</button></div>
        <div>
          <button class="prs-btn prs-btn-tertiary prs-btn-square"{disabled} aria-label="Dictate">...</button>
          <button class="prs-btn prs-btn-primary prs-btn-square"{disabled} aria-label="Send">...</button>
        </div>
      </footer>
      <span class="prs-hint">AI can make mistakes. Don't type in personal information.</span>
    </div>
  logic:
    message: "this.message"
    head: "this.withAttachments ? '<header>\\n    <div class=\"prs-attachment\">\\n      <div class=\"prs-icon\"><iconify-icon icon=\"mdi:file-outline\" noobserver></iconify-icon></div>\\n      <div class=\"prs-meta\">\\n        <div class=\"prs-name\">file-name.pdf</div>\\n        <small class=\"prs-ext\">PDF</small>\\n      </div>\\n      <button class=\"prs-close\"><iconify-icon icon=\"mdi:close\" noobserver></iconify-icon></button>\\n    </div>\\n  </header>\\n  ' : ''"
    hover: "this.state === 'hover' ? ' prs-message_hover' : ''"
    focus: "this.state === 'focus' ? ' prs-message_focus' : ''"
    disabled: "this.state === 'disabled' ? ' disabled' : ''"

---