在footbar增加context上下文使用量展示#408
Conversation
📝 WalkthroughWalkthroughA single-cohort enhancement adds context window usage display to the prompt footer. The parent component threads the ChangesContext Window Usage Display
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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. Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.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: 1
🧹 Nitpick comments (1)
src/components/PromptInput/PromptInputFooterLeftSide.tsx (1)
81-82: 💤 Low value
CtxStateis identical to the existingRssState— consider a shared type.Both types share the same shape:
{ text: string; level: 'normal' | 'warning' | 'error' }. Deduplicating prevents them from drifting silently.♻️ Suggested refactor
-type RssState = { text: string; level: 'normal' | 'warning' | 'error' }; +type FooterPillState = { text: string; level: 'normal' | 'warning' | 'error' }; -type CtxState = { text: string; level: 'normal' | 'warning' | 'error' };Then replace all
RssStateandCtxStatereferences withFooterPillState.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/PromptInput/PromptInputFooterLeftSide.tsx` around lines 81 - 82, The two identical types RssState and CtxState should be consolidated into a single shared type (e.g., FooterPillState) to avoid duplication; add a type alias or exported type named FooterPillState = { text: string; level: 'normal' | 'warning' | 'error' }, then replace all occurrences of RssState and CtxState with FooterPillState (update imports/exports where those symbols are used) so both components consume the single shared type.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/PromptInput/PromptInputFooterLeftSide.tsx`:
- Around line 83-96: The useContextDisplay hook (function useContextDisplay)
must be gated behind a feature flag: keep all hook calls (useMainLoopModel,
useMemo/getCurrentUsage, getContextWindowForModel, calculateContextPercentages)
so React rules of hooks are preserved, import feature from 'bun:bundle' and call
feature('FLAG_NAME') and then conditionally return the computed state only when
the flag is true (otherwise return null); do not wrap or remove the hook calls
themselves—gate the return value or extract pure non-hook logic into a helper
and only use that helper when feature('FLAG_NAME') is true.
---
Nitpick comments:
In `@src/components/PromptInput/PromptInputFooterLeftSide.tsx`:
- Around line 81-82: The two identical types RssState and CtxState should be
consolidated into a single shared type (e.g., FooterPillState) to avoid
duplication; add a type alias or exported type named FooterPillState = { text:
string; level: 'normal' | 'warning' | 'error' }, then replace all occurrences of
RssState and CtxState with FooterPillState (update imports/exports where those
symbols are used) so both components consume the single shared type.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 1eee86fd-1766-4032-a507-c5b664ea5b22
📒 Files selected for processing (2)
src/components/PromptInput/PromptInputFooter.tsxsrc/components/PromptInput/PromptInputFooterLeftSide.tsx
| function useContextDisplay(messages: Message[]): CtxState | null { | ||
| const model = useMainLoopModel(); | ||
| const currentUsage = useMemo(() => getCurrentUsage(messages), [messages]); | ||
| const contextWindowSize = useMemo(() => getContextWindowForModel(model, getSdkBetas()), [model]); | ||
| const percentages = useMemo( | ||
| () => calculateContextPercentages(currentUsage, contextWindowSize), | ||
| [currentUsage, contextWindowSize], | ||
| ); | ||
|
|
||
| if (!currentUsage || percentages.used === null) return null; | ||
| const pct = percentages.used; | ||
| const level = pct >= 90 ? 'error' : pct >= 70 ? 'warning' : 'normal'; | ||
| return { text: `ctx:${pct}%`, level }; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win
New context-display feature is not gated by a feature flag.
The useContextDisplay hook and its rendering (lines 303, 400–411) are unconditionally active. Per coding guidelines, new features must use the feature('FLAG_NAME') pattern so they can be controlled at runtime.
♻️ Example of how to gate it
+ const ctxState = feature('CONTEXT_WINDOW_DISPLAY') ? useContextDisplay(messages) : null;And wrap the hook body:
function useContextDisplay(messages: Message[]): CtxState | null {
+ if (!feature('CONTEXT_WINDOW_DISPLAY')) return null;
const model = useMainLoopModel();
...Note: because
feature()is compile-time dead-code eliminated, the hook calls inside must still execute (React rules of hooks). Gate the return value, not the hook calls themselves, or extract non-hook logic into a plain helper.
As per coding guidelines: "New features must follow the pattern: keep import { feature } from 'bun:bundle' + feature('FLAG_NAME'), and control via environment variables or configuration at runtime."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/PromptInput/PromptInputFooterLeftSide.tsx` around lines 83 -
96, The useContextDisplay hook (function useContextDisplay) must be gated behind
a feature flag: keep all hook calls (useMainLoopModel, useMemo/getCurrentUsage,
getContextWindowForModel, calculateContextPercentages) so React rules of hooks
are preserved, import feature from 'bun:bundle' and call feature('FLAG_NAME')
and then conditionally return the computed state only when the flag is true
(otherwise return null); do not wrap or remove the hook calls themselves—gate
the return value or extract pure non-hook logic into a helper and only use that
helper when feature('FLAG_NAME') is true.
2 participants
Summary by CodeRabbit