嵌入式 AI 组件

将按钮等可点击控件作为 AI 场景的入口标识和触发起始点，整个智能体的交互、信息呈现均在对话框中完成。

点击查看代码

<template>
  <div style="padding: 16px; border: 1px solid #ddd">
    <hi-ai-button
      ref="hiAiButtonRef"
      title="Ai助手"
      :messages="messages"
      :loading="loading"
      :allow-send="true"
      pannel-title="智能助理"
      @click="showAiPop"
      @send="send"
      @stop="stop"
    >
    </hi-ai-button>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import HiAiButton from "pangea-component/hi-ai-button";
import type { Message } from "pangea-component/hi-ai-button";
import "pangea-component/dist/style.css";

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

const showAiPop = () => {
  send("初始测试查询问题");
};

const send = (value) => {
  messages.value = [];
  const userMessage: Message = reactive({
    type: "user",
    id: Date.now(),
    content: value,
    status: "loading",
  });
  loading.value = true;
  messages.value.push(userMessage);
  hiAiButtonRef.value.scrollToBottom();
  setTimeout(() => {
    userMessage.status = "success";
    loading.value = false;
    // ai回复消息
    const aiMessage: Message = reactive({
      type: "ai",
      id: Date.now(),
      content: `这是问题${value}的统一测试回复信息哦！！！`,
      thougth: "",
      pageJson: null,
      pageCode: undefined,
      isAgentThought: false,
      isThoughtCollapsed: false,
      status: "success",
    });
    messages.value.push(aiMessage);
    hiAiButtonRef.value.scrollToBottom();
  }, 1000);
};
const stop = () => {};
</script>

安装方式

yarn add pangea-component

引用方式

import HiAiButton from "pangea-component/hi-ai-button";
import "pangea-component/dist/style.css";

API

Props

参数名	描述	类型	默认值
messages	聊天列表数据(只接受一组问答数据)	Message[]	[]
loading	聊天问题是否正在查询中（是否显示停止生成操作）	Boolean	false
allowSend	是否允许输入	Boolean	false
historyChatLoading	历史会话列表加载状态	boolean	false
title	按钮标题	string	-
PannelTittle	智能体面板标题	string	-
PannelIcon	智能体面板图标	VNode	IconAiAssistantFill

interface Message {
  type: "ai" | "user"; // 消息类型
  id: number;
  content: string; // 消息内容
  thougth?: string; // 思考内容
  pageJson?: any; // 页面json
  isAgentThought?: boolean; // 是否具有思考内容
  isThoughtCollapsed?: boolean; // 是否折叠思考内容
  status?: "loading" | "success" | "fail"; // 消息状态
}

Events

方法名	描述	参数
click	按钮点击 ai 面板显示事件	() => {}
send	输入框发送事件	(value: string) => {}
stop	打断当前发送事件	() => {}

Slot

插槽名	描述	参数
default	默认触发器插槽	-
icon	按钮图标插槽	-
bubble-footer	气泡底部插槽	item: Message

Methods

方法名	描述	参数	返回值
scrollToBottom	会话信息列表内容滚动到底部方法	-	-