Add model information tooltip to pricing pages #250
Conversation
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
- Create ModelTooltip component showing all 6 available models with friendly names - Update pricing config to include tooltip on '6 Powerful Models' feature text - Enhance PlanFeature type to support React elements in addition to strings - Models display with appropriate badges (Pro, New, Starter requirements) - Tooltip appears on both pricing page and marketing page pricing section 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
WalkthroughAdds a new ModelTooltip React component that reads MODEL_CONFIG, sorts models by access tier and name, and renders an info-triggered tooltip listing available models with badges. Updates pricingConfig to allow JSX in PlanFeature.text and integrates ModelTooltip alongside feature text. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant PricingPage
participant ModelTooltip
participant MODEL_CONFIG as MODEL_CONFIG
User->>PricingPage: View pricing features
PricingPage->>ModelTooltip: Render feature text with tooltip
ModelTooltip->>MODEL_CONFIG: Read models (id, displayName, badges, tiers)
MODEL_CONFIG-->>ModelTooltip: Model list
Note over ModelTooltip: Sort by tier (free → starter → pro), then alphabetically
User->>ModelTooltip: Hover/click info icon
ModelTooltip-->>User: Show tooltip: "Available Models:" + list with badges
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Greptile Overview
Summary
This PR enhances the pricing pages by adding an interactive model information tooltip next to the "6 Powerful Models" feature text. The implementation creates a new `ModelTooltip.tsx` component that displays all available AI models with their friendly names and appropriate tier badges (Pro/New/Starter). The component leverages the existing `MODEL_CONFIG` from the `ModelSelector` to ensure consistency and avoid code duplication.The changes integrate seamlessly with the existing pricing configuration system by extending the PlanFeature type to support React elements instead of just strings. This allows the tooltip to be embedded inline with feature text while maintaining the existing layout structure. The tooltip appears across Pro, Max, and Team plans, providing users with detailed information about what models they'll have access to with each tier.
The implementation uses the established UI patterns from the codebase, utilizing the existing tooltip component and badge styling conventions. The models are intelligently sorted by access tier (free, starter, pro) to provide a logical ordering in the tooltip display.
PR Description Notes:
- The PR description mentions "6 available models" but the code shows 8 models in the MODEL_CONFIG
Important Files Changed
Changed Files
| Filename | Score | Overview |
|---|---|---|
| frontend/src/components/ModelTooltip.tsx | 4/5 | New tooltip component displaying all available AI models with badges and sorting logic |
| frontend/src/config/pricingConfig.tsx | 5/5 | Updated pricing configuration to integrate model tooltip and enhanced type definitions |
Confidence score: 4/5
- This PR is safe to merge with minimal risk and provides clear user value
- Score reflects solid implementation with proper TypeScript support, but complex sorting logic needs attention
- Pay close attention to the ModelTooltip component's sorting logic and ensure model count accuracy
Sequence Diagram
sequenceDiagram
participant User
participant PricingPage as "Pricing Page"
participant ModelTooltip as "ModelTooltip Component"
participant TooltipProvider as "Tooltip Provider"
participant ModelSelector as "MODEL_CONFIG"
User->>PricingPage: "Views pricing page"
PricingPage->>PricingPage: "Renders pricing plans from config"
PricingPage->>ModelTooltip: "Renders ModelTooltip for Pro/Max/Team plans"
ModelTooltip->>ModelSelector: "Fetches MODEL_CONFIG data"
ModelSelector-->>ModelTooltip: "Returns model configurations"
ModelTooltip->>ModelTooltip: "Processes and sorts models by tier"
ModelTooltip->>TooltipProvider: "Wraps tooltip in provider"
TooltipProvider-->>ModelTooltip: "Provides tooltip context"
ModelTooltip-->>PricingPage: "Renders info icon next to model text"
User->>ModelTooltip: "Hovers over info icon"
ModelTooltip->>TooltipProvider: "Triggers tooltip display"
TooltipProvider->>ModelTooltip: "Shows tooltip content"
ModelTooltip-->>User: "Displays sorted list of 6 models with badges"
User->>ModelTooltip: "Moves cursor away"
ModelTooltip->>TooltipProvider: "Triggers tooltip hide"
TooltipProvider-->>User: "Hides tooltip with animation"
2 files reviewed, 1 comment
Comment on lines
+17
to
+32
| const sortedModels = models.sort((a, b) => { | ||
| // Free models (no requirements) first | ||
| if (!a.requiresPro && !a.requiresStarter && (b.requiresPro || b.requiresStarter)) return -1; | ||
| if (!b.requiresPro && !b.requiresStarter && (a.requiresPro || a.requiresStarter)) return 1; | ||
|
|
||
| // Then starter models | ||
| if (a.requiresStarter && !b.requiresStarter && !b.requiresPro) return 1; | ||
| if (b.requiresStarter && !a.requiresStarter && !a.requiresPro) return -1; | ||
|
|
||
| // Then pro models | ||
| if (a.requiresPro && !b.requiresPro) return 1; | ||
| if (b.requiresPro && !a.requiresPro) return -1; | ||
|
|
||
| // Within same tier, sort alphabetically | ||
| return a.displayName.localeCompare(b.displayName); | ||
| }); |
Contributor
There was a problem hiding this comment.
logic: The sorting logic is complex and may not behave as expected - models with requiresStarter will be placed after free models but the logic on lines 23-24 seems reversed
Suggested change
| const sortedModels = models.sort((a, b) => { | |
| // Free models (no requirements) first | |
| if (!a.requiresPro && !a.requiresStarter && (b.requiresPro || b.requiresStarter)) return -1; | |
| if (!b.requiresPro && !b.requiresStarter && (a.requiresPro || a.requiresStarter)) return 1; | |
| // Then starter models | |
| if (a.requiresStarter && !b.requiresStarter && !b.requiresPro) return 1; | |
| if (b.requiresStarter && !a.requiresStarter && !a.requiresPro) return -1; | |
| // Then pro models | |
| if (a.requiresPro && !b.requiresPro) return 1; | |
| if (b.requiresPro && !a.requiresPro) return -1; | |
| // Within same tier, sort alphabetically | |
| return a.displayName.localeCompare(b.displayName); | |
| }); | |
| const sortedModels = models.sort((a, b) => { | |
| // Free models (no requirements) first | |
| if (!a.requiresPro && !a.requiresStarter && (b.requiresPro || b.requiresStarter)) return -1; | |
| if (!b.requiresPro && !b.requiresStarter && (a.requiresPro || a.requiresStarter)) return 1; | |
| // Then starter models | |
| if (a.requiresStarter && !b.requiresStarter && !b.requiresPro) return -1; | |
| if (b.requiresStarter && !a.requiresStarter && !a.requiresPro) return 1; | |
| // Then pro models | |
| if (a.requiresPro && !b.requiresPro) return 1; | |
| if (b.requiresPro && !a.requiresPro) return -1; | |
| // Within same tier, sort alphabetically | |
| return a.displayName.localeCompare(b.displayName); | |
| }); |
Prompt To Fix With AI
This is a comment left during a code review.
Path: frontend/src/components/ModelTooltip.tsx
Line: 17:32
Comment:
**logic:** The sorting logic is complex and may not behave as expected - models with requiresStarter will be placed after free models but the logic on lines 23-24 seems reversed
```suggestion
const sortedModels = models.sort((a, b) => {
// Free models (no requirements) first
if (!a.requiresPro && !a.requiresStarter && (b.requiresPro || b.requiresStarter)) return -1;
if (!b.requiresPro && !b.requiresStarter && (a.requiresPro || a.requiresStarter)) return 1;
// Then starter models
if (a.requiresStarter && !b.requiresStarter && !b.requiresPro) return -1;
if (b.requiresStarter && !a.requiresStarter && !a.requiresPro) return 1;
// Then pro models
if (a.requiresPro && !b.requiresPro) return 1;
if (b.requiresPro && !a.requiresPro) return -1;
// Within same tier, sort alphabetically
return a.displayName.localeCompare(b.displayName);
});
```
How can I resolve this? If you propose a fix, please make it concise.![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
frontend/src/components/ModelTooltip.tsx(1 hunks)frontend/src/config/pricingConfig.tsx(4 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx}: Use 2-space indentation, double quotes, and a 100-character line limit for formatting
Use camelCase for variable and function names
Use try/catch with specific error types for error handling
Files:
frontend/src/config/pricingConfig.tsxfrontend/src/components/ModelTooltip.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use strict TypeScript typing and avoid
anywhen possible
Files:
frontend/src/config/pricingConfig.tsxfrontend/src/components/ModelTooltip.tsx
🧬 Code graph analysis (2)
frontend/src/config/pricingConfig.tsx (1)
frontend/src/components/ModelTooltip.tsx (1)
ModelTooltip(5-72)
frontend/src/components/ModelTooltip.tsx (1)
frontend/src/components/ModelSelector.tsx (1)
MODEL_CONFIG(27-81)
⏰ 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). (4)
- GitHub Check: build-macos (universal-apple-darwin)
- GitHub Check: build-linux
- GitHub Check: build-android
- GitHub Check: build-ios
Comment on lines
+1
to
+2
| import { Info } from "lucide-react"; | ||
| import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; |
There was a problem hiding this comment.
Add the 'use client' directive.
Tooltip, TooltipTrigger, and friends are client components. Without the 'use client' pragma, Next.js treats ModelTooltip as a server component and bails out with “Attempted to import the client component ... into a server component.” Please mark this file as a client component.
+'use client';
+
import { Info } from "lucide-react";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";📝 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.
Suggested change
| import { Info } from "lucide-react"; | |
| import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; | |
| 'use client'; | |
| import { Info } from "lucide-react"; | |
| import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; |
🤖 Prompt for AI Agents
In frontend/src/components/ModelTooltip.tsx around lines 1-2, this file imports
Tooltip and related client components but lacks the 'use client' directive; add
a top-of-file "use client" pragma as the very first line so Next.js treats
ModelTooltip as a client component and the imports of Tooltip, TooltipTrigger,
etc. succeed.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Fixes #249
Adds an info tooltip showing all 6 available models with their friendly names next to the "6 Powerful Models" feature text on pricing pages.
Changes
ModelTooltip.tsxcomponent showing all available modelsPlanFeaturetype to support React elementsGenerated with Claude Code
Summary by CodeRabbit