mlogclub
4bcfd36620
- Add KefuMessageList component for displaying chat messages with support for loading older messages and scrolling behavior. - Introduce ImWidgetConfig type and fetchImWidgetConfig function for retrieving widget configuration. - Create im-realtime module for managing WebSocket connections and handling real-time events. - Implement kefu-host-bridge for communication between the chat widget and the host application. - Establish kefu-chat store using Zustand for managing chat state, including message handling, socket connection, and notifications. - Enhance message handling with support for image uploads and attachments.
31 lines
923 B
TypeScript
31 lines
923 B
TypeScript
import { createWebSocketBaseUrl } from "@/lib/api/websocket"
|
|
import { getImVisitorId } from "@/lib/api/im"
|
|
|
|
const OPEN_IM_CHANNEL_ID =
|
|
process.env.NEXT_PUBLIC_OPEN_IM_CHANNEL_ID?.trim() || ""
|
|
const OPEN_IM_EXTERNAL_SOURCE =
|
|
process.env.NEXT_PUBLIC_OPEN_IM_EXTERNAL_SOURCE?.trim() || "web_chat"
|
|
|
|
export type ImRealtimeEnvelope = {
|
|
type: string
|
|
topic?: string
|
|
data?: {
|
|
conversationId?: number
|
|
messageId?: number
|
|
}
|
|
payload?: {
|
|
conversationId?: number
|
|
messageId?: number
|
|
}
|
|
}
|
|
|
|
export function createImRealtimeConnection() {
|
|
const baseUrl = createWebSocketBaseUrl()
|
|
const externalId = encodeURIComponent(getImVisitorId())
|
|
const externalSource = encodeURIComponent(OPEN_IM_EXTERNAL_SOURCE)
|
|
const channelId = encodeURIComponent(OPEN_IM_CHANNEL_ID)
|
|
return new WebSocket(
|
|
`${baseUrl}/api/open/im/ws?externalId=${externalId}&externalSource=${externalSource}&channelId=${channelId}`
|
|
)
|
|
}
|