@adecore/agents-react 0.31.12 → 0.33.0

package/dist/chat/ui/MermaidBlock.js

@@ -1,95 +1,301 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useContext, useEffect, useId, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Code, Workflow } from 'lucide-react';
 import { IconButton } from '@adecore/ui';
-import { useChatHost } from '../../host.js';
 import { CodeBlock } from './CodeBlock.js';
 import { CodeStreamingContext } from './code-streaming.js';
-import { MERMAID_TOKENS, mermaidConfig, sizedSvg, svgDataUrl } from './mermaid.js';
+import { DIAGRAM_TOKENS, GROUND_TOKEN, renderOptions, svgDataUrl, themedSvg } from './mermaid.js';
 import { watchTheme } from './theme-watch.js';
-// Mermaid keeps one configuration for the page, so one diagram is drawn at a time with its own.
-let queue = Promise.resolve();
+import { useHostCodeMode } from '../../host-hooks.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 let probeCanvas = null;
-/* A token as an opaque `#rrggbb` over `ground`, which is what Mermaid's color math reads. */
+/* A token as an opaque `#rrggbb` over `ground`, so a border with an alpha mixes with the ground and not with what is under the image. */
 function resolveColor(element, token, ground) {
-    probeCanvas ??= document.createElement('canvas');
-    probeCanvas.width = 1;
-    probeCanvas.height = 1;
-    const context = probeCanvas.getContext('2d', { willReadFrequently: true });
-    const value = getComputedStyle(element).getPropertyValue(token).trim();
-    if (context === null || value === '') {
-        return ground;
-    }
-    context.fillStyle = ground;
-    context.fillRect(0, 0, 1, 1);
-    context.fillStyle = value;
-    context.fillRect(0, 0, 1, 1);
-    const [red, green, blue] = context.getImageData(0, 0, 1, 1).data;
-    return `#${[red, green, blue].map((channel) => channel.toString(16).padStart(2, '0')).join('')}`;
-}
-function themeColors(element) {
-    const ground = resolveColor(element, MERMAID_TOKENS.ground, '#808080');
-    const entries = Object.entries(MERMAID_TOKENS).map(([name, token]) => [name, name === 'ground' ? ground : resolveColor(element, token, ground)]);
-    return Object.fromEntries(entries);
+  probeCanvas ??= document.createElement('canvas');
+  probeCanvas.width = 1;
+  probeCanvas.height = 1;
+  const context = probeCanvas.getContext('2d', {
+    willReadFrequently: true
+  });
+  const value = getComputedStyle(element).getPropertyValue(token).trim();
+  if (context === null || value === '') {
+    return ground;
+  }
+  context.fillStyle = ground;
+  context.fillRect(0, 0, 1, 1);
+  context.fillStyle = value;
+  context.fillRect(0, 0, 1, 1);
+  const [red, green, blue] = context.getImageData(0, 0, 1, 1).data;
+  return `#${[red, green, blue].map(channel => channel.toString(16).padStart(2, '0')).join('')}`;
 }
 function diagramLook(element) {
-    const style = getComputedStyle(element);
-    return { colors: themeColors(element), font: { family: style.fontFamily, size: style.fontSize } };
+  const style = getComputedStyle(element);
+  const ground = resolveColor(element, GROUND_TOKEN, '#808080');
+  const colors = Object.fromEntries(Object.entries(DIAGRAM_TOKENS).map(([name, token]) => [name, token === GROUND_TOKEN ? ground : resolveColor(element, token, ground)]));
+  const font = {
+    family: style.fontFamily,
+    mono: style.getPropertyValue('--font-mono').trim() || 'monospace',
+    size: Number.parseFloat(style.fontSize) || 14
+  };
+  return {
+    colors,
+    font
+  };
 }
-async function drawDiagram(id, source, look, dark) {
-    const { default: mermaid } = await import('mermaid');
-    mermaid.initialize(mermaidConfig(look.colors, dark, look.font));
-    const { svg } = await mermaid.render(id, source);
-    return sizedSvg(svg);
+/* Keeps the look on screen when nothing of it changed, so a change of the root that leaves every color alone draws nothing again. */
+function keepingSame(next) {
+  return current => current !== null && JSON.stringify(current) === JSON.stringify(next) ? current : next;
+}
+async function layOut(id, source, font) {
+  const {
+    renderAsync
+  } = await import('pele/lazy');
+  const {
+    svg,
+    width,
+    height
+  } = await renderAsync(source, renderOptions(font, id));
+  return {
+    svg,
+    width: Math.ceil(width),
+    height: Math.ceil(height)
+  };
 }
 /*
- * A ```mermaid fence, drawn as the diagram once the fence is closed. Mermaid is large, so it loads on
- * the first diagram of the page. While the fence grows, and when the text is no diagram Mermaid can
- * draw, it is the code block it would otherwise be.
+ * A ```mermaid fence, drawn as the diagram once the fence is closed. Pele loads on the first diagram of the
+ * page, and then only what a diagram of that kind needs. While the fence grows, and when the text is no diagram
+ * Pele can draw, it is the code block it would otherwise be.
  */
-export function MermaidBlock({ code }) {
-    const host = useChatHost();
-    const { t } = useTranslation('agent-chat');
-    const streaming = useContext(CodeStreamingContext);
-    const dark = host.code.useMode() === 'dark';
-    const id = `mermaid-${useId().replace(/[^\w-]/g, '')}`;
-    const frame = useRef(null);
-    const [source, setSource] = useState(false);
-    const [drawing, setDrawing] = useState({ state: 'drawing' });
-    // The look of the diagram on screen or on its way there, null before the first.
-    const drawnLook = useRef(null);
-    const [themeRevision, setThemeRevision] = useState(0);
-    // An app may change its colors without turning light or dark, which only the root of the page tells.
-    useEffect(() => {
-        const element = frame.current;
-        if (element === null) {
-            return;
-        }
-        return watchTheme(element.ownerDocument, () => {
-            if (drawnLook.current !== null && JSON.stringify(diagramLook(element)) !== drawnLook.current) {
-                setThemeRevision((revision) => revision + 1);
-            }
-        });
-    }, []);
-    useEffect(() => {
-        const element = frame.current;
-        if (streaming || element === null) {
-            return;
-        }
-        let cancelled = false;
-        const look = diagramLook(element);
-        drawnLook.current = JSON.stringify(look);
-        // A diagram already drawn stays until the next one is there, so a change of the theme does not make it blink.
-        setDrawing((current) => (current.state === 'drawn' ? current : { state: 'drawing' }));
-        const drawn = queue.then(() => (cancelled ? null : drawDiagram(id, code, look, dark)));
-        queue = drawn.catch(() => undefined);
-        drawn.then((image) => !cancelled && setDrawing(image === null ? { state: 'failed' } : { state: 'drawn', image }), () => !cancelled && setDrawing({ state: 'failed' }));
-        return () => {
-            cancelled = true;
-        };
-    }, [code, dark, id, streaming, themeRevision]);
-    const showsDiagram = !streaming && !source && drawing.state !== 'failed';
-    const toggle = streaming || drawing.state === 'failed' ? undefined : (_jsx(IconButton, { icon: source ? Workflow : Code, size: "sm", label: source ? t('code.mermaid.showDiagram') : t('code.mermaid.showSource'), onClick: () => setSource((shown) => !shown) }));
-    return (_jsxs("div", { ref: frame, children: [_jsx(CodeBlock, { code: code, lang: "mermaid", actions: toggle, view: showsDiagram ? (_jsx("div", { className: "overflow-x-auto p-3", "aria-busy": drawing.state === 'drawing' || undefined, children: drawing.state === 'drawn' && (_jsx("img", { src: svgDataUrl(drawing.image.svg), width: drawing.image.width, height: drawing.image.height, alt: t('code.mermaid.diagram'), className: "m-0 max-w-none", draggable: false })) })) : undefined }), drawing.state === 'failed' && _jsx("p", { className: "m-0 mt-1 text-xs text-text-faint", children: t('code.mermaid.failed') })] }));
+export function MermaidBlock(t0) {
+  const $ = _c(48);
+  const {
+    code
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const streaming = useContext(CodeStreamingContext);
+  const dark = useHostCodeMode() === "dark";
+  const t1 = useId();
+  let t2;
+  if ($[0] !== t1) {
+    let t3;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = /[^\w-]/g;
+      $[2] = t3;
+    } else {
+      t3 = $[2];
+    }
+    t2 = t1.replace(t3, "");
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const id = `mermaid-${t2}`;
+  const frame = useRef(null);
+  const [source, setSource] = useState(false);
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      state: "drawing"
+    };
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const [drawing, setDrawing] = useState(t3);
+  const [look, setLook] = useState(null);
+  let t4;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = () => {
+      const element = frame.current;
+      if (element !== null) {
+        setLook(keepingSame(diagramLook(element)));
+      }
+    };
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== dark) {
+    t5 = [dark];
+    $[5] = dark;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  useEffect(t4, t5);
+  let t6;
+  let t7;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = () => {
+      const element_0 = frame.current;
+      if (element_0 === null) {
+        return;
+      }
+      return watchTheme(element_0.ownerDocument, () => setLook(keepingSame(diagramLook(element_0))));
+    };
+    t7 = [];
+    $[7] = t6;
+    $[8] = t7;
+  } else {
+    t6 = $[7];
+    t7 = $[8];
+  }
+  useEffect(t6, t7);
+  const fontFamily = look?.font.family;
+  const fontMono = look?.font.mono;
+  const fontSize = look?.font.size;
+  let t8;
+  let t9;
+  if ($[9] !== code || $[10] !== fontFamily || $[11] !== fontMono || $[12] !== fontSize || $[13] !== id || $[14] !== streaming) {
+    t8 = () => {
+      if (streaming || fontFamily === undefined || fontMono === undefined || fontSize === undefined) {
+        return;
+      }
+      let cancelled = false;
+      layOut(id, code, {
+        family: fontFamily,
+        mono: fontMono,
+        size: fontSize
+      }).then(image => !cancelled && setDrawing({
+        state: "drawn",
+        image
+      }), () => !cancelled && setDrawing({
+        state: "failed"
+      }));
+      return () => {
+        cancelled = true;
+      };
+    };
+    t9 = [code, fontFamily, fontMono, fontSize, id, streaming];
+    $[9] = code;
+    $[10] = fontFamily;
+    $[11] = fontMono;
+    $[12] = fontSize;
+    $[13] = id;
+    $[14] = streaming;
+    $[15] = t8;
+    $[16] = t9;
+  } else {
+    t8 = $[15];
+    t9 = $[16];
+  }
+  useEffect(t8, t9);
+  let T0;
+  let t10;
+  let t11;
+  let t12;
+  let t13;
+  let t14;
+  if ($[17] !== code || $[18] !== drawing.image || $[19] !== drawing.state || $[20] !== look || $[21] !== source || $[22] !== streaming || $[23] !== t) {
+    const image_0 = drawing.state === "drawn" && look !== null ? {
+      ...drawing.image,
+      svg: themedSvg(drawing.image.svg, look.colors)
+    } : null;
+    const showsDiagram = !streaming && !source && drawing.state !== "failed";
+    let t15;
+    if ($[30] !== drawing.state || $[31] !== source || $[32] !== streaming || $[33] !== t) {
+      t15 = streaming || drawing.state === "failed" ? undefined : /*#__PURE__*/_jsx(IconButton, {
+        icon: source ? Workflow : Code,
+        size: "sm",
+        label: source ? t("code.mermaid.showDiagram") : t("code.mermaid.showSource"),
+        onClick: () => setSource(_temp)
+      });
+      $[30] = drawing.state;
+      $[31] = source;
+      $[32] = streaming;
+      $[33] = t;
+      $[34] = t15;
+    } else {
+      t15 = $[34];
+    }
+    const toggle = t15;
+    t14 = frame;
+    T0 = CodeBlock;
+    t10 = code;
+    t11 = "mermaid";
+    t12 = toggle;
+    t13 = showsDiagram ? /*#__PURE__*/_jsx("div", {
+      className: "overflow-x-auto p-3",
+      "aria-busy": image_0 === null || undefined,
+      children: image_0 !== null && /*#__PURE__*/_jsx("img", {
+        src: svgDataUrl(image_0.svg),
+        width: image_0.width,
+        height: image_0.height,
+        alt: t("code.mermaid.diagram"),
+        className: "m-0 max-w-none",
+        draggable: false
+      })
+    }) : undefined;
+    $[17] = code;
+    $[18] = drawing.image;
+    $[19] = drawing.state;
+    $[20] = look;
+    $[21] = source;
+    $[22] = streaming;
+    $[23] = t;
+    $[24] = T0;
+    $[25] = t10;
+    $[26] = t11;
+    $[27] = t12;
+    $[28] = t13;
+    $[29] = t14;
+  } else {
+    T0 = $[24];
+    t10 = $[25];
+    t11 = $[26];
+    t12 = $[27];
+    t13 = $[28];
+    t14 = $[29];
+  }
+  let t15;
+  if ($[35] !== T0 || $[36] !== t10 || $[37] !== t11 || $[38] !== t12 || $[39] !== t13) {
+    t15 = /*#__PURE__*/_jsx(T0, {
+      code: t10,
+      lang: t11,
+      actions: t12,
+      view: t13
+    });
+    $[35] = T0;
+    $[36] = t10;
+    $[37] = t11;
+    $[38] = t12;
+    $[39] = t13;
+    $[40] = t15;
+  } else {
+    t15 = $[40];
+  }
+  let t16;
+  if ($[41] !== drawing.state || $[42] !== t) {
+    t16 = drawing.state === "failed" && /*#__PURE__*/_jsx("p", {
+      className: "m-0 mt-1 text-xs text-text-faint",
+      children: t("code.mermaid.failed")
+    });
+    $[41] = drawing.state;
+    $[42] = t;
+    $[43] = t16;
+  } else {
+    t16 = $[43];
+  }
+  let t17;
+  if ($[44] !== t14 || $[45] !== t15 || $[46] !== t16) {
+    t17 = /*#__PURE__*/_jsxs("div", {
+      ref: t14,
+      children: [t15, t16]
+    });
+    $[44] = t14;
+    $[45] = t15;
+    $[46] = t16;
+    $[47] = t17;
+  } else {
+    t17 = $[47];
+  }
+  return t17;
 }
+function _temp(shown) {
+  return !shown;
+}