@astro-minimax/ai 0.9.0 → 0.9.3

package/dist/components/CodeBlock.d.ts

@@ -0,0 +1,31 @@
+import type { FunctionalComponent, VNode } from "preact";
+import { MermaidBlock } from "./MermaidBlock.js";
+import { MarkmapBlock } from "./MarkmapBlock.js";
+export { MermaidBlock, MarkmapBlock };
+export interface CodeBlockProps {
+    code: string;
+    lang?: string;
+    isStreaming?: boolean;
+}
+export interface HighlightResult {
+    html: string;
+    loading: boolean;
+    error?: string;
+}
+export declare function useShikiHighlighter(code: string, lang?: string): HighlightResult;
+export declare function CodeBlock({ code, lang, isStreaming }: CodeBlockProps): VNode;
+export interface FollowUpSuggestion {
+    text: string;
+    icon?: string;
+}
+interface FollowUpSuggestionsProps {
+    suggestions: FollowUpSuggestion[];
+    onSend: (text: string) => void;
+    lang?: string;
+}
+export declare function generateFollowUpSuggestions(responseText: string, articleContext?: {
+    title?: string;
+    keyPoints?: string[];
+}): FollowUpSuggestion[];
+export declare const FollowUpSuggestions: FunctionalComponent<FollowUpSuggestionsProps>;
+//# sourceMappingURL=CodeBlock.d.ts.map

package/dist/components/CodeBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/components/CodeBlock.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC;AAEtC,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+BD,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,MAAM,EACZ,IAAI,CAAC,EAAE,MAAM,GACZ,eAAe,CA0DjB;AAaD,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,cAAc,GAAG,KAAK,CA6D5E;AAID,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,EAAE,CAAC;IAClC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,2BAA2B,CACzC,YAAY,EAAE,MAAM,EACpB,cAAc,CAAC,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;CAAE,GACxD,kBAAkB,EAAE,CAwCtB;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CACnD,wBAAwB,CAkBzB,CAAC"}

package/dist/components/CodeBlock.js

@@ -0,0 +1,143 @@
+import { useEffect, useState } from "preact/hooks";
+import { h } from 'preact';
+
+import { CopyButton } from "./VizShared.js";
+import { MermaidBlock } from "./MermaidBlock.js";
+import { MarkmapBlock } from "./MarkmapBlock.js";
+import { normalizeCodeBlockLang } from "../utils/text.js";
+let shikiModule = null;
+let highlighterCache = null;
+async function loadShikiHighlighter() {
+  if (highlighterCache) return highlighterCache;
+  if (!shikiModule) {
+    shikiModule = import("shiki").catch(() => null);
+  }
+  const mod = await shikiModule;
+  if (!mod || typeof mod !== "object") return null;
+  const shiki = mod;
+  if (typeof shiki.codeToHtml === "function") {
+    highlighterCache = shiki;
+    return highlighterCache;
+  }
+  return null;
+}
+function useShikiHighlighter(code, lang) {
+  const [html, setHtml] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState();
+  const normalizedLang = normalizeCodeBlockLang(lang);
+  useEffect(() => {
+    let mounted = true;
+    setLoading(true);
+    setError(void 0);
+    loadShikiHighlighter().then(async (highlighter) => {
+      if (!mounted) return;
+      if (!highlighter) {
+        setHtml(escapeHtml(code));
+        setLoading(false);
+        return;
+      }
+      try {
+        const isDark = typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "dark";
+        const theme = isDark ? "github-dark" : "github-light";
+        const highlighted = await highlighter.codeToHtml(code, {
+          lang: normalizedLang,
+          theme
+        });
+        if (mounted) {
+          setHtml(highlighted);
+          setLoading(false);
+        }
+      } catch (err) {
+        if (mounted) {
+          setHtml(escapeHtml(code));
+          setError(err instanceof Error ? err.message : "Highlight error");
+          setLoading(false);
+        }
+      }
+    }).catch((err) => {
+      if (mounted) {
+        setHtml(escapeHtml(code));
+        setError(err instanceof Error ? err.message : "Shiki load error");
+        setLoading(false);
+      }
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [code, normalizedLang]);
+  return { html, loading, error };
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function CodeBlock({ code, lang, isStreaming }) {
+  const normalizedLang = normalizeCodeBlockLang(lang);
+  if (normalizedLang === "mermaid") {
+    return /* @__PURE__ */ h(MermaidBlock, { code, isStreaming });
+  }
+  if (normalizedLang === "markmap" || normalizedLang === "mindmap") {
+    return /* @__PURE__ */ h(MarkmapBlock, { code, isStreaming });
+  }
+  const { html, loading, error } = useShikiHighlighter(
+    isStreaming ? "" : code,
+    lang
+  );
+  if (isStreaming || loading) {
+    return /* @__PURE__ */ h("div", { class: "code-block-wrapper group relative" }, /* @__PURE__ */ h("pre", { class: "bg-muted/60 overflow-x-auto rounded-md px-3 py-2 font-mono text-[12px] leading-relaxed" }, /* @__PURE__ */ h("code", null, code)), lang && /* @__PURE__ */ h("span", { class: "text-foreground-soft/50 bg-muted/80 absolute top-1 right-2 rounded px-1.5 py-0.5 text-[10px] font-medium" }, lang));
+  }
+  if (html && !error) {
+    return /* @__PURE__ */ h("div", { class: "code-block-wrapper group relative" }, /* @__PURE__ */ h(
+      "div",
+      {
+        class: "code-highlight [&_pre]:!bg-muted/60 overflow-x-auto rounded-md text-[12px] leading-relaxed [&_pre]:!m-0 [&_pre]:!p-3",
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    ), lang && /* @__PURE__ */ h("span", { class: "text-foreground-soft/50 bg-muted/80 absolute top-1 right-2 rounded px-1.5 py-0.5 text-[10px] font-medium" }, lang), /* @__PURE__ */ h(CopyButton, { code }));
+  }
+  return /* @__PURE__ */ h("div", { class: "code-block-wrapper group relative" }, /* @__PURE__ */ h("pre", { class: "bg-muted/60 overflow-x-auto rounded-md px-3 py-2 font-mono text-[12px] leading-relaxed" }, /* @__PURE__ */ h("code", null, code)), lang && /* @__PURE__ */ h("span", { class: "text-foreground-soft/50 bg-muted/80 absolute top-1 right-2 rounded px-1.5 py-0.5 text-[10px] font-medium" }, lang), /* @__PURE__ */ h(CopyButton, { code }));
+}
+function generateFollowUpSuggestions(responseText, articleContext) {
+  const suggestions = [];
+  const lowerText = responseText.toLowerCase();
+  if (lowerText.includes("```") || lowerText.includes("code") || lowerText.includes("\u4EE3\u7801")) {
+    suggestions.push({ text: "\u89E3\u91CA\u8FD9\u6BB5\u4EE3\u7801", icon: "code" });
+  }
+  if (lowerText.includes("config") || lowerText.includes("\u914D\u7F6E") || lowerText.includes("\u8BBE\u7F6E")) {
+    suggestions.push({ text: "\u8BE6\u7EC6\u914D\u7F6E\u6B65\u9AA4", icon: "config" });
+  }
+  if (lowerText.includes("\u6587\u7AE0") || lowerText.includes("article") || lowerText.includes("post")) {
+    suggestions.push({ text: "\u63A8\u8350\u76F8\u5173\u6587\u7AE0", icon: "article" });
+  }
+  if (lowerText.includes("\u5982\u4F55") || lowerText.includes("how to")) {
+    suggestions.push({ text: "\u4E3E\u4E2A\u5177\u4F53\u4F8B\u5B50", icon: "example" });
+  }
+  if (articleContext?.title) {
+    suggestions.push({
+      text: `\u8BE6\u89E3 "${articleContext.title.slice(0, 20)}..."`,
+      icon: "detail"
+    });
+  }
+  return suggestions.slice(0, 3);
+}
+const FollowUpSuggestions = ({ suggestions, onSend }) => {
+  if (suggestions.length === 0) return null;
+  return /* @__PURE__ */ h("div", { class: "follow-up-suggestions mt-2 flex flex-wrap gap-1.5" }, suggestions.map((s, i) => /* @__PURE__ */ h(
+    "button",
+    {
+      key: i,
+      type: "button",
+      onClick: () => onSend(s.text),
+      class: "border-border bg-muted/30 text-foreground-soft hover:border-accent/40 hover:bg-accent/10 hover:text-foreground inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[11px] transition-colors"
+    },
+    s.text
+  )));
+};
+export {
+  CodeBlock,
+  FollowUpSuggestions,
+  MarkmapBlock,
+  MermaidBlock,
+  generateFollowUpSuggestions,
+  useShikiHighlighter
+};

package/dist/components/MarkmapBlock.d.ts

@@ -0,0 +1,4 @@
+import type { VNode } from 'preact';
+import type { CodeBlockProps } from "./CodeBlock.js";
+export declare function MarkmapBlock({ code, isStreaming }: CodeBlockProps): VNode | null;
+//# sourceMappingURL=MarkmapBlock.d.ts.map

package/dist/components/MarkmapBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkmapBlock.d.ts","sourceRoot":"","sources":["../../src/components/MarkmapBlock.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAoFtD,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,cAAc,GAAG,KAAK,GAAG,IAAI,CAkKhF"}

package/dist/components/MarkmapBlock.js

@@ -0,0 +1,180 @@
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import { h, Fragment } from 'preact';
+
+import { SkeletonLoader, useDragPanScroll, useScaledCanvas, useVizScaleControls, VizToolbar } from "./VizShared.js";
+function useMarkmap(svgRef, code, visible) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState();
+  const markmapInstanceRef = useRef(null);
+  useEffect(() => {
+    if (!code || !visible) {
+      setLoading(false);
+      return;
+    }
+    const svgEl = svgRef.current;
+    if (!svgEl) return;
+    let mounted = true;
+    setLoading(true);
+    setError(void 0);
+    if (markmapInstanceRef.current?.destroy) {
+      markmapInstanceRef.current.destroy();
+      markmapInstanceRef.current = null;
+    }
+    Promise.all([
+      import("markmap-lib"),
+      import("markmap-view")
+    ]).then(async ([markmapLib, markmapView]) => {
+      if (!mounted) return;
+      try {
+        const { Transformer } = markmapLib;
+        const { Markmap } = markmapView;
+        const transformer = new Transformer();
+        const { root } = transformer.transform(code);
+        const mm = new Markmap(svgEl);
+        mm.setData(root);
+        mm.fit();
+        markmapInstanceRef.current = mm;
+        if (mounted) {
+          setLoading(false);
+        }
+      } catch (err) {
+        if (mounted) {
+          setError(err instanceof Error ? err.message : "Markmap error");
+          setLoading(false);
+        }
+      }
+    }).catch(() => {
+      if (mounted) {
+        setError("Markmap not available");
+        setLoading(false);
+      }
+    });
+    return () => {
+      mounted = false;
+      if (markmapInstanceRef.current?.destroy) {
+        markmapInstanceRef.current.destroy();
+      }
+    };
+  }, [code, visible]);
+  return { loading, error, markmapInstanceRef };
+}
+function MarkmapBlock({ code, isStreaming }) {
+  const containerRef = useRef(null);
+  const viewportRef = useRef(null);
+  const contentRef = useRef(null);
+  const svgRef = useRef(null);
+  const { scale, handleZoomIn, handleZoomOut, handleReset, handleWheelZoom } = useVizScaleControls();
+  const [showSource, setShowSource] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isVisible, setIsVisible] = useState(true);
+  const showDiagram = !showSource;
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsVisible(entry.isIntersecting),
+      { threshold: 0.1 }
+    );
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+  const resolvedCode = isStreaming ? "" : code;
+  const { loading, error, markmapInstanceRef } = useMarkmap(svgRef, resolvedCode, isVisible);
+  const showSkeleton = isStreaming || loading && !error;
+  const handleShowSource = useCallback(() => setShowSource((v) => !v), []);
+  const handleFullscreen = useCallback(() => {
+    if (!containerRef.current) return;
+    if (document.fullscreenElement === containerRef.current) {
+      document.exitFullscreen();
+    } else {
+      containerRef.current.requestFullscreen().catch(() => {
+      });
+    }
+  }, []);
+  useEffect(() => {
+    const handleChange = () => {
+      setIsFullscreen(document.fullscreenElement === containerRef.current);
+    };
+    document.addEventListener("fullscreenchange", handleChange);
+    return () => document.removeEventListener("fullscreenchange", handleChange);
+  }, []);
+  useEffect(() => {
+    if (!isFullscreen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && document.fullscreenElement) {
+        document.exitFullscreen();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isFullscreen]);
+  useEffect(() => {
+    if (isFullscreen) return;
+    const container = containerRef.current;
+    if (!container) return;
+    container.scrollTop = 0;
+    container.scrollLeft = 0;
+  }, [isFullscreen, scale, showSource]);
+  const { scaledStyle, transformStyle } = useScaledCanvas(contentRef, scale, [resolvedCode, showSource, isFullscreen, loading, error]);
+  useEffect(() => {
+    if (!showDiagram || loading || error || !isVisible || showSkeleton) return;
+    const instance = markmapInstanceRef.current;
+    if (!instance?.fit) return;
+    const refit = () => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          instance.fit?.();
+        });
+      });
+    };
+    refit();
+    const frame = requestAnimationFrame(refit);
+    const settleTimer = window.setTimeout(refit, 180);
+    const lateTimer = window.setTimeout(refit, 420);
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(refit) : null;
+    if (viewportRef.current) resizeObserver?.observe(viewportRef.current);
+    if (svgRef.current) resizeObserver?.observe(svgRef.current);
+    if (contentRef.current) resizeObserver?.observe(contentRef.current);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.clearTimeout(settleTimer);
+      window.clearTimeout(lateTimer);
+      resizeObserver?.disconnect();
+    };
+  }, [showDiagram, resolvedCode, isFullscreen, loading, error, isVisible, markmapInstanceRef, showSkeleton]);
+  useDragPanScroll(viewportRef, showDiagram && !showSkeleton, [resolvedCode, isFullscreen, scale, showSkeleton]);
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      ref: containerRef,
+      class: `markmap-block group relative rounded-md border border-[var(--viz-border)] bg-[var(--viz-bg)] ${isFullscreen ? "flex h-full w-full flex-col overflow-hidden p-4" : "p-3"}`,
+      style: {
+        background: isFullscreen ? "var(--background)" : void 0
+      }
+    },
+    showSkeleton && /* @__PURE__ */ h(SkeletonLoader, { height: "120px" }),
+    error && !showSkeleton && /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h("pre", { class: "overflow-x-auto rounded-md bg-muted/60 px-3 py-2 text-[12px] leading-relaxed font-mono" }, /* @__PURE__ */ h("code", { class: "text-amber-600 dark:text-amber-400" }, code)), /* @__PURE__ */ h("div", { class: "mt-1 px-1 text-[10px] text-foreground-soft" }, "Markmap: ", error)),
+    !error && /* @__PURE__ */ h(Fragment, null, showSource ? /* @__PURE__ */ h("pre", { class: `overflow-auto text-[11px] leading-relaxed font-mono text-foreground-soft ${isFullscreen ? "min-h-0 flex-1 pt-10" : ""}` }, /* @__PURE__ */ h("code", null, code)) : /* @__PURE__ */ h(
+      "div",
+      {
+        ref: viewportRef,
+        class: `overflow-auto cursor-grab active:cursor-grabbing ${isFullscreen ? "min-h-0 flex-1 pt-10" : "max-h-[400px]"}`,
+        onWheel: handleWheelZoom
+      },
+      /* @__PURE__ */ h("div", { class: "flex min-h-full min-w-full items-start justify-center" }, /* @__PURE__ */ h("div", { style: { ...scaledStyle, display: showSkeleton ? "none" : void 0 } }, /* @__PURE__ */ h("div", { ref: contentRef, class: "markmap-content transition-transform duration-200", style: transformStyle }, /* @__PURE__ */ h("svg", { ref: svgRef, class: "markmap-svg block", style: { minHeight: "200px" } }))))
+    ), /* @__PURE__ */ h(
+      VizToolbar,
+      {
+        onZoomIn: handleZoomIn,
+        onZoomOut: handleZoomOut,
+        onReset: handleReset,
+        onFullscreen: handleFullscreen,
+        onShowSource: handleShowSource,
+        showSourceActive: showSource
+      }
+    ))
+  );
+}
+export {
+  MarkmapBlock
+};

package/dist/components/MermaidBlock.d.ts

@@ -0,0 +1,4 @@
+import type { VNode } from 'preact';
+import type { CodeBlockProps } from "./CodeBlock.js";
+export declare function MermaidBlock({ code, isStreaming }: CodeBlockProps): VNode | null;
+//# sourceMappingURL=MermaidBlock.d.ts.map

package/dist/components/MermaidBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MermaidBlock.d.ts","sourceRoot":"","sources":["../../src/components/MermaidBlock.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AA4DtD,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,cAAc,GAAG,KAAK,GAAG,IAAI,CAiMhF"}

package/dist/components/MermaidBlock.js

@@ -0,0 +1,193 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { h } from 'preact';
+
+import { SkeletonLoader, useDragPanScroll, useScaledCanvas, useVizScaleControls, VizToolbar } from "./VizShared.js";
+function useMermaid(code) {
+  const [svg, setSvg] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState();
+  useEffect(() => {
+    let mounted = true;
+    setLoading(true);
+    setError(void 0);
+    import("mermaid").then(async ({ default: mermaid }) => {
+      if (!mounted) return;
+      try {
+        const isDark = typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "dark";
+        mermaid.initialize({
+          startOnLoad: false,
+          securityLevel: "strict",
+          theme: isDark ? "dark" : "default"
+        });
+        const id = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+        const { svg: rendered } = await mermaid.render(id, code);
+        if (mounted) {
+          setSvg(rendered);
+          setLoading(false);
+        }
+      } catch (err) {
+        if (mounted) {
+          setError(err instanceof Error ? err.message : "Mermaid error");
+          setLoading(false);
+        }
+      }
+    }).catch(() => {
+      if (mounted) {
+        setError("Mermaid not available");
+        setLoading(false);
+      }
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [code]);
+  return { svg, loading, error };
+}
+function MermaidBlock({ code, isStreaming }) {
+  const { svg, loading, error } = useMermaid(isStreaming ? "" : code);
+  const containerRef = useRef(null);
+  const viewportRef = useRef(null);
+  const contentRef = useRef(null);
+  const [svgSize, setSvgSize] = useState(null);
+  const { scale, handleZoomIn, handleZoomOut, handleReset, handleWheelZoom } = useVizScaleControls();
+  const [showSource, setShowSource] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const showDiagram = !showSource;
+  const contentKey = useMemo(() => {
+    if (!code) return "";
+    let hash = 0;
+    for (let i = 0; i < code.length; i++) {
+      const char = code.charCodeAt(i);
+      hash = (hash << 5) - hash + char;
+      hash = hash & hash;
+    }
+    return `mermaid-${Math.abs(hash).toString(36)}`;
+  }, [code]);
+  const handleShowSource = useCallback(() => setShowSource((v) => !v), []);
+  const handleFullscreen = useCallback(() => {
+    if (!containerRef.current) return;
+    if (document.fullscreenElement === containerRef.current) {
+      document.exitFullscreen();
+    } else {
+      containerRef.current.requestFullscreen().catch(() => {
+      });
+    }
+  }, []);
+  useEffect(() => {
+    const handleChange = () => {
+      setIsFullscreen(document.fullscreenElement === containerRef.current);
+    };
+    document.addEventListener("fullscreenchange", handleChange);
+    return () => document.removeEventListener("fullscreenchange", handleChange);
+  }, []);
+  useEffect(() => {
+    if (!isFullscreen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && document.fullscreenElement) {
+        document.exitFullscreen();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isFullscreen]);
+  useEffect(() => {
+    if (isFullscreen) return;
+    const container = containerRef.current;
+    if (!container) return;
+    container.scrollTop = 0;
+    container.scrollLeft = 0;
+  }, [isFullscreen, scale, showSource]);
+  useEffect(() => {
+    if (!svg || !showDiagram) {
+      setSvgSize(null);
+      return;
+    }
+    const content = contentRef.current;
+    const svgEl = content?.querySelector("svg");
+    if (!(svgEl instanceof SVGSVGElement)) {
+      setSvgSize(null);
+      return;
+    }
+    const updateSvgSize = () => {
+      const viewBox = svgEl.viewBox?.baseVal;
+      const widthAttr = Number(svgEl.getAttribute("width") || 0);
+      const heightAttr = Number(svgEl.getAttribute("height") || 0);
+      const rect = svgEl.getBoundingClientRect();
+      const width = Math.max(1, Math.ceil(viewBox?.width || widthAttr || rect.width || 1));
+      const height = Math.max(1, Math.ceil(viewBox?.height || heightAttr || rect.height || 1));
+      svgEl.style.display = "block";
+      svgEl.style.width = `${width}px`;
+      svgEl.style.height = `${height}px`;
+      svgEl.style.maxWidth = "none";
+      setSvgSize((current) => current?.width === width && current?.height === height ? current : { width, height });
+    };
+    updateSvgSize();
+    const frame = requestAnimationFrame(updateSvgSize);
+    const delayedFrame = requestAnimationFrame(() => requestAnimationFrame(updateSvgSize));
+    const settleTimer = window.setTimeout(updateSvgSize, 180);
+    const lateTimer = window.setTimeout(updateSvgSize, 420);
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(updateSvgSize) : null;
+    resizeObserver?.observe(svgEl);
+    if (content) resizeObserver?.observe(content);
+    if (viewportRef.current) resizeObserver?.observe(viewportRef.current);
+    return () => {
+      cancelAnimationFrame(frame);
+      cancelAnimationFrame(delayedFrame);
+      window.clearTimeout(settleTimer);
+      window.clearTimeout(lateTimer);
+      resizeObserver?.disconnect();
+    };
+  }, [svg, showDiagram, isFullscreen]);
+  useDragPanScroll(viewportRef, showDiagram, [svg, isFullscreen, scale]);
+  const { scaledStyle, transformStyle } = useScaledCanvas(contentRef, scale, [svg, showSource, isFullscreen]);
+  const effectiveScaledStyle = svgSize ? {
+    width: `${Math.max(1, Math.ceil(svgSize.width * scale))}px`,
+    height: `${Math.max(1, Math.ceil(svgSize.height * scale))}px`
+  } : scaledStyle;
+  if (isStreaming || loading) {
+    return /* @__PURE__ */ h("div", { class: "mermaid-block group relative overflow-hidden rounded-md border border-[var(--viz-border)] bg-[var(--viz-bg)] p-3" }, /* @__PURE__ */ h(SkeletonLoader, { height: "80px" }));
+  }
+  if (error) {
+    return /* @__PURE__ */ h("div", { class: "mermaid-block" }, /* @__PURE__ */ h("pre", { class: "overflow-x-auto rounded-md bg-muted/60 px-3 py-2 text-[12px] leading-relaxed font-mono" }, /* @__PURE__ */ h("code", { class: "text-amber-600 dark:text-amber-400" }, code)), /* @__PURE__ */ h("div", { class: "mt-1 px-1 text-[10px] text-foreground-soft" }, "Mermaid: ", error));
+  }
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      ref: containerRef,
+      key: contentKey,
+      class: `mermaid-block group relative rounded-md border border-[var(--viz-border)] bg-[var(--viz-bg)] ${isFullscreen ? "flex h-full w-full flex-col overflow-hidden p-4" : "p-3"}`,
+      style: isFullscreen ? { background: "var(--background)" } : void 0
+    },
+    showSource ? /* @__PURE__ */ h("pre", { class: `overflow-auto text-[11px] leading-relaxed font-mono text-foreground-soft ${isFullscreen ? "min-h-0 flex-1 pt-10" : ""}` }, /* @__PURE__ */ h("code", null, code)) : /* @__PURE__ */ h(
+      "div",
+      {
+        ref: viewportRef,
+        class: `overflow-auto cursor-grab active:cursor-grabbing ${isFullscreen ? "min-h-0 flex-1 pt-10" : "max-h-[400px]"}`,
+        onWheel: handleWheelZoom
+      },
+      /* @__PURE__ */ h("div", { class: "flex min-h-full min-w-full items-start justify-center" }, /* @__PURE__ */ h("div", { style: effectiveScaledStyle }, /* @__PURE__ */ h(
+        "div",
+        {
+          ref: contentRef,
+          class: "origin-top-left transition-transform duration-200",
+          style: transformStyle,
+          dangerouslySetInnerHTML: { __html: svg }
+        }
+      )))
+    ),
+    /* @__PURE__ */ h(
+      VizToolbar,
+      {
+        onZoomIn: handleZoomIn,
+        onZoomOut: handleZoomOut,
+        onReset: handleReset,
+        onFullscreen: handleFullscreen,
+        onShowSource: handleShowSource,
+        showSourceActive: showSource
+      }
+    )
+  );
+}
+export {
+  MermaidBlock
+};

package/dist/components/MessageBubble.d.ts

@@ -0,0 +1,21 @@
+import type { UIMessage } from 'ai';
+import type { ArticleChatContext } from "../server/types.js";
+export declare function getActionToolConfirmations(message: UIMessage, lang: string): string[];
+export declare function shouldSuppressAssistantFallbackText(text: string, confirmations: string[], lang: string): boolean;
+export declare function useTypewriter(fullText: string, isStreaming: boolean): string;
+export declare function getTextFromMessage(message: UIMessage): string;
+export declare function BotIcon({ class: cls }: {
+    class?: string;
+}): import("preact").JSX.Element;
+export declare function BotAvatar(): import("preact").JSX.Element;
+export declare function TypingDots({ statusMessage }: {
+    statusMessage?: string;
+}): import("preact").JSX.Element;
+export declare function AssistantMessage({ message, isStreaming, lang, articleContext, onFollowUp }: {
+    message: UIMessage;
+    isStreaming?: boolean;
+    lang?: string;
+    articleContext?: ArticleChatContext;
+    onFollowUp?: (text: string) => void;
+}): import("preact").JSX.Element | null;
+//# sourceMappingURL=MessageBubble.d.ts.map

package/dist/components/MessageBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../src/components/MessageBubble.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AACpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAyF7D,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAOrF;AAED,wBAAgB,mCAAmC,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAWhH;AAOD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,CAoE5E;AAID,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,SAAS,GAAG,MAAM,CAQ7D;AAID,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,gCAOzD;AAED,wBAAgB,SAAS,iCAMxB;AAED,wBAAgB,UAAU,CAAC,EAAE,aAAa,EAAE,EAAE;IAAE,aAAa,CAAC,EAAE,MAAM,CAAA;CAAE,gCAavE;AAMD,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,IAAW,EAAE,cAAc,EAAE,UAAU,EAAE,EAAE;IAClG,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,uCAuJA"}