Skip to content

对话管理面板

用于对话管理操作,展示对话历史记录等

image

安装方式

bash
yarn add pangea-component

引用方式

js
import HiConversations from "pangea-component/hi-conversations";
import "pangea-component/dist/style.css";

API

Props

参数名描述类型默认值
title会话面板标题string-
historyChats历史会话列表Chat[][]
conversationId会话 idstring-
javascript
interface Chat {
  name: string; // 会话名称
  id: string; // 会话id
}

Events

方法名描述参数
newChat新建对话事件() => void
selectHistoryChat选择历史会话记录事件(record: Object) => void
expand点击折叠展开按钮() => void

Slot

插槽名描述参数
extraCont额外展示内容-
footer底部区域插槽-

使用示例

html
<template>
  <hi-conversations 
    title="假期小助手" 
    :historyRecords="historyRecords"
    :conversationId="1"
    @new-chat="newChat"
    @expand="expand"
    @selectHistoryChat="selectHistoryChat"
  >
  </hi-conversations>
</template>
<script lang="ts" setup>
import HiConversations from "pangea-component/hi-conversations";

const historyRecords = [{
  id: 1,
  name: "咨询海信请假正则"
}, {
  id: 2,
  name: "询问天气"
}, {
  id: 3,
  name: "询问青岛旅游景点"
}]

const newChat = () => {
}
const expand = () => {
}
const selectHistoryChat = (record) => {
}

</script>