5728452b4a
- Add slides.tool.ts with support for title, bullets, chart, stats, table, cards, timeline, quote, comparison, equation, image, summary slide types - Chart types: bar, horizontal-bar, line, donut, radar - Integrate with agent executor and canvas system - Add multilingual support (en/fr) - Various UI improvements and bug fixes Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useRef } from 'react'
|
|
import mermaid from 'mermaid'
|
|
|
|
let counter = 0
|
|
|
|
export function MermaidDiagram({ chart, isDark }: { chart: string; isDark?: boolean }) {
|
|
const ref = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
if (!ref.current || !chart.trim()) return
|
|
const id = `mermaid-slide-${++counter}`
|
|
mermaid.initialize({
|
|
startOnLoad: false,
|
|
theme: isDark ? 'dark' : 'default',
|
|
themeVariables: isDark
|
|
? { primaryColor: '#A47148', primaryTextColor: '#F9F8F6', lineColor: '#D4A373', secondaryColor: '#2A2A2A', tertiaryColor: '#1C1C1C' }
|
|
: { primaryColor: '#A47148', primaryTextColor: '#1C1C1C', lineColor: '#D4A373' },
|
|
securityLevel: 'loose',
|
|
})
|
|
mermaid.render(id, chart)
|
|
.then(({ svg }) => {
|
|
if (ref.current) ref.current.innerHTML = svg
|
|
})
|
|
.catch((err) => {
|
|
console.error('[MermaidDiagram] render error:', err)
|
|
if (ref.current) ref.current.innerHTML = `<pre style="color:rgba(255,255,255,0.4);font-size:12px">${chart}</pre>`
|
|
})
|
|
}, [chart, isDark])
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="flex justify-center items-center w-full h-full overflow-hidden"
|
|
style={{ minHeight: 200 }}
|
|
/>
|
|
)
|
|
}
|