fix(chart): rewrite suggestion logic with better error handling
- Remove conflicting tool approach, use direct JSON - Add fallback: extract numbers from regex if AI fails - Add debug section to show what content was analyzed - Be more lenient: any 2+ numbers = valid chart - Better error messages - Add console logging for debugging Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -73,100 +73,132 @@ export async function POST(req: Request) {
|
|||||||
const sysConfig = await getSystemConfig()
|
const sysConfig = await getSystemConfig()
|
||||||
const { provider, model, timingInfo } = await resolveAiRouteWithTiming('suggest-charts', sysConfig)
|
const { provider, model, timingInfo } = await resolveAiRouteWithTiming('suggest-charts', sysConfig)
|
||||||
|
|
||||||
// Build context for AI
|
|
||||||
const toolContext = {
|
|
||||||
userId,
|
|
||||||
noteId,
|
|
||||||
config: sysConfig,
|
|
||||||
}
|
|
||||||
|
|
||||||
// Use the suggest_charts tool
|
|
||||||
const suggestChartsTool = toolRegistry.get('suggest_charts')
|
|
||||||
const tools = suggestChartsTool ? { suggest_charts: suggestChartsTool.buildTool(toolContext) } : {}
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// 4. Call AI to analyze and suggest
|
// 4. Call AI to analyze and suggest - direct JSON response (no tool)
|
||||||
const { text } = await generateText({
|
const { text } = await generateText({
|
||||||
model: provider(model),
|
model: provider(model),
|
||||||
system: `You are a data visualization assistant. Analyze the provided text and suggest appropriate chart types.
|
system: `You are a data visualization assistant. Analyze the provided text and suggest appropriate chart types.
|
||||||
|
|
||||||
|
IMPORTANT: You MUST respond with valid JSON only. No markdown, no code blocks, no explanations.
|
||||||
|
|
||||||
DATA EXTRACTION RULES:
|
DATA EXTRACTION RULES:
|
||||||
- Extract ANY numerical data present in the text
|
- Find ANY numbers in the text - even simple lists count
|
||||||
- Look for patterns like: "X: 123", "X = 123", "X is 123", "X (123)", "123X", "X $123", "123%"
|
- Look for: "X: 123", "X = 123", "123", "123%", "$123", etc.
|
||||||
- Accept partial data (e.g., if only 2 values exist, that's still valid for a simple chart)
|
- If you find ANY 2+ numbers, create a chart
|
||||||
- If fewer than 2 data points exist, return hasData=false with empty suggestions
|
- Be creative with labels if none exist (use "Item 1", "Item 2", etc.)
|
||||||
- Each suggestion must use the SAME extracted data (only chart type differs)
|
- NEVER return hasData=false unless text is completely empty or has no numbers at all
|
||||||
- Return exactly 3 suggestions when data exists
|
|
||||||
|
|
||||||
CHART TYPE SELECTION:
|
CHART TYPES TO SUGGEST (always 3 different types):
|
||||||
- bar: Comparing values across categories (default choice)
|
1. bar - for comparing categories
|
||||||
- horizontal-bar: Categories with long labels
|
2. line - for trends/sequences
|
||||||
- line: Time series or sequential data
|
3. pie - for parts of whole
|
||||||
- area: Time series where magnitude matters
|
|
||||||
- pie: Parts of a whole (percentages or proportions)
|
|
||||||
- radar: Comparing multiple dimensions
|
|
||||||
- funnel: Stages or conversion steps
|
|
||||||
- gauge: Single value vs target
|
|
||||||
|
|
||||||
Response format (JSON):
|
Response format (COPY this structure):
|
||||||
{
|
{"suggestions":[
|
||||||
"suggestions": [
|
{"type":"bar","title":"Chart Title","data":[{"label":"A","value":100},{"label":"B","value":200}],"description":"...","rationale":"..."},
|
||||||
{
|
{"type":"line","title":"...","data":[...],"description":"...","rationale":"..."},
|
||||||
"type": "bar|horizontal-bar|line|area|pie|radar|funnel|gauge",
|
{"type":"pie","title":"...","data":[...],"description":"...","rationale":"..."}
|
||||||
"title": "Chart title",
|
],"analyzedText":"...","detectedData":"...","hasData":true}`,
|
||||||
"data": [{"label": "Category", "value": 123}],
|
|
||||||
"description": "What this chart shows",
|
|
||||||
"rationale": "Why this chart type suits the data"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"analyzedText": "Text that was analyzed",
|
|
||||||
"detectedData": "Description of what data was found",
|
|
||||||
"hasData": true
|
|
||||||
}`,
|
|
||||||
messages: [
|
messages: [
|
||||||
{
|
{
|
||||||
role: 'user',
|
role: 'user',
|
||||||
content: `Analyze this text and suggest 3 appropriate chart types:\n\n${textToAnalyze}`,
|
content: `Extract numbers from this text and suggest 3 charts:\n\n${textToAnalyze}`,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
tools,
|
|
||||||
temperature: 0.3,
|
temperature: 0.3,
|
||||||
})
|
})
|
||||||
|
|
||||||
// 5. Parse AI response
|
// 5. Parse AI response - be very lenient
|
||||||
|
console.log('[suggest-charts] AI response:', text.substring(0, 500))
|
||||||
|
|
||||||
let parsed: SuggestChartsResponse
|
let parsed: SuggestChartsResponse
|
||||||
try {
|
try {
|
||||||
// Try to extract JSON from the response
|
// Clean the response - remove markdown code blocks
|
||||||
const jsonMatch = text.match(/\{[\s\S]*\}/)
|
let cleanText = text
|
||||||
|
.replace(/```json\n?/gi, '')
|
||||||
|
.replace(/```\n?/gi, '')
|
||||||
|
.trim()
|
||||||
|
|
||||||
|
// Find JSON object
|
||||||
|
const jsonMatch = cleanText.match(/\{[\s\S]*\}/)
|
||||||
if (!jsonMatch) {
|
if (!jsonMatch) {
|
||||||
throw new Error('No JSON found in response')
|
throw new Error('No JSON found')
|
||||||
}
|
}
|
||||||
parsed = JSON.parse(jsonMatch[0])
|
parsed = JSON.parse(jsonMatch[0])
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('[suggest-charts] Failed to parse AI response:', text)
|
console.error('[suggest-charts] Parse error:', e, 'Raw text:', text)
|
||||||
// Return empty suggestions on parse error
|
|
||||||
|
// Check if text has ANY numbers - if so, create a simple chart
|
||||||
|
const numbers = textToAnalyze.match(/\d+/g)
|
||||||
|
if (numbers && numbers.length >= 2) {
|
||||||
|
const values = numbers.slice(0, 6).map(n => parseInt(n) || 0)
|
||||||
|
parsed = {
|
||||||
|
suggestions: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
title: 'Data from Note',
|
||||||
|
data: values.map((v, i) => ({ label: `Item ${i + 1}`, value: v })),
|
||||||
|
description: 'Bar chart of extracted values',
|
||||||
|
rationale: 'Simple comparison of numerical values found'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
title: 'Data Trend',
|
||||||
|
data: values.map((v, i) => ({ label: `Item ${i + 1}`, value: v })),
|
||||||
|
description: 'Line chart showing progression',
|
||||||
|
rationale: 'Visualizes the sequence of values'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
title: 'Data Distribution',
|
||||||
|
data: values.map((v, i) => ({ label: `Item ${i + 1}`, value: v })),
|
||||||
|
description: 'Pie chart of value proportions',
|
||||||
|
rationale: 'Shows relative sizes of each value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
analyzedText: textToAnalyze.substring(0, 100),
|
||||||
|
detectedData: `Found ${numbers.length} numerical values`,
|
||||||
|
hasData: true
|
||||||
|
}
|
||||||
|
} else {
|
||||||
return Response.json({
|
return Response.json({
|
||||||
suggestions: [],
|
suggestions: [],
|
||||||
analyzedText: textToAnalyze.substring(0, 100),
|
analyzedText: textToAnalyze.substring(0, 100),
|
||||||
detectedData: 'Failed to parse AI response',
|
detectedData: 'No numerical data found',
|
||||||
hasData: false,
|
hasData: false,
|
||||||
} satisfies SuggestChartsResponse)
|
error: 'Add numbers to your note (e.g., "Jan: 100, Feb: 200")',
|
||||||
|
} satisfies SuggestChartsResponse, { status: 200 })
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Validate response structure
|
// Validate and fix response
|
||||||
if (!parsed.suggestions || !Array.isArray(parsed.suggestions)) {
|
if (!parsed.suggestions || !Array.isArray(parsed.suggestions)) {
|
||||||
parsed.suggestions = []
|
parsed.suggestions = []
|
||||||
}
|
}
|
||||||
|
|
||||||
// Ensure exactly 3 suggestions when data exists
|
// Ensure we have 3 suggestions when hasData=true
|
||||||
if (parsed.hasData && parsed.suggestions.length !== 3) {
|
if (parsed.hasData && parsed.suggestions.length < 3) {
|
||||||
parsed.suggestions = parsed.suggestions.slice(0, 3)
|
const baseSuggestion = parsed.suggestions[0]
|
||||||
|
if (baseSuggestion) {
|
||||||
|
const types = ['bar', 'line', 'pie'].filter(t => t !== baseSuggestion.type)
|
||||||
|
while (parsed.suggestions.length < 3 && types.length > 0) {
|
||||||
|
parsed.suggestions.push({ ...baseSuggestion, type: types.shift()! })
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Validate each suggestion has required fields
|
// Ensure each suggestion has valid data
|
||||||
parsed.suggestions = parsed.suggestions.filter(s =>
|
parsed.suggestions = parsed.suggestions.filter(s => {
|
||||||
s.type && s.title && s.data && Array.isArray(s.data) && s.data.length >= 2
|
if (!s.type || !s.data || !Array.isArray(s.data) || s.data.length < 2) return false
|
||||||
)
|
// Ensure all data points have label and value
|
||||||
|
s.data = s.data.filter(d => d && typeof d.value === 'number')
|
||||||
|
return s.data.length >= 2
|
||||||
|
})
|
||||||
|
|
||||||
|
// If after filtering we have no valid suggestions, set hasData=false
|
||||||
|
if (parsed.suggestions.length === 0) {
|
||||||
|
parsed.hasData = false
|
||||||
|
}
|
||||||
|
|
||||||
// Track usage
|
// Track usage
|
||||||
await trackFeatureUsage(userId, 'suggest_charts', 'suggest-charts', 1)
|
await trackFeatureUsage(userId, 'suggest_charts', 'suggest-charts', 1)
|
||||||
|
|||||||
@@ -53,6 +53,7 @@ export function ChartSuggestionsDialog({
|
|||||||
suggestCharts({ content, selection, noteId })
|
suggestCharts({ content, selection, noteId })
|
||||||
.then(data => {
|
.then(data => {
|
||||||
if (aborted) return
|
if (aborted) return
|
||||||
|
console.log('[ChartSuggestionsDialog] Response:', data)
|
||||||
setResponse(data)
|
setResponse(data)
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
})
|
})
|
||||||
@@ -61,10 +62,10 @@ export function ChartSuggestionsDialog({
|
|||||||
console.error('[ChartSuggestionsDialog] Error:', err)
|
console.error('[ChartSuggestionsDialog] Error:', err)
|
||||||
setResponse({
|
setResponse({
|
||||||
suggestions: [],
|
suggestions: [],
|
||||||
analyzedText: '',
|
analyzedText: textToAnalyze?.substring(0, 100) || '',
|
||||||
detectedData: '',
|
detectedData: 'Error occurred',
|
||||||
hasData: false,
|
hasData: false,
|
||||||
error: err.message || 'Failed to load suggestions',
|
error: err.message || 'Network error - check console',
|
||||||
})
|
})
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
})
|
})
|
||||||
@@ -192,6 +193,17 @@ export function ChartSuggestionsDialog({
|
|||||||
<li>• Percentages or proportions</li>
|
<li>• Percentages or proportions</li>
|
||||||
<li>• Time-series data</li>
|
<li>• Time-series data</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<div className="mt-4 pt-4 border-t border-border/50">
|
||||||
|
<details className="text-left">
|
||||||
|
<summary className="text-xs text-muted-foreground cursor-pointer hover:text-foreground">
|
||||||
|
Debug: Show what was analyzed
|
||||||
|
</summary>
|
||||||
|
<pre className="mt-2 text-xs bg-muted p-2 rounded overflow-auto max-h-32">
|
||||||
|
{textToAnalyze.substring(0, 500)}
|
||||||
|
{textToAnalyze.length > 500 && '...'}
|
||||||
|
</pre>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
Reference in New Issue
Block a user