matechat-vue

何时使用此技能

当用户提及以下内容时，始终使用此技能：

• “MateChat”、“MateChat Vue”、“matechat-vue”
• 使用 Vue 3 构建 AI 聊天界面
• 使用 Bubble、Input、Prompt、Layout、Markdown 等聊天 UI 组件
• “MateChat 组件”、“AI 聊天 UI”、“AI Agent UI”
• 请求“使用 MateChat 实现某个组件”
• 请求 MateChat 组件 API 或配置相关信息
• 构建对话式 AI 界面

如何使用此技能

此技能旨在为 MateChat Vue 3 组件提供全面指导，文档来源：https://matechat.gitcode.com/use-guide/introduction.html。

1. 确定用户的需求

• 组件用法 → 查看下方的组件分类
• API 参考 → references/components/<componentName>/api.md
• 示例 → references/components/<componentName>/demo.md
• 使用指南 → references/use-guide/（安装、配置、按需导入、主题、i18n、CLI 等）

2. 组件分类

对话组件

• Bubble - 气泡组件，用于承载对话内容
  • API：references/components/bubble/api.md
  • 示例：references/components/bubble/demo.md

输入组件

• Input - 输入组件，用于用户输入消息
  • API：references/components/input/api.md
  • 示例：references/components/input/demo.md
• Textarea - 文本域组件
  • API：references/components/textarea/api.md
  • 示例：references/components/textarea/demo.md
• Mention - 提及组件，支持 @ 提及功能
  • API：references/components/mention/api.md
  • 示例：references/components/mention/demo.md

布局组件

• Layout - 布局组件，提供整体页面布局
  • API：references/components/layout/api.md
  • 示例：references/components/layout/demo.md
• Header - 头部组件
  • API：references/components/header/api.md
  • 示例：references/components/header/demo.md

功能组件

• Prompt - 提示词组件，用于快捷提示
  • API：references/components/prompt/api.md
  • 示例：references/components/prompt/demo.md
• List - 列表组件，用于展示对话列表
  • API：references/components/list/api.md
  • 示例：references/components/list/demo.md
• Toolbar - 工具栏组件
  • API：references/components/toolbar/api.md
  • 示例：references/components/toolbar/demo.md

文件组件

• Attachment - 附件组件，用于文件上传
  • API：references/components/attachment/api.md
  • 示例：references/components/attachment/demo.md
• FileList - 文件列表组件
  • API：references/components/fileList/api.md
  • 示例：references/components/fileList/demo.md

展示组件

• MarkdownCard - Markdown 卡片组件，用于渲染 Markdown 内容
  • API：references/components/markDownCard/api.md
  • 示例：references/components/markDownCard/demo.md
• Introduction - 介绍组件
  • API：references/components/introduction/api.md
  • 示例：references/components/introduction/demo.md

3. 使用指南文档

references/use-guide/ 目录包含全面的 MateChat 使用指南：

快速入门（入门指南）

• introduction.md - MateChat 快速入门指南介绍，包括安装等内容。

配置（配置）

• theme.md - 主题自定义指南
• require.md - 要求和依赖项、按需导入指南
• i18n.md - 国际化指南

CLI 使用（CLI使用）

• solution.md - 安装 CLI 并使用 MateChat CLI 创建项目
• cli/multi-round-chat.md - 使用 CLI 进行多轮对话
• cli-theme.md - CLI 主题配置

模型集成（模型集成）

• model/deepseek.md - DeepSeek 模型集成
• model/openai.md - OpenAI 模型集成
• model/other.md - 其他模型集成

其他资源（其他资源）

• access.md - 访问控制
• faq.md - 常见问题
• contributing.md - 贡献指南
• changelog.md - 更新日志

使用指南文档的方法：

1. 根据用户的请求确定主题
2. 从 reference/components/ 或 references/use-guide/ 加载相应的指南文件
3. 遵循指南中的说明和最佳实践

4. 安装

使用 npm：

npm install @matechat/core

5. 基本设置

完整导入：

import { createApp } from 'vue'
import MateChat from '@matechat/core'
import App from './App.vue'

const app = createApp(App)
app.use(MateChat)
app.mount('#app')

按需导入：

import { McBubble, McInput } from '@matechat/core'

6. 快速入门示例

<template>
  <div class="chat-container">
    <McBubble 
      :content="message" 
      :avatarConfig="avatarConfig"
      align="left"
    />
    <McInput 
      :value="userInput"
      placeholder="Type your message..."
      @submit="handleSend"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { McBubble, McInput } from '@matechat/core'

const message = ref('Hello! How can I help you?')
const userInput = ref('')
const avatarConfig = {
  imgSrc: '/logo.svg',
  name: 'AI'
}

const handleSend = () => {
  console.log('Send message:', userInput.value)
  userInput.value = ''
}
</script>

API 参考

所有组件的 API 文档都位于 references/components/ 目录中，并按组件名称整理：

• 每个组件包含两个文件：
  • api.md - API 文档（属性、事件、插槽、类型）
  • demo.md - 演示示例和使用模式

使用 API 参考的方法：

1. 确定需要帮助的组件
2. 加载相应的 API 文件：references/components/<componentName>/api.md
3. 加载演示文件以查看示例：references/components/<componentName>/demo.md
4. 遵循示例并根据使用场景进行调整

自动更新文档

此技能包含自动文档更新机制，可使组件文档与最新的 MateChat 版本保持同步。

最佳实践

1. 使用按需导入：仅导入所需组件，以减小打包体积
2. 使用 Composition API：优先使用 Composition API，以便更好地组织代码
3. 正确处理事件：使用适当的事件处理器处理组件交互
4. 自定义主题：使用主题变量进行自定义
5. 遵循设计规范：遵循 MateChat 设计规范
6. 使用 TypeScript：利用 TypeScript 提高类型安全性
7. 设计组件时，必须阅读 references/components/<componentName>/api.md 中相应的组件 API 文档

组件选择指南

构建聊天界面时：

• 使用 Layout 搭建整体结构
• 使用 Header 进行导航
• 使用 Bubble 显示消息
• 使用 Input 或 Textarea 接收用户输入
• 使用 List 显示对话历史记录

处理文件时：

• 使用 Attachment 上传文件
• 使用 FileList 显示已上传的文件

展示富内容时：

• 使用 MarkdownCard 渲染 Markdown 内容
• 使用 Mention 在输入内容中添加 @提及

提供快捷操作时：

• 使用 Prompt 提供快捷提示词建议
• 使用 Toolbar 提供操作按钮

资源

• 官方文档：https://matechat.gitcode.com/use-guide/introduction.html
• GitCode 仓库：https://gitcode.com/DevCloudFE/MateChat
• NPM 包：https://www.npmjs.com/package/@matechat/core

关键词

MateChat, matechat-vue, Vue 3, Vue3, AI 聊天, 聊天 UI, Agent UI, 对话 UI, 气泡, 输入框, 提示词, 布局, 附件, 文件列表, Markdown 卡片, 提及, 工具栏, 对话组件, 聊天界面, 气泡, 输入框, 提示词, 布局, 附件, 文件列表, Markdown 卡片