沉浸式 AI 组件

沉浸式 Ai 组件，对接智能体信息交互

安装方式

yarn add pangea-component

引用方式

import HiChat from "pangea-component/hi-chat";
import "pangea-component/dist/style.css";

API

Props

参数名	描述	类型	默认值
messages	聊天列表数据	Message[]	[]
loading	聊天问题是否正在查询中（是否显示停止生成操作）	Boolean	false
historyChats	历史会话列表	Chat[]	[]
historyChatLoading	历史会话列表加载状态	boolean	false
title	标题	string	-
description	描述	string	-
suggestions	建议问题列表	SuggestionItem[]	[]

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

interface Chat {
  name: string; // 会话名称
  id: string; // 会话id
}

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

Events

方法名	描述	参数
send	输入框发送事件	(value: string) => {}
stop	打断当前发送事件	() => {}
newChat	新建对话事件	() => {}
selectHistoryChat	选择历史会话记录事件	(record: Object) => {}
scrollTop	消息区域滚动到顶部	(record: {conversionId: string}) => {}

Slot

插槽名	描述	参数
sender-top	输入框顶部插槽	-
sender-prefix	输入框底部左侧扩展插槽	-
conversation-extra-cont	左侧会话列表内容扩展区域	-
consation-footer	左侧会话列表底部扩展区域	-
welcome	欢迎区域插槽	-

Methods

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

使用示例

<template>
  <hi-chat
    ref="hiChatRef"
    :messages="messages"
    :loading="loading"
    :historyChats="historyRecords"
    :historyChatLoading="historyMsgLoading"
    :suggestions="suggestions"
    :title="agentInfo.name"
    :description="agentConfig.opening_statement"
    @send="send"
    @stop="stop"
    @newChat="newChat"
    @selectHistoryChat="selectHistoryChat"
    @scrollTop="scrollTop"
  >
  </hi-chat>
</template>
<script lang="ts" setup>
  import { ref, onMounted, computed } from "vue";
  import HiChat from "pangea-component/hi-chat";
  import useChat from "pangea-component/use-chat";

  const hiChatRef = ref();
  const {
    sendChat,
    stopChat,
    getHisMessages,
    getHistoryRecords,
    messages,
    loading,
    historyMsgLoading,
    historyRecords,
    msgHasMore,
    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(() => {
    getHistoryRecords(null);
    queryAgentConfig();
    queryAgentInfo();
  });

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

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

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

  const selectHistoryChat = (record) => {
    conversationId.value = record.id;
    getHisMessages(record.id, null);
  };

  const scrollTop = () => {
    if (msgHasMore.value) {
      getHisMessages(conversationId.value, messages.value[0].id);
    }
  };
</script>
<style lang="less" scoped></style>