Init Component

Use the init method to dynamically mount the chat component to any DOM container, suitable for all scenarios requiring dynamic chat interface creation.

ADPChatComponent.init(container?: string, config?: ChatConfig)

Parameters

Parameter	Type	Default	Description
container	`string`	`'body'`	CSS selector for mount container
config	`ChatConfig`	-	Configuration options

Return Value

Returns Vue component instance for subsequent operations.

ChatConfig Options

Props

属性名	类型	默认值	说明
container	`string`	`'body'`	Mount container selector
apiConfig	`ApiConfig`	-	HTTP request config, extends AxiosRequestConfig
theme	`'light' \| 'dark'`	`'light'`	Theme mode
user	`UserInfo`	`{}`	User info
logoUrl	`string`	`''`	Logo image URL
logoTitle	`string`	`''`	Logo title text
isOverlay	`boolean`	`false`	Overlay mode: true-use width/height as floating panel, false-fill container
isSidePanelOverlay	`boolean`	`true`	Whether sidebar uses overlay mode (overlay content area)
width	`string \| number`	`400`	Width (only when isOverlay is true)
height	`string \| number`	`'640'`	Height (only when isOverlay is true)
isOpen	`boolean`	-	Whether panel is open
onOpenChange	`(isOpen: boolean) => void`	-	Panel open state change callback
showCloseButton	`boolean`	`true`	Show close button
showOverlayButton	`boolean`	`true`	Show overlay toggle button
onOverlayChange	`(isOverlay: boolean) => void`	-	Overlay toggle callback (triggered when user clicks overlay button)
showToggleButton	`boolean`	`true`	Show floating toggle button
maxAppLen	`number`	`4`	Max application display count
currentApplication	`Application`	-	Currently selected application
currentApplicationId	`string`	-	Currently selected application ID (higher priority than currentApplication)
currentConversation	`ChatConversation`	-	Currently selected conversation
currentConversationId	`string`	-	Currently selected conversation ID (higher priority than currentConversation)
aiWarningText	`string`	`'AI generated content'`	AI warning text
languageOptions	`LanguageOption[]`	`zh/en`	Language options list
sideI18n	`SideI18n`	-	Sidebar i18n text
chatI18n	`ChatI18n`	-	Chat i18n text
chatItemI18n	`ChatItemI18n`	-	ChatItem i18n text
senderI18n	`SenderI18n`	-	Sender i18n text

i18n Configuration

sideI18n

{
  more?: string           // More
  collapse?: string       // Collapse
  today?: string          // Today
  recent?: string         // Recent
  switchTheme?: string    // Switch Theme
  selectLanguage?: string // Select Language
  logout?: string         // Logout
}

chatI18n

{
  loading?: string            // Loading
  thinking?: string           // Thinking
  checkAll?: string           // Select All
  shareFor?: string           // Share to
  copyUrl?: string            // Copy Link
  cancelShare?: string        // Cancel Share
  sendError?: string          // Send Failed
  networkError?: string       // Network Error
  createConversation?: string // New Chat
}

chatItemI18n

{
  thinking?: string             // Thinking
  deepThinkingFinished?: string // Deep thinking finished
  deepThinkingExpand?: string   // Expand deep thinking
  copy?: string                 // Copy
  replay?: string               // Regenerate
  share?: string                // Share
  good?: string                 // Like
  bad?: string                  // Dislike
  thxForGood?: string           // Thanks for liking
  thxForBad?: string            // Thanks for feedback
  references?: string           // References
}

senderI18n

{
  placeholder?: string       // Input placeholder
  placeholderMobile?: string // Mobile input placeholder
  uploadImg?: string         // Upload image
  startRecord?: string       // Start recording
  stopRecord?: string        // Stop recording
  answering?: string         // Answering
  notSupport?: string        // Not supported
  uploadError?: string       // Upload failed
  recordTooLong?: string     // Recording too long
}

Configure API paths via apiConfig, the component will automatically fetch data via HTTP requests. apiConfig extends AxiosRequestConfig, allowing configuration of baseURL, headers, timeout and other Axios request parameters:

ADPChatComponent.init('#chat-container', {
  apiConfig: {
    // Axios request config
    baseURL: 'https://api.example.com',
    timeout: 30000,
    headers: {
      'Authorization': 'Bearer token'
    }
  }
})

Mode Description

Fill Container Mode

Component fills the entire container, suitable for standalone pages:

ADPChatComponent.init('#chat-container', {
  isOverlay: false
})

Overlay Mode

Component displays as a floating panel with fixed dimensions, suitable for embedding in existing pages:

ADPChatComponent.init('#chat-container', {
  isOverlay: true,
  width: 400,
  height: 640
})

Unmount Component

// Unmount component from specified container
ADPChatComponent.unmount('#chat-container')

Type Definitions

UserInfo

interface UserInfo {
  avatarUrl?: string   // Avatar URL
  avatarName?: string  // Avatar display name
  name?: string        // Username
}

LanguageOption

interface LanguageOption {
  key: string    // Language identifier, e.g., 'en-US'
  value: string  // Display name, e.g., 'English'
}

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
}