@adecore/agents-react 0.31.12 → 0.32.0

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;
+}

package/dist/chat/visual-bridge.js

@@ -7,8 +7,8 @@ import { clampVisualHeight, visualContentHeight } from './logic/visual-height.js
  */
 const SILENCE_MS = 3000;
 function timeout(ms, run) {
-    const timer = setTimeout(run, ms);
-    return () => clearTimeout(timer);
+  const timer = setTimeout(run, ms);
+  return () => clearTimeout(timer);
 }
 /*
  * Talks to the frame of one visual. It hands the sandbox host page the visual's page when it says it
@@ -17,135 +17,135 @@ function timeout(ms, run) {
  * messages that come from the page count only once the page was sent.
  */
 export class VisualBridge {
-    options;
-    theme;
-    html = null;
-    /* Whether the sandbox host page ever said it listens, which is what tells it from an error page. */
-    heard = false;
-    /* The sandbox host page listens and has not been sent the page yet. */
-    waiting = false;
-    /* The theme the page was last sent, from the moment it was sent; null before that. */
-    sent = null;
-    /* Whether the page reported a size since it was sent, which says it runs and is drawn. */
-    live = false;
-    viewportReady = false;
-    viewport = null;
-    disposed = false;
-    cancelSilence = () => undefined;
-    constructor(options) {
-        this.options = options;
-        this.theme = options.theme;
-        options.page.then((html) => {
-            this.html = html;
-            this.sendPage();
-        }, () => {
-            if (!this.disposed) {
-                options.onFailure();
-            }
-        });
+  options;
+  theme;
+  html = null;
+  /* Whether the sandbox host page ever said it listens, which is what tells it from an error page. */
+  heard = false;
+  /* The sandbox host page listens and has not been sent the page yet. */
+  waiting = false;
+  /* The theme the page was last sent, from the moment it was sent; null before that. */
+  sent = null;
+  /* Whether the page reported a size since it was sent, which says it runs and is drawn. */
+  live = false;
+  viewportReady = false;
+  viewport = null;
+  disposed = false;
+  cancelSilence = () => undefined;
+  constructor(options) {
+    this.options = options;
+    this.theme = options.theme;
+    options.page.then(html => {
+      this.html = html;
+      this.sendPage();
+    }, () => {
+      if (!this.disposed) {
+        options.onFailure();
+      }
+    });
+  }
+  /* A `message` event of the window the frame is in. */
+  receive(event) {
+    const frame = this.options.frame();
+    if (this.disposed || frame === null || event.source !== frame) {
+      return;
     }
-    /* A `message` event of the window the frame is in. */
-    receive(event) {
-        const frame = this.options.frame();
-        if (this.disposed || frame === null || event.source !== frame) {
-            return;
+    const message = parseVisualMessage(event.data);
+    switch (message?.method) {
+      case VISUAL_BRIDGE_METHODS.sandboxProxyReady:
+        // A frame that loads again starts over from the sandbox host page.
+        this.heard = true;
+        this.waiting = true;
+        this.sent = null;
+        this.live = false;
+        this.viewportReady = false;
+        this.cancelSilence();
+        this.sendPage();
+        return;
+      case VISUAL_BRIDGE_METHODS.sizeChanged:
+        if (this.sent === null) {
+          return;
         }
-        const message = parseVisualMessage(event.data);
-        switch (message?.method) {
-            case VISUAL_BRIDGE_METHODS.sandboxProxyReady:
-                // A frame that loads again starts over from the sandbox host page.
-                this.heard = true;
-                this.waiting = true;
-                this.sent = null;
-                this.live = false;
-                this.viewportReady = false;
-                this.cancelSilence();
-                this.sendPage();
-                return;
-            case VISUAL_BRIDGE_METHODS.sizeChanged:
-                if (this.sent === null) {
-                    return;
-                }
-                if (!this.live) {
-                    this.live = true;
-                    this.options.onAppearance(this.sent.appearance);
-                }
-                this.options.onHeight(this.options.onViewportReady ? visualContentHeight(message.height) : clampVisualHeight(this.options.visual, message.height));
-                return;
-            case VISUAL_BRIDGE_METHODS.viewportReady:
-                if (this.sent === null) {
-                    return;
-                }
-                this.viewportReady = true;
-                this.options.onViewportReady?.();
-                this.setViewport(this.viewport);
-                return;
-            case VISUAL_BRIDGE_METHODS.scrollRequest:
-                if (this.sent !== null && this.viewportReady && this.viewport !== null) {
-                    this.options.onScroll?.(message.request);
-                }
-                return;
-            case VISUAL_BRIDGE_METHODS.openLink:
-                if (this.sent === null) {
-                    return;
-                }
-                if (this.options.mayOpenLink()) {
-                    this.options.openLink(message.url);
-                }
-                frame.postMessage(visualOpenLinkResult(message.id), '*');
-                return;
-            default:
-                return;
+        if (!this.live) {
+          this.live = true;
+          this.options.onAppearance(this.sent.appearance);
         }
-    }
-    setViewport(viewport) {
-        this.viewport = viewport;
-        if (!this.disposed && this.sent !== null && this.viewportReady) {
-            this.options.frame()?.postMessage(visualViewportMessage(viewport), '*');
+        this.options.onHeight(this.options.onViewportReady ? visualContentHeight(message.height) : clampVisualHeight(this.options.visual, message.height));
+        return;
+      case VISUAL_BRIDGE_METHODS.viewportReady:
+        if (this.sent === null) {
+          return;
         }
-    }
-    /* The app's theme changed; a page that was sent follows it at once, without loading again. */
-    setTheme(theme) {
-        this.theme = theme;
-        const frame = this.options.frame();
-        if (this.disposed || this.sent === null || frame === null) {
-            return;
+        this.viewportReady = true;
+        this.options.onViewportReady?.();
+        this.setViewport(this.viewport);
+        return;
+      case VISUAL_BRIDGE_METHODS.scrollRequest:
+        if (this.sent !== null && this.viewportReady && this.viewport !== null) {
+          this.options.onScroll?.(message.request);
         }
-        this.postTheme(frame);
-        if (this.live) {
-            this.options.onAppearance(theme.appearance);
+        return;
+      case VISUAL_BRIDGE_METHODS.openLink:
+        if (this.sent === null) {
+          return;
         }
-    }
-    /* The frame fired `load`. */
-    loaded() {
-        if (this.heard || this.disposed) {
-            return;
+        if (this.options.mayOpenLink()) {
+          this.options.openLink(message.url);
         }
-        this.cancelSilence();
-        this.cancelSilence = (this.options.after ?? timeout)(SILENCE_MS, () => {
-            if (!this.heard && !this.disposed) {
-                this.options.onFailure();
-            }
-        });
+        frame.postMessage(visualOpenLinkResult(message.id), '*');
+        return;
+      default:
+        return;
     }
-    dispose() {
-        this.disposed = true;
-        this.cancelSilence();
+  }
+  setViewport(viewport) {
+    this.viewport = viewport;
+    if (!this.disposed && this.sent !== null && this.viewportReady) {
+      this.options.frame()?.postMessage(visualViewportMessage(viewport), '*');
     }
-    sendPage() {
-        const frame = this.options.frame();
-        if (this.disposed || !this.waiting || this.html === null || frame === null) {
-            return;
-        }
-        this.waiting = false;
-        // Any origin, since the frame's own is opaque; `receive` checks every answer's source instead.
-        frame.postMessage(visualResourceReadyMessage(this.html), '*');
-        // The page writes itself as that message arrives and listens before the next one, so a theme
-        // that changed since the frame's address was set follows right after it.
-        this.postTheme(frame);
+  }
+  /* The app's theme changed; a page that was sent follows it at once, without loading again. */
+  setTheme(theme) {
+    this.theme = theme;
+    const frame = this.options.frame();
+    if (this.disposed || this.sent === null || frame === null) {
+      return;
     }
-    postTheme(frame) {
-        this.sent = this.theme;
-        frame.postMessage(visualHostContextMessage(this.theme), '*');
+    this.postTheme(frame);
+    if (this.live) {
+      this.options.onAppearance(theme.appearance);
     }
-}
+  }
+  /* The frame fired `load`. */
+  loaded() {
+    if (this.heard || this.disposed) {
+      return;
+    }
+    this.cancelSilence();
+    this.cancelSilence = (this.options.after ?? timeout)(SILENCE_MS, () => {
+      if (!this.heard && !this.disposed) {
+        this.options.onFailure();
+      }
+    });
+  }
+  dispose() {
+    this.disposed = true;
+    this.cancelSilence();
+  }
+  sendPage() {
+    const frame = this.options.frame();
+    if (this.disposed || !this.waiting || this.html === null || frame === null) {
+      return;
+    }
+    this.waiting = false;
+    // Any origin, since the frame's own is opaque; `receive` checks every answer's source instead.
+    frame.postMessage(visualResourceReadyMessage(this.html), '*');
+    // The page writes itself as that message arrives and listens before the next one, so a theme
+    // that changed since the frame's address was set follows right after it.
+    this.postTheme(frame);
+  }
+  postTheme(frame) {
+    this.sent = this.theme;
+    frame.postMessage(visualHostContextMessage(this.theme), '*');
+  }
+}