对话管理面板

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

假期小助手

历史对话

咨询海信请假正则

询问天气

询问青岛旅游景点

点击查看代码

<template>
  <div style="height: 500px">
    <hi-conversations
      title="假期小助手"
      :historyRecords="historyRecords"
      conversationId="1"
      @new-chat="newChat"
      @expand="expand"
      @selectHistoryChat="selectHistoryChat"
    >
    </hi-conversations>
  </div>
</template>
<script lang="ts" setup>
import "pangea-component/dist/style.css";
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>

安装方式

yarn add pangea-component

引用方式

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

API

Props

参数名	描述	类型	默认值
title	会话面板标题	string	-
historyChats	历史会话列表	Chat[]	[]
conversationId	会话 id	string	-

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

Events

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

Slot

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

使用示例

<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>