chore(a2ui): generated output should show left by Sherry-hue · Pull Request #2657 · lynx-family/lynx-stack

Sherry-hue · 2026-05-18T07:56:48Z

Summary by CodeRabbit

New Features
- JSON output now displays in an interactive code editor with syntax highlighting, line numbers, folding, and bracket matching in the AI chat interface.
Style
- Added visual styles for the generated-JSON section, editor layout, badge, and title row.
Refactor
- Preview panel integration improved to present live JSON previews and clear them when a new message is sent.
Behavior
- QR code display can be toggled per preview item to suppress QR rendering when not applicable.

Checklist

Tests updated (or not required).
Documentation updated (or not required).
Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

changeset-bot · 2026-05-18T07:56:53Z

⚠️ No Changeset found

Latest commit: 89da870

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2026-05-18T07:57:46Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e30749ca-317b-4d5f-be48-c37b8222bff0

📥 Commits

Reviewing files that changed from the base of the PR and between 587ae5b and 89da870.

📒 Files selected for processing (3)

packages/genui/a2ui-playground/src/components/PreviewPanel.tsx
packages/genui/a2ui-playground/src/pages/AIChatPage.css
packages/genui/a2ui-playground/src/pages/AIChatPage.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

packages/genui/a2ui-playground/src/pages/AIChatPage.css
packages/genui/a2ui-playground/src/pages/AIChatPage.tsx

📝 Walkthrough

Walkthrough

The AI Chat Page now displays generated JSON using a read-only, dark-themed CodeMirror editor with JSON language support. Preview messages are stored in React state and exposed to PreviewPanel via a derived previewSource; the previous inline afterBody JSON/QR markup was removed. New CSS styles the JSON viewer container and editor visuals.

Changes

Generated JSON CodeMirror Display

Layer / File(s)	Summary
CodeMirror imports and extensions `packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`	Imports `@uiw/react-codemirror` and `@codemirror/lang-json`; defines `jsonExtensions` constant for the editor.
Preview messages state and publish flow `packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`	Adds `previewMessages` state, derives `previewSource` with `useMemo`, updates `publishPreviewMessages` to set state and ref, and clears `previewMessages` when a new generation starts.
JSON viewer rendering and PreviewPanel prop `packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`	Replaces `<pre>` JSON output with a conditional CodeMirror-based read-only JSON viewer (dark theme, JSON extension, basicSetup options) and passes `previewSource` into `PreviewPanel` (removing previous inline `afterBody` fragment).
PreviewPanel QR showQrCode flag `packages/genui/a2ui-playground/src/components/PreviewPanel.tsx`	Adds optional `showQrCode` to `PreviewQrItem`, computes `showQrCode` for Web/Native preview cards, and gates QR rendering on `item.url && item.showQrCode !== false`.
CSS for generated JSON viewer `packages/genui/a2ui-playground/src/pages/AIChatPage.css`	Adds `.chatGeneratedJson` styles for the container, title/badge row, and the embedded CodeMirror editor (height limits, scroller behavior, gutter/background colors, and active line highlighting).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

HuJean
gaoachao
PupilTong

Poem

🐰 I hopped through code to make JSON gleam,
Dark theme, snug lines — a syntax dream.
Preview state hums, the editor sings,
Brackets fold while the night owl wings.
Joyous bytes in a rabbit's beam.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title 'generated output should show left' is vague and doesn't clearly convey the main changes (moving generated JSON to CodeMirror editor in chat panel and updating QR code visibility logic).	Use a more descriptive title that explains the primary change, such as 'Move generated JSON to CodeMirror editor in chat panel' or 'Refactor generated JSON display and QR code visibility'.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2026-05-18T07:59:59Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

codspeed-hq · 2026-05-18T08:13:35Z

Merging this PR will not alter performance

⚠️

Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 1 improved benchmark
❌ 1 regressed benchmark
✅ 79 untouched benchmarks
⏩ 26 skipped benchmarks¹

Warning

Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Benchmark	`BASE`	`HEAD`	Efficiency
⚡	`004-various-update__main-thread-setAttribute__MT_Ref`	139.3 µs	129.9 µs	+7.29%
❌	`002-hello-reactLynx-destroyBackground`	865.2 µs	917.2 µs	-5.68%

Tip

Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.

_{Comparing Sherry-hue:fix/create-json-show (89da870) with main (2061597)}

26 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

relativeci · 2026-05-18T08:19:07Z

Web Explorer

#9995 Bundle Size — 901.94KiB (0%).

89da870(current) vs dae1d41 main#9993(baseline)

Bundle metrics

1 change

	Current #9995	Baseline #9993
Initial JS	`45.06KiB`	`45.06KiB`
Initial CSS	`2.22KiB`	`2.22KiB`
Cache Invalidation	`0%`	`0%`
Chunks	`9`	`9`
Assets	`11`	`11`
Modules	`230`(`+0.44%`)	`229`
Duplicate Modules	`11`	`11`
Duplicate Code	`27.19%`	`27.19%`
Packages	`10`	`10`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #9995	Baseline #9993
JS	`497.56KiB`	`497.56KiB`
Other	`402.16KiB`	`402.16KiB`
CSS	`2.22KiB`	`2.22KiB`

Bundle analysis report Branch Sherry-hue:fix/create-json-show Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-18T08:19:18Z

React MTF Example

#1554 Bundle Size — 208.12KiB (0%).

89da870(current) vs dae1d41 main#1552(baseline)

Bundle metrics no changes

	Current #1554	Baseline #1552
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`193`	`193`
Duplicate Modules	`77`	`77`
Duplicate Code	`44.24%`	`44.24%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #1554	Baseline #1552
IMG	`111.23KiB`	`111.23KiB`
Other	`96.89KiB`	`96.89KiB`

Bundle analysis report Branch Sherry-hue:fix/create-json-show Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-18T08:19:24Z

React Example with Element Template

#690 Bundle Size — 200.08KiB (0%).

89da870(current) vs dae1d41 main#688(baseline)

Bundle metrics

2 changes

	Current #690	Baseline #688
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`91`(`+1.11%`)	`90`
Duplicate Modules	`27`	`27`
Duplicate Code	`39.78%`(`-0.05%`)	`39.8%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #690	Baseline #688
IMG	`145.76KiB`	`145.76KiB`
Other	`54.32KiB`	`54.32KiB`

Bundle analysis report Branch Sherry-hue:fix/create-json-show Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-18T08:19:25Z

React Example

#8421 Bundle Size — 237.17KiB (0%).

89da870(current) vs dae1d41 main#8419(baseline)

Bundle metrics no changes

	Current #8421	Baseline #8419
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`198`	`198`
Duplicate Modules	`80`	`80`
Duplicate Code	`44.73%`	`44.73%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #8421	Baseline #8419
IMG	`145.76KiB`	`145.76KiB`
Other	`91.42KiB`	`91.42KiB`

Bundle analysis report Branch Sherry-hue:fix/create-json-show Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-18T08:19:42Z

React External

#1536 Bundle Size — 695.4KiB (0%).

89da870(current) vs dae1d41 main#1534(baseline)

Bundle metrics no changes

	Current #1536	Baseline #1534
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`17`	`17`
Duplicate Modules	`5`	`5`
Duplicate Code	`8.59%`	`8.59%`
Packages	`0`	`0`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #1536	Baseline #1534
Other	`695.4KiB`	`695.4KiB`

Bundle analysis report Branch Sherry-hue:fix/create-json-show Project dashboard

^{Generated by RelativeCI Documentation Report issue}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`:
- Around line 444-445: When starting a new generation the preview state is
cleared with setPreviewMessages(null) but the ref
latestPreviewMessagesRef.current is not reset, so handlePreviewLoad can
republish stale messages; update the start-of-generation flow (the code that
calls setPreviewMessages(null) and setIsGenerating(true)) to also clear
latestPreviewMessagesRef.current (set to null or an empty value) so the iframe
load handler (handlePreviewLoad) cannot access previous-run messages; locate
these symbols (previewMessages, latestPreviewMessagesRef, handlePreviewLoad,
setPreviewMessages, setIsGenerating) and ensure the ref is reset atomically when
beginning generation.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: c74ab5be-78bd-4777-a580-97a93e0683fd

📥 Commits

Reviewing files that changed from the base of the PR and between b0c59c7 and 587ae5b.

📒 Files selected for processing (2)

packages/genui/a2ui-playground/src/pages/AIChatPage.css
packages/genui/a2ui-playground/src/pages/AIChatPage.tsx

✅ Files skipped from review due to trivial changes (1)

packages/genui/a2ui-playground/src/pages/AIChatPage.css

HuJean reviewed May 18, 2026

View reviewed changes

Comment thread packages/genui/a2ui-playground/src/pages/AIChatPage.tsx Outdated

Sherry-hue force-pushed the fix/create-json-show branch from b0c59c7 to 587ae5b Compare May 18, 2026 08:24

coderabbitai Bot reviewed May 18, 2026

View reviewed changes

Comment thread packages/genui/a2ui-playground/src/pages/AIChatPage.tsx

chore(a2ui): generated output should show left

89da870

Sherry-hue force-pushed the fix/create-json-show branch from 587ae5b to 89da870 Compare May 18, 2026 09:38

Sherry-hue enabled auto-merge (squash) May 18, 2026 10:20

HuJean approved these changes May 18, 2026

View reviewed changes

Sherry-hue merged commit bce22d4 into lynx-family:main May 18, 2026
82 of 85 checks passed

This was referenced May 19, 2026

feat(a2ui): chat add action request and response #2667

Merged

feat(a2ui): add multi conversations #2676

Merged

feat(a2ui): use pexels to generate images #2684

Merged

Conversation

Sherry-hue commented May 18, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Checklist

Uh oh!

changeset-bot Bot commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

coderabbitai Bot commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

codecov Bot commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

codspeed-hq Bot commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will not alter performance

Performance Changes

Footnotes

Uh oh!

relativeci Bot commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Web Explorer

#9995 Bundle Size — 901.94KiB (0%).

Uh oh!

relativeci Bot commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React MTF Example

#1554 Bundle Size — 208.12KiB (0%).

Uh oh!

relativeci Bot commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example with Element Template

#690 Bundle Size — 200.08KiB (0%).

Uh oh!

relativeci Bot commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example

#8421 Bundle Size — 237.17KiB (0%).

Uh oh!

relativeci Bot commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React External

#1536 Bundle Size — 695.4KiB (0%).

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Sherry-hue commented May 18, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented May 18, 2026 •

edited

Loading

coderabbitai Bot commented May 18, 2026 •

edited

Loading

codecov Bot commented May 18, 2026 •

edited

Loading

codspeed-hq Bot commented May 18, 2026 •

edited

Loading

relativeci Bot commented May 18, 2026 •

edited

Loading

relativeci Bot commented May 18, 2026 •

edited

Loading

relativeci Bot commented May 18, 2026 •

edited

Loading

relativeci Bot commented May 18, 2026 •

edited

Loading

relativeci Bot commented May 18, 2026 •

edited

Loading