feat: implement Kefu message list component and related functionality

- 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.

web/lib/im-realtime.ts

@@ -0,0 +1,30 @@
+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}`
+  )
+}