fix(pi): focus composer when clicking chat thread

packages/ui/src/features/pi-sessions/PiSessionView.tsx

@@ -29,6 +29,7 @@ import {
 } from "@posthog/ui/features/sessions/components/CloudSessionLifecycle";
 import { ChatThread } from "@posthog/ui/features/sessions/components/chat-thread/ChatThread";
 import type { PromptRecallHandler } from "@posthog/ui/features/sessions/components/chat-thread/composerPromptRecall";
+import { focusComposerOnPaneClick } from "@posthog/ui/features/sessions/components/focusComposerOnPaneClick";
 import { SessionInitializingView } from "@posthog/ui/features/sessions/components/SessionInitializingView";
 import { CHAT_CONTENT_MAX_WIDTH } from "@posthog/ui/features/sessions/constants";
 import { useMessagingModeStore } from "@posthog/ui/features/sessions/messagingModeStore";
@@ -224,6 +225,13 @@ export function PiSessionView({
       );
   }, [handleControllerError, piSessionController, taskId]);
 
+  const handleThreadClick = useCallback(
+    (event: React.MouseEvent) => {
+      focusComposerOnPaneClick(event, () => draftActions.requestFocus(taskId));
+    },
+    [draftActions, taskId],
+  );
+
   const restart = useCallback(() => {
     void piSessionController
       .restart(taskId)
@@ -379,7 +387,7 @@ export function PiSessionView({
           onRestart={restart}
         />
       )}
-      <Box className="min-h-0 flex-1">
+      <Box className="min-h-0 flex-1" onClick={handleThreadClick}>
         <ChatThread
           events={session.events}
           isPromptPending={isStreaming}

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

@@ -33,6 +33,7 @@ import {
   getGithubRefUrlFromEventTarget,
 } from "@posthog/ui/features/sessions/components/copyContextTarget";
 import { DropZoneOverlay } from "@posthog/ui/features/sessions/components/DropZoneOverlay";
+import { focusComposerOnPaneClick } from "@posthog/ui/features/sessions/components/focusComposerOnPaneClick";
 import { PendingChatView } from "@posthog/ui/features/sessions/components/PendingChatView";
 import { PlanStatusBar } from "@posthog/ui/features/sessions/components/PlanStatusBar";
 import { QueuedMessagesDock } from "@posthog/ui/features/sessions/components/QueuedMessagesDock";
@@ -502,21 +503,8 @@ export function SessionView({
       .catch(() => toast.error("Failed to attach files"));
   }, []);
 
-  const handlePaneClick = useCallback((e: React.MouseEvent) => {
-    const target = e.target as HTMLElement;
-
-    const interactiveSelector =
-      'button, a, input, textarea, select, [role="button"], [role="link"], [contenteditable="true"], [data-interactive]';
-    if (target.closest(interactiveSelector)) {
-      return;
-    }
-
-    const selection = window.getSelection();
-    if (selection && selection.toString().length > 0) {
-      return;
-    }
-
-    editorRef.current?.focus();
+  const handlePaneClick = useCallback((event: React.MouseEvent) => {
+    focusComposerOnPaneClick(event, () => editorRef.current?.focus());
   }, []);
 
   useAutoFocusOnTyping(editorRef, !isActiveSession);

packages/ui/src/features/sessions/components/focusComposerOnPaneClick.test.ts

@@ -0,0 +1,53 @@
+import type { MouseEvent as ReactMouseEvent } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { focusComposerOnPaneClick } from "./focusComposerOnPaneClick";
+
+function clickTarget(target: EventTarget): Pick<ReactMouseEvent, "target"> {
+  return { target };
+}
+
+afterEach(() => {
+  window.getSelection()?.removeAllRanges();
+  document.body.replaceChildren();
+});
+
+describe("focusComposerOnPaneClick", () => {
+  it.each([
+    {
+      name: "chat content",
+      markup: '<p id="target">Chat content</p>',
+      expectsFocus: true,
+    },
+    {
+      name: "an interactive element",
+      markup: '<button id="target">Open</button>',
+      expectsFocus: false,
+    },
+    {
+      name: "content marked as interactive",
+      markup: '<span id="target" data-interactive>Open</span>',
+      expectsFocus: false,
+    },
+  ])("focuses for $name only when appropriate", ({ markup, expectsFocus }) => {
+    document.body.innerHTML = markup;
+    const focusComposer = vi.fn();
+    const target = document.getElementById("target") as HTMLElement;
+
+    focusComposerOnPaneClick(clickTarget(target), focusComposer);
+
+    expect(focusComposer).toHaveBeenCalledTimes(expectsFocus ? 1 : 0);
+  });
+
+  it("does not focus while selecting chat content", () => {
+    document.body.innerHTML = '<p id="target">Chat content</p>';
+    const target = document.getElementById("target") as HTMLElement;
+    const range = document.createRange();
+    range.selectNodeContents(target);
+    window.getSelection()?.addRange(range);
+    const focusComposer = vi.fn();
+
+    focusComposerOnPaneClick(clickTarget(target), focusComposer);
+
+    expect(focusComposer).not.toHaveBeenCalled();
+  });
+});

packages/ui/src/features/sessions/components/focusComposerOnPaneClick.ts

@@ -0,0 +1,21 @@
+import type { MouseEvent } from "react";
+
+const INTERACTIVE_SELECTOR =
+  'button, a, input, textarea, select, [role="button"], [role="link"], [contenteditable="true"], [data-interactive]';
+
+export function focusComposerOnPaneClick(
+  event: Pick<MouseEvent, "target">,
+  focusComposer: () => void,
+): void {
+  const target = event.target;
+  if (!(target instanceof Element) || target.closest(INTERACTIVE_SELECTOR)) {
+    return;
+  }
+
+  const selection = window.getSelection();
+  if (selection && selection.toString().length > 0) {
+    return;
+  }
+
+  focusComposer();
+}