@adecore/agents-react 0.31.12 → 0.33.0

package/dist/chat/ui/rows/row-rhythm.js

@@ -9,9 +9,9 @@ export const FOLLOW_THRESHOLD_PX = 40;
  * already carries the gap before it, and the row after one is the answer, so neither takes a seam.
  */
 export function rowRhythm(row, previous) {
-    const question = row.kind === 'user';
-    const seam = !question && previous !== null && previous.kind !== 'user' && (isBlock(row) !== isBlock(previous) || previous.kind === 'visual');
-    return clsx(question && 'pb-(--chat-answer-gap)', seam && 'pt-(--chat-block-gap)');
+  const question = row.kind === 'user';
+  const seam = !question && previous !== null && previous.kind !== 'user' && (isBlock(row) !== isBlock(previous) || previous.kind === 'visual');
+  return clsx(question && 'pb-(--chat-answer-gap)', seam && 'pt-(--chat-block-gap)');
 }
 /*
  * Whether a reply's header goes over this row, and the time it shows: the first row after the question
@@ -19,21 +19,31 @@ export function rowRhythm(row, previous) {
  * starts halfway through a reply has no time to show.
  */
 export function replyHeader(row, previous) {
-    if (row.kind === 'user' || row.kind === 'turn-start') {
-        return null;
-    }
-    if (previous === null) {
-        return { at: null };
-    }
-    if (previous.kind === 'user') {
-        return { at: previous.item.createdAt };
-    }
-    if (previous.kind === 'turn-start') {
-        return { at: previous.turn.createdAt };
-    }
+  if (row.kind === 'user' || row.kind === 'turn-start') {
     return null;
+  }
+  if (previous === null) {
+    return {
+      at: null
+    };
+  }
+  if (previous.kind === 'user') {
+    return {
+      at: previous.item.createdAt
+    };
+  }
+  if (previous.kind === 'turn-start') {
+    return {
+      at: previous.turn.createdAt
+    };
+  }
+  return null;
 }
 // A transform also shifts a descendant's sticky position after it was resolved against the scrollport.
 export function rowPosition(kind, top) {
-    return kind === 'visual' ? { top } : { transform: `translateY(${top}px)` };
-}
+  return kind === 'visual' ? {
+    top
+  } : {
+    transform: `translateY(${top}px)`
+  };
+}

package/dist/chat/ui/theme-watch.js

@@ -10,27 +10,30 @@ const THEME_ATTRIBUTES = ['class', 'style', 'data-theme'];
  * locks the scroll writes the root's `style`), so a caller compares what it reads with what it drew.
  */
 export function watchTheme(owner, changed) {
-    const view = owner.defaultView ?? window;
-    let frame = 0;
-    const schedule = () => {
-        if (frame === 0) {
-            frame = view.requestAnimationFrame(() => {
-                frame = 0;
-                changed();
-            });
-        }
-    };
-    const observer = new view.MutationObserver(schedule);
-    for (const root of [owner.documentElement, owner.body]) {
-        if (root !== null) {
-            observer.observe(root, { attributes: true, attributeFilter: THEME_ATTRIBUTES });
-        }
+  const view = owner.defaultView ?? window;
+  let frame = 0;
+  const schedule = () => {
+    if (frame === 0) {
+      frame = view.requestAnimationFrame(() => {
+        frame = 0;
+        changed();
+      });
     }
-    return () => {
-        observer.disconnect();
-        if (frame !== 0) {
-            view.cancelAnimationFrame(frame);
-            frame = 0;
-        }
-    };
-}
+  };
+  const observer = new view.MutationObserver(schedule);
+  for (const root of [owner.documentElement, owner.body]) {
+    if (root !== null) {
+      observer.observe(root, {
+        attributes: true,
+        attributeFilter: THEME_ATTRIBUTES
+      });
+    }
+  }
+  return () => {
+    observer.disconnect();
+    if (frame !== 0) {
+      view.cancelAnimationFrame(frame);
+      frame = 0;
+    }
+  };
+}

package/dist/chat/ui/timestamp-format.js

@@ -1,2 +1,5 @@
 /* The full date and time a row's time names on its tooltip. */
-export const TIMESTAMP_FORMAT = { dateStyle: 'full', timeStyle: 'medium' };
+export const TIMESTAMP_FORMAT = {
+  dateStyle: 'full',
+  timeStyle: 'medium'
+};

package/dist/chat/ui/use-diff-source-tokens.js

@@ -1,43 +1,79 @@
+import { c as _c } from "react/compiler-runtime";
 import { useLayoutEffect, useMemo } from 'react';
 import { diffSyntaxDocument } from '@adecore/editor-react';
 import { useChatHost } from '../../host.js';
 import { diffSourceTokens, diffSyntaxRuntime } from './diff-syntax.js';
 function createSourceBinding(document, language, theme, runtime) {
-    const mapping = diffSyntaxDocument(document, language, theme);
-    const listeners = new Set();
-    let source;
-    const current = () => {
-        if (source === undefined) {
-            source = diffSourceTokens(document, mapping, runtime());
-            source.subscribe(() => {
-                for (const listener of [...listeners]) {
-                    listener();
-                }
-            });
+  const mapping = diffSyntaxDocument(document, language, theme);
+  const listeners = new Set();
+  let source;
+  const current = () => {
+    if (source === undefined) {
+      source = diffSourceTokens(document, mapping, runtime());
+      source.subscribe(() => {
+        for (const listener of [...listeners]) {
+          listener();
         }
-        return source;
-    };
-    return {
-        tokens: {
-            get: (side, index) => (mapping.locate(side, index) === undefined ? null : current().get(side, index)),
-            subscribe(listener) {
-                listeners.add(listener);
-                return () => {
-                    listeners.delete(listener);
-                };
-            }
-        },
-        release() {
-            // StrictMode replays effects with the same memo; the next read opens fresh sessions.
-            source?.dispose();
-            source = undefined;
-        }
-    };
+      });
+    }
+    return source;
+  };
+  return {
+    tokens: {
+      get: (side, index) => mapping.locate(side, index) === undefined ? null : current().get(side, index),
+      subscribe(listener) {
+        listeners.add(listener);
+        return () => {
+          listeners.delete(listener);
+        };
+      }
+    },
+    release() {
+      // StrictMode replays effects with the same memo; the next read opens fresh sessions.
+      source?.dispose();
+      source = undefined;
+    }
+  };
 }
 /* Without a `runtime`, the shared one of the host's `code`. */
 export function useDiffSourceTokens(document, language, theme, runtime) {
-    const { code } = useChatHost();
-    const binding = useMemo(() => createSourceBinding(document, language, theme, () => runtime ?? diffSyntaxRuntime(code)), [document, language, theme, runtime, code]);
-    useLayoutEffect(() => () => binding.release(), [binding]);
-    return binding.tokens;
-}
+  const $ = _c(11);
+  const {
+    code
+  } = useChatHost();
+  let t0;
+  if ($[0] !== code || $[1] !== runtime) {
+    t0 = () => runtime ?? diffSyntaxRuntime(code);
+    $[0] = code;
+    $[1] = runtime;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  let t1;
+  if ($[3] !== document || $[4] !== language || $[5] !== t0 || $[6] !== theme) {
+    t1 = createSourceBinding(document, language, theme, t0);
+    $[3] = document;
+    $[4] = language;
+    $[5] = t0;
+    $[6] = theme;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  const binding = t1;
+  let t2;
+  let t3;
+  if ($[8] !== binding) {
+    t2 = () => () => binding.release();
+    t3 = [binding];
+    $[8] = binding;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    t2 = $[9];
+    t3 = $[10];
+  }
+  useLayoutEffect(t2, t3);
+  return binding.tokens;
+}

package/dist/chat/ui/useToggleSet.js

@@ -1,25 +1,57 @@
-import { useCallback, useState } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import { useState } from 'react';
 /*
  * The ids of the folds a thread has open. `onToggle` is what a thread does about a person opening
  * one, which is to stop following the end: a fold is a deliberate look back, not a reason to jump.
  */
 export function useToggleSet(onToggle) {
-    const [ids, setIds] = useState(() => new Set());
-    const toggle = useCallback((id) => {
-        setIds((current) => {
-            const next = new Set(current);
-            if (next.has(id)) {
-                next.delete(id);
-            }
-            else {
-                next.add(id);
-            }
-            return next;
-        });
-        onToggle?.();
-    }, [onToggle]);
-    const add = useCallback((id) => {
-        setIds((current) => new Set(current).add(id));
-    }, []);
-    return { ids, toggle, add };
+  const $ = _c(6);
+  const [ids, setIds] = useState(_temp);
+  let t0;
+  if ($[0] !== onToggle) {
+    t0 = id => {
+      setIds(current => {
+        const next = new Set(current);
+        if (next.has(id)) {
+          next.delete(id);
+        } else {
+          next.add(id);
+        }
+        return next;
+      });
+      onToggle?.();
+    };
+    $[0] = onToggle;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const toggle = t0;
+  let t1;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = id_0 => {
+      setIds(current_0 => new Set(current_0).add(id_0));
+    };
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const add = t1;
+  let t2;
+  if ($[3] !== ids || $[4] !== toggle) {
+    t2 = {
+      ids,
+      toggle,
+      add
+    };
+    $[3] = ids;
+    $[4] = toggle;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
 }
+function _temp() {
+  return new Set();
+}

package/dist/chat/ui/visual-theme.js

@@ -1,7 +1,8 @@
+import { c as _c } from "react/compiler-runtime";
 import { useLayoutEffect, useState } from 'react';
 import { cleanVisualVariables } from '@adecore/agent-contracts/visual';
-import { useChatHost } from '../../host.js';
 import { watchTheme } from './theme-watch.js';
+import { useHostCodeMode } from '../../host-hooks.js';
 /*
  * A page's theme from the app's tokens. The names follow common component themes, where `--accent`
  * is a quiet hover ground and `--primary` the color that stands out, so the app's accent is the
@@ -9,60 +10,68 @@ import { watchTheme } from './theme-watch.js';
  * token the app does not set, keeps the page's default for this appearance.
  */
 export function visualThemeOf(tokens, appearance, background) {
-    const text = tokens.color('--text');
-    const quiet = tokens.color('--surface-hover');
-    const raised = tokens.color('--surface-raised');
-    const accent = tokens.color('--accent');
-    const onAccent = tokens.color('--accent-text');
-    const variables = {
-        '--background': background,
-        '--foreground': text,
-        '--muted': quiet,
-        '--muted-foreground': tokens.color('--text-muted'),
-        '--card': raised,
-        '--card-foreground': text,
-        '--popover': raised,
-        '--popover-foreground': text,
-        '--secondary': quiet,
-        '--secondary-foreground': text,
-        '--border': tokens.color('--border'),
-        '--input': tokens.color('--border-strong'),
-        '--ring': accent,
-        '--primary': accent,
-        '--primary-foreground': onAccent,
-        '--accent': quiet,
-        '--accent-foreground': text,
-        '--destructive': tokens.color('--status-error'),
-        '--destructive-foreground': onAccent,
-        '--warning': tokens.color('--status-needs-you'),
-        '--success': tokens.color('--positive'),
-        '--success-foreground': tokens.color('--positive-text'),
-        '--info': tokens.color('--status-running'),
-        '--code-background': tokens.color('--chat-code-bg'),
-        '--code-foreground': tokens.color('--chat-output'),
-        '--chart-1': tokens.color('--chart-1') || accent,
-        '--chart-2': tokens.color('--chart-2'),
-        '--chart-3': tokens.color('--chart-3'),
-        '--chart-4': tokens.color('--chart-4'),
-        '--chart-5': tokens.color('--chart-5'),
-        '--chart-6': tokens.color('--chart-6'),
-        '--radius': tokens.length('--radius-lg'),
-        '--font-sans': tokens.value('--font-sans'),
-        '--font-mono': tokens.value('--font-mono')
-    };
-    return { appearance, variables: cleanVisualVariables(variables) };
+  const text = tokens.color('--text');
+  const quiet = tokens.color('--surface-hover');
+  const raised = tokens.color('--surface-raised');
+  const accent = tokens.color('--accent');
+  const onAccent = tokens.color('--accent-text');
+  const variables = {
+    '--background': background,
+    '--foreground': text,
+    '--muted': quiet,
+    '--muted-foreground': tokens.color('--text-muted'),
+    '--card': raised,
+    '--card-foreground': text,
+    '--popover': raised,
+    '--popover-foreground': text,
+    '--secondary': quiet,
+    '--secondary-foreground': text,
+    '--border': tokens.color('--border'),
+    '--input': tokens.color('--border-strong'),
+    '--ring': accent,
+    '--primary': accent,
+    '--primary-foreground': onAccent,
+    '--accent': quiet,
+    '--accent-foreground': text,
+    '--destructive': tokens.color('--status-error'),
+    '--destructive-foreground': onAccent,
+    '--warning': tokens.color('--status-needs-you'),
+    '--success': tokens.color('--positive'),
+    '--success-foreground': tokens.color('--positive-text'),
+    '--info': tokens.color('--status-running'),
+    '--code-background': tokens.color('--chat-code-bg'),
+    '--code-foreground': tokens.color('--chat-output'),
+    '--chart-1': tokens.color('--chart-1') || accent,
+    '--chart-2': tokens.color('--chart-2'),
+    '--chart-3': tokens.color('--chart-3'),
+    '--chart-4': tokens.color('--chart-4'),
+    '--chart-5': tokens.color('--chart-5'),
+    '--chart-6': tokens.color('--chart-6'),
+    '--radius': tokens.length('--radius-lg'),
+    '--font-sans': tokens.value('--font-sans'),
+    '--font-mono': tokens.value('--font-mono')
+  };
+  return {
+    appearance,
+    variables: cleanVisualVariables(variables)
+  };
 }
 const RGB = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*(?:[,/]\s*([\d.]+)(%?)\s*)?\)$/;
 function rgbaOf(color) {
-    const match = RGB.exec(color.trim());
-    if (match === null) {
-        return null;
-    }
-    const alpha = match[4] === undefined ? 1 : Number(match[4]) / (match[5] === '%' ? 100 : 1);
-    return { red: Number(match[1]), green: Number(match[2]), blue: Number(match[3]), alpha };
+  const match = RGB.exec(color.trim());
+  if (match === null) {
+    return null;
+  }
+  const alpha = match[4] === undefined ? 1 : Number(match[4]) / (match[5] === '%' ? 100 : 1);
+  return {
+    red: Number(match[1]),
+    green: Number(match[2]),
+    blue: Number(match[3]),
+    alpha
+  };
 }
 function isTransparent(color) {
-    return color === 'transparent' || rgbaOf(color)?.alpha === 0;
+  return color === 'transparent' || rgbaOf(color)?.alpha === 0;
 }
 /*
  * What lies behind an element, from the computed backgrounds of it and its ancestors, nearest first:
@@ -70,70 +79,73 @@ function isTransparent(color) {
  * Null when none of them paints.
  */
 export function backgroundBehind(layers) {
-    const translucent = [];
-    for (const layer of layers) {
-        if (layer === '' || isTransparent(layer)) {
-            continue;
-        }
-        const color = rgbaOf(layer);
-        if (color !== null && color.alpha < 1) {
-            translucent.push(color);
-            continue;
-        }
-        if (color === null || translucent.length === 0) {
-            // A color in a space other than sRGB stays as the engine wrote it, since there is no laying another over it here.
-            return color === null ? layer : `rgb(${color.red}, ${color.green}, ${color.blue})`;
-        }
-        let { red, green, blue } = color;
-        for (const over of translucent.reverse()) {
-            red = over.red * over.alpha + red * (1 - over.alpha);
-            green = over.green * over.alpha + green * (1 - over.alpha);
-            blue = over.blue * over.alpha + blue * (1 - over.alpha);
-        }
-        return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`;
+  const translucent = [];
+  for (const layer of layers) {
+    if (layer === '' || isTransparent(layer)) {
+      continue;
     }
-    return null;
+    const color = rgbaOf(layer);
+    if (color !== null && color.alpha < 1) {
+      translucent.push(color);
+      continue;
+    }
+    if (color === null || translucent.length === 0) {
+      // A color in a space other than sRGB stays as the engine wrote it, since there is no laying another over it here.
+      return color === null ? layer : `rgb(${color.red}, ${color.green}, ${color.blue})`;
+    }
+    let {
+      red,
+      green,
+      blue
+    } = color;
+    for (const over of translucent.reverse()) {
+      red = over.red * over.alpha + red * (1 - over.alpha);
+      green = over.green * over.alpha + green * (1 - over.alpha);
+      blue = over.blue * over.alpha + blue * (1 - over.alpha);
+    }
+    return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`;
+  }
+  return null;
 }
 function sameTheme(left, right) {
-    return left.appearance === right.appearance && JSON.stringify(left.variables) === JSON.stringify(right.variables);
+  return left.appearance === right.appearance && JSON.stringify(left.variables) === JSON.stringify(right.variables);
 }
 /*
  * The theme where `element` stands. Colors and lengths are read off a probe in that very place, so a
  * nested theme answers for itself and every value comes out the way the engine computes it.
  */
 function readTheme(element, mode) {
-    const view = element.ownerDocument.defaultView ?? window;
-    const style = view.getComputedStyle(element);
-    const probe = element.ownerDocument.createElement('span');
-    probe.style.position = 'absolute';
-    probe.style.visibility = 'hidden';
-    element.append(probe);
-    try {
-        const probed = view.getComputedStyle(probe);
-        const declared = (token) => style.getPropertyValue(token).trim();
-        const computed = (property, token) => {
-            if (declared(token) === '') {
-                return '';
-            }
-            probe.style[property] = `var(${token})`;
-            return probed[property];
-        };
-        const tokens = {
-            color: (token) => computed('color', token),
-            length: (token) => computed('borderTopLeftRadius', token),
-            value: declared
-        };
-        const layers = [];
-        for (let node = element; node !== null; node = node.parentElement) {
-            layers.push(view.getComputedStyle(node).backgroundColor);
-        }
-        const scheme = style.colorScheme.trim();
-        const appearance = scheme === 'light' || scheme === 'dark' ? scheme : mode;
-        return visualThemeOf(tokens, appearance, backgroundBehind(layers) ?? tokens.color('--surface'));
-    }
-    finally {
-        probe.remove();
+  const view = element.ownerDocument.defaultView ?? window;
+  const style = view.getComputedStyle(element);
+  const probe = element.ownerDocument.createElement('span');
+  probe.style.position = 'absolute';
+  probe.style.visibility = 'hidden';
+  element.append(probe);
+  try {
+    const probed = view.getComputedStyle(probe);
+    const declared = token => style.getPropertyValue(token).trim();
+    const computed = (property, token) => {
+      if (declared(token) === '') {
+        return '';
+      }
+      probe.style[property] = `var(${token})`;
+      return probed[property];
+    };
+    const tokens = {
+      color: token => computed('color', token),
+      length: token => computed('borderTopLeftRadius', token),
+      value: declared
+    };
+    const layers = [];
+    for (let node = element; node !== null; node = node.parentElement) {
+      layers.push(view.getComputedStyle(node).backgroundColor);
     }
+    const scheme = style.colorScheme.trim();
+    const appearance = scheme === 'light' || scheme === 'dark' ? scheme : mode;
+    return visualThemeOf(tokens, appearance, backgroundBehind(layers) ?? tokens.color('--surface'));
+  } finally {
+    probe.remove();
+  }
 }
 /*
  * The app's theme for a visual drawn in `ref`, null until the element is there. It is read again when
@@ -141,27 +153,40 @@ function readTheme(element, mode) {
  * accent or a font a person picks reaches every frame as well.
  */
 export function useVisualTheme(ref) {
-    const host = useChatHost();
-    const mode = host.code.useMode();
-    const [theme, setTheme] = useState(null);
-    useLayoutEffect(() => {
-        const element = ref.current;
-        if (element === null) {
-            return;
-        }
-        const read = () => {
-            const next = readTheme(element, mode);
-            setTheme((current) => (current !== null && sameTheme(current, next) ? current : next));
-        };
-        read();
-        const owner = element.ownerDocument;
-        const stopWatching = watchTheme(owner, read);
-        const scheme = owner.defaultView?.matchMedia?.('(prefers-color-scheme: dark)') ?? null;
-        scheme?.addEventListener('change', read);
-        return () => {
-            stopWatching();
-            scheme?.removeEventListener('change', read);
-        };
-    }, [ref, mode]);
-    return theme;
-}
+  const $ = _c(4);
+  const mode = useHostCodeMode();
+  const [theme, setTheme] = useState(null);
+  let t0;
+  let t1;
+  if ($[0] !== mode || $[1] !== ref) {
+    t0 = () => {
+      const element = ref.current;
+      if (element === null) {
+        return;
+      }
+      const read = () => {
+        const next = readTheme(element, mode);
+        setTheme(current => current !== null && sameTheme(current, next) ? current : next);
+      };
+      read();
+      const owner = element.ownerDocument;
+      const stopWatching = watchTheme(owner, read);
+      const scheme = owner.defaultView?.matchMedia?.("(prefers-color-scheme: dark)") ?? null;
+      scheme?.addEventListener("change", read);
+      return () => {
+        stopWatching();
+        scheme?.removeEventListener("change", read);
+      };
+    };
+    t1 = [ref, mode];
+    $[0] = mode;
+    $[1] = ref;
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t0 = $[2];
+    t1 = $[3];
+  }
+  useLayoutEffect(t0, t1);
+  return theme;
+}