feat(wren-ui): show intent reasoning for general answer#1868
Conversation
WalkthroughA new brain SVG icon component is introduced and exported for use within the application. The Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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). (2)
✨ Finishing Touches
🧪 Generate 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
wren-ui/src/utils/svgs/BrainSVG.tsx (1)
10-13: Width / height should be configurable for better re-use.Hard-coding
width="20"andheight="20"forces consumers to override via CSS every time a different size is required. Consider acceptingsize,width, andheightprops with sensible defaults and forwarding them to the<svg>element.wren-ui/src/components/pages/home/prompt/Result.tsx (1)
35-38: Prefer relative units over fixed PX for SVG sizing.The
.adm-brain-svgrule fixes the icon at14px. Usingem/remwould scale with user font-size settings and improve accessibility.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
wren-ui/src/components/pages/home/prompt/Result.tsx(3 hunks)wren-ui/src/utils/svgs/BrainSVG.tsx(1 hunks)wren-ui/src/utils/svgs/index.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
wren-ui/src/components/pages/home/prompt/Result.tsx (1)
wren-ui/src/utils/svgs/BrainSVG.tsx (1)
BrainSVG(1-30)
⏰ 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). (2)
- GitHub Check: Analyze (go)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (1)
wren-ui/src/utils/svgs/index.ts (1)
5-5: Re-export looks good.No concerns – the central
svgsbarrel now properly re-exports the newBrainSVGcomponent for tree-shakable imports elsewhere in the UI.
| <div className="bg-gray-2 gray-6 py-2 px-3"> | ||
| <div className="d-flex align-center"> | ||
| <BrainSVG className="mr-2 adm-brain-svg" /> | ||
| <span className="text-medium ">Analyzing Intent</span> | ||
| </div> | ||
| <div style={{ paddingLeft: 22 }}>{data?.intentReasoning}</div> | ||
| </div> | ||
|
|
There was a problem hiding this comment.
Render intent section only when reasoning is available.
If data.intentReasoning is empty or undefined, the UI still shows the “Analyzing Intent” header followed by a blank / undefined string, which feels broken.
- <div className="bg-gray-2 gray-6 py-2 px-3">
+ {!!data?.intentReasoning?.trim() && (
+ <div className="bg-gray-2 gray-6 py-2 px-3">
<div className="d-flex align-center">
<BrainSVG className="mr-2 adm-brain-svg" />
<span className="text-medium ">Analyzing Intent</span>
</div>
<div style={{ paddingLeft: 22 }}>{data.intentReasoning}</div>
- </div>
+ </div>
+ )}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="bg-gray-2 gray-6 py-2 px-3"> | |
| <div className="d-flex align-center"> | |
| <BrainSVG className="mr-2 adm-brain-svg" /> | |
| <span className="text-medium ">Analyzing Intent</span> | |
| </div> | |
| <div style={{ paddingLeft: 22 }}>{data?.intentReasoning}</div> | |
| </div> | |
| {!!data?.intentReasoning?.trim() && ( | |
| <div className="bg-gray-2 gray-6 py-2 px-3"> | |
| <div className="d-flex align-center"> | |
| <BrainSVG className="mr-2 adm-brain-svg" /> | |
| <span className="text-medium ">Analyzing Intent</span> | |
| </div> | |
| <div style={{ paddingLeft: 22 }}>{data.intentReasoning}</div> | |
| </div> | |
| )} |
🤖 Prompt for AI Agents
In wren-ui/src/components/pages/home/prompt/Result.tsx around lines 216 to 223,
the intent section renders the "Analyzing Intent" header and an empty or
undefined reasoning string even when data.intentReasoning is missing. To fix
this, wrap the entire intent section JSX in a conditional check that only
renders it if data.intentReasoning is truthy, preventing the header and empty
content from displaying when no reasoning is available.
| className="py-2 px-3" | ||
| style={{ maxHeight: 'calc(100vh - 420px)', overflowY: 'auto' }} | ||
| style={{ maxHeight: 'calc(100vh - 480px)', overflowY: 'auto' }} | ||
| > |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Magic 480px offset may break on future layout changes.
The scroll container’s maxHeight is manually adjusted from 420px to 480px to account for the new header. Consider calculating this via flexbox, CSS grid, or a CSS variable so the value stays correct if more elements are added or heights change.
🤖 Prompt for AI Agents
In wren-ui/src/components/pages/home/prompt/Result.tsx at line 228, the scroll
container's maxHeight is hardcoded as 480px, which is a magic number that may
break with future layout changes. Replace this fixed pixel value by using a CSS
variable, flexbox, or CSS grid to dynamically calculate the height based on the
header or surrounding elements, ensuring the layout adapts automatically if
element sizes change.
| stroke={fillCurrentColor ? 'currentColor' : undefined} | ||
| strokeWidth="1.5" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
| <path | ||
| d="M9.86341 9.78626C9.43808 10.1961 8.71083 10.2668 8.08927 9.91734C7.46766 9.56784 7.15026 8.90976 7.27946 8.33334" | ||
| stroke={fillCurrentColor ? 'currentColor' : undefined} | ||
| strokeWidth="1.5" |
There was a problem hiding this comment.
fillCurrentColor makes the icon disappear when set to false.
When fillCurrentColor is false, the stroke attribute is omitted, which defaults to none; both paths therefore render invisible. Either remove the prop or replace it with an explicit strokeColor fallback.
- stroke={fillCurrentColor ? 'currentColor' : undefined}
+ stroke={fillCurrentColor ? 'currentColor' : 'inherit'}(or introduce a strokeColor prop that defaults to currentColor).
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| stroke={fillCurrentColor ? 'currentColor' : undefined} | |
| strokeWidth="1.5" | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| /> | |
| <path | |
| d="M9.86341 9.78626C9.43808 10.1961 8.71083 10.2668 8.08927 9.91734C7.46766 9.56784 7.15026 8.90976 7.27946 8.33334" | |
| stroke={fillCurrentColor ? 'currentColor' : undefined} | |
| strokeWidth="1.5" | |
| stroke={fillCurrentColor ? 'currentColor' : 'inherit'} | |
| strokeWidth="1.5" | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| /> | |
| <path | |
| d="M9.86341 9.78626C9.43808 10.1961 8.71083 10.2668 8.08927 9.91734C7.46766 9.56784 7.15026 8.90976 7.27946 8.33334" | |
| stroke={fillCurrentColor ? 'currentColor' : undefined} | |
| strokeWidth="1.5" |
🤖 Prompt for AI Agents
In wren-ui/src/utils/svgs/BrainSVG.tsx around lines 18 to 26, the stroke
attribute is conditionally set to 'currentColor' or undefined based on
fillCurrentColor, causing the icon to disappear when fillCurrentColor is false
because stroke defaults to none. Fix this by either removing the
fillCurrentColor prop or replacing it with a strokeColor prop that defaults to
'currentColor', and use strokeColor explicitly for the stroke attribute to
ensure the paths always render visibly.
fredalai
force-pushed
the
feat/intent-reasoning
branch
from
eeb60a6 to
d109911
Compare
2 participants
Description
This PR adds intent reasoning support to the prompt result component. The feature displays AI's intent analysis reasoning to users, providing transparency about how the system interprets and processes their questions. This enhancement helps users understand the AI's thought process and reasoning behind the generated responses.
Implementation
The implementation adds a new intent reasoning section to the GeneralAnswer component in the prompt result. A new BrainSVG icon component was created to visually represent the intent analysis process. The intent reasoning is displayed in a styled container above the main answer content, showing the AI's analysis of the user's question intent.
Actual Changes
Added intent reasoning display section in
Result.tsxGeneralAnswer componentdata.intentReasoningcontent with proper indentationCreated new
BrainSVG.tsxcomponentfillCurrentColorandclassNameprops for flexibilityUpdated
svgs/index.tsto export the new BrainSVG componentScreenshots
(Deprecation)
Test Verification
Manual testing should verify:
Summary by CodeRabbit
New Features
Style