import * as Haptics from "expo-haptics"; import { KeyboardAwareLegendList } from "@legendapp/list/keyboard"; import { type LegendListRef } from "@legendapp/list/react-native"; import type { EnvironmentId, MessageId, ThreadId, TurnId } from "@t3tools/contracts"; import { CHAT_LIST_ANCHOR_OFFSET, resolveChatListAnchoredEndSpace } from "@t3tools/shared/chatList"; import { formatElapsed } from "@t3tools/shared/orchestrationTiming"; import { SymbolView } from "../../components/AppSymbol"; import { HeaderHeightContext } from "@react-navigation/elements"; import { useNavigation } from "@react-navigation/native"; import { memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode, type RefObject, } from "react"; import { Markdown, type CustomRenderers, type NodeStyleOverrides, type PartialMarkdownTheme, } from "react-native-nitro-markdown"; import { ActivityIndicator, Image, Linking, Platform, type LayoutChangeEvent, type NativeScrollEvent, type NativeSyntheticEvent, Pressable, ScrollView, StyleSheet, Text as NativeText, type ColorValue, useColorScheme, useWindowDimensions, View, } from "react-native"; import { TouchableOpacity } from "react-native-gesture-handler"; import ImageViewing from "react-native-image-viewing"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import Animated, { FadeIn, FadeInUp, LinearTransition, type SharedValue, } from "react-native-reanimated"; import { useThemeColor } from "../../lib/useThemeColor"; import { useFontFamily } from "../../lib/useFontFamily"; import { copyTextWithHaptic } from "../../lib/copyTextWithHaptic"; import { hasNativeSelectableMarkdownText, SelectableMarkdownText, type NativeMarkdownTextStyle, type SelectableMarkdownSkill, } from "../../native/SelectableMarkdownText"; import { AppText as Text } from "../../components/AppText"; import { CopyTextButton } from "../../components/CopyTextButton"; import { parseReviewCommentMessageSegments, type ReviewInlineComment, } from "../review/reviewCommentSelection"; import type { ReviewDiffTheme } from "../review/shikiReviewHighlighter"; import { resolveNativeReviewDiffView } from "../diffs/nativeReviewDiffSurface"; import { buildNativeReviewDiffData, createNativeReviewDiffTheme, NATIVE_REVIEW_DIFF_CONTENT_WIDTH, } from "../review/nativeReviewDiffAdapter"; import { buildReviewParsedDiff } from "../review/reviewModel"; import { cn } from "../../lib/cn"; import { deriveCenteredContentHorizontalPadding, type LayoutVariant } from "../../lib/layout"; import { resolveMarkdownFontSizes, resolveNativeMarkdownTypography, } from "../../lib/appearancePreferences"; import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider"; import { useAppearanceCodeSurface } from "../settings/appearance/useAppearanceCodeSurface"; import { markdownFileIconSource } from "@t3tools/mobile-markdown-text/file-icons"; import { resolveMarkdownLinkPresentation } from "@t3tools/mobile-markdown-text/links"; import { deriveThreadFeedPresentation, type ThreadFeedEntry, type ThreadFeedLatestTurn, } from "../../lib/threadActivity"; import type { ThreadContentPresentation } from "./threadContentPresentation"; import { ThreadWorkGroupToggle, ThreadWorkLog } from "./thread-work-log"; import { useMarkdownCodeHighlight } from "./markdownCodeHighlightState"; import { useAssetUrl } from "../../state/assets"; import { resolveWorkspaceRelativeFilePath } from "../files/filePath"; const MESSAGE_TIME_FORMATTER = new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit", }); function formatMessageTime(input: string): string { const timestamp = Date.parse(input); if (Number.isNaN(timestamp)) { return ""; } return MESSAGE_TIME_FORMATTER.format(timestamp); } // Rows shift when content above them grows (streaming text, work-log folds); // animating the container position turns those jumps into slides. const FEED_ITEM_LAYOUT_TRANSITION = LinearTransition.duration(180); // Entering animations must only play for rows born just now — LegendList // remounts rows when they scroll back into view, and replaying an entrance for // old content would be its own kind of jank. const FRESH_ENTRY_WINDOW_MS = 3_000; function isFreshTimestamp(input: string): boolean { const timestamp = Date.parse(input); return Number.isFinite(timestamp) && Date.now() - timestamp < FRESH_ENTRY_WINDOW_MS; } export interface ThreadFeedProps { readonly environmentId: EnvironmentId; readonly threadId: ThreadId; readonly workspaceRoot?: string | null; readonly feed: ReadonlyArray; readonly contentPresentation: ThreadContentPresentation; readonly agentLabel: string; readonly latestTurn: ThreadFeedLatestTurn | null; readonly activeWorkStartedAt: string | null; readonly listRef: RefObject; readonly freeze: SharedValue; readonly anchorMessageId: MessageId | null; readonly contentInsetEndAdjustment: SharedValue; readonly contentTopInset?: number; readonly contentBottomInset?: number; readonly contentMaxWidth?: number; readonly layoutVariant?: LayoutVariant; readonly usesAutomaticContentInsets?: boolean; readonly onHeaderMaterialVisibilityChange?: (visible: boolean) => void; readonly skills?: ReadonlyArray; } function MessageAttachmentImage(props: { readonly environmentId: EnvironmentId; readonly attachmentId: string; readonly className: string; readonly onPressImage: (uri: string, headers?: Record) => void; }) { const uri = useAssetUrl(props.environmentId, { _tag: "attachment", attachmentId: props.attachmentId, }); if (uri === null) { return ( ); } return ( props.onPressImage(uri)}> ); } const MARKDOWN_COLORS = { light: { body: "#111111", strong: "#000000", link: "#2563eb", blockquoteBorder: "rgba(0, 0, 0, 0.08)", blockquoteBackground: "rgba(0, 0, 0, 0.02)", codeBackground: "rgba(0, 0, 0, 0.04)", codeText: "#262626", inlineCodeText: "#5f6368", horizontalRule: "rgba(0, 0, 0, 0.08)", userBody: "#ffffff", userCodeBackground: "rgba(255, 255, 255, 0.22)", userCodeText: "#ffffff", userInlineCodeText: "rgba(255, 255, 255, 0.82)", userFenceBackground: "rgba(0, 0, 0, 0.16)", userFenceText: "#ffffff", }, dark: { body: "#e5e5e5", strong: "#f5f5f5", link: "#60a5fa", blockquoteBorder: "rgba(255, 255, 255, 0.1)", blockquoteBackground: "rgba(255, 255, 255, 0.03)", codeBackground: "rgba(255, 255, 255, 0.06)", codeText: "#e5e5e5", inlineCodeText: "#b8bcc2", horizontalRule: "rgba(255, 255, 255, 0.08)", userBody: "#ffffff", userCodeBackground: "rgba(255, 255, 255, 0.18)", userCodeText: "#ffffff", userInlineCodeText: "rgba(255, 255, 255, 0.82)", userFenceBackground: "rgba(0, 0, 0, 0.28)", userFenceText: "#ffffff", }, } as const; const MARKDOWN_MONO_FONT = Platform.select({ ios: "ui-monospace", android: "monospace", default: "monospace", }); interface MarkdownStyleSets { readonly user: MarkdownStyleSet; readonly assistant: MarkdownStyleSet; } interface MarkdownStyleSet { readonly theme: PartialMarkdownTheme; readonly styles: NodeStyleOverrides; readonly renderers: CustomRenderers; readonly nativeTextStyle: NativeMarkdownTextStyle; } interface ReviewCommentColors { readonly background: ColorValue; readonly border: ColorValue; readonly mutedBackground: ColorValue; readonly text: ColorValue; readonly mutedText: ColorValue; readonly codeBackground: ColorValue; } const failedMarkdownFaviconHosts = new Set(); const markdownLinkStyles = StyleSheet.create({ inlineIcon: { width: 14, height: 14, marginHorizontal: 3, transform: [{ translateY: 2 }], }, favicon: { borderRadius: 3, }, }); const MarkdownExternalLink = memo(function MarkdownExternalLink(props: { readonly children: ReactNode; readonly color: string; readonly host: string; readonly href: string; }) { const [failed, setFailed] = useState(() => failedMarkdownFaviconHosts.has(props.host)); return ( { void Linking.openURL(props.href); }} style={{ color: props.color, textDecorationLine: "none", }} > {!failed ? ( { failedMarkdownFaviconHosts.add(props.host); setFailed(true); }} /> ) : ( {" ◉ "} )} {props.children} ); }); function MarkdownCodeBlock(props: { readonly backgroundColor: string; readonly borderColor: string; readonly content: string; readonly copyTintColor: ColorValue; readonly headerTextColor: string; readonly fontSize: number; readonly highlightCode: boolean; readonly language?: string | null; readonly lineHeight: number; readonly textColor: string; readonly theme: ReviewDiffTheme; }) { const content = props.content.replace(/\n$/, ""); const languageLabel = props.language?.trim() || "text"; const highlighted = useMarkdownCodeHighlight({ code: content, enabled: props.highlightCode && Boolean(props.language?.trim()), language: props.language, theme: props.theme, }); let tokenOffset = 0; return ( {languageLabel} {highlighted ? highlighted.map((line, lineIndex) => { const lineStartOffset = tokenOffset; const lineText = line.map((token) => token.content).join(""); const renderedLine = ( {line.map((token) => { const startOffset = tokenOffset; tokenOffset += token.content.length; const fontStyle = token.fontStyle !== null && (token.fontStyle & 1) === 1 ? ("italic" as const) : ("normal" as const); const fontWeight = token.fontStyle !== null && (token.fontStyle & 2) === 2 ? ("700" as const) : ("400" as const); return ( {token.content} ); })} {lineIndex + 1 < highlighted.length ? "\n" : ""} ); if (lineIndex + 1 < highlighted.length) { tokenOffset += 1; } return renderedLine; }) : content} ); } function useReviewCommentColors(): ReviewCommentColors { const colorScheme = useColorScheme(); const isDark = colorScheme === "dark"; const background = isDark ? "#151515" : "#ffffff"; const border = isDark ? "#2a2a2a" : "#d7d7d7"; const mutedBackground = isDark ? "#242424" : "#f2f2f2"; const text = isDark ? "#f3f3f3" : "#111111"; const mutedText = isDark ? "#8f8f8f" : "#666666"; const codeBackground = isDark ? "#0f0f0f" : "#ffffff"; return useMemo( () => ({ background, border, mutedBackground, text, mutedText, codeBackground, }), [background, border, codeBackground, mutedBackground, mutedText, text], ); } function useMarkdownStyles(onLinkPress: (href: string) => void): MarkdownStyleSets { const colorScheme = useColorScheme(); const { appearance } = useAppearancePreferences(); const markdownFontSizes = useMemo( () => resolveMarkdownFontSizes(appearance.baseFontSize), [appearance.baseFontSize], ); const nativeMarkdownTypography = useMemo( () => resolveNativeMarkdownTypography(appearance.baseFontSize), [appearance.baseFontSize], ); const themeMode = colorScheme === "dark" ? "dark" : "light"; const colors = MARKDOWN_COLORS[themeMode]; const iconSubtleColor = String(useThemeColor("--color-icon-subtle")); const inlineSkillForeground = String(useThemeColor("--color-inline-skill-foreground")); const userBubbleForegroundMuted = String(useThemeColor("--color-user-bubble-foreground-muted")); const regularFontFamily = useFontFamily("regular"); const boldFontFamily = useFontFamily("bold"); return useMemo(() => { const markdownBodyColor = colors.body; const markdownStrongColor = colors.strong; const markdownLinkColor = colors.link; const markdownBlockquoteBg = colors.blockquoteBackground; const markdownBlockquoteBorder = colors.blockquoteBorder; const markdownCodeBg = colors.codeBackground; const markdownCodeText = colors.codeText; const markdownInlineCodeText = colors.inlineCodeText; const markdownHrColor = colors.horizontalRule; const markdownUserBodyColor = colors.userBody; const markdownUserCodeBg = colors.userCodeBackground; const markdownUserCodeText = colors.userCodeText; const markdownUserInlineCodeText = colors.userInlineCodeText; const markdownUserFenceBg = colors.userFenceBackground; const markdownUserFenceText = colors.userFenceText; const baseTheme: PartialMarkdownTheme = { colors: { text: markdownBodyColor, heading: markdownStrongColor, link: markdownLinkColor, blockquote: markdownBlockquoteBorder, border: markdownHrColor, surface: "transparent", surfaceLight: markdownBlockquoteBg, accent: markdownLinkColor, tableBorder: markdownHrColor, tableHeader: markdownBlockquoteBg, tableHeaderText: markdownStrongColor, tableRowOdd: "transparent", tableRowEven: "transparent", }, spacing: { xs: 4, s: 4, m: 8, l: 8, xl: 16, }, fontSizes: { s: markdownFontSizes.s, m: markdownFontSizes.m, h1: markdownFontSizes.h1, h2: markdownFontSizes.h2, h3: markdownFontSizes.h3, h4: markdownFontSizes.h4, h5: markdownFontSizes.h5, h6: markdownFontSizes.h6, }, fontFamilies: { regular: regularFontFamily, heading: boldFontFamily, mono: MARKDOWN_MONO_FONT, }, headingWeight: "700", borderRadius: { s: 4, m: 8, l: 12, }, showCodeLanguage: false, }; const baseStyles: NodeStyleOverrides = { document: { flexShrink: 1 }, paragraph: { marginTop: 0, marginBottom: 10 }, list: { marginTop: 4, marginBottom: 8 }, list_item: { marginTop: 0, marginBottom: 4 }, task_list_item: { marginTop: 0, marginBottom: 4 }, text: { lineHeight: markdownFontSizes.bodyLineHeight }, bold: { fontWeight: "700", color: markdownStrongColor, fontFamily: boldFontFamily, }, italic: { fontStyle: "italic" }, link: { color: markdownLinkColor, textDecorationLine: "underline" as const, }, blockquote: { borderLeftWidth: 2, borderLeftColor: markdownBlockquoteBorder, paddingLeft: 11, paddingVertical: 2, marginLeft: 0, marginVertical: 10, }, heading: { fontFamily: boldFontFamily, color: markdownStrongColor, marginTop: 18, marginBottom: 8, }, horizontal_rule: { backgroundColor: markdownHrColor, height: 1, marginVertical: 12, }, }; const createMarkdownRenderers = ( inlineTextColor: string, inlineCodeTextColor: string, blockBackgroundColor: string, blockTextColor: string, copyTintColor: ColorValue, preserveSoftBreaks: boolean, highlightCode: boolean, ): CustomRenderers => ({ link: ({ children, href = "" }) => { const presentation = resolveMarkdownLinkPresentation(href); if (presentation.kind === "file") { return ( onLinkPress(href)} style={{ color: inlineTextColor }} > {presentation.label} ); } if (presentation.kind === "external") { return ( {children} ); } const linkHref = presentation.href; return ( { void Linking.openURL(linkHref); } : undefined } style={{ color: markdownLinkColor }} > {children} ); }, list: ({ node, Renderer, ordered = false, start = 1 }) => ( {node.children?.map((child, index) => { const childKey = `${child.type}:${child.beg ?? "unknown"}:${child.end ?? "unknown"}`; if (child.type === "task_list_item") { return ( ); } return ( {ordered ? `${start + index}.` : "•"} ); })} ), code_inline: ({ content }) => { const value = content ?? ""; return ( {value} ); }, ...(preserveSoftBreaks ? { soft_break: () => {"\n"}, } : {}), code_block: ({ content = "", language }) => ( ), }); const userTheme: PartialMarkdownTheme = { ...baseTheme, colors: { ...baseTheme.colors, text: markdownUserBodyColor, heading: markdownUserBodyColor, link: markdownUserBodyColor, code: markdownUserCodeText, codeBackground: markdownUserCodeBg, border: markdownUserFenceBg, }, }; const userStyles: NodeStyleOverrides = { ...baseStyles, paragraph: { marginTop: 0, marginBottom: 0 }, bold: { fontWeight: "700", color: markdownUserBodyColor, fontFamily: boldFontFamily, }, heading: { ...baseStyles.heading, color: markdownUserBodyColor, marginTop: 8, marginBottom: 4, }, link: { color: markdownUserBodyColor, textDecorationLine: "underline" as const, }, }; const assistantTheme: PartialMarkdownTheme = { ...baseTheme, colors: { ...baseTheme.colors, code: markdownCodeText, codeBackground: markdownCodeBg, border: markdownCodeBg, }, }; const assistantStyles: NodeStyleOverrides = { ...baseStyles, }; return { user: { theme: userTheme, styles: userStyles, renderers: createMarkdownRenderers( markdownUserCodeText, markdownUserInlineCodeText, markdownUserFenceBg, markdownUserFenceText, userBubbleForegroundMuted, true, false, ), nativeTextStyle: { color: markdownUserBodyColor, strongColor: markdownUserBodyColor, mutedColor: markdownUserBodyColor, linkColor: markdownUserBodyColor, inlineCodeColor: markdownUserInlineCodeText, codeColor: markdownUserCodeText, codeBackgroundColor: markdownUserCodeBg, codeBlockBackgroundColor: markdownUserFenceBg, fileTextColor: "#ffffff", skillTextColor: "#f0abfc", quoteMarkerColor: markdownUserBodyColor, dividerColor: markdownUserBodyColor, fontSize: nativeMarkdownTypography.fontSize, lineHeight: nativeMarkdownTypography.lineHeight, headingFontSizes: nativeMarkdownTypography.headingFontSizes, fontFamily: regularFontFamily, headingFontFamily: boldFontFamily, boldFontFamily, }, }, assistant: { theme: assistantTheme, styles: assistantStyles, renderers: createMarkdownRenderers( markdownCodeText, markdownInlineCodeText, markdownCodeBg, markdownCodeText, iconSubtleColor, false, true, ), nativeTextStyle: { color: markdownBodyColor, strongColor: markdownStrongColor, mutedColor: markdownBodyColor, linkColor: markdownLinkColor, inlineCodeColor: markdownInlineCodeText, codeColor: markdownCodeText, codeBackgroundColor: markdownCodeBg, codeBlockBackgroundColor: markdownCodeBg, fileTextColor: markdownCodeText, skillTextColor: inlineSkillForeground, quoteMarkerColor: markdownBlockquoteBorder, dividerColor: markdownHrColor, fontSize: nativeMarkdownTypography.fontSize, lineHeight: nativeMarkdownTypography.lineHeight, headingFontSizes: nativeMarkdownTypography.headingFontSizes, fontFamily: regularFontFamily, headingFontFamily: boldFontFamily, boldFontFamily, }, }, }; }, [ boldFontFamily, colors, iconSubtleColor, inlineSkillForeground, markdownFontSizes, nativeMarkdownTypography, onLinkPress, regularFontFamily, themeMode, userBubbleForegroundMuted, ]); } function renderFeedEntry( info: { item: ThreadFeedEntry; index: number }, props: Pick & { readonly copiedRowId: string | null; readonly expandedWorkRows: Record; readonly terminalAssistantMessageIds: ReadonlySet; readonly unsettledTurnId: TurnId | null; readonly onCopyWorkRow: (rowId: string, value: string) => void; readonly onToggleWorkGroup: (groupId: string) => void; readonly onToggleWorkRow: (rowId: string) => void; readonly onToggleTurnFold: (turnId: TurnId) => void; readonly onPressImage: (uri: string, headers?: Record) => void; readonly onMarkdownLinkPress: (href: string) => void; readonly iconSubtleColor: string | import("react-native").ColorValue; readonly userBubbleColor: string | import("react-native").ColorValue; readonly markdownStyles: MarkdownStyleSets; readonly reviewCommentColors: ReviewCommentColors; readonly reviewCommentBubbleWidth: number; readonly userBubbleMaxWidth: number; }, ) { const entry = info.item; const { markdownStyles, iconSubtleColor, userBubbleColor } = props; if (entry.type === "working") { return ; } if (entry.type === "turn-fold") { return ( props.onToggleTurnFold(entry.turnId)} hitSlop={4} className="mb-3 min-h-11 flex-row items-center gap-2 border-b border-neutral-200/80 px-2 dark:border-white/[0.08]" > {entry.label} ); } if (entry.type === "work-toggle") { return ( props.onToggleWorkGroup(entry.groupId)} /> ); } if (entry.type === "message") { const { message } = entry; const isUser = message.role === "user"; const styles = isUser ? markdownStyles.user : markdownStyles.assistant; const timestampLabel = formatMessageTime(isUser ? message.createdAt : message.updatedAt); const attachments = message.attachments ?? []; const hasReviewCommentContext = message.text.includes(" {message.text.trim().length > 0 ? ( ) : null} {attachments.map((attachment) => { return ( ); })} {timestampLabel} {message.text.trim().length > 0 ? ( ) : null} ); } // Skip empty assistant messages (no text, no attachments) — they would // render as an orphaned timestamp and break adjacent activity-group merging. if (message.text.trim().length === 0 && attachments.length === 0) { return null; } const enterAnimated = isFreshTimestamp(message.createdAt); return ( {message.text.trim().length > 0 ? ( hasNativeSelectableMarkdownText() ? ( ) : ( {message.text} ) ) : null} {attachments.map((attachment) => { return ( ); })} {showAssistantMeta ? ( {timestampLabel} ) : null} ); } return ( ); } const WorkingTimelineRow = memo(function WorkingTimelineRow(props: { readonly startedAt: string }) { const [nowMs, setNowMs] = useState(() => Date.now()); useEffect(() => { const intervalId = setInterval(() => { setNowMs(Date.now()); }, 1_000); return () => clearInterval(intervalId); }, [props.startedAt]); const durationLabel = formatElapsed(props.startedAt, new Date(nowMs).toISOString()) ?? "0s"; return ( Working for {durationLabel} ); }); function UserMessageContent(props: { readonly text: string; readonly markdownStyles: MarkdownStyleSet; readonly reviewCommentColors: ReviewCommentColors; readonly skills?: ReadonlyArray; readonly onLinkPress: (href: string) => void; }) { const segments = parseReviewCommentMessageSegments(props.text); const hasReviewComment = segments.some((segment) => segment.kind === "review-comment"); if (!hasReviewComment) { if (hasNativeSelectableMarkdownText()) { return ( ); } return ( {props.text} ); } return ( {segments.map((segment) => { if (segment.kind === "review-comment") { return ( ); } const text = segment.text.trim(); if (text.length === 0) { return null; } return hasNativeSelectableMarkdownText() ? ( ) : ( {text} ); })} ); } const ReviewCommentCard = memo(function ReviewCommentCard(props: { readonly comment: ReviewInlineComment; readonly colors: ReviewCommentColors; }) { const { codeSurface, nativeReviewDiffStyle } = useAppearanceCodeSurface(); const colorScheme = useColorScheme(); const appearanceScheme = colorScheme === "light" ? "light" : "dark"; const NativeReviewDiffView = resolveNativeReviewDiffView(); const patch = useMemo(() => buildReviewCommentPatch(props.comment), [props.comment]); const parsedDiff = useMemo( () => buildReviewParsedDiff(patch, `thread-review-comment:${props.comment.id}`), [patch, props.comment.id], ); const nativeReviewDiffData = useMemo(() => buildNativeReviewDiffData(parsedDiff), [parsedDiff]); const compactNativeRows = useMemo( () => nativeReviewDiffData.rows.filter((row) => row.kind !== "file"), [nativeReviewDiffData.rows], ); const nativeReviewDiffTheme = useMemo( () => createNativeReviewDiffTheme(appearanceScheme), [appearanceScheme], ); const nativeRowsJson = useMemo(() => JSON.stringify(compactNativeRows), [compactNativeRows]); const nativeThemeJson = useMemo( () => JSON.stringify(nativeReviewDiffTheme), [nativeReviewDiffTheme], ); const nativeStyleJson = useMemo( () => JSON.stringify(nativeReviewDiffStyle), [nativeReviewDiffStyle], ); const nativeDiffHeight = useMemo( () => Math.min( 360, Math.max( 112, compactNativeRows.length * nativeReviewDiffStyle.rowHeight + nativeReviewDiffStyle.fileHeaderVerticalMargin, ), ), [compactNativeRows.length, nativeReviewDiffStyle], ); const shouldRenderNativeDiff = NativeReviewDiffView != null && compactNativeRows.length > 0; return ( {compactFileName(props.comment.filePath)} {shouldRenderNativeDiff ? ( ) : props.comment.diff.trim().length > 0 ? ( {props.comment.diff.trim()} ) : null} {props.comment.text.length > 0 ? ( {props.comment.text} ) : null} ); }); function buildReviewCommentPatch(comment: ReviewInlineComment): string { if ((comment.fenceLanguage ?? "diff") !== "diff") { return ""; } const diff = comment.diff.trim(); if (!diff) { return ""; } if (diff.startsWith("diff --git ")) { return diff; } const normalizedPath = comment.filePath.replaceAll("\\", "/"); return [ `diff --git a/${normalizedPath} b/${normalizedPath}`, `--- a/${normalizedPath}`, `+++ b/${normalizedPath}`, diff, ].join("\n"); } function compactFileName(filePath: string): string { const normalized = filePath.replaceAll("\\", "/"); const lastSlashIndex = normalized.lastIndexOf("/"); return lastSlashIndex >= 0 ? normalized.slice(lastSlashIndex + 1) : normalized; } function ThreadFeedPlaceholder(props: { readonly bottomInset: number; readonly detail: string; readonly horizontalPadding: number; readonly title: string; readonly topInset: number; }) { return ( {props.title} {props.detail} ); } export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) { const navigation = useNavigation(); const copyFeedbackTimeoutRef = useRef | null>(null); const foldSettleFrameRef = useRef(null); const foldSettleSecondFrameRef = useRef(null); const disclosureAnchorKeyRef = useRef(null); const headerMaterialVisibleRef = useRef(false); const previousLatestTurnRef = useRef(props.latestTurn); const { width: windowWidth } = useWindowDimensions(); const [viewportWidth, setViewportWidth] = useState(() => props.layoutVariant === "split" ? 0 : windowWidth, ); const [viewportHeight, setViewportHeight] = useState(0); const [disclosureToggleSettling, setDisclosureToggleSettling] = useState(false); const [interactionState, setInteractionState] = useState<{ readonly copiedRowId: string | null; readonly expandedWorkGroups: Record; readonly expandedWorkRows: Record; readonly expandedTurnIds: ReadonlySet; }>({ copiedRowId: null, expandedWorkGroups: {}, expandedWorkRows: {}, expandedTurnIds: new Set(), }); const { copiedRowId, expandedWorkGroups, expandedWorkRows, expandedTurnIds } = interactionState; const [expandedImage, setExpandedImage] = useState<{ uri: string; headers?: Record; } | null>(null); const horizontalPadding = props.layoutVariant === "split" ? 20 : 16; const contentHorizontalPadding = deriveCenteredContentHorizontalPadding({ viewportWidth, maxContentWidth: props.contentMaxWidth ?? null, minimumPadding: horizontalPadding, }); const contentWidth = Math.max(0, viewportWidth - contentHorizontalPadding * 2); const userBubbleMaxWidth = contentWidth * 0.85; const reviewCommentBubbleWidth = Math.min(Math.max(280, contentWidth * 0.85), contentWidth); const insets = useSafeAreaInsets(); const topContentInset = props.contentTopInset ?? insets.top + 44; const bottomContentInset = props.contentBottomInset ?? 18; const usesNativeAutomaticInsets = props.usesAutomaticContentInsets === true && Platform.OS === "ios"; // With automatic insets the header inset lives in UIKit's adjustedContentInset, // which LegendList's JS anchoring math cannot see — it measures the anchored // end space from the scroll view's frame top. Fold the header height back into // the anchor offset or a just-sent message anchors underneath the header and // the oversized end space keeps maintainScrollAtEnd snapping away from earlier // messages. Read the context directly (useHeaderHeight throws outside a // header-providing screen) and fall back to the standard iOS bar height. const navigationHeaderHeight = useContext(HeaderHeightContext); const anchorTopInset = usesNativeAutomaticInsets ? navigationHeaderHeight || insets.top + 44 : topContentInset; const iconSubtleColor = useThemeColor("--color-icon-subtle"); const userBubbleColor = useThemeColor("--color-user-bubble"); const onMarkdownLinkPress = useCallback( (href: string) => { const presentation = resolveMarkdownLinkPresentation(href); if (presentation.kind === "file") { const relativePath = resolveWorkspaceRelativeFilePath( props.workspaceRoot, presentation.path, ); if (relativePath) { void Haptics.selectionAsync(); navigation.navigate("ThreadFile", { environmentId: String(props.environmentId), threadId: String(props.threadId), path: relativePath.split("/").filter((segment) => segment.length > 0), ...(presentation.line ? { line: String(presentation.line) } : {}), }); } return; } if (presentation.href) { void Linking.openURL(presentation.href); } }, [props.environmentId, props.threadId, props.workspaceRoot, navigation], ); const markdownStyles = useMarkdownStyles(onMarkdownLinkPress); const reviewCommentColors = useReviewCommentColors(); // LegendList does not invalidate visible rows when only the renderItem closure changes. // Keep row-local interaction props in extraData so disclosures and copy feedback repaint. const listAppearanceData = useMemo( () => ({ copiedRowId, expandedWorkRows, iconSubtleColor, markdownStyles, reviewCommentColors, userBubbleColor, viewportWidth, }), [ copiedRowId, expandedWorkRows, iconSubtleColor, markdownStyles, reviewCommentColors, userBubbleColor, viewportWidth, ], ); const reportHeaderMaterialVisibility = useCallback( (visible: boolean) => { if (headerMaterialVisibleRef.current === visible) { return; } headerMaterialVisibleRef.current = visible; props.onHeaderMaterialVisibilityChange?.(visible); }, [props.onHeaderMaterialVisibilityChange], ); const handleScroll = useCallback( (event: NativeSyntheticEvent) => { // anchorTopInset, not topContentInset: under automatic insets the list // rests at contentOffset.y = -headerHeight (the inset lives only in // UIKit's adjustedContentInset, so topContentInset is 0 here). Add the // header height back or the material toggles a full header too late. reportHeaderMaterialVisibility(event.nativeEvent.contentOffset.y + anchorTopInset > 6); }, [reportHeaderMaterialVisibility, anchorTopInset], ); const handleViewportLayout = useCallback((event: LayoutChangeEvent) => { const nextWidth = Math.round(event.nativeEvent.layout.width); const nextHeight = Math.round(event.nativeEvent.layout.height); setViewportWidth((current) => (Math.abs(current - nextWidth) > 1 ? nextWidth : current)); setViewportHeight((current) => (Math.abs(current - nextHeight) > 1 ? nextHeight : current)); }, []); useEffect(() => { reportHeaderMaterialVisibility(false); }, [props.threadId, reportHeaderMaterialVisibility]); const expandedWorkGroupIds = useMemo(() => { const ids = new Set(); for (const [groupId, expanded] of Object.entries(expandedWorkGroups)) { if (expanded) { ids.add(groupId); } } return ids; }, [expandedWorkGroups]); const presentedFeed = useMemo( () => deriveThreadFeedPresentation( props.feed, props.latestTurn, expandedTurnIds, expandedWorkGroupIds, props.activeWorkStartedAt, ), [ expandedTurnIds, expandedWorkGroupIds, props.activeWorkStartedAt, props.feed, props.latestTurn, ], ); // The empty↔filled key below remounts the list, which resets its imperative // content-inset override — and useKeyboardChatComposerInset (mounted above // the remount boundary) deduplicates by height, so it never re-reports the // composer inset to the fresh instance. Without this, the remounted list's // initial scroll-to-end computes with a zero end inset and rests one // composer-height short of the end. Layout effect: it must land before the // list's first positioning tick or the one-shot initial scroll misses it. const listMountKey = `${props.threadId}:${props.feed.length === 0 ? "empty" : "filled"}`; useLayoutEffect(() => { const bottom = props.contentInsetEndAdjustment.value; if (bottom > 0) { props.listRef.current?.reportContentInset({ bottom }); } }, [listMountKey, props.contentInsetEndAdjustment, props.listRef]); const anchoredEndSpace = useMemo( () => resolveChatListAnchoredEndSpace( presentedFeed, props.anchorMessageId, (entry) => (entry.type === "message" ? entry.id : null), { anchorOffset: anchorTopInset + CHAT_LIST_ANCHOR_OFFSET }, ), [presentedFeed, props.anchorMessageId, anchorTopInset], ); const terminalAssistantMessageIds = useMemo(() => { const terminalIdsByTurn = new Map(); for (const entry of props.feed) { if (entry.type === "message" && entry.message.role === "assistant" && entry.message.turnId) { terminalIdsByTurn.set(entry.message.turnId, entry.message.id); } } return new Set(terminalIdsByTurn.values()); }, [props.feed]); const unsettledTurnId = props.latestTurn && (props.latestTurn.completedAt === null || props.latestTurn.state === "running") ? props.latestTurn.turnId : null; useEffect(() => { const previous = previousLatestTurnRef.current; previousLatestTurnRef.current = props.latestTurn; if (!props.latestTurn || !previous) { return; } if (props.latestTurn.turnId === previous.turnId) { if (previous.state === "running" && props.latestTurn.state === "interrupted") { const interruptedTurnId = props.latestTurn.turnId; setInteractionState((current) => ({ ...current, expandedTurnIds: new Set(current.expandedTurnIds).add(interruptedTurnId), })); } return; } setInteractionState((current) => { if (!current.expandedTurnIds.has(previous.turnId)) { return current; } const next = new Set(current.expandedTurnIds); next.delete(previous.turnId); return { ...current, expandedTurnIds: next }; }); }, [props.latestTurn]); useEffect(() => { return () => { if (copyFeedbackTimeoutRef.current) { clearTimeout(copyFeedbackTimeoutRef.current); } if (foldSettleFrameRef.current !== null) { cancelAnimationFrame(foldSettleFrameRef.current); } if (foldSettleSecondFrameRef.current !== null) { cancelAnimationFrame(foldSettleSecondFrameRef.current); } }; }, []); const suspendEndScrollMaintenanceForDisclosure = useCallback((anchorKey: string | null) => { disclosureAnchorKeyRef.current = anchorKey; setDisclosureToggleSettling(true); if (foldSettleFrameRef.current !== null) { cancelAnimationFrame(foldSettleFrameRef.current); } if (foldSettleSecondFrameRef.current !== null) { cancelAnimationFrame(foldSettleSecondFrameRef.current); } foldSettleFrameRef.current = requestAnimationFrame(() => { foldSettleSecondFrameRef.current = requestAnimationFrame(() => { disclosureAnchorKeyRef.current = null; setDisclosureToggleSettling(false); foldSettleFrameRef.current = null; foldSettleSecondFrameRef.current = null; }); }); }, []); const shouldRestoreVisibleContentPosition = useCallback((entry: ThreadFeedEntry) => { const disclosureAnchorKey = disclosureAnchorKeyRef.current; return disclosureAnchorKey === null || entry.id === disclosureAnchorKey; }, []); const maintainVisibleContentPosition = useMemo( () => ({ data: true, size: true, shouldRestorePosition: shouldRestoreVisibleContentPosition, }), [shouldRestoreVisibleContentPosition], ); const onCopyWorkRow = useCallback((rowId: string, value: string) => { copyTextWithHaptic(value, { target: "thread-work-row", feedback: "selection", }); setInteractionState((current) => ({ ...current, copiedRowId: rowId })); if (copyFeedbackTimeoutRef.current) { clearTimeout(copyFeedbackTimeoutRef.current); } copyFeedbackTimeoutRef.current = setTimeout(() => { setInteractionState((current) => current.copiedRowId === rowId ? { ...current, copiedRowId: null } : current, ); copyFeedbackTimeoutRef.current = null; }, 1200); }, []); const onToggleWorkGroup = useCallback( (groupId: string) => { suspendEndScrollMaintenanceForDisclosure(`work-toggle:${groupId}`); setInteractionState((current) => ({ ...current, expandedWorkGroups: { ...current.expandedWorkGroups, [groupId]: !(current.expandedWorkGroups[groupId] ?? false), }, })); }, [suspendEndScrollMaintenanceForDisclosure], ); const onToggleWorkRow = useCallback( (rowId: string) => { suspendEndScrollMaintenanceForDisclosure(rowId); setInteractionState((current) => ({ ...current, expandedWorkRows: { ...current.expandedWorkRows, [rowId]: !(current.expandedWorkRows[rowId] ?? false), }, })); }, [suspendEndScrollMaintenanceForDisclosure], ); const onToggleTurnFold = useCallback( (turnId: TurnId) => { suspendEndScrollMaintenanceForDisclosure(`turn-fold:${turnId}`); setInteractionState((current) => { const next = new Set(current.expandedTurnIds); if (next.has(turnId)) { next.delete(turnId); } else { next.add(turnId); } return { ...current, expandedTurnIds: next }; }); }, [suspendEndScrollMaintenanceForDisclosure], ); const onPressImage = useCallback((uri: string, headers?: Record) => { setExpandedImage({ uri, headers }); }, []); const renderItem = useCallback( (info: { item: ThreadFeedEntry; index: number }) => renderFeedEntry(info, { environmentId: props.environmentId, copiedRowId, expandedWorkRows, terminalAssistantMessageIds, unsettledTurnId, onCopyWorkRow, onToggleWorkGroup, onToggleWorkRow, onToggleTurnFold, onPressImage, onMarkdownLinkPress, iconSubtleColor, userBubbleColor, markdownStyles, reviewCommentColors, reviewCommentBubbleWidth, userBubbleMaxWidth, skills: props.skills, }), [ copiedRowId, expandedWorkRows, terminalAssistantMessageIds, unsettledTurnId, iconSubtleColor, userBubbleColor, markdownStyles, reviewCommentColors, reviewCommentBubbleWidth, userBubbleMaxWidth, onCopyWorkRow, onMarkdownLinkPress, onPressImage, onToggleTurnFold, onToggleWorkGroup, onToggleWorkRow, props.environmentId, props.skills, ], ); if (props.contentPresentation.kind === "unavailable") { return ( ); } return ( <> entry.id} getItemType={(entry) => entry.type === "message" ? `message:${entry.message.role}` : entry.type } keyboardShouldPersistTaps="always" keyboardDismissMode="none" keyboardLiftBehavior="whenAtEnd" // Seed the list's scroll math with the real viewport before its own // onLayout: the empty→filled remount can then tell at mount that // short content underflows the viewport and skip programmatic // positioning entirely (any offset write during screen attach races // UIKit's adjustedContentInset application and lands high or low). {...(viewportHeight > 0 && viewportWidth > 0 ? { estimatedListSize: { height: viewportHeight, width: viewportWidth } } : {})} // RN's native scrollTo command clamps targets to a floor of // -contentInset.top using the RAW inset — under automatic insets the // header inset only exists in adjustedContentInset, so scrolls to // negative offsets (content top below the transparent header) get // clamped to 0. This prop disables that clamp; UIKit still bounces // user overscroll back to the adjusted rest position. scrollToOverflowEnabled estimatedItemSize={180} initialScrollAtEnd onScroll={handleScroll} scrollEventThrottle={16} ListHeaderComponent={ usesNativeAutomaticInsets ? null : } contentContainerStyle={{ paddingTop: 12, paddingHorizontal: contentHorizontalPadding, }} /> {props.feed.length === 0 && props.activeWorkStartedAt === null && props.contentPresentation.kind === "ready" ? ( ) : null} setExpandedImage(null)} swipeToCloseEnabled doubleTapToZoomEnabled /> ); });