# ldesign-chat

**Repository Path**: ldesign-v1/ldesign-chat

## Basic Information

- **Project Name**: ldesign-chat
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-11
- **Last Updated**: 2026-04-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @ldesign/chat

即时通讯/IM 组件 - 聊天气泡、消息列表、@提及、多消息类型、亮暗主题

## Features

- 多消息类型：文本、图片、文件、系统消息、自定义
- @提及：输入 @ 触发候选列表、搜索过滤、键盘导航
- 主题系统：亮色/暗色/跟随系统
- 消息状态：发送中/已发送/已送达/已读/失败
- Framework-agnostic core with Vue 3 adapter
- TypeScript support with full type definitions
- Tree-shakable ES module + UMD build

## Installation

```bash
# Core library (vanilla JS)
pnpm add @ldesign/chat

# Vue adapter (Vue 3 projects)
pnpm add @ldesign/chat-vue
```

## Quick Start

### Vanilla JavaScript

```typescript
import { createChat } from '@ldesign/chat';

const chat = createChat({
  container: '#my-chat',
  currentUserId: 'user-1',
  messages: [...],
  onSend: (content, mentions) => {
    console.log('发送:', content);
  },
});

chat.addMessage({ id: 'msg-1', type: 'text', ... });
chat.setTheme('dark');
chat.destroy();
```

### Vue 3

```vue
<template>
  <ChatContainer
    current-user-id="user-1"
    :messages="messages"
    :enable-mention="true"
    :mention-members="members"
    height="500px"
    @send="onSend"
  />
</template>

<script setup>
import { ref } from 'vue';
import { ChatContainer } from '@ldesign/chat-vue';

const messages = ref([...]);
const onSend = (content, mentions) => {
  console.log('发送:', content);
};
</script>
```

## Project Structure

```
chat/
+-- packages/
|   +-- core/          # Core library @ldesign/chat
|   |   +-- src/
|   |       +-- types/         # Type definitions
|   |       +-- core/          # EventEmitter, ChatManager, MentionEngine
|   |       +-- renderer/      # DOM renderer, style manager
|   |       +-- theme/         # Theme manager, design tokens
|   +-- vue/           # Vue adapter @ldesign/chat-vue
|       +-- src/
|           +-- components/    # ChatContainer.vue
|           +-- composables/   # useChat
|           +-- plugins/       # ChatPlugin
+-- playground/        # Demo application
```

## Development

```bash
# Install dependencies
pnpm install

# Start playground dev server
pnpm dev

# Build libraries
pnpm build

# Build playground
pnpm build:playground
```

## License

MIT