美腾大模型组件库

美腾大模型组件

安装

npm install mt-gpt
yarn add mt-gpt

使用方法

• 全局导入

// main.js
import MtGpt from 'mt-gpt';
import 'mt-gpt/dist/style.css';

vue.use(MtGpt)


// 组件使用
 <MtLlmChatBox theme="dark" />

• 局部导入

//导入 css：
import "mt-gpt/dist/style.css";

import { MtLlmChat } from "mt-gpt";
<MtLlmChat theme="dark" />;

重要提示：引入组件之后，注意大模型访问的接口地址，如果和业务地址不在同一服务器，开发时注意配置代理

    "/micro-assets": "http://192.168.5.199",   //静态资源
    "/mt_cpp_gpt": "http://192.168.10.254:7861", //模型接口地址

属性

| 属性名 | 类型 | 默认值 | 可选值 | 必填 | 说明 | | -------------------- | :------ | :------------------ | :----- | :--- | :------------------------------------------------- | | theme | String | light | dark | 否 | 主题颜色 | | miniCard | Boolean | false | true | 否 | 大模型是否为小卡片语音模式 | | withSpeech | Boolean | false | ture | 否 | 是否开启语音输入 | | url | String | /mt_cpp_gpt/mt_chat | | 否 | 大模型请求 url | | mqttIp | String | | | 否 | 大模型 mqtt 请求 ip | | answerStaticUrl | String | 系统默认 | | 否 | 大模型静态头像 url | | answerGifUrl | String | 系统默认 | | 否 | 大模型动态头像 url | | userAvatarUrl | String | 系统默认 | | 否 | 用户头像 url | | userName | String | 用户 | | 否 | 用户名称 | | requestHeadersConfig | Object | {} | | 否 | 大模型请求头配置,必须传递 clientType: 'web'或'app' | | chartOptions | Object | {} | | 否 | 大模型回答 G2 图表通用配置置 |

方法属性

1. messageFn

默认值：

({ content, type }) => {
  // 调用UI组件库函数，展示对应的消息提示
})

其他说明：

大模型提示消息函数 ，用于结合项目组件库自定义消息展示

| 参数名 | 类型 | 默认值 | 可选值 | | ------- | :----- | :----- | :---------------------------- | | content | String | -- | -- | | type | String | info | info、warning、success、error |

2. confirmFn

默认值：

({ title, onOk, onCancle }) => {
   // 调用UI组件库函数，展示对应的确认消息提示，根据用户操作执行onOk、onCancle函数即可
})

其他说明：

模型确认消息函数 ，用于结合项目组件库自定义确认消息展示。 onOk 为确认回调，外部业务直接执行即可，接受大模型后续行为；onCancle 为取消回调，外部业务直接执行即可，取消大模型后续行为

3. triggerActionFn

默认值：

({ type, data }) => {

},

其他说明：

大模型向外暴漏的动作函数,业务交互逻辑需要自行实现

示例

vue3 + element-plus

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
const messageFn = ({ content, type }) => {
  ElMessage({
    message: content,
    type: type,
    duration: 3000,
  });
};

const confirmFn = ({ title, onOk, onCancle }) => {
  ElMessageBox.confirm(title, "提示", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(() => {
      onOk();
    })
    .catch(() => {
      onCancle();
    });
};
</script>

<template>
  <div style="height: 100vh;">
    <mt-llm-chat-box
      theme="dark"
      url="/mt_cpp_gpt/mt_chat"
      :messageFn="messageFn"
      :confirmFn="confirmFn"
    />
  </div>
</template>

<style lang="scss" scoped></style>