chat: reorganize the thread column

Author: williamstein

src/packages/frontend/chat/actions.ts

@@ -574,7 +574,11 @@ export class ChatActions extends Actions<ChatState> {
     return true;
   };
 
-  markThreadRead = (threadKey: string, count: number): boolean => {
+  markThreadRead = (
+    threadKey: string,
+    count: number,
+    commit = true,
+  ): boolean => {
     if (this.syncdb == null) {
       return false;
     }
@@ -588,7 +592,9 @@ export class ChatActions extends Actions<ChatState> {
     }
     entry.doc[`read-${account_id}`] = count;
     this.syncdb.set(entry.doc);
-    this.syncdb.commit();
+    if (commit) {
+      this.syncdb.commit();
+    }
     return true;
   };
 

src/packages/frontend/chat/chatroom.tsx

@@ -14,6 +14,7 @@ import {
   Layout,
   Menu,
   Modal,
+  Popconfirm,
   Select,
   Space,
   Switch,
@@ -51,8 +52,12 @@ import {
   getThreadRootDate,
   markChatAsReadIfUnseen,
 } from "./utils";
-import { ALL_THREADS_KEY, useThreadList } from "./threads";
-import type { ThreadListItem } from "./threads";
+import {
+  ALL_THREADS_KEY,
+  groupThreadsByRecency,
+  useThreadList,
+} from "./threads";
+import type { ThreadListItem, ThreadSection } from "./threads";
 
 const FILTER_RECENT_NONE = {
   value: 0,
@@ -118,19 +123,32 @@ const THREAD_ITEM_LABEL_STYLE: React.CSSProperties = {
   pointerEvents: "none",
 } as const;
 
+const THREAD_SECTION_HEADER_STYLE: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "0 20px 6px",
+  color: COLORS.GRAY_D,
+} as const;
+
 export type ThreadMeta = ThreadListItem & {
   displayLabel: string;
   hasCustomName: boolean;
   readCount: number;
   unreadCount: number;
   isAI: boolean;
+  isPinned: boolean;
 };
 
 function stripHtml(value: string): string {
   if (!value) return "";
   return value.replace(/<[^>]*>/g, "");
 }
 
+interface ThreadSectionWithUnread extends ThreadSection<ThreadMeta> {
+  unreadCount: number;
+}
+
 export interface ChatPanelProps {
   actions: ChatActions;
   project_id: string;
@@ -223,6 +241,12 @@ export function ChatPanel({
       )?.trim();
       const hasCustomName = !!storedName;
       const displayLabel = storedName || thread.label;
+      const pinValue = rootMessage?.get("pin");
+      const isPinned =
+        pinValue === true ||
+        pinValue === "true" ||
+        pinValue === 1 ||
+        pinValue === "1";
       const readField =
         account_id && rootMessage
           ? rootMessage.get(`read-${account_id}`)
@@ -255,10 +279,22 @@ export function ChatPanel({
         readCount,
         unreadCount,
         isAI: !!isAI,
+        isPinned,
       };
     });
   }, [rawThreads, account_id, actions]);
 
+  const threadSections = useMemo<ThreadSectionWithUnread[]>(() => {
+    const grouped = groupThreadsByRecency(threads);
+    return grouped.map((section) => ({
+      ...section,
+      unreadCount: section.threads.reduce(
+        (sum, thread) => sum + thread.unreadCount,
+        0,
+      ),
+    }));
+  }, [threads]);
+
   useEffect(() => {
     if (
       storedThreadFromDesc != null &&
@@ -461,7 +497,7 @@ export function ChatPanel({
         >
           <Icon name={isAI ? "robot" : "users"} style={{ color: "#888" }} />
           <div style={THREAD_ITEM_LABEL_STYLE}>{plainLabel}</div>
-          {unreadCount > 0 && (
+          {unreadCount > 0 && !isHovered && (
             <Badge
               count={unreadCount}
               size="small"
@@ -490,83 +526,100 @@ export function ChatPanel({
     };
   };
 
-  const renderThreadSection = (
-    title: string,
-    icon: "users" | "robot",
-    list: ThreadMeta[],
+  const renderUnreadBadge = (
+    count: number,
+    section: ThreadSectionWithUnread,
   ) => {
-    const unreadTotal = list.reduce(
-      (sum, thread) => sum + thread.unreadCount,
-      0,
+    if (count <= 0) {
+      return null;
+    }
+    const badge = (
+      <Badge
+        count={count}
+        size="small"
+        style={{
+          backgroundColor: COLORS.GRAY_L0,
+          color: COLORS.GRAY_D,
+        }}
+      />
+    );
+    if (!actions?.markThreadRead) {
+      return badge;
+    }
+    return (
+      <Popconfirm
+        title="Mark all read?"
+        description="Mark every chat in this section as read."
+        okText="Mark read"
+        cancelText="Cancel"
+        placement="left"
+        onConfirm={(e) => {
+          e?.stopPropagation?.();
+          handleMarkSectionRead(section);
+        }}
+      >
+        <span
+          onClick={(e) => e.stopPropagation()}
+          style={{ cursor: "pointer", display: "inline-flex" }}
+        >
+          {badge}
+        </span>
+      </Popconfirm>
     );
+  };
+
+  const renderThreadSection = (section: ThreadSectionWithUnread) => {
+    const { title, threads: list, unreadCount, key } = section;
+    if (!list || list.length === 0) {
+      return null;
+    }
     const items = list.map(renderThreadRow);
     return (
-      <div style={{ marginBottom: "15px" }}>
-        <div
+      <div key={key} style={{ marginBottom: "18px" }}>
+        <div style={THREAD_SECTION_HEADER_STYLE}>
+          <span style={{ fontWeight: 600 }}>{title}</span>
+          {renderUnreadBadge(unreadCount, section)}
+        </div>
+        <Menu
+          mode="inline"
+          selectedKeys={selectedThreadKey ? [selectedThreadKey] : []}
+          onClick={({ key: menuKey }) => {
+            setAllowAutoSelectThread(true);
+            setSelectedThreadKey(String(menuKey));
+            if (isCompact) {
+              setSidebarVisible(false);
+            }
+          }}
+          items={items}
           style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            marginBottom: "6px",
+            border: "none",
+            background: "transparent",
+            padding: "0 10px",
           }}
-        >
-          <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
-            <Icon name={icon} />
-            <span style={{ fontWeight: 600 }}>{title}</span>
-          </div>
-          {unreadTotal > 0 && (
-            <Badge
-              count={unreadTotal}
-              size="small"
-              style={{
-                backgroundColor: COLORS.GRAY_L0,
-                color: COLORS.GRAY_D,
-              }}
-            />
-          )}
-        </div>
-        {list.length === 0 ? (
-          <div style={{ color: "#999", fontSize: "12px", marginLeft: "4px" }}>
-            No chats
-          </div>
-        ) : (
-          <Menu
-            mode="inline"
-            selectedKeys={selectedThreadKey ? [selectedThreadKey] : []}
-            onClick={({ key }) => {
-              setAllowAutoSelectThread(true);
-              setSelectedThreadKey(String(key));
-              if (isCompact) {
-                setSidebarVisible(false);
-              }
-            }}
-            items={items}
-            style={{
-              border: "none",
-              background: "transparent",
-              padding: 0,
-              maxHeight: "28vh",
-              overflowY: "auto",
-            }}
-          />
-        )}
+        />
       </div>
     );
   };
 
-  const humanThreads = useMemo(
-    () => threads.filter((thread) => !thread.isAI),
-    [threads],
-  );
-  const aiThreads = useMemo(
-    () => threads.filter((thread) => thread.isAI),
-    [threads],
-  );
   const totalUnread = useMemo(
-    () => threads.reduce((sum, thread) => sum + thread.unreadCount, 0),
-    [threads],
+    () => threadSections.reduce((sum, section) => sum + section.unreadCount, 0),
+    [threadSections],
   );
 
+  const handleMarkSectionRead = (section: ThreadSectionWithUnread): void => {
+    if (!actions?.markThreadRead) return;
+    const v: { key: string; messageCount: number }[] = [];
+    for (const thread of section.threads) {
+      if (thread.unreadCount > 0) {
+        v.push({ key: thread.key, messageCount: thread.messageCount });
+      }
+    }
+    for (let i = 0; i < v.length; i++) {
+      const { key, messageCount } = v[i];
+      actions.markThreadRead(key, messageCount, i == v.length - 1);
+    }
+  };
+
   const renderSidebarContent = () => (
     <>
       <div style={THREAD_SIDEBAR_HEADER}>
@@ -622,8 +675,13 @@ export function ChatPanel({
           </>
         )}
       </div>
-      {renderThreadSection("Humans", "users", humanThreads)}
-      {renderThreadSection("AI", "robot", aiThreads)}
+      {threadSections.length === 0 ? (
+        <div style={{ color: "#999", fontSize: "12px", padding: "0 20px" }}>
+          No chats yet.
+        </div>
+      ) : (
+        threadSections.map((section) => renderThreadSection(section))
+      )}
     </>
   );
 

src/packages/frontend/chat/threads.ts

@@ -17,6 +17,19 @@ export interface ThreadListItem {
   rootMessage?: ChatMessageTyped;
 }
 
+export type ThreadSectionKey =
+  | "pinned"
+  | "today"
+  | "yesterday"
+  | "last7days"
+  | "older";
+
+export interface ThreadSection<T extends ThreadListItem = ThreadListItem> {
+  key: ThreadSectionKey;
+  title: string;
+  threads: T[];
+}
+
 export function useThreadList(messages?: ChatMessages): ThreadListItem[] {
   return React.useMemo(() => {
     if (messages == null || messages.size === 0) {
@@ -104,3 +117,65 @@ export function deriveThreadLabel(
   }
   return "Untitled Thread";
 }
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+interface GroupOptions {
+  now?: number;
+}
+
+type RecencyKey = Exclude<ThreadSectionKey, "pinned">;
+
+const RECENCY_SECTIONS: { key: RecencyKey; title: string }[] = [
+  { key: "today", title: "Today" },
+  { key: "yesterday", title: "Yesterday" },
+  { key: "last7days", title: "Last 7 Days" },
+  { key: "older", title: "Older" },
+];
+
+function recencyKeyForDelta(delta: number): RecencyKey {
+  if (delta < DAY_MS) {
+    return "today";
+  }
+  if (delta < 2 * DAY_MS) {
+    return "yesterday";
+  }
+  if (delta < 7 * DAY_MS) {
+    return "last7days";
+  }
+  return "older";
+}
+
+export function groupThreadsByRecency<T extends ThreadListItem & { isPinned?: boolean }>(
+  threads: T[],
+  options: GroupOptions = {},
+): ThreadSection<T>[] {
+  if (!threads || threads.length === 0) {
+    return [];
+  }
+  const now = options.now ?? Date.now();
+  const sections: ThreadSection<T>[] = [];
+  const pinned = threads.filter((thread) => !!thread.isPinned);
+  const remainder = threads.filter((thread) => !thread.isPinned);
+  if (pinned.length > 0) {
+    sections.push({ key: "pinned", title: "Pinned", threads: pinned });
+  }
+  const buckets: Record<RecencyKey, T[]> = {
+    today: [],
+    yesterday: [],
+    last7days: [],
+    older: [],
+  };
+  for (const thread of remainder) {
+    const delta = now - thread.newestTime;
+    const key = recencyKeyForDelta(delta);
+    buckets[key].push(thread);
+  }
+  for (const def of RECENCY_SECTIONS) {
+    const list = buckets[def.key];
+    if (list.length > 0) {
+      sections.push({ key: def.key, title: def.title, threads: list });
+    }
+  }
+  return sections;
+}