@ion299/sdk-react-native 0.1.0-beta.1

package/src/realtime.ts

@@ -0,0 +1,278 @@
+/**
+ * Минимальный Pusher-протокол поверх нативного WebSocket.
+ *
+ * Не требует pusher-js / @react-native-community/netinfo.
+ * Работает в Expo Go, bare RN, любом JS-окружении с WebSocket.
+ *
+ * Поддерживает:
+ *   - presence-channels (подписка с auth)
+ *   - WidgetMessagesUpdated
+ *   - heartbeat (pong на pusher:ping)
+ *   - exponential reconnect
+ */
+import type { ReverbConfig } from './types'
+
+export type RealtimeEvent =
+  | 'messages_updated'
+  | 'connected'
+  | 'disconnected'
+
+export type RealtimeHandler = (data?: unknown) => void
+
+const PUSHER_PROTOCOL = 7
+const RECONNECT_DELAYS = [1000, 2000, 4000, 8000, 16000]
+
+const MESSAGE_UPDATE_EVENTS = new Set([
+  'ChatSdkMessagesUpdated',
+  '.ChatSdkMessagesUpdated',
+  'App\\Events\\ChatSdk\\ChatSdkMessagesUpdated',
+])
+
+/** На эмуляторе API часто на 10.0.2.2, а Reverb host с сервера — localhost. */
+export function resolveReverbConfig(
+  reverb: ReverbConfig,
+  apiBaseUrl: string,
+): ReverbConfig {
+  const host = reverb.host?.trim() ?? ''
+  if (host === 'localhost' || host === '127.0.0.1') {
+    try {
+      const apiHost = new URL(apiBaseUrl).hostname
+      if (apiHost && apiHost !== 'localhost' && apiHost !== '127.0.0.1') {
+        return { ...reverb, host: apiHost }
+      }
+    } catch {
+      // keep original host
+    }
+  }
+  return reverb
+}
+
+export class RealtimeClient {
+  private ws: WebSocket | null = null
+  private socketId: string | null = null
+  private channelName: string | null = null
+  private handlers: Map<RealtimeEvent, Set<RealtimeHandler>> = new Map()
+  private reconnectAttempt = 0
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null
+  private destroyed = false
+
+  private authEndpoint = ''
+  private authHeaders: Record<string, string> = {}
+  private wsUrl = ''
+
+  // ─── Публичное API ─────────────────────────────────────────────────────────
+
+  connect(
+    config: ReverbConfig,
+    widgetToken: string,
+    contactId: string,
+    authEndpoint: string,
+    authHeaders: Record<string, string>,
+    apiBaseUrl?: string,
+  ): void {
+    this.destroy()
+    this.destroyed = false
+
+    const resolved = apiBaseUrl ? resolveReverbConfig(config, apiBaseUrl) : config
+    const secure = resolved.scheme === 'https'
+    const wsScheme = secure ? 'wss' : 'ws'
+    this.wsUrl = `${wsScheme}://${resolved.host}:${resolved.port}/app/${resolved.key}?protocol=${PUSHER_PROTOCOL}&client=js&version=8.4.0`
+    this.channelName = `presence-chat_sdk.${widgetToken}.contact.${contactId}`
+    this.authEndpoint = authEndpoint
+    this.authHeaders = authHeaders
+
+    this.openSocket()
+  }
+
+  disconnect(): void {
+    this.destroy()
+  }
+
+  isConnected(): boolean {
+    return this.ws?.readyState === WebSocket.OPEN && !!this.socketId
+  }
+
+  on(event: RealtimeEvent, handler: RealtimeHandler): () => void {
+    if (!this.handlers.has(event)) {
+      this.handlers.set(event, new Set())
+    }
+    this.handlers.get(event)!.add(handler)
+    return () => this.handlers.get(event)?.delete(handler)
+  }
+
+  // ─── Внутренняя логика ─────────────────────────────────────────────────────
+
+  private openSocket(): void {
+    try {
+      this.ws = new WebSocket(this.wsUrl)
+    } catch (e) {
+      this.scheduleReconnect()
+      return
+    }
+
+    this.ws.onopen = () => {
+      // Pusher пришлёт pusher:connection_established — ждём
+    }
+
+    this.ws.onmessage = (event) => {
+      this.handleMessage(String(event.data))
+    }
+
+    this.ws.onerror = () => {
+      // onclose вызовется следом
+    }
+
+    this.ws.onclose = () => {
+      this.socketId = null
+      this.emit('disconnected')
+      if (!this.destroyed) {
+        this.scheduleReconnect()
+      }
+    }
+  }
+
+  private handleMessage(raw: string): void {
+    let msg: { event: string; data?: unknown; channel?: string }
+    try {
+      msg = JSON.parse(raw)
+    } catch {
+      return
+    }
+
+    const eventName = msg.event ?? ''
+
+    switch (eventName) {
+      case 'pusher:connection_established': {
+        const data =
+          typeof msg.data === 'string' ? JSON.parse(msg.data) : msg.data
+        this.socketId = (data as { socket_id: string }).socket_id
+        this.reconnectAttempt = 0
+        void this.subscribe()
+        break
+      }
+
+      case 'pusher:ping':
+        this.send({ event: 'pusher:pong', data: {} })
+        break
+
+      case 'pusher:error': {
+        const errData = this.parseData(msg.data)
+        console.warn('ChatSDK realtime: pusher error', errData)
+        break
+      }
+
+      case 'pusher_internal:subscription_succeeded':
+        this.emit('connected')
+        break
+
+      case 'pusher:subscription_error': {
+        const errData = this.parseData(msg.data)
+        console.warn('ChatSDK realtime: subscription error', errData)
+        this.emit('disconnected')
+        break
+      }
+
+      default:
+        if (MESSAGE_UPDATE_EVENTS.has(eventName)) {
+          this.emit('messages_updated', this.parseData(msg.data))
+        }
+        break
+    }
+  }
+
+  private async subscribe(): Promise<void> {
+    if (!this.channelName || !this.socketId) return
+
+    let auth = ''
+    let channelData = ''
+    try {
+      const res = await fetch(this.authEndpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+          ...this.authHeaders,
+        },
+        body: JSON.stringify({
+          socket_id: this.socketId,
+          channel_name: this.channelName,
+        }),
+      })
+      if (res.ok) {
+        const body = (await res.json()) as { auth?: string; channel_data?: string }
+        auth = body.auth ?? ''
+        channelData = body.channel_data ?? ''
+      } else {
+        const body = await res.text().catch(() => '')
+        console.warn('ChatSDK realtime: auth HTTP', res.status, body)
+      }
+    } catch (e) {
+      console.warn('ChatSDK realtime: auth request failed', e)
+    }
+
+    if (!auth) return
+    if (this.ws?.readyState !== WebSocket.OPEN) return
+
+    const payload: Record<string, string> = {
+      channel: this.channelName,
+      auth,
+    }
+    // Presence-канал требует channel_data — без него подписка не проходит
+    if (channelData) {
+      payload.channel_data = channelData
+    }
+
+    this.send({
+      event: 'pusher:subscribe',
+      data: payload,
+    })
+  }
+
+  private send(payload: unknown): void {
+    if (this.ws?.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(payload))
+    }
+  }
+
+  private scheduleReconnect(): void {
+    if (this.destroyed) return
+    const delay =
+      RECONNECT_DELAYS[Math.min(this.reconnectAttempt, RECONNECT_DELAYS.length - 1)]
+    this.reconnectAttempt++
+    this.reconnectTimer = setTimeout(() => {
+      if (!this.destroyed) this.openSocket()
+    }, delay)
+  }
+
+  private destroy(): void {
+    this.destroyed = true
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer)
+      this.reconnectTimer = null
+    }
+    if (this.ws) {
+      this.ws.onopen = null
+      this.ws.onmessage = null
+      this.ws.onerror = null
+      this.ws.onclose = null
+      this.ws.close()
+      this.ws = null
+    }
+    this.socketId = null
+  }
+
+  private parseData(data: unknown): unknown {
+    if (typeof data === 'string') {
+      try {
+        return JSON.parse(data)
+      } catch {
+        return data
+      }
+    }
+    return data
+  }
+
+  private emit(event: RealtimeEvent, data?: unknown): void {
+    this.handlers.get(event)?.forEach((h) => h(data))
+  }
+}

package/src/safeArea.ts

@@ -0,0 +1,8 @@
+import { Platform, StatusBar } from 'react-native'
+
+/** Верхний отступ под status bar (Android). На iOS используйте SafeAreaView. */
+export function getAndroidStatusBarHeight(): number {
+  return StatusBar.currentHeight ?? 24
+}
+
+export const INPUT_BOTTOM_PADDING = Platform.select({ ios: 0, android: 12, default: 12 }) ?? 12

package/src/session.ts

@@ -0,0 +1,196 @@
+import { AppState, type NativeEventSubscription } from 'react-native'
+import type { MobileApiClient } from './api'
+import { RealtimeClient } from './realtime'
+import type {
+  ChatMessage,
+  ChatOperator,
+  MobileConfig,
+  NewMessageEventPayload,
+  OperatorChangedEventPayload,
+} from './types'
+
+const POLL_INTERVAL_MS = 5000
+
+export interface SessionEmitters {
+  emitMessagesUpdated: (messages: ChatMessage[], operator: ChatOperator | null) => void
+  emitConnectedChange: (connected: boolean) => void
+  emitOperatorChanged: (payload: OperatorChangedEventPayload) => void
+  emitNewMessage: (payload: NewMessageEventPayload) => void
+}
+
+/**
+ * Время жизни — от ChatSDK.login() до ChatSDK.logout().
+ * Один источник правды для realtime + polling + кэша сообщений/оператора.
+ * События проксируются в ChatSDK через emitters.
+ */
+export class ChatSDKSession {
+  private realtime: RealtimeClient | null = null
+  private pollTimer: ReturnType<typeof setInterval> | null = null
+  private appStateSub: NativeEventSubscription | null = null
+  private destroyed = false
+  private refreshing = false
+
+  private messages: ChatMessage[] = []
+  private operator: ChatOperator | null = null
+  private knownMessageIds: Set<string> = new Set()
+  private initialLoaded = false
+  private connected = false
+
+  constructor(
+    private readonly api: MobileApiClient,
+    private readonly sdkConfig: MobileConfig,
+    private readonly widgetToken: string,
+    private readonly baseUrl: string,
+    private readonly emitters: SessionEmitters,
+  ) {}
+
+  start(): void {
+    this.openRealtime()
+    this.appStateSub = AppState.addEventListener('change', this.handleAppStateChange)
+    void this.refreshMessages()
+  }
+
+  destroy(): void {
+    this.destroyed = true
+    this.realtime?.disconnect()
+    this.realtime = null
+    this.stopPolling()
+    this.appStateSub?.remove()
+    this.appStateSub = null
+    this.messages = []
+    this.operator = null
+    this.knownMessageIds.clear()
+    this.initialLoaded = false
+    if (this.connected) {
+      this.connected = false
+      this.emitters.emitConnectedChange(false)
+    }
+  }
+
+  getMessages(): ChatMessage[] {
+    return this.messages
+  }
+
+  getOperator(): ChatOperator | null {
+    return this.operator
+  }
+
+  isConnected(): boolean {
+    return this.connected
+  }
+
+  async refreshMessages(): Promise<void> {
+    if (this.destroyed || this.refreshing) return
+    this.refreshing = true
+    try {
+      const data = await this.api.getMessages()
+      if (this.destroyed) return
+      const incoming = data.messages ?? []
+      const nextOperator = data.operator ?? null
+
+      if (this.initialLoaded) {
+        this.detectOperatorChange(nextOperator)
+        this.detectNewMessages(incoming, nextOperator)
+      }
+
+      this.messages = incoming
+      this.operator = nextOperator
+      this.knownMessageIds = new Set(incoming.map((m) => m.id))
+      this.initialLoaded = true
+
+      this.emitters.emitMessagesUpdated(incoming, nextOperator)
+    } catch (e) {
+      // Тихо — UI-слой (useChat) сам показывает ошибки своих явных действий.
+      // Фоновый refresh не должен ронять чат, если на короткое время пропала сеть.
+      if (this.initialLoaded) return
+      throw e
+    } finally {
+      this.refreshing = false
+    }
+  }
+
+  private detectOperatorChange(nextOperator: ChatOperator | null): void {
+    const prevId = this.operator?.id ?? null
+    const nextId = nextOperator?.id ?? null
+    if (prevId === nextId) return
+    const contactId = this.api.getContactId()
+    if (!contactId) return
+    this.emitters.emitOperatorChanged({
+      token:            this.widgetToken,
+      contactId,
+      previousOperator: this.operator,
+      operator:         nextOperator,
+      occurredAt:       new Date().toISOString(),
+    })
+  }
+
+  private detectNewMessages(incoming: ChatMessage[], nextOperator: ChatOperator | null): void {
+    const contactId = this.api.getContactId()
+    if (!contactId) return
+    for (const message of incoming) {
+      if (this.knownMessageIds.has(message.id)) continue
+      if (message.type !== 'user') continue
+      this.emitters.emitNewMessage({
+        token:      this.widgetToken,
+        contactId,
+        message,
+        operator:   nextOperator,
+        occurredAt: new Date().toISOString(),
+      })
+    }
+  }
+
+  private openRealtime(): void {
+    const contactId = this.api.getContactId()
+    if (!contactId) return
+
+    const rt = new RealtimeClient()
+    this.realtime = rt
+
+    rt.on('connected', () => this.setConnected(true))
+    rt.on('disconnected', () => this.setConnected(false))
+    rt.on('messages_updated', () => void this.refreshMessages())
+
+    rt.connect(
+      this.sdkConfig.reverb,
+      this.widgetToken,
+      contactId,
+      this.api.getBroadcastAuthEndpoint(),
+      this.api.getAuthHeaders(),
+      this.baseUrl || this.sdkConfig.apiBaseUrl,
+    )
+  }
+
+  private setConnected(value: boolean): void {
+    if (this.connected === value) return
+    this.connected = value
+    this.emitters.emitConnectedChange(value)
+    if (value) {
+      this.stopPolling()
+    } else {
+      this.startPolling()
+    }
+  }
+
+  private startPolling(): void {
+    if (this.pollTimer || this.destroyed) return
+    if (AppState.currentState !== 'active') return
+    this.pollTimer = setInterval(() => void this.refreshMessages(), POLL_INTERVAL_MS)
+  }
+
+  private stopPolling(): void {
+    if (!this.pollTimer) return
+    clearInterval(this.pollTimer)
+    this.pollTimer = null
+  }
+
+  private handleAppStateChange = (next: string): void => {
+    if (this.destroyed) return
+    if (next === 'active') {
+      void this.refreshMessages()
+      if (!this.connected) this.startPolling()
+    } else {
+      this.stopPolling()
+    }
+  }
+}

package/src/surveyCache.ts

@@ -0,0 +1,24 @@
+const cache = new Map<string, Set<string>>()
+
+export function isSurveyEventSeen(contactId: string, messageId: string): boolean {
+  return cache.get(contactId)?.has(messageId) ?? false
+}
+
+export function markSurveyEventSeen(contactId: string, messageId: string): void {
+  if (!cache.has(contactId)) {
+    cache.set(contactId, new Set())
+  }
+  cache.get(contactId)!.add(messageId)
+}
+
+export function deleteSurveyEvent(contactId: string, messageId: string): void {
+  cache.get(contactId)?.delete(messageId)
+}
+
+export function clearSurveyCache(contactId?: string): void {
+  if (contactId) {
+    cache.delete(contactId)
+  } else {
+    cache.clear()
+  }
+}

package/src/theme.ts

@@ -0,0 +1,49 @@
+import type { MobileConfig } from './types'
+
+export interface ChatTheme {
+  primaryColor: string
+  primaryColorStart: string | null
+  primaryColorEnd: string | null
+  isGradient: boolean
+  // Пузыри
+  outboundBg: string
+  inboundBg: string
+  outboundText: string
+  inboundText: string
+  // UI
+  background: string
+  inputBg: string
+  inputBorder: string
+  inputText: string
+  systemText: string
+  headerBg: string
+  headerText: string
+  sendButtonBg: string
+}
+
+export function buildTheme(config: MobileConfig | null): ChatTheme {
+  const primary = config?.themeColor ?? '#2d8ef0'
+  const isGradient =
+    config?.colorType === 'gradient' &&
+    !!config?.colorStart &&
+    !!config?.colorEnd
+
+  return {
+    primaryColor: primary,
+    primaryColorStart: config?.colorStart ?? null,
+    primaryColorEnd: config?.colorEnd ?? null,
+    isGradient,
+    outboundBg: primary,
+    inboundBg: '#f0f0f5',
+    outboundText: '#ffffff',
+    inboundText: '#1a1a1a',
+    background: '#ffffff',
+    inputBg: '#f7f7f9',
+    inputBorder: '#e0e0e8',
+    inputText: '#1a1a1a',
+    systemText: '#9999aa',
+    headerBg: primary,
+    headerText: '#ffffff',
+    sendButtonBg: primary,
+  }
+}