Merge origin/main into show-image-previews-in-optimistic-messages

packages/app/src/components/message.tsx

@@ -21,7 +21,6 @@ import {
 } from "react";
 import type { ReactNode, ComponentType } from "react";
 import Markdown, { MarkdownIt } from "react-native-markdown-display";
-import * as Linking from "expo-linking";
 import MaskedView from "@react-native-masked-view/masked-view";
 import {
   Circle,
@@ -72,6 +71,7 @@ import { resolveToolCallIcon } from "@/utils/tool-call-icon";
 import { getNowMs, isPerfLoggingEnabled, perfLog } from "@/utils/perf";
 import { parseInlinePathToken, type InlinePathTarget } from "@/utils/inline-path";
 import { getMarkdownListMarker } from "@/utils/markdown-list";
+import { openExternalUrl } from "@/utils/open-external-url";
 export type { InlinePathTarget } from "@/utils/inline-path";
 import { useToolCallSheet } from "./tool-call-sheet";
 import { ToolCallDetailsContent } from "./tool-call-details";
@@ -119,6 +119,8 @@ const WEB_TOOLCALL_SHIMMER_KEYFRAME_CSS = `
   }
 `;
 let webToolCallShimmerRegistered = false;
+const SCROLL_EDGE_EPSILON = 0.5;
+type ScrollAxis = "x" | "y";
 
 function ensureWebToolCallShimmerKeyframes() {
   if (Platform.OS !== "web") {
@@ -145,6 +147,113 @@ function ensureWebToolCallShimmerKeyframes() {
   webToolCallShimmerRegistered = true;
 }
 
+function getWheelEventElementTarget(
+  event: WheelEvent,
+  fallback: HTMLElement
+): HTMLElement {
+  const { target } = event;
+  if (target instanceof HTMLElement) {
+    return target;
+  }
+  if (target instanceof Node && target.parentElement) {
+    return target.parentElement;
+  }
+  return fallback;
+}
+
+function canElementScrollInDirection(
+  element: HTMLElement,
+  axis: ScrollAxis,
+  delta: number
+): boolean {
+  if (delta === 0) {
+    return false;
+  }
+
+  const computedStyle = window.getComputedStyle(element);
+  const overflow = axis === "x" ? computedStyle.overflowX : computedStyle.overflowY;
+  const isScrollableOverflow =
+    overflow === "auto" || overflow === "scroll" || overflow === "overlay";
+  if (!isScrollableOverflow) {
+    return false;
+  }
+
+  const scrollPosition = axis === "x" ? element.scrollLeft : element.scrollTop;
+  const scrollSize =
+    axis === "x" ? element.scrollWidth - element.clientWidth : element.scrollHeight - element.clientHeight;
+  if (scrollSize <= SCROLL_EDGE_EPSILON) {
+    return false;
+  }
+
+  if (delta > 0) {
+    return scrollPosition < scrollSize - SCROLL_EDGE_EPSILON;
+  }
+  return scrollPosition > SCROLL_EDGE_EPSILON;
+}
+
+function canScrollInsideDetailFromTarget(
+  detailRoot: HTMLElement,
+  startElement: HTMLElement,
+  axis: ScrollAxis,
+  delta: number
+): boolean {
+  if (delta === 0) {
+    return false;
+  }
+
+  let current: HTMLElement | null = startElement;
+  while (current) {
+    if (canElementScrollInDirection(current, axis, delta)) {
+      return true;
+    }
+    if (current === detailRoot) {
+      break;
+    }
+    current = current.parentElement;
+  }
+  return false;
+}
+
+function shouldStopDetailWheelPropagation(
+  detailRoot: HTMLElement,
+  event: WheelEvent
+): boolean {
+  const startElement = getWheelEventElementTarget(event, detailRoot);
+  const verticalDelta = event.deltaY;
+  const horizontalDelta =
+    event.deltaX !== 0 ? event.deltaX : (event.shiftKey ? event.deltaY : 0);
+
+  const hasVerticalIntent = Math.abs(verticalDelta) > SCROLL_EDGE_EPSILON;
+  const hasHorizontalIntent = Math.abs(horizontalDelta) > SCROLL_EDGE_EPSILON;
+  if (!hasVerticalIntent && !hasHorizontalIntent) {
+    return false;
+  }
+
+  const canScrollVertically = hasVerticalIntent
+    ? canScrollInsideDetailFromTarget(detailRoot, startElement, "y", verticalDelta)
+    : false;
+  const canScrollHorizontally = hasHorizontalIntent
+    ? canScrollInsideDetailFromTarget(
+        detailRoot,
+        startElement,
+        "x",
+        horizontalDelta
+      )
+    : false;
+
+  if (hasVerticalIntent && hasHorizontalIntent) {
+    const isVerticalDominant = Math.abs(verticalDelta) >= Math.abs(horizontalDelta);
+    return isVerticalDominant
+      ? canScrollVertically || canScrollHorizontally
+      : canScrollHorizontally || canScrollVertically;
+  }
+
+  if (hasVerticalIntent) {
+    return canScrollVertically;
+  }
+  return canScrollHorizontally;
+}
+
 const userMessageStylesheet = StyleSheet.create((theme) => ({
   container: {
     flexDirection: "row",
@@ -587,12 +696,10 @@ export const AssistantMessage = memo(function AssistantMessage({
   );
 
   const handleLinkPress = useCallback((url: string) => {
-    if (Platform.OS === "web") {
-      window.open(url, "_blank", "noopener,noreferrer");
-    } else {
-      void Linking.openURL(url);
-    }
-    return true;
+    void openExternalUrl(url);
+    // react-native-markdown-display opens the link itself when this returns true.
+    // We already handled it above, so return false to avoid duplicate opens.
+    return false;
   }, []);
 
   const markdownRules = useMemo(() => {
@@ -1170,6 +1277,7 @@ const ExpandableBadge = memo(function ExpandableBadge({
   const hasDetailContent = Boolean(renderDetails);
   const detailContent =
     hasDetailContent && isExpanded ? renderDetails?.() : null;
+  const detailWrapperRef = useRef<View | null>(null);
 
   const nativeGradientIdRef = useRef(
     `shimmer-gradient-${Math.random().toString(36).substring(2, 9)}`
@@ -1289,6 +1397,28 @@ const ExpandableBadge = memo(function ExpandableBadge({
     shimmerTranslateX,
   ]);
 
+  useEffect(() => {
+    if (Platform.OS !== "web" || !isExpanded || !hasDetailContent) {
+      return;
+    }
+
+    const node = detailWrapperRef.current as unknown as HTMLElement | null;
+    if (!node || typeof node.addEventListener !== "function") {
+      return;
+    }
+
+    const stopWheelPropagation = (event: WheelEvent) => {
+      if (shouldStopDetailWheelPropagation(node, event)) {
+        event.stopPropagation();
+      }
+    };
+
+    node.addEventListener("wheel", stopWheelPropagation, { passive: true });
+    return () => {
+      node.removeEventListener("wheel", stopWheelPropagation);
+    };
+  }, [isExpanded, hasDetailContent]);
+
   const nativeShimmerPeakStyle = useAnimatedStyle(() => ({
     transform: [{ translateX: shimmerTranslateX.value }],
   }));
@@ -1525,6 +1655,7 @@ const ExpandableBadge = memo(function ExpandableBadge({
       </Pressable>
       {detailContent ? (
         <Pressable
+          ref={detailWrapperRef}
           style={expandableBadgeStylesheet.detailWrapper}
           onHoverIn={() => onDetailHoverChange?.(true)}
           onHoverOut={() => onDetailHoverChange?.(false)}