@composy/chat-vue

@composy/chat-vue

Vue adapter for @composy/chat-core. It provides the ChatContainer component, useChat() composable, and installable Vue plugin while reusing the framework-agnostic core renderer.

This adapter requires Vue 3.5.32 or newer.

Features

• Vue component wrapper around the core chat runtime.
• Composable API that mirrors the core instance methods.
• Structured content blocks, generation-safe streaming, transport connection state, and optional offline outbox are available through the same Core-backed instance.
• Plugin registration via ChatPlugin or createChatPlugin().
• Emits send, loading, message click, mention, upload, paste, drop, voice, and input-change events.
• Wrapper class uses ldesign-chat-vue-wrapper; core-rendered child classes use ldesign-chat-* by default.
• Styling comes from core-injected --ldesign-chat-* variables backed by generated --ld-* color and size tokens from packages/color and packages/size.

Install

pnpm add @composy/chat-core @composy/chat-vue vue

Load shared LDesign token styles before mounting the component.

Component Usage

<script setup lang="ts">
import type { ChatMessage, MentionItem } from '@composy/chat-vue'
import { ChatContainer } from '@composy/chat-vue'
import { ref } from 'vue'

const messages = ref<ChatMessage[]>([])
const members = ref<MentionItem[]>([{ id: 'u2', name: 'Alice' }])
const draft = ref('')

function handleSend(content: string, mentions: MentionItem[]) {
  console.info(content, mentions)
}
</script>

<template>
  <ChatContainer
    current-user-id="u1"
    :messages="messages"
    :enable-mention="true"
    :mention-members="members"
    theme="auto"
    height="calc(var(--ld-px-260) + var(--ld-px-260))"
    @send="handleSend"
    @input-change="draft = $event"
  />
</template>

Exposed Methods

ChatContainer exposes the core instance and helpers:

addMessage(message)
prependMessages(messages)
updateMessage(id, updates)
removeMessage(id)
setMessages(messages)
clearMessages()
getMessages()
getMessage(id)
beginStreaming(id, generation)
appendMessageContent(id, chunk, { generation, sequence })
finishStreaming(id, generation)
cancelStreaming(id, generation)
connectTransport(signal)
disconnectTransport()
getTransportStatus()
sendMessage(message, { signal })
flushOutbox(options)
scrollToBottom(true)
isAtBottom()
setTheme('dark')
focusInput()
setInputContent('hello')
getInputContent()
clearInput()

Composable Usage

import { useChat } from '@composy/chat-vue'

const chat = useChat()

chat.create(el, {
  currentUserId: 'u1',
  onSend(content) {
    console.info(content)
  },
})

chat.setInputContent('draft')
chat.scrollToBottom()
chat.destroy()

ChatContainer accepts transport, conversation-id, auto-connect, transport-cursor, and outbox in addition to the Core configuration. The transport adapter owns authentication and network reconnection; the component only coordinates lifecycle and renders normalized messages.

Plugin Usage

import { ChatPlugin } from '@composy/chat-vue'
import { createApp } from 'vue'

createApp(App).use(ChatPlugin, {
  name: 'LDesignChat',
})

Build

pnpm run type-check
pnpm run type-check:cjs
pnpm run build

TypeScript ESM/CJS configurations and the rolldown Builder configuration live in .ldesign/. The build generates dist, es, esm, and lib; postbuild normalizes and validates the package outputs against the manifest.

License

MIT