对话气泡列表

用于展示一组对话列表数据

安装方式

yarn add pangea-component

引用方式

import HiMessageList from "pangea-component/hi-message-list";
import "pangea-component/dist/style.css";

API

Props

参数名	描述	类型	默认值
data	对话列表数据	Message[]	[]

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

Slot

插槽名	描述	参数
bubble-header	气泡顶部插槽	item: Message
bubble-footer	气泡底部插槽	item: Message

使用示例

<template>
  <hi-message-list :data="data">
    <template #bubble-header="{item}">
      <!-- 气泡顶部插槽内容 -->
    </template>
    <template #bubble-footer="{item}">
      <!-- 气泡底部插槽内容 -->
    </template>
  </hi-message-list>
</template>
<script lang="ts" setup>
  import HiMessageList from "pangea-component/hi-message-list";

  const data = [
    {
      type: "user",
      id: "1",
      content: "今天的天气如何",
    },
    {
      type: "ai",
      id: "2",
      content: "今天风和日丽万里晴空",
    },
  ];
</script>