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

package/src/ui/components/MessageComposer.tsx

@@ -81,7 +81,6 @@ function AttachmentMenu({ onPick, disabled, attachmentCount, color }: Attachment
       let picked: PickedAttachment | null = null;
 
       if (kind === "image") {
-        // Try react-native-image-picker
         const ImagePicker = require("react-native-image-picker");
         await new Promise<void>((resolve) => {
           ImagePicker.launchImageLibrary({ mediaType: "photo", quality: 0.8 }, (res: any) => {
@@ -224,13 +223,15 @@ 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,
@@ -239,27 +240,43 @@ async function uploadAttachment(
         fileMode: "app",
       },
       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 ─────────────────────────────────────────────────────────────
@@ -273,10 +290,17 @@ export function MessageComposer({
   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;
+
+  // 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) => {
@@ -291,19 +315,34 @@ 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);
     }
@@ -311,6 +350,17 @@ export function MessageComposer({
 
   return (
     <View style={[styles.container, { backgroundColor: t.colors.composerBackground, borderTopColor: t.colors.composerBorder }]}>
+      {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} />
 
@@ -319,11 +369,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}
         />
@@ -331,7 +381,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}
           />
@@ -344,10 +394,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} />
             )}
@@ -372,6 +424,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,