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

package/src/ui/components/ConversationHeader.tsx

@@ -0,0 +1,202 @@
+import React from "react";
+import {
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useLiveChatContext } from "../../provider/LiveChatContext";
+import { getUserPresenceStatus } from "../../core/visitor-params";
+import { AssigneeAvatar } from "./AssigneeAvatar";
+import { ChevronLeftIcon, CloseIcon } from "../icons";
+
+export type ConversationHeaderProps = {
+  /** Loaded conversation from API; `null` = new chat or still loading. */
+  conversation: any | null;
+  /** True while the conversation is being fetched (id known, data pending). */
+  isLoading?: boolean;
+  onBack?: () => void;
+  onClose?: () => void;
+};
+
+function SkeletonBar({ width, height }: { width: number; height: number }) {
+  const { theme: t } = useLiveChatContext();
+  return (
+    <View
+      style={{
+        width,
+        height,
+        borderRadius: height / 2,
+        backgroundColor: t.colors.border,
+        opacity: 0.4,
+      }}
+    />
+  );
+}
+
+export function ConversationHeader({
+  conversation,
+  isLoading = false,
+  onBack,
+  onClose,
+}: ConversationHeaderProps) {
+  const { theme: t, widgetName, widgetConfig } = useLiveChatContext();
+  const headerBg = t.colors.headerBackground;
+  const headerTxt = t.colors.headerText;
+
+  const settings = widgetConfig?.widgetSettings ?? {};
+  const brandLogoUrl = settings?.brandLogoUrl ?? null;
+
+  const conv = conversation?.conversation ?? conversation;
+  const assigneeType = conv?.assigneeType ?? null;
+  const userBlock = assigneeType === "user" ? conv?.userId : null;
+  const botBlock = assigneeType === "bot" ? conv?.botId : null;
+
+  const title = !conv
+    ? widgetName
+    : assigneeType === "ai"
+    ? conv?.aiName ?? "AI Assistant"
+    : assigneeType === "user"
+    ? conv?.assigneeName ?? userBlock?.name ?? widgetName
+    : assigneeType === "bot"
+    ? conv?.botName ?? botBlock?.name ?? widgetName
+    : widgetName;
+
+  const userPresence = getUserPresenceStatus(userBlock);
+  const presenceStatus: "active" | "away" | null =
+    assigneeType === "user" && userPresence ? userPresence : null;
+
+  const presenceLabel =
+    presenceStatus === "active"
+      ? "Active"
+      : presenceStatus === "away"
+      ? "Away"
+      : null;
+
+  const roleSubtitle =
+    conv && assigneeType === "user"
+      ? conv?.assigneeRole ?? userBlock?.role ?? null
+      : null;
+
+  const subtitle = presenceLabel ?? roleSubtitle ?? (conv?.status === "resolved" ? "Resolved" : null);
+
+  const avatarUrl =
+    conv?.assigneeAvatarUrl ??
+    userBlock?.avatarUrl ??
+    botBlock?.avatarUrl ??
+    null;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: headerBg, borderBottomColor: t.colors.border },
+      ]}
+    >
+      {onBack ? (
+        <TouchableOpacity
+          onPress={onBack}
+          style={styles.iconBtn}
+          accessibilityLabel="Go back"
+        >
+          <ChevronLeftIcon size={22} color={headerTxt} />
+        </TouchableOpacity>
+      ) : (
+        <View style={styles.iconBtn} />
+      )}
+
+      <View style={styles.center}>
+        {isLoading ? (
+          <View style={[styles.skeletonAvatar, { backgroundColor: t.colors.border }]} />
+        ) : (
+          <AssigneeAvatar
+            assigneeType={assigneeType}
+            name={title}
+            avatarUrl={avatarUrl}
+            brandLogoUrl={brandLogoUrl}
+            size={36}
+            showPresenceDot={assigneeType === "user"}
+            presenceStatus={presenceStatus}
+          />
+        )}
+
+        <View style={styles.titleBlock}>
+          {isLoading ? (
+            <>
+              <SkeletonBar width={120} height={12} />
+              <View style={{ marginTop: 5 }}>
+                <SkeletonBar width={80} height={9} />
+              </View>
+            </>
+          ) : (
+            <>
+              <Text
+                style={[styles.title, { color: headerTxt, fontSize: t.fontSizes.md }]}
+                numberOfLines={1}
+              >
+                {title}
+              </Text>
+              {subtitle ? (
+                <Text
+                  style={[
+                    styles.subtitle,
+                    {
+                      color:
+                        presenceStatus === "active"
+                          ? t.colors.presenceActive
+                          : t.colors.textMuted,
+                      fontSize: t.fontSizes.xs,
+                    },
+                  ]}
+                  numberOfLines={1}
+                >
+                  {subtitle}
+                </Text>
+              ) : null}
+            </>
+          )}
+        </View>
+      </View>
+
+      {onClose ? (
+        <TouchableOpacity
+          onPress={onClose}
+          style={styles.iconBtn}
+          accessibilityLabel="Close chat"
+        >
+          <CloseIcon size={18} color={headerTxt} />
+        </TouchableOpacity>
+      ) : (
+        <View style={styles.iconBtn} />
+      )}
+    </View>
+  );
+}
+
+const PT = Platform.OS === "ios" ? (StatusBar.currentHeight ?? 0) : 0;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingTop: PT + 10,
+    paddingBottom: 10,
+    paddingHorizontal: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  iconBtn: { width: 44, alignItems: "center", justifyContent: "center" },
+  center: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 4,
+  },
+  titleBlock: { flex: 1, marginLeft: 8 },
+  title: { fontWeight: "600" },
+  subtitle: { marginTop: 2 },
+  backArrow: { fontSize: 22, fontWeight: "500" },
+  closeIcon: { fontSize: 26, lineHeight: 28 },
+  skeletonAvatar: { width: 36, height: 36, borderRadius: 10, opacity: 0.2 },
+});

package/src/ui/components/ConversationListScreen.tsx

@@ -0,0 +1,454 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  ActivityIndicator,
+  FlatList,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useLiveChatContext } from "../../provider/LiveChatContext";
+import { conversationApi } from "../../api/conversation-api";
+import { AssigneeAvatar } from "./AssigneeAvatar";
+import type { AssigneeType } from "./AssigneeAvatar";
+import { SendPlaneIcon, ChevronLeftIcon, CloseIcon } from "../icons";
+import { POWERED_BY_TEXT, getBrandColor, contrastingTextOnBrand } from "../theme";
+
+// ── format date — mirrors format-list-message-date.ts ────────────────────────
+
+export function formatListMessageDate(
+  input: string | number | Date | null | undefined
+): string {
+  if (input == null || input === "") return "";
+  const t = typeof input === "number" ? input : new Date(input).getTime();
+  if (!Number.isFinite(t)) return "";
+  const now = Date.now();
+  const dSec = (now - t) / 1000;
+  if (dSec < 0) return "now";
+  if (dSec < 60) return `${Math.max(0, Math.floor(dSec))}s`;
+  if (dSec < 3600) return `${Math.floor(dSec / 60)}m`;
+  if (dSec < 86400) return `${Math.floor(dSec / 3600)}h`;
+  if (dSec < 86400 * 7) return `${Math.floor(dSec / 86400)}d`;
+  if (dSec < 86400 * 30) return `${Math.floor(dSec / (86400 * 7))}w`;
+  try {
+    return new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" }).format(new Date(t));
+  } catch {
+    return "";
+  }
+}
+
+// ── message preview — mirrors chat-list-card-message-preview.tsx ─────────────
+
+function MessagePreview({ message }: { message: any }) {
+  const { theme: t } = useLiveChatContext();
+  if (message?.channelType === "livechat" && message?.livechat) {
+    const lt = message.livechat;
+    if (lt.type === "text") return <Text style={{ color: t.colors.textMuted }} numberOfLines={1}>{lt?.text?.body ?? ""}</Text>;
+    if (lt.type === "image") return <Text style={{ color: t.colors.textMuted }}>📷 Image</Text>;
+    if (lt.type === "video") return <Text style={{ color: t.colors.textMuted }}>▶ Video</Text>;
+    if (lt.type === "audio") return <Text style={{ color: t.colors.textMuted }}>🎵 Audio</Text>;
+    if (lt.type === "document") return <Text style={{ color: t.colors.textMuted }} numberOfLines={1}>📄 {message?.fileName || lt?.document?.filename || "Document"}</Text>;
+    if (lt.type === "interactive") {
+      const body = lt.interactive?.body?.text ?? lt.interactive?.button_reply?.title ?? lt.interactive?.list_reply?.title ?? null;
+      return <Text style={{ color: t.colors.textMuted }} numberOfLines={1}>{body ?? "[Interactive]"}</Text>;
+    }
+  }
+  if (message?.text?.body) return <Text style={{ color: t.colors.textMuted }} numberOfLines={1}>{message.text.body}</Text>;
+  return <Text style={{ color: t.colors.textMuted, opacity: 0.7 }}>Message</Text>;
+}
+
+// ── conversation card — mirrors chat-list-card.tsx ────────────────────────────
+
+function resolveListTitle(conversation: any, widgetName: string): string {
+  const type = conversation?.assigneeType;
+  const userBlock = type === "user" ? conversation?.userId : null;
+  const botBlock = type === "bot" ? conversation?.botId : null;
+  if (type === "ai") return conversation?.aiName ?? "AI Assistant";
+  if (type === "user") return conversation?.assigneeName ?? userBlock?.name ?? widgetName;
+  if (type === "bot") return conversation?.botName ?? botBlock?.name ?? widgetName;
+  return widgetName;
+}
+
+function ConversationCard({
+  item,
+  onOpen,
+  onMarkRead,
+}: {
+  item: any;
+  onOpen: (conv: any) => void;
+  onMarkRead: (conv: any) => void;
+}) {
+  const { theme: t, widgetName, widgetConfig } = useLiveChatContext();
+  const brandLogoUrl = widgetConfig?.widgetSettings?.brandLogoUrl ?? null;
+
+  const assigneeType: AssigneeType = item?.assigneeType ?? null;
+  const userBlock = assigneeType === "user" ? item?.userId : null;
+  const botBlock = assigneeType === "bot" ? item?.botId : null;
+  const avatarUrl = item?.assigneeAvatarUrl ?? userBlock?.avatarUrl ?? botBlock?.avatarUrl ?? null;
+  const presenceStatus: "active" | "away" | null =
+    userBlock?.presence?.status === "active" ? "active"
+    : userBlock?.presence?.status === "away" ? "away" : null;
+
+  const title = resolveListTitle(item, widgetName);
+  const hasUnread = !!(item?.livechat?.visitorUnreadCount);
+  const previewMessage = item?.latestMessageId;
+  const timeLabel = formatListMessageDate(previewMessage?.createdAt ?? item?.updatedAt);
+  const senderPrefix = previewMessage?.senderType === "contact" ? "You: " : null;
+
+  return (
+    <TouchableOpacity
+      onPress={() => { onMarkRead(item); onOpen(item); }}
+      activeOpacity={0.7}
+      style={[styles.card, { borderBottomColor: t.colors.border, backgroundColor: t.colors.surface }]}
+    >
+      <AssigneeAvatar
+        assigneeType={assigneeType}
+        name={title}
+        avatarUrl={avatarUrl}
+        brandLogoUrl={brandLogoUrl}
+        size={44}
+        showPresenceDot={assigneeType === "user"}
+        presenceStatus={presenceStatus}
+      />
+      <View style={styles.cardContent}>
+        <View style={styles.cardTopRow}>
+          <Text
+            style={[styles.cardTitle, { color: t.colors.text, fontSize: t.fontSizes.md, fontWeight: hasUnread ? "700" : "600" }]}
+            numberOfLines={1}
+          >
+            {title}
+          </Text>
+          {timeLabel ? (
+            <Text style={[styles.cardDate, { color: t.colors.textMuted, fontSize: t.fontSizes.xs }]}>
+              {timeLabel}
+            </Text>
+          ) : null}
+        </View>
+        <View style={styles.cardBottomRow}>
+          <View style={styles.cardPreviewRow}>
+            {senderPrefix ? (
+              <Text style={{ color: t.colors.textMuted, fontSize: t.fontSizes.sm, fontStyle: "italic" }}>{senderPrefix}</Text>
+            ) : null}
+            {previewMessage ? (
+              <View style={styles.cardPreviewFlex}>
+                <MessagePreview message={previewMessage} />
+              </View>
+            ) : (
+              <Text style={{ color: t.colors.textMuted, fontSize: t.fontSizes.sm }}>
+                {item?.status === "resolved" ? "Conversation closed" : "No messages yet"}
+              </Text>
+            )}
+          </View>
+          {hasUnread ? <View style={[styles.unreadDot, { backgroundColor: t.colors.unreadBadge }]} /> : null}
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+// ── screen ────────────────────────────────────────────────────────────────────
+
+const PAGE_SIZE = 20;
+
+export type ConversationListScreenProps = {
+  onSelectConversation: (conversationId: string, conversation: any) => void;
+  onNewConversation?: () => void;
+  onBack?: () => void;
+  onClose?: () => void;
+};
+
+export function ConversationListScreen({
+  onSelectConversation,
+  onNewConversation,
+  onBack,
+  onClose,
+}: ConversationListScreenProps) {
+  const { theme: t, visitorQueryParams, wsClient, setTotalUnread, widgetConfig } = useLiveChatContext();
+  const settings = widgetConfig?.widgetSettings ?? {};
+  const brandColor = getBrandColor(settings);
+  const contrastText = contrastingTextOnBrand(brandColor);
+
+  const [list, setList] = useState<any[] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hasNextPage, setHasNextPage] = useState(false);
+  const [retryKey, setRetryKey] = useState(0);
+
+  const lastPageRef = useRef(0);
+  const inFlightRef = useRef(false);
+
+  // ── initial load ────────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!visitorQueryParams) {
+      setList(null); setLoading(false); setError(null); setHasNextPage(false);
+      return;
+    }
+    const ac = new AbortController();
+    setList(null); setLoading(true); setError(null); setHasNextPage(false);
+    lastPageRef.current = 0; inFlightRef.current = false;
+
+    (async () => {
+      try {
+        const raw = await conversationApi.getConversations({
+          params: { ...visitorQueryParams, page: 1, limit: PAGE_SIZE },
+          signal: ac.signal,
+        });
+        if (ac.signal.aborted) return;
+        const body = raw?.data ?? raw;
+        const rows: any[] = Array.isArray(body) ? body
+          : Array.isArray(body?.conversations) ? body.conversations
+          : Array.isArray(body?.data) ? body.data : [];
+        const pagination = body?.pagination ?? {};
+        setList(rows);
+        setHasNextPage(!!pagination.hasNextPage);
+        lastPageRef.current = 1;
+      } catch (e: any) {
+        if (ac.signal.aborted || e?.name === "AbortError") return;
+        setError("Couldn't load conversations. Try again.");
+        setList(null);
+      } finally {
+        if (!ac.signal.aborted) setLoading(false);
+      }
+    })();
+    return () => ac.abort();
+  }, [visitorQueryParams, retryKey]);
+
+  // ── load more ───────────────────────────────────────────────────────────
+  const loadMore = useCallback(async () => {
+    if (!visitorQueryParams || !hasNextPage || inFlightRef.current || loading) return;
+    const nextPage = lastPageRef.current + 1;
+    inFlightRef.current = true;
+    setLoadingMore(true);
+    try {
+      const raw = await conversationApi.getConversations({
+        params: { ...visitorQueryParams, page: nextPage, limit: PAGE_SIZE },
+      });
+      const body = raw?.data ?? raw;
+      const rows: any[] = Array.isArray(body) ? body
+        : Array.isArray(body?.conversations) ? body.conversations
+        : Array.isArray(body?.data) ? body.data : [];
+      const pagination = body?.pagination ?? {};
+      setList((prev) => {
+        if (!prev) return rows;
+        const seen = new Set(prev.map((c: any) => String(c?._id ?? "")));
+        const merged = [...prev];
+        for (const c of rows) {
+          const id = String(c?._id ?? "");
+          if (!id || seen.has(id)) continue;
+          seen.add(id); merged.push(c);
+        }
+        return merged;
+      });
+      setHasNextPage(!!pagination.hasNextPage);
+      lastPageRef.current = nextPage;
+    } catch { /* ignore */ } finally {
+      inFlightRef.current = false;
+      setLoadingMore(false);
+    }
+  }, [visitorQueryParams, hasNextPage, loading]);
+
+  // ── WS handlers — mirrors web exactly ──────────────────────────────────
+  useEffect(() => {
+    if (!wsClient) return;
+
+    const handleNewMessage = (payload: any) => {
+      const data = payload?.data ?? payload;
+      const conv = data?.conversation;
+      const id = conv?._id;
+      if (!id) return;
+      const msg = data?.message;
+      setList((prev) => {
+        if (!prev) return prev;
+        const idx = prev.findIndex((c: any) => c?._id === id);
+        const updated = {
+          ...(idx > -1 ? prev[idx] : conv),
+          latestMessageId: msg,
+          latestMessageAt: conv?.latestMessageAt,
+          userUnreadCount: conv?.userUnreadCount,
+          livechat: { visitorUnreadCount: conv?.livechat?.visitorUnreadCount, ...conv?.livechat },
+          hasUnreadMessages: (conv?.livechat?.visitorUnreadCount ?? 0) > 0,
+        };
+        if (idx > -1) { const next = [...prev]; next[idx] = updated; return next; }
+        return [updated, ...prev];
+      });
+    };
+
+    const patchConv = (payload: any) => {
+      const data = payload?.data ?? payload;
+      const incoming = data?.conversation;
+      const id = incoming?._id;
+      if (!id) return;
+      setList((prev) => {
+        if (!prev) return prev;
+        const idx = prev.findIndex((c: any) => c?._id === id);
+        if (idx > -1) { const next = [...prev]; next[idx] = { ...next[idx], ...incoming }; return next; }
+        return [incoming, ...prev];
+      });
+    };
+
+    const u1 = wsClient.subscribe("new_livechat_message", handleNewMessage);
+    const u2 = wsClient.subscribe("conversation_intervened", patchConv);
+    const u3 = wsClient.subscribe("conversation_unassigned", patchConv);
+    const u4 = wsClient.subscribe("conversation_transferred", patchConv);
+    const u5 = wsClient.subscribe("conversation_resolved", patchConv);
+    return () => { u1(); u2(); u3(); u4(); u5(); };
+  }, [wsClient]);
+
+  // ── mark read ───────────────────────────────────────────────────────────
+  const handleMarkRead = useCallback((conv: any) => {
+    if (!visitorQueryParams) return;
+    const id = conv?._id;
+    if (!id) return;
+    // mirrors web: use visitorUnreadCount as the source of truth
+    const visitorUnread = Number(conv?.livechat?.visitorUnreadCount ?? 0);
+    const prevCount = visitorUnread > 0 ? visitorUnread : 0;
+    // optimistic clear — reset visitorUnreadCount so dot disappears immediately
+    setList((cur) => cur ? cur.map((c) => c?._id === id ? {
+      ...c,
+      hasUnreadMessages: false,
+      userUnreadCount: 0,
+      livechat: { ...c?.livechat, visitorUnreadCount: 0 },
+    } : c) : cur);
+    if (prevCount > 0) setTotalUnread((n) => Math.max(0, n - prevCount));
+    conversationApi.markMessageAsRead(id, { params: visitorQueryParams }).catch(() => {
+      // rollback on failure
+      setList((cur) => cur ? cur.map((c) => c?._id === id ? {
+        ...c,
+        hasUnreadMessages: conv.hasUnreadMessages,
+        userUnreadCount: conv.userUnreadCount,
+        livechat: { ...c?.livechat, visitorUnreadCount: visitorUnread },
+      } : c) : cur);
+      if (prevCount > 0) setTotalUnread((n) => n + prevCount);
+    });
+  }, [visitorQueryParams, setTotalUnread]);
+
+  const handleOpen = useCallback((conv: any) => {
+    const id = conv?._id;
+    if (id) onSelectConversation(String(id), conv);
+  }, [onSelectConversation]);
+
+  // ── render ──────────────────────────────────────────────────────────────
+  return (
+    <View style={[styles.flex, { backgroundColor: t.colors.background }]}>
+      {/* header */}
+      <View style={[styles.header, { backgroundColor: t.colors.headerBackground, borderBottomColor: t.colors.border }]}>
+        {onBack ? (
+          <TouchableOpacity onPress={onBack} style={styles.headerBtn} accessibilityLabel="Back">
+            <ChevronLeftIcon size={22} color={t.colors.headerText} />
+          </TouchableOpacity>
+        ) : <View style={styles.headerBtn} />}
+        <Text style={[styles.headerTitle, { color: t.colors.text }]}>Messages</Text>
+        {onClose ? (
+          <TouchableOpacity onPress={onClose} style={styles.headerBtn} accessibilityLabel="Close">
+            <CloseIcon size={18} color={t.colors.headerText} />
+          </TouchableOpacity>
+        ) : <View style={styles.headerBtn} />}
+      </View>
+
+      {/* list */}
+      {loading ? (
+        <View style={styles.center}>
+          <ActivityIndicator color={t.colors.brand} size="large" />
+        </View>
+      ) : error ? (
+        <View style={styles.center}>
+          <Text style={[styles.errorText, { color: t.colors.error }]}>{error}</Text>
+          <TouchableOpacity
+            onPress={() => { setError(null); setLoading(true); setRetryKey((k) => k + 1); }}
+            style={[styles.retryBtn, { backgroundColor: t.colors.brand }]}
+          >
+            <Text style={[styles.retryBtnText, { color: "#fff" }]}>Try again</Text>
+          </TouchableOpacity>
+        </View>
+      ) : (
+        <FlatList
+          data={list ?? []}
+          keyExtractor={(item) => String(item?._id ?? Math.random())}
+          renderItem={({ item }) => (
+            <ConversationCard item={item} onOpen={handleOpen} onMarkRead={handleMarkRead} />
+          )}
+          ListEmptyComponent={
+            <View style={styles.emptyContainer}>
+              <Text style={[styles.emptyText, { color: t.colors.textMuted, fontSize: t.fontSizes.md }]}>
+                No previous conversations yet.
+              </Text>
+            </View>
+          }
+          ListFooterComponent={loadingMore ? <ActivityIndicator color={t.colors.brand} style={{ margin: 16 }} /> : null}
+          onEndReached={hasNextPage ? loadMore : undefined}
+          onEndReachedThreshold={0.3}
+          contentContainerStyle={{ paddingBottom: 80 }}
+        />
+      )}
+
+      {/* send new message button — mirrors web's primary CTA */}
+      {onNewConversation ? (
+        <View style={styles.fabContainer}>
+          <TouchableOpacity
+            onPress={onNewConversation}
+            activeOpacity={0.85}
+            style={[styles.newMsgBtn, { backgroundColor: brandColor }]}
+            accessibilityLabel="Send us a message"
+          >
+            <Text style={[styles.newMsgBtnText, { color: contrastText }]}>Send us a message</Text>
+            <SendPlaneIcon size={18} color={contrastText} />
+          </TouchableOpacity>
+        </View>
+      ) : null}
+
+      <Text style={[styles.poweredBy, { color: t.colors.textMuted }]}>{POWERED_BY_TEXT}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  center: { flex: 1, alignItems: "center", justifyContent: "center" },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 10,
+    paddingHorizontal: 4,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  headerBtn: { width: 44, alignItems: "center", justifyContent: "center" },
+  headerBtnText: { fontSize: 22 },
+  headerTitle: { flex: 1, textAlign: "center", fontSize: 16, fontWeight: "700" },
+  card: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  cardContent: { flex: 1, marginLeft: 12 },
+  cardTopRow: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
+  cardBottomRow: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginTop: 3 },
+  cardTitle: {},
+  cardDate: {},
+  cardPreviewRow: { flex: 1, flexDirection: "row", alignItems: "center", marginRight: 8 },
+  cardPreviewFlex: { flex: 1 },
+  unreadDot: { width: 8, height: 8, borderRadius: 4, flexShrink: 0 },
+  emptyContainer: { flex: 1, alignItems: "center", justifyContent: "center", paddingTop: 80 },
+  emptyText: { textAlign: "center" },
+  errorText: { textAlign: "center", marginBottom: 16 },
+  retryBtn: { paddingHorizontal: 24, paddingVertical: 10, borderRadius: 20 },
+  retryBtnText: { fontWeight: "600" },
+  fabContainer: { position: "absolute", bottom: 28, left: 16, right: 16 },
+  newMsgBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+    borderRadius: 14,
+    elevation: 4,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.18,
+    shadowRadius: 6,
+  },
+  newMsgBtnText: { fontSize: 15, fontWeight: "600" },
+  poweredBy: { textAlign: "center", fontSize: 11, paddingVertical: 8 },
+});