Skip to content

perf(web): keep chat markdown mounted while text streams #255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
leoisadev1 merged 2 commits into from
Sep 11, 2026
Merged

perf(web): keep chat markdown mounted while text streams #255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
288d669
perf(web): keep chat markdown mounted while text streams
leoisadev1 Sep 10, 2026
424f183
Merge branch 'main' into fix/web-markdown-stream-stable-components
leoisadev1 Sep 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions apps/web/src/components/ChatMarkdown.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
// @effect-diagnostics nodeBuiltinImport:off - Source guard reads this module's renderer map.
import * as NodeFS from "node:fs";

import { EnvironmentId } from "@t3tools/contracts";
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it, vi } from "vite-plus/test";
Expand Down Expand Up @@ -35,6 +38,30 @@ import ChatMarkdown, {
shouldUseMarkdownFileBrowserPrimaryAction,
} from "./ChatMarkdown";

describe("ChatMarkdown streaming renderers", () => {
it("keeps one renderer map instead of recreating types when text streams", () => {
const source = NodeFS.readFileSync(new URL("./ChatMarkdown.tsx", import.meta.url), "utf8");

expect(source).toContain("const ChatMarkdownRendererContext");
expect(source).toContain("const CHAT_MARKDOWN_COMPONENTS: Components");
expect(source).toContain("components={CHAT_MARKDOWN_COMPONENTS}");
expect(source).toContain("pre: function MarkdownPre");
expect(source).toContain("details: function MarkdownDetailsRenderer");
expect(source).not.toMatch(/useMemo<Components>/);
});

it("still renders streamed fences and details after extra trailing text", () => {
const fence = ["```text", "First code block", "```", "", "Streaming reply"].join("\n");
const html = renderToStaticMarkup(
<ChatMarkdown cwd="/tmp/project" text={`${fence} 9`} isStreaming />,
);

expect(html).toContain('data-language="text"');
expect(html).toContain("First code block");
expect(html).toContain("Streaming reply 9");
});
Comment on lines +53 to +62

@greptile-apps greptile-apps Bot Sep 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Test streaming state

This test renders one static tree containing only a fenced code block and trailing text. It does not include <details>, change an interactive control, or rerender after text changes, so a later change that remounts markdown renderers during streaming could still pass while collapsing expanded details or resetting code controls. This is non-blocking, but add a client-rendered test that expands a details block or changes a code control, appends streamed text, and verifies the same node and its state are retained.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Artifacts

Mounted-state validation test

  • The focused test expands markdown details, updates streamed text, and checks that the same node remains open.

Mounted-state validation command

  • The saved command runs the focused mounted-state validation.

Mounted-state validation output

  • The recorded output shows the focused mounted-state test passed.

View artifacts

T-Rex Ran code and verified through T-Rex

Fix in Claude Code

});

describe("canUseMarkdownFileShellActions", () => {
const environmentId = EnvironmentId.make("environment-1");

Expand Down
Loading
Loading