Migrate chat UI from Lit to React

[cpsievert]

Summary

This is primarily an internal refactoring — the user-facing chat UI, markdown rendering, tool cards, fullscreen mode, and external link dialog all behave identically. The Python and R packages require only minimal changes (the built JS assets consolidate from two bundles into one).

Under the hood, this rewrites the entire front-end from Lit custom elements to React, replacing ~1,750 lines of imperative DOM code with ~2,800 lines of declarative React components plus ~3,600 lines of new tests.

Motivation

The old architecture was built around three monolithic Lit classes that managed state through scattered DOM mutations, custom events, global window objects, and innerHTML injection via unsafeHTML(). This made the codebase difficult to reason about, test, and extend:

• State was implicit — spread across DOM attributes, element properties, and a global window.shinychat.hiddenToolRequests Set. To understand "what is the current state of the chat?" you needed to inspect multiple class instances, the window object, and the DOM itself.
• Zero JS-level tests — the imperative DOM coupling made unit testing impractical.
• HTML sanitization was fragile — a complex DOMPurify setup with lifecycle hooks, a WeakMap to preserve custom element attributes, and special allowlists for htmlwidget scripts.

What changed

Declarative rendering with centralized state

All state transitions now flow through a single useReducer with typed actions (chunk_start, chunk, chunk_end, clear, hide_tool_request, etc.). Components describe what the UI should look like for a given state; React figures out the minimal DOM changes. This eliminates entire categories of bugs where the DOM drifts out of sync with the logical state.

Composable markdown pipeline

Replaced marked → DOMPurify → innerHTML with a unified/remark/rehype pipeline that produces React elements directly from an AST — no HTML string serialization step. Each transformation (external link annotation, code highlighting, streaming dot injection, etc.) is an independent, testable rehype plugin.

Transport abstraction

Isolated all window.Shiny.* calls behind ChatTransport and ShinyLifecycle interfaces with a single implementation. React components are framework-agnostic and testable with mock transports. The legacy wire format translation is isolated to one function.

Granular re-rendering

memo-wrapped components skip rendering when props haven't changed — when one message is streaming, the other messages in the conversation are untouched. The markdown pipeline uses two-stage memoization: parsing (expensive, cached on content) and rendering (cheap, re-runs only when streaming toggles).

Build simplification

Two separate entry points with separate CSS bundles consolidate into a single shinychat.js + shinychat.css bundle, simplifying the R/Python HTML dependency declarations.

Comprehensive test suite

22 test files covering the state reducer, all hooks, all rehype/remark plugins, bridge components, transport layer, and integration flows. Regression tests are anchored to specific bugs. Vitest + jsdom + @testing-library/react.

Commits

1. feat: migrate chat UI from Lit to React — core migration (source, built assets, R/Python packages)
2. test: add JS test infrastructure and coverage — vitest setup, test files, CI integration
3. chore: add pre-commit hooks and gitignore updates

Test plan

• cd js && npm run lint passes
• cd js && npx vitest run passes
• uv run pytest passes (Python integration tests)
• cd pkg-r && Rscript -e "devtools::check(document = FALSE)" passes
• Manual smoke test: chat streaming, tool cards, fullscreen, external links

🤖 Generated with Claude Code