turbodesk-livechat-react-native 0.1.0-alpha.2 → 0.1.0-alpha.21

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

@@ -1,159 +1,169 @@
-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 };
-}
+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;
+  clearError: () => void;
+  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 clearError = useCallback(() => setError(null), []);
+
+  const sendText = useCallback(
+    async (text: string, conversationId?: string | null): Promise<string | null> => {
+      const trimmed = text.trim();
+      if (!trimmed) throw new Error("Message cannot be empty");
+      if (!visitorQueryParams) throw new Error("Not connected yet. Please wait and try again.");
+
+      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) {
+        const msg = e?.response?.data?.message ?? e?.message ?? "Failed to send message";
+        setError(msg);
+        throw new Error(msg);
+      } finally {
+        setSending(false);
+      }
+    },
+    [visitorQueryParams]
+  );
+
+  const sendAttachment = useCallback(
+    async (
+      attachment: AttachmentMeta,
+      conversationId?: string | null
+    ): Promise<string | null> => {
+      if (!visitorQueryParams) throw new Error("Not connected yet. Please wait and try again.");
+
+      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) {
+        const msg = e?.response?.data?.message ?? e?.message ?? "Failed to send attachment";
+        setError(msg);
+        throw new Error(msg);
+      } finally {
+        setSending(false);
+      }
+    },
+    [visitorQueryParams]
+  );
+
+  const sendInteractive = useCallback(
+    async (reply: InteractiveReplyMeta, conversationId?: string | null): Promise<string | null> => {
+      if (!visitorQueryParams) throw new Error("Not connected yet. Please wait and try again.");
+
+      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) {
+        const msg = e?.response?.data?.message ?? e?.message ?? "Failed to send reply";
+        setError(msg);
+        throw new Error(msg);
+      } finally {
+        setSending(false);
+      }
+    },
+    [visitorQueryParams]
+  );
+
+  return { sending, error, clearError, sendText, sendAttachment, sendInteractive };
+}

package/src/index.ts

@@ -75,6 +75,9 @@ export { PanelRouterProvider, usePanelRouter } from "./navigation/panel-router-c
 export type { PanelRouterContextValue, WidgetPanelView } from "./navigation/panel-router-context";
 
 // ─── Theme ─────────────────────────────────────────────────────────────────────
+export { usePanelSafeAreaInsets } from "./ui/safe-area";
+export type { PanelSafeAreaInsets } from "./ui/safe-area";
+
 export {
   defaultTheme,
   mergeTheme,

package/src/navigation/LiveChatPanel.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef } from "react";
-import { View, StyleSheet, BackHandler, PanResponder, Animated } from "react-native";
+import React, { useEffect, useRef, type ComponentType, type ReactNode } from "react";
+import { View, StyleSheet, BackHandler, PanResponder } from "react-native";
 import { PanelRouterProvider, usePanelRouter } from "./panel-router-context";
 import { HomeScreen } from "../ui/components/HomeScreen";
 import { ConversationListScreen } from "../ui/components/ConversationListScreen";
@@ -12,6 +12,13 @@ export type LiveChatPanelProps = {
   onClose?: () => void;
 };
 
+let PanelSafeAreaProvider: ComponentType<{ children: ReactNode }> | null = null;
+try {
+  PanelSafeAreaProvider = require("react-native-safe-area-context").SafeAreaProvider;
+} catch {
+  PanelSafeAreaProvider = null;
+}
+
 // Mirrors web PanelShell — neutral chrome for chat screens, brand bg for home
 function usePanelBackground(view: string): string {
   const { widgetConfig } = useLiveChatContext();
@@ -104,13 +111,18 @@ function PanelContent({ onClose }: LiveChatPanelProps) {
 }
 
 export function LiveChatPanel({ onClose }: LiveChatPanelProps) {
-  return (
+  const panel = (
     <PanelRouterProvider>
       <View style={styles.flex}>
         <PanelContent onClose={onClose} />
       </View>
     </PanelRouterProvider>
   );
+
+  if (PanelSafeAreaProvider) {
+    return <PanelSafeAreaProvider>{panel}</PanelSafeAreaProvider>;
+  }
+  return panel;
 }
 
 const styles = StyleSheet.create({

package/src/provider/LiveChatProvider.tsx

@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { useColorScheme, unstable_batchedUpdates } from "react-native";
+import { useColorScheme, unstable_batchedUpdates, Platform } from "react-native";
 import { LiveChatContext } from "./LiveChatContext";
 import type { EmbedConfigLoadState, LiveChatProviderProps } from "./types";
 import {
@@ -20,13 +20,12 @@ import {
 } from "../core/identity";
 import { buildVisitorQueryParams } from "../core/visitor-params";
 import { widgetApi } from "../api/widget-api";
-import { conversationApi } from "../api/conversation-api";
+import { conversationApi, deviceTokenApi } from "../api/conversation-api";
 import { WsClient } from "../realtime/ws-client";
 import type { WsConnectionState } from "../realtime/ws-client";
 import {
   buildThemeFromBrand,
   defaultTheme,
-  mergeTheme,
 } from "../ui/theme";
 
 function getWidgetName(config: any): string {
@@ -62,6 +61,8 @@ export function LiveChatProvider({
   appearance: appearanceProp,
   useBrandThemingForChat: useBrandThemingProp = false,
   theme: themeProp,
+  fcmToken,
+  fcmTokenPlatform,
   children,
 }: LiveChatProviderProps) {
   const systemColorScheme = useColorScheme();
@@ -209,6 +210,13 @@ export function LiveChatProvider({
     };
   }, [visitorQueryParams]);
 
+  // ── FCM token registration ─────────────────────────────────────────────
+  useEffect(() => {
+    if (!fcmToken || !visitorQueryParams) return;
+    const platform = fcmTokenPlatform ?? (Platform.OS === "ios" ? "ios" : "android");
+    deviceTokenApi.register({ token: fcmToken, platform }, { params: visitorQueryParams }).catch(() => {});
+  }, [fcmToken, fcmTokenPlatform, visitorQueryParams]);
+
   // ── WsClient lifecycle ─────────────────────────────────────────────────
   useEffect(() => {
     if (!cfg.widgetId || !userId || !userIdReady) return;
@@ -286,6 +294,10 @@ export function LiveChatProvider({
   );
 
   const logout = useCallback(() => {
+    // Unregister FCM token before clearing identity
+    if (fcmToken && visitorQueryParams) {
+      deviceTokenApi.unregister({ token: fcmToken }, { params: visitorQueryParams }).catch(() => {});
+    }
     setUserTokenState(undefined);
     clearStoredDeviceUserId(cfg.widgetId).then(() =>
       getOrCreateDeviceUserId(cfg.widgetId).then((id) => {
@@ -293,7 +305,7 @@ export function LiveChatProvider({
         setUserIdReady(true);
       })
     );
-  }, [cfg.widgetId]);
+  }, [cfg.widgetId, fcmToken, visitorQueryParams]);
 
   const open = useCallback(() => setIsOpen(true), []);
   const close = useCallback(() => setIsOpen(false), []);

package/src/provider/types.ts

@@ -14,6 +14,8 @@ export type LiveChatProviderProps = {
   appearance?: AppearanceMode;
   useBrandThemingForChat?: boolean;
   theme?: Partial<ThemeConfig>;
+  fcmToken?: string;
+  fcmTokenPlatform?: "ios" | "android";
   children: React.ReactNode;
 };
 

package/src/ui/components/ConversationHeader.tsx

@@ -1,13 +1,12 @@
 import React from "react";
 import {
-  Platform,
-  StatusBar,
   StyleSheet,
   Text,
   TouchableOpacity,
   View,
 } from "react-native";
 import { useLiveChatContext } from "../../provider/LiveChatContext";
+import { usePanelSafeAreaInsets } from "../safe-area";
 import { getUserPresenceStatus } from "../../core/visitor-params";
 import { AssigneeAvatar } from "./AssigneeAvatar";
 import { ChevronLeftIcon, CloseIcon } from "../icons";
@@ -43,6 +42,7 @@ export function ConversationHeader({
   onClose,
 }: ConversationHeaderProps) {
   const { theme: t, widgetName, widgetConfig } = useLiveChatContext();
+  const { top: safeTop } = usePanelSafeAreaInsets();
   const headerBg = t.colors.headerBackground;
   const headerTxt = t.colors.headerText;
 
@@ -92,7 +92,11 @@ export function ConversationHeader({
     <View
       style={[
         styles.container,
-        { backgroundColor: headerBg, borderBottomColor: t.colors.border },
+        {
+          backgroundColor: headerBg,
+          borderBottomColor: t.colors.border,
+          paddingTop: safeTop + 10,
+        },
       ]}
     >
       {onBack ? (
@@ -175,13 +179,10 @@ export function ConversationHeader({
   );
 }
 
-const PT = Platform.OS === "ios" ? (StatusBar.currentHeight ?? 0) : 0;
-
 const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
-    paddingTop: PT + 10,
     paddingBottom: 10,
     paddingHorizontal: 8,
     borderBottomWidth: StyleSheet.hairlineWidth,

package/src/ui/components/ConversationListScreen.tsx

@@ -13,6 +13,7 @@ import { AssigneeAvatar } from "./AssigneeAvatar";
 import type { AssigneeType } from "./AssigneeAvatar";
 import { SendPlaneIcon, ChevronLeftIcon, CloseIcon } from "../icons";
 import { POWERED_BY_TEXT, getBrandColor, contrastingTextOnBrand } from "../theme";
+import { usePanelSafeAreaInsets } from "../safe-area";
 
 // ── format date — mirrors format-list-message-date.ts ────────────────────────
 
@@ -164,6 +165,7 @@ export function ConversationListScreen({
   onClose,
 }: ConversationListScreenProps) {
   const { theme: t, visitorQueryParams, wsClient, setTotalUnread, widgetConfig } = useLiveChatContext();
+  const { top: safeTop, bottom: safeBottom } = usePanelSafeAreaInsets();
   const settings = widgetConfig?.widgetSettings ?? {};
   const brandColor = getBrandColor(settings);
   const contrastText = contrastingTextOnBrand(brandColor);
@@ -332,7 +334,16 @@ export function ConversationListScreen({
   return (
     <View style={[styles.flex, { backgroundColor: t.colors.background }]}>
       {/* header */}
-      <View style={[styles.header, { backgroundColor: t.colors.headerBackground, borderBottomColor: t.colors.border }]}>
+      <View
+        style={[
+          styles.header,
+          {
+            backgroundColor: t.colors.headerBackground,
+            borderBottomColor: t.colors.border,
+            paddingTop: safeTop + 10,
+          },
+        ]}
+      >
         {onBack ? (
           <TouchableOpacity onPress={onBack} style={styles.headerBtn} accessibilityLabel="Back">
             <ChevronLeftIcon size={22} color={t.colors.headerText} />
@@ -378,13 +389,13 @@ export function ConversationListScreen({
           ListFooterComponent={loadingMore ? <ActivityIndicator color={t.colors.brand} style={{ margin: 16 }} /> : null}
           onEndReached={hasNextPage ? loadMore : undefined}
           onEndReachedThreshold={0.3}
-          contentContainerStyle={{ paddingBottom: 80 }}
+          contentContainerStyle={{ paddingBottom: 80 + safeBottom }}
         />
       )}
 
       {/* send new message button — mirrors web's primary CTA */}
       {onNewConversation ? (
-        <View style={styles.fabContainer}>
+        <View style={[styles.fabContainer, { bottom: 28 + safeBottom }]}>
           <TouchableOpacity
             onPress={onNewConversation}
             activeOpacity={0.85}
@@ -397,7 +408,9 @@ export function ConversationListScreen({
         </View>
       ) : null}
 
-      <Text style={[styles.poweredBy, { color: t.colors.textMuted }]}>{POWERED_BY_TEXT}</Text>
+      <Text style={[styles.poweredBy, { color: t.colors.textMuted, paddingBottom: 8 + safeBottom }]}>
+        {POWERED_BY_TEXT}
+      </Text>
     </View>
   );
 }
@@ -408,7 +421,7 @@ const styles = StyleSheet.create({
   header: {
     flexDirection: "row",
     alignItems: "center",
-    paddingVertical: 10,
+    paddingBottom: 10,
     paddingHorizontal: 4,
     borderBottomWidth: StyleSheet.hairlineWidth,
   },

package/src/ui/components/ConversationScreen.tsx

@@ -2,7 +2,8 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
   ActivityIndicator,
   FlatList,
-  KeyboardAvoidingView,
+  Keyboard,
+  KeyboardEvent,
   Platform,
   StyleSheet,
   Text,
@@ -204,12 +205,14 @@ export function ConversationScreen({
     }
   }, [renderList.length]);
 
+  // Throws on failure so MessageComposer can preserve the draft and show the error.
   const handleSend = useCallback(async (text: string, uploadedAttachments?: UploadedAttachment[]) => {
     if (uploadedAttachments?.length) {
       let activeId: string | null | undefined = conversationId;
       for (let i = 0; i < uploadedAttachments.length; i++) {
         const att = uploadedAttachments[i];
         const caption = i === 0 && text ? text : undefined;
+        // sendAttachment throws on failure — let it propagate
         const returnedId = await sendAttachment(
           { fileId: att.fileId, fileUrl: att.fileUrl, fileName: att.fileName, fileExtension: att.fileExtension, type: att.type, caption },
           activeId === "new" ? null : activeId
@@ -221,9 +224,10 @@ export function ConversationScreen({
       }
       return;
     }
+    // sendText throws on failure — let it propagate
     const returnedId = await sendText(text, isNewConversation ? null : conversationId);
     if (isNewConversation && returnedId) onConversationCreated?.(returnedId);
-  }, [conversationId, sendText, sendAttachment, onConversationCreated]);
+  }, [conversationId, isNewConversation, sendText, sendAttachment, onConversationCreated]);
 
   const renderItem = useCallback(({ item, index }: { item: any; index: number }) => {
     if (item._isDateSep) {
@@ -255,11 +259,23 @@ export function ConversationScreen({
     );
   }, [t, widgetName, handleSend]);
 
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+  useEffect(() => {
+    const show = Keyboard.addListener(
+      Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow",
+      (e: KeyboardEvent) => setKeyboardHeight(e.endCoordinates.height)
+    );
+    const hide = Keyboard.addListener(
+      Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide",
+      () => setKeyboardHeight(0)
+    );
+    return () => { show.remove(); hide.remove(); };
+  }, []);
+
   return (
-    <KeyboardAvoidingView
-      style={[styles.flex, { backgroundColor: t.colors.background }]}
-      behavior={Platform.OS === "ios" ? "padding" : "height"}
-      keyboardVerticalOffset={0}
+    <View
+      style={[styles.flex, { backgroundColor: t.colors.background, paddingBottom: keyboardHeight }]}
     >
       <ConversationHeader
         conversation={isNewConversation ? null : conversation}
@@ -342,7 +358,7 @@ export function ConversationScreen({
       <Text style={[styles.poweredBy, { color: t.colors.textMuted }]}>
         {POWERED_BY_TEXT}
       </Text>
-    </KeyboardAvoidingView>
+    </View>
   );
 }