AI Message

A single turn in a conversation. It wraps Nuxt UI's UChatMessage with a motion-choreographed action row, sensible defaults per role, and typed slots — so you render one message here and never hand-assemble an avatar, a bubble, a header and a copy button.

Defaults are the reason it exists. A user turn is solid and right-aligned, the way a sent message reads everywhere. An assistant turn is soft and left-aligned, so it does not fight the reasoning traces, tool cards and diffs it usually contains. Pass bubble: false and you get neither.

Use it for one turn. For the transcript, see AI Messages.

Usage

Give it a role and some content and the styling follows: solid and right for user, soft and left for everything else. Override the defaults only where the conversation genuinely needs it.

<template>
  <div class="flex w-full max-w-lg flex-col gap-4">
    <div class="rounded-2xl border border-default p-4">
      <MAiMessage
        id="turn-1"
        :parts="[{ type: 'text', text: 'Ship the token audit behind a flag, or land it cold?' }]"
        role="user"
      />
    </div>

    <div class="rounded-2xl border border-default p-4">
      <MAiMessage
        id="turn-2"
        :actions="voteActions"
        :bubble="bubble"
        :parts="assistantParts"
        role="assistant"
      >
        <template #header>
          <span class="flex items-center gap-2 text-xs text-muted">
            <MAgentAvatar
              :seed="'reviewer'"
              :size="20"
            />
            Reviewer
          </span>
        </template>
      </MAiMessage>
    </div>

    <USwitch
      v-model="bubble"
      class="self-start"
      label="bubble"
    />
  </div>
</template>

<script setup lang="ts">
type MessageAction = {
  key: string
  icon: string
  label: string
  active?: boolean
  onClick: () => void
}

const bubble = ref(true)
const vote = ref<'up' | 'down' | null>(null)

const assistantParts = [
  { type: 'reasoning', text: 'Check blast radius, then pick a default.' },
  { type: 'text', text: 'Behind a flag. The audit walks every theme token, so landing it cold means a long tail of visual diffs nobody has reviewed yet.' },
]

const voteActions = computed<MessageAction[]>(() => [
  {
    key: 'up',
    icon: 'i-lucide-thumbs-up',
    label: 'good response',
    active: vote.value === 'up',
    onClick: () => vote.value = vote.value === 'up' ? null : 'up',
  },
  {
    key: 'down',
    icon: 'i-lucide-thumbs-down',
    label: 'bad response',
    active: vote.value === 'down',
    onClick: () => vote.value = vote.value === 'down' ? null : 'down',
  },
])
</script>

Customize

Props

Slots

Every message-level slot receives { id, role, parts, metadata }. The #content slot additionally receives content, the joined plain text.

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.aiMessage in app.config.ts.

Accessibility

• The action row is hover-revealed, which would hide it from anyone tabbing through the transcript — so :focus-within reveals it too. Focus counts as intent.
• Each action is a native <button> carrying its label as aria-label, since the visible content is an icon only. The icon itself is aria-hidden.
• A toggle action sets aria-pressed, so a cast vote is announced as pressed rather than only looking pressed.
• Buttons slide in from the side their message belongs to — left for the agent, right for the user — via a --ai-message-slide custom property, so the reveal points at the turn it belongs to.
• Under prefers-reduced-motion: reduce the slide is dropped and the copy icon's pop keyframe is disabled; the buttons simply appear.
• The copy button's success state lasts 1600ms and then reverts. A refused clipboard permission is swallowed: the icon does not change and nothing is announced, because a failure here is not worth interrupting a reader over.
• The component sets no landmark or ARIA role of its own; semantics come from UChatMessage.

Performance

• Nuxt UI owns the row's opacity reveal and these buttons own transform — one property per owner, so the two fades never fight.
• The copy timer is cleared on every copy and again in onBeforeUnmount, so a fast double-click or a mid-transition unmount cannot leave a stray timer writing to a detached component.
• Only text parts are joined for the copy string. Reasoning traces and file parts are skipped, so a turn with a long trace does not copy the trace.
• The action array is a computed, so the copy button's icon and label swap on a 1600ms timer without re-rendering the message body.