盘古低代码

协作式AI助手 ​

协作式AI助手，可嵌入系统页面中进行智能信息查询

点击查看代码
vue
<template>
  <div style="padding: 24px; border: 1px solid #ddd">
    <button @click="showAiAssistant">Ai助手</button>
  </div>
  <hi-chat-modal
    class="chat-modal-w"
    ref="hiChatRef"
    style="z-index: 99"
    top="20px"
    left="calc(100% - 450px)"
    :messages="messages"
    :loading="loading"
    :suggestions="suggestions"
    title="假期小助手"
    description="我是你的假期小助手，我可以提供假期余额查询、假期政策查询、还可以帮你请假哦"
    @send="send"
    @stop="stop"
    @newChat="newChat"
  >
  </hi-chat-modal>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import HiChatModal from "pangea-component/hi-chat-modal";
import type { Message } from "pangea-component/hi-chat-modal";
import "pangea-component/dist/style.css";

const hiChatRef = ref();
const messages = ref<Message[]>([]);
const loading = ref(false);

const suggestions = [
  "怎么请年休假、事假、产假等",
  "咨询海信的请假政策",
  "休假期间有哪些注意事项，填写请假申请有哪些注意点，等等！！",
].map((i) => ({
  subTitle: i,
}));

const showAiAssistant = () => {
  hiChatRef.value.open();
};

const send = (value, files) => {
  const userMessage: Message = reactive({
    type: "user",
    id: Date.now(),
    content: value,
    status: "loading",
  });
  loading.value = true;
  messages.value.push(userMessage);
  if (files && files.length) {
    userMessage.files = files.map((file) => {
      return {
        name: file.name,
        url: file.url!,
        type: file.type,
      };
    });
  }
  hiChatRef.value.scrollToBottom();
  setTimeout(() => {
    userMessage.status = "success";
    loading.value = false;
    // ai回复消息
    const aiMessage: Message = reactive({
      type: "ai",
      id: Date.now(),
      content: "这是一条统一的测试回复信息哦！！！",
      thougth: "",
      pageJson: null,
      pageCode: undefined,
      isAgentThought: false,
      isThoughtCollapsed: false,
      status: "success",
    });
    messages.value.push(aiMessage);
    hiChatRef.value.scrollToBottom();
  }, 1000);
};
const stop = () => {};
const newChat = () => {
  messages.value = [];
};
</script>
<style>
.chat-modal-w {
  line-height: normal;
}
.chat-modal-w svg {
  display: inline-block;
}
</style>

安装方式 ​

bash
yarn add pangea-component

引用方式 ​

js
import HiChatModal from "pangea-component/hi-chat-modal";
import "pangea-component/dist/style.css";

API ​

Props ​

参数名描述类型默认值
messages聊天列表数据Message[][]
loading聊天问题是否正在查询中（是否显示停止生成操作）Booleanfalse
title标题string-
welcomeTitle欢迎句标题string-
description描述string-
suggestions建议问题列表SuggestionItem[][]
allowUpload是否允许上传booleanfalse
uploadType上传类型"image" | "file" | "all""all"
uploadLimit上传文件数量限制number-
uploadConfig上传接口配置UploadConfig-
ctxInjected工作卡注入参数方法等对象Record<string, any>-
javascript
interface Message {
  type: "ai" | "user"; // 消息类型
  id: number;
  content: string; // 消息内容
  thougth?: string; // 思考内容
  pageJson?: any; // 页面json
  isThinking?: boolean; // 是否正在思考中
  thinkTime?: boolean; // 思考时间
  status?: "loading" | "success" | "fail"; // 消息状态
  files?: MessageFileItem[] // 气泡中显示的文件
}

interface SuggestionItem {
  title: string; // 主标题
  subTitle?: string; // 子标题
  icon?: VNode; // 图标
}

interface UploadConfig {
  action: string; // 上传接口路径
  headers?: Record<string, any>; // 请求头
  data?: Record<string, any>; // 请求附加参数
  name?: string; // 上传参数文件名 不设置默认file
  didFetch: (response) => { url: string, name: string }; // 上传成功回调函数需要返回 url和name数据
}

Events ​

方法名描述参数
send输入框发送事件(value: string) => {}
stop打断当前发送事件() => {}
newChat新建对话事件() => {}

Slot ​

插槽名描述参数
sender-top输入框顶部插槽-
sender-prefix输入框底部左侧扩展插槽-
welcome欢迎区域插槽-
bubble-header气泡顶部插槽item: Message
bubble-footer气泡底部插槽item: Message
bubble-form工作卡渲染插槽item: Message

Methods ​

方法名描述参数返回值
open打开ai助手--
close关闭ai助手--
scrollToBottom会话信息列表内容滚动到底部方法--

使用示例 ​

html
<template>
  <button @click="showAiAssistant">Ai助手</button>
  <hi-chat-modal
    ref="hiChatRef"
    :messages="messages"
    :loading="loading"
    :suggestions="suggestions"
    :title="agentInfo.name"
    :description="agentConfig.opening_statement"
    @send="send"
    @stop="stop"
    @newChat="newChat"
  >
  </hi-chat-modal>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";
import HiChatModal from "pangea-component/hi-chat-modal";
import useChat from "pangea-component/use-chat";

const hiChatRef = ref();
const {
  sendChat,
  stopChat,
  messages,
  loading,
  conversationId,
  queryAgentConfig,
  queryAgentInfo,
  agentInfo,
  agentConfig,
} = useChat({ chatRef: hiChatRef });

const suggestions = computed(() => {
  if (agentConfig.value?.suggested_questions?.length) {
    return agentConfig.value.suggested_questions.map((item) => {
      return {
        subTitle: item,
      };
    });
  }
  return [];
});

onMounted(() => {
  queryAgentConfig();
  queryAgentInfo();
});

const send = (value) => {
  sendChat(value);
};

const stop = () => {
  stopChat();
};

const newChat = () => {
  messages.value = [];
  conversationId.value = null;
};

const showAiAssistant = () => {
  hiChatRef.value.open();
};
</script>
<style lang="less" scoped></style>