Demo

https://c4gt-opennyai.vercel.app

1. Interactive Version Timeline

The primary navigation tool for the user is the Version Timeline, located on the left side of the screen. This component, defined in src/components/ui/version-timeline.tsx, provides a "Git-like" chronological history of the selected chapter of the BBMP Act.

• Functionality: It lists every version of the document, from the original "v1.0" to the latest amended version, along with the amendment acts themselves. Each entry in the timeline is clickable, allowing the user to select and view that specific version in the main document viewer.

• Visual Cues: The currently active version is highlighted with a blue background and a solid blue dot, providing a clear visual indication of which version is being displayed. Each entry also includes a version tag (e.g., "v4.0"), the date of the version, and a brief message summarizing the changes, such as "Apply 2028 amendments to Sections 106, 107, and 109".

---

2. Dynamic Diffing Modes: Cumulative and Incremental

A key feature of the UI is the ability to switch between two different modes for viewing changes, controlled by the "Diff Mode" button in the header. This functionality is managed by the diffMode state in src/app/page.tsx.

• Cumulative Mode: This is the default mode. When a user selects a version (e.g., v4.0), it displays all the changes that have occurred from the original version (v1.0) up to that point. This gives the user a comprehensive view of the document's evolution. The logic for this is handled in the computeVersions function by chaining the amendment functions together, so each new version builds upon the diffs of the previous one.

• Incremental (Iterative) Mode: When the user toggles to this mode, the viewer shows only the changes introduced in that specific version compared to the immediately preceding one. For example, selecting v3.0 in this mode would only highlight the changes from the "Amendment Act, 2025 (B)," not the changes from the first amendment. This is useful for isolating and understanding the impact of a single amendment. The computeVersions function achieves this by applying the amendment to a "clean" version of the previous state (one without the diff tags).

---

3. The Document Viewer and Amendment Highlighting

The central part of the UI is the Document Viewer, which displays the content of the selected version. When viewing an amended version, the changes are highlighted directly in the text.

• Visual Representation:

  • Deletions: Text that has been removed is struck through and highlighted with a red background. This is achieved by wrapping the text in <del> tags with specific styling.

  • Insertions: New text that has been added is highlighted with a green background. This is done by wrapping the text in <ins> tags.

  • Amendment Tags: To indicate which amendment a specific change belongs to (especially in cumulative mode), a superscript tag like amend2 is added next to the highlighted text. This allows users to trace each change back to a specific legislative action. This is implemented in the applyAmend... functions in page.tsx.

---

4. The Change Summary Card

To provide a quick, quantitative overview of the modifications in the selected version, the UI includes a Change Summary card below the timeline. This feature is powered by the summarizeDiff function in src/app/page.tsx.

• Functionality: After the diffed HTML for the selected version is generated, this function parses the HTML to count the number of <ins> and <del> tags.

• Displayed Information:

  • Insertions and Deletions: It displays the total count of insertions and deletions in the current view.

  • Sections Touched: It also identifies and lists the specific sections of the act that have been modified (e.g., "Touched: Section 106, Section 107, Section 109"). This is done by checking which section IDs in the HTML contain the diff tags. This gives users an immediate sense of the scope and scale of the changes without having to read the entire document.