@adecore/agents-react 0.31.11 → 0.32.0

package/dist/chat/ui/VisualFrame.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
 import { visualThemeFragment } from '@adecore/agent-contracts/visual';
@@ -15,105 +15,331 @@ import { useVisualTheme } from './visual-theme.js';
  * click or a key in it is recent. A page can take the focus by script, so this stops a link opened as
  * the page loads, and not one opened while a person works in the frame.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function personActsIn(frame) {
-    return frame.ownerDocument.activeElement === frame && navigator.userActivation?.isActive !== false;
+  return frame.ownerDocument.activeElement === frame && navigator.userActivation?.isActive !== false;
 }
 /*
  * One visual's page in a frame that loads the app's sandbox host page; the bridge hands it the page and
  * the theme. The frame never gets `allow-same-origin`, which keeps the page on an opaque origin even
  * when the host page is served on the app's own. Its box keeps one height while it loads or fails.
  */
-export function VisualFrame({ chatId, visual, fill = false, className }) {
-    const { visuals, attachments } = useChatHost();
-    const { t } = useTranslation('agent-chat');
-    const scope = useChatScope();
-    const frameUrl = visuals?.frameUrl ?? null;
-    const boxRef = useRef(null);
-    const frameRef = useRef(null);
-    const bridgeRef = useRef(null);
-    const viewportRef = useRef(null);
-    const controllerRef = useRef(null);
-    const [viewportReady, setViewportReady] = useState(false);
-    const [measure, width] = useMeasuredWidth();
-    const setBox = useCallback((node) => {
-        boxRef.current = node;
-        measure(node);
-    }, [measure]);
-    const theme = useVisualTheme(boxRef);
-    const widthRef = useRef(width);
-    const [reported, setReported] = useState(null);
-    // The appearance the page is drawn in once it runs; until then the frame matches the sandbox host page, which declares none.
-    const [drawn, setDrawn] = useState(null);
-    const [failed, setFailed] = useState(false);
-    // The frame keeps the address it opened with: a later theme goes over the bridge, since a new address would load the page again.
-    const [opening, setOpening] = useState(null);
-    if (opening === null && frameUrl !== null && theme !== null && width > 0) {
-        setOpening({ src: frameUrl + visualThemeFragment(theme), theme });
-    }
-    const height = fill || width === 0 ? undefined : (reported ?? initialVisualContentHeight(visual, width));
-    useLayoutEffect(() => {
-        widthRef.current = width;
-    }, [width]);
-    useLayoutEffect(() => {
-        const frame = frameRef.current;
-        if (opening === null || frame === null) {
-            return;
-        }
-        const bridge = new VisualBridge({
-            frame: () => frame.contentWindow,
-            visual: { maxHeight: visual.maxHeight },
-            page: attachments.read(scope.id, chatId, visual.id).then((blob) => blob.text()),
-            theme: opening.theme,
-            mayOpenLink: () => personActsIn(frame),
-            openLink: (url) => visuals?.openLink(url),
-            onHeight: (next) => {
-                if (fill) {
-                    return;
-                }
-                setReported(next);
-                rememberVisualHeight(visual.id, widthRef.current, next);
-            },
-            ...(!fill
-                ? {
-                    onViewportReady: () => setViewportReady(true),
-                    onScroll: (request) => controllerRef.current?.scroll(request)
-                }
-                : {}),
-            onAppearance: setDrawn,
-            onFailure: () => setFailed(true)
-        });
-        bridgeRef.current = bridge;
-        const view = frame.ownerDocument.defaultView ?? window;
-        const listen = (event) => bridge.receive(event);
-        view.addEventListener('message', listen);
-        return () => {
-            view.removeEventListener('message', listen);
-            bridge.dispose();
-            bridgeRef.current = null;
-        };
-    }, [opening, scope.id, chatId, visual.id, visual.maxHeight, fill, visuals, attachments]);
-    useLayoutEffect(() => {
-        const box = boxRef.current;
-        const viewport = viewportRef.current;
-        const bridge = bridgeRef.current;
-        const scroller = box?.closest('.chat-scroll');
-        if (fill || !viewportReady || !box || !viewport || !bridge || !scroller) {
+export function VisualFrame(t0) {
+  const $ = _c(65);
+  const {
+    chatId,
+    visual,
+    fill: t1,
+    className
+  } = t0;
+  const fill = t1 === undefined ? false : t1;
+  const {
+    visuals,
+    attachments
+  } = useChatHost();
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const scope = useChatScope();
+  const frameUrl = visuals?.frameUrl ?? null;
+  const boxRef = useRef(null);
+  const frameRef = useRef(null);
+  const bridgeRef = useRef(null);
+  const viewportRef = useRef(null);
+  const controllerRef = useRef(null);
+  const [viewportReady, setViewportReady] = useState(false);
+  const [measure, width] = useMeasuredWidth();
+  let t2;
+  if ($[0] !== measure) {
+    t2 = node => {
+      boxRef.current = node;
+      measure(node);
+    };
+    $[0] = measure;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const setBox = t2;
+  const theme = useVisualTheme(boxRef);
+  const widthRef = useRef(width);
+  const [reported, setReported] = useState(null);
+  const [drawn, setDrawn] = useState(null);
+  const [failed, setFailed] = useState(false);
+  const [opening, setOpening] = useState(null);
+  if (opening === null && frameUrl !== null && theme !== null && width > 0) {
+    setOpening({
+      src: frameUrl + visualThemeFragment(theme),
+      theme
+    });
+  }
+  let t3;
+  if ($[2] !== fill || $[3] !== reported || $[4] !== visual || $[5] !== width) {
+    t3 = fill || width === 0 ? undefined : reported ?? initialVisualContentHeight(visual, width);
+    $[2] = fill;
+    $[3] = reported;
+    $[4] = visual;
+    $[5] = width;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const height = t3;
+  let t4;
+  let t5;
+  if ($[7] !== width) {
+    t4 = () => {
+      widthRef.current = width;
+    };
+    t5 = [width];
+    $[7] = width;
+    $[8] = t4;
+    $[9] = t5;
+  } else {
+    t4 = $[8];
+    t5 = $[9];
+  }
+  useLayoutEffect(t4, t5);
+  let t6;
+  let t7;
+  if ($[10] !== attachments || $[11] !== chatId || $[12] !== fill || $[13] !== opening || $[14] !== scope.id || $[15] !== visual.id || $[16] !== visual.maxHeight || $[17] !== visuals) {
+    t6 = () => {
+      const frame = frameRef.current;
+      if (opening === null || frame === null) {
+        return;
+      }
+      const bridge = new VisualBridge({
+        frame: () => frame.contentWindow,
+        visual: {
+          maxHeight: visual.maxHeight
+        },
+        page: attachments.read(scope.id, chatId, visual.id).then(_temp),
+        theme: opening.theme,
+        mayOpenLink: () => personActsIn(frame),
+        openLink: url => visuals?.openLink(url),
+        onHeight: next => {
+          if (fill) {
             return;
-        }
-        const controller = new VisualViewportController(box, viewport, scroller, bridge);
-        controllerRef.current = controller;
-        return () => {
-            controller.dispose();
-            controllerRef.current = null;
-        };
-    }, [fill, viewportReady, opening, scope.id, chatId, visual.id, visual.maxHeight]);
-    useLayoutEffect(() => controllerRef.current?.refresh(), [height, width]);
-    useEffect(() => {
-        if (theme !== null) {
-            bridgeRef.current?.setTheme(theme);
-        }
-    }, [theme]);
-    return (_jsx("div", { ref: setBox, className: clsx(fill ? 'absolute inset-0' : 'relative w-full', className), style: { height }, children: _jsxs("div", { ref: viewportRef, className: fill ? 'absolute inset-0' : 'sticky top-0 w-full', style: fill ? undefined : { height: '100%' }, children: [opening !== null && (_jsx("iframe", { ref: frameRef, src: opening.src, title: visual.title, loading: "lazy", sandbox: "allow-scripts allow-forms", className: clsx('block size-full border-0', failed && 'invisible'), 
-                    // A frame whose color scheme differs from its document's paints an opaque ground behind it.
-                    style: { colorScheme: drawn ?? 'normal' }, onLoad: () => bridgeRef.current?.loaded() })), failed ? (_jsx("p", { className: "absolute inset-0 grid place-items-center px-4 text-center text-xs text-text-muted", children: t('visuals.failed', { title: visual.title }) })) : (drawn === null && (_jsx("span", { className: "chat-visual-wait pointer-events-none absolute inset-0 grid place-items-center text-text-faint", children: _jsx(Spinner, { size: 16, label: t('visuals.loading', { title: visual.title }) }) })))] }) }));
+          }
+          setReported(next);
+          rememberVisualHeight(visual.id, widthRef.current, next);
+        },
+        ...(!fill ? {
+          onViewportReady: () => setViewportReady(true),
+          onScroll: request => controllerRef.current?.scroll(request)
+        } : {}),
+        onAppearance: setDrawn,
+        onFailure: () => setFailed(true)
+      });
+      bridgeRef.current = bridge;
+      const view = frame.ownerDocument.defaultView ?? window;
+      const listen = event => bridge.receive(event);
+      view.addEventListener("message", listen);
+      return () => {
+        view.removeEventListener("message", listen);
+        bridge.dispose();
+        bridgeRef.current = null;
+      };
+    };
+    t7 = [opening, scope.id, chatId, visual.id, visual.maxHeight, fill, visuals, attachments];
+    $[10] = attachments;
+    $[11] = chatId;
+    $[12] = fill;
+    $[13] = opening;
+    $[14] = scope.id;
+    $[15] = visual.id;
+    $[16] = visual.maxHeight;
+    $[17] = visuals;
+    $[18] = t6;
+    $[19] = t7;
+  } else {
+    t6 = $[18];
+    t7 = $[19];
+  }
+  useLayoutEffect(t6, t7);
+  let t8;
+  if ($[20] !== fill || $[21] !== viewportReady) {
+    t8 = () => {
+      const box = boxRef.current;
+      const viewport = viewportRef.current;
+      const bridge_0 = bridgeRef.current;
+      const scroller = box?.closest(".chat-scroll");
+      if (fill || !viewportReady || !box || !viewport || !bridge_0 || !scroller) {
+        return;
+      }
+      const controller = new VisualViewportController(box, viewport, scroller, bridge_0);
+      controllerRef.current = controller;
+      return () => {
+        controller.dispose();
+        controllerRef.current = null;
+      };
+    };
+    $[20] = fill;
+    $[21] = viewportReady;
+    $[22] = t8;
+  } else {
+    t8 = $[22];
+  }
+  let t9;
+  if ($[23] !== chatId || $[24] !== fill || $[25] !== opening || $[26] !== scope.id || $[27] !== viewportReady || $[28] !== visual.id || $[29] !== visual.maxHeight) {
+    t9 = [fill, viewportReady, opening, scope.id, chatId, visual.id, visual.maxHeight];
+    $[23] = chatId;
+    $[24] = fill;
+    $[25] = opening;
+    $[26] = scope.id;
+    $[27] = viewportReady;
+    $[28] = visual.id;
+    $[29] = visual.maxHeight;
+    $[30] = t9;
+  } else {
+    t9 = $[30];
+  }
+  useLayoutEffect(t8, t9);
+  let t10;
+  if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = () => controllerRef.current?.refresh();
+    $[31] = t10;
+  } else {
+    t10 = $[31];
+  }
+  let t11;
+  if ($[32] !== height || $[33] !== width) {
+    t11 = [height, width];
+    $[32] = height;
+    $[33] = width;
+    $[34] = t11;
+  } else {
+    t11 = $[34];
+  }
+  useLayoutEffect(t10, t11);
+  let t12;
+  let t13;
+  if ($[35] !== theme) {
+    t12 = () => {
+      if (theme !== null) {
+        bridgeRef.current?.setTheme(theme);
+      }
+    };
+    t13 = [theme];
+    $[35] = theme;
+    $[36] = t12;
+    $[37] = t13;
+  } else {
+    t12 = $[36];
+    t13 = $[37];
+  }
+  useEffect(t12, t13);
+  const t14 = fill ? "absolute inset-0" : "relative w-full";
+  let t15;
+  if ($[38] !== className || $[39] !== t14) {
+    t15 = clsx(t14, className);
+    $[38] = className;
+    $[39] = t14;
+    $[40] = t15;
+  } else {
+    t15 = $[40];
+  }
+  let t16;
+  if ($[41] !== height) {
+    t16 = {
+      height
+    };
+    $[41] = height;
+    $[42] = t16;
+  } else {
+    t16 = $[42];
+  }
+  const t17 = fill ? "absolute inset-0" : "sticky top-0 w-full";
+  let t18;
+  if ($[43] !== fill) {
+    t18 = fill ? undefined : {
+      height: "100%"
+    };
+    $[43] = fill;
+    $[44] = t18;
+  } else {
+    t18 = $[44];
+  }
+  let t19;
+  if ($[45] !== drawn || $[46] !== failed || $[47] !== opening || $[48] !== visual.title) {
+    t19 = opening !== null && /*#__PURE__*/_jsx("iframe", {
+      ref: frameRef,
+      src: opening.src,
+      title: visual.title,
+      loading: "lazy",
+      sandbox: "allow-scripts allow-forms",
+      className: clsx("block size-full border-0", failed && "invisible"),
+      style: {
+        colorScheme: drawn ?? "normal"
+      },
+      onLoad: () => bridgeRef.current?.loaded()
+    });
+    $[45] = drawn;
+    $[46] = failed;
+    $[47] = opening;
+    $[48] = visual.title;
+    $[49] = t19;
+  } else {
+    t19 = $[49];
+  }
+  let t20;
+  if ($[50] !== drawn || $[51] !== failed || $[52] !== t || $[53] !== visual.title) {
+    t20 = failed ? /*#__PURE__*/_jsx("p", {
+      className: "absolute inset-0 grid place-items-center px-4 text-center text-xs text-text-muted",
+      children: t("visuals.failed", {
+        title: visual.title
+      })
+    }) : drawn === null && /*#__PURE__*/_jsx("span", {
+      className: "chat-visual-wait pointer-events-none absolute inset-0 grid place-items-center text-text-faint",
+      children: /*#__PURE__*/_jsx(Spinner, {
+        size: 16,
+        label: t("visuals.loading", {
+          title: visual.title
+        })
+      })
+    });
+    $[50] = drawn;
+    $[51] = failed;
+    $[52] = t;
+    $[53] = visual.title;
+    $[54] = t20;
+  } else {
+    t20 = $[54];
+  }
+  let t21;
+  if ($[55] !== t17 || $[56] !== t18 || $[57] !== t19 || $[58] !== t20) {
+    t21 = /*#__PURE__*/_jsxs("div", {
+      ref: viewportRef,
+      className: t17,
+      style: t18,
+      children: [t19, t20]
+    });
+    $[55] = t17;
+    $[56] = t18;
+    $[57] = t19;
+    $[58] = t20;
+    $[59] = t21;
+  } else {
+    t21 = $[59];
+  }
+  let t22;
+  if ($[60] !== setBox || $[61] !== t15 || $[62] !== t16 || $[63] !== t21) {
+    t22 = /*#__PURE__*/_jsx("div", {
+      ref: setBox,
+      className: t15,
+      style: t16,
+      children: t21
+    });
+    $[60] = setBox;
+    $[61] = t15;
+    $[62] = t16;
+    $[63] = t21;
+    $[64] = t22;
+  } else {
+    t22 = $[64];
+  }
+  return t22;
 }
+function _temp(blob) {
+  return blob.text();
+}

package/dist/chat/ui/Welcome.js

@@ -1,16 +1,81 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AgentIcon } from '../../agents/AgentIcon.js';
 import { useChatRow } from '../../state/chats.js';
 import { dayPartOf } from '../logic/welcome.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function localClock() {
-    return new Date();
+  return new Date();
 }
 /* What stands over the composer of a chat nobody wrote in yet. The part of the day is read once, when the chat opens. */
-export function WelcomeGreeting({ chatId, now = localClock }) {
-    const { t } = useTranslation('agent-chat');
-    const provider = useChatRow(chatId, (row) => row?.info.provider ?? null);
-    const [part] = useState(() => dayPartOf(now()));
-    return (_jsxs("div", { className: "flex items-center justify-center gap-3 px-3 pb-2 text-text", children: [provider && _jsx(AgentIcon, { kind: provider, size: 32, className: "shrink-0" }), _jsx("h2", { className: "text-4xl font-semibold tracking-tight text-balance", children: t(`timeline.welcome.${part}`) })] }));
+export function WelcomeGreeting(t0) {
+  const $ = _c(12);
+  const {
+    chatId,
+    now: t1
+  } = t0;
+  const now = t1 === undefined ? localClock : t1;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const provider = useChatRow(chatId, _temp);
+  let t2;
+  if ($[0] !== now) {
+    t2 = () => dayPartOf(now());
+    $[0] = now;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const [part] = useState(t2);
+  let t3;
+  if ($[2] !== provider) {
+    t3 = provider && /*#__PURE__*/_jsx(AgentIcon, {
+      kind: provider,
+      size: 32,
+      className: "shrink-0"
+    });
+    $[2] = provider;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const t4 = `timeline.welcome.${part}`;
+  let t5;
+  if ($[4] !== t || $[5] !== t4) {
+    t5 = t(t4);
+    $[4] = t;
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== t5) {
+    t6 = /*#__PURE__*/_jsx("h2", {
+      className: "text-4xl font-semibold tracking-tight text-balance",
+      children: t5
+    });
+    $[7] = t5;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] !== t3 || $[10] !== t6) {
+    t7 = /*#__PURE__*/_jsxs("div", {
+      className: "flex items-center justify-center gap-3 px-3 pb-2 text-text",
+      children: [t3, t6]
+    });
+    $[9] = t3;
+    $[10] = t6;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  return t7;
 }
+function _temp(row) {
+  return row?.info.provider ?? null;
+}

package/dist/chat/ui/chips.js

@@ -8,4 +8,4 @@ export const SKILL_TONE = 'bg-skill-soft text-skill shadow-[inset_0_0_0_1px_colo
 export const CHIP_IN_EDITOR = 'box-decoration-clone rounded-md px-1 py-0.5';
 /* The same pill in the transcript: a real inline box a shade smaller than the text around it, with
    the icon in place of the sigil. */
-export const CHIP_IN_MESSAGE = 'inline-flex h-5 max-w-full items-center gap-1 rounded-md px-1.5 align-[-3px] text-xs/none font-medium';
+export const CHIP_IN_MESSAGE = 'inline-flex h-5 max-w-full items-center gap-1 rounded-md px-1.5 align-[-3px] text-xs/none font-medium';

package/dist/chat/ui/code-lines.js

@@ -5,42 +5,42 @@
  * tokenized again, since the next delta may turn it into anything (the start of a comment, a string).
  */
 export class IncrementalLines {
-    tokenize;
-    // The text of the lines that are kept: empty, or ending in a newline while the block grows.
-    source = '';
-    lines = [];
-    state = undefined;
-    constructor(tokenize) {
-        this.tokenize = tokenize;
+  tokenize;
+  // The text of the lines that are kept: empty, or ending in a newline while the block grows.
+  source = '';
+  lines = [];
+  state = undefined;
+  constructor(tokenize) {
+    this.tokenize = tokenize;
+  }
+  /* The tokens of every line of `code`; `complete` says nothing more arrives, so the last line is kept too. */
+  update(code, complete) {
+    // A carriage return splits lines in ways a cut at newlines does not see, so that code starts over every time.
+    if (code.includes('\r')) {
+      this.reset();
+      return this.tokenize(code, undefined).lines;
     }
-    /* The tokens of every line of `code`; `complete` says nothing more arrives, so the last line is kept too. */
-    update(code, complete) {
-        // A carriage return splits lines in ways a cut at newlines does not see, so that code starts over every time.
-        if (code.includes('\r')) {
-            this.reset();
-            return this.tokenize(code, undefined).lines;
-        }
-        const end = complete ? code.length : code.lastIndexOf('\n') + 1;
-        const stable = code.slice(0, end);
-        const continues = (this.source === '' || this.source.endsWith('\n')) && stable.startsWith(this.source);
-        if (!continues) {
-            this.reset();
-        }
-        const added = stable.slice(this.source.length);
-        if (added !== '') {
-            const result = this.tokenize(added.endsWith('\n') ? added.slice(0, -1) : added, this.state);
-            this.lines = [...this.lines, ...result.lines];
-            this.state = result.state;
-            this.source = stable;
-        }
-        if (complete) {
-            return this.lines;
-        }
-        return [...this.lines, ...this.tokenize(code.slice(end), this.state).lines];
+    const end = complete ? code.length : code.lastIndexOf('\n') + 1;
+    const stable = code.slice(0, end);
+    const continues = (this.source === '' || this.source.endsWith('\n')) && stable.startsWith(this.source);
+    if (!continues) {
+      this.reset();
     }
-    reset() {
-        this.source = '';
-        this.lines = [];
-        this.state = undefined;
+    const added = stable.slice(this.source.length);
+    if (added !== '') {
+      const result = this.tokenize(added.endsWith('\n') ? added.slice(0, -1) : added, this.state);
+      this.lines = [...this.lines, ...result.lines];
+      this.state = result.state;
+      this.source = stable;
     }
-}
+    if (complete) {
+      return this.lines;
+    }
+    return [...this.lines, ...this.tokenize(code.slice(end), this.state).lines];
+  }
+  reset() {
+    this.source = '';
+    this.lines = [];
+    this.state = undefined;
+  }
+}

package/dist/chat/ui/code-streaming.js

@@ -1,3 +1,3 @@
 import { createContext } from 'react';
 /* Whether the code blocks below are still being written, which a reply says for the fence that has not closed. */
-export const CodeStreamingContext = createContext(false);
+export const CodeStreamingContext = createContext(false);

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

@@ -1,12 +1,12 @@
-import { useChatHost } from '../../host.js';
+import '../../host.js';
+import { useHostCodeMode, useHostCodeThemes } from '../../host-hooks.js';
 /* The Shiki theme code is drawn in under the app's current light or dark. */
 export function useCodeTheme() {
-    const { code } = useChatHost();
-    const mode = code.useMode();
-    const themes = code.useThemes();
-    return mode === 'dark' ? themes.dark : themes.light;
+  const mode = useHostCodeMode();
+  const themes = useHostCodeThemes();
+  return mode === "dark" ? themes.dark : themes.light;
 }
 /* What to hand Shiki for a theme id: a theme the app ships itself, or the id of a bundled one for Shiki to load. */
 export function shikiThemeOf(id, custom) {
-    return custom.find((theme) => theme.name === id) ?? id;
-}
+  return custom.find(theme => theme.name === id) ?? id;
+}