sepehr/Momento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(chart): improve error handling and color variety

Browse Source 
- Add quotaExceeded flag to response for better error UX
- Show dedicated quota exceeded state with upgrade button
- Improve AI prompt to better detect data patterns
- Add chart type-specific colors (blue, indigo, emerald, violet, etc.)
- Replace generic primary/10 colors with varied accent colors

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Antigravity
2026-05-23 09:19:52 +00:00
parent a122a0eade
commit 18ffd76c1e
16 changed files with 1042 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
memento-note/components/chart-suggestions-dialog.tsx
View File

@@ -4,9 +4,21 @@ import { useState, useEffect } from 'react'
import { createPortal } from 'react-dom'
import { NoteChartFromCode } from './note-chart'
import { suggestCharts, chartSuggestionToMarkdown, type ChartSuggestion, type SuggestChartsResponse } from '@/lib/ai/services/chart-suggestion.service'
import { BarChart3, X, Search, AlertCircle } from 'lucide-react'
import { BarChart3, X, Search, AlertCircle, Upgrade } from 'lucide-react'
import { cn } from '@/lib/utils'
// Chart type to color mapping for visual variety
const CHART_TYPE_COLORS: Record<string, string> = {
bar: 'bg-blue-500/10 text-blue-600 border-blue-500/20',
'horizontal-bar': 'bg-indigo-500/10 text-indigo-600 border-indigo-500/20',
line: 'bg-emerald-500/10 text-emerald-600 border-emerald-500/20',
area: 'bg-teal-500/10 text-teal-600 border-teal-500/20',
pie: 'bg-violet-500/10 text-violet-600 border-violet-500/20',
radar: 'bg-fuchsia-500/10 text-fuchsia-600 border-fuchsia-500/20',
funnel: 'bg-amber-500/10 text-amber-600 border-amber-500/20',
gauge: 'bg-rose-500/10 text-rose-600 border-rose-500/20',
}
interface ChartSuggestionsDialogProps {
isOpen: boolean
content: string
@@ -107,7 +119,7 @@ export function ChartSuggestionsDialog({
{/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b">
<div className="flex items-center gap-3">
<BarChart3 className="w-5 h-5 text-primary" />
<BarChart3 className="w-5 h-5 text-blue-500" />
<div>
<h2 className="text-lg font-semibold">Chart Suggestions</h2>
<p className="text-sm text-muted-foreground">
@@ -142,6 +154,22 @@ export function ChartSuggestionsDialog({
<p className="text-muted-foreground">Analyzing your content for chart data...</p>
</div>
</div>
) : response?.quotaExceeded ? (
<div className="flex items-center justify-center py-12">
<div className="text-center max-w-md">
<Upgrade className="w-12 h-12 mx-auto mb-4 text-orange-500" />
<h3 className="text-lg font-semibold mb-2">AI Quota Exceeded</h3>
<p className="text-muted-foreground mb-4">
{response.error || 'You have reached your AI usage limit.'}
</p>
<button
className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
onClick={() => (window.location.href = '/settings/billing')}
>
Upgrade Plan
</button>
</div>
</div>
) : response?.error ? (
<div className="flex items-center justify-center py-12">
<div className="text-center max-w-md">
@@ -186,8 +214,8 @@ export function ChartSuggestionsDialog({
className={cn(
'text-left p-4 rounded-xl border-2 transition-all hover:shadow-md',
isSelected
? 'border-primary bg-primary/5'
: 'border-border hover:border-primary/50'
? (CHART_TYPE_COLORS[suggestion.type]?.replace('/10', '/20') || 'border-blue-500 bg-blue-500/5')
: 'border-border hover:border-blue-500/30'
)}
>
{/* Mini thumbnail */}
@@ -199,7 +227,10 @@ export function ChartSuggestionsDialog({
{/* Chart type badge */}
<div className="mb-2">
<span className="text-xs font-medium px-2 py-1 bg-primary/10 text-primary rounded-full">
<span className={cn(
'text-xs font-medium px-2 py-1 rounded-full border',
CHART_TYPE_COLORS[suggestion.type] || CHART_TYPE_COLORS.bar
)}>
{suggestion.type}
</span>
</div>