Chat

AI markdown

import { ref } from 'vue' const messages = ref([ { id: 'm1', role: 'system', content: 'System message', createdAt: Date.now() - 60_000, }, { id: 'm2', role: 'user', content: 'Show me **markdown** and an image.', createdAt: Date.now() - 30_000, attachments: [ { type: 'image', url: 'https://picsum.photos/seed/tuffex/420/280', name: 'demo' }, ], }, { id: 'm3', role: 'assistant', content: 'Here is some code:\n\n```ts\nexport const hello = 1\n```', createdAt: Date.now() - 10_000, }, ])

Basic Usage

ChatList

Demo will load when visible.

<template>
  <TxChatList :messages="messages" :markdown="true" :stagger="true" />
</template>