feat: add Reasoning AI element#864
Conversation
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01C7QST4WHS5DmTqgJkvQoyf
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01C7QST4WHS5DmTqgJkvQoyf
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01C7QST4WHS5DmTqgJkvQoyf
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughAdds a new Sequence Diagram(s)sequenceDiagram
participant Consumer
participant Reasoning
participant Collapsible
participant Content
Consumer->>Reasoning: Pass streaming and duration
Reasoning->>Collapsible: Update open state
Consumer->>Collapsible: Toggle trigger
Collapsible->>Content: Show or hide reasoning steps
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
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)
packages/raystack/components/reasoning/__tests__/reasoning.test.tsx (1)
6-10: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd controlled-state coverage.
This helper cannot render
openoronOpenChange, so the controlled branch is untested. Add a controlled wrapper that verifies trigger interaction requests state changes throughonOpenChangeand only reflects the parent-providedopenvalue.🤖 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 `@packages/raystack/components/reasoning/__tests__/reasoning.test.tsx` around lines 6 - 10, Add controlled-state coverage around the ReasoningExample test helper by introducing a wrapper that passes parent-managed open state and an onOpenChange handler. Verify trigger interaction requests state changes through onOpenChange, while rendering remains driven only by the parent-provided open value.
🤖 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 `@apps/www/src/content/docs/ai-elements/reasoning/demo.ts`:
- Around line 32-35: Update the onClick handler to clear any existing timer
through timerRef.current before starting the new three-second simulation, then
assign the newly created timeout to timerRef.current so only the latest timer
can set streaming to false.
In `@packages/raystack/components/reasoning/reasoning.tsx`:
- Around line 185-188: Update the label and children rendering conditions in the
reasoning component to render all valid ReactNode values, including falsy values
such as 0. Replace the truthiness checks with explicit null/undefined checks
while preserving the existing markup and styles.
---
Nitpick comments:
In `@packages/raystack/components/reasoning/__tests__/reasoning.test.tsx`:
- Around line 6-10: Add controlled-state coverage around the ReasoningExample
test helper by introducing a wrapper that passes parent-managed open state and
an onOpenChange handler. Verify trigger interaction requests state changes
through onOpenChange, while rendering remains driven only by the parent-provided
open value.
🪄 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 Plus
Run ID: d722b958-4121-4347-bdf9-cc27432b1e6c
📒 Files selected for processing (9)
apps/www/src/content/docs/ai-elements/meta.jsonapps/www/src/content/docs/ai-elements/reasoning/demo.tsapps/www/src/content/docs/ai-elements/reasoning/index.mdxapps/www/src/content/docs/ai-elements/reasoning/props.tspackages/raystack/components/reasoning/__tests__/reasoning.test.tsxpackages/raystack/components/reasoning/index.tsxpackages/raystack/components/reasoning/reasoning.module.csspackages/raystack/components/reasoning/reasoning.tsxpackages/raystack/index.tsx
| onClick={() => { | ||
| setStreaming(true); | ||
| timerRef.current = setTimeout(() => setStreaming(false), 3000); | ||
| }} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Clear the previous simulation timer before restarting.
A second click leaves the first timeout active, so it can set streaming to false before the latest three-second simulation completes.
Proposed fix
onClick={() => {
+ if (timerRef.current !== null) {
+ clearTimeout(timerRef.current);
+ }
setStreaming(true);
timerRef.current = setTimeout(() => setStreaming(false), 3000);
}}📝 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.
| onClick={() => { | |
| setStreaming(true); | |
| timerRef.current = setTimeout(() => setStreaming(false), 3000); | |
| }} | |
| onClick={() => { | |
| if (timerRef.current !== null) { | |
| clearTimeout(timerRef.current); | |
| } | |
| setStreaming(true); | |
| timerRef.current = setTimeout(() => setStreaming(false), 3000); | |
| }} |
🤖 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 `@apps/www/src/content/docs/ai-elements/reasoning/demo.ts` around lines 32 -
35, Update the onClick handler to clear any existing timer through
timerRef.current before starting the new three-second simulation, then assign
the newly created timeout to timerRef.current so only the latest timer can set
streaming to false.
| {label && <div className={styles['reasoning-step-label']}>{label}</div>} | ||
| {children && ( | ||
| <div className={styles['reasoning-step-body']}>{children}</div> | ||
| )} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Render valid falsy React nodes.
label and children accept ReactNode, but 0 is suppressed by these truthiness checks. Check for null/undefined instead.
Proposed fix
- {label && <div className={styles['reasoning-step-label']}>{label}</div>}
- {children && (
+ {label != null && (
+ <div className={styles['reasoning-step-label']}>{label}</div>
+ )}
+ {children != null && (
<div className={styles['reasoning-step-body']}>{children}</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.
| {label && <div className={styles['reasoning-step-label']}>{label}</div>} | |
| {children && ( | |
| <div className={styles['reasoning-step-body']}>{children}</div> | |
| )} | |
| {label != null && ( | |
| <div className={styles['reasoning-step-label']}>{label}</div> | |
| )} | |
| {children != null && ( | |
| <div className={styles['reasoning-step-body']}>{children}</div> | |
| )} |
🤖 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 `@packages/raystack/components/reasoning/reasoning.tsx` around lines 185 - 188,
Update the label and children rendering conditions in the reasoning component to
render all valid ReactNode values, including falsy values such as 0. Replace the
truthiness checks with explicit null/undefined checks while preserving the
existing markup and styles.
2 participants
Summary
ReasoningAI-element component topackages/raystack— a collapsible thinking block built onCollapsiblefor displaying model reasoning/chain-of-thought in chat UIs.streamingprop that shows a shimmering "Thinking…" label and auto-opens the panel while reasoning streams in, auto-collapsing when done unless the user has toggled it manually, plus adurationprop that renders a "Worked for N seconds" label afterward.--rs-*tokens and unit tests covering open/close, streaming auto-open/collapse, and controlled usage.feat-ai-message) — review that PR first; this branch adds one commit on top.