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

package/src/ui/components/ConversationScreen.tsx

@@ -0,0 +1,362 @@
+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 } = 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 (renderList.length > 0) {
+      setTimeout(() => flatListRef.current?.scrollToEnd({ animated: true }), 100);
+    }
+  }, [renderList.length]);
+
+  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;
+        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;
+    }
+    const returnedId = await sendText(text, isNewConversation ? null : conversationId);
+    if (isNewConversation && returnedId) onConversationCreated?.(returnedId);
+  }, [conversationId, 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"}
+      keyboardVerticalOffset={0}
+    >
+      <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 },
+});

package/src/ui/components/HomeScreen.tsx

@@ -0,0 +1,278 @@
+import React, { useEffect, useState } from "react";
+import {
+  ActivityIndicator,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  type ViewStyle,
+} from "react-native";
+import { useLiveChatContext } from "../../provider/LiveChatContext";
+import { conversationApi } from "../../api/conversation-api";
+import { Avatar } from "./Avatar";
+import {
+  POWERED_BY_TEXT,
+  contrastingTextOnBrand,
+  getBrandColor,
+  getBrandLogoUrl,
+  getNotificationIconColor,
+  getWidgetDescription,
+  getWidgetTitle,
+  getWidgetName,
+} from "../theme";
+import { HistoryChatsIcon, SendPlaneIcon } from "../icons";
+
+let LinearGradient: any = null;
+try {
+  LinearGradient = require("react-native-linear-gradient").default;
+} catch {
+  LinearGradient = null;
+}
+
+function GradientBackground({
+  brandColor,
+  darkColor,
+  style,
+  children,
+}: {
+  brandColor: string;
+  darkColor: string;
+  style?: ViewStyle;
+  children?: React.ReactNode;
+}) {
+  if (LinearGradient) {
+    return (
+      <LinearGradient
+        colors={[brandColor, brandColor, darkColor]}
+        locations={[0, 0.3, 1]}
+        start={{ x: 0.5, y: 0 }}
+        end={{ x: 0.5, y: 1 }}
+        style={style}
+      >
+        {children}
+      </LinearGradient>
+    );
+  }
+  return (
+    <View style={[style, { backgroundColor: brandColor }]}>
+      <View
+        pointerEvents="none"
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: "30%",
+          bottom: 0,
+          backgroundColor: darkColor,
+        }}
+      />
+      {children}
+    </View>
+  );
+}
+
+export type HomeScreenProps = {
+  onStartConversation: () => void;
+  onOpenPreviousChats: () => void;
+};
+
+function pickCount(raw: any): number {
+  const body = raw?.data ?? raw;
+  const inner = body?.data ?? body;
+  const v = inner?.conversationCount ?? inner?.count ?? inner?.total ?? 0;
+  return typeof v === "number" ? v : parseInt(v, 10) || 0;
+}
+
+export function HomeScreen({
+  onStartConversation,
+  onOpenPreviousChats,
+}: HomeScreenProps) {
+  const {
+    theme: t,
+    widgetConfig,
+    totalUnread,
+    visitorQueryParams,
+    embedLoadState,
+  } = useLiveChatContext();
+
+  const [conversationCount, setConversationCount] = useState(0);
+
+  const settings = widgetConfig?.widgetSettings ?? {};
+  const title = getWidgetTitle(widgetConfig);
+  const widgetName = getWidgetName(widgetConfig);
+  const description = getWidgetDescription(settings);
+  const logoUrl = getBrandLogoUrl(settings);
+  const brandColor = getBrandColor(settings) || t.colors.brand;
+  const contrastText = contrastingTextOnBrand(brandColor);
+  const notificationColor = getNotificationIconColor(settings);
+  const showUnreadDot = totalUnread > 0;
+
+  useEffect(() => {
+    if (!visitorQueryParams) return;
+    let cancelled = false;
+    conversationApi
+      .getConversationCount(visitorQueryParams)
+      .then((raw) => {
+        if (!cancelled) setConversationCount(pickCount(raw));
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [visitorQueryParams]);
+
+  // Dark color anchoring the bottom of the gradient — matches web widget
+  const darkColor = t.appearance === "dark" ? "#09090b" : "#111827";
+  const isLoading = embedLoadState === "loading";
+
+  return (
+    <GradientBackground
+      brandColor={brandColor}
+      darkColor={darkColor}
+      style={styles.flex}
+    >
+      {/* top — branding */}
+      <View style={styles.header}>
+        {logoUrl ? (
+          <Image
+            source={{ uri: logoUrl }}
+            style={styles.brandLogo}
+            resizeMode="cover"
+          />
+        ) : (
+          <Avatar name={widgetName} size={44} />
+        )}
+        <Text style={[styles.headerTitle, { color: contrastText }]} numberOfLines={2}>
+          {title}
+        </Text>
+        <Text
+          style={[styles.headerSubtitle, { color: contrastText, opacity: 0.82 }]}
+          numberOfLines={3}
+        >
+          {description}
+        </Text>
+      </View>
+
+      {/* bottom — actions */}
+      <View style={styles.bottom}>
+        <View style={styles.actions}>
+          {conversationCount > 0 ? (
+            <TouchableOpacity
+              onPress={onOpenPreviousChats}
+              activeOpacity={0.7}
+              style={[
+                styles.prevRow,
+                {
+                  backgroundColor: "rgba(0,0,0,0.35)",
+                  borderColor: "rgba(255,255,255,0.1)",
+                },
+              ]}
+              accessibilityLabel={`Previous chats${
+                showUnreadDot ? ", unread messages" : ""
+              }${
+                conversationCount > 1
+                  ? `, ${conversationCount} conversations`
+                  : ""
+              }`}
+            >
+              <View style={styles.prevRowLeft}>
+                <HistoryChatsIcon size={20} color="#ffffff" />
+                <Text style={[styles.prevRowLabel, { color: "#ffffff" }]}>
+                  Previous chats
+                  {conversationCount > 1 ? (
+                    <Text
+                      style={{ fontWeight: "400", color: "rgba(255,255,255,0.7)" }}
+                    >
+                      {" "}
+                      ({conversationCount})
+                    </Text>
+                  ) : null}
+                </Text>
+              </View>
+              {showUnreadDot ? (
+                <View
+                  style={[
+                    styles.unreadDot,
+                    { backgroundColor: notificationColor },
+                  ]}
+                />
+              ) : null}
+            </TouchableOpacity>
+          ) : null}
+
+          {isLoading ? (
+            <ActivityIndicator color="#ffffff" style={{ marginVertical: 8 }} />
+          ) : null}
+
+          <TouchableOpacity
+            onPress={onStartConversation}
+            activeOpacity={0.85}
+            style={[styles.startBtn, { backgroundColor: "#ffffff" }]}
+            accessibilityLabel="Send us a message"
+          >
+            <Text style={[styles.startBtnText, { color: "#111827" }]}>
+              Send us a message
+            </Text>
+            <SendPlaneIcon size={18} color={brandColor} />
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      <Text style={[styles.poweredBy, { color: "rgba(255,255,255,0.7)" }]}>
+        {POWERED_BY_TEXT}
+      </Text>
+    </GradientBackground>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  header: {
+    flex: 0.3,
+    paddingHorizontal: 20,
+    paddingTop: 52,
+    paddingBottom: 32,
+    gap: 12,
+    justifyContent: "flex-start",
+  },
+  brandLogo: { width: 44, height: 44, borderRadius: 22 },
+  headerTitle: {
+    fontSize: 28,
+    fontWeight: "700",
+    lineHeight: 34,
+    marginTop: 16,
+  },
+  headerSubtitle: {
+    fontSize: 15,
+    lineHeight: 22,
+    marginTop: 8,
+  },
+  bottom: {
+    flex: 0.7,
+    justifyContent: "flex-end",
+  },
+  actions: { paddingHorizontal: 16, gap: 12, paddingBottom: 8 },
+  prevRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  prevRowLeft: { flexDirection: "row", alignItems: "center", gap: 12, flex: 1 },
+  prevRowLabel: { fontSize: 15, fontWeight: "600" },
+  unreadDot: { width: 10, height: 10, borderRadius: 5 },
+  startBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+    borderRadius: 12,
+  },
+  startBtnText: { fontSize: 15, fontWeight: "600" },
+  poweredBy: { textAlign: "center", fontSize: 11, paddingVertical: 8 },
+});