feat(playground/homepage): add Chat/Builder mode routing and showcase#224
Open
gargameljyh wants to merge 2 commits into
Open
feat(playground/homepage): add Chat/Builder mode routing and showcase#224gargameljyh wants to merge 2 commits into
gargameljyh wants to merge 2 commits into
Conversation
Use vue-router to separate chat and builder views, gate tabs by mode, and style the mode switcher as a compact capsule button group. Co-authored-by: Cursor <cursoragent@cursor.com>
Introduce HomeBuilderContent with demo assets and i18n, and wire it into the home page ability flow. Co-authored-by: Cursor <cursoragent@cursor.com>
WalkthroughThe homepage adds a localized, interactive Builder section. The playground gains Vue Router-based Chat and Builder modes, shared view context, separate routed views, and sidebar navigation controlled by route state and the template feature flag. ChangesHomepage Builder
Playground route-driven modes
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant PlaygroundSidebar
participant Router
participant BuilderView
participant GenuiTemplate
User->>PlaygroundSidebar: Select Builder mode
PlaygroundSidebar->>Router: Navigate to /builder
Router->>Router: Check VITE_ENABLE_TEMPLATE
Router->>BuilderView: Resolve Builder route
BuilderView->>GenuiTemplate: Render with shared context
Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
sites/playground/web/src/views/usePlaygroundViewContext.ts (1)
3-8: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDefine a shared typed
playgroundContextkey.
App.vuestill provides the context with a raw string key, and several consumers bypassusePlaygroundViewContext()(PlaygroundSidebar.vue,ModelConfig.vue,ToolCallConfig.vue,McpServerPanel.vue,SkillPanel.vue,AgentPanel.vue). Export a typedInjectionKey<PlaygroundViewContext>fromusePlaygroundViewContext.ts, use it inApp.vue, and route the directinject()calls through the helper.🤖 Prompt for 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. In `@sites/playground/web/src/views/usePlaygroundViewContext.ts` around lines 3 - 8, Define and export a typed InjectionKey<PlaygroundViewContext> from usePlaygroundViewContext.ts, and update its inject call to use that key. In App.vue, provide the context with the shared key instead of the raw string; update direct inject consumers in PlaygroundSidebar.vue (lines 32-33), ModelConfig.vue, ToolCallConfig.vue, McpServerPanel.vue, SkillPanel.vue, and AgentPanel.vue to call usePlaygroundViewContext() so all consumers share the typed context.
🤖 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 `@sites/homepage/web/src/components/HomeBuilderContent.vue`:
- Around line 91-95: Update the Playground CTA anchor in HomeBuilderContent.vue
to add rel="noopener noreferrer" alongside target="_blank", preserving its
existing href, styling, and content.
- Around line 91-95: Update the CTA anchor in HomeBuilderContent to target the
Builder route at /builder instead of linkMap[LinkKey.Playground]. Guard or hide
this CTA when the VITE_ENABLE_TEMPLATE feature flag is disabled, using the
component’s existing configuration or feature-flag pattern.
---
Nitpick comments:
In `@sites/playground/web/src/views/usePlaygroundViewContext.ts`:
- Around line 3-8: Define and export a typed InjectionKey<PlaygroundViewContext>
from usePlaygroundViewContext.ts, and update its inject call to use that key. In
App.vue, provide the context with the shared key instead of the raw string;
update direct inject consumers in PlaygroundSidebar.vue (lines 32-33),
ModelConfig.vue, ToolCallConfig.vue, McpServerPanel.vue, SkillPanel.vue, and
AgentPanel.vue to call usePlaygroundViewContext() so all consumers share the
typed context.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0058f2a2-df49-46ad-9b6c-3cc350a07489
⛔ Files ignored due to path filters (7)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlsites/homepage/web/src/assets/genui_builder_demo_chat.pngis excluded by!**/*.pngsites/homepage/web/src/assets/genui_builder_demo_preview.pngis excluded by!**/*.pngsites/homepage/web/src/assets/genui_builder_demo_version.pngis excluded by!**/*.pngsites/homepage/web/src/assets/genui_builder_icon_chat.svgis excluded by!**/*.svgsites/homepage/web/src/assets/genui_builder_icon_preview.svgis excluded by!**/*.svgsites/homepage/web/src/assets/genui_builder_icon_version.svgis excluded by!**/*.svg
📒 Files selected for processing (19)
sites/homepage/web/src/components/HomeAbility.vuesites/homepage/web/src/components/HomeBuilderContent.vuesites/homepage/web/src/i18n/en.jsonsites/homepage/web/src/i18n/zh.jsonsites/homepage/web/src/views/home.vuesites/playground/web/package.jsonsites/playground/web/src/App.vuesites/playground/web/src/components/PlaygroundSidebar.vuesites/playground/web/src/constants/index.tssites/playground/web/src/constants/playground-mode.tssites/playground/web/src/i18n/en.jsonsites/playground/web/src/i18n/zh.jsonsites/playground/web/src/main.tssites/playground/web/src/router/index.tssites/playground/web/src/views/BuilderView.vuesites/playground/web/src/views/ChatView.vuesites/playground/web/src/views/PlaygroundViewShell.vuesites/playground/web/src/views/index.tssites/playground/web/src/views/usePlaygroundViewContext.ts
Comment on lines
+91
to
+95
| <a :href="linkMap[LinkKey.Playground]" target="_blank" class="btn-link"> | ||
| <tiny-button class="home-builder-content-button" size="medium" round ghost> | ||
| {{ t('ability.builder.tryNow') }} | ||
| <img :src="arrowRightIcon" alt="arrow-right" /> | ||
| </tiny-button> |
There was a problem hiding this comment.
🔒 Security & Privacy | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the relevant component and nearby context
sed -n '1,180p' sites/homepage/web/src/components/HomeBuilderContent.vue
echo
echo '---'
# Find link map definition and usages
rg -n "linkMap|LinkKey|Playground|target=\"_blank\"|rel=\"" sites/homepage/web/src/components sites/homepage/web/src -g '!**/node_modules/**'Repository: opentiny/genui-sdk
Length of output: 10276
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Locate the link map definition and print its values
rg -n "const linkMap|export const linkMap|LinkKey" sites/homepage/web/src -g '!**/node_modules/**'
echo
echo '---'
# Show any config or constants defining the playground URL
rg -n "playground|builder" sites/homepage/web/src -g '!**/node_modules/**'Repository: opentiny/genui-sdk
Length of output: 8845
Add rel="noopener noreferrer" to the Playground CTA.
This external new-tab link uses target="_blank" without rel, leaving window.opener exposed.
🤖 Prompt for 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.
In `@sites/homepage/web/src/components/HomeBuilderContent.vue` around lines 91 -
95, Update the Playground CTA anchor in HomeBuilderContent.vue to add
rel="noopener noreferrer" alongside target="_blank", preserving its existing
href, styling, and content.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
rg -n -C 4 'VITE_ENABLE_TEMPLATE|/builder|redirect' sites/playground/web/srcRepository: opentiny/genui-sdk
Length of output: 3805
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== HomeBuilderContent.vue ==\n'
sed -n '1,180p' sites/homepage/web/src/components/HomeBuilderContent.vue
printf '\n== playground constants / link map references ==\n'
rg -n -C 3 'linkMap|PlaygroundMode|Builder|Chat|VITE_ENABLE_TEMPLATE' sites/homepage/web/src -g '!**/node_modules/**'
printf '\n== playground router ==\n'
sed -n '1,220p' sites/playground/web/src/router/index.ts
printf '\n== playground mode constants ==\n'
sed -n '1,200p' sites/playground/web/src/constants.tsRepository: opentiny/genui-sdk
Length of output: 24160
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '1,180p' sites/homepage/web/src/components/HomeBuilderContent.vueRepository: opentiny/genui-sdk
Length of output: 5439
🏁 Script executed:
#!/bin/bash
set -euo pipefail
fd -a 'constants*' sites/playground/web/src
printf '\n== PlaygroundMode references ==\n'
rg -n -C 2 'enum PlaygroundMode|PlaygroundMode' sites/playground/web/srcRepository: opentiny/genui-sdk
Length of output: 7464
Link this CTA to the Builder route. linkMap[LinkKey.Playground] points to the playground root, which redirects to /chat; use /builder here, and guard or hide the CTA when VITE_ENABLE_TEMPLATE is disabled.
🤖 Prompt for 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.
In `@sites/homepage/web/src/components/HomeBuilderContent.vue` around lines 91 -
95, Update the CTA anchor in HomeBuilderContent to target the Builder route at
/builder instead of linkMap[LinkKey.Playground]. Guard or hide this CTA when the
VITE_ENABLE_TEMPLATE feature flag is disabled, using the component’s existing
configuration or feature-flag pattern.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit