From d1395d9b81d188a7b9bb12f50dbda4b027e04fe8 Mon Sep 17 00:00:00 2001
From: Antigravity <antigravity@gemini.ai>
Date: Sat, 23 May 2026 10:00:44 +0000
Subject: [PATCH] fix(chart): show correct chart type in previews

- Use NoteChart directly with props instead of NoteChartFromCode
- Remove markdown ticks from chartSuggestionToMarkdown output
- Export NoteChart component for direct use in previews

Now the 3 suggestions correctly show different chart types.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/chart-suggestions-dialog.tsx        | 10 ++++++++--
 memento-note/components/note-chart.tsx             |  2 +-
 memento-note/components/rich-text-editor.tsx       | 14 ++++----------
 .../lib/ai/services/chart-suggestion.service.ts    |  7 ++++---
 4 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/memento-note/components/chart-suggestions-dialog.tsx b/memento-note/components/chart-suggestions-dialog.tsx
index 52978f6..39c9503 100644
--- a/memento-note/components/chart-suggestions-dialog.tsx
+++ b/memento-note/components/chart-suggestions-dialog.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react'
 import { createPortal } from 'react-dom'
-import { NoteChartFromCode } from './note-chart'
+import { NoteChart } from './note-chart'
 import { suggestCharts, chartSuggestionToMarkdown, type ChartSuggestion, type SuggestChartsResponse } from '@/lib/ai/services/chart-suggestion.service'
 import { BarChart3, X, Search, AlertCircle, Sparkles } from 'lucide-react'
 import { cn } from '@/lib/utils'
@@ -240,7 +240,13 @@ export function ChartSuggestionsDialog({
                       {/* Mini thumbnail */}
                       <div className="aspect-video bg-card rounded-lg mb-3 overflow-hidden flex items-center justify-center p-2">
                         <div className="w-full scale-75 origin-center">
-                          <NoteChartFromCode code={markdown} />
+                          <NoteChart
+                            type={suggestion.type}
+                            title={suggestion.title}
+                            data={suggestion.data}
+                            height={100}
+                            showLegend={false}
+                          />
                         </div>
                       </div>
 
diff --git a/memento-note/components/note-chart.tsx b/memento-note/components/note-chart.tsx
index f24f458..91fe417 100644
--- a/memento-note/components/note-chart.tsx
+++ b/memento-note/components/note-chart.tsx
@@ -49,7 +49,7 @@ function useDarkMode() {
   return isDark
 }
 
-function NoteChart({ type, title, data, colors, showLegend, height = 250 }: NoteChartProps) {
+export function NoteChart({ type, title, data, colors, showLegend, height = 250 }: NoteChartProps) {
   const chartColors = colors ?? CHART_COLORS
   const dark = useDarkMode()
 
diff --git a/memento-note/components/rich-text-editor.tsx b/memento-note/components/rich-text-editor.tsx
index e253f28..8589651 100644
--- a/memento-note/components/rich-text-editor.tsx
+++ b/memento-note/components/rich-text-editor.tsx
@@ -291,18 +291,12 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorPro
       setChartSuggestionsOpen(true)
     }, [editor])
 
-    const handleSelectChart = useCallback((markdown: string) => {
+    const handleSelectChart = useCallback((chartContent: string) => {
       if (!editor || !editor.isEditable) return
 
       try {
-        // Convert markdown chart to HTML format for TipTap
-        // Input: ```chart\nbar\nTitle\nlabel: value\n```
-        // Output: <pre><code class="language-chart">bar\nTitle\nlabel: value</code></pre>
-        const chartContent = markdown
-          .replace(/```chart\n?/gi, '')
-          .replace(/```$/gi, '')
-          .trim()
-
+        // chartContent is now raw content without markdown ticks
+        // Example: "bar\nTitle\nlabel: value"
         const htmlContent = `<pre><code class="language-chart">${chartContent}</code></pre>`
 
         // Insert the chart HTML at current position
@@ -321,7 +315,7 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorPro
           }
         }
 
-        // Insert the chart as HTML (not markdown)
+        // Insert the chart as HTML
         editor.chain().focus().insertContent(htmlContent).run()
       } catch (error) {
         console.error('[handleSelectChart] Failed to insert chart:', error)
diff --git a/memento-note/lib/ai/services/chart-suggestion.service.ts b/memento-note/lib/ai/services/chart-suggestion.service.ts
index 2be27f8..b8168b3 100644
--- a/memento-note/lib/ai/services/chart-suggestion.service.ts
+++ b/memento-note/lib/ai/services/chart-suggestion.service.ts
@@ -71,9 +71,10 @@ export async function suggestCharts(request: SuggestChartsRequest): Promise<Sugg
 }
 
 /**
- * Convert a chart suggestion to markdown code block format
+ * Convert a chart suggestion to raw chart format (no markdown ticks)
+ * This is the content that goes inside <code class="language-chart">
  * @param suggestion - The chart suggestion to convert
- * @returns Markdown code block string
+ * @returns Raw chart content string
  */
 export function chartSuggestionToMarkdown(suggestion: ChartSuggestion): string {
   const lines = [
@@ -81,5 +82,5 @@ export function chartSuggestionToMarkdown(suggestion: ChartSuggestion): string {
     suggestion.title,
     ...suggestion.data.map(d => `${d.label}: ${d.value}`),
   ]
-  return `\`\`\`chart\n${lines.join('\n')}\n\`\`\``
+  return lines.join('\n')
 }