@adminide-stack/yantra-mobile 12.0.28-alpha.66 → 12.0.28-alpha.68

package/lib/screens/Home/components/ChatHistoryLanding.js

@@ -1,265 +1,487 @@
-import {jsxs,jsx}from'react/jsx-runtime';import React from'react';import {useWindowDimensions,View,StyleSheet,ScrollView,Pressable}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Text}from'@admin-layout/gluestack-ui-mobile';import {RoomType}from'common';import {useApolloClient}from'@apollo/client/index.js';import {AI_ASSISTANT_CHANNELS_QUERY_VARS}from'../../../hooks/useChatApi.js';import {useGetChannelsByUserWithLastMessageQuery,MessagesDocument}from'common/graphql';import {YantraBrandLoader}from'../../../components/YantraBrandLoader.js';import {mobileTokens}from'../../../theme/mobileTokens.js';const MESSAGES_PER_CHANNEL = 200;
-function truncatePreview(text, max = 64) {
+import {jsx,jsxs}from'react/jsx-runtime';import React from'react';import {useWindowDimensions,useColorScheme,View,StyleSheet,Pressable,ActivityIndicator,SectionList,RefreshControl}from'react-native';import {Feather,MaterialCommunityIcons}from'@expo/vector-icons';import {Text}from'@admin-layout/gluestack-ui-mobile';import {useFocusEffect}from'@react-navigation/native';import {useChatHistorySessionsFromChannels,HISTORY_PAGE_SIZE,getHistoryChannelsQueryVariables,chatHistorySessionsFromChannels}from'../../../hooks/useChatApi.js';import {useApolloClient}from'@apollo/client/index.js';import {GetChannelsByUserWithLastMessageDocument}from'common/graphql';import {usePrerequisiteIds}from'../../../hooks/usePrerequisiteIds.js';import ThinkingIndicator from'../../../components/ThinkingIndicator.js';import {mobileTokens}from'../../../theme/mobileTokens.js';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function truncate(text, max = 96) {
   const cleaned = text.replace(/\s+/g, " ").trim();
   if (cleaned.length <= max) return cleaned;
   return `${cleaned.slice(0, max).trim()}...`;
 }
-function stripModelCostHeader(content) {
-  const normalized = content.replace(/\r\n/g, "\n");
-  return normalized.replace(/^\s*(?:[^\w\n]+\s*)?[a-z0-9][a-z0-9._-]*\s*\(\s*\$[\d.]+\s*\/\s*MTok\s+in\s*\)\s*\n+/i, "");
+const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+function relativeTime(ts, now) {
+  var _a;
+  const deltaMs = now - ts;
+  if (deltaMs < 6e4) return "now";
+  const minutes = Math.floor(deltaMs / 6e4);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) {
+    const d2 = new Date(ts);
+    return (_a = WEEKDAYS[d2.getDay()]) != null ? _a : `${days}d`;
+  }
+  const d = new Date(ts);
+  const sameYear = d.getFullYear() === new Date(now).getFullYear();
+  const m = d.getMonth() + 1;
+  const day = d.getDate();
+  return sameYear ? `${m}/${day}` : `${m}/${day}/${String(d.getFullYear()).slice(2)}`;
 }
-function getPostRole(post) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  return (_h = (_g = (_e = (_b = (_a = post == null ? void 0 : post.propsConfiguration) == null ? void 0 : _a.content) == null ? void 0 : _b.role) != null ? _e : (_d = (_c = post == null ? void 0 : post.propsConfiguration) == null ? void 0 : _c.contents) == null ? void 0 : _d.role) != null ? _g : (_f = post == null ? void 0 : post.props) == null ? void 0 : _f.role) != null ? _h : void 0;
+function bucketFor(ts, now) {
+  const a = new Date(ts);
+  const b = new Date(now);
+  const startOf = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+  const today = startOf(b);
+  const yesterday = today - 24 * 60 * 60 * 1e3;
+  const weekAgo = today - 7 * 24 * 60 * 60 * 1e3;
+  const tsDay = startOf(a);
+  if (tsDay >= today) return "today";
+  if (tsDay >= yesterday) return "yesterday";
+  if (tsDay >= weekAgo) return "week";
+  return "earlier";
 }
-function sortPostsByTimeAsc(posts) {
-  return [...posts].sort((a, b) => {
-    var _a, _b, _c, _d;
-    const ta = new Date((_b = (_a = a == null ? void 0 : a.createdAt) != null ? _a : a == null ? void 0 : a.updatedAt) != null ? _b : 0).getTime();
-    const tb = new Date((_d = (_c = b == null ? void 0 : b.createdAt) != null ? _c : b == null ? void 0 : b.updatedAt) != null ? _d : 0).getTime();
-    return ta - tb;
+function buildSections(rows, now) {
+  const buckets = {
+    today: [],
+    yesterday: [],
+    week: [],
+    earlier: []
+  };
+  for (const row of rows) {
+    buckets[bucketFor(row.sortAt, now)].push(row);
+  }
+  const out = [];
+  if (buckets.today.length) out.push({
+    key: "today",
+    title: "Today",
+    data: buckets.today
+  });
+  if (buckets.yesterday.length) out.push({
+    key: "yesterday",
+    title: "Yesterday",
+    data: buckets.yesterday
+  });
+  if (buckets.week.length) out.push({
+    key: "week",
+    title: "This week",
+    data: buckets.week
   });
+  if (buckets.earlier.length) out.push({
+    key: "earlier",
+    title: "Earlier",
+    data: buckets.earlier
+  });
+  return out;
 }
-function buildSessionsFromMessages(posts) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
-  const sortedAsc = sortPostsByTimeAsc(posts);
-  const rows = [];
-  const hasExplicitUserRole = sortedAsc.some((post) => String(getPostRole(post)).toUpperCase() === "USER");
-  for (let i = 0; i < sortedAsc.length; i++) {
-    const current = sortedAsc[i];
-    const role = getPostRole(current);
-    if (hasExplicitUserRole && String(role).toUpperCase() !== "USER") continue;
-    const titleRaw = stripModelCostHeader(String((_a = current == null ? void 0 : current.message) != null ? _a : "").trim()) || "New Chat";
-    let previewRaw = titleRaw;
-    for (let j = i + 1; j < sortedAsc.length; j++) {
-      const next = sortedAsc[j];
-      const nextRole = getPostRole(next);
-      if (String(nextRole).toUpperCase() === "ASSISTANT") {
-        previewRaw = stripModelCostHeader(String((_b = next == null ? void 0 : next.message) != null ? _b : "").trim()) || titleRaw;
-        break;
-      }
-    }
-    const sessionChannelId = String((_e = (_d = (_c = current == null ? void 0 : current.channel) == null ? void 0 : _c.id) != null ? _d : current == null ? void 0 : current.channel) != null ? _e : "");
-    if (!sessionChannelId) continue;
-    rows.push({
-      id: String((_f = current == null ? void 0 : current.id) != null ? _f : `${sessionChannelId}-${i}`),
-      channelId: sessionChannelId,
-      title: truncatePreview(titleRaw, 44),
-      preview: truncatePreview(previewRaw, 72),
-      sortAt: new Date((_h = (_g = current == null ? void 0 : current.updatedAt) != null ? _g : current == null ? void 0 : current.createdAt) != null ? _h : 0).getTime()
-    });
-  }
-  if (rows.length > 0) {
-    return rows.reverse();
-  }
-  const fallbackRows = [];
-  const seenChannelIds = /* @__PURE__ */ new Set();
-  for (let i = sortedAsc.length - 1; i >= 0; i--) {
-    const post = sortedAsc[i];
-    const sessionChannelId = String((_k = (_j = (_i = post == null ? void 0 : post.channel) == null ? void 0 : _i.id) != null ? _j : post == null ? void 0 : post.channel) != null ? _k : "");
-    if (!sessionChannelId || seenChannelIds.has(sessionChannelId)) continue;
-    seenChannelIds.add(sessionChannelId);
-    const text = stripModelCostHeader(String((_l = post == null ? void 0 : post.message) != null ? _l : "").trim()) || "New Chat";
-    fallbackRows.push({
-      id: String((_m = post == null ? void 0 : post.id) != null ? _m : `${sessionChannelId}-${i}`),
-      channelId: sessionChannelId,
-      title: truncatePreview(text, 44),
-      preview: truncatePreview(text, 72),
-      sortAt: new Date((_o = (_n = post == null ? void 0 : post.updatedAt) != null ? _n : post == null ? void 0 : post.createdAt) != null ? _o : 0).getTime()
-    });
+function buildTheme(isDark) {
+  if (isDark) {
+    return {
+      bg: "#0b1220",
+      surface: mobileTokens.color.surface,
+      title: "#f1f5f9",
+      preview: "#94a3b8",
+      meta: "#9aa0b8",
+      muted: "#7a809a",
+      divider: "rgba(148, 163, 184, 0.12)",
+      sectionLabel: "#cbd5e1",
+      tileChatBg: "rgba(148, 163, 184, 0.16)",
+      tileChatIcon: "#e2e8f0",
+      tileSearchBg: "rgba(251, 191, 36, 0.16)",
+      tileSearchIcon: "#fde68a",
+      pressed: "rgba(148, 163, 184, 0.10)",
+      loadMoreText: "#e2e8f0",
+      loadMoreBorder: "rgba(148, 163, 184, 0.28)",
+      loadMoreBg: "rgba(148, 163, 184, 0.10)",
+      refreshTint: "#cbd5e1",
+      endDot: "#94a3b8",
+      emptyMarkBg: "rgba(148, 163, 184, 0.18)",
+      emptyMarkIcon: "#b4bccc"
+    };
   }
-  return fallbackRows;
+  return {
+    bg: mobileTokens.color.bg,
+    surface: mobileTokens.color.surface,
+    title: "#0b1424",
+    preview: "#525a73",
+    meta: "#7b8197",
+    muted: "#94a3b8",
+    divider: "rgba(15, 23, 42, 0.06)",
+    sectionLabel: "#374151",
+    tileChatBg: "rgba(15, 23, 42, 0.06)",
+    tileChatIcon: "#1f2937",
+    tileSearchBg: "rgba(217, 119, 6, 0.10)",
+    tileSearchIcon: "#b45309",
+    pressed: "rgba(15, 23, 42, 0.05)",
+    loadMoreText: "#1f2937",
+    loadMoreBorder: "rgba(15, 23, 42, 0.15)",
+    loadMoreBg: "rgba(15, 23, 42, 0.04)",
+    refreshTint: "#374151",
+    endDot: "#9ca3af",
+    emptyMarkBg: "rgba(15, 23, 42, 0.07)",
+    emptyMarkIcon: "#6b7280"
+  };
+}
+function ModeTile({
+  mode,
+  theme
+}) {
+  const isSearch = mode === "deep-search";
+  return /* @__PURE__ */ jsx(View, { style: [styles.tile, {
+    backgroundColor: isSearch ? theme.tileSearchBg : theme.tileChatBg
+  }], children: isSearch ? /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "lightning-bolt-outline", size: 18, color: theme.tileSearchIcon }) : /* @__PURE__ */ jsx(Feather, { name: "message-circle", size: 18, color: theme.tileChatIcon }) });
 }
 function ChatHistoryRow({
   session,
-  onSelectSession
+  onSelectSession,
+  theme,
+  timeLabel
 }) {
-  return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onSelectSession(session.channelId), style: ({
+  const titleColor = session.isPlaceholder ? theme.preview : theme.title;
+  const titleStyle = [styles.rowTitle, {
+    color: titleColor
+  }, session.isPlaceholder ? styles.rowTitlePlaceholder : null];
+  return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onSelectSession(session.channelId, session.mode), style: ({
     pressed
-  }) => [styles.item, pressed && styles.itemPressed], children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.itemTop, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.rowTitleWrap, children: [
-        /* @__PURE__ */ jsx(View, { style: styles.rowIconWrap, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "message-text-outline", size: 15, color: mobileTokens.color.primary }) }),
-        /* @__PURE__ */ jsx(Text, { style: styles.titleText, fontSize: "$lg", color: mobileTokens.color.text, fontWeight: "$semibold", numberOfLines: 1, children: session.title })
+  }) => [styles.row, pressed && {
+    backgroundColor: theme.pressed
+  }], accessibilityRole: "button", accessibilityLabel: session.previewForRender ? `Open conversation: ${session.titleForRender}. ${session.previewForRender}. ${timeLabel}` : `Open conversation: ${session.titleForRender}, ${timeLabel}`, children: [
+    /* @__PURE__ */ jsx(ModeTile, { mode: session.mode, theme }),
+    /* @__PURE__ */ jsxs(View, { style: styles.rowBody, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.rowHeader, children: [
+        /* @__PURE__ */ jsx(Text, { style: titleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: session.titleForRender }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.rowDate, {
+          color: theme.meta
+        }], numberOfLines: 1, children: timeLabel })
       ] }),
-      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-right", size: 20, color: mobileTokens.color.textMuted })
-    ] }),
-    /* @__PURE__ */ jsx(Text, { fontSize: "$sm", color: mobileTokens.color.textMuted, numberOfLines: 2, children: session.preview })
-  ] }, session.id);
+      session.previewForRender ? /* @__PURE__ */ jsx(Text, { style: [styles.rowPreview, {
+        color: theme.preview
+      }], numberOfLines: 1, ellipsizeMode: "tail", children: session.previewForRender }) : null
+    ] })
+  ] });
 }
 function ChatHistoryLanding({
-  onSelectSession,
-  onCompose
+  onSelectSession
 }) {
   const {
     width: screenWidth
   } = useWindowDimensions();
-  const client = useApolloClient();
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const theme = React.useMemo(() => buildTheme(isDark), [isDark]);
+  const apollo = useApolloClient();
   const {
-    data: channelsData,
-    loading: channelsLoading
-  } = useGetChannelsByUserWithLastMessageQuery({
-    variables: AI_ASSISTANT_CHANNELS_QUERY_VARS,
-    fetchPolicy: "cache-and-network",
-    errorPolicy: "all",
-    notifyOnNetworkStatusChange: true,
-    returnPartialData: true,
-    context: {
-      cacheKey: "channels-list"
-    }
+    orgName,
+    loading: idsLoading
+  } = usePrerequisiteIds();
+  const {
+    sessions: liveSessions,
+    sessionsLoaded,
+    refetch,
+    sourceChannelCount
+  } = useChatHistorySessionsFromChannels(orgName, {
+    skip: !orgName
   });
-  const [sessions, setSessions] = React.useState([]);
-  const [threadsLoading, setThreadsLoading] = React.useState(false);
+  const [nowTs, setNowTs] = React.useState(() => Date.now());
+  const [refreshing, setRefreshing] = React.useState(false);
+  const [olderSessions, setOlderSessions] = React.useState([]);
+  const [hasMore, setHasMore] = React.useState(false);
+  const [loadingMore, setLoadingMore] = React.useState(false);
   React.useEffect(() => {
-    let mounted = true;
-    const load = async () => {
-      var _a;
-      const channels = ((_a = channelsData == null ? void 0 : channelsData.channelsByUser) != null ? _a : []).filter((c) => Boolean(c == null ? void 0 : c.id) && (!(c == null ? void 0 : c.type) || c.type === RoomType.Aiassistant));
-      if (channels.length === 0) {
-        if (mounted) setSessions([]);
-        return;
-      }
-      setThreadsLoading(true);
-      try {
-        const rowsByChannel = await Promise.all(channels.map(async (channel) => {
-          var _a2, _b, _c;
-          const channelId = String(channel.id);
-          const result = await client.query({
-            query: MessagesDocument,
-            variables: {
-              channelId,
-              parentId: null,
-              limit: MESSAGES_PER_CHANNEL,
-              skip: 0
-            },
-            fetchPolicy: "cache-first",
-            context: {
-              cacheKey: "messages-list"
-            }
-          });
-          return buildSessionsFromMessages((_c = (_b = (_a2 = result == null ? void 0 : result.data) == null ? void 0 : _a2.messages) == null ? void 0 : _b.data) != null ? _c : []);
-        }));
-        if (!mounted) return;
-        const merged = rowsByChannel.flat().sort((a, b) => b.sortAt - a.sortAt).slice(0, 200);
-        setSessions(merged);
-      } finally {
-        if (mounted) setThreadsLoading(false);
+    if (olderSessions.length > 0) return;
+    setHasMore(sourceChannelCount >= HISTORY_PAGE_SIZE);
+  }, [sourceChannelCount, olderSessions.length]);
+  useFocusEffect(React.useCallback(() => {
+    if (!orgName) return;
+    void refetch(getHistoryChannelsQueryVariables(orgName)).catch(() => {
+    });
+  }, [orgName, refetch]));
+  const onRefresh = React.useCallback(async () => {
+    if (!orgName) return;
+    setRefreshing(true);
+    try {
+      await refetch(getHistoryChannelsQueryVariables(orgName));
+      setOlderSessions([]);
+      setNowTs(Date.now());
+    } catch (e) {
+    } finally {
+      setRefreshing(false);
+    }
+  }, [orgName, refetch]);
+  const onLoadMore = React.useCallback(async () => {
+    var _a, _b;
+    if (!orgName || loadingMore || !hasMore) return;
+    setLoadingMore(true);
+    try {
+      const nextSkip = liveSessions.length + olderSessions.length;
+      const result = await apollo.query({
+        query: GetChannelsByUserWithLastMessageDocument,
+        variables: getHistoryChannelsQueryVariables(orgName, {
+          skip: nextSkip,
+          limit: HISTORY_PAGE_SIZE
+        }),
+        fetchPolicy: "network-only"
+      });
+      const rawCount = ((_b = (_a = result.data) == null ? void 0 : _a.channelsByUser) != null ? _b : []).length;
+      const nextBatch = chatHistorySessionsFromChannels(result.data);
+      if (nextBatch.length === 0) {
+        setHasMore(false);
+      } else {
+        setOlderSessions((prev) => {
+          const map = /* @__PURE__ */ new Map();
+          for (const s of prev) map.set(s.channelId, s);
+          for (const s of nextBatch) map.set(s.channelId, s);
+          return Array.from(map.values());
+        });
+        setHasMore(rawCount >= HISTORY_PAGE_SIZE);
       }
-    };
-    load();
-    return () => {
-      mounted = false;
-    };
-  }, [channelsData, client]);
-  const loading = (channelsLoading || threadsLoading) && sessions.length === 0;
-  const contentMaxWidth = Math.min(760, Math.max(360, screenWidth - 24));
-  return /* @__PURE__ */ jsxs(View, { style: styles.container, children: [
-    /* @__PURE__ */ jsx(ScrollView, { style: styles.list, contentContainerStyle: [styles.listContent, {
-      alignSelf: "center",
-      width: contentMaxWidth
-    }], contentInsetAdjustmentBehavior: "never", automaticallyAdjustContentInsets: false, contentInset: {
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0
-    }, scrollIndicatorInsets: {
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0
-    }, children: loading ? /* @__PURE__ */ jsx(View, { style: styles.emptyStateWrap, children: /* @__PURE__ */ jsx(YantraBrandLoader, {}) }) : sessions.length === 0 ? /* @__PURE__ */ jsxs(View, { style: styles.emptyStateWrap, children: [
-      /* @__PURE__ */ jsx(Text, { fontSize: "$2xl", fontWeight: "$semibold", color: "$gray900", textAlign: "center", children: "What can I do for you?" }),
-      /* @__PURE__ */ jsx(Text, { fontSize: "$sm", color: "$gray600", textAlign: "center", children: "Ask anything to search and build with Yantra." })
-    ] }) : sessions.map((session) => /* @__PURE__ */ jsx(ChatHistoryRow, { session, onSelectSession }, session.id)) }),
-    /* @__PURE__ */ jsx(Pressable, { onPress: onCompose, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Start new chat", style: ({
-      pressed
-    }) => [styles.fab, {
-      right: Math.max((screenWidth - contentMaxWidth) / 2 + 18, 18)
-    }, pressed && styles.fabPressed], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 28, color: mobileTokens.color.surface }) })
-  ] });
+    } catch (e) {
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [apollo, hasMore, liveSessions.length, loadingMore, olderSessions, orgName]);
+  const sessions = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const s of olderSessions) map.set(s.channelId, s);
+    for (const s of liveSessions) map.set(s.channelId, s);
+    return Array.from(map.values()).sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime()).map((s) => __spreadProps(__spreadValues({}, s), {
+      id: s.channelId,
+      titleForRender: truncate(s.title, 64),
+      previewForRender: s.preview ? truncate(s.preview, 96) : "",
+      sortAt: s.updatedAt.getTime()
+    }));
+  }, [liveSessions, olderSessions]);
+  const sections = React.useMemo(() => buildSections(sessions, nowTs), [sessions, nowTs]);
+  const initialLoading = !sessionsLoaded || idsLoading || !orgName;
+  const contentMaxWidth = Math.min(720, Math.max(360, screenWidth - 24));
+  const containerStyle = {
+    maxWidth: contentMaxWidth,
+    alignSelf: "center",
+    width: "100%"
+  };
+  const listFooter = hasMore ? /* @__PURE__ */ jsx(View, { style: [styles.footer, containerStyle], children: /* @__PURE__ */ jsx(Pressable, { onPress: () => void onLoadMore(), disabled: loadingMore, style: ({
+    pressed
+  }) => [styles.loadMore, {
+    backgroundColor: theme.loadMoreBg,
+    borderColor: theme.loadMoreBorder
+  }, loadingMore && {
+    opacity: 0.7
+  }, pressed && !loadingMore && {
+    opacity: 0.8
+  }], accessibilityRole: "button", accessibilityLabel: "Load older conversations", children: loadingMore ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.loadMoreText }) : /* @__PURE__ */ jsx(Text, { style: [styles.loadMoreText, {
+    color: theme.loadMoreText
+  }], children: "Load older" }) }) }) : !hasMore && sessions.length > 0 ? /* @__PURE__ */ jsxs(View, { style: [styles.endHint, containerStyle], children: [
+    /* @__PURE__ */ jsx(View, { style: [styles.endHintDot, {
+      backgroundColor: theme.endDot,
+      opacity: 0.5
+    }] }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.endHintText, {
+      color: theme.muted
+    }], children: "You're all caught up" })
+  ] }) : /* @__PURE__ */ jsx(View, { style: {
+    height: 24
+  } });
+  const renderItemSeparator = React.useCallback(() => /* @__PURE__ */ jsx(View, { style: [styles.divider, {
+    backgroundColor: theme.divider
+  }] }), [theme.divider]);
+  return /* @__PURE__ */ jsx(View, { style: [styles.container, {
+    backgroundColor: theme.bg
+  }], children: initialLoading ? (
+    /**
+     * Initial-fetch state mirrors the web composer's "Thinking…" pill
+     * (see `packages-modules/account/browser/src/pages/chat/ChatSessionPage.tsx`):
+     * a thin spinning arc + 12px muted caption, both tinted with
+     * `theme.muted` so the indicator reads as a quiet status row
+     * rather than a brand-stamped loading screen.
+     */
+    /* @__PURE__ */ jsx(View, { style: styles.emptyStateWrap, children: /* @__PURE__ */ jsx(ThinkingIndicator, { color: theme.muted }) })
+  ) : sessions.length === 0 ? /* @__PURE__ */ jsxs(View, { style: styles.emptyStateWrap, children: [
+    /* @__PURE__ */ jsx(View, { style: [styles.emptyMark, {
+      backgroundColor: theme.emptyMarkBg
+    }], children: /* @__PURE__ */ jsx(Feather, { name: "message-circle", size: 40, color: theme.emptyMarkIcon }) }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.emptyTitle, {
+      color: theme.title
+    }], children: "No conversations yet" }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.emptySubtitle, {
+      color: theme.muted
+    }], children: "Start your first chat to see your conversation history here." })
+  ] }) : /* @__PURE__ */ jsx(SectionList, { sections, keyExtractor: (item) => item.channelId, stickySectionHeadersEnabled: false, contentContainerStyle: [styles.listContent, containerStyle, {
+    paddingBottom: 32
+  }], ListFooterComponent: listFooter, ItemSeparatorComponent: renderItemSeparator, refreshControl: /* @__PURE__ */ jsx(RefreshControl, { refreshing, onRefresh: () => void onRefresh(), tintColor: theme.refreshTint, colors: [theme.refreshTint] }), renderSectionHeader: ({
+    section
+  }) => /* @__PURE__ */ jsx(View, { style: styles.sectionHeader, children: /* @__PURE__ */ jsx(Text, { style: [styles.sectionLabel, {
+    color: theme.sectionLabel
+  }], children: section.title }) }), renderItem: ({
+    item
+  }) => /* @__PURE__ */ jsx(ChatHistoryRow, { session: item, onSelectSession, theme, timeLabel: relativeTime(item.sortAt, nowTs) }), showsVerticalScrollIndicator: false }) });
 }
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    backgroundColor: mobileTokens.color.bg
-  },
-  list: {
     flex: 1
   },
   listContent: {
-    paddingHorizontal: 16,
-    paddingTop: 8,
-    paddingBottom: 100,
-    gap: 10
+    paddingHorizontal: 20,
+    paddingTop: 4
   },
-  emptyStateWrap: {
-    flex: 1,
-    minHeight: 420,
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 10
+  /**
+   * Section header: sentence case, indigo-tinted, modest size. 28px top padding
+   * establishes rhythm between groups without dead air below the label.
+   */
+  sectionHeader: {
+    paddingTop: 28,
+    paddingBottom: 10,
+    paddingHorizontal: 2
   },
-  item: {
-    borderRadius: 14,
-    paddingHorizontal: 14,
-    paddingVertical: 14,
-    backgroundColor: mobileTokens.color.surface,
-    borderWidth: 1,
-    borderColor: mobileTokens.color.border
+  sectionLabel: {
+    fontSize: 12,
+    fontWeight: "600",
+    letterSpacing: 0.2,
+    textTransform: "none"
   },
-  itemTop: {
+  /**
+   * Row: leading 40×40 mode tile, two-line body (title + preview), right-aligned
+   * date aligned to the title's baseline. 14px gap matches the tile-to-text
+   * rhythm in Manus / iOS Mail.
+   */
+  row: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 4,
-    gap: 8
+    paddingVertical: 12,
+    paddingHorizontal: 2,
+    gap: 14
   },
-  rowTitleWrap: {
-    flexDirection: "row",
+  tile: {
+    width: 40,
+    height: 40,
+    borderRadius: 12,
     alignItems: "center",
+    justifyContent: "center"
+  },
+  rowBody: {
     flex: 1,
-    minWidth: 0,
-    gap: 8
+    minWidth: 0
   },
-  rowIconWrap: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
+  rowHeader: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: 10
+  },
+  rowTitle: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: "600",
+    letterSpacing: -0.1,
+    lineHeight: 22
+  },
+  rowTitlePlaceholder: {
+    fontWeight: "500",
+    fontStyle: "italic"
+  },
+  rowDate: {
+    fontSize: 12.5,
+    fontWeight: "500",
+    fontVariant: ["tabular-nums"]
+  },
+  rowPreview: {
+    marginTop: 2,
+    fontSize: 13.5,
+    lineHeight: 19,
+    fontWeight: "400",
+    letterSpacing: -0.05
+  },
+  /**
+   * Indented hairline: starts past the tile column (40 + 14 = 54) so the rule
+   * aligns with the title's leading edge. Mail-style.
+   */
+  divider: {
+    height: StyleSheet.hairlineWidth,
+    marginLeft: 56
+  },
+  footer: {
+    paddingTop: 28,
+    paddingBottom: 8,
+    alignItems: "center"
+  },
+  /** Bordered ink-neutral pill. Label is the affordance, no leading icon, no chevron. */
+  loadMore: {
+    flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: mobileTokens.color.primarySoft,
+    paddingVertical: 10,
+    paddingHorizontal: 18,
+    borderRadius: 999,
     borderWidth: 1,
-    borderColor: mobileTokens.color.primaryBorder
+    minWidth: 132
   },
-  titleText: {
-    flex: 1,
-    minWidth: 0
+  loadMoreText: {
+    fontSize: 13.5,
+    fontWeight: "600",
+    letterSpacing: -0.05
   },
-  itemPressed: {
-    opacity: 0.82
+  endHint: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    paddingTop: 32,
+    paddingBottom: 12
   },
-  fab: {
-    position: "absolute",
-    right: 18,
-    bottom: 28,
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    backgroundColor: mobileTokens.color.primary,
-    borderWidth: 1,
-    borderColor: mobileTokens.color.primaryBorder,
+  endHintDot: {
+    width: 4,
+    height: 4,
+    borderRadius: 2
+  },
+  endHintText: {
+    fontSize: 12.5,
+    fontWeight: "500",
+    letterSpacing: 0.1
+  },
+  /**
+   * Empty state: stack a 64×64 indigo-tinted mark over title + subtitle.
+   * Generous vertical gap (16) between mark and title; tighter gap (6)
+   * between title and subtitle so the pair reads as one unit hanging off
+   * the mark, not three independent items.
+   */
+  emptyStateWrap: {
+    flex: 1,
+    minHeight: 420,
     alignItems: "center",
     justifyContent: "center",
-    shadowColor: "#312e81",
-    shadowOpacity: 0.22,
-    shadowRadius: 10,
-    shadowOffset: {
-      width: 0,
-      height: 4
-    },
-    elevation: 6
+    paddingHorizontal: 32
+  },
+  emptyMark: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 18
+  },
+  emptyTitle: {
+    fontSize: 20,
+    fontWeight: "700",
+    letterSpacing: -0.3,
+    textAlign: "center",
+    marginBottom: 6
   },
-  fabPressed: {
-    opacity: 0.85
+  emptySubtitle: {
+    fontSize: 14,
+    lineHeight: 20,
+    textAlign: "center",
+    maxWidth: 340
   }
 });export{ChatHistoryLanding as default};//# sourceMappingURL=ChatHistoryLanding.js.map