npm package: @linker-design-plus/chat-next
Description: AI Chat component for linker design
Author: Linker Design Team
Latest version: 1.0.6

sud# ChatNext 组件库

提供了一套用于构建聊天界面的 Vue 3 组件集合。

## 组件列表

- [ChatSender 发送框](#chatsender-发送框)
- [ChatAttachments 附件列表](#chatattachments-附件列表)
- [ChatActionbar 消息操作栏](#chatactionbar-消息操作栏)
- [ChatThinking 思考过程](#chatthinking-思考过程)
- [ChatLoading 加载状态](#chatloading-加载状态)
- [ChatItem 聊天消息项](#chatitem-聊天消息项)
- [ChatMarkdown Markdown 渲染](#chatmarkdown-markdown渲染)

---

## ChatSender 发送框

用于输入和发送聊天消息的组件。支持普通文本输入和富文本模板输入。

### 属性 (Props)

| 属性名              | 类型                                | 默认值                           | 说明                                                    |
| ------------------- | ----------------------------------- | -------------------------------- | ------------------------------------------------------- |
| `value` / `v-model` | `string`                            | `-`                              | 输入框的值。支持语法糖 `v-model` 或 `v-model:value`     |
| `defaultValue`      | `string`                            | `''`                             | 输入框的值。非受控属性                                  |
| `loading`           | `boolean`                           | `true`                           | 发送按钮是否处于加载状态。为 `false` 时显示停止分析按钮 |
| `allowEmpty`        | `boolean`                           | `false`                          | 是否允许发送空内容                                      |
| `textareaProps`     | `TextareaProps`                     | `{ placeholder: '输入消息...' }` | 输入框的属性，如 `placeholder`                          |
| `templates`         | `ITemplateNode[]`                   | `[]`                             | 模板节点列表，提供后将开启富文本模板模式                |
| `validate`          | `() => boolean \| Promise<boolean>` | `-`                              | 发送前的校验函数                                        |

### 事件 (Emits)

| 事件名              | 参数             | 说明                         |
| ------------------- | ---------------- | ---------------------------- |
| `send`              | `(text: string)` | 发送消息时触发               |
| `stop`              | `-`              | 点击停止按钮时触发           |
| `update:value`      | `(val: string)`  | 输入内容变化时触发           |
| `update:modelValue` | `(val: string)`  | 输入内容变化时触发 (v-model) |

### 插槽 (Slots)

| 插槽名          | 说明                 |
| --------------- | -------------------- |
| `header`        | 输入框外标题区域扩展 |
| `inner-header`  | 输入框内标题区域扩展 |
| `input-prefix`  | 输入框前方区域       |
| `footer-prefix` | 输入框左下角区域扩展 |
| `footer-suffix` | 输入框右下角区域扩展 |

### 接口类型

```typescript
export type TextareaProps = {
  placeholder?: string;
};

export interface ITemplateNode {
  type: 'text' | 'select' | 'input';
  id: string; // unique id for template nodes
  content?: string; // only for text
  options?: { label: string; value: string }[] | string[]; // only for select
  multiple?: boolean; // only for select
  value?: string | string[]; // for select and input (string[] for multiple select)
  placeholder?: string; // for input and select
}
```

---

## ChatAttachments 附件列表

用于展示上传的附件或文件列表。

### 属性 (Props)

| 属性名       | 类型                               | 默认值   | 说明                                                                                                    |
| ------------ | ---------------------------------- | -------- | ------------------------------------------------------------------------------------------------------- |
| `items`      | `IChatAttachment[]`                | `[]`     | 附件列表数据                                                                                            |
| `overflow`   | `'wrap' \| 'scrollX' \| 'scrollY'` | `'wrap'` | 文件列表超出时样式                                                                                      |
| `removable`  | `boolean`                          | `true`   | 是否显示删除按钮                                                                                        |
| `fieldNames` | `object`                           | `-`      | 自定义数据字段映射，包含 `name`, `suffix`, `size`, `status`, `statusText`, `icon`, `url`, `type`, `uid` |

### 事件 (Emits)

| 事件名   | 参数                                     | 说明               |
| -------- | ---------------------------------------- | ------------------ |
| `remove` | `(item: IChatAttachment, index: number)` | 点击删除按钮时触发 |

### 接口类型

```typescript
export interface IChatAttachment {
  uid?: string | number;
  icon?: string;
  suffix?: string;
  name: string;
  url?: string;
  type?: string;
  size?: number;
  status?: 'success' | 'error' | 'pending';
  statusText?: string;
  [key: string]: any;
}
```

---

## ChatActionbar 消息操作栏

展示在聊天消息底部的操作按钮列表（如复制、重试、点赞、点踩）。

### 属性 (Props)

| 属性名    | 类型             | 默认值                              | 说明                   |
| --------- | ---------------- | ----------------------------------- | ---------------------- |
| `actions` | `IChatActions[]` | `['copy', 'replay', 'good', 'bad']` | 需要显示的操作项列表   |
| `content` | `string`         | `''`                                | 用于复制操作的文本内容 |

> `good`和`bad`点赞点踩暂未实现

### 事件 (Emits)

| 事件名   | 参数                     | 说明               |
| -------- | ------------------------ | ------------------ |
| `action` | `(action: IChatActions)` | 点击操作按钮时触发 |

### 接口类型

```typescript
import type { Component } from 'vue';

export type IChatActionBuiltin = 'copy' | 'replay' | 'good' | 'bad';

export interface IChatActionConfig {
  action: string;
  text?: string;
  icon?: string | Component;
}

export type IChatActions = IChatActionBuiltin | IChatActionConfig;
```

---

## ChatThinking 思考过程

展示 AI 思考过程的组件，支持展开/收起和不同的动画状态。

### 属性 (Props)

| 属性名      | 类型                                           | 默认值                            | 说明                               |
| ----------- | ---------------------------------------------- | --------------------------------- | ---------------------------------- |
| `content`   | `IChatThinkingContent`                         | `{ text: '', title: '思考过程' }` | 思考内容及标题                     |
| `layout`    | `'block' \| 'border'`                          | `'block'`                         | 布局方式，块级或带虚线边框         |
| `status`    | `'pending' \| 'complete' \| 'stop' \| 'error'` | `'pending'`                       | 思考状态                           |
| `maxHeight` | `number`                                       | `-`                               | 展开内容的最大高度                 |
| `animation` | `'circle' \| 'moving' \| 'gradient'`           | `'circle'`                        | 思考中的动画类型                   |
| `collapsed` | `boolean`                                      | `false`                           | 是否折叠（支持 v-model:collapsed） |

### 事件 (Emits)

| 事件名             | 参数             | 说明               |
| ------------------ | ---------------- | ------------------ |
| `update:collapsed` | `(val: boolean)` | 折叠状态变化时触发 |

### 接口类型

```typescript
export interface IChatThinkingContent {
  title?: string;
  text?: string;
}
export type IChatThinkingLayout = 'block' | 'border';
export type IChatThinkingStatus = 'pending' | 'complete' | 'stop' | 'error';
export type IChatThinkingAnimation = 'circle' | 'moving' | 'gradient';
```

---

## ChatLoading 加载状态

消息加载中的动画组件。

### 属性 (Props)

| 属性名      | 类型              | 默认值  | 说明                                 |
| ----------- | ----------------- | ------- | ------------------------------------ |
| `animation` | `'spin' \| 'dot'` | `'dot'` | 加载动画类型，支持旋转圆环或跳动小点 |

### 接口类型

```typescript
export type IChatLoadingAnimation = 'spin' | 'dot';
```

---

## ChatItem 聊天消息项

完整的单条聊天消息组件，整合了头像、内容、加载状态、操作栏等。

### 属性 (Props)

| 属性名     | 类型        | 默认值  | 说明         |
| ---------- | ----------- | ------- | ------------ |
| `chatItem` | `IChatItem` | `-`     | 消息项数据   |
| `avatar`   | `boolean`   | `false` | 是否显示头像 |

### 插槽 (Slots)

| 插槽名        | 说明                                        |
| ------------- | ------------------------------------------- |
| `user-files`  | 用户角色时的文件展示区域                    |
| `loading`     | AI 角色 `status='pending'` 时的加载区域     |
| `thinking`    | AI 角色 `status='thinking'` 时的思考区域    |
| `information` | AI 角色时的额外信息展示区域（位于内容上方） |
| `actions`     | AI 角色时的操作栏区域                       |
| `card`        | AI 角色时的卡片展示区域（位于内容下方）     |
| `suggest`     | AI 角色时的建议区域                         |
| `user-extra`  | 用户角色底部的扩展区域                      |

### 接口类型

```typescript
export interface IChatItem {
  id: string | number;
  role: 'user' | 'assistant' | 'system';
  content: string;
  avatar?: string;
  status?: 'pending' | 'thinking' | 'success' | 'error';
  [key: string]: any;
}
```

---

## ChatMarkdown Markdown 渲染

用于安全地渲染包含代码块和高亮的 Markdown 文本。

### 属性 (Props)

| 属性名    | 类型     | 默认值 | 说明                     |
| --------- | -------- | ------ | ------------------------ |
| `content` | `string` | `''`   | 要渲染的 Markdown 字符串 |

_注意：此组件内置了 Highlight.js 语法高亮和 GitHub Markdown CSS 样式，并自带代码块一键复制功能。_

# demo 示例

```vue
<template>
  <div class="chat-demo-container">
    <h2>AI Chat Demo</h2>

    <div class="chat-box">
      <!-- 聊天消息列表区域 -->
      <div class="chat-message-list">
        <HChatItem
          v-for="(msg, index) in messages"
          :key="index"
          :avatar="msg.role === 'assistant'"
          :chat-item="msg"
        >
          <template #user-files>
            <template v-if="msg.inputFiles && msg.inputFiles.length">
              <div class="user-files-list">
                <img
                  v-for="file in msg.inputFiles"
                  :key="file.url"
                  :src="file.url"
                  alt="file-image"
                />
              </div>
            </template>
          </template>
          <template #user-extra>
            <template v-if="msg.userExtra">
              <img :src="QuoteIconPNG" alt="icon-quote" @click="handleQuote(msg)" />
            </template>
          </template>
          <template #loading>
            <HChatLoading />
          </template>
          <template #thinking>
            <HChatThinking
              :animation="'circle'"
              :layout="'border'"
              status="pending"
              :content="{ title: '思考中', text: msg.thinking }"
            />
          </template>

          <template #information>
            <div class="information">
              <div>随便你在这里</div>
              <div>做什么</div>
            </div>
          </template>

          <template #actions>
            <HChatActionbar
              :content="msg.content"
              :actions="[
                'copy',
                'replay',
                {
                  action: 'document',
                  text: '生成文档并编辑',
                  icon: IconBook,
                },
              ]"
              @action="handleAction"
            />
          </template>

          <template #card>
            <div class="card-item">
              <div class="card-item-title">
                <span>生成文档并编辑</span>
              </div>
            </div>
          </template>
          <template #suggest>
            <div class="suggest-list">
              <div v-for="suggest in msg.suggest" :key="suggest" class="suggest-item">{{
                suggest
              }}</div>
            </div>
          </template>
        </HChatItem>
      </div>

      <!-- 发送消息区域 -->
      <div class="chat-sender-wrapper">
        <HChatSender
          v-model="inputValue"
          :templates="templateNodes"
          :textarea-props="{
            placeholder: '你好...',
          }"
          @send="handleSendMessage"
        >
          <template #header>
            <div class="header-out">
              <span v-for="skill in skillList" :key="skill" class="skill-item">{{ skill }}</span>
            </div>
          </template>

          <template #inner-header>
            <HChatAttachments
              overflow="scrollX"
              :field-names="{
                suffix: 'bak',
              }"
              :items="inputFiles"
              @remove="handleRemoveFile"
            />
          </template>

          <template #input-prefix>
            <span>我是技能插槽</span>
          </template>

          <template #footer-prefix>
            <div class="footer-prefix-item">深度思考</div>
          </template>
          <template #footer-suffix>
            <div>123</div>
          </template>
        </HChatSender>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { IconBook } from '@arco-design/web-vue/es/icon';

import {
  HChatItem,
  HChatSender,
  HChatActionbar,
  HChatLoading,
  HChatThinking,
  HChatAttachments,
} from '@linker-design-plus/chat-next';
import { useEventSource } from '@linker-design-plus/chat-next/eventSource';
import type {
  IChatItem,
  IChatActions,
  IChatAttachment,
  ITemplateNode,
} from '@linker-design-plus/chat-next';
import '@linker-design-plus/chat-next/dist/style.css';
import QuoteIconPNG from './assets/images/quote.png';

const { startEventSource, stopEventSource } = useEventSource();

const inputValue = ref('');

const templateNodes = ref<ITemplateNode[]>([
  { type: 'text', id: 't1', content: '帮我用 ' },
  { type: 'select', id: 's1', options: ['Vue', 'React', 'Angular'], value: 'Vue' },
  { type: 'text', id: 't2', content: ' 以及 ' },
  {
    type: 'select',
    id: 's2',
    multiple: true,
    placeholder: '选择打包工具',
    options: ['TypeScript', 'Vite', 'Webpack', 'Less'],
    value: [],
  },
  { type: 'text', id: 't3', content: ' 开发一个 ' },
  { type: 'input', id: 'i1', placeholder: '组件名称', value: '' },
  { type: 'text', id: 't4', content: ' 组件。' },
]);

const skillList = ref<string[]>([
  'vue',
  'react',
  'angular',
  'nodejs',
  'mongodb',
  'redis',
  'mysql',
  'postgresql',
  'docker',
  'kubernetes',
]);

const inputFiles = ref<IChatAttachment[]>([
  {
    url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
    name: 'testtesttesttesttesttesttesttesttesttesttesttesttesttest',
    bak: 'png',
    size: 100,
    icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
  },
  {
    url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
    name: 'test.png',
    suffix: 'png',
    size: 100,
    icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
  },
  {
    url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
    name: 'test.png',
    suffix: 'png',
    size: 100,
    icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
  },
  {
    url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
    name: 'test.png',
    suffix: 'png',
    size: 100,
    icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
  },
  {
    url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
    name: 'test.png',
    suffix: 'png',
    size: 100,
    icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
  },
  {
    url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
    name: 'test.png',
    suffix: 'png',
    size: 100,
    icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
  },
  {
    url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
    name: 'test.png',
    suffix: 'png',
    size: 100,
    icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
  },
  {
    url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
    name: 'test.png',
    suffix: 'png',
    size: 100,
    status: 'pending',
    icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
  },
  {
    url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
    name: 'test.png',
    suffix: 'png',
    size: 100,
    status: 'pending',
    icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
  },
  {
    url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
    name: 'test.png',
    suffix: 'png',
    size: 100,
    status: 'pending',
    icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
  },
  {
    url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
    name: 'test.png',
    suffix: 'png',
    size: 100,
    status: 'pending',
    icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
  },
  {
    url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
    name: 'test.png',
    suffix: 'png',
    size: 100,
    status: 'pending',
    icon: 'https://tdesign.gtimg.com/site/chat-avatar.png',
  },
]);

const fullThinkingText =
  '好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？好的，请问你需要什么类型的组件呢？';

// 模拟的聊天记录
const messages = ref<IChatItem[]>([
  {
    role: 'assistant',
    content: '好的，请问你需要什么类型的组件呢？',
    thinking: '',
    avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
    status: 'thinking',
  },
  {
    role: 'assistant',
    content: `
# This is TDesign

## This is TDesign

### This is TDesign

#### This is TDesign

The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw \`HTML\`, it’s 234 characters. In the raw \`HTML\`, there’s more markup than there is text.

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet.

an example | *an example* | **an example**

1. Bird
1. McHale
1. Parish
    1. Bird
    1. McHale
        1. Parish

- Red
- Green
- Blue
    - Red
    - Green
        - Blue

This is [an example](http://example.com/ "Title") inline link.

<http://example.com/>
# TDesign（腾讯设计体系）核心特性与技术架构

以下是关于 TDesign（腾讯设计体系）的核心特性与技术架构的表格化总结：

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

| 分类 | 核心内容 | 关键技术/特性 |
|------|----------|---------------|
| **设计理念** | • 设计价值观：用户为本、科技向善、突破创新... | • 设计原子单元 |
| **核心组件库** | • 基础组件：Button/Input/Table/Modal... | • 组件覆盖率  |
| **技术特性** | • 多框架支持：Vue/React/Angular... | • 按需加载 |
\`\`\`bash
$ npm i tdesign-vue-next
\`\`\`

---

\`\`\`javascript
import { createApp } from 'vue';
import App from './app.vue';

const app = createApp(App);
app.use(TDesignChat);
\`\`\`
    `,
    avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
    status: 'success',
  },
  {
    role: 'user',
    content: '帮我写一段 Vue3 组件代码。',
    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
    userExtra: true,

    inputFiles: [
      {
        url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
        name: 'test.png',
        size: 100,
        type: 'image/png',
      },
      {
        url: 'https://tdesign.gtimg.com/site/chat-avatar.png',
        name: 'test.png',
        size: 100,
        type: 'image/png',
      },
    ],
    status: 'success',
  },
  {
    role: 'assistant',
    content: '好的，请问你需要什么类型的组件呢？',
    avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
    status: 'success',
  },

  {
    role: 'user',
    content: '帮我写一段 Vue3 组件代码。',
    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
    userExtra: false,
    status: 'success',
  },
  {
    role: 'assistant',
    content: '好的，请问你需要什么类型的组件呢？',
    avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
    status: 'success',
    suggest: ['vue3', 'react', 'angular'],
  },
]);

const handleQuote = (msg: IChatItem) => {
  console.log(msg);
};

const handleAction = (action: IChatActions) => {
  console.log(action);
};

// 处理发送消息
const handleSendMessage = (text: string) => {
  if (!text.trim()) return;

  // 添加用户消息
  messages.value.push({ role: 'user', content: text, status: 'success' });
  inputValue.value = ''; // 保证触发发送后立即清空双向绑定的输入框

  // 模拟 AI 回复
  setTimeout(() => {
    messages.value.push({
      role: 'assistant',
      content: `收到你的消息：${text}。这是一个模拟的回复。`,
      status: 'success',
    });
  }, 1000);
};

const handleRemoveFile = (file: IChatAttachment, index: number) => {
  console.log(file, index);
  inputFiles.value = inputFiles.value.filter((item, i) => i !== index);
};

onMounted(() => {
  let i = 0;
  const timer = setInterval(() => {
    if (i < fullThinkingText.length) {
      messages.value[0].thinking += fullThinkingText[i];
      i++;
    } else {
      clearInterval(timer);
    }
  }, 30);
});
</script>

<style scoped lang="less">
@import '../src/style/variables.less';

.chat-demo-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: @chat-spacing-xl;
  font-family: sans-serif;
}

.chat-box {
  border: 1px solid @chat-border-color;
  border-radius: @chat-border-radius-md;
  display: flex;
  flex-direction: column;
  height: 600px;
  overflow: hidden;
}

.chat-message-list {
  flex: 1;
  padding: @chat-spacing-xl;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: @chat-spacing-lg;
}

.chat-sender-wrapper {
  padding: @chat-spacing-lg;
  background-color: @chat-panel-bg-color;
  border-top: 1px solid @chat-border-color;
}

.user-files-list {
  display: flex;
  gap: 10px;
}

.header-out {
  display: flex;
  gap: @chat-spacing-sm;
}

.skill-item {
  padding: @chat-spacing-xs @chat-spacing-sm;
  border-radius: @chat-border-radius-base;
  background-color: @chat-bg-color;
  color: @chat-text-color-1;
  font-size: @chat-font-size-sm;
  cursor: pointer;
  &:hover {
    background-color: @chat-hover-bg-color;
  }
}
.information {
  display: flex;
  flex-direction: column;
  gap: @chat-spacing-sm;
  padding: @chat-spacing-md;
  border-radius: @chat-border-radius-md;
  background-color: @chat-bg-color;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: @chat-spacing-md;
}
.card-item {
  padding: @chat-spacing-md;
  border-radius: @chat-border-radius-md;
  background-color: @chat-bg-color;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: @chat-spacing-md;
}
.suggest-list {
  display: flex;
  flex-direction: column;
  gap: @chat-spacing-sm;
  .suggest-item {
    width: fit-content;
    padding: @chat-spacing-xs @chat-spacing-sm;
    border-radius: @chat-border-radius-base;
    background-color: @chat-bg-color;
    color: @chat-text-color-1;
    font-size: @chat-font-size-sm;
    cursor: pointer;
    &:hover {
      background-color: @chat-hover-bg-color;
    }
  }
}
.footer-prefix-item {
  border-radius: @chat-border-radius-lg;
  background-color: @chat-bg-color;
  padding: @chat-spacing-xs @chat-spacing-md;
  font-size: @chat-font-size-sm;
  color: @chat-text-color-2;
  cursor: pointer;
  &:hover {
    background-color: @chat-hover-bg-color;
  }
}
</style>
```

# Aaas 大模型返回类型字典

| 事件名称                 | 解释                                                              | 图例                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 备注                       |
| ------------------------ | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
| `answer`                 | 大模型流式输出                                                    | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/61b2cb4b-7937-4f39-88cb-9ed4bada27af.png?Expires=1773222895&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=215OuxJ7ogzskina%2Bs4HxCPtMAk%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773219295-423b0e9d8ba54f7fbf177f57f9252fd5-0-09a19d7ffb361abed51f5c044df1f411" alt="描述文字" width="300">                                                                                                                                                                                                                                                                                                                                                | 通用                       |
| `information`            | 标记信息，用作提示                                                | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/04c0c194-c9f4-48af-bb90-0c4222cc157a.png?Expires=1773222959&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=ErkLEOJg4PWo5NxNFJU4QSxDhds%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773219359-e250de23af7241b5adb3d7cf550469df-0-93404c39ee3ad08183e5a21811cfd2cc">                                                                                                                                                                                                                                                                                                                                                                             | 通用                       |
| `search_result`          | 搜索到的文件和片段                                                | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/44eaca3f-19d0-489b-9a99-2520cdf33652.png?Expires=1773223103&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=XAiQJhw%2FSFZMNPzPx%2FMtYnOAltE%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773219503-84590de0cb44453ea1b1ad112975077c-0-ac344b3c6137e2a181a5ba741d2809d1">                                                                                                                                                                                                                                                                                                                                                                         | 文殊                       |
| `search_filter`          | 标记信息，用作展示过滤的文案信息                                  | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/eb91eccb-58ba-4254-8dbc-0d772d317ce5.png?Expires=1773223192&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=a9rvw1VfaB5QcYiaQKL63kFRluw%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773219592-3c610c3670b14356a92744ceae756ca1-0-87e8599abb0143b66e2e4fef8177615e">                                                                                                                                                                                                                                                                                                                                                                             | 文殊                       |
| `markdown`               | 输出`markdown`的消息                                              | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/12341f25-6691-4a7a-ba60-9d83c36c4c97.png?Expires=1773223384&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=RK5ww0FvbwAVh7Qaai6Pgv8DRzc%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773219784-da5473cb75dd43f8886cd1d700a397ae-0-b69ee6a20ebae2c94aec5036b63d802b">                                                                                                                                                                                                                                                                                                                                                                             | 通用                       |
| ~~`file_import`~~        | ~~会话文件导入了文件，通知前端更新数据~~                          | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/29b4fc5f-e183-4fb0-ac9c-48bd27c98cc5.png?Expires=1773223451&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=cOw70EPoCi3xraFyzagP9dkuxxs%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773219851-959cc222ff384bc5bca6c2369843d082-0-fb03453cc25f08c85cd5a9d7a9abc22a">                                                                                                                                                                                                                                                                                                                                                                             | ~~通用，已废弃~~           |
| `thinking`               | 思考过程                                                          | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/ba84f4d0-63fa-472e-b3f4-57fdb5e01780.png?Expires=1773223637&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=D3ZnT8QPkUs4z6ENwXM0cgddNws%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220037-e0a6e21adddf4d2d8ad7c050c297f160-0-67c962d46523119952bb3a159564cca4">                                                                                                                                                                                                                                                                                                                                                                             | 通用                       |
| `suggest`                | 推荐问题                                                          | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/a9cfb452-746f-407d-8cbc-ccf21697fc2f.png?Expires=1773223690&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=oWOM9T9TaMl4djS7n6PopZ5CQt4%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220090-ee91c6f19f804ae1b08388277c312bcc-0-4c4820be7fdf55585eb12f44b7061657">                                                                                                                                                                                                                                                                                                                                                                             | 通用                       |
| `faqRet`                 | 命中 faq                                                          | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/7a06907e-62ed-42da-a945-812bd1dff771.png?Expires=1773223745&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=xIL%2FSLlThrWzt6K%2F9iG1RSYp4EQ%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220145-1bba01a2fe6f45eba896a9628e6efe1c-0-530cc1e528ed353c3b150072e0cac129"> <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/4afb3810-12ee-40f4-b64a-a0eb3348ba2b.png?Expires=1773223766&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=5aYWUKHDy3dNT2kYxZ860uL6lHg%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220166-76e604b9b8dc4e73aa2d4333cb58df97-0-fba6a87b77d21bbdf36d4b7d64d9a2dc"> | 文殊                       |
| `docRet`                 | 命中文档信息                                                      | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/dd1de8ce-4b30-415e-82bf-ad45c5063a21.png?Expires=1773223924&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=YDpJb%2FpnjOTKHu57KOuef5gdPnM%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220324-f5c91f86b06e4b6299fb064bc39935c3-0-1dad03517055b6b709290bd739ca4e98" alt="命中文档信息" width="300">                                                                                                                                                                                                                                                                                                                                            | 文殊                       |
| `k0_alarm_search_result` | 命中告警查询                                                      | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/bae14b2a-3032-4e7f-9ab8-de8e520011e6.png?Expires=1773224059&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=Dj7wkMrAPIo9M555fIF05UyOGe0%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220459-2444f64e6e6146cbb092cd3a8cbb4936-0-16e1950f4089f630e7c712bace3522fc" alt="命中告警查询" width="300">                                                                                                                                                                                                                                                                                                                                              | 哨兵                       |
| ~~`video_url_dict`~~     | 视频高光信息                                                      | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/9b997048-dd5c-4192-a6f3-1d24947a8023.png?Expires=1773224113&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=2lJe4kMzq0DBtXGCvJRzuyRkFGM%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220513-05b0a833813741739e439b959e866adf-0-1e3a6b227f50605408b9d895bb5268a6" alt="视频高光信息" width="300">                                                                                                                                                                                                                                                                                                                                              | ~~指令成片器、精华切片机~~ |
| `fileOutput`             | 溯源文档信息 用于定位引用的文档片段并高亮                         | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/2be6d458-63b5-465b-b0ad-e12ea8955885.png?Expires=1773224431&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=%2BIai9tdcUYlCcNIAPB6hWIKqjTY%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220831-a481d6c5ae7d4f8e983118dd4bf22081-0-dd6603a7cae2d39528594394da173f8a" alt="溯源" width="300">                                                                                                                                                                                                                                                                                                                                                    | 文殊                       |
| `process_input`          | 过程输出                                                          | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/f5807dda-6f49-4c42-897f-6476a81e2c27.png?Expires=1773224490&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=Lieqitde6a96brVNhWKCQRjHk7k%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220890-b08b38d59e1c47d09fdcda489b10a69f-0-4d6b03620c710413c3a0c9c1b85fca54" alt="过程输出" width="300">                                                                                                                                                                                                                                                                                                                                                  | 广西机房 demo              |
| `query`                  | 工作流输出结果的操作按钮的文字                                    | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/7b452576-d8e8-4001-b395-e989f62c2fd3.png?Expires=1773224537&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=%2FJLwdueDaTcwowvJVyWpHY9TUjM%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773220937-9917a7d9785841b39f9f40d7fd383b3d-0-3da3b91b00d5eb5f51537d8d2c2eaa28" alt="按钮文字" width="300">                                                                                                                                                                                                                                                                                                                                                | 哨兵                       |
| `agentPro`               | 流式大模型输出，不同于`answer`,这个 type 用作多个节点一起输出内容 | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/83ac69a4-7cf5-47c9-9a8a-42c9ed026be3.png?Expires=1773224829&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=tMAD3AyQgyNotjAINL5wn4nydn8%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773221229-cb70c64cbe8c44d48144cbe00e7a4446-0-8aaeefc50ea725afe7bc8d55abfbbdc5" alt="流式大模型输出" width="300">                                                                                                                                                                                                                                                                                                                                            | 通用                       |
| `progressRate`           | 流式大模型输出，用作自定义渲染处理进度                            | <img src="https://alidocs2-zjk-cdn.dingtalk.com/res/meonarbxQvXYQqXx/img/b65dba01-5fea-45da-89bc-010b52e2f6b7.png?Expires=1773225686&OSSAccessKeyId=LTAI5tKTjg4Kq1HCdBJ8qpSp&Signature=PArLWRn%2FLHyU8%2FsTpM%2F%2F43qjVMw%3D&x-oss-process=image%2Fformat%2Cwebp%2Fignore-error%2C1&&auth_key=1773222086-4ed1563650d94e8f9e59b879875a7ced-0-70fa46d575f8c851e32fdd213d1f3fbf" alt="进度" width="300">                                                                                                                                                                                                                                                                                                                                              | 通用                       |