fix(chat): prefetch direct navigation intent

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/chat-navigation-link/chat-navigation-link.test.tsx

@@ -75,6 +75,12 @@ describe('ChatNavigationLink', () => {
     return link
   }
 
+  function pointerEvent(type: string, pointerType: 'mouse' | 'touch', init?: MouseEventInit) {
+    const event = new MouseEvent(type, { bubbles: true, ...init })
+    Object.defineProperty(event, 'pointerType', { value: pointerType })
+    return event
+  }
+
   it('prefetches the route and exact history after deliberate pointer intent', () => {
     const link = renderLink()
 
@@ -132,6 +138,59 @@ describe('ChatNavigationLink', () => {
     expect(prefetchQuery).not.toHaveBeenCalled()
   })
 
+  it('prefetches before direct mouse clicks and completed touch taps', () => {
+    const link = renderLink()
+
+    act(() => link.dispatchEvent(pointerEvent('pointerdown', 'mouse', { button: 0 })))
+
+    expect(linkPrefetch).toHaveBeenLastCalledWith(true)
+    expect(prefetchQuery).toHaveBeenCalledTimes(1)
+
+    act(() => link.dispatchEvent(new FocusEvent('focusout', { bubbles: true })))
+    prefetchQuery.mockClear()
+    act(() => link.dispatchEvent(pointerEvent('pointerup', 'touch', { button: 0 })))
+
+    expect(linkPrefetch).toHaveBeenLastCalledWith(true)
+    expect(prefetchQuery).toHaveBeenCalledTimes(1)
+  })
+
+  it('cancels touch-scroll pointer intent before it can prefetch', () => {
+    const link = renderLink()
+
+    act(() => {
+      link.dispatchEvent(pointerEvent('pointerdown', 'touch', { button: 0 }))
+      link.dispatchEvent(pointerEvent('pointercancel', 'touch', { button: 0 }))
+    })
+
+    expect(linkPrefetch).toHaveBeenLastCalledWith(false)
+    expect(prefetchQuery).not.toHaveBeenCalled()
+  })
+
+  it('does not prefetch when a nested chat action is pressed', () => {
+    act(() => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <ChatNavigationLink chatId='chat-1' href='/workspace/ws-1/chat/chat-1'>
+            <button type='button' onClick={(event) => event.preventDefault()}>
+              Chat options
+            </button>
+          </ChatNavigationLink>
+        </QueryClientProvider>
+      )
+    })
+    const button = container.querySelector('button')
+    if (!button) throw new Error('chat action not rendered')
+
+    act(() => {
+      button.dispatchEvent(pointerEvent('pointerdown', 'mouse', { button: 0 }))
+      button.dispatchEvent(pointerEvent('pointerup', 'touch', { button: 0 }))
+      button.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+    })
+
+    expect(linkPrefetch).toHaveBeenLastCalledWith(false)
+    expect(prefetchQuery).not.toHaveBeenCalled()
+  })
+
   it('does not prefetch the chat that is already open', () => {
     const link = renderLink('chat-1', true)
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/chat-navigation-link/chat-navigation-link.tsx

@@ -1,12 +1,34 @@
 'use client'
 
-import { type ComponentProps, useCallback, useEffect, useRef, useState } from 'react'
+import {
+  type ComponentProps,
+  type PointerEvent as ReactPointerEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import Link from 'next/link'
 import { mothershipChatHistoryQueryOptions } from '@/hooks/queries/mothership-chats'
 
 const CHAT_PREFETCH_DWELL_MS = 80
 
+function isUnmodifiedPrimaryPointer(event: ReactPointerEvent<HTMLAnchorElement>) {
+  const nestedAction =
+    event.target instanceof Element && event.target.closest('button, [role="button"]') !== null
+
+  return (
+    !event.defaultPrevented &&
+    !nestedAction &&
+    event.button === 0 &&
+    !event.metaKey &&
+    !event.ctrlKey &&
+    !event.shiftKey &&
+    !event.altKey
+  )
+}
+
 interface ChatNavigationLinkProps extends Omit<ComponentProps<typeof Link>, 'href' | 'prefetch'> {
   chatId: string
   href: string
@@ -22,6 +44,9 @@ export function ChatNavigationLink({
   onFocus,
   onMouseEnter,
   onMouseLeave,
+  onPointerCancel,
+  onPointerDown,
+  onPointerUp,
   onTouchStart,
   ...props
 }: ChatNavigationLinkProps) {
@@ -81,6 +106,23 @@ export function ChatNavigationLink({
         cancelScheduledPrefetch()
         setShouldPrefetchRoute(false)
       }}
+      onPointerDown={(event) => {
+        onPointerDown?.(event)
+        if (event.pointerType === 'mouse' && isUnmodifiedPrimaryPointer(event)) {
+          prefetchForIntent()
+        }
+      }}
+      onPointerUp={(event) => {
+        onPointerUp?.(event)
+        if (event.pointerType !== 'mouse' && isUnmodifiedPrimaryPointer(event)) {
+          prefetchForIntent()
+        }
+      }}
+      onPointerCancel={(event) => {
+        onPointerCancel?.(event)
+        cancelScheduledPrefetch()
+        setShouldPrefetchRoute(false)
+      }}
       onTouchStart={onTouchStart}
       onClick={(event) => {
         onClick?.(event)