@adecore/agents-react 0.31.12 → 0.32.0

package/dist/chat/ui/ShellCommand.js

@@ -1,10 +1,11 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useEffect, useState } from 'react';
 import { Tooltip } from '@adecore/ui';
 import { EMBEDDED_CODE_LIMIT, SHELL_LANGUAGE, embeddedCode } from '../logic/embedded-code.js';
 import { useChatHost } from '../../host.js';
 import { useCodeTheme } from './code-theme.js';
 import { tokenStyle, useCodeHighlighter } from './highlighter.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const NO_CODE = [];
 const NO_NAMES = [];
 // Rows redraw often and a thread holds many commands, so each is tokenized once per theme.
@@ -12,110 +13,174 @@ const CACHE_LIMIT = 300;
 const cache = new Map();
 /* The runs of `code` in one language, placed at `offset`; a run in the theme's own foreground takes the color around it. */
 function runsOf(highlighter, code, language, theme, offset) {
-    const fg = highlighter.getTheme(theme).fg.toLowerCase();
-    const { tokens } = highlighter.codeToTokens(code, { lang: language, theme });
-    return tokens.flat().map((token) => ({
-        start: offset + token.offset,
-        end: offset + token.offset + token.content.length,
-        content: token.content,
-        color: token.color?.toLowerCase() === fg ? undefined : token.color,
-        fontStyle: token.fontStyle
-    }));
+  const fg = highlighter.getTheme(theme).fg.toLowerCase();
+  const {
+    tokens
+  } = highlighter.codeToTokens(code, {
+    lang: language,
+    theme
+  });
+  return tokens.flat().map(token => ({
+    start: offset + token.offset,
+    end: offset + token.offset + token.content.length,
+    content: token.content,
+    color: token.color?.toLowerCase() === fg ? undefined : token.color,
+    fontStyle: token.fontStyle
+  }));
 }
 /* `base` with `[start, end)` cut out of it and `inner` in its place. */
 function overlay(base, start, end, inner) {
-    const kept = [];
-    for (const run of base) {
-        if (run.end <= start || run.start >= end) {
-            kept.push(run);
-            continue;
-        }
-        if (run.start < start) {
-            kept.push({ ...run, end: start, content: run.content.slice(0, start - run.start) });
-        }
-        if (run.end > end) {
-            kept.push({ ...run, start: end, content: run.content.slice(end - run.start) });
-        }
+  const kept = [];
+  for (const run of base) {
+    if (run.end <= start || run.start >= end) {
+      kept.push(run);
+      continue;
     }
-    return [...kept, ...inner].sort((left, right) => left.start - right.start);
+    if (run.start < start) {
+      kept.push({
+        ...run,
+        end: start,
+        content: run.content.slice(0, start - run.start)
+      });
+    }
+    if (run.end > end) {
+      kept.push({
+        ...run,
+        start: end,
+        content: run.content.slice(end - run.start)
+      });
+    }
+  }
+  return [...kept, ...inner].sort((left, right) => left.start - right.start);
 }
 /* The code inside a command, with the stretches a caller knows the language of on top. */
 function codeIn(command, extra) {
-    return extra.length === 0
-        ? embeddedCode(command)
-        : [...embeddedCode(command), ...extra].sort((left, right) => left.start - right.start || right.end - left.end);
+  return extra.length === 0 ? embeddedCode(command) : [...embeddedCode(command), ...extra].sort((left, right) => left.start - right.start || right.end - left.end);
 }
 function languagesOf(command, extra) {
-    return new Set([SHELL_LANGUAGE, ...codeIn(command, extra).map(({ language }) => language)]);
+  return new Set([SHELL_LANGUAGE, ...codeIn(command, extra).map(({
+    language
+  }) => language)]);
 }
 /* The colored runs of a command, or null while a grammar or the theme is still on its way. */
 function highlight(command, extra, theme, code) {
-    const key = `${theme}\n${extra.map(({ start, end, language }) => `${start}:${end}:${language}`).join(',')}\n${command}`;
-    const known = cache.get(key);
-    if (known !== undefined) {
-        // Touched entries move to the end, so the oldest falls out first.
-        cache.delete(key);
-        cache.set(key, known);
-        return known;
-    }
-    const embedded = codeIn(command, extra);
-    const highlighter = code.ready([SHELL_LANGUAGE, ...embedded.map(({ language }) => language)], theme);
-    if (highlighter === null) {
-        return null;
-    }
-    let runs = runsOf(highlighter, command, code.language(SHELL_LANGUAGE), theme, 0);
-    for (const part of embedded) {
-        runs = overlay(runs, part.start, part.end, runsOf(highlighter, command.slice(part.start, part.end), code.language(part.language), theme, part.start));
-    }
-    cache.set(key, runs);
-    if (cache.size > CACHE_LIMIT) {
-        cache.delete(cache.keys().next().value);
-    }
-    return runs;
+  const key = `${theme}\n${extra.map(({
+    start,
+    end,
+    language
+  }) => `${start}:${end}:${language}`).join(',')}\n${command}`;
+  const known = cache.get(key);
+  if (known !== undefined) {
+    // Touched entries move to the end, so the oldest falls out first.
+    cache.delete(key);
+    cache.set(key, known);
+    return known;
+  }
+  const embedded = codeIn(command, extra);
+  const highlighter = code.ready([SHELL_LANGUAGE, ...embedded.map(({
+    language
+  }) => language)], theme);
+  if (highlighter === null) {
+    return null;
+  }
+  let runs = runsOf(highlighter, command, code.language(SHELL_LANGUAGE), theme, 0);
+  for (const part of embedded) {
+    runs = overlay(runs, part.start, part.end, runsOf(highlighter, command.slice(part.start, part.end), code.language(part.language), theme, part.start));
+  }
+  cache.set(key, runs);
+  if (cache.size > CACHE_LIMIT) {
+    cache.delete(cache.keys().next().value);
+  }
+  return runs;
 }
 /* `command[from, to)` in its colors, or as it is while there are none. */
 function draw(command, runs, from, to) {
-    if (runs === null) {
-        return [command.slice(from, to)];
+  if (runs === null) {
+    return [command.slice(from, to)];
+  }
+  const parts = [];
+  let at = from;
+  for (const run of runs) {
+    if (run.end <= from || run.start >= to) {
+      continue;
     }
-    const parts = [];
-    let at = from;
-    for (const run of runs) {
-        if (run.end <= from || run.start >= to) {
-            continue;
-        }
-        const start = Math.max(run.start, from);
-        const end = Math.min(run.end, to);
-        // Shiki leaves the line breaks out of its tokens; they come from the command itself.
-        if (start > at) {
-            parts.push(command.slice(at, start));
-        }
-        const content = run.content.slice(start - run.start, end - run.start);
-        const style = tokenStyle(run);
-        parts.push(style === undefined ? (content) : (_jsx("span", { style: style, children: content }, start)));
-        at = end;
+    const start = Math.max(run.start, from);
+    const end = Math.min(run.end, to);
+    // Shiki leaves the line breaks out of its tokens; they come from the command itself.
+    if (start > at) {
+      parts.push(command.slice(at, start));
     }
-    if (at < to) {
-        parts.push(command.slice(at, to));
-    }
-    return parts;
+    const content = run.content.slice(start - run.start, end - run.start);
+    const style = tokenStyle(run);
+    parts.push(style === undefined ? content : /*#__PURE__*/_jsx("span", {
+      style: style,
+      children: content
+    }, start));
+    at = end;
+  }
+  if (at < to) {
+    parts.push(command.slice(at, to));
+  }
+  return parts;
 }
 /* A word as its name, in a frame so it reads as a reference; the word itself stays in the text, for a find. */
-function Name({ named }) {
-    return (_jsx(Tooltip, { label: named.word, children: _jsxs("span", { className: "inline-flex items-center gap-1 rounded bg-surface-hover px-1 font-sans text-text ring-1 ring-border ring-inset", children: [named.name.icon, named.name.name, _jsx("span", { className: "sr-only", children: named.word })] }) }));
+function Name(t0) {
+  const $ = _c(9);
+  const {
+    named
+  } = t0;
+  let t1;
+  if ($[0] !== named.word) {
+    t1 = /*#__PURE__*/_jsx("span", {
+      className: "sr-only",
+      children: named.word
+    });
+    $[0] = named.word;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== named.name.icon || $[3] !== named.name.name || $[4] !== t1) {
+    t2 = /*#__PURE__*/_jsxs("span", {
+      className: "inline-flex items-center gap-1 rounded bg-surface-hover px-1 font-sans text-text ring-1 ring-border ring-inset",
+      children: [named.name.icon, named.name.name, t1]
+    });
+    $[2] = named.name.icon;
+    $[3] = named.name.name;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== named.word || $[7] !== t2) {
+    t3 = /*#__PURE__*/_jsx(Tooltip, {
+      label: named.word,
+      children: t2
+    });
+    $[6] = named.word;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  return t3;
 }
 function drawNamed(command, runs, names) {
-    const parts = [];
-    let at = 0;
-    for (const named of names) {
-        if (named.start < at) {
-            continue;
-        }
-        parts.push(...draw(command, runs, at, named.start), _jsx(Name, { named: named }, `name-${named.start}`));
-        at = named.end;
+  const parts = [];
+  let at = 0;
+  for (const named of names) {
+    if (named.start < at) {
+      continue;
     }
-    parts.push(...draw(command, runs, at, command.length));
-    return parts;
+    parts.push(...draw(command, runs, at, named.start), /*#__PURE__*/_jsx(Name, {
+      named: named
+    }, `name-${named.start}`));
+    at = named.end;
+  }
+  parts.push(...draw(command, runs, at, command.length));
+  return parts;
 }
 /*
  * A shell command in the colors of the code theme, with the code inside it (a `bash -lc` script, a
@@ -123,28 +188,39 @@ function drawNamed(command, runs, names) {
  * changes no size; a command past the limit stays plain. `code` adds stretches whose language the
  * caller knows, and `names` draws words as the names a host gave them, both as offsets into `command`.
  */
-export function ShellCommand({ command, code = NO_CODE, names = NO_NAMES }) {
-    const theme = useCodeTheme();
-    const { custom } = useChatHost().code;
-    const highlighter = useCodeHighlighter();
-    // Bumped when a load settles, so the cache is asked again.
-    const [, setLoads] = useState(0);
-    const tooLong = command.length > EMBEDDED_CODE_LIMIT;
-    const runs = tooLong ? null : highlight(command, code, theme, highlighter);
-    useEffect(() => {
-        if (runs !== null || tooLong) {
-            return;
-        }
-        let cancelled = false;
-        Promise.all([highlighter.loadTheme(theme, custom), ...[...languagesOf(command, code)].map((lang) => highlighter.loadLanguage(lang))])
-            .then(() => !cancelled && setLoads((count) => count + 1))
-            .catch(() => undefined);
-        return () => {
-            cancelled = true;
-        };
-    }, [highlighter, command, code, theme, custom, runs, tooLong]);
-    if (names.length > 0) {
-        return _jsx(_Fragment, { children: drawNamed(command, runs, names) });
+export function ShellCommand({
+  command,
+  code = NO_CODE,
+  names = NO_NAMES
+}) {
+  // The highlighter's cache fills in place; compiled, the runs it gave before its grammars loaded would stay.
+  'use no memo';
+
+  const theme = useCodeTheme();
+  const {
+    custom
+  } = useChatHost().code;
+  const highlighter = useCodeHighlighter();
+  // Bumped when a load settles, so the cache is asked again.
+  const [, setLoads] = useState(0);
+  const tooLong = command.length > EMBEDDED_CODE_LIMIT;
+  const runs = tooLong ? null : highlight(command, code, theme, highlighter);
+  useEffect(() => {
+    if (runs !== null || tooLong) {
+      return;
     }
-    return _jsx(_Fragment, { children: runs === null ? command : draw(command, runs, 0, command.length) });
-}
+    let cancelled = false;
+    Promise.all([highlighter.loadTheme(theme, custom), ...[...languagesOf(command, code)].map(lang => highlighter.loadLanguage(lang))]).then(() => !cancelled && setLoads(count => count + 1)).catch(() => undefined);
+    return () => {
+      cancelled = true;
+    };
+  }, [highlighter, command, code, theme, custom, runs, tooLong]);
+  if (names.length > 0) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: drawNamed(command, runs, names)
+    });
+  }
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: runs === null ? command : draw(command, runs, 0, command.length)
+  });
+}

package/dist/chat/ui/SubagentControls.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { Fragment } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
@@ -6,33 +6,221 @@ import { ChevronRight, X } from 'lucide-react';
 import { breadcrumbOf, MAIN_AGENT, trailTo, useOpenableSubagents, useSubagentTrail } from '../subagent-view.js';
 import { SubagentStopButton } from './SubagentStopButton.js';
 import { Icon, IconButton } from '@adecore/ui';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CRUMB_LINK = 'truncate text-text-muted hover:text-text';
 /* The chat's own title in the bar; while a sub-agent stands in the chat's place, pressing it goes back to the main agent. */
-export function SubagentTitleCrumb({ chatId, className, children }) {
-    const { trail, show } = useSubagentTrail(chatId);
-    if (trail.length === 0) {
-        return _jsx(_Fragment, { children: children });
+export function SubagentTitleCrumb(t0) {
+  const $ = _c(10);
+  const {
+    chatId,
+    className,
+    children
+  } = t0;
+  const {
+    trail,
+    show
+  } = useSubagentTrail(chatId);
+  if (trail.length === 0) {
+    let t1;
+    if ($[0] !== children) {
+      t1 = /*#__PURE__*/_jsx(_Fragment, {
+        children: children
+      });
+      $[0] = children;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
     }
-    return (_jsx("button", { type: "button", className: clsx('flex min-w-0 items-center', className), onClick: () => show(MAIN_AGENT), children: children }));
+    return t1;
+  }
+  let t1;
+  if ($[2] !== className) {
+    t1 = clsx("flex min-w-0 items-center", className);
+    $[2] = className;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== show) {
+    t2 = () => show(MAIN_AGENT);
+    $[4] = show;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== children || $[7] !== t1 || $[8] !== t2) {
+    t3 = /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: t1,
+      onClick: t2,
+      children: children
+    });
+    $[6] = children;
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
 }
 /* The way down to the sub-agent on screen, each step but the last a way back up. Nothing while the main agent is on screen. */
-export function SubagentBreadcrumb({ chatId, className }) {
-    const { t } = useTranslation('agent-chat');
-    const { trail, show } = useSubagentTrail(chatId);
-    if (trail.length === 0) {
-        return null;
-    }
-    return (_jsx("nav", { "aria-label": t('subagents.title'), className: clsx('flex min-w-0 items-center gap-1', className), children: breadcrumbOf(trail).map((step) => (_jsxs(Fragment, { children: [step.depth > 1 && _jsx(Icon, { icon: ChevronRight, size: 12, className: "shrink-0 text-text-faint" }), step.current ? (_jsx("span", { "aria-current": "page", className: "min-w-0 truncate text-text", children: step.label })) : (_jsx("button", { type: "button", className: clsx(CRUMB_LINK, 'min-w-0 shrink'), onClick: () => show(trailTo(trail, step.depth)), children: step.label }))] }, step.depth))) }));
+export function SubagentBreadcrumb(t0) {
+  const $ = _c(11);
+  const {
+    chatId,
+    className
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const {
+    trail,
+    show
+  } = useSubagentTrail(chatId);
+  if (trail.length === 0) {
+    return null;
+  }
+  let t1;
+  if ($[0] !== t) {
+    t1 = t("subagents.title");
+    $[0] = t;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== className) {
+    t2 = clsx("flex min-w-0 items-center gap-1", className);
+    $[2] = className;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== show || $[5] !== trail) {
+    t3 = breadcrumbOf(trail).map(step => /*#__PURE__*/_jsxs(Fragment, {
+      children: [step.depth > 1 && /*#__PURE__*/_jsx(Icon, {
+        icon: ChevronRight,
+        size: 12,
+        className: "shrink-0 text-text-faint"
+      }), step.current ? /*#__PURE__*/_jsx("span", {
+        "aria-current": "page",
+        className: "min-w-0 truncate text-text",
+        children: step.label
+      }) : /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: clsx(CRUMB_LINK, "min-w-0 shrink"),
+        onClick: () => show(trailTo(trail, step.depth)),
+        children: step.label
+      })]
+    }, step.depth));
+    $[4] = show;
+    $[5] = trail;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
+    t4 = /*#__PURE__*/_jsx("nav", {
+      "aria-label": t1,
+      className: t2,
+      children: t3
+    });
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  return t4;
 }
 /* Stops the sub-agent on screen where that is on offer, and closes it straight back to the main agent. */
-export function SubagentActions({ chatId }) {
-    const { t } = useTranslation('agent-chat');
-    const { trail, show } = useSubagentTrail(chatId);
-    const subagents = useOpenableSubagents(chatId);
-    if (trail.length === 0) {
-        return null;
-    }
-    // Only a row of the chat's own thread can be stopped; a grandchild belongs to the sub-agent that opened it.
-    const shown = trail.length === 1 ? subagents.find((item) => item.toolUseId === trail[0].toolUseId) : undefined;
-    return (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [shown !== undefined && _jsx(SubagentStopButton, { chatId: chatId, item: shown, size: "sm" }), _jsx(IconButton, { icon: X, size: "sm", label: t('subagents.backToMain'), onClick: () => show(MAIN_AGENT) })] }));
-}
+export function SubagentActions(t0) {
+  const $ = _c(17);
+  const {
+    chatId
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const {
+    trail,
+    show
+  } = useSubagentTrail(chatId);
+  const subagents = useOpenableSubagents(chatId);
+  if (trail.length === 0) {
+    return null;
+  }
+  let t1;
+  if ($[0] !== subagents || $[1] !== trail[0] || $[2] !== trail.length) {
+    t1 = trail.length === 1 ? subagents.find(item => item.toolUseId === trail[0].toolUseId) : undefined;
+    $[0] = subagents;
+    $[1] = trail[0];
+    $[2] = trail.length;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const shown = t1;
+  let t2;
+  if ($[4] !== chatId || $[5] !== shown) {
+    t2 = shown !== undefined && /*#__PURE__*/_jsx(SubagentStopButton, {
+      chatId: chatId,
+      item: shown,
+      size: "sm"
+    });
+    $[4] = chatId;
+    $[5] = shown;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== t) {
+    t3 = t("subagents.backToMain");
+    $[7] = t;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== show) {
+    t4 = () => show(MAIN_AGENT);
+    $[9] = show;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== t3 || $[12] !== t4) {
+    t5 = /*#__PURE__*/_jsx(IconButton, {
+      icon: X,
+      size: "sm",
+      label: t3,
+      onClick: t4
+    });
+    $[11] = t3;
+    $[12] = t4;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] !== t2 || $[15] !== t5) {
+    t6 = /*#__PURE__*/_jsxs("div", {
+      className: "flex shrink-0 items-center gap-1",
+      children: [t2, t5]
+    });
+    $[14] = t2;
+    $[15] = t5;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  return t6;
+}