feat(sessions): keyboard navigation and jump-to-message picker (#3407)

Co-authored-by: Basit Balogun <basitbalogun10@gmail.com>

Author: charlesvien

packages/ui/src/features/command/keyboard-shortcuts.ts

@@ -27,6 +27,9 @@ export const SHORTCUTS = {
   SPACE_UP: "mod+up",
   SPACE_DOWN: "mod+down",
   FIND_IN_CONVERSATION: "mod+f",
+  MESSAGE_PREV: "alt+up",
+  MESSAGE_NEXT: "alt+down",
+  MESSAGE_JUMP: "mod+j",
   BLUR: "escape",
   SUBMIT_BLUR: "mod+enter",
   SWITCH_MESSAGING_MODE: "mod+s",
@@ -203,6 +206,27 @@ export const KEYBOARD_SHORTCUTS: KeyboardShortcut[] = [
     category: "panels",
     context: "Task detail",
   },
+  {
+    id: "message-prev",
+    keys: SHORTCUTS.MESSAGE_PREV,
+    description: "Previous message",
+    category: "panels",
+    context: "Task detail",
+  },
+  {
+    id: "message-next",
+    keys: SHORTCUTS.MESSAGE_NEXT,
+    description: "Next message",
+    category: "panels",
+    context: "Task detail",
+  },
+  {
+    id: "message-jump",
+    keys: SHORTCUTS.MESSAGE_JUMP,
+    description: "Jump to message",
+    category: "panels",
+    context: "Task detail",
+  },
   {
     id: "paste-as-file",
     keys: SHORTCUTS.PASTE_AS_FILE,

packages/ui/src/features/sessions/components/ConversationView.tsx

@@ -10,11 +10,14 @@ import {
 } from "@posthog/quill";
 import type { AcpMessage } from "@posthog/shared";
 import type { Task } from "@posthog/shared/domain-types";
+import { SHORTCUTS } from "@posthog/ui/features/command/keyboard-shortcuts";
 import type {
   ConversationItem,
   TurnContext,
 } from "@posthog/ui/features/sessions/components/buildConversationItems";
 import { ConversationSearchBar } from "@posthog/ui/features/sessions/components/ConversationSearchBar";
+import { MessageJumpPicker } from "@posthog/ui/features/sessions/components/chat-thread/MessageJumpPicker";
+import { THREAD_HOTKEY_OPTIONS } from "@posthog/ui/features/sessions/components/chat-thread/threadHotkeys";
 import { GitActionMessage } from "@posthog/ui/features/sessions/components/GitActionMessage";
 import { GitActionResult } from "@posthog/ui/features/sessions/components/GitActionResult";
 import { mergeConversationItems } from "@posthog/ui/features/sessions/components/mergeConversationItems";
@@ -60,6 +63,7 @@ import {
 } from "@posthog/ui/shell/diffWorkerHost";
 import { Box, Flex, Text } from "@radix-ui/themes";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 
 export interface ConversationViewProps {
   events: AcpMessage[];
@@ -220,6 +224,90 @@ export function ConversationView({
     listRef: searchListRef,
   });
 
+  const [jumpPickerOpen, setJumpPickerOpen] = useState(false);
+  const [keyboardFocusedMessageId, setKeyboardFocusedMessageId] = useState<
+    string | null
+  >(null);
+
+  const userMessages = useMemo(() => {
+    const result: Array<{ id: string; index: number }> = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.type === "user_message") {
+        result.push({ id: item.id, index: i });
+      }
+    }
+    return result;
+  }, [items]);
+
+  // Grouped rows != items, so scroll by the row the message landed in (same
+  // mapping search uses), falling back to the raw item index.
+  const scrollToUserMessage = useCallback((id: string, itemIndex: number) => {
+    const rowIndex = itemIdToRowIndexRef.current.get(id) ?? itemIndex;
+    listRef.current?.scrollToIndex(rowIndex);
+  }, []);
+
+  const handleNavigateMessage = useCallback(
+    (direction: -1 | 1) => {
+      if (userMessages.length === 0) return;
+
+      const currentIndex = keyboardFocusedMessageId
+        ? userMessages.findIndex(
+            (message) => message.id === keyboardFocusedMessageId,
+          )
+        : -1;
+
+      const nextIndex =
+        currentIndex === -1
+          ? direction > 0
+            ? 0
+            : userMessages.length - 1
+          : Math.max(
+              0,
+              Math.min(userMessages.length - 1, currentIndex + direction),
+            );
+
+      const nextMessage = userMessages[nextIndex];
+      if (!nextMessage) return;
+
+      setKeyboardFocusedMessageId(nextMessage.id);
+      scrollToUserMessage(nextMessage.id, nextMessage.index);
+    },
+    [keyboardFocusedMessageId, userMessages, scrollToUserMessage],
+  );
+
+  useHotkeys(
+    SHORTCUTS.MESSAGE_JUMP,
+    () => setJumpPickerOpen((prev) => !prev),
+    THREAD_HOTKEY_OPTIONS,
+  );
+
+  useHotkeys(
+    SHORTCUTS.MESSAGE_PREV,
+    () => handleNavigateMessage(-1),
+    THREAD_HOTKEY_OPTIONS,
+  );
+
+  useHotkeys(
+    SHORTCUTS.MESSAGE_NEXT,
+    () => handleNavigateMessage(1),
+    THREAD_HOTKEY_OPTIONS,
+  );
+
+  const clearKeyboardFocus = useCallback(() => {
+    setKeyboardFocusedMessageId(null);
+  }, []);
+
+  const handleJumpToMessage = useCallback(
+    (id: string) => {
+      const message = userMessages.find((entry) => entry.id === id);
+      if (!message) return;
+      setKeyboardFocusedMessageId(id);
+      scrollToUserMessage(id, message.index);
+    },
+    [userMessages, scrollToUserMessage],
+  );
+
   const handleScrollStateChange = useCallback((isAtBottom: boolean) => {
     isAtBottomRef.current = isAtBottom;
     setShowScrollButton(!isAtBottom);
@@ -254,6 +342,7 @@ export function ConversationView({
               timestamp={item.timestamp}
               animate={!initialItemIds.has(item.id)}
               taskId={taskId}
+              keyboardFocused={item.id === keyboardFocusedMessageId}
               sourceUrl={
                 slackThreadUrl && item.id === firstUserMessageId
                   ? slackThreadUrl
@@ -287,7 +376,14 @@ export function ConversationView({
           return <UserShellExecuteView item={item} />;
       }
     },
-    [repoPath, taskId, slackThreadUrl, firstUserMessageId, initialItemIds],
+    [
+      repoPath,
+      taskId,
+      slackThreadUrl,
+      firstUserMessageId,
+      initialItemIds,
+      keyboardFocusedMessageId,
+    ],
   );
 
   const getRowKey = useCallback((row: ThreadRow) => row.id, []);
@@ -359,7 +455,11 @@ export function ConversationView({
       poolOptions={diffsPoolOptions}
       highlighterOptions={DIFFS_HIGHLIGHTER_OPTIONS}
     >
-      <div ref={containerRef} className="group/thread relative flex-1">
+      <div
+        ref={containerRef}
+        className="group/thread relative flex-1"
+        onPointerDownCapture={clearKeyboardFocus}
+      >
         <div
           id="fullscreen-portal"
           className="pointer-events-none absolute inset-0 z-20"
@@ -377,6 +477,13 @@ export function ConversationView({
           />
         )}
 
+        <MessageJumpPicker
+          open={jumpPickerOpen}
+          onOpenChange={setJumpPickerOpen}
+          items={items}
+          onJumpToMessage={handleJumpToMessage}
+        />
+
         <SessionTaskIdProvider taskId={taskId}>
           <VirtualizedList<ThreadRow>
             ref={listRef}