sea-dev 1.0.0

package/libs/ui/src/components/chart-viz/markdown.tsx

@@ -0,0 +1,344 @@
+import * as echarts from "echarts";
+import { memo, useEffect, useMemo, useRef } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { useChartTheme } from "./theme-context";
+import { getThemeName, type ChartVizTheme } from "./themes";
+import type { InlineChartConfig, MarkdownConfig } from "./types";
+
+interface MarkdownRendererProps {
+  config: MarkdownConfig | { content: string; metadata?: unknown };
+  theme?: ChartVizTheme | string;
+  className?: string;
+}
+
+// Inline sparkline/mini chart component
+function InlineChart({ config, themeName }: { config: InlineChartConfig; themeName: string }) {
+  const chartRef = useRef<HTMLDivElement>(null);
+  const chartInstance = useRef<echarts.ECharts | null>(null);
+  const height = config.height || 24;
+
+  useEffect(() => {
+    if (!chartRef.current) return;
+
+    try {
+      if (!chartInstance.current || chartInstance.current.isDisposed()) {
+        chartInstance.current = echarts.init(chartRef.current, themeName);
+      }
+    } catch {
+      return;
+    }
+
+    const color = config.color || "#3b82f6";
+    const data = Array.isArray(config.data)
+      ? config.data.map((d, i) => (typeof d === "number" ? { name: String(i), value: d } : d))
+      : [];
+
+    let option: echarts.EChartsOption = {};
+
+    if (config.type === "sparkline" || config.type === "line") {
+      option = {
+        grid: { top: 2, right: 2, bottom: 2, left: 2 },
+        xAxis: { type: "category", show: false, data: data.map((d) => d.name) },
+        yAxis: { type: "value", show: false },
+        series: [
+          {
+            type: "line",
+            data: data.map((d) => d.value),
+            smooth: true,
+            symbol: "none",
+            lineStyle: { width: 1.5, color },
+            areaStyle: { color: `${color}20` },
+          },
+        ],
+      };
+    } else if (config.type === "bar") {
+      option = {
+        grid: { top: 2, right: 2, bottom: 2, left: 2 },
+        xAxis: { type: "category", show: false, data: data.map((d) => d.name) },
+        yAxis: { type: "value", show: false },
+        series: [
+          {
+            type: "bar",
+            data: data.map((d) => d.value),
+            itemStyle: { color },
+            barWidth: "60%",
+          },
+        ],
+      };
+    } else if (config.type === "pie") {
+      option = {
+        series: [
+          {
+            type: "pie",
+            radius: ["40%", "70%"],
+            center: ["50%", "50%"],
+            data,
+            label: { show: false },
+            itemStyle: { borderWidth: 0 },
+          },
+        ],
+      };
+    } else if (config.type === "gauge") {
+      const firstData = config.data[0];
+      const value =
+        typeof firstData === "number"
+          ? firstData
+          : ((firstData as Record<string, unknown>)?.value as number) || 0;
+      option = {
+        series: [
+          {
+            type: "gauge",
+            radius: "100%",
+            center: ["50%", "60%"],
+            startAngle: 180,
+            endAngle: 0,
+            min: 0,
+            max: 100,
+            pointer: { show: false },
+            progress: { show: true, width: 4, itemStyle: { color } },
+            axisLine: { lineStyle: { width: 4, color: [[1, "#e5e7eb"]] } },
+            axisTick: { show: false },
+            splitLine: { show: false },
+            axisLabel: { show: false },
+            detail: { show: false },
+            data: [{ value }],
+          },
+        ],
+      };
+    }
+
+    requestAnimationFrame(() => {
+      if (chartInstance.current && !chartInstance.current.isDisposed()) {
+        chartInstance.current.setOption(option, true);
+      }
+    });
+
+    return () => {
+      if (chartInstance.current && !chartInstance.current.isDisposed()) {
+        chartInstance.current.dispose();
+        chartInstance.current = null;
+      }
+    };
+  }, [config, themeName]);
+
+  const width = config.type === "pie" || config.type === "gauge" ? height : height * 4;
+
+  return (
+    <span
+      ref={chartRef}
+      style={{
+        display: "inline-block",
+        width,
+        height,
+        verticalAlign: "middle",
+        margin: "0 4px",
+      }}
+    />
+  );
+}
+
+// Parse inline chart syntax: {{chart:type|data}}
+// e.g., {{chart:sparkline|10,20,30,25,40}}
+// e.g., {{chart:gauge|75}}
+// e.g., {{chart:bar|10,20,30}}
+function parseInlineCharts(content: string): {
+  text: string;
+  charts: Record<string, InlineChartConfig>;
+} {
+  const charts: Record<string, InlineChartConfig> = {};
+  let chartIndex = 0;
+
+  const text = content.replace(/\{\{chart:(\w+)\|([^}]+)\}\}/g, (_, type, dataStr) => {
+    const id = `__chart_${chartIndex++}__`;
+    const data = dataStr.split(",").map((v: string) => {
+      const trimmed = v.trim();
+      const num = parseFloat(trimmed);
+      return isNaN(num) ? { name: trimmed, value: 0 } : num;
+    });
+
+    charts[id] = {
+      type: type as InlineChartConfig["type"],
+      data,
+    };
+
+    return id;
+  });
+
+  return { text, charts };
+}
+
+// Styles for markdown content - constrained and clean
+const markdownStyles = `
+  .markdown-renderer {
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--foreground, #e5e7eb);
+  }
+  .markdown-renderer h1 {
+    font-size: 1.5em;
+    font-weight: 600;
+    margin: 1em 0 0.5em;
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid var(--border, #374151);
+  }
+  .markdown-renderer h2 {
+    font-size: 1.25em;
+    font-weight: 600;
+    margin: 1em 0 0.5em;
+  }
+  .markdown-renderer h3 {
+    font-size: 1.1em;
+    font-weight: 600;
+    margin: 0.8em 0 0.4em;
+  }
+  .markdown-renderer p {
+    margin: 0.5em 0;
+  }
+  .markdown-renderer ul, .markdown-renderer ol {
+    margin: 0.5em 0;
+    padding-left: 1.5em;
+  }
+  .markdown-renderer li {
+    margin: 0.25em 0;
+  }
+  .markdown-renderer strong {
+    font-weight: 600;
+    color: var(--foreground, #f3f4f6);
+  }
+  .markdown-renderer code {
+    background: var(--muted, #1f2937);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    font-size: 0.9em;
+    font-family: ui-monospace, monospace;
+  }
+  .markdown-renderer pre {
+    background: var(--muted, #1f2937);
+    padding: 1em;
+    border-radius: 6px;
+    overflow-x: auto;
+    margin: 0.5em 0;
+  }
+  .markdown-renderer pre code {
+    background: none;
+    padding: 0;
+  }
+  .markdown-renderer blockquote {
+    border-left: 3px solid var(--primary, #3b82f6);
+    margin: 0.5em 0;
+    padding-left: 1em;
+    color: var(--muted-foreground, #9ca3af);
+  }
+  .markdown-renderer table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0.5em 0;
+    font-size: 0.9em;
+  }
+  .markdown-renderer th, .markdown-renderer td {
+    border: 1px solid var(--border, #374151);
+    padding: 0.5em 0.75em;
+    text-align: left;
+  }
+  .markdown-renderer th {
+    background: var(--muted, #1f2937);
+    font-weight: 600;
+  }
+  .markdown-renderer hr {
+    border: none;
+    border-top: 1px solid var(--border, #374151);
+    margin: 1em 0;
+  }
+  .markdown-renderer a {
+    color: var(--primary, #3b82f6);
+    text-decoration: none;
+  }
+  .markdown-renderer a:hover {
+    text-decoration: underline;
+  }
+  .markdown-renderer .metric {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+    background: var(--muted, #1f2937);
+    padding: 0.25em 0.75em;
+    border-radius: 6px;
+    font-weight: 500;
+  }
+  .markdown-renderer .metric-value {
+    font-size: 1.1em;
+    font-weight: 600;
+    color: var(--primary, #3b82f6);
+  }
+`;
+
+export const MarkdownRenderer = memo(function MarkdownRenderer({
+  config,
+  theme,
+  className = "",
+}: MarkdownRendererProps) {
+  const { theme: contextTheme } = useChartTheme();
+  const effectiveTheme = theme ?? contextTheme;
+  const themeName = useMemo(() => getThemeName(effectiveTheme), [effectiveTheme]);
+
+  // Get content from config (handles both MarkdownConfig and simple {content} objects)
+  const rawContent = typeof config === "string" ? config : config.content || "";
+
+  // Parse inline charts from content
+  const { text: processedContent, charts } = useMemo(
+    () => parseInlineCharts(rawContent),
+    [rawContent],
+  );
+
+  // Merge any pre-defined inline charts from config
+  const allCharts = useMemo(
+    () => ({
+      ...charts,
+      ...((config as MarkdownConfig).inlineCharts || {}),
+    }),
+    [charts, config],
+  );
+
+  // Custom component to render inline charts
+  const components = useMemo(
+    () => ({
+      // Override text rendering to inject inline charts
+      p: ({ children, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => {
+        const processChildren = (child: unknown): React.ReactNode => {
+          if (typeof child === "string") {
+            // Check if this text contains chart placeholders
+            const parts = child.split(/(__chart_\d+__)/g);
+            if (parts.length > 1) {
+              return parts.map((part, i) => {
+                if (part.match(/__chart_\d+__/) && allCharts[part]) {
+                  return <InlineChart key={i} config={allCharts[part]} themeName={themeName} />;
+                }
+                return part;
+              });
+            }
+          }
+          return child as React.ReactNode;
+        };
+
+        const processed = Array.isArray(children)
+          ? children.map(processChildren)
+          : processChildren(children);
+
+        return <p {...props}>{processed}</p>;
+      },
+    }),
+    [allCharts, themeName],
+  );
+
+  return (
+    <>
+      <style>{markdownStyles}</style>
+      <div className={`markdown-renderer ${className}`}>
+        <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+          {processedContent}
+        </ReactMarkdown>
+      </div>
+    </>
+  );
+});