@adecore/agents-react 0.31.12 → 0.33.0

package/dist/chat/ui/mermaid.js

@@ -1,93 +1,56 @@
-/* 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) {
-    return {
-        startOnLoad: false,
-        securityLevel: 'strict',
-        htmlLabels: false,
-        suppressErrorRendering: true,
-        secure: SECURE_KEYS,
-        theme: 'base',
-        darkMode: dark,
-        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
-        }
-    };
+export function renderOptions(font, idPrefix) {
+  return {
+    responsive: false,
+    idPrefix,
+    fontFamily: font.family,
+    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) {
-    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;
-    }
-    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 };
+export function themedSvg(svg, colors) {
+  const root = ROOT.exec(svg);
+  if (root === null) {
+    return svg;
+  }
+  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)}`;
-}
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}

package/dist/chat/ui/quote-selection.js

@@ -5,7 +5,7 @@ const ANSWER = '[data-quote-answer]';
 /* Registers the composer below a thread as the one its quote button hands a quote to, until the returned call. */
 export const QuoteTakerContext = createContext(null);
 function answerAt(node) {
-    return (node instanceof Element ? node : node.parentElement)?.closest(ANSWER) ?? null;
+  return (node instanceof Element ? node : node.parentElement)?.closest(ANSWER) ?? null;
 }
 /*
  * Whether the range selects text a person can see outside the answer. A triple-click on a paragraph
@@ -13,35 +13,38 @@ function answerAt(node) {
  * paragraph alone.
  */
 function selectsOutside(range, answer) {
-    const walker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_TEXT);
-    for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
-        if (!range.intersectsNode(node) || answer.contains(node)) {
-            continue;
-        }
-        const text = node.textContent ?? '';
-        const start = node === range.startContainer ? range.startOffset : 0;
-        const end = node === range.endContainer ? range.endOffset : text.length;
-        const parent = node.parentElement;
-        if (text.slice(start, end).trim() !== '' && parent !== null && getComputedStyle(parent).userSelect !== 'none') {
-            return true;
-        }
+  const walker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_TEXT);
+  for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
+    if (!range.intersectsNode(node) || answer.contains(node)) {
+      continue;
     }
-    return false;
+    const text = node.textContent ?? '';
+    const start = node === range.startContainer ? range.startOffset : 0;
+    const end = node === range.endContainer ? range.endOffset : text.length;
+    const parent = node.parentElement;
+    if (text.slice(start, end).trim() !== '' && parent !== null && getComputedStyle(parent).userSelect !== 'none') {
+      return true;
+    }
+  }
+  return false;
 }
 /* The quote the selection makes, when it lies in one answer of this thread, and the reply it was taken from. */
 export function selectedAnswerQuote(selection, thread) {
-    if (thread === null || selection === null || selection.isCollapsed || selection.rangeCount === 0) {
-        return null;
-    }
-    const range = selection.getRangeAt(0);
-    const answer = answerAt(range.startContainer) ?? answerAt(range.endContainer);
-    if (answer === null || !thread.contains(answer)) {
-        return null;
-    }
-    const inside = answer.contains(range.startContainer) && answer.contains(range.endContainer);
-    if (!inside && selectsOutside(range, answer)) {
-        return null;
-    }
-    const text = quoteOf(selection.toString());
-    return text === null ? null : { text, itemId: answer.closest('[data-find-item]')?.getAttribute('data-find-item') ?? null };
-}
+  if (thread === null || selection === null || selection.isCollapsed || selection.rangeCount === 0) {
+    return null;
+  }
+  const range = selection.getRangeAt(0);
+  const answer = answerAt(range.startContainer) ?? answerAt(range.endContainer);
+  if (answer === null || !thread.contains(answer)) {
+    return null;
+  }
+  const inside = answer.contains(range.startContainer) && answer.contains(range.endContainer);
+  if (!inside && selectsOutside(range, answer)) {
+    return null;
+  }
+  const text = quoteOf(selection.toString());
+  return text === null ? null : {
+    text,
+    itemId: answer.closest('[data-find-item]')?.getAttribute('data-find-item') ?? null
+  };
+}

package/dist/chat/ui/rehype-chips.js

@@ -3,30 +3,42 @@ import { chipText, tokenizeChips } from '../mentions.js';
 const SKIPPED = new Set(['code', 'pre']);
 /* A chip as an element: the renderer reads `data-chip` and `data-value`, the text keeps the sigil. */
 function chipElement(segment) {
-    return {
-        type: 'element',
-        tagName: 'span',
-        properties: { dataChip: segment.kind, dataValue: segment.kind === 'mention' ? segment.path : segment.name },
-        children: [{ type: 'text', value: chipText(segment) }]
-    };
+  return {
+    type: 'element',
+    tagName: 'span',
+    properties: {
+      dataChip: segment.kind,
+      dataValue: segment.kind === 'mention' ? segment.path : segment.name
+    },
+    children: [{
+      type: 'text',
+      value: chipText(segment)
+    }]
+  };
 }
 function split(parent, mentions, skills) {
-    parent.children = parent.children.flatMap((child) => {
-        if (child.type === 'text') {
-            return tokenizeChips(child.value, mentions, skills).map((segment) => segment.kind === 'text' ? { type: 'text', value: segment.text } : chipElement(segment));
-        }
-        if (child.type === 'element' && !SKIPPED.has(child.tagName)) {
-            split(child, mentions, skills);
-        }
-        return [child];
-    });
+  parent.children = parent.children.flatMap(child => {
+    if (child.type === 'text') {
+      return tokenizeChips(child.value, mentions, skills).map(segment => segment.kind === 'text' ? {
+        type: 'text',
+        value: segment.text
+      } : chipElement(segment));
+    }
+    if (child.type === 'element' && !SKIPPED.has(child.tagName)) {
+      split(child, mentions, skills);
+    }
+    return [child];
+  });
 }
 /* The `@path` and `$name` tokens a person picked in the composer, cut out of the text as chips. */
-export function rehypeChips({ mentions = [], skills = [] } = {}) {
-    return (tree) => {
-        if (mentions.length === 0 && skills.length === 0) {
-            return;
-        }
-        split(tree, mentions, skills);
-    };
-}
+export function rehypeChips({
+  mentions = [],
+  skills = []
+} = {}) {
+  return tree => {
+    if (mentions.length === 0 && skills.length === 0) {
+      return;
+    }
+    split(tree, mentions, skills);
+  };
+}

package/dist/chat/ui/rehype-fade.js

@@ -6,23 +6,34 @@ const SKIPPED = new Set(['code', 'pre']);
 const WHITESPACE = /^\s+$/;
 /* A text cut into its words and the whitespace between them, in order. */
 export function wordSegments(text) {
-    return text.split(/(\s+)/).filter((segment) => segment !== '');
+  return text.split(/(\s+)/).filter(segment => segment !== '');
 }
 export function isWhitespace(segment) {
-    return WHITESPACE.test(segment);
+  return WHITESPACE.test(segment);
 }
 function wrap(parent) {
-    parent.children = parent.children.flatMap((child) => {
-        if (child.type === 'text') {
-            return wordSegments(child.value).map((segment) => isWhitespace(segment)
-                ? { type: 'text', value: segment }
-                : { type: 'element', tagName: 'span', properties: { className: [FADE_CLASS] }, children: [{ type: 'text', value: segment }] });
-        }
-        if (child.type === 'element' && !SKIPPED.has(child.tagName)) {
-            wrap(child);
-        }
-        return [child];
-    });
+  parent.children = parent.children.flatMap(child => {
+    if (child.type === 'text') {
+      return wordSegments(child.value).map(segment => isWhitespace(segment) ? {
+        type: 'text',
+        value: segment
+      } : {
+        type: 'element',
+        tagName: 'span',
+        properties: {
+          className: [FADE_CLASS]
+        },
+        children: [{
+          type: 'text',
+          value: segment
+        }]
+      });
+    }
+    if (child.type === 'element' && !SKIPPED.has(child.tagName)) {
+      wrap(child);
+    }
+    return [child];
+  });
 }
 /*
  * Every word of a reply that is still streaming in a span that fades in. Words only ever arrive at
@@ -30,7 +41,7 @@ function wrap(parent) {
  * on screen keep their element and their fade does not start again.
  */
 export function rehypeFadeWords() {
-    return (tree) => {
-        wrap(tree);
-    };
-}
+  return tree => {
+    wrap(tree);
+  };
+}

package/dist/chat/ui/remark-html-as-text.js

@@ -1,18 +1,25 @@
 // Parents whose children are blocks, where a bare text node would stand outside any paragraph.
 const FLOW_PARENTS = new Set(['root', 'blockquote', 'listItem', 'footnoteDefinition']);
 function literal(parent) {
-    if (parent.children === undefined) {
-        return;
+  if (parent.children === undefined) {
+    return;
+  }
+  const flow = FLOW_PARENTS.has(parent.type);
+  parent.children = parent.children.map(child => {
+    if (child.type !== 'html') {
+      literal(child);
+      return child;
     }
-    const flow = FLOW_PARENTS.has(parent.type);
-    parent.children = parent.children.map((child) => {
-        if (child.type !== 'html') {
-            literal(child);
-            return child;
-        }
-        const text = { ...child, type: 'text' };
-        return flow ? { type: 'paragraph', position: child.position, children: [text] } : text;
-    });
+    const text = {
+      ...child,
+      type: 'text'
+    };
+    return flow ? {
+      type: 'paragraph',
+      position: child.position,
+      children: [text]
+    } : text;
+  });
 }
 /*
  * Raw HTML in a message as the characters a person typed. react-markdown drops an `html` node, so
@@ -20,7 +27,7 @@ function literal(parent) {
  * newlines of an HTML block still become line breaks.
  */
 export function remarkHtmlAsText() {
-    return (tree) => {
-        literal(tree);
-    };
-}
+  return tree => {
+    literal(tree);
+  };
+}

package/dist/chat/ui/reply-context.js

@@ -1,3 +1,3 @@
 import { createContext } from 'react';
 export const ReplyContext = createContext(null);
-export const UiReplyNavigationContext = createContext(null);
+export const UiReplyNavigationContext = createContext(null);

package/dist/chat/ui/reveal.js

@@ -1,3 +1,4 @@
+import { c as _c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from 'react';
 /* How long a word takes to fade in. `.chat-fade` in styles.css carries the same number. */
 export const REVEAL_FADE_MS = 300;
@@ -14,7 +15,7 @@ export const REVEAL_MAX_HELD_WORD = 32;
 // The span mounts a commit after the frame that grew the text, so its fade ends a little later than that frame plus the duration.
 const FADE_SETTLE_MS = REVEAL_FADE_MS + 50;
 function isSpace(text, index) {
-    return index >= 0 && index < text.length && /\s/.test(text[index]);
+  return index >= 0 && index < text.length && /\s/.test(text[index]);
 }
 /*
  * Where the reveal stands `elapsedMs` after it stood at `position`, with `target` characters
@@ -22,13 +23,13 @@ function isSpace(text, index) {
  * rate of the screen.
  */
 export function advanceReveal(position, target, elapsedMs, finished) {
-    if (position >= target) {
-        return target;
-    }
-    const elapsed = Math.min(Math.max(elapsedMs, 0), REVEAL_MAX_FRAME_MS);
-    const eased = (target - position) * (1 - Math.exp(-elapsed / REVEAL_TAU_MS));
-    const floor = ((finished ? REVEAL_FINISH_MIN_CPS : REVEAL_MIN_CPS) * elapsed) / 1000;
-    return Math.min(target, position + Math.max(eased, floor));
+  if (position >= target) {
+    return target;
+  }
+  const elapsed = Math.min(Math.max(elapsedMs, 0), REVEAL_MAX_FRAME_MS);
+  const eased = (target - position) * (1 - Math.exp(-elapsed / REVEAL_TAU_MS));
+  const floor = (finished ? REVEAL_FINISH_MIN_CPS : REVEAL_MIN_CPS) * elapsed / 1000;
+  return Math.min(target, position + Math.max(eased, floor));
 }
 /*
  * How much of `text` to draw for a reveal at `position`: back to the last word boundary, because a
@@ -37,20 +38,20 @@ export function advanceReveal(position, target, elapsedMs, finished) {
  * whitespace after it.
  */
 export function revealBoundary(text, position, complete) {
-    const end = Math.min(text.length, Math.max(0, Math.floor(position)));
-    if (end === text.length && complete) {
-        return end;
-    }
-    let cut = end;
-    while (cut > 0 && !isSpace(text, cut) && !isSpace(text, cut - 1)) {
-        cut -= 1;
-    }
-    if (end - cut <= REVEAL_MAX_HELD_WORD) {
-        return cut;
-    }
-    // Half of a surrogate pair renders as a replacement box.
-    const last = text.charCodeAt(end - 1);
-    return last >= 0xd800 && last <= 0xdbff ? end - 1 : end;
+  const end = Math.min(text.length, Math.max(0, Math.floor(position)));
+  if (end === text.length && complete) {
+    return end;
+  }
+  let cut = end;
+  while (cut > 0 && !isSpace(text, cut) && !isSpace(text, cut - 1)) {
+    cut -= 1;
+  }
+  if (end - cut <= REVEAL_MAX_HELD_WORD) {
+    return cut;
+  }
+  // Half of a surrogate pair renders as a replacement box.
+  const last = text.charCodeAt(end - 1);
+  return last >= 0xd800 && last <= 0xdbff ? end - 1 : end;
 }
 /*
  * The part of a streaming text that is on screen, catching up with what arrived over time. It starts
@@ -58,57 +59,145 @@ export function revealBoundary(text, position, complete) {
  * was already done on mount is shown whole at once.
  */
 export function useRevealedText(text, streaming) {
-    const [active, setActive] = useState(streaming);
-    const [shown, setShown] = useState(() => revealBoundary(text, text.length, !streaming));
-    const latest = useRef({ text, streaming });
-    const position = useRef(text.length);
-    const shownRef = useRef(shown);
-    const activeRef = useRef(active);
-    useEffect(() => {
-        latest.current = { text, streaming };
-    });
-    // Turning streaming on for a text that stood still (the setting flipped mid-reply) starts from what is there.
-    useEffect(() => {
-        if (!streaming || activeRef.current) {
-            return;
+  const $ = _c(22);
+  const [active, setActive] = useState(streaming);
+  let t0;
+  if ($[0] !== streaming || $[1] !== text) {
+    t0 = () => revealBoundary(text, text.length, !streaming);
+    $[0] = streaming;
+    $[1] = text;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const [shown, setShown] = useState(t0);
+  let t1;
+  if ($[3] !== streaming || $[4] !== text) {
+    t1 = {
+      text,
+      streaming
+    };
+    $[3] = streaming;
+    $[4] = text;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const latest = useRef(t1);
+  const position = useRef(text.length);
+  const shownRef = useRef(shown);
+  const activeRef = useRef(active);
+  let t2;
+  if ($[6] !== streaming || $[7] !== text) {
+    t2 = () => {
+      latest.current = {
+        text,
+        streaming
+      };
+    };
+    $[6] = streaming;
+    $[7] = text;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  useEffect(t2);
+  let t3;
+  let t4;
+  if ($[9] !== streaming) {
+    t3 = () => {
+      if (!streaming || activeRef.current) {
+        return;
+      }
+      position.current = latest.current.text.length;
+      shownRef.current = revealBoundary(latest.current.text, position.current, false);
+      activeRef.current = true;
+      setShown(shownRef.current);
+      setActive(true);
+    };
+    t4 = [streaming];
+    $[9] = streaming;
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t3 = $[10];
+    t4 = $[11];
+  }
+  useEffect(t3, t4);
+  let t5;
+  let t6;
+  if ($[12] !== active) {
+    t5 = () => {
+      if (!active) {
+        return;
+      }
+      let frame = 0;
+      let previous = null;
+      let grewAt = -Infinity;
+      const tick = now => {
+        const elapsed = previous === null ? 0 : now - previous;
+        previous = now;
+        const current = latest.current;
+        const finished = !current.streaming;
+        position.current = advanceReveal(position.current, current.text.length, elapsed, finished);
+        const length = revealBoundary(current.text, position.current, finished);
+        if (length !== shownRef.current) {
+          shownRef.current = length;
+          grewAt = now;
+          setShown(length);
         }
-        position.current = latest.current.text.length;
-        shownRef.current = revealBoundary(latest.current.text, position.current, false);
-        activeRef.current = true;
-        setShown(shownRef.current);
-        setActive(true);
-    }, [streaming]);
-    useEffect(() => {
-        if (!active) {
-            return;
+        if (finished && length >= current.text.length && now - grewAt >= FADE_SETTLE_MS) {
+          activeRef.current = false;
+          setActive(false);
+          return;
         }
-        let frame = 0;
-        let previous = null;
-        let grewAt = -Infinity;
-        const tick = (now) => {
-            const elapsed = previous === null ? 0 : now - previous;
-            previous = now;
-            const current = latest.current;
-            const finished = !current.streaming;
-            position.current = advanceReveal(position.current, current.text.length, elapsed, finished);
-            const length = revealBoundary(current.text, position.current, finished);
-            if (length !== shownRef.current) {
-                shownRef.current = length;
-                grewAt = now;
-                setShown(length);
-            }
-            if (finished && length >= current.text.length && now - grewAt >= FADE_SETTLE_MS) {
-                activeRef.current = false;
-                setActive(false);
-                return;
-            }
-            frame = requestAnimationFrame(tick);
-        };
         frame = requestAnimationFrame(tick);
-        return () => cancelAnimationFrame(frame);
-    }, [active]);
-    if (!active) {
-        return { text, active: false };
+      };
+      frame = requestAnimationFrame(tick);
+      return () => cancelAnimationFrame(frame);
+    };
+    t6 = [active];
+    $[12] = active;
+    $[13] = t5;
+    $[14] = t6;
+  } else {
+    t5 = $[13];
+    t6 = $[14];
+  }
+  useEffect(t5, t6);
+  if (!active) {
+    let t7;
+    if ($[15] !== text) {
+      t7 = {
+        text,
+        active: false
+      };
+      $[15] = text;
+      $[16] = t7;
+    } else {
+      t7 = $[16];
     }
-    return { text: text.slice(0, Math.min(shown, text.length)), active: true };
-}
+    return t7;
+  }
+  let t7;
+  if ($[17] !== shown || $[18] !== text) {
+    t7 = text.slice(0, Math.min(shown, text.length));
+    $[17] = shown;
+    $[18] = text;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  let t8;
+  if ($[20] !== t7) {
+    t8 = {
+      text: t7,
+      active: true
+    };
+    $[20] = t7;
+    $[21] = t8;
+  } else {
+    t8 = $[21];
+  }
+  return t8;
+}