Add per-thread activity indicators in chat thread list

Author: williamstein

src/packages/frontend/chat/chatroom.tsx

@@ -139,8 +139,11 @@ export type ThreadMeta = ThreadListItem & {
   unreadCount: number;
   isAI: boolean;
   isPinned: boolean;
+  lastActivityAt?: number;
 };
 
+const ACTIVITY_RECENT_MS = 20_000;
+
 function stripHtml(value: string): string {
   if (!value) return "";
   return value.replace(/<[^>]*>/g, "");
@@ -155,6 +158,7 @@ export interface ChatPanelProps {
   project_id: string;
   path: string;
   messages?: ChatMessages;
+  activity?: any;
   fontSize?: number;
   desc?: NodeDesc;
   variant?: "default" | "compact";
@@ -175,6 +179,7 @@ export function ChatPanel({
   project_id,
   path,
   messages,
+  activity,
   fontSize = 13,
   desc,
   variant = "default",
@@ -220,6 +225,7 @@ export function ChatPanel({
   );
   const [allowAutoSelectThread, setAllowAutoSelectThread] =
     useState<boolean>(true);
+  const [activityNow, setActivityNow] = useState<number>(Date.now());
   const submitMentionsRef = useRef<SubmitMentionsFn | undefined>(undefined);
   const scrollToBottomRef = useRef<any>(null);
   const selectedThreadDate = useMemo(() => {
@@ -276,6 +282,10 @@ export function ChatPanel({
         }
         llmCacheRef.current.set(thread.key, isAI);
       }
+      const lastActivityAt =
+        activity && typeof (activity as any).get === "function"
+          ? (activity as any).get(thread.key)
+          : undefined;
       return {
         ...thread,
         displayLabel,
@@ -284,9 +294,11 @@ export function ChatPanel({
         unreadCount,
         isAI: !!isAI,
         isPinned,
+        lastActivityAt:
+          typeof lastActivityAt === "number" ? lastActivityAt : undefined,
       };
     });
-  }, [rawThreads, account_id, actions]);
+  }, [rawThreads, account_id, actions, activity]);
 
   const threadSections = useMemo<ThreadSectionWithUnread[]>(() => {
     const grouped = groupThreadsByRecency(threads);
@@ -335,6 +347,11 @@ export function ChatPanel({
     }
   }, [selectedThreadKey]);
 
+  useEffect(() => {
+    const id = window.setInterval(() => setActivityNow(Date.now()), 5000);
+    return () => window.clearInterval(id);
+  }, []);
+
   useEffect(() => {
     if (!fragmentId || isAllThreadsSelected || messages == null) {
       return;
@@ -509,6 +526,9 @@ export function ChatPanel({
     const isHovered = hoveredThread === key;
     const isMenuOpen = openThreadMenuKey === key;
     const showMenu = isHovered || selectedThreadKey === key || isMenuOpen;
+    const isRecentlyActive =
+      thread.lastActivityAt != null &&
+      activityNow - thread.lastActivityAt < ACTIVITY_RECENT_MS;
     const iconTooltip = thread.isAI
       ? "This thread started with an AI request, so the AI responds automatically."
       : "This thread started as human-only. AI replies only when explicitly mentioned.";
@@ -531,6 +551,18 @@ export function ChatPanel({
             <Icon name={isAI ? "robot" : "users"} style={{ color: "#888" }} />
           </Tooltip>
           <div style={THREAD_ITEM_LABEL_STYLE}>{plainLabel}</div>
+          {isRecentlyActive && (
+            <span
+              aria-label="Recent activity"
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                background: COLORS.BLUE,
+                flexShrink: 0,
+              }}
+            />
+          )}
           {unreadCount > 0 && !isHovered && (
             <Badge
               count={unreadCount}
@@ -1194,12 +1226,14 @@ export function ChatRoom({
 }: EditorComponentProps) {
   const useEditor = useEditorRedux<ChatState>({ project_id, path });
   const messages = useEditor("messages") as ChatMessages | undefined;
+  const activity = useEditor("activity");
   return (
     <ChatPanel
       actions={actions}
       project_id={project_id}
       path={path}
       messages={messages}
+      activity={activity as any}
       fontSize={font_size}
       desc={desc}
       variant="default"

src/packages/frontend/chat/store.ts

@@ -5,6 +5,7 @@
 
 import { Store } from "@cocalc/frontend/app-framework";
 import type { ChatMessages } from "./types";
+import type { Map as ImmutableMap } from "immutable";
 
 export interface ChatState {
   project_id?: string;
@@ -13,6 +14,10 @@ export interface ChatState {
   message_plain_text: string; // What the user sees in the chat box eg. stripped of internal mention markup
   messages?: ChatMessages;
   drafts?: Map<string, any>;
+  // last activity timestamp per thread (ms since epoch)
+  activity?: ImmutableMap<string, number>;
+  // true after the initial sync replay has finished
+  activityReady?: boolean;
   offset?: number; // information about where on screen the chat editor is located
   position?: number; // more info about where chat editor is located
   saved_position?: number;
@@ -26,6 +31,8 @@ export function getInitialState() {
     message_plain_text: "",
     messages: undefined,
     drafts: undefined,
+    activity: undefined,
+    activityReady: false,
     offset: undefined,
     position: undefined,
     saved_position: undefined,

src/packages/frontend/chat/sync.ts

@@ -1,5 +1,6 @@
 import { Map as iMap, fromJS } from "immutable";
 import type { ChatMessage } from "./types";
+import { getThreadRootDate } from "./utils";
 
 export function initFromSyncDB({ syncdb, store }) {
   const v = {};
@@ -19,6 +20,7 @@ export function handleSyncDBChange({ syncdb, store, changes }) {
     console.warn("handleSyncDBChange: inputs should not be null");
     return;
   }
+  const activityReady = store.get("activityReady") === true;
   changes.map((obj) => {
     obj = obj.toJS();
     switch (obj.event) {
@@ -55,6 +57,17 @@ export function handleSyncDBChange({ syncdb, store, changes }) {
         }
         if (changed) {
           store.setState({ messages });
+          if (activityReady) {
+            const root =
+              getThreadRootDate({
+                date: obj.date.valueOf(),
+                messages,
+              }) ?? obj.date.valueOf();
+            const key = `${root}`;
+            const now = Date.now();
+            const activity = (store.get("activity") ?? iMap()).set(key, now);
+            store.setState({ activity });
+          }
         }
         return;
       }
@@ -63,6 +76,9 @@ export function handleSyncDBChange({ syncdb, store, changes }) {
         console.warn("unknown chat event: ", obj.event);
     }
   });
+  if (!activityReady) {
+    store.setState({ activityReady: true });
+  }
 }
 
 // NOTE: x must be already a plain JS object (.toJS()).