component · chat

TuxComposer

Chat input with optional compliance scope banner. Two-zone layout (textarea + toolbar strip). The maroon 2px frame ties the composer back to the brand. Model picker and corpus-attach affordance are built in; both are optional.

⌘↵ submits. v-model binds the textarea value; @submit fires when the user sends.

basic

Default composer

0 / 32000

⌘↵ send · / corpus to switch context · shift↵ newline

<tux-composer
  v-model="text"
  :models="models"
  placeholder="Ask about any ingested corpus…"
  @submit="handleSend"
/>

compliance

Scoped to a restricted corpus

0 / 32000

⌘↵ send · / corpus to switch context · shift↵ newline

<tux-composer
  v-model="text"
  :models="models"
  placeholder="Restricted-corpus query…"
  @submit="handleSend"
>
  <template #scope>
    <tux-alert variant="compliance" icon="lucide:shield-alert">
      <strong>Restricted corpus.</strong> This conversation grounds
      against TTI-internal research data. Citations and model
      responses are logged to the audit trail.
    </tux-alert>
  </template>
</tux-composer>

cancelable

Composer wrapped in a modal

Pass cancelable to surface a ghost-intent [Cancel] button to the left of [Send]. Listen to @cancel to close the surrounding modal / slideover / inline edit. The cancelLabel prop swaps the button text — useful when "Discard" or "Close" reads better than "Cancel" in context.

0 / 32000

⌘↵ send · / corpus to switch context · shift↵ newline

<!-- Wrapped in a modal / slideover. Cancelable
     surfaces an explicit [Cancel] [Send] pair so the user can back
     out without sending. The cancel button is ghost-intent; send
     stays primary. -->
<tux-composer
  v-model="text"
  cancelable
  cancel-label="Discard"
  placeholder="Reply to thread…"
  @submit="handleSend"
  @cancel="closeModal"
/>