turbodesk-livechat-react-native 0.1.0-alpha.0

package/src/realtime/ws-client.ts

@@ -0,0 +1,369 @@
+import { AppState, type AppStateStatus } from "react-native";
+import { getApiBaseUrl } from "../axios/axios";
+
+function buildWsBaseUrl(apiBaseUrl: string): string {
+  return apiBaseUrl
+    .replace(/\/+$/, "")
+    .replace(/^https:\/\//i, "wss://")
+    .replace(/^http:\/\//i, "ws://");
+}
+
+// ─── constants ────────────────────────────────────────────────────────────────
+const INITIAL_RETRY_DELAY_MS = 1_000;
+const MAX_RETRY_DELAY_MS = 30_000;
+const BACKOFF_MULTIPLIER = 2;
+const CONNECTING_TIMEOUT_MS = 20_000;
+const IDLE_SAFETY_MS = 30 * 60 * 1_000;
+const STATUS_POLL_INTERVAL_MS = 3_000;
+const MIN_RECONNECT_INTERVAL_MS = 2_000;
+
+type WsEventCallback = (data: unknown) => void;
+
+export type WsConnectionState = {
+  isConnected: boolean;
+  isConnecting: boolean;
+  isAwaitingRetry: boolean;
+  lastError: Error | null;
+};
+
+type StateChangeListener = (state: WsConnectionState) => void;
+
+// Optional NetInfo — loaded lazily so the package works without it
+let NetInfo: {
+  addEventListener(
+    cb: (s: { isConnected: boolean | null }) => void
+  ): () => void;
+} | null = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  NetInfo = require("@react-native-community/netinfo").default;
+} catch {
+  NetInfo = null;
+}
+
+function buildWsUrl(
+  widgetId: string,
+  userId?: string,
+  userToken?: string
+): string {
+  const base = buildWsBaseUrl(getApiBaseUrl());
+  let query = "widgetId=" + encodeURIComponent(widgetId);
+  if (userToken) query += "&userToken=" + encodeURIComponent(userToken);
+  else if (userId) query += "&userId=" + encodeURIComponent(userId);
+  return base + "/api/v1/ws/livechat?" + query;
+}
+
+// ─── WsClient class ───────────────────────────────────────────────────────────
+export class WsClient {
+  private widgetId: string;
+  private userId: string | undefined;
+  private userToken: string | undefined;
+
+  private socket: WebSocket | null = null;
+  private retryCount = 0;
+  private retryTimeout: ReturnType<typeof setTimeout> | null = null;
+  private statusInterval: ReturnType<typeof setInterval> | null = null;
+  private isConnectingFlag = false;
+  private connectionStartedAt = 0;
+  private lastMessageTime = Date.now();
+  private lastReconnectAt = 0;
+  private appStateSubscription: { remove(): void } | null = null;
+  private netInfoUnsubscribe: (() => void) | null = null;
+
+  private state: WsConnectionState = {
+    isConnected: false,
+    isConnecting: false,
+    isAwaitingRetry: false,
+    lastError: null,
+  };
+  private stateListeners: Set<StateChangeListener> = new Set();
+  private eventListeners: Map<string, WsEventCallback[]> = new Map();
+
+  constructor(opts: {
+    widgetId: string;
+    userId?: string;
+    userToken?: string;
+  }) {
+    this.widgetId = opts.widgetId;
+    this.userId = opts.userId;
+    this.userToken = opts.userToken;
+  }
+
+  // ── identity update ─────────────────────────────────────────────────────────
+  updateIdentity(opts: { userId?: string; userToken?: string }): void {
+    const changed =
+      opts.userId !== this.userId || opts.userToken !== this.userToken;
+    this.userId = opts.userId;
+    this.userToken = opts.userToken;
+    if (changed && this.widgetId) {
+      this.reconnect("identity-changed", true);
+    }
+  }
+
+  // ── public API ──────────────────────────────────────────────────────────────
+  start(): void {
+    this.connect();
+    this.startStatusPoller();
+    this.bindAppState();
+    this.bindNetInfo();
+  }
+
+  destroy(): void {
+    this.clearRetry();
+    this.stopStatusPoller();
+    this.appStateSubscription?.remove();
+    this.appStateSubscription = null;
+    this.netInfoUnsubscribe?.();
+    this.netInfoUnsubscribe = null;
+    if (this.socket) {
+      const s = this.socket;
+      this.socket = null;
+      s.close();
+    }
+    this.setState({
+      isConnected: false,
+      isConnecting: false,
+      isAwaitingRetry: false,
+      lastError: null,
+    });
+  }
+
+  reconnect(reason = "manual", force = false): void {
+    if (!this.widgetId) return;
+    const now = Date.now();
+    if (!force && now - this.lastReconnectAt < MIN_RECONNECT_INTERVAL_MS)
+      return;
+    this.lastReconnectAt = now;
+
+    this.clearRetry();
+    if (this.socket) {
+      const s = this.socket;
+      this.socket = null;
+      s.close();
+    }
+    this.retryCount = 0;
+    this.isConnectingFlag = false;
+    this.connectionStartedAt = 0;
+    this.setState({
+      isConnected: false,
+      isConnecting: false,
+      isAwaitingRetry: false,
+      lastError: null,
+    });
+    this.connect();
+  }
+
+  subscribe(eventType: string, cb: WsEventCallback): () => void {
+    if (!this.eventListeners.has(eventType))
+      this.eventListeners.set(eventType, []);
+    const list = this.eventListeners.get(eventType)!;
+    if (!list.includes(cb)) list.push(cb);
+    return () => {
+      const l = this.eventListeners.get(eventType);
+      if (!l) return;
+      const idx = l.indexOf(cb);
+      if (idx > -1) l.splice(idx, 1);
+      if (l.length === 0) this.eventListeners.delete(eventType);
+    };
+  }
+
+  onStateChange(listener: StateChangeListener): () => void {
+    this.stateListeners.add(listener);
+    // Immediately emit current state
+    listener(this.state);
+    return () => {
+      this.stateListeners.delete(listener);
+    };
+  }
+
+  getState(): WsConnectionState {
+    return this.state;
+  }
+
+  // ── internals ───────────────────────────────────────────────────────────────
+  private setState(next: Partial<WsConnectionState>): void {
+    this.state = { ...this.state, ...next };
+    this.stateListeners.forEach((l) => {
+      try {
+        l(this.state);
+      } catch {
+        /* ignore listener errors */
+      }
+    });
+  }
+
+  private connect(): void {
+    if (!this.widgetId || this.isConnectingFlag) return;
+
+    this.isConnectingFlag = true;
+    this.clearRetry();
+    this.setState({ isConnecting: true, isAwaitingRetry: false });
+    this.connectionStartedAt = Date.now();
+
+    if (this.socket) {
+      const s = this.socket;
+      this.socket = null;
+      s.close();
+    }
+
+    const url = buildWsUrl(
+      this.widgetId,
+      this.userId,
+      this.userToken
+    );
+
+    const socket = new (global as any).WebSocket(url) as WebSocket;
+    this.socket = socket;
+    this.lastMessageTime = Date.now();
+
+    const isActive = () => this.socket === socket;
+
+    const scheduleReconnect = () => {
+      const delay = Math.min(
+        INITIAL_RETRY_DELAY_MS * Math.pow(BACKOFF_MULTIPLIER, this.retryCount),
+        MAX_RETRY_DELAY_MS
+      );
+      this.retryCount += 1;
+      this.isConnectingFlag = false;
+      this.connectionStartedAt = 0;
+      this.setState({ isConnecting: false, isAwaitingRetry: true });
+      this.retryTimeout = setTimeout(() => {
+        this.retryTimeout = null;
+        if (this.widgetId) this.connect();
+      }, delay);
+    };
+
+    socket.onopen = () => {
+      if (!isActive()) return;
+      this.retryCount = 0;
+      this.isConnectingFlag = false;
+      this.connectionStartedAt = 0;
+      this.lastMessageTime = Date.now();
+      this.setState({
+        isConnected: true,
+        isConnecting: false,
+        isAwaitingRetry: false,
+        lastError: null,
+      });
+    };
+
+    socket.onerror = (ev: Event) => {
+      if (!isActive()) return;
+      this.setState({ lastError: new Error("WebSocket error") });
+    };
+
+    socket.onclose = () => {
+      if (!isActive()) return;
+      this.socket = null;
+      this.isConnectingFlag = false;
+      this.connectionStartedAt = 0;
+      this.setState({ isConnected: false, isConnecting: false });
+      if (this.widgetId) scheduleReconnect();
+    };
+
+    socket.onmessage = (ev) => {
+      if (!isActive()) return;
+      this.lastMessageTime = Date.now();
+      try {
+        const raw = typeof ev.data === "string" ? ev.data : String(ev.data);
+        const data = JSON.parse(raw) as { type?: string };
+        const type = data.type ?? "";
+        const dispatch = (list: WsEventCallback[]) => {
+          for (const cb of list) {
+            try {
+              cb(data);
+            } catch (e) {
+              console.error(
+                "[WS] Listener error for " + JSON.stringify(type) + ":",
+                e
+              );
+            }
+          }
+        };
+        dispatch([...(this.eventListeners.get(type) ?? [])]);
+        dispatch([...(this.eventListeners.get("*") ?? [])]);
+      } catch {
+        // ignore invalid JSON
+      }
+    };
+  }
+
+  private clearRetry(): void {
+    if (this.retryTimeout) {
+      clearTimeout(this.retryTimeout);
+      this.retryTimeout = null;
+    }
+  }
+
+  private startStatusPoller(): void {
+    this.statusInterval = setInterval(() => {
+      const ws = this.socket;
+      if (!ws) {
+        this.setState({ isConnected: false, isConnecting: false });
+        if (this.widgetId && !this.isConnectingFlag && !this.retryTimeout) {
+          this.reconnect("no-socket");
+        }
+        return;
+      }
+
+      const OPEN = 1;
+      const CONNECTING = 0;
+      const CLOSED = 3;
+
+      if (ws.readyState === OPEN) {
+        this.setState({ isConnected: true, isConnecting: false });
+        if (Date.now() - this.lastMessageTime > IDLE_SAFETY_MS) {
+          this.reconnect("idle-safety", true);
+        }
+      } else if (ws.readyState === CONNECTING) {
+        this.setState({ isConnected: false, isConnecting: true });
+        if (
+          this.connectionStartedAt &&
+          Date.now() - this.connectionStartedAt > CONNECTING_TIMEOUT_MS
+        ) {
+          this.reconnect("connecting-timeout", true);
+        }
+      } else if (ws.readyState === CLOSED) {
+        this.setState({ isConnected: false, isConnecting: false });
+        if (this.widgetId && !this.isConnectingFlag && !this.retryTimeout) {
+          this.reconnect("closed");
+        }
+      }
+    }, STATUS_POLL_INTERVAL_MS);
+  }
+
+  private stopStatusPoller(): void {
+    if (this.statusInterval) {
+      clearInterval(this.statusInterval);
+      this.statusInterval = null;
+    }
+  }
+
+  private recover(reason: string, force = false): void {
+    if (!this.widgetId) return;
+    const ws = this.socket;
+    const stale = Date.now() - this.lastMessageTime > IDLE_SAFETY_MS;
+    if (!ws || ws.readyState === 3 || stale) this.reconnect(reason, force);
+  }
+
+  private bindAppState(): void {
+    this.appStateSubscription = AppState.addEventListener(
+      "change",
+      (nextState: AppStateStatus) => {
+        if (nextState === "active") this.recover("app-active");
+      }
+    );
+  }
+
+  private bindNetInfo(): void {
+    if (!NetInfo) return;
+    let prevConnected: boolean | null = null;
+    this.netInfoUnsubscribe = NetInfo.addEventListener((s) => {
+      const isConn = s.isConnected === true;
+      if (isConn && prevConnected === false) {
+        this.reconnect("network-restored", true);
+      }
+      prevConnected = isConn;
+    });
+  }
+}

package/src/types/react-native-svg.d.ts

@@ -0,0 +1,10 @@
+declare module "react-native-svg" {
+  import React from "react";
+  export const Svg: React.ComponentType<any>;
+  export const Path: React.ComponentType<any>;
+  export const Circle: React.ComponentType<any>;
+  export const G: React.ComponentType<any>;
+  export const Rect: React.ComponentType<any>;
+  export const Line: React.ComponentType<any>;
+  export default Svg;
+}

package/src/ui/components/AssigneeAvatar.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { Avatar } from "./Avatar";
+import { useLiveChatContext } from "../../provider/LiveChatContext";
+
+export type AssigneeType = "ai" | "user" | "bot" | "unassigned" | null;
+
+export type AssigneeAvatarProps = {
+  assigneeType: AssigneeType;
+  name?: string | null;
+  avatarUrl?: string | null;
+  brandLogoUrl?: string | null;
+  size?: number;
+  showPresenceDot?: boolean;
+  presenceStatus?: "active" | "away" | null;
+};
+
+/** Small "AI" mark used for ai assignee type */
+function AiMark({ size }: { size: number }) {
+  return (
+    <View
+      style={[
+        styles.aiContainer,
+        { width: size, height: size, borderRadius: size * 0.22 },
+      ]}
+    >
+      <Text style={[styles.aiText, { fontSize: size * 0.28 }]}>AI</Text>
+    </View>
+  );
+}
+
+export function AssigneeAvatar({
+  assigneeType,
+  name,
+  avatarUrl,
+  brandLogoUrl: brandLogoUrlProp,
+  size = 32,
+  showPresenceDot = false,
+  presenceStatus,
+}: AssigneeAvatarProps) {
+  const { theme: t, widgetName, widgetConfig } = useLiveChatContext();
+  const brandLogoUrl = brandLogoUrlProp ?? widgetConfig?.widgetSettings?.brandLogoUrl ?? null;
+
+  if (assigneeType === "ai") {
+    return <AiMark size={size} />;
+  }
+
+  if (assigneeType === "user" || assigneeType === "bot") {
+    const dotColor =
+      presenceStatus === "active"
+        ? t.colors.presenceActive
+        : t.colors.presenceAway;
+
+    return (
+      <View style={{ width: size, height: size }}>
+        <Avatar uri={avatarUrl} name={name ?? widgetName} size={size} />
+        {showPresenceDot && presenceStatus ? (
+          <View
+            style={[
+              styles.presenceDot,
+              {
+                width: size * 0.3,
+                height: size * 0.3,
+                borderRadius: size * 0.15,
+                backgroundColor: dotColor,
+                borderColor: t.colors.surface,
+                bottom: 0,
+                right: 0,
+              },
+            ]}
+          />
+        ) : null}
+      </View>
+    );
+  }
+
+  // null / "unassigned" → brand logo or widget name initials
+  return (
+    <Avatar
+      uri={brandLogoUrl}
+      name={name ?? widgetName}
+      size={size}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  aiContainer: {
+    backgroundColor: "#18181b",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  aiText: {
+    color: "#ffffff",
+    fontWeight: "700",
+    letterSpacing: 0.5,
+  },
+  presenceDot: {
+    position: "absolute",
+    borderWidth: 2,
+  },
+});

package/src/ui/components/Avatar.tsx

@@ -0,0 +1,110 @@
+import React, { memo } from "react";
+import { Image, StyleSheet, Text, View } from "react-native";
+
+// ── color helpers (mirrors web app-avatar.tsx) ────────────────────────────────
+
+function getHashOfString(str: string): number {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return Math.abs(hash);
+}
+
+function normalizeHash(hash: number, min: number, max: number): number {
+  if (max <= min) return min;
+  return Math.floor((hash % (max - min)) + min);
+}
+
+function getRange(value: number, range: number): [number, number] {
+  return [Math.max(0, value - range), Math.min(value + range, 100)];
+}
+
+function generateHSL(
+  name: string,
+  saturationRange: [number, number],
+  lightnessRange: [number, number]
+): [number, number, number] {
+  const hash = getHashOfString(name);
+  const h = normalizeHash(hash, 0, 360);
+  const s = normalizeHash(hash, saturationRange[0], saturationRange[1]);
+  const l = normalizeHash(hash, lightnessRange[0], lightnessRange[1]);
+  return [h, s, l];
+}
+
+function hslToHex(h: number, s: number, l: number): string {
+  const sl = s / 100;
+  const ll = l / 100;
+  const a = sl * Math.min(ll, 1 - ll);
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12;
+    const color = ll - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+
+function getAvatarBg(name: string): string {
+  const [h, s, l] = generateHSL(name, getRange(50, 10), getRange(50, 10));
+  return hslToHex(h, s, l);
+}
+
+function getInitials(name: string): string {
+  return name
+    .split(" ")
+    .map((n) => n?.charAt(0))
+    .filter(Boolean)
+    .slice(0, 2)
+    .join("")
+    .toUpperCase();
+}
+
+// ── component ─────────────────────────────────────────────────────────────────
+
+export type AvatarProps = {
+  uri?: string | null;
+  name?: string | null;
+  size?: number;
+};
+
+function AvatarComponent({ uri, name, size = 36 }: AvatarProps) {
+  const label = (name && name.trim()) || "Support";
+  const bg = getAvatarBg(label);
+  const initials = getInitials(label) || "?";
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { width: size, height: size, borderRadius: size / 2, backgroundColor: bg },
+      ]}
+    >
+      {uri ? (
+        <Image
+          source={{ uri }}
+          style={{ width: size, height: size }}
+          resizeMode="cover"
+        />
+      ) : (
+        <Text style={[styles.initials, { fontSize: size * 0.38 }]}>
+          {initials}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+export const Avatar = memo(AvatarComponent);
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  initials: {
+    color: "#ffffff",
+    fontWeight: "600",
+    textTransform: "uppercase",
+  },
+});