mt-gpt v0.1.36

美腾大模型组件库

美腾大模型组件

安装

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", //模型接口地址

属性

方法属性

1. messageFn

默认值：

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

其他说明：

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

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>