ADPChat 组件

在 Vue/React 项目中使用 ADPChat 组件或 ADPChatMounter API 快速创建聊天界面。

vue中使用

<template>
  <ADPChat
    :applications="applications"
    :current-application="currentApp"
    :conversations="conversations"
    :current-conversation="currentConversation"
    :chat-list="chatList"
    :user="userInfo"
    :api-config="apiConfig"
    theme="light"
    @send="handleSend"
    @select-application="handleSelectApp"
    @select-conversation="handleSelectConversation"
  />
</template>

<script setup>
import { ADPChat } from 'adp-chat-component'
import 'adp-chat-component/dist/es/adp-chat-component.css'
</script>

html/react或其他框架中使用

使用 ADPChatMounter 可以在任何框架中快速挂载聊天组件：

<div id="containerId"></div>
<script>
ADPChatComponent.ADPChat.mount('#containerId', {
  theme: 'light',
  apiConfig: {
    baseURL: '/api',
    apiDetailConfig: {
      applicationListApi: '/applications',
      conversationListApi: '/conversations',
    }
  }
})
</script>

ADPChatMounter 方法

方法	参数	返回值	说明
`mount`	`(selector: string, options: ADPChatProps)`	`string`	挂载组件，返回实例 ID
`update`	`(instanceId: string, options: Partial<ADPChatProps>)`	`void`	更新组件配置
`unmount`	`(instanceId: string)`	`void`	卸载组件

API

Props

属性名	类型	默认值	说明
apiConfig	`ApiConfig`	-	HTTP 请求配置，继承自 AxiosRequestConfig
theme	`'light' \| 'dark'`	`'light'`	主题模式
user	`UserInfo`	`{}`	用户信息
logoUrl	`string`	`''`	Logo URL
logoTitle	`string`	`''`	Logo 标题
isSidePanelOverlay	`boolean`	`true`	侧边栏是否使用overlay模式（覆盖内容区域）
showCloseButton	`boolean`	`true`	是否显示关闭按钮
showOverlayButton	`boolean`	`true`	是否显示浮层切换按钮
maxAppLen	`number`	`4`	最大应用显示数量
applications	`Application[]`	`[]`	应用列表
currentApplication	`Application`	-	当前选中的应用
currentApplicationId	`string`	`''`	当前选中的应用 ID（优先级高于 currentApplication）
conversations	`ChatConversation[]`	`[]`	会话列表
currentConversation	`ChatConversation`	-	当前选中的会话
currentConversationId	`string`	`''`	当前选中的会话 ID（优先级高于 currentConversation）
chatList	`Record[]`	`[]`	聊天消息列表
isChatting	`boolean`	`false`	是否正在聊天中
aiWarningText	`string`	`'内容由AI生成，仅供参考'`	AI警告文本
languageOptions	`LanguageOption[]`	`中英文`	语言选项列表
sideI18n	`SideI18n`	-	侧边栏国际化文本
chatI18n	`ChatI18n`	-	聊天国际化文本
chatItemI18n	`ChatItemI18n`	-	ChatItem 国际化文本
senderI18n	`SenderI18n`	-	Sender 国际化文本

Events

事件名	参数	说明
selectApplication	`Application`	选择应用
selectConversation	`ChatConversation`	选择会话
createConversation	-	新建会话
toggleTheme	-	切换主题
changeLanguage	`string`	切换语言
logout	-	退出登录
userClick	-	点击用户信息
close	-	关闭
overlay	-	浮层按钮点击（用于切换浮层状态）
send	`(query, fileList, conversationId, applicationId)`	发送消息
stop	-	停止生成
loadMore	`(conversationId, lastRecordId)`	加载更多
rate	`(conversationId, recordId, score)`	评分
share	`(conversationId, applicationId, recordIds)`	分享
copy	`(rowtext, content, type)`	复制，rowtext为渲染后的纯文本，content为原始markdown
uploadFile	`File[]`	上传文件
startRecord	-	开始录音
stopRecord	-	停止录音
message	`(code: MessageCode, message: string)`	消息提示，code 为消息码常量
conversationChange	`conversationId`	会话变化
dataLoaded	`(type, data)`	数据加载完成

Slots

插槽名	说明
sider-logo	侧边栏 Logo 区域，外层传入时显示外层内容，否则显示默认 LogoArea（需要 logoUrl 或 logoTitle）
header-overlay-content	头部浮层按钮区域，外层传入时显示外层内容，否则显示默认浮层图标（需要 showOverlayButton 为 true）
header-close-content	头部关闭按钮区域，外层传入时显示外层内容，否则显示默认关闭图标（需要 showCloseButton 为 true）

Methods

Methods (Expose)

方法名	参数	返回值	说明
loadApplications	-	void	加载应用列表
loadConversations	-	void	加载会话列表
loadConversationDetail	`conversationId`	void	加载会话详情
loadUserInfo	-	void	加载用户信息

类型定义

ApiConfig

interface ApiConfig extends AxiosRequestConfig {
  /** API 详细路径配置 */
  apiDetailConfig?: ApiDetailConfig
}

ApiDetailConfig

interface ApiDetailConfig {
  applicationListApi?: string   // 应用列表接口
  conversationListApi?: string  // 会话列表接口
  conversationDetailApi?: string // 会话详情接口
  sendMessageApi?: string       // 发送消息接口
  rateApi?: string              // 评分接口
  shareApi?: string             // 分享接口
  userInfoApi?: string          // 用户信息接口
  uploadApi?: string            // 文件上传接口
  asrUrlApi?: string            // ASR 语音识别 URL 接口
}

Application

interface Application {
  ApplicationId: string
  Name: string
  Avatar: string
  Greeting: string
  OpeningQuestions: string[]
}

ChatConversation

interface ChatConversation {
  Id: string
  AccountId: string
  Title: string
  LastActiveAt: number
  CreatedAt: number
  ApplicationId: string
}

MessageCode

消息码常量，用于 message 事件的 code 参数：

const MessageCode = {
  // 成功类
  COPY_SUCCESS: 'COPY_SUCCESS',
  
  // 错误类
  COPY_FAILED: 'COPY_FAILED',
  SHARE_FAILED: 'SHARE_FAILED',
  FILE_UPLOAD_FAILED: 'FILE_UPLOAD_FAILED',
  FILE_FORMAT_NOT_SUPPORT: 'FILE_FORMAT_NOT_SUPPORT',
  GET_APP_LIST_FAILED: 'GET_APP_LIST_FAILED',
  GET_CONVERSATION_LIST_FAILED: 'GET_CONVERSATION_LIST_FAILED',
  GET_CONVERSATION_DETAIL_FAILED: 'GET_CONVERSATION_DETAIL_FAILED',
  SEND_MESSAGE_FAILED: 'SEND_MESSAGE_FAILED',
  NETWORK_ERROR: 'NETWORK_ERROR',
  LOAD_MORE_FAILED: 'LOAD_MORE_FAILED',
  RATE_FAILED: 'RATE_FAILED',
  ASR_SERVICE_FAILED: 'ASR_SERVICE_FAILED',
  RECORD_FAILED: 'RECORD_FAILED',
  
  // 警告类
  ANSWERING: 'ANSWERING',
  RECORD_TOO_LONG: 'RECORD_TOO_LONG',
} as const;

type MessageCode = typeof MessageCode[keyof typeof MessageCode];

ADPChat 组件

Props

Events

Slots

Methods (Expose)

On this page