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.
75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
type HostBridgeOptions = {
|
|
onOpen?: () => void
|
|
onMinimize?: () => void
|
|
onMaximizedChange?: (isMaximized: boolean) => void
|
|
}
|
|
|
|
const OPEN_MESSAGE_TYPE = "cs-agent:open"
|
|
const MINIMIZE_MESSAGE_TYPE = "cs-agent:minimize"
|
|
const MAXIMIZED_MESSAGE_TYPE = "cs-agent:maximized"
|
|
const READY_MESSAGE_TYPE = "cs-agent:ready"
|
|
const REQUEST_MINIMIZE_MESSAGE_TYPE = "cs-agent:request-minimize"
|
|
const REQUEST_CLOSE_MESSAGE_TYPE = "cs-agent:request-close"
|
|
const REQUEST_TOGGLE_MAXIMIZE_MESSAGE_TYPE = "cs-agent:request-toggle-maximize"
|
|
|
|
export function bindKefuHostBridge(options: HostBridgeOptions = {}) {
|
|
if (typeof window === "undefined") {
|
|
return () => undefined
|
|
}
|
|
|
|
if (window.parent && window.parent !== window) {
|
|
window.parent.postMessage({ type: READY_MESSAGE_TYPE }, "*")
|
|
}
|
|
|
|
const handleMessage = (event: MessageEvent) => {
|
|
const data = event.data as
|
|
| {
|
|
type?: string
|
|
payload?: { isMaximized?: boolean }
|
|
}
|
|
| undefined
|
|
if (!data?.type) {
|
|
return
|
|
}
|
|
|
|
if (data.type === OPEN_MESSAGE_TYPE) {
|
|
options.onOpen?.()
|
|
return
|
|
}
|
|
|
|
if (data.type === MINIMIZE_MESSAGE_TYPE) {
|
|
options.onMinimize?.()
|
|
return
|
|
}
|
|
|
|
if (data.type === MAXIMIZED_MESSAGE_TYPE) {
|
|
options.onMaximizedChange?.(Boolean(data.payload?.isMaximized))
|
|
}
|
|
}
|
|
|
|
window.addEventListener("message", handleMessage)
|
|
return () => window.removeEventListener("message", handleMessage)
|
|
}
|
|
|
|
function postToParent(type: string) {
|
|
if (typeof window === "undefined") {
|
|
return
|
|
}
|
|
if (window.parent && window.parent !== window) {
|
|
window.parent.postMessage({ type }, "*")
|
|
}
|
|
}
|
|
|
|
export function requestKefuHostMinimize() {
|
|
postToParent(REQUEST_MINIMIZE_MESSAGE_TYPE)
|
|
}
|
|
|
|
export function requestKefuHostClose() {
|
|
postToParent(REQUEST_CLOSE_MESSAGE_TYPE)
|
|
}
|
|
|
|
export function requestKefuHostToggleMaximize() {
|
|
postToParent(REQUEST_TOGGLE_MAXIMIZE_MESSAGE_TYPE)
|
|
}
|
|
|