fix(mobile): chat folds stay closed until tapped, as on web and desktop

apps/mobile/src/features/threads/ThreadFeed.tsx

@@ -148,6 +148,7 @@ import { FONT_FAMILIES } from "../../lib/fontFamilies";
 import { scopedThreadKey } from "../../lib/scopedEntities";
 import { copyTextWithHaptic } from "../../lib/copyTextWithHaptic";
 import { downloadAndShareAttachment } from "../../lib/attachmentDownload";
+import { splitMarkdownDetails } from "../../lib/markdownDetails";
 import { hasWideMarkdownBlock } from "../../lib/wideMarkdownBlocks";
 import {
   SelectableMarkdownText,
@@ -1186,39 +1187,115 @@ const AssistantMarkdownContent = memo(function AssistantMarkdownContent(props: {
   readonly skills?: ReadonlyArray<SelectableMarkdownSkill> | undefined;
 }) {
   const liveMarkdown = useLiveThreadLinkLabels(props.markdown, props.environmentId);
-  const segments = useMemo(() => splitCodexArtifactTemplateMarkdown(liveMarkdown), [liveMarkdown]);
   const threadIcons = useThreadChipIcons(props.environmentId, liveMarkdown);
   const linkHandlers: MarkdownLinkHandlers = {
     ...props.linkHandlers,
     linkCustomization: (href) =>
       withChipIcon(props.linkHandlers.linkCustomization?.(href), threadIcons.get(href)),
   };
 
-  return segments.map((segment) => {
-    if (segment.kind === "artifact-template") {
+  return (
+    <AssistantMarkdownBlocks
+      markdown={liveMarkdown}
+      markdownStyles={props.markdownStyles}
+      linkHandlers={linkHandlers}
+      onUseArtifactTemplate={props.onUseArtifactTemplate}
+      renderImage={props.renderImage}
+      skills={props.skills}
+    />
+  );
+});
+
+// Folds split first, so an artifact card inside a fold stays inside it.
+function AssistantMarkdownBlocks(props: {
+  readonly markdown: string;
+  readonly markdownStyles: MarkdownStyleSet;
+  readonly linkHandlers: MarkdownLinkHandlers;
+  readonly onUseArtifactTemplate?: ((template: CodexArtifactTemplate) => void) | undefined;
+  readonly renderImage: MarkdownImageRenderer;
+  readonly skills?: ReadonlyArray<SelectableMarkdownSkill> | undefined;
+}) {
+  const blocks = useMemo(
+    () =>
+      splitMarkdownDetails(props.markdown).map((block) =>
+        block.kind === "details"
+          ? block
+          : { ...block, segments: splitCodexArtifactTemplateMarkdown(block.markdown) },
+      ),
+    [props.markdown],
+  );
+  return blocks.map((block) => {
+    if (block.kind === "details") {
       return (
-        <ArtifactTemplateCard
-          key={`artifact-template:${segment.sourceOffset}`}
-          template={segment.template}
-          onUse={props.onUseArtifactTemplate}
-        />
+        <MarkdownDetailsFold
+          key={`details:${block.sourceOffset}`}
+          summary={block.summary}
+          initiallyOpen={block.open}
+        >
+          <AssistantMarkdownBlocks {...props} markdown={block.body} />
+        </MarkdownDetailsFold>
       );
     }
-    if (segment.markdown.trim().length === 0) return null;
-
-    const markdown = renderCodexInlineDirectivesAsMarkdown(segment.markdown);
-    return (
-      <SelectableMarkdownText
-        key={`markdown:${segment.sourceOffset}`}
-        markdown={markdown}
-        skills={props.skills}
-        textStyle={props.markdownStyles.nativeTextStyle}
-        {...linkHandlers}
-        renderImage={props.renderImage}
-      />
-    );
+    return block.segments.map((segment) => {
+      const offset = block.sourceOffset + segment.sourceOffset;
+      if (segment.kind === "artifact-template") {
+        return (
+          <ArtifactTemplateCard
+            key={`artifact-template:${offset}`}
+            template={segment.template}
+            onUse={props.onUseArtifactTemplate}
+          />
+        );
+      }
+      if (segment.markdown.trim().length === 0) return null;
+      return (
+        <SelectableMarkdownText
+          key={`markdown:${offset}`}
+          markdown={renderCodexInlineDirectivesAsMarkdown(segment.markdown)}
+          skills={props.skills}
+          textStyle={props.markdownStyles.nativeTextStyle}
+          {...props.linkHandlers}
+          renderImage={props.renderImage}
+        />
+      );
+    });
   });
-});
+}
+
+function MarkdownDetailsFold(props: {
+  readonly summary: string;
+  readonly initiallyOpen: boolean;
+  readonly children: ReactNode;
+}) {
+  const [expanded, setExpanded] = useState(props.initiallyOpen);
+  const iconSubtleColor = useUniwindTheme()["--color-icon-subtle"];
+  return (
+    <View className="my-2 border-y border-border">
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={props.summary}
+        accessibilityState={{ expanded }}
+        hitSlop={4}
+        className="min-h-10 flex-row items-center gap-2 py-2"
+        onPress={() => {
+          void Haptics.selectionAsync();
+          setExpanded((value) => !value);
+        }}
+      >
+        <ThreadDisclosureChevron
+          expanded={expanded}
+          collapsedDirection="right"
+          size={12}
+          tintColor={iconSubtleColor}
+        />
+        <Text className="min-w-0 shrink font-t3-medium text-sm text-foreground">
+          {props.summary}
+        </Text>
+      </Pressable>
+      {expanded ? <View className="pb-3 pl-5">{props.children}</View> : null}
+    </View>
+  );
+}
 
 function useMarkdownStyles(): MarkdownStyleSets {
   const { appearance } = useAppearancePreferences();

apps/mobile/src/lib/markdownDetails.test.ts

@@ -0,0 +1,80 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import { splitMarkdownDetails } from "./markdownDetails";
+
+describe("splitMarkdownDetails", () => {
+  // regression: #28059 mobile chat showed every <details> fold open
+  it("splits a top-level fold into its summary and hidden body", () => {
+    const markdown =
+      "Short answer.\n\n<details>\n<summary>Long details</summary>\n\nA long paragraph.\n\n</details>\n\nAfter.";
+    expect(splitMarkdownDetails(markdown)).toEqual([
+      { kind: "markdown", markdown: "Short answer.\n\n", sourceOffset: 0 },
+      {
+        kind: "details",
+        summary: "Long details",
+        body: "\n\nA long paragraph.\n\n",
+        open: false,
+        sourceOffset: 15,
+      },
+      { kind: "markdown", markdown: "\n\nAfter.", sourceOffset: 87 },
+    ]);
+  });
+
+  it("keeps nested folds in the body and honours the open attribute", () => {
+    const markdown =
+      "<details open>\n<summary>Outer &amp; <code>more</code></summary>\n\n<details>\n<summary>Inner</summary>\n\nx\n\n</details>\n\n</details>";
+    const [fold] = splitMarkdownDetails(markdown);
+    expect(fold).toMatchObject({ kind: "details", summary: "Outer & more", open: true });
+    expect(fold?.kind === "details" && splitMarkdownDetails(fold.body)).toMatchObject([
+      { kind: "markdown" },
+      { kind: "details", summary: "Inner", body: "\n\nx\n\n" },
+      { kind: "markdown" },
+    ]);
+  });
+
+  it("leaves folds in code and inline tags as markdown", () => {
+    for (const markdown of [
+      "```html\n<details>\n<summary>Code</summary>\n</details>\n```",
+      "Use `<details>` for folds.",
+      "Text <details><summary>inline</summary>body</details> more",
+      "<!-- <details> -->\n\nVisible answer.",
+    ]) {
+      expect(splitMarkdownDetails(markdown)).toEqual([
+        { kind: "markdown", markdown, sourceOffset: 0 },
+      ]);
+    }
+  });
+
+  it("ignores a closing tag inside a code example in the fold", () => {
+    const markdown =
+      "<details>\n<summary>Example</summary>\n```html\n</details>\n```\n</details>\n\nAfter.";
+    expect(splitMarkdownDetails(markdown)).toMatchObject([
+      { kind: "details", summary: "Example", body: "\n```html\n</details>\n```\n" },
+      { kind: "markdown", markdown: "\n\nAfter." },
+    ]);
+  });
+
+  it("closes a fold at a closing tag that ends a paragraph", () => {
+    expect(
+      splitMarkdownDetails("<details>\n<summary>Plan</summary>\n\nDone </details>\n\nNext step"),
+    ).toMatchObject([
+      { kind: "details", summary: "Plan", body: "\n\nDone " },
+      { kind: "markdown", markdown: "\n\nNext step" },
+    ]);
+  });
+
+  it("folds the rest of a reply whose closing tag has not streamed yet", () => {
+    expect(splitMarkdownDetails("<details>\n<summary>Plan</summary>\n\nStep one")).toEqual([
+      { kind: "details", summary: "Plan", body: "\n\nStep one", open: false, sourceOffset: 0 },
+    ]);
+    expect(
+      splitMarkdownDetails("<details>\n<summary>Plan</summary>\n\n```html\n</details>"),
+    ).toMatchObject([{ kind: "details", body: "\n\n```html\n</details>" }]);
+  });
+
+  it("reads open only as an attribute name", () => {
+    expect(
+      splitMarkdownDetails('<details title="is open">\n<summary>Plan</summary>\n</details>'),
+    ).toMatchObject([{ kind: "details", open: false }]);
+  });
+});

apps/mobile/src/lib/markdownDetails.ts

@@ -0,0 +1,100 @@
+import type { RootContent } from "mdast";
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+
+import { decodeHtmlEntities, markdownHtmlTags } from "./markdownDocument";
+
+export type MarkdownDetailsSegment =
+  | { readonly kind: "markdown"; readonly markdown: string; readonly sourceOffset: number }
+  | {
+      readonly kind: "details";
+      readonly summary: string;
+      readonly body: string;
+      readonly open: boolean;
+      readonly sourceOffset: number;
+    };
+
+type OpenFold = { start: number; openTagEnd: number; open: boolean };
+
+const parser = unified().use(remarkParse);
+const DETAILS_TAG = /^<(\/?)details\b/i;
+const SUMMARY = /^\s*<summary\b[^>]*>([\s\S]*?)<\/summary\s*>/i;
+
+/**
+ * Splits top-level `<details>` blocks out of chat Markdown so they can render as folds.
+ * Tags inside code, or a fold opened inline in a paragraph, stay Markdown. A fold whose
+ * closing tag has not streamed yet runs to the end.
+ */
+export function splitMarkdownDetails(markdown: string): ReadonlyArray<MarkdownDetailsSegment> {
+  if (!/<details\b/i.test(markdown)) return [{ kind: "markdown", markdown, sourceOffset: 0 }];
+
+  const folds: Array<OpenFold & { end: number; closeTagLength: number }> = [];
+  let depth = 0;
+  // Asserted so the scan closure's writes are not narrowed away after the loop.
+  let current = null as OpenFold | null;
+  // A fold opens only at block level; once open, a tag inside a paragraph can close it.
+  const scan = (node: RootContent, inline: boolean) => {
+    if (node.type !== "html") {
+      if (depth > 0 && "children" in node) {
+        for (const child of node.children) scan(child, true);
+      }
+      return;
+    }
+    if (node.position?.start.offset === undefined) return;
+    const nodeStart = node.position.start.offset;
+    for (const tag of markdownHtmlTags(node.value)) {
+      const details = DETAILS_TAG.exec(tag[0]);
+      if (!details || (inline && depth === 0)) continue;
+      const start = nodeStart + tag.index;
+      if (details[1] !== "/") {
+        if (depth === 0) {
+          // Quoted values are blanked so `title="is open"` does not count as the attribute.
+          const attributes = tag[0].replace(/"[^"]*"|'[^']*'/g, '""');
+          current = {
+            start,
+            openTagEnd: start + tag[0].length,
+            open: /\sopen\b/i.test(attributes),
+          };
+        }
+        depth += 1;
+      } else if (depth > 0) {
+        depth -= 1;
+        if (depth === 0 && current) {
+          folds.push({ ...current, end: start + tag[0].length, closeTagLength: tag[0].length });
+          current = null;
+        }
+      }
+    }
+  };
+  for (const node of parser.parse(markdown).children) scan(node, false);
+  if (current) folds.push({ ...current, end: markdown.length, closeTagLength: 0 });
+  if (folds.length === 0) return [{ kind: "markdown", markdown, sourceOffset: 0 }];
+
+  const segments: MarkdownDetailsSegment[] = [];
+  let cursor = 0;
+  for (const fold of folds) {
+    if (fold.start > cursor) {
+      segments.push({
+        kind: "markdown",
+        markdown: markdown.slice(cursor, fold.start),
+        sourceOffset: cursor,
+      });
+    }
+    let body = markdown.slice(fold.openTagEnd, fold.end - fold.closeTagLength);
+    const summary = SUMMARY.exec(body);
+    if (summary) body = body.slice(summary[0].length);
+    const label = summary ? decodeHtmlEntities(summary[1]!.replace(/<[^>]*>/g, "")).trim() : "";
+    segments.push({
+      kind: "details",
+      summary: label || "Details",
+      body,
+      open: fold.open,
+      sourceOffset: fold.start,
+    });
+    cursor = fold.end;
+  }
+  if (cursor < markdown.length) {
+    segments.push({ kind: "markdown", markdown: markdown.slice(cursor), sourceOffset: cursor });
+  }
+  return segments;
+}

apps/mobile/src/lib/markdownDocument.ts

@@ -34,7 +34,7 @@ function decodeCodePoint(codePoint: number, entity: string): string {
   return String.fromCodePoint(codePoint);
 }
 
-function decodeHtmlEntities(value: string): string {
+export function decodeHtmlEntities(value: string): string {
   return value.replace(
     /&(?:#(\d+)|#x([0-9a-f]+)|amp|apos|gt|lt|nbsp|quot);/gi,
     (entity, decimal: string | undefined, hexadecimal: string | undefined) => {
@@ -125,7 +125,7 @@ function anchorMarkdown(tags: readonly string[]): AnchorState {
   return { pending: replacements, open: 0 };
 }
 
-function markdownHtmlTags(content: string): RegExpExecArray[] {
+export function markdownHtmlTags(content: string): RegExpExecArray[] {
   // An HTML block such as <details> can also contain Markdown fences and code spans.
   const codeRanges: Array<{ start: number; end: number }> = [];
   const tags = [...content.matchAll(HTML_TAG)];