AiConversation

Conversation

Thread list / sidebar — conversation threads, not the message scroll area.

Conversations

Usage 

<AiConversation :threads="threads" :active-id="activeId" @select="onSelect" />

Props

Prop Type Default Description
threads*AiConversationThread[]——
activeIdstring—Active thread id
showArchivedbooleanfalse—

Slots

  • header
  • thread
  • empty

Message list pattern

Use a scrollable container with AiMessage for the active thread. AiConversation belongs in the sidebar; it does not render message content. 

<div class="chat-layout">
  <AiConversation
    :threads="threads"
    :active-id="activeId"
    @select="onSelectThread"
  />

  <div data-ai-message-list class="chat-thread" role="log">
    <AiMessage
      v-for="(msg, i) in aiMessages"
      :key="i"
      v-bind="msg"
    />
  </div>

  <AiPromptInput v-model="input" @submit="handleSubmit" />
</div>