AiMessage

Message

Headless message container with slots for content, reasoning, tools, and sources.

U

You

Can you explain how retrieval-augmented generation works?

Assistant

RAG (Retrieval-Augmented Generation) combines a retrieval system with a language model. First, relevant documents are fetched from a knowledge base using semantic search. Then, these documents are passed as context to the LLM, which generates a grounded response based on the retrieved information.

Usage 

<AiMessage role="assistant" content="Hello!" status="complete">
  <template #content="{ content }">
    <p class="text-sm">{{ content }}</p>
  </template>
</AiMessage>

Props

Prop Type Default Description
role*'user' | 'assistant' | 'system' | 'tool'—Message role
contentstring—Plain text content
htmlContentstring—Sanitized HTML content
status'pending' | 'streaming' | 'complete' | 'error''complete'Message status
reasoningstring—Reasoning text for slot
sourcesAiSource[]—Citation sources
toolCallsAiToolCall[]—Tool invocations
attachmentsAiAttachment[]—File attachments

Slots

  • avatar
  • reasoning
  • tool-calls
  • attachments
  • content
  • sources
  • metadata
  • actions