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

安装方式
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 | 会话 id | string | - |
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>