turbodesk-livechat-react-native 0.1.0-alpha.3 → 0.1.0-alpha.30

package/src/provider/types.ts

@@ -1,57 +1,63 @@
-import type { VisitorProfile } from "../core/visitor-params";
-import type { WsConnectionState } from "../realtime/ws-client";
-import type { AppearanceMode, ThemeConfig } from "../ui/theme";
-
-export type EmbedConfigLoadState = "loading" | "ready" | "error";
-
-export type LiveChatProviderProps = {
-  widgetId: string;
-  apiBaseUrl: string;
-  userId?: string;
-  userToken?: string;
-  authCallback?: () => Promise<string | null | undefined>;
-  visitorProfile?: VisitorProfile;
-  appearance?: AppearanceMode;
-  useBrandThemingForChat?: boolean;
-  theme?: Partial<ThemeConfig>;
-  children: React.ReactNode;
-};
-
-export type LiveChatContextValue = {
-  // identity
-  widgetId: string;
-  userId: string;
-  userToken: string | undefined;
-  setToken: (token: string | null | undefined) => void;
-  logout: () => void;
-
-  // visitor query params
-  visitorProfile: VisitorProfile | undefined;
-  visitorQueryParams: Record<string, string> | null;
-
-  // widget config
-  widgetConfig: any;
-  widgetName: string;
-  widgetGreeting: string;
-  embedLoadState: EmbedConfigLoadState;
-  embedLoadError: string | null;
-
-  // unread
-  totalUnread: number;
-  setTotalUnread: React.Dispatch<React.SetStateAction<number>>;
-
-  // chat open/visible state
-  isOpen: boolean;
-  open: () => void;
-  close: () => void;
-  isVisible: boolean;
-  show: () => void;
-  hide: () => void;
-
-  // WS
-  wsClient: import("../realtime/ws-client").WsClient | null;
-  connectionState: WsConnectionState;
-
-  // theme
-  theme: ThemeConfig;
-};
+import type { VisitorProfile } from "../core/visitor-params";
+import type { WsConnectionState } from "../realtime/ws-client";
+import type { AppearanceMode, ThemeConfig } from "../ui/theme";
+
+export type EmbedConfigLoadState = "loading" | "ready" | "error";
+
+export type LiveChatProviderProps = {
+  widgetId: string;
+  apiBaseUrl: string;
+  userId?: string;
+  userToken?: string;
+  authCallback?: () => Promise<string | null | undefined>;
+  visitorProfile?: VisitorProfile;
+  appearance?: AppearanceMode;
+  useBrandThemingForChat?: boolean;
+  theme?: Partial<ThemeConfig>;
+  fcmToken?: string;
+  fcmTokenPlatform?: "ios" | "android";
+  children: React.ReactNode;
+};
+
+export type LiveChatContextValue = {
+  // identity
+  widgetId: string;
+  userId: string;
+  userToken: string | undefined;
+  setToken: (token: string | null | undefined) => void;
+  logout: () => void;
+
+  // visitor query params
+  visitorProfile: VisitorProfile | undefined;
+  visitorQueryParams: Record<string, string> | null;
+
+  // widget config
+  widgetConfig: any;
+  widgetName: string;
+  widgetGreeting: string;
+  embedLoadState: EmbedConfigLoadState;
+  embedLoadError: string | null;
+
+  // unread
+  totalUnread: number;
+  setTotalUnread: React.Dispatch<React.SetStateAction<number>>;
+
+  // chat open/visible state
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  isVisible: boolean;
+  show: () => void;
+  hide: () => void;
+
+  // active conversation (suppress push notifications while user is viewing it)
+  activeConversationId: string | null;
+  setActiveConversationId: (id: string | null) => void;
+
+  // WS
+  wsClient: import("../realtime/ws-client").WsClient | null;
+  connectionState: WsConnectionState;
+
+  // theme
+  theme: ThemeConfig;
+};

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,
   },