turbodesk-livechat-react-native 0.1.0-alpha.24 → 0.1.0-alpha.26

package/src/ui/components/ConversationScreen.tsx

@@ -1,370 +1,370 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import {
-  ActivityIndicator,
-  FlatList,
-  KeyboardAvoidingView,
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { useLiveChatContext } from "../../provider/LiveChatContext";
-import { conversationApi } from "../../api/conversation-api";
-import { useMessages } from "../../hooks/use-messages";
-import { useSendMessage } from "../../hooks/use-send-message";
-import { ConversationHeader } from "./ConversationHeader";
-import { MessageBubble } from "./MessageBubble";
-import { LogMessage } from "./LogMessage";
-import { MessageComposer } from "./MessageComposer";
-import type { UploadedAttachment } from "./MessageComposer";
-import type { InteractiveReplyPayload } from "./LivechatMessageRenderer";
-import {
-  POWERED_BY_TEXT,
-  getWidgetGreeting,
-} from "../../ui/theme";
-import type { BubblePosition } from "./MessageBubble";
-
-export type ConversationScreenProps = {
-  conversationId: string | null | undefined;
-  onBack?: () => void;
-  onClose?: () => void;
-  onConversationCreated?: (conversationId: string) => void;
-};
-
-// ── date separator ────────────────────────────────────────────────────────────
-
-function DateSeparator({ label, color }: { label: string; color: string }) {
-  return (
-    <View style={styles.dateSep}>
-      <Text style={[styles.dateSepText, { color }]}>{label}</Text>
-    </View>
-  );
-}
-
-function getDateLabel(dateStr: string): string {
-  const d = new Date(dateStr);
-  if (isNaN(d.getTime())) return "";
-  const now = new Date();
-  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-  const yesterday = new Date(today);
-  yesterday.setDate(yesterday.getDate() - 1);
-  const md = new Date(d.getFullYear(), d.getMonth(), d.getDate());
-  if (md.getTime() === today.getTime()) return "TODAY";
-  if (md.getTime() === yesterday.getTime()) return "YESTERDAY";
-  return d.toLocaleDateString([], { day: "2-digit", month: "short" }).toUpperCase();
-}
-
-// ── helpers ───────────────────────────────────────────────────────────────────
-
-function makeGreetingMessage(greeting: string): any {
-  return {
-    _id: "__lc_greeting__",
-    senderType: "ai",
-    channelType: "livechat",
-    livechat: { type: "text", text: { body: greeting } },
-  };
-}
-
-function getBubblePosition(messages: any[], index: number): { position: BubblePosition; showFooter: boolean } {
-  const msg = messages[index];
-  const prev = messages[index - 1];
-  const next = messages[index + 1];
-  const prevSame = prev && !prev._isDateSep && prev.channelType !== "log" && prev.senderType === msg.senderType;
-  const nextSame = next && !next._isDateSep && next.channelType !== "log" && next.senderType === msg.senderType;
-  let position: BubblePosition = "single";
-  if (!prevSame && nextSame) position = "first";
-  else if (prevSame && nextSame) position = "middle";
-  else if (prevSame && !nextSame) position = "last";
-  return { position, showFooter: position === "single" || position === "last" };
-}
-
-function buildRenderList(messages: any[], greeting: string): any[] {
-  const result: any[] = [makeGreetingMessage(greeting)];
-  // Sort by createdAt ascending — mirrors web's transformMessagesToDateSeperators sort
-  const sorted = [...messages].sort((a, b) => {
-    const ta = new Date(a?.createdAt || a?.livechat?.timestamp || 0).getTime();
-    const tb = new Date(b?.createdAt || b?.livechat?.timestamp || 0).getTime();
-    return ta - tb;
-  });
-  let lastDateLabel = "";
-  for (const m of sorted) {
-    const dateStr = m?.createdAt || m?.livechat?.timestamp;
-    if (dateStr) {
-      const label = getDateLabel(dateStr);
-      if (label && label !== lastDateLabel) {
-        result.push({ _isDateSep: true, label, _id: "date-" + label });
-        lastDateLabel = label;
-      }
-    }
-    result.push(m);
-  }
-  return result;
-}
-
-function getRoleLabel(message: any): string {
-  const type = message?.assigneeType ?? message?.senderType ?? null;
-  if (type === "ai") return "AI Agent";
-  if (type === "bot") return "Bot";
-  if (type === "agent" || type === "user")
-    return message?.assigneeRole ?? message?.userId?.role ?? "Agent";
-  if (message?.senderType === "agent")
-    return message?.assigneeRole ?? message?.userId?.role ?? "Agent";
-  return "";
-}
-
-function patchConversationShell(prev: any, conversationId: string | null | undefined, incoming: any): any {
-  if (!prev || !conversationId || !incoming?._id) return prev;
-  if (String(incoming._id) !== String(conversationId)) return prev;
-  const nested = prev.conversation;
-  if (nested != null && typeof nested === "object") {
-    return { ...prev, conversation: { ...nested, ...incoming } };
-  }
-  return { ...prev, ...incoming };
-}
-
-// ── main screen ───────────────────────────────────────────────────────────────
-
-export function ConversationScreen({
-  conversationId,
-  onBack,
-  onClose,
-  onConversationCreated,
-}: ConversationScreenProps) {
-  const { theme: t, widgetName, widgetConfig, wsClient, visitorQueryParams, setActiveConversationId } = useLiveChatContext();
-  const { messages, loading, loadingOlder, hasOlder, loadOlder, markAsRead } = useMessages(conversationId);
-  const { sendText, sendAttachment, sendInteractive, sending } = useSendMessage();
-  const flatListRef = useRef<FlatList>(null);
-
-  const settings = widgetConfig?.widgetSettings ?? {};
-  const greeting = getWidgetGreeting(settings);
-
-  // ── fetch conversation ────────────────────────────────────────────────────
-  const [conversation, setConversation] = useState<any>(null);
-  const [listPickerState, setListPickerState] = useState<{ sections: any[]; onSelect: (id: string, title: string) => void } | null>(null);
-  const prevConvIdRef = useRef<string | null | undefined>(null);
-
-  useEffect(() => {
-    const isNew = !conversationId || conversationId === "new";
-    if (isNew || !visitorQueryParams) {
-      setConversation(null);
-      prevConvIdRef.current = conversationId;
-      return;
-    }
-    if (prevConvIdRef.current != null && prevConvIdRef.current !== "new" && prevConvIdRef.current !== conversationId) {
-      setConversation(null);
-    }
-    prevConvIdRef.current = conversationId;
-
-    const ac = new AbortController();
-    (async () => {
-      try {
-        const raw = await conversationApi.getConversation(conversationId, {
-          params: visitorQueryParams,
-          signal: ac.signal,
-        });
-        if (ac.signal.aborted) return;
-        setConversation(raw?.data ?? raw);
-      } catch (e: any) {
-        if (ac.signal.aborted || e?.name === "AbortError") return;
-        setConversation(null);
-      }
-    })();
-    return () => ac.abort();
-  }, [conversationId, visitorQueryParams]);
-
-  // ── WS patches ────────────────────────────────────────────────────────────
-  useEffect(() => {
-    if (!wsClient || !conversationId || conversationId === "new") return;
-    const patch = (payload: any) => {
-      const data = payload?.data ?? payload;
-      const incoming = data?.conversation;
-      setConversation((prev: any) => patchConversationShell(prev, conversationId, incoming));
-    };
-    const u1 = wsClient.subscribe("conversation_resolved", patch);
-    const u2 = wsClient.subscribe("conversation_intervened", patch);
-    const u3 = wsClient.subscribe("conversation_unassigned", patch);
-    const u4 = wsClient.subscribe("conversation_transferred", patch);
-    return () => { u1(); u2(); u3(); u4(); };
-  }, [wsClient, conversationId]);
-
-  const isNewConversation = !conversationId || conversationId === "new";
-  const convDoc = conversation?.conversation ?? conversation ?? null;
-  const isResolved = !isNewConversation && !!conversation && convDoc?.status === "resolved";
-
-  const renderList = buildRenderList(messages, greeting);
-  const renderListRef = useRef<any[]>(renderList);
-  renderListRef.current = renderList;
-
-  useEffect(() => { if (conversationId && conversationId !== "new") markAsRead(); }, [conversationId, markAsRead]);
-
-  useEffect(() => {
-    const id = conversationId && conversationId !== "new" ? conversationId : null;
-    setActiveConversationId(id);
-    return () => setActiveConversationId(null);
-  }, [conversationId, setActiveConversationId]);
-
-  useEffect(() => {
-    if (renderList.length > 0) {
-      setTimeout(() => flatListRef.current?.scrollToEnd({ animated: true }), 100);
-    }
-  }, [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
-        );
-        if ((!activeId || activeId === "new") && returnedId) {
-          activeId = returnedId;
-          onConversationCreated?.(returnedId);
-        }
-      }
-      return;
-    }
-    // sendText throws on failure — let it propagate
-    const returnedId = await sendText(text, isNewConversation ? null : conversationId);
-    if (isNewConversation && returnedId) onConversationCreated?.(returnedId);
-  }, [conversationId, isNewConversation, sendText, sendAttachment, onConversationCreated]);
-
-  const renderItem = useCallback(({ item, index }: { item: any; index: number }) => {
-    if (item._isDateSep) {
-      return <DateSeparator label={item.label} color={t.colors.textMuted} />;
-    }
-    if (item.channelType === "log") {
-      return <LogMessage message={item} />;
-    }
-    const { position, showFooter } = getBubblePosition(renderListRef.current, index);
-    return (
-      <MessageBubble
-        message={item}
-        position={position}
-        showFooter={showFooter}
-        senderName={item?.userId?.name ?? item?.senderName ?? widgetName}
-        roleLabel={getRoleLabel(item)}
-        onInteractiveReply={(payload: InteractiveReplyPayload | string) => {
-          if (typeof payload === "string") {
-            handleSend(payload);
-          } else {
-            sendInteractive(
-              { type: payload.type, id: payload.id, title: payload.title },
-              isNewConversation ? null : conversationId
-            );
-          }
-        }}
-        onShowListPicker={(sections, onSelect) => setListPickerState({ sections, onSelect })}
-      />
-    );
-  }, [t, widgetName, handleSend]);
-
-  return (
-    <KeyboardAvoidingView
-      style={[styles.flex, { backgroundColor: t.colors.background }]}
-      behavior={Platform.OS === "ios" ? "padding" : "height"}
-    >
-      <ConversationHeader
-        conversation={isNewConversation ? null : conversation}
-        isLoading={!isNewConversation && conversation === null}
-        onBack={onBack}
-        onClose={onClose}
-      />
-
-      {loadingOlder && (
-        <ActivityIndicator color={t.colors.brand} style={{ marginTop: 8 }} />
-      )}
-
-      <FlatList
-        ref={flatListRef}
-        data={renderList}
-        keyExtractor={(item, i) => item?._id ?? String(i)}
-        renderItem={renderItem}
-        style={styles.flex}
-        contentContainerStyle={{ paddingVertical: 8 }}
-        onEndReached={hasOlder ? loadOlder : undefined}
-        onEndReachedThreshold={0.2}
-        maintainVisibleContentPosition={{ minIndexForVisible: 0 }}
-        onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: true })}
-        ListHeaderComponent={
-          loading && messages.length === 0 ? (
-            <View style={styles.center}>
-              <ActivityIndicator color={t.colors.brand} size="large" style={{ marginVertical: 24 }} />
-            </View>
-          ) : null
-        }
-        ListEmptyComponent={
-          !loading ? (
-            <View style={[styles.flex, styles.center]}>
-              <Text style={{ color: t.colors.textMuted, fontSize: t.fontSizes.md }}>
-                Start the conversation
-              </Text>
-            </View>
-          ) : null
-        }
-      />
-
-      <MessageComposer
-        onSend={handleSend}
-        disabled={isResolved || sending}
-        placeholder={isResolved ? "This conversation is resolved" : "Message…"}
-      />
-
-      {listPickerState && (
-        <View style={[styles.listPicker, { backgroundColor: t.colors.surface }]}>
-          <View style={[styles.listPickerHeader, { borderBottomColor: t.colors.border }]}>
-            <Text style={[styles.listPickerTitle, { color: t.colors.text }]}>Select an option</Text>
-            <TouchableOpacity onPress={() => setListPickerState(null)}>
-              <Text style={{ color: t.colors.textMuted, fontSize: 20 }}>×</Text>
-            </TouchableOpacity>
-          </View>
-          <FlatList
-            data={listPickerState.sections}
-            keyExtractor={(_, i) => String(i)}
-            renderItem={({ item: section }) => (
-              <View>
-                {section.title ? (
-                  <Text style={[styles.listPickerSectionTitle, { color: t.colors.textMuted }]}>{section.title}</Text>
-                ) : null}
-                {(section.rows ?? []).map((row: any) => (
-                  <TouchableOpacity
-                    key={row.id}
-                    onPress={() => { listPickerState.onSelect(row.id, row.title); setListPickerState(null); }}
-                    style={[styles.listPickerRow, { borderBottomColor: t.colors.border }]}
-                  >
-                    <Text style={[styles.listPickerRowTitle, { color: t.colors.text }]}>{row.title}</Text>
-                    {row.description ? <Text style={[styles.listPickerRowDesc, { color: t.colors.textMuted }]}>{row.description}</Text> : null}
-                  </TouchableOpacity>
-                ))}
-              </View>
-            )}
-          />
-        </View>
-      )}
-
-      <Text style={[styles.poweredBy, { color: t.colors.textMuted }]}>
-        {POWERED_BY_TEXT}
-      </Text>
-    </KeyboardAvoidingView>
-  );
-}
-
-const styles = StyleSheet.create({
-  flex: { flex: 1 },
-  center: { alignItems: "center", justifyContent: "center" },
-  dateSep: { alignItems: "center", paddingVertical: 10 },
-  dateSepText: { fontSize: 11, fontWeight: "600", letterSpacing: 0.5 },
-  poweredBy: { textAlign: "center", fontSize: 11, paddingVertical: 8 },
-  listPicker: { position: "absolute", inset: 0, top: 0, left: 0, right: 0, bottom: 0, zIndex: 20 },
-  listPickerHeader: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: StyleSheet.hairlineWidth },
-  listPickerTitle: { fontSize: 14, fontWeight: "600" },
-  listPickerSectionTitle: { fontSize: 11, fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.5, paddingHorizontal: 16, paddingTop: 12, paddingBottom: 4 },
-  listPickerRow: { paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: StyleSheet.hairlineWidth },
-  listPickerRowTitle: { fontSize: 14, fontWeight: "500" },
-  listPickerRowDesc: { fontSize: 12, marginTop: 2 },
-});
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  ActivityIndicator,
+  FlatList,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useLiveChatContext } from "../../provider/LiveChatContext";
+import { conversationApi } from "../../api/conversation-api";
+import { useMessages } from "../../hooks/use-messages";
+import { useSendMessage } from "../../hooks/use-send-message";
+import { ConversationHeader } from "./ConversationHeader";
+import { MessageBubble } from "./MessageBubble";
+import { LogMessage } from "./LogMessage";
+import { MessageComposer } from "./MessageComposer";
+import type { UploadedAttachment } from "./MessageComposer";
+import type { InteractiveReplyPayload } from "./LivechatMessageRenderer";
+import {
+  POWERED_BY_TEXT,
+  getWidgetGreeting,
+} from "../../ui/theme";
+import type { BubblePosition } from "./MessageBubble";
+
+export type ConversationScreenProps = {
+  conversationId: string | null | undefined;
+  onBack?: () => void;
+  onClose?: () => void;
+  onConversationCreated?: (conversationId: string) => void;
+};
+
+// ── date separator ────────────────────────────────────────────────────────────
+
+function DateSeparator({ label, color }: { label: string; color: string }) {
+  return (
+    <View style={styles.dateSep}>
+      <Text style={[styles.dateSepText, { color }]}>{label}</Text>
+    </View>
+  );
+}
+
+function getDateLabel(dateStr: string): string {
+  const d = new Date(dateStr);
+  if (isNaN(d.getTime())) return "";
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  const md = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  if (md.getTime() === today.getTime()) return "TODAY";
+  if (md.getTime() === yesterday.getTime()) return "YESTERDAY";
+  return d.toLocaleDateString([], { day: "2-digit", month: "short" }).toUpperCase();
+}
+
+// ── helpers ───────────────────────────────────────────────────────────────────
+
+function makeGreetingMessage(greeting: string): any {
+  return {
+    _id: "__lc_greeting__",
+    senderType: "ai",
+    channelType: "livechat",
+    livechat: { type: "text", text: { body: greeting } },
+  };
+}
+
+function getBubblePosition(messages: any[], index: number): { position: BubblePosition; showFooter: boolean } {
+  const msg = messages[index];
+  const prev = messages[index - 1];
+  const next = messages[index + 1];
+  const prevSame = prev && !prev._isDateSep && prev.channelType !== "log" && prev.senderType === msg.senderType;
+  const nextSame = next && !next._isDateSep && next.channelType !== "log" && next.senderType === msg.senderType;
+  let position: BubblePosition = "single";
+  if (!prevSame && nextSame) position = "first";
+  else if (prevSame && nextSame) position = "middle";
+  else if (prevSame && !nextSame) position = "last";
+  return { position, showFooter: position === "single" || position === "last" };
+}
+
+function buildRenderList(messages: any[], greeting: string): any[] {
+  const result: any[] = [makeGreetingMessage(greeting)];
+  // Sort by createdAt ascending — mirrors web's transformMessagesToDateSeperators sort
+  const sorted = [...messages].sort((a, b) => {
+    const ta = new Date(a?.createdAt || a?.livechat?.timestamp || 0).getTime();
+    const tb = new Date(b?.createdAt || b?.livechat?.timestamp || 0).getTime();
+    return ta - tb;
+  });
+  let lastDateLabel = "";
+  for (const m of sorted) {
+    const dateStr = m?.createdAt || m?.livechat?.timestamp;
+    if (dateStr) {
+      const label = getDateLabel(dateStr);
+      if (label && label !== lastDateLabel) {
+        result.push({ _isDateSep: true, label, _id: "date-" + label });
+        lastDateLabel = label;
+      }
+    }
+    result.push(m);
+  }
+  return result;
+}
+
+function getRoleLabel(message: any): string {
+  const type = message?.assigneeType ?? message?.senderType ?? null;
+  if (type === "ai") return "AI Agent";
+  if (type === "bot") return "Bot";
+  if (type === "agent" || type === "user")
+    return message?.assigneeRole ?? message?.userId?.role ?? "Agent";
+  if (message?.senderType === "agent")
+    return message?.assigneeRole ?? message?.userId?.role ?? "Agent";
+  return "";
+}
+
+function patchConversationShell(prev: any, conversationId: string | null | undefined, incoming: any): any {
+  if (!prev || !conversationId || !incoming?._id) return prev;
+  if (String(incoming._id) !== String(conversationId)) return prev;
+  const nested = prev.conversation;
+  if (nested != null && typeof nested === "object") {
+    return { ...prev, conversation: { ...nested, ...incoming } };
+  }
+  return { ...prev, ...incoming };
+}
+
+// ── main screen ───────────────────────────────────────────────────────────────
+
+export function ConversationScreen({
+  conversationId,
+  onBack,
+  onClose,
+  onConversationCreated,
+}: ConversationScreenProps) {
+  const { theme: t, widgetName, widgetConfig, wsClient, visitorQueryParams, setActiveConversationId } = useLiveChatContext();
+  const { messages, loading, loadingOlder, hasOlder, loadOlder, markAsRead } = useMessages(conversationId);
+  const { sendText, sendAttachment, sendInteractive, sending } = useSendMessage();
+  const flatListRef = useRef<FlatList>(null);
+
+  const settings = widgetConfig?.widgetSettings ?? {};
+  const greeting = getWidgetGreeting(settings);
+
+  // ── fetch conversation ────────────────────────────────────────────────────
+  const [conversation, setConversation] = useState<any>(null);
+  const [listPickerState, setListPickerState] = useState<{ sections: any[]; onSelect: (id: string, title: string) => void } | null>(null);
+  const prevConvIdRef = useRef<string | null | undefined>(null);
+
+  useEffect(() => {
+    const isNew = !conversationId || conversationId === "new";
+    if (isNew || !visitorQueryParams) {
+      setConversation(null);
+      prevConvIdRef.current = conversationId;
+      return;
+    }
+    if (prevConvIdRef.current != null && prevConvIdRef.current !== "new" && prevConvIdRef.current !== conversationId) {
+      setConversation(null);
+    }
+    prevConvIdRef.current = conversationId;
+
+    const ac = new AbortController();
+    (async () => {
+      try {
+        const raw = await conversationApi.getConversation(conversationId, {
+          params: visitorQueryParams,
+          signal: ac.signal,
+        });
+        if (ac.signal.aborted) return;
+        setConversation(raw?.data ?? raw);
+      } catch (e: any) {
+        if (ac.signal.aborted || e?.name === "AbortError") return;
+        setConversation(null);
+      }
+    })();
+    return () => ac.abort();
+  }, [conversationId, visitorQueryParams]);
+
+  // ── WS patches ────────────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!wsClient || !conversationId || conversationId === "new") return;
+    const patch = (payload: any) => {
+      const data = payload?.data ?? payload;
+      const incoming = data?.conversation;
+      setConversation((prev: any) => patchConversationShell(prev, conversationId, incoming));
+    };
+    const u1 = wsClient.subscribe("conversation_resolved", patch);
+    const u2 = wsClient.subscribe("conversation_intervened", patch);
+    const u3 = wsClient.subscribe("conversation_unassigned", patch);
+    const u4 = wsClient.subscribe("conversation_transferred", patch);
+    return () => { u1(); u2(); u3(); u4(); };
+  }, [wsClient, conversationId]);
+
+  const isNewConversation = !conversationId || conversationId === "new";
+  const convDoc = conversation?.conversation ?? conversation ?? null;
+  const isResolved = !isNewConversation && !!conversation && convDoc?.status === "resolved";
+
+  const renderList = buildRenderList(messages, greeting);
+  const renderListRef = useRef<any[]>(renderList);
+  renderListRef.current = renderList;
+
+  useEffect(() => { if (conversationId && conversationId !== "new") markAsRead(); }, [conversationId, markAsRead]);
+
+  useEffect(() => {
+    if (!conversationId || conversationId === "new") return;
+    setActiveConversationId(conversationId);
+    return () => setActiveConversationId(null);
+  }, [conversationId, setActiveConversationId]);
+
+  useEffect(() => {
+    if (renderList.length > 0) {
+      setTimeout(() => flatListRef.current?.scrollToEnd({ animated: true }), 100);
+    }
+  }, [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
+        );
+        if ((!activeId || activeId === "new") && returnedId) {
+          activeId = returnedId;
+          onConversationCreated?.(returnedId);
+        }
+      }
+      return;
+    }
+    // sendText throws on failure — let it propagate
+    const returnedId = await sendText(text, isNewConversation ? null : conversationId);
+    if (isNewConversation && returnedId) onConversationCreated?.(returnedId);
+  }, [conversationId, isNewConversation, sendText, sendAttachment, onConversationCreated]);
+
+  const renderItem = useCallback(({ item, index }: { item: any; index: number }) => {
+    if (item._isDateSep) {
+      return <DateSeparator label={item.label} color={t.colors.textMuted} />;
+    }
+    if (item.channelType === "log") {
+      return <LogMessage message={item} />;
+    }
+    const { position, showFooter } = getBubblePosition(renderListRef.current, index);
+    return (
+      <MessageBubble
+        message={item}
+        position={position}
+        showFooter={showFooter}
+        senderName={item?.userId?.name ?? item?.senderName ?? widgetName}
+        roleLabel={getRoleLabel(item)}
+        onInteractiveReply={(payload: InteractiveReplyPayload | string) => {
+          if (typeof payload === "string") {
+            handleSend(payload);
+          } else {
+            sendInteractive(
+              { type: payload.type, id: payload.id, title: payload.title },
+              isNewConversation ? null : conversationId
+            );
+          }
+        }}
+        onShowListPicker={(sections, onSelect) => setListPickerState({ sections, onSelect })}
+      />
+    );
+  }, [t, widgetName, handleSend]);
+
+  return (
+    <KeyboardAvoidingView
+      style={[styles.flex, { backgroundColor: t.colors.background }]}
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+    >
+      <ConversationHeader
+        conversation={isNewConversation ? null : conversation}
+        isLoading={!isNewConversation && conversation === null}
+        onBack={onBack}
+        onClose={onClose}
+      />
+
+      {loadingOlder && (
+        <ActivityIndicator color={t.colors.brand} style={{ marginTop: 8 }} />
+      )}
+
+      <FlatList
+        ref={flatListRef}
+        data={renderList}
+        keyExtractor={(item, i) => item?._id ?? String(i)}
+        renderItem={renderItem}
+        style={styles.flex}
+        contentContainerStyle={{ paddingVertical: 8 }}
+        onEndReached={hasOlder ? loadOlder : undefined}
+        onEndReachedThreshold={0.2}
+        maintainVisibleContentPosition={{ minIndexForVisible: 0 }}
+        onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: true })}
+        ListHeaderComponent={
+          loading && messages.length === 0 ? (
+            <View style={styles.center}>
+              <ActivityIndicator color={t.colors.brand} size="large" style={{ marginVertical: 24 }} />
+            </View>
+          ) : null
+        }
+        ListEmptyComponent={
+          !loading ? (
+            <View style={[styles.flex, styles.center]}>
+              <Text style={{ color: t.colors.textMuted, fontSize: t.fontSizes.md }}>
+                Start the conversation
+              </Text>
+            </View>
+          ) : null
+        }
+      />
+
+      <MessageComposer
+        onSend={handleSend}
+        disabled={isResolved || sending}
+        placeholder={isResolved ? "This conversation is resolved" : "Message…"}
+      />
+
+      {listPickerState && (
+        <View style={[styles.listPicker, { backgroundColor: t.colors.surface }]}>
+          <View style={[styles.listPickerHeader, { borderBottomColor: t.colors.border }]}>
+            <Text style={[styles.listPickerTitle, { color: t.colors.text }]}>Select an option</Text>
+            <TouchableOpacity onPress={() => setListPickerState(null)}>
+              <Text style={{ color: t.colors.textMuted, fontSize: 20 }}>×</Text>
+            </TouchableOpacity>
+          </View>
+          <FlatList
+            data={listPickerState.sections}
+            keyExtractor={(_, i) => String(i)}
+            renderItem={({ item: section }) => (
+              <View>
+                {section.title ? (
+                  <Text style={[styles.listPickerSectionTitle, { color: t.colors.textMuted }]}>{section.title}</Text>
+                ) : null}
+                {(section.rows ?? []).map((row: any) => (
+                  <TouchableOpacity
+                    key={row.id}
+                    onPress={() => { listPickerState.onSelect(row.id, row.title); setListPickerState(null); }}
+                    style={[styles.listPickerRow, { borderBottomColor: t.colors.border }]}
+                  >
+                    <Text style={[styles.listPickerRowTitle, { color: t.colors.text }]}>{row.title}</Text>
+                    {row.description ? <Text style={[styles.listPickerRowDesc, { color: t.colors.textMuted }]}>{row.description}</Text> : null}
+                  </TouchableOpacity>
+                ))}
+              </View>
+            )}
+          />
+        </View>
+      )}
+
+      <Text style={[styles.poweredBy, { color: t.colors.textMuted }]}>
+        {POWERED_BY_TEXT}
+      </Text>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  center: { alignItems: "center", justifyContent: "center" },
+  dateSep: { alignItems: "center", paddingVertical: 10 },
+  dateSepText: { fontSize: 11, fontWeight: "600", letterSpacing: 0.5 },
+  poweredBy: { textAlign: "center", fontSize: 11, paddingVertical: 8 },
+  listPicker: { position: "absolute", inset: 0, top: 0, left: 0, right: 0, bottom: 0, zIndex: 20 },
+  listPickerHeader: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: StyleSheet.hairlineWidth },
+  listPickerTitle: { fontSize: 14, fontWeight: "600" },
+  listPickerSectionTitle: { fontSize: 11, fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.5, paddingHorizontal: 16, paddingTop: 12, paddingBottom: 4 },
+  listPickerRow: { paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: StyleSheet.hairlineWidth },
+  listPickerRowTitle: { fontSize: 14, fontWeight: "500" },
+  listPickerRowDesc: { fontSize: 12, marginTop: 2 },
+});