Détail du package

mt-gpt

kaiwen0627155MIT0.1.48

美腾大模型

readme

美腾大模型组件库

美腾大模型组件

安装

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>