Xuanlin AI Chat

一个简单易用的Vue.js AI聊天组件，支持消息列表显示、输入框和发送功能。

特性

• 🚀 简单易用，开箱即用
• 🎨 现代化UI设计，支持亮色/暗色主题
• 📱 响应式设计，支持移动端
• 🔧 高度可定制，支持插槽和props
• ♿ 无障碍访问支持
• 📦 轻量级，无额外依赖
• 🎯 样式隔离，不会影响宿主应用

安装

npm install xuanlin-ai-chat

使用方法

全局注册

import Vue from 'vue'
import AIChat from 'xuanlin-ai-chat'

// 样式会自动引入，无需手动导入CSS
Vue.use(AIChat)

局部注册

import { AIChat } from 'xuanlin-ai-chat'

export default {
  components: {
    AIChat
  }
}

基础用法

<template>
  <div id="app">
    <AIChat
      :messages="messages"
      @send="handleSend"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        {
          id: '1',
          content: '你好！',
          type: 'user',
          timestamp: Date.now() - 60000
        },
        {
          id: '2',
          content: '你好！我是AI助手，有什么可以帮助你的吗？',
          type: 'ai',
          timestamp: Date.now()
        }
      ]
    }
  },
  methods: {
    handleSend(message) {
      // 添加用户消息
      this.messages.push({
        id: Date.now().toString(),
        content: message,
        type: 'user',
        timestamp: Date.now()
      })
      
      // 模拟AI回复
      setTimeout(() => {
        this.messages.push({
          id: (Date.now() + 1).toString(),
          content: `收到你的消息：${message}`,
          type: 'ai',
          timestamp: Date.now()
        })
      }, 1000)
    }
  }
}
</script>

样式说明

重要：组件样式已经自动包含，无需手动引入CSS文件。所有样式都使用.xuanlin-ai-chat前缀，确保不会与宿主应用的样式冲突。

API

Props

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | messages | Array | [] | 消息列表 | | placeholder | String | '请输入消息...' | 输入框占位符 | | disabled | Boolean | false | 是否禁用输入 | | height | String | '400px' | 聊天区域高度 | | theme | String | 'light' | 主题，支持 'light' 和 'dark' |

Events

| 事件名 | 参数 | 说明 | |--------|------|------| | send | message | 发送消息时触发 | | input | value | 输入内容变化时触发 |

Slots

| 插槽名 | 说明 | |--------|------| | header | 聊天头部内容 | | footer | 聊天底部内容 |

消息格式

{
  id: String,           // 消息唯一标识
  content: String,      // 消息内容
  type: String,         // 消息类型：'user' | 'ai'
  timestamp: Number     // 时间戳
}

高级用法

自定义头部和底部

<template>
  <AIChat :messages="messages" @send="handleSend">
    <template #header>
      <div class="custom-header">
        <h3>AI助手</h3>
        <span class="status">在线</span>
      </div>
    </template>
    
    <template #footer>
      <div class="custom-footer">
        <small>© 2024 AI Chat Component</small>
      </div>
    </template>
  </AIChat>
</template>

使用子组件

<template>
  <div class="custom-chat">
    <ChatMessageList :messages="messages" height="300px" />
    <ChatInput 
      placeholder="自定义占位符"
      @send="handleSend"
    />
  </div>
</template>

<script>
import { ChatMessageList, ChatInput } from 'xuanlin-ai-chat'

export default {
  components: {
    ChatMessageList,
    ChatInput
  }
}
</script>

暗色主题

<template>
  <AIChat
    :messages="messages"
    theme="dark"
    @send="handleSend"
  />
</template>

开发

# 安装依赖
npm install

# 启动开发服务器
npm run serve

# 构建库
npm run build:lib

# 代码检查
npm run lint

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！