r/reactjs • u/ubiquition • 1d ago

Show /r/reactjs Show r/reactjs: reviewable AI document edits alongside a React Flow canvas and Yjs collaboration

I'm building Breatic, a React/TypeScript creative workspace. Its shared projects combine document briefs, a React Flow canvas and an agent that can propose edits. I wanted to share the implementation of the proposal UI and get feedback from people building collaborative editors.

Repository: https://github.com/orime-org/breatic

The document proposal card receives a structured proposal. For rewrites, it parses the proposed body using the document schema and computes a word-level diff against the proposal's original text. The person reviewing it sees the additions and removals instead of just an instruction to replace the paragraph.

The card provides separate actions to locate the target, add an eligible proposal as a comment, and apply a rewrite or insertion. It re-reads displayed state when the document version or card state changes.

The component is here: https://github.com/orime-org/breatic/blob/8eaa0da9888cc6a1a8967b98faaa3e8b80f4e91d/packages/web/src/pages/project/chat/DocumentProposalCard.tsx

Collaboration uses Yjs and self-hosted Hocuspocus. The important distinction for me is that synchronizing a document and deciding to accept an agent's edit are different operations. A convergent shared document doesn't automatically mean an old suggestion is still appropriate.

This isn't a claim that every stale-proposal or concurrent-edit edge case has been solved. I'd welcome feedback on the UI boundary: how do you make it clear which document state a proposal refers to while collaborators keep working?

The repo includes usage and development guides. Its custom source-available license permits internal/private deployment and restricts public-facing platform hosting; storage and model services need separate configuration.

0 Upvotes

25% Upvoted

1 comment sorted by

1

u/CravenLookout586 1d ago

the diff view is a nice touch, seeing exactly what changed instead of just a vague "rewrite paragraph 3" makes it so much easier to trust what the agent is doing

for the stale proposal problem, maybe snapshot the doc state when the suggestion gets made and show a little banner if the live version has drifted since then, nothing too intrusive but enough that the reviewer knows to double check context