feat: Improve ai suggestion output ui #256
Conversation
📝 WalkthroughWalkthroughThis PR improves feature suggestion output by removing early progress event emission on the server side and enhancing the UI with a dual-view mode (parsed logs via LogViewer or raw text), better formatting for tool events with JSON input display, and improved progress visibility with a waiting state indicator. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
Summary of ChangesHello @Shironex, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request refactors the AI suggestion output display to provide a more user-friendly and informative experience. By integrating a dedicated log viewer and introducing a toggle for parsed versus raw output, users gain better insight into the AI's analysis process. This change also streamlines the initial progress reporting and enhances the detail provided for AI tool interactions. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
Shironex
added
Enhancement
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request significantly improves the user interface for AI suggestion output by integrating the LogViewer component, which provides a much richer experience with both parsed and raw log views. The logic for handling the generation state has also been correctly improved. The changes are well-implemented, with just one minor opportunity to reduce code duplication in the new view mode toggle buttons for better long-term maintainability.
apps/ui/src/components/views/board-view/dialogs/feature-suggestions-dialog.tsx
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/ui/src/components/views/board-view/dialogs/feature-suggestions-dialog.tsx (2)
128-132: Consider wrappingJSON.stringifyin a try-catch for defensive coding.While
event.inputis likely pre-validated server-side,JSON.stringifycan throw on circular references or certain edge cases. A defensive approach would prevent potential runtime errors:🔎 Proposed defensive fix
} else if (event.type === 'suggestions_tool') { const toolName = event.tool || 'Unknown Tool'; - const toolInput = event.input ? JSON.stringify(event.input, null, 2) : ''; + let toolInput = ''; + if (event.input) { + try { + toolInput = JSON.stringify(event.input, null, 2); + } catch { + toolInput = String(event.input); + } + } const formattedTool = `\n🔧 Tool: ${toolName}\n${toolInput ? `Input: ${toolInput}\n` : ''}`; setProgress((prev) => [...prev, formattedTool]);
381-412: Consider adding accessibility attributes to the toggle buttons.The toggle buttons function as a tab-like selection but lack semantic attributes for screen readers. Adding
aria-pressedwould improve accessibility:🔎 Proposed accessibility improvement
<button onClick={() => setViewMode('parsed')} + aria-pressed={viewMode === 'parsed'} className={`flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium transition-all ${ viewMode === 'parsed' ? 'bg-primary/20 text-primary shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-accent' }`} data-testid="view-mode-parsed" > <List className="w-3 h-3" /> Logs </button> <button onClick={() => setViewMode('raw')} + aria-pressed={viewMode === 'raw'} className={`flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium transition-all ${ viewMode === 'raw' ? 'bg-primary/20 text-primary shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-accent' }`} data-testid="view-mode-raw" >
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/server/src/routes/suggestions/generate-suggestions.tsapps/ui/src/components/views/board-view/dialogs/feature-suggestions-dialog.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
apps/ui/src/components/views/board-view/dialogs/feature-suggestions-dialog.tsx (1)
apps/ui/src/components/ui/log-viewer.tsx (1)
LogViewer(406-764)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: e2e
🔇 Additional comments (6)
apps/ui/src/components/views/board-view/dialogs/feature-suggestions-dialog.tsx (5)
24-26: LGTM!New imports are correctly added and all are used in the component - icons for the view mode toggle buttons and LogViewer for the parsed log display.
Also applies to: 35-35
98-98: LGTM!State declaration is appropriate with a sensible default of
'parsed'to showcase the improved UI by default.
250-258: LGTM!Adding the required
steps: []field ensures Feature objects satisfy the type contract. Empty array is appropriate for imported suggestions.
307-307: LGTM!Including
isGeneratingin the condition ensures immediate UI transition when generation starts, even before any progress events arrive. This works well with the new waiting state indicator.
419-430: LGTM with minor optimization opportunity.The waiting state and dual-view rendering logic is well-structured. The waiting indicator provides good feedback during server latency.
For a minor optimization, consider memoizing
progress.join('')since it's computed on every render:🔎 Optional memoization (nice-to-have)
const progressOutput = useMemo(() => progress.join(''), [progress]);Then use
progressOutputin bothLogViewerand raw display. This is optional since the progress array is likely small.apps/server/src/routes/suggestions/generate-suggestions.ts (1)
66-67: The code change is correct and the UI properly handles the waiting state.The removal of the initial progress event aligns with the PR objectives. Verification confirms the UI properly displays a loading state ("Waiting for AI response...") with a spinner while waiting for the first agent message, preventing any blank screen or hung appearance. The first agent message becomes the first entry in the progress log displayed by LogViewer, which is what the comment refers to as "captured as an info entry."
The comment could be slightly clearer (e.g., "The first agent message will appear as the first entry in the progress log"), but the implementation is solid with no functional issues or regression risk.
Old
New
Resolve
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.