盘古低代码

对话气泡列表 ​

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

今天的天气如何

今天风和日丽万里晴空

点击查看代码
vue
<template>
  <div style="padding: 16px; border: 1px solid #ddd">
    <hi-message-list :data="data">
      <template #bubble-header="{ item }">
        <!-- 气泡顶部插槽内容 -->
      </template>
      <template #bubble-footer="{ item }">
        <!-- 气泡底部插槽内容 -->
      </template>
    </hi-message-list>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import HiMessageList from "pangea-component/hi-message-list";
import type { Message } from "pangea-component/hi-message-list";
import "pangea-component/dist/style.css";

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

安装方式 ​

bash
yarn add pangea-component

引用方式 ​

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

API ​

Props ​

参数名描述类型默认值
data对话列表数据Message[][]
javascript
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

使用示例 ​

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