l-ai-chat

基于Vue开发的AI聊天输入框组件库

一、组件说明

1. LAIChatComponent (容器组件)

• 提供整体布局框架
• 插槽：
  • #content - 放置聊天内容区域
  • #input - 放置输入控制区域

2. LChatContent (内容展示组件)

①Props:

| props | 注释 | 类型 | 默认值 | |----------|------------|----------|----------| | dataSource | 消息数据 | Array | [] |

dataSource - 格式示例：

[
  {
    id: '主键',
    content: '提问内容', // 我的提问内容 
    type: 'myMsg', // type: 'myMsg' 是指我的提问
    avatar: '头像地址', // 我的头像（在线图片地址）
  },
  { 
    id: '主键',
    content: 'AI的响应内容',// 支持markdown语法
    type: 'ai', // type: 'ai' 是指AI的回答
    avatar: '头像地址', // AI的头像（在线图片地址）
    contentLoading: false, // ai内容是否处于加载中，默认false
    echartsType: false, // 是否有echarts图标
    echartsData: {}, // 要渲染的echarts数据，参考echarts官网：https://echarts.apache.org/zh/index.html
  }
]

3. LChatInput (输入控制组件)

①Props:

| props | 注释 | 类型 | 默认值 | |----------|------------|----------|----------| | value（v-model） | 输入框内容 | String | | | stopAnswerShow | 是否显示【停止回答】按钮 | Boolean | false |

②Events（事件）:

| 事件名称 | 注释 | 回调 | |----------|------------|----------| | send | 发送消息事件，返回最新的消息 | function(e) | | stopAnswer | 停止回答事件 | function()| | input | 输入变化事件，返回最新的消息 | function(e)|

二、安装使用

1. 下载依赖

npm install l-ai-chat

2. 在main.js中导入样式文件

import 'l-ai-chat/l-ai-chat.css'

3. .vue文件中使用的示例代码：

<template>
  <LAIChatComponent>
    <template #content>
      <LChatContent :data-source="messages"/>
    </template>
    <template #input>
      <LChatInput 
        :value="inputVal"
        :stop-answer-show="isResponding"
        @send="handleSend"
        @stop-answer="handleStopAnswer"
        @input="handleInput"
      />
    </template>
  </LAIChatComponent>
</template>

<script>
import { LAIChatComponent, LChatContent, LChatInput } from 'l-ai-chat'
export default {
  components: {
    LAIChatComponent, LChatContent, LChatInput
  },
  data() {
    return {
      // 输入框内容
      inputVal:'',
      // 消息数据
      messages: [
          { content: '测试提问', type: 'myMsg', avatar: 'psn-avatar.png' },
          {
              "content": "- 测试项目人员数量和研发转化率\n     - 转化率以百分比形式显示，保留两位小数\n     - 结果按日期和代码排序\n<br></br>\n| 人员 | 人员转化率 | 日期       | 工号   | 金额       | 研发转化率 | 项目名称   |\n|------|------------|------------|------------|------------|------------|------------|\n| 001    | 0.06%      | 2025-05-01 | 001 | 100        | 0.18%      | 测试项目01     |\n",
              "type": "otherMsg",
              "id": "98b75c98a27dbad33e195bd516a185f7",
              "avatar": "ai-robot.png",
              "contentLoading": false,
              "echartsType": true,
              "echartsData": {
                  "title": {
                      "text": "人员和研发转化率"
                  },
                  "tooltip": {},
                  "legend": {
                      "data": [
                          "人员转化率",
                          "研发转化率"
                      ]
                  },
                  "xAxis": [
                      {
                          "type": "category",
                          "data": [
                              "2025-05-01",
                              "2025-05-02",
                              "2025-05-03",
                              "2025-05-04",
                              "2025-05-05"
                          ]
                      }
                  ],
                  "yAxis": [
                      {
                          "type": "value",
                          "name": "转化率"
                      }
                  ],
                  "series": [
                      {
                          "name": "人员转化率",
                          "type": "line",
                          "stack": "转化率",
                          "data": [
                              100.06,
                              90.06,
                              100.06,
                              90.06,
                              100.06
                          ]
                      },
                      {
                          "name": "研发转化率",
                          "type": "line",
                          "stack": "转化率",
                          "data": [
                              100.18,
                              110.18,
                              100.18,
                              110.18,
                              100.18
                          ]
                      }
                  ]
              }
          }
      ],
    }
  },
  methods:{
    /**
     * 发送消息事件，返回最新的消息
     * @param {*} value 输入框内容
     */
    handleSend(value){
      console.log(value)
    },
    /**
     * 输入框输入事件，返回最新的消息
     * @param {*} value 输入框内容
     */
    handleInput(value){
      console.log(value)
    },
    // 停止回答事件
    stopAnswer() {},
  }
}
</script>

NPM地址

NPM: https://www.npmjs.com/package/l-ai-chat

description

使用vue3+vite开发的一个AI输入框组件，组件名叫l-ai-chat，其中包含三个组件：LAIChatComponent、LChatContent、LChatInput；LAIChatComponent是最外层的组件，内部有两个插槽，一个是#content，包裹着LChatContent，另一个插槽是#input，包裹着LChatInput。LChatContent组件属性包括dataSource，里面是ai输入框的内容。LChatInput组件属性包括：value: 输入框内容(String)；stopAnswerShow: 是否显示停止回答按钮(Boolean)。LChatInput组件事件包括@send: 发送消息时触发；@stop-answer: 点击停止按钮时触发；@input: 输入内容变化时触发。

License

MIT