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

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";
@@ -8,10 +8,25 @@ import { useLiveChatContext } from "../provider/LiveChatContext";
 import { getBrandColor, useEffectiveAppearance } from "../ui/theme";
 import { WsStatusStrip } from "../ui/components/WsStatusStrip";
 
+let KeyboardProvider: ComponentType<{ children: ReactNode }> | null = null;
+try {
+  KeyboardProvider = require("react-native-keyboard-controller").KeyboardProvider;
+} catch {
+  KeyboardProvider = null;
+}
+
 export type LiveChatPanelProps = {
   onClose?: () => void;
+  initialConversationId?: string | null;
 };
 
+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();
@@ -27,7 +42,7 @@ function usePanelBackground(view: string): string {
 const SWIPE_THRESHOLD = 80; // px — minimum horizontal swipe to trigger back
 const SWIPE_VELOCITY = 0.3; // minimum velocity
 
-function PanelContent({ onClose }: LiveChatPanelProps) {
+function PanelContent({ onClose }: { onClose?: () => void }) {
   const { view, conversationId, goConversation, goPreviousChats, goBack } = usePanelRouter();
   const bg = usePanelBackground(view);
   const canGoBack = view === "conversation" || view === "previousChats";
@@ -103,14 +118,23 @@ function PanelContent({ onClose }: LiveChatPanelProps) {
   );
 }
 
-export function LiveChatPanel({ onClose }: LiveChatPanelProps) {
-  return (
-    <PanelRouterProvider>
+export function LiveChatPanel({ onClose, initialConversationId }: LiveChatPanelProps) {
+  const panel = (
+    <PanelRouterProvider initialConversationId={initialConversationId}>
       <View style={styles.flex}>
         <PanelContent onClose={onClose} />
       </View>
     </PanelRouterProvider>
   );
+
+  const withKeyboard = KeyboardProvider ? (
+    <KeyboardProvider>{panel}</KeyboardProvider>
+  ) : panel;
+
+  if (PanelSafeAreaProvider) {
+    return <PanelSafeAreaProvider>{withKeyboard}</PanelSafeAreaProvider>;
+  }
+  return withKeyboard;
 }
 
 const styles = StyleSheet.create({

package/src/navigation/panel-router-context.tsx

@@ -27,11 +27,12 @@ type RouteEntry = {
 
 const PanelRouterContext = createContext<PanelRouterContextValue | null>(null);
 
-export function PanelRouterProvider({ children }: { children: ReactNode }) {
-  const [view, setView] = useState<WidgetPanelView>("home");
-  const [conversationId, setConversationId] = useState<string | null>(null);
+export function PanelRouterProvider({ children, initialConversationId }: { children: ReactNode; initialConversationId?: string | null }) {
+  const initialView: WidgetPanelView = initialConversationId ? "conversation" : "home";
+  const [view, setView] = useState<WidgetPanelView>(initialView);
+  const [conversationId, setConversationId] = useState<string | null>(initialConversationId ?? null);
 
-  const stack = useRef<RouteEntry[]>([{ view: "home", conversationId: null }]);
+  const stack = useRef<RouteEntry[]>([{ view: initialView, conversationId: initialConversationId ?? null }]);
 
   const navigate = useCallback((entry: RouteEntry, replace: boolean) => {
     if (replace) {

package/src/provider/LiveChatContext.ts

@@ -23,6 +23,8 @@ export const LiveChatContext = createContext<LiveChatContextValue>({
   isVisible: true,
   show: () => undefined,
   hide: () => undefined,
+  activeConversationId: null,
+  setActiveConversationId: () => undefined,
   wsClient: null,
   connectionState: { isConnected: false, isConnecting: false, isAwaitingRetry: false, lastError: null },
   theme: defaultTheme,