@adecore/agents-react 0.32.0 → 0.33.0

package/dist/chat/ui/mermaid.js

@@ -1,80 +1,55 @@
-/* The token each color reads. Borders carry an alpha, so they are resolved over the ground. */
-export const MERMAID_TOKENS = {
-  ground: '--chat-code-bg',
-  node: '--surface-raised',
-  nodeBorder: '--border-strong',
-  text: '--text',
-  line: '--text-muted',
-  cluster: '--surface',
-  clusterBorder: '--border',
-  note: '--accent-soft'
+/* The variable of Pele each token of the theme fills. Borders carry an alpha, so every color is resolved over the ground. */
+export const DIAGRAM_TOKENS = {
+  '--pele-bg': '--chat-code-bg',
+  '--pele-fg': '--text',
+  '--pele-muted': '--text-muted',
+  '--pele-line': '--text-muted',
+  '--pele-surface': '--surface-raised',
+  '--pele-surface-alt': '--surface',
+  '--pele-border': '--border-strong',
+  '--pele-accent': '--accent',
+  '--pele-critical': '--status-error',
+  '--pele-series-1': '--accent',
+  '--pele-series-2': '--chart-2',
+  '--pele-series-3': '--chart-3',
+  '--pele-series-4': '--chart-4',
+  '--pele-series-5': '--chart-5',
+  '--pele-series-6': '--chart-6'
 };
-// Mermaid's own list plus what keeps a diagram in the theme and out of HTML: a directive in the text cannot change these.
-const SECURE_KEYS = ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize', 'maxEdges', 'suppressErrorRendering', 'htmlLabels', 'theme', 'themeVariables', 'themeCSS', 'darkMode', 'fontFamily'];
+export const GROUND_TOKEN = DIAGRAM_TOKENS['--pele-bg'];
 /*
- * Strict: no HTML in labels, no click handlers, no links that run script. What comes out is drawn as an
- * image as well, which never runs script and loads nothing, whatever the text of the diagram says.
+ * At the size it was laid out at, since an image has no container to shrink to. No links and no images, and no
+ * math or icon resolver, which are the only markup Pele inserts unfiltered. What comes out is drawn as an image as
+ * well, which never runs script and loads nothing, whatever the text of the diagram says.
  */
-export function mermaidConfig(colors, dark, font) {
+export function renderOptions(font, idPrefix) {
   return {
-    startOnLoad: false,
-    securityLevel: 'strict',
-    htmlLabels: false,
-    suppressErrorRendering: true,
-    secure: SECURE_KEYS,
-    theme: 'base',
-    darkMode: dark,
+    responsive: false,
+    idPrefix,
     fontFamily: font.family,
-    themeVariables: {
-      darkMode: dark,
-      fontFamily: font.family,
-      fontSize: font.size,
-      background: colors.ground,
-      primaryColor: colors.node,
-      primaryTextColor: colors.text,
-      primaryBorderColor: colors.nodeBorder,
-      secondaryColor: colors.note,
-      tertiaryColor: colors.cluster,
-      mainBkg: colors.node,
-      nodeBorder: colors.nodeBorder,
-      textColor: colors.text,
-      titleColor: colors.text,
-      lineColor: colors.line,
-      clusterBkg: colors.cluster,
-      clusterBorder: colors.clusterBorder,
-      edgeLabelBackground: colors.ground,
-      noteBkgColor: colors.note,
-      noteTextColor: colors.text,
-      noteBorderColor: colors.nodeBorder
-    }
+    fontFamilyMono: font.mono,
+    fontSize: font.size,
+    links: false,
+    images: false
   };
 }
 const ROOT = /<svg\b[^>]*>/;
-const VIEW_BOX = /\sviewBox="([^"]*)"/;
-const SIZE_ATTRIBUTES = /\s(?:width|height|style)="[^"]*"/g;
+const STYLE = /\sstyle="/;
+function attributeText(value) {
+  return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
 /*
- * The diagram at the size it was laid out at. Mermaid fits it to the width of its container instead,
- * which an image does not have, so the root takes the size its view box names. Null for anything
- * without one.
+ * The drawing with the colors set on its root. An image does not see the variables of the page, so they are
+ * written in, and a change of the theme only writes them again.
  */
-export function sizedSvg(svg) {
+export function themedSvg(svg, colors) {
   const root = ROOT.exec(svg);
-  const viewBox = root === null ? null : VIEW_BOX.exec(root[0]);
-  if (root === null || viewBox === null) {
-    return null;
-  }
-  const [,, boxWidth, boxHeight] = viewBox[1].trim().split(/[\s,]+/).map(Number);
-  if (!Number.isFinite(boxWidth) || !Number.isFinite(boxHeight) || boxWidth <= 0 || boxHeight <= 0) {
-    return null;
+  if (root === null) {
+    return svg;
   }
-  const width = Math.ceil(boxWidth);
-  const height = Math.ceil(boxHeight);
-  const tag = root[0].replace(SIZE_ATTRIBUTES, '').replace(/^<svg\b/, `<svg width="${width}" height="${height}"`);
-  return {
-    svg: svg.slice(0, root.index) + tag + svg.slice(root.index + root[0].length),
-    width,
-    height
-  };
+  const variables = attributeText(Object.entries(colors).map(([name, value]) => `${name}:${value};`).join(''));
+  const tag = STYLE.test(root[0]) ? root[0].replace(STYLE, style => style + variables) : root[0].replace(/^<svg\b/, `<svg style="${variables}"`);
+  return svg.slice(0, root.index) + tag + svg.slice(root.index + root[0].length);
 }
 export function svgDataUrl(svg) {
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;

package/dist/chat/ui/rows/WorkRows.d.ts

@@ -22,6 +22,9 @@ export declare function ToggleLine({ icon, label, brand, detail, command, look,
     time?: number;
     className?: string;
 }): import("react").JSX.Element;
+export declare function ToolBody({ tool }: {
+    tool: ChatToolItem;
+}): import("react").JSX.Element;
 export declare function WorkRow({ tool, chatId, nested, detail, icon, label, failed }: {
     tool: ChatToolItem;
     chatId?: string;

package/dist/chat/ui/rows/WorkRows.js

@@ -678,7 +678,7 @@ function ToolOutput(t0) {
   return t3;
 }
 /* An opened call without a card: what it was asked in the foreground, what it answered muted below. */
-function ToolBody(t0) {
+export function ToolBody(t0) {
   const $ = _c(16);
   const {
     tool