ADPChat Component

Use ADPChat component or ADPChatMounter API to quickly create chat interface in Vue/React projects.

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

Usage in HTML/React or Other Frameworks

Use ADPChatMounter to quickly mount chat component in any framework:

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

ADPChatMounter Methods

Method	Parameters	Returns	Description
`mount`	`(selector: string, options: ADPChatProps)`	`string`	Mount component, returns instance ID
`update`	`(instanceId: string, options: Partial<ADPChatProps>)`	`void`	Update component config
`unmount`	`(instanceId: string)`	`void`	Unmount component

API

Props

属性名	类型	默认值	说明
apiConfig	`ApiConfig`	-	HTTP request config, extends AxiosRequestConfig
theme	`'light' \| 'dark'`	`'light'`	Theme mode
user	`UserInfo`	`{}`	User info
logoUrl	`string`	`''`	Logo URL
logoTitle	`string`	`''`	Logo title
isSidePanelOverlay	`boolean`	`true`	Whether sidebar uses overlay mode (overlay content area)
showCloseButton	`boolean`	`true`	Show close button
showOverlayButton	`boolean`	`true`	Show overlay toggle button
maxAppLen	`number`	`4`	Max application display count
applications	`Application[]`	`[]`	Application list
currentApplication	`Application`	-	Currently selected application
currentApplicationId	`string`	`''`	Currently selected application ID (higher priority than currentApplication)
conversations	`ChatConversation[]`	`[]`	Conversation list
currentConversation	`ChatConversation`	-	Currently selected conversation
currentConversationId	`string`	`''`	Currently selected conversation ID (higher priority than currentConversation)
chatList	`Record[]`	`[]`	Chat message list
isChatting	`boolean`	`false`	Whether chatting
aiWarningText	`string`	`'AI generated content'`	AI warning text
languageOptions	`LanguageOption[]`	`zh/en`	Language options
sideI18n	`SideI18n`	-	Sidebar i18n text
chatI18n	`ChatI18n`	-	Chat i18n text
chatItemI18n	`ChatItemI18n`	-	ChatItem i18n text
senderI18n	`SenderI18n`	-	Sender i18n text

Events

事件名	参数	说明
selectApplication	`Application`	Select application
selectConversation	`ChatConversation`	Select conversation
createConversation	-	Create conversation
toggleTheme	-	Toggle theme
changeLanguage	`string`	Change language
logout	-	Logout
userClick	-	User info click
close	-	Close
overlay	-	Overlay button clicked (for toggling overlay state)
send	`(query, fileList, conversationId, applicationId)`	Send message
stop	-	Stop generation
loadMore	`(conversationId, lastRecordId)`	Load more
rate	`(conversationId, recordId, score)`	Rate
share	`(conversationId, applicationId, recordIds)`	Share
copy	`(rowtext, content, type)`	Copy, rowtext is rendered plain text, content is raw markdown
uploadFile	`File[]`	Upload file
startRecord	-	Start recording
stopRecord	-	Stop recording
message	`(code: MessageCode, message: string)`	Message tip, code is message code constant
conversationChange	`conversationId`	Conversation change
dataLoaded	`(type, data)`	Data loaded

Slots

插槽名	说明
sider-logo	Sidebar logo area, shows external content if provided, otherwise shows default LogoArea (requires logoUrl or logoTitle)
header-overlay-content	Header overlay button area, shows external content if provided, otherwise shows default overlay icon (requires showOverlayButton to be true)
header-close-content	Header close button area, shows external content if provided, otherwise shows default close icon (requires showCloseButton to be true)

Methods

Methods (Expose)

方法名	参数	返回值	说明
loadApplications	-	void	Load applications
loadConversations	-	void	Load conversations
loadConversationDetail	`conversationId`	void	Load conversation detail
loadUserInfo	-	void	Load user info

Type Definitions

ApiConfig

interface ApiConfig extends AxiosRequestConfig {
  /** API detail path config */
  apiDetailConfig?: ApiDetailConfig
}

ApiDetailConfig

interface ApiDetailConfig {
  applicationListApi?: string   // Application list API
  conversationListApi?: string  // Conversation list API
  conversationDetailApi?: string // Conversation detail API
  sendMessageApi?: string       // Send message API
  rateApi?: string              // Rate API
  shareApi?: string             // Share API
  userInfoApi?: string          // User info API
  uploadApi?: string            // File upload API
  asrUrlApi?: string            // ASR URL API
}

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 constants for the code parameter in message event:

const MessageCode = {
  // Success
  COPY_SUCCESS: 'COPY_SUCCESS',
  
  // Error
  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',
  
  // Warning
  ANSWERING: 'ANSWERING',
  RECORD_TOO_LONG: 'RECORD_TOO_LONG',
} as const;

type MessageCode = typeof MessageCode[keyof typeof MessageCode];

ADPChat Component

Props

Events

Slots

Methods (Expose)

On this page