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

package/src/hooks/use-live-chat.ts

@@ -0,0 +1,84 @@
+import { useMemo } from "react";
+import { useLiveChatContext } from "../provider/LiveChatContext";
+import type { WsConnectionState } from "../realtime/ws-client";
+import type { ThemeConfig } from "../ui/theme";
+
+export type LiveChatState = {
+  isOpen: boolean;
+  isVisible: boolean;
+  widgetId: string;
+  userId: string;
+  userToken: string | undefined;
+  config: any;
+  embedLoadState: "loading" | "ready" | "error";
+  embedLoadError: string | null;
+  totalUnread: number;
+  widgetName: string;
+  widgetGreeting: string;
+  connectionState: WsConnectionState;
+  theme: ThemeConfig;
+};
+
+export type LiveChatActions = {
+  open: () => void;
+  close: () => void;
+  show: () => void;
+  hide: () => void;
+  setToken: (token: string | null | undefined) => void;
+  logout: () => void;
+};
+
+export type UseLiveChatResult = {
+  state: LiveChatState;
+} & LiveChatActions;
+
+export function useLiveChat(): UseLiveChatResult {
+  const ctx = useLiveChatContext();
+
+  return useMemo(
+    () => ({
+      state: {
+        isOpen: ctx.isOpen,
+        isVisible: ctx.isVisible,
+        widgetId: ctx.widgetId,
+        userId: ctx.userId,
+        userToken: ctx.userToken,
+        config: ctx.widgetConfig,
+        embedLoadState: ctx.embedLoadState,
+        embedLoadError: ctx.embedLoadError,
+        totalUnread: ctx.totalUnread,
+        widgetName: ctx.widgetName,
+        widgetGreeting: ctx.widgetGreeting,
+        connectionState: ctx.connectionState,
+        theme: ctx.theme,
+      },
+      open: ctx.open,
+      close: ctx.close,
+      show: ctx.show,
+      hide: ctx.hide,
+      setToken: ctx.setToken,
+      logout: ctx.logout,
+    }),
+    [
+      ctx.isOpen,
+      ctx.isVisible,
+      ctx.widgetId,
+      ctx.userId,
+      ctx.userToken,
+      ctx.widgetConfig,
+      ctx.embedLoadState,
+      ctx.embedLoadError,
+      ctx.totalUnread,
+      ctx.widgetName,
+      ctx.widgetGreeting,
+      ctx.connectionState,
+      ctx.theme,
+      ctx.open,
+      ctx.close,
+      ctx.show,
+      ctx.hide,
+      ctx.setToken,
+      ctx.logout,
+    ]
+  );
+}

package/src/hooks/use-messages.ts

@@ -0,0 +1,188 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { conversationApi } from "../api/conversation-api";
+import { useLiveChatContext } from "../provider/LiveChatContext";
+
+const DEFAULT_LIMIT = 30;
+
+function unwrapMessages(raw: any): { messages: any[]; nextCursor: string | null } {
+  if (!raw) return { messages: [], nextCursor: null };
+  const a = raw?.data !== undefined ? raw.data : raw;
+  const b = a?.data !== undefined && !Array.isArray(a) ? a.data : a;
+  const messages: any[] = b?.messages ?? (Array.isArray(b) ? b : []);
+  const nextCursor: string | null = b?.pagination?.nextCursor ?? null;
+  return { messages, nextCursor };
+}
+
+export type UseMessagesResult = {
+  messages: any[];
+  loading: boolean;
+  loadingOlder: boolean;
+  hasOlder: boolean;
+  error: string | null;
+  loadOlder: () => void;
+  markAsRead: () => void;
+};
+
+export function useMessages(conversationId: string | null | undefined): UseMessagesResult {
+  const { wsClient, visitorQueryParams, setTotalUnread } = useLiveChatContext();
+
+  const [messages, setMessages] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loadingOlder, setLoadingOlder] = useState(false);
+  const [hasOlder, setHasOlder] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const nextCursorRef = useRef<string | null>(null);
+  const messagesRef = useRef<any[]>([]);
+  messagesRef.current = messages;
+  const loadOlderInFlightRef = useRef(false);
+  const prevConvIdRef = useRef<string | null | undefined>(null);
+
+  useEffect(() => {
+    const isNew = !conversationId || conversationId === "new";
+    if (isNew || !visitorQueryParams) {
+      if (!conversationId) {
+        setMessages([]);
+        setLoading(false);
+        setError(null);
+        setHasOlder(false);
+        nextCursorRef.current = null;
+      }
+      prevConvIdRef.current = conversationId;
+      return;
+    }
+    const wasNew = !prevConvIdRef.current || prevConvIdRef.current === "new";
+    if (prevConvIdRef.current !== conversationId) {
+      if (!wasNew) {
+        setMessages([]);
+        nextCursorRef.current = null;
+      }
+    }
+    prevConvIdRef.current = conversationId;
+
+    const ac = new AbortController();
+    // Skip fetch entirely when transitioning from "new" and we already have messages from WS
+    if (wasNew && messagesRef.current.length > 0) {
+      return () => ac.abort();
+    }
+    setLoading(true);
+    setError(null);
+
+    (async () => {
+      try {
+        const raw = await conversationApi.getMessages(conversationId, {
+          params: { ...visitorQueryParams, limit: DEFAULT_LIMIT },
+          signal: ac.signal,
+        });
+        if (ac.signal.aborted) return;
+        const { messages: msgs, nextCursor } = unwrapMessages(raw);
+        // Merge with existing messages (e.g. WS messages already appended during "new" state)
+        setMessages((prev) => {
+          if (prev.length === 0) return msgs;
+          const merged = [...msgs];
+          for (const m of prev) {
+            if (!merged.some((x) => x._id === m._id || (m.localMessageId && x.localMessageId === m.localMessageId))) {
+              merged.push(m);
+            }
+          }
+          return merged.sort((a, b) => {
+            const ta = new Date(a?.createdAt || a?.livechat?.timestamp || 0).getTime();
+            const tb = new Date(b?.createdAt || b?.livechat?.timestamp || 0).getTime();
+            return ta - tb;
+          });
+        });
+        nextCursorRef.current = nextCursor;
+        setHasOlder(nextCursor !== null);
+      } catch (e: any) {
+        if (ac.signal.aborted || e?.name === "AbortError") return;
+        setError("Could not load messages.");
+      } finally {
+        if (!ac.signal.aborted) setLoading(false);
+      }
+    })();
+
+    return () => ac.abort();
+  }, [conversationId, visitorQueryParams]);
+
+  const loadOlder = useCallback(async () => {
+    if (
+      loadOlderInFlightRef.current ||
+      !nextCursorRef.current ||
+      !conversationId ||
+      !visitorQueryParams
+    )
+      return;
+    loadOlderInFlightRef.current = true;
+    setLoadingOlder(true);
+    try {
+      const raw = await conversationApi.getMessages(conversationId, {
+        params: {
+          ...visitorQueryParams,
+          limit: DEFAULT_LIMIT,
+          nextCursor: nextCursorRef.current,
+        },
+      });
+      const { messages: older, nextCursor } = unwrapMessages(raw);
+      setMessages((prev) => [...older, ...prev]);
+      nextCursorRef.current = nextCursor;
+      setHasOlder(nextCursor !== null);
+    } catch {
+      /* ignore */
+    } finally {
+      loadOlderInFlightRef.current = false;
+      setLoadingOlder(false);
+    }
+  }, [conversationId, visitorQueryParams]);
+
+  const markAsRead = useCallback(() => {
+    if (!conversationId || conversationId === "new" || !visitorQueryParams) return;
+    conversationApi
+      .markMessageAsRead(conversationId, { params: visitorQueryParams })
+      .catch(() => { /* best-effort */ });
+  }, [conversationId, visitorQueryParams]);
+
+  // ── WS event handlers ──────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!wsClient || !conversationId) return;
+
+    const handleNewMessage = (payload: any) => {
+      const data = payload?.data ?? payload;
+      const cid = data?.conversation?._id;
+      // When conversationId is "new", accept messages for any conversation (first message)
+      if (conversationId !== "new" && cid !== conversationId) return;
+      const incoming = data?.message;
+      if (!incoming) return;
+      setMessages((prev) => {
+        if (
+          incoming.localMessageId &&
+          prev.some((m) => m?.localMessageId === incoming.localMessageId)
+        )
+          return prev;
+        if (incoming._id && prev.some((m) => m?._id === incoming._id)) return prev;
+        const next = [...prev, incoming];
+        return next.sort((a, b) => {
+          const ta = new Date(a?.createdAt || a?.livechat?.timestamp || 0).getTime();
+          const tb = new Date(b?.createdAt || b?.livechat?.timestamp || 0).getTime();
+          return ta - tb;
+        });
+      });
+    };
+
+    const handleNewLogMessage = (payload: any) => {
+      const data = payload?.data ?? payload;
+      const cid = data?.conversation?._id;
+      if (conversationId !== "new" && cid !== conversationId) return;
+      const incoming = data?.message;
+      if (!incoming) return;
+      setMessages((prev) => {
+        if (incoming._id && prev.some((m) => m?._id === incoming._id)) return prev;
+        return [...prev, incoming];
+      });
+    };
+
+    const u1 = wsClient.subscribe("new_livechat_message", handleNewMessage);
+    const u2 = wsClient.subscribe("new_log_message", handleNewLogMessage);
+    return () => { u1(); u2(); };
+  }, [wsClient, conversationId]);
+
+  return { messages, loading, loadingOlder, hasOlder, error, loadOlder, markAsRead };
+}

package/src/hooks/use-send-message.ts

@@ -0,0 +1,159 @@
+import { useCallback, useState } from "react";
+import { conversationApi } from "../api/conversation-api";
+import { useLiveChatContext } from "../provider/LiveChatContext";
+
+function pickConversationId(raw: any): string | null {
+  if (!raw) return null;
+  const a = raw?.data !== undefined ? raw.data : raw;
+  const b = a?.data !== undefined ? a.data : a;
+  const id = b?.conversationId ?? a?.conversationId;
+  return id != null && id !== "" ? String(id) : null;
+}
+
+export type AttachmentMeta = {
+  fileId?: string;
+  fileUrl: string;
+  fileName: string;
+  fileExtension?: string;
+  type: "image" | "video" | "document" | "audio";
+  caption?: string;
+};
+
+export type InteractiveReplyMeta = {
+  type: "button_reply" | "list_reply";
+  id: string;
+  title: string;
+};
+
+export type UseSendMessageResult = {
+  sending: boolean;
+  error: string | null;
+  sendText: (
+    text: string,
+    conversationId?: string | null
+  ) => Promise<string | null>;
+  sendAttachment: (
+    attachment: AttachmentMeta,
+    conversationId?: string | null
+  ) => Promise<string | null>;
+  sendInteractive: (
+    reply: InteractiveReplyMeta,
+    conversationId?: string | null
+  ) => Promise<string | null>;
+};
+
+export function useSendMessage(): UseSendMessageResult {
+  const { visitorQueryParams } = useLiveChatContext();
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const sendText = useCallback(
+    async (text: string, conversationId?: string | null): Promise<string | null> => {
+      const trimmed = text.trim();
+      if (!trimmed || !visitorQueryParams) return null;
+      const localMessageId =
+        typeof crypto !== "undefined" && crypto.randomUUID
+          ? crypto.randomUUID()
+          : "lc-" + Date.now();
+      const body: any = {
+        localMessageId,
+        message: { type: "text", text: { body: trimmed } },
+      };
+      if (conversationId) body.conversationId = conversationId;
+
+      setSending(true);
+      setError(null);
+      try {
+        const raw = await conversationApi.sendVisitorMessage(body, {
+          params: visitorQueryParams,
+        });
+        return pickConversationId(raw);
+      } catch (e: any) {
+        setError(e?.message ?? "Failed to send message");
+        return null;
+      } finally {
+        setSending(false);
+      }
+    },
+    [visitorQueryParams]
+  );
+
+  const sendAttachment = useCallback(
+    async (
+      attachment: AttachmentMeta,
+      conversationId?: string | null
+    ): Promise<string | null> => {
+      if (!visitorQueryParams) return null;
+      const localMessageId =
+        typeof crypto !== "undefined" && crypto.randomUUID
+          ? crypto.randomUUID()
+          : "lc-" + Date.now();
+      const typeObj: Record<string, any> = { link: attachment.fileUrl };
+      if (attachment.caption) typeObj.caption = attachment.caption;
+      if (attachment.type === "document") typeObj.filename = attachment.fileName;
+
+      const body: any = {
+        localMessageId,
+        fileId: attachment.fileId,
+        fileUrl: attachment.fileUrl,
+        fileName: attachment.fileName,
+        fileExtension: attachment.fileExtension,
+        message: { type: attachment.type, [attachment.type]: typeObj },
+      };
+      if (conversationId) body.conversationId = conversationId;
+
+      setSending(true);
+      setError(null);
+      try {
+        const raw = await conversationApi.sendVisitorMessage(body, {
+          params: visitorQueryParams,
+        });
+        return pickConversationId(raw);
+      } catch (e: any) {
+        setError(e?.message ?? "Failed to send attachment");
+        return null;
+      } finally {
+        setSending(false);
+      }
+    },
+    [visitorQueryParams]
+  );
+
+  const sendInteractive = useCallback(
+    async (reply: InteractiveReplyMeta, conversationId?: string | null): Promise<string | null> => {
+      if (!visitorQueryParams) return null;
+      const localMessageId =
+        typeof crypto !== "undefined" && crypto.randomUUID
+          ? crypto.randomUUID()
+          : "lc-" + Date.now();
+      const body: any = {
+        localMessageId,
+        message: {
+          type: "interactive",
+          interactive: {
+            type: reply.type,
+            [reply.type]: { id: reply.id, title: reply.title },
+          },
+        },
+      };
+      if (conversationId) body.conversationId = conversationId;
+
+      setSending(true);
+      setError(null);
+      try {
+        const raw = await conversationApi.sendVisitorMessage(body, {
+          params: visitorQueryParams,
+        });
+        return pickConversationId(raw);
+      } catch (e: any) {
+        setError(e?.message ?? "Failed to send reply");
+        return null;
+      } finally {
+        setSending(false);
+      }
+    },
+    [visitorQueryParams]
+  );
+
+  return { sending, error, sendText, sendAttachment, sendInteractive };
+}

package/src/index.ts

@@ -0,0 +1,114 @@
+// ─── Provider ─────────────────────────────────────────────────────────────────
+export { LiveChatProvider } from "./provider/LiveChatProvider";
+export { LiveChatContext, useLiveChatContext } from "./provider/LiveChatContext";
+export type { LiveChatProviderProps, LiveChatContextValue, EmbedConfigLoadState } from "./provider/types";
+
+// ─── Hooks ─────────────────────────────────────────────────────────────────────
+export { useLiveChat } from "./hooks/use-live-chat";
+export type { LiveChatState, LiveChatActions, UseLiveChatResult } from "./hooks/use-live-chat";
+
+export { useConversations } from "./hooks/use-conversations";
+export type { UseConversationsResult } from "./hooks/use-conversations";
+
+export { useMessages } from "./hooks/use-messages";
+export type { UseMessagesResult } from "./hooks/use-messages";
+
+export { useSendMessage } from "./hooks/use-send-message";
+export type { UseSendMessageResult, AttachmentMeta } from "./hooks/use-send-message";
+
+// ─── UI Components ─────────────────────────────────────────────────────────────
+export { ConversationListScreen, formatListMessageDate } from "./ui/components/ConversationListScreen";
+export type { ConversationListScreenProps } from "./ui/components/ConversationListScreen";
+
+export { ConversationScreen } from "./ui/components/ConversationScreen";
+export type { ConversationScreenProps } from "./ui/components/ConversationScreen";
+
+export { ConversationHeader } from "./ui/components/ConversationHeader";
+export type { ConversationHeaderProps } from "./ui/components/ConversationHeader";
+
+export { MessageBubble } from "./ui/components/MessageBubble";
+export type { MessageBubbleProps, BubblePosition } from "./ui/components/MessageBubble";
+
+export { LivechatMessageRenderer } from "./ui/components/LivechatMessageRenderer";
+export type { LivechatMessageRendererProps, InteractiveReplyPayload, ShowListPickerFn } from "./ui/components/LivechatMessageRenderer";
+
+export { LogMessage } from "./ui/components/LogMessage";
+export type { LogMessageProps } from "./ui/components/LogMessage";
+
+export { MessageComposer } from "./ui/components/MessageComposer";
+export type { MessageComposerProps, PickedAttachment, PickedAttachmentKind, UploadedAttachment, PendingAttachment } from "./ui/components/MessageComposer";
+
+export { Avatar } from "./ui/components/Avatar";
+export type { AvatarProps } from "./ui/components/Avatar";
+
+export {
+  ArrowRightIcon,
+  ArrowRightCircleIcon,
+  ArrowLeftIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  CloseIcon,
+  ChatBubbleIcon,
+  MinimizeIcon,
+  DotsIcon,
+  HistoryChatsIcon,
+  SendPlaneIcon,
+  PaperclipIcon,
+  DownloadIcon,
+  PlayIcon,
+  FileIcon,
+  TurbodeskLogoIcon,
+} from "./ui/icons";
+export type { IconProps } from "./ui/icons";
+
+export { AssigneeAvatar } from "./ui/components/AssigneeAvatar";
+export type { AssigneeAvatarProps, AssigneeType } from "./ui/components/AssigneeAvatar";
+
+export { HomeScreen } from "./ui/components/HomeScreen";
+export type { HomeScreenProps } from "./ui/components/HomeScreen";
+
+// ─── Navigation ──────────────────────────────────────────────────────────────
+export { LiveChatPanel } from "./navigation/LiveChatPanel";
+export type { LiveChatPanelProps } from "./navigation/LiveChatPanel";
+
+export { PanelRouterProvider, usePanelRouter } from "./navigation/panel-router-context";
+export type { PanelRouterContextValue, WidgetPanelView } from "./navigation/panel-router-context";
+
+// ─── Theme ─────────────────────────────────────────────────────────────────────
+export {
+  defaultTheme,
+  mergeTheme,
+  buildThemeFromBrand,
+  contrastingTextOnBrand,
+  getBrandColor,
+  getNotificationIconColor,
+  getWidgetName,
+  getWidgetGreeting,
+  getWidgetTitle,
+  getWidgetDescription,
+  getBrandLogoUrl,
+  useEffectiveAppearance,
+  POWERED_BY_TEXT,
+} from "./ui/theme";
+export type {
+  ThemeConfig,
+  ThemeColors,
+  ThemeFontSizes,
+  ThemeSpacing,
+  ThemeBorderRadius,
+  AppearanceMode,
+} from "./ui/theme";
+
+// ─── Low-level (advanced usage) ────────────────────────────────────────────────
+export { WsClient } from "./realtime/ws-client";
+export type { WsConnectionState } from "./realtime/ws-client";
+
+export { default as getApiClient } from "./axios/axios";
+export type { RequestOptions, ApiClient } from "./axios/axios";
+
+export { widgetApi } from "./api/widget-api";
+export { conversationApi } from "./api/conversation-api";
+export { fileApi } from "./api/file-api";
+
+export { buildVisitorQueryParams, getUserPresenceStatus } from "./core/visitor-params";
+export type { VisitorQueryParams, VisitorProfile } from "./core/visitor-params";

package/src/navigation/LiveChatPanel.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useRef } from "react";
+import { View, StyleSheet, BackHandler, PanResponder, Animated } from "react-native";
+import { PanelRouterProvider, usePanelRouter } from "./panel-router-context";
+import { HomeScreen } from "../ui/components/HomeScreen";
+import { ConversationListScreen } from "../ui/components/ConversationListScreen";
+import { ConversationScreen } from "../ui/components/ConversationScreen";
+import { useLiveChatContext } from "../provider/LiveChatContext";
+import { getBrandColor, useEffectiveAppearance } from "../ui/theme";
+import { WsStatusStrip } from "../ui/components/WsStatusStrip";
+
+export type LiveChatPanelProps = {
+  onClose?: () => void;
+};
+
+// Mirrors web PanelShell — neutral chrome for chat screens, brand bg for home
+function usePanelBackground(view: string): string {
+  const { widgetConfig } = useLiveChatContext();
+  const settings = widgetConfig?.widgetSettings ?? {};
+  const appearance = useEffectiveAppearance(settings);
+  const customBg = settings?.backgroundColor?.trim();
+  if (customBg) return customBg;
+  const useNeutralChrome = view === "conversation" || view === "previousChats";
+  if (useNeutralChrome) return appearance === "dark" ? "#111113" : "#f9fafb";
+  return getBrandColor(settings);
+}
+
+const SWIPE_THRESHOLD = 80; // px — minimum horizontal swipe to trigger back
+const SWIPE_VELOCITY = 0.3; // minimum velocity
+
+function PanelContent({ onClose }: LiveChatPanelProps) {
+  const { view, conversationId, goConversation, goPreviousChats, goBack } = usePanelRouter();
+  const bg = usePanelBackground(view);
+  const canGoBack = view === "conversation" || view === "previousChats";
+
+  // Android hardware back button
+  useEffect(() => {
+    const handler = BackHandler.addEventListener("hardwareBackPress", () => {
+      if (canGoBack) { goBack(); return true; }
+      return false;
+    });
+    return () => handler.remove();
+  }, [canGoBack, goBack]);
+
+  // Swipe-back gesture (right swipe from left edge only)
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (evt, gs) => {
+        const x = evt.nativeEvent.pageX;
+        return x < 40 && gs.dx > 10 && Math.abs(gs.dy) < Math.abs(gs.dx);
+      },
+      onPanResponderRelease: (_, gs) => {
+        if (gs.dx > SWIPE_THRESHOLD && gs.vx > SWIPE_VELOCITY) {
+          goBackRef.current?.();
+        }
+      },
+    })
+  ).current;
+
+  // ref so panResponder closure always has latest goBack + canGoBack
+  const goBackRef = useRef<(() => void) | null>(null);
+  goBackRef.current = canGoBack ? goBack : null;
+
+  const screenContent = (() => {
+    if (view === "home") {
+      return (
+        <HomeScreen
+          onStartConversation={() => goConversation()}
+          onOpenPreviousChats={() => goPreviousChats()}
+        />
+      );
+    }
+    if (view === "previousChats") {
+      return (
+        <ConversationListScreen
+          onSelectConversation={(id) => goConversation(id)}
+          onNewConversation={() => goConversation()}
+          onBack={goBack}
+          onClose={onClose}
+        />
+      );
+    }
+    if (view === "conversation") {
+      return (
+        <ConversationScreen
+          conversationId={conversationId}
+          onBack={goBack}
+          onClose={onClose}
+          onConversationCreated={(id) => goConversation(id, { replace: true })}
+        />
+      );
+    }
+    return null;
+  })();
+
+  return (
+    <View
+      style={[styles.flex, { backgroundColor: bg }]}
+      {...(canGoBack ? panResponder.panHandlers : {})}
+    >
+      <View style={styles.flex}>{screenContent}</View>
+      <WsStatusStrip />
+    </View>
+  );
+}
+
+export function LiveChatPanel({ onClose }: LiveChatPanelProps) {
+  return (
+    <PanelRouterProvider>
+      <View style={styles.flex}>
+        <PanelContent onClose={onClose} />
+      </View>
+    </PanelRouterProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+});