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

package/src/ui/components/HomeScreen.tsx

@@ -22,6 +22,7 @@ import {
   getWidgetName,
 } from "../theme";
 import { HistoryChatsIcon, SendPlaneIcon } from "../icons";
+import { usePanelSafeAreaInsets } from "../safe-area";
 
 let LinearGradient: any = null;
 try {
@@ -95,6 +96,7 @@ export function HomeScreen({
     visitorQueryParams,
     embedLoadState,
   } = useLiveChatContext();
+  const { top: safeTop, bottom: safeBottom } = usePanelSafeAreaInsets();
 
   const [conversationCount, setConversationCount] = useState(0);
 
@@ -133,7 +135,7 @@ export function HomeScreen({
       style={styles.flex}
     >
       {/* top — branding */}
-      <View style={styles.header}>
+      <View style={[styles.header, { paddingTop: safeTop + 20 }]}>
         {logoUrl ? (
           <Image
             source={{ uri: logoUrl }}
@@ -143,11 +145,17 @@ export function HomeScreen({
         ) : (
           <Avatar name={widgetName} size={44} />
         )}
-        <Text style={[styles.headerTitle, { color: contrastText }]} numberOfLines={2}>
+        <Text
+          style={[styles.headerTitle, { color: contrastText }]}
+          numberOfLines={2}
+        >
           {title}
         </Text>
         <Text
-          style={[styles.headerSubtitle, { color: contrastText, opacity: 0.82 }]}
+          style={[
+            styles.headerSubtitle,
+            { color: contrastText, opacity: 0.82 },
+          ]}
           numberOfLines={3}
         >
           {description}
@@ -182,7 +190,10 @@ export function HomeScreen({
                   Previous chats
                   {conversationCount > 1 ? (
                     <Text
-                      style={{ fontWeight: "400", color: "rgba(255,255,255,0.7)" }}
+                      style={{
+                        fontWeight: "400",
+                        color: "rgba(255,255,255,0.7)",
+                      }}
                     >
                       {" "}
                       ({conversationCount})
@@ -219,7 +230,12 @@ export function HomeScreen({
         </View>
       </View>
 
-      <Text style={[styles.poweredBy, { color: "rgba(255,255,255,0.7)" }]}>
+      <Text
+        style={[
+          styles.poweredBy,
+          { color: "rgba(255,255,255,0.7)", paddingBottom: 8 + safeBottom },
+        ]}
+      >
         {POWERED_BY_TEXT}
       </Text>
     </GradientBackground>
@@ -231,7 +247,6 @@ const styles = StyleSheet.create({
   header: {
     flex: 0.3,
     paddingHorizontal: 20,
-    paddingTop: 52,
     paddingBottom: 32,
     gap: 12,
     justifyContent: "flex-start",

package/src/ui/components/MessageComposer.tsx

@@ -3,6 +3,8 @@ import {
   ActivityIndicator,
   Alert,
   Image,
+  Keyboard,
+  Platform,
   ScrollView,
   StyleSheet,
   Text,
@@ -13,6 +15,7 @@ import {
 import { useLiveChatContext } from "../../provider/LiveChatContext";
 import { fileApi } from "../../api/file-api";
 import { SendPlaneIcon, PaperclipIcon, CloseIcon } from "../icons";
+import { usePanelSafeAreaInsets } from "../safe-area";
 
 // ── types ─────────────────────────────────────────────────────────────────────
 
@@ -41,6 +44,7 @@ export type PendingAttachment = {
   uri: string;
   name: string;
   mimeType: string;
+  size?: number;
   kind: PickedAttachmentKind;
 };
 
@@ -80,32 +84,43 @@ function AttachmentMenu({ onPick, disabled, attachmentCount, color }: Attachment
     try {
       let picked: PickedAttachment | null = null;
 
-      if (kind === "image" || kind === "video") {
-        let ImagePicker: any = null;
-        try { ImagePicker = require("react-native-image-picker"); } catch { /* optional */ }
-        if (!ImagePicker) { Alert.alert("Missing dependency", "Install react-native-image-picker to pick images."); return; }
+      if (kind === "image") {
+        const ImagePicker = require("react-native-image-picker");
+        await new Promise<void>((resolve) => {
+          ImagePicker.launchImageLibrary({ mediaType: "photo", quality: 0.8 }, (res: any) => {
+            if (res.didCancel || res.errorCode) { resolve(); return; }
+            const asset = res.assets?.[0];
+            if (!asset) { resolve(); return; }
+            picked = {
+              uri: asset.uri,
+              name: asset.fileName ?? "image.jpg",
+              type: asset.type ?? "image/jpeg",
+              size: asset.fileSize,
+              kind: "image",
+            };
+            resolve();
+          });
+        });
+      } else if (kind === "video") {
+        const ImagePicker = require("react-native-image-picker");
         await new Promise<void>((resolve) => {
-          ImagePicker.launchImageLibrary(
-            kind === "image" ? { mediaType: "photo", quality: 0.8 } : { mediaType: "video" },
-            (res: any) => {
-              if (res.didCancel || res.errorCode) { resolve(); return; }
-              const asset = res.assets?.[0];
-              if (!asset) { resolve(); return; }
-              picked = {
-                uri: asset.uri,
-                name: asset.fileName ?? (kind === "image" ? "image.jpg" : "video.mp4"),
-                type: asset.type ?? (kind === "image" ? "image/jpeg" : "video/mp4"),
-                size: asset.fileSize,
-                kind,
-              };
-              resolve();
-            }
-          );
+          ImagePicker.launchImageLibrary({ mediaType: "video" }, (res: any) => {
+            if (res.didCancel || res.errorCode) { resolve(); return; }
+            const asset = res.assets?.[0];
+            if (!asset) { resolve(); return; }
+            picked = {
+              uri: asset.uri,
+              name: asset.fileName ?? "video.mp4",
+              type: asset.type ?? "video/mp4",
+              size: asset.fileSize,
+              kind: "video",
+            };
+            resolve();
+          });
         });
       } else {
-        let DocumentPicker: any = null;
-        try { DocumentPicker = require("react-native-document-picker"); } catch { /* optional */ }
-        if (!DocumentPicker) { Alert.alert("Missing dependency", "Install react-native-document-picker to pick files."); return; }
+        // audio / document — use @react-native-documents/picker
+        const DocumentPicker = require("@react-native-documents/picker");
         const types = kind === "audio"
           ? [DocumentPicker.types.audio]
           : [DocumentPicker.types.pdf, DocumentPicker.types.plainText, DocumentPicker.types.doc, DocumentPicker.types.docx];
@@ -124,7 +139,7 @@ function AttachmentMenu({ onPick, disabled, attachmentCount, color }: Attachment
 
       if (picked) onPick(picked);
     } catch (e: any) {
-      if (e?.code !== "DOCUMENT_PICKER_CANCELED") {
+      if (e?.code !== "DOCUMENT_PICKER_CANCELED" && e?.code !== "OPERATION_CANCELED") {
         Alert.alert("Error", "Could not pick file.");
       }
     }
@@ -212,42 +227,61 @@ function FilePreviews({
 
 // ── upload helper ─────────────────────────────────────────────────────────────
 
+// Throws on any failure so the caller can surface the error and preserve the draft.
 async function uploadAttachment(
   pending: PendingAttachment,
   visitorQueryParams: Record<string, string> | null
-): Promise<UploadedAttachment | null> {
+): Promise<UploadedAttachment> {
+  const ext = pending.name.split(".").pop() ?? "";
+  let presigned: any;
   try {
-    const ext = pending.name.split(".").pop() ?? "";
-    const presigned = await fileApi.getFileUrl(
+    presigned = await fileApi.getFileUrl(
       {
         operation: "putObject",
         name: pending.name,
         type: pending.mimeType,
         extension: ext,
-        fileMode: "app",
+        bytes: pending.size,
+        folder: "livechat",
       },
       visitorQueryParams ? { params: visitorQueryParams } : undefined
-    ) as any;
+    );
+  } catch {
+    throw new Error(`Failed to prepare upload for "${pending.name}"`);
+  }
+
+  const signedUrl = presigned?.data?.signedUrl;
+  if (!signedUrl) throw new Error(`No upload URL returned for "${pending.name}"`);
 
-    await fetch(presigned?.data?.signedUrl, {
+  let putRes: Response;
+  try {
+    putRes = await fetch(signedUrl, {
       method: "PUT",
       headers: { "Content-Type": pending.mimeType },
       body: { uri: pending.uri, type: pending.mimeType, name: pending.name } as any,
     });
-
-    const uploaded = presigned?.data?.file;
-    return {
-      id: pending.id,
-      fileId: uploaded._id,
-      fileUrl: uploaded.url,
-      fileName: uploaded.name,
-      fileExtension: uploaded.extension,
-      fileType: pending.mimeType,
-      type: pending.kind,
-    };
   } catch {
-    return null;
+    throw new Error(`Network error while uploading "${pending.name}"`);
+  }
+
+  if (!putRes.ok) {
+    throw new Error(`Upload failed for "${pending.name}" (HTTP ${putRes.status})`);
   }
+
+  const uploaded = presigned?.data?.file;
+  if (!uploaded?._id) {
+    throw new Error(`Upload succeeded but server returned no file metadata for "${pending.name}"`);
+  }
+
+  return {
+    id: pending.id,
+    fileId: uploaded._id,
+    fileUrl: uploaded.url,
+    fileName: uploaded.name,
+    fileExtension: uploaded.extension,
+    fileType: pending.mimeType,
+    type: pending.kind,
+  };
 }
 
 // ── main composer ─────────────────────────────────────────────────────────────
@@ -258,18 +292,42 @@ export function MessageComposer({
   placeholder = "Message…",
 }: MessageComposerProps) {
   const { theme: t, visitorQueryParams } = useLiveChatContext();
+  const { bottom: safeBottom } = usePanelSafeAreaInsets();
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
   const [text, setText] = useState("");
   const [attachments, setAttachments] = useState<PendingAttachment[]>([]);
   const [isSending, setIsSending] = useState(false);
+  const [sendError, setSendError] = useState<string | null>(null);
   const inputRef = useRef<TextInput>(null);
 
+  const isConnecting = !visitorQueryParams;
   const trimmed = text.trim();
-  const canSend = (trimmed.length > 0 || attachments.length > 0) && !disabled && !isSending;
+  const canSend = (trimmed.length > 0 || attachments.length > 0) && !disabled && !isSending && !isConnecting;
+
+  useEffect(() => {
+    const show = Keyboard.addListener(
+      Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow",
+      () => setKeyboardVisible(true)
+    );
+    const hide = Keyboard.addListener(
+      Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide",
+      () => setKeyboardVisible(false)
+    );
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+
+  // Clear stale error when the user edits the message
+  useEffect(() => {
+    if (sendError && (text || attachments.length)) setSendError(null);
+  }, [text, attachments.length]);
 
   const handlePick = useCallback((item: PickedAttachment) => {
     setAttachments((prev) => {
       if (prev.length >= MAX_ATTACHMENTS) return prev;
-      return [...prev, { id: newId(), uri: item.uri, name: item.name, mimeType: item.type, kind: item.kind }];
+      return [...prev, { id: newId(), uri: item.uri, name: item.name, mimeType: item.type, size: item.size, kind: item.kind }];
     });
   }, []);
 
@@ -279,26 +337,61 @@ export function MessageComposer({
 
   const handleSend = useCallback(async () => {
     if (!canSend) return;
+
     setIsSending(true);
-    const snapshot = [...attachments];
+    setSendError(null);
+
+    // Capture current values — text/attachments must NOT be cleared until send succeeds
     const sendText = text.trim();
+    const snapshot = [...attachments];
+
     try {
-      const uploadResults = await Promise.all(
-        snapshot.map((a) => uploadAttachment(a, visitorQueryParams))
-      );
-      const uploaded = uploadResults.filter((r): r is UploadedAttachment => r !== null);
+      let uploaded: UploadedAttachment[] = [];
+
+      if (snapshot.length > 0) {
+        // Upload all attachments — throws on the first failure, preserving draft
+        uploaded = await Promise.all(
+          snapshot.map((a) => uploadAttachment(a, visitorQueryParams))
+        );
+      }
+
+      // onSend must throw on failure (ConversationScreen propagates throws from useSendMessage)
       await onSend(sendText, uploaded);
+
+      // Only reached on confirmed success — safe to clear
       setText("");
       setAttachments([]);
-    } catch {
-      /* ignore */
+      setSendError(null);
+    } catch (e: any) {
+      // Draft preserved — text and attachments state untouched
+      setSendError(e?.message ?? "Failed to send. Please try again.");
     } finally {
       setIsSending(false);
     }
   }, [canSend, text, attachments, onSend, visitorQueryParams]);
 
   return (
-    <View style={[styles.container, { backgroundColor: t.colors.composerBackground, borderTopColor: t.colors.composerBorder }]}>
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: t.colors.composerBackground,
+          borderTopColor: t.colors.composerBorder,
+          paddingBottom: 8 + (keyboardVisible ? 0 : safeBottom),
+        },
+      ]}
+    >
+      {sendError ? (
+        <View style={[styles.errorBanner, { backgroundColor: t.colors.surface, borderColor: t.colors.border }]}>
+          <Text style={[styles.errorText, { color: t.colors.error ?? "#c0392b" }]} numberOfLines={2}>
+            {sendError}
+          </Text>
+          <TouchableOpacity onPress={() => setSendError(null)} accessibilityLabel="Dismiss error">
+            <CloseIcon size={14} color={t.colors.textMuted} />
+          </TouchableOpacity>
+        </View>
+      ) : null}
+
       <View style={[styles.inner, { borderColor: t.colors.composerBorder }]}>
         <FilePreviews items={attachments} onRemove={handleRemove} borderColor={t.colors.border} />
 
@@ -307,11 +400,11 @@ export function MessageComposer({
           style={[styles.input, { color: t.colors.inputText, fontSize: t.fontSizes.md }]}
           value={text}
           onChangeText={setText}
-          placeholder={placeholder}
+          placeholder={isConnecting ? "Connecting…" : placeholder}
           placeholderTextColor={t.colors.textMuted}
           multiline
           maxLength={4000}
-          editable={!disabled}
+          editable={!disabled && !isConnecting}
           returnKeyType="default"
           blurOnSubmit={false}
         />
@@ -319,7 +412,7 @@ export function MessageComposer({
         <View style={styles.toolbar}>
           <AttachmentMenu
             onPick={handlePick}
-            disabled={disabled || isSending}
+            disabled={disabled || isSending || isConnecting}
             attachmentCount={attachments.length}
             color={t.colors.textMuted}
           />
@@ -332,10 +425,12 @@ export function MessageComposer({
               styles.sendBtn,
               { backgroundColor: canSend ? t.colors.sendButtonBackground : t.colors.border },
             ]}
-            accessibilityLabel="Send message"
+            accessibilityLabel={isConnecting ? "Connecting, please wait" : "Send message"}
           >
             {isSending ? (
               <ActivityIndicator size="small" color={t.colors.sendButtonIcon} />
+            ) : isConnecting ? (
+              <ActivityIndicator size="small" color={t.colors.textMuted} />
             ) : (
               <SendPlaneIcon size={18} color={canSend ? t.colors.sendButtonIcon : t.colors.textMuted} />
             )}
@@ -351,7 +446,6 @@ const styles = StyleSheet.create({
     borderTopWidth: 1,
     paddingHorizontal: 8,
     paddingTop: 8,
-    paddingBottom: 8,
   },
   inner: {
     borderWidth: 1,
@@ -360,6 +454,21 @@ const styles = StyleSheet.create({
     paddingTop: 10,
     paddingBottom: 6,
   },
+  errorBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    marginBottom: 6,
+    gap: 8,
+  },
+  errorText: {
+    flex: 1,
+    fontSize: 13,
+  },
   input: {
     minHeight: 30,
     maxHeight: 200,

package/src/ui/safe-area.ts

@@ -0,0 +1,34 @@
+import { Platform, StatusBar } from "react-native";
+
+export type PanelSafeAreaInsets = {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};
+
+function getFallbackInsets(): PanelSafeAreaInsets {
+  if (Platform.OS === "ios") {
+    // Typical notch / home-indicator insets when no SafeAreaProvider is mounted.
+    return { top: 47, bottom: 34, left: 0, right: 0 };
+  }
+  return { top: StatusBar.currentHeight ?? 0, bottom: 0, left: 0, right: 0 };
+}
+
+type UseSafeAreaInsets = () => PanelSafeAreaInsets;
+
+let useSafeAreaInsetsFromContext: UseSafeAreaInsets | null = null;
+try {
+  useSafeAreaInsetsFromContext =
+    require("react-native-safe-area-context").useSafeAreaInsets;
+} catch {
+  useSafeAreaInsetsFromContext = null;
+}
+
+/** Safe-area insets for panel UI. Uses react-native-safe-area-context when available. */
+export function usePanelSafeAreaInsets(): PanelSafeAreaInsets {
+  if (useSafeAreaInsetsFromContext) {
+    return useSafeAreaInsetsFromContext();
+  }
+  return getFallbackInsets();
+}