feat: add inline chart support for notes
Some checks failed
CI / Lint, Test & Build (push) Failing after 15s
CI / Deploy production (on server) (push) Has been skipped

- Add NoteChart component using Recharts (bar, line, area, pie, radar, funnel, gauge)
- Add generate_chart and insert_chart_in_note AI tools
- Add chart code block support in MarkdownContent (```chart ... ```)
- Support JSON and simple data formats (label: value)
- Add i18n translations for chart features

Chart syntax examples:
- JSON: ```chart {"type":"bar","data":[{"label":"A","value":10}]} ```
- Simple: ```chart\nbar\nSales Data\nJan: 120\nFeb: 150\n```

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Antigravity
2026-05-22 17:29:10 +00:00
parent 5728452b4a
commit beca2c52c3
7 changed files with 414 additions and 1 deletions

View File

@@ -7,6 +7,7 @@ import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
import rehypeRaw from 'rehype-raw'
import 'katex/dist/katex.min.css'
import { NoteChartFromCode } from './note-chart'
interface MarkdownContentProps {
content: string
@@ -23,6 +24,30 @@ export const MarkdownContent = memo(function MarkdownContent({ content, classNam
a: ({ node, ...props }) => (
<a {...props} className="text-primary hover:underline" target="_blank" rel="noopener noreferrer" />
),
code({ node, inline, className, children, ...props }: any) {
const match = /language-(\w+)/.exec(className || '')
const language = match ? match[1] : ''
// Chart code blocks
if (language === 'chart') {
return <NoteChartFromCode code={String(children).replace(/\n$/, '')} />
}
// Other code blocks
if (!inline && match) {
return (
<code className={className} {...props}>
{children}
</code>
)
}
return (
<code className="bg-muted px-1.5 py-0.5 rounded text-sm" {...props}>
{children}
</code>
)
},
}}
>
{content}