@adecore/agents-react 0.31.11 → 0.32.0

package/dist/chat/ui/rows/TaskRow.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { Bot, ChevronRight } from 'lucide-react';
@@ -11,54 +11,373 @@ import { useChats } from '../../../state/chats.js';
 import { useProviders } from '../../../state/providers.js';
 import { taskRowStateOf } from '../../subagent-list.js';
 import { ROW_GUTTER } from '../icons.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DOT = {
-    running: 'bg-status-running',
-    waiting: 'bg-status-needs-you',
-    paused: 'bg-text-faint',
-    done: 'bg-status-idle',
-    failed: 'bg-status-error',
-    cancelled: 'bg-text-faint'
+  running: 'bg-status-running',
+  waiting: 'bg-status-needs-you',
+  paused: 'bg-text-faint',
+  done: 'bg-status-idle',
+  failed: 'bg-status-error',
+  cancelled: 'bg-text-faint'
 };
 const STATE_TONE = {
-    running: 'text-text-muted chat-live-text',
-    waiting: 'text-status-needs-you',
-    paused: 'text-text-faint',
-    done: 'text-text-faint',
-    failed: 'text-status-error',
-    cancelled: 'text-text-faint'
+  running: 'text-text-muted chat-live-text',
+  waiting: 'text-status-needs-you',
+  paused: 'text-text-faint',
+  done: 'text-text-faint',
+  failed: 'text-status-error',
+  cancelled: 'text-text-faint'
 };
-function Elapsed({ startedAt }) {
-    const ref = useTickingText(() => formatElapsedShort(Date.now() - startedAt));
-    return _jsx("span", { ref: ref, className: "shrink-0 text-xs text-text-faint tabular-nums" });
+function Elapsed(t0) {
+  const $ = _c(4);
+  const {
+    startedAt
+  } = t0;
+  let t1;
+  if ($[0] !== startedAt) {
+    t1 = () => formatElapsedShort(Date.now() - startedAt);
+    $[0] = startedAt;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const ref = useTickingText(t1);
+  let t2;
+  if ($[2] !== ref) {
+    t2 = /*#__PURE__*/_jsx("span", {
+      ref: ref,
+      className: "shrink-0 text-xs text-text-faint tabular-nums"
+    });
+    $[2] = ref;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
 }
-function StateLine({ state, task }) {
-    const { t } = useTranslation('agent-chat');
-    const until = state === 'paused' ? task?.paused?.until : undefined;
-    const now = useNow(60_000, until === undefined);
-    return (_jsx("span", { className: clsx('truncate text-2xs', STATE_TONE[state]), children: until === undefined ? t(`rows.task.${state}`) : t('rows.task.pausedUntil', { time: formatMoment(until, now) }) }));
+function StateLine(t0) {
+  const $ = _c(10);
+  const {
+    state,
+    task
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const until = state === "paused" ? task?.paused?.until : undefined;
+  const now = useNow(60000, until !== undefined);
+  const t1 = STATE_TONE[state];
+  let t2;
+  if ($[0] !== t1) {
+    t2 = clsx("truncate text-2xs", t1);
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== now || $[3] !== state || $[4] !== t || $[5] !== until) {
+    t3 = until === undefined ? t(`rows.task.${state}`) : t("rows.task.pausedUntil", {
+      time: formatMoment(until, now)
+    });
+    $[2] = now;
+    $[3] = state;
+    $[4] = t;
+    $[5] = until;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== t2 || $[8] !== t3) {
+    t4 = /*#__PURE__*/_jsx("span", {
+      className: t2,
+      children: t3
+    });
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
 }
 /*
  * The row of a task given to another node: that agent's mark and model, what the task is about and
  * where it stands, read from the status every client gets of the child's chat. A child without one,
  * a terminal or a node that is gone, keeps the task's own words.
  */
-export function TaskRow({ item, task, open, onPress }) {
-    const { t } = useTranslation('agent-chat');
-    const { keyOf } = useChatScope();
-    const child = useChats((s) => (item.childId === undefined ? undefined : s.statusByKey[keyOf(item.childId)]?.info));
-    const provider = child?.provider;
-    const slug = child?.model ?? child?.selection.model ?? null;
-    const model = useProviders((s) => {
-        if (slug === null) {
-            return null;
-        }
-        const models = s.providers.find((entry) => entry.kind === provider)?.models;
-        return shortModelName(modelName(slug, models), models);
+export function TaskRow(t0) {
+  const $ = _c(71);
+  const {
+    item,
+    task,
+    open,
+    onPress
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const {
+    keyOf
+  } = useChatScope();
+  let t1;
+  if ($[0] !== item.childId || $[1] !== keyOf) {
+    t1 = s => item.childId === undefined ? undefined : s.statusByKey[keyOf(item.childId)]?.info;
+    $[0] = item.childId;
+    $[1] = keyOf;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const child = useChats(t1);
+  const provider = child?.provider;
+  const slug = child?.model ?? child?.selection.model ?? null;
+  let t2;
+  if ($[3] !== provider || $[4] !== slug) {
+    t2 = s_0 => {
+      if (slug === null) {
+        return null;
+      }
+      const models = s_0.providers.find(entry => entry.kind === provider)?.models;
+      return shortModelName(modelName(slug, models), models);
+    };
+    $[3] = provider;
+    $[4] = slug;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const model = useProviders(t2);
+  let t3;
+  if ($[6] !== child || $[7] !== item || $[8] !== task) {
+    t3 = taskRowStateOf(item, task, child);
+    $[6] = child;
+    $[7] = item;
+    $[8] = task;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  const state = t3;
+  let finishedAt;
+  let settled;
+  let startedAt;
+  let t10;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[10] !== item.description || $[11] !== item.finishedAt || $[12] !== item.startedAt || $[13] !== model || $[14] !== onPress || $[15] !== provider || $[16] !== state || $[17] !== t || $[18] !== task) {
+    const title = item.description || t("rows.subagent.task");
+    startedAt = task?.createdAt ?? item.startedAt;
+    finishedAt = task === null ? item.finishedAt : task.settledAt ?? item.finishedAt;
+    settled = state === "done" || state === "failed" || state === "cancelled";
+    t8 = "-mx-1 mb-0.5 flex w-[calc(100%+8px)] items-start gap-2 rounded-md px-1 py-1 text-left hover:bg-surface-hover";
+    t9 = onPress;
+    let t11;
+    if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+      t11 = clsx(ROW_GUTTER, "relative text-text");
+      $[29] = t11;
+    } else {
+      t11 = $[29];
+    }
+    let t12;
+    if ($[30] !== provider) {
+      t12 = provider === undefined ? /*#__PURE__*/_jsx(Icon, {
+        icon: Bot,
+        size: 14
+      }) : /*#__PURE__*/_jsx(AgentIcon, {
+        kind: provider,
+        size: 14
+      });
+      $[30] = provider;
+      $[31] = t12;
+    } else {
+      t12 = $[31];
+    }
+    const t13 = DOT[state];
+    let t14;
+    if ($[32] !== t13) {
+      t14 = clsx("absolute -right-0.75 bottom-0 size-2 rounded-full ring-2 ring-surface", t13);
+      $[32] = t13;
+      $[33] = t14;
+    } else {
+      t14 = $[33];
+    }
+    let t15;
+    if ($[34] !== t14) {
+      t15 = /*#__PURE__*/_jsx("span", {
+        className: t14
+      });
+      $[34] = t14;
+      $[35] = t15;
+    } else {
+      t15 = $[35];
+    }
+    if ($[36] !== t12 || $[37] !== t15) {
+      t10 = /*#__PURE__*/_jsxs("span", {
+        className: t11,
+        children: [t12, t15]
+      });
+      $[36] = t12;
+      $[37] = t15;
+      $[38] = t10;
+    } else {
+      t10 = $[38];
+    }
+    t7 = "flex min-w-0 grow flex-col";
+    t4 = "summary";
+    t5 = "truncate text-xs font-medium text-text";
+    t6 = model === null ? title : t("rows.task.named", {
+      model,
+      title
     });
-    const state = taskRowStateOf(item, task, child);
-    const title = item.description || t('rows.subagent.task');
-    const startedAt = task?.createdAt ?? item.startedAt;
-    const finishedAt = task === null ? item.finishedAt : (task.settledAt ?? item.finishedAt);
-    const settled = state === 'done' || state === 'failed' || state === 'cancelled';
-    return (_jsxs("button", { className: "-mx-1 mb-0.5 flex w-[calc(100%+8px)] items-start gap-2 rounded-md px-1 py-1 text-left hover:bg-surface-hover", onClick: onPress, children: [_jsxs("span", { className: clsx(ROW_GUTTER, 'relative text-text'), children: [provider === undefined ? _jsx(Icon, { icon: Bot, size: 14 }) : _jsx(AgentIcon, { kind: provider, size: 14 }), _jsx("span", { className: clsx('absolute -right-0.75 bottom-0 size-2 rounded-full ring-2 ring-surface', DOT[state]) })] }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { "data-find-field": "summary", className: "truncate text-xs font-medium text-text", children: model === null ? title : t('rows.task.named', { model, title }) }), _jsx(StateLine, { state: state, task: task })] }), _jsxs("span", { className: "flex h-5 shrink-0 items-center gap-2", children: [(state === 'running' || state === 'waiting') && startedAt > 0 && _jsx(Elapsed, { startedAt: startedAt }), settled && startedAt > 0 && finishedAt !== null && finishedAt >= startedAt && (_jsx("span", { className: "shrink-0 text-xs text-text-faint tabular-nums", children: formatElapsedShort(finishedAt - startedAt) })), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') })] })] }));
-}
+    $[10] = item.description;
+    $[11] = item.finishedAt;
+    $[12] = item.startedAt;
+    $[13] = model;
+    $[14] = onPress;
+    $[15] = provider;
+    $[16] = state;
+    $[17] = t;
+    $[18] = task;
+    $[19] = finishedAt;
+    $[20] = settled;
+    $[21] = startedAt;
+    $[22] = t10;
+    $[23] = t4;
+    $[24] = t5;
+    $[25] = t6;
+    $[26] = t7;
+    $[27] = t8;
+    $[28] = t9;
+  } else {
+    finishedAt = $[19];
+    settled = $[20];
+    startedAt = $[21];
+    t10 = $[22];
+    t4 = $[23];
+    t5 = $[24];
+    t6 = $[25];
+    t7 = $[26];
+    t8 = $[27];
+    t9 = $[28];
+  }
+  let t11;
+  if ($[39] !== t4 || $[40] !== t5 || $[41] !== t6) {
+    t11 = /*#__PURE__*/_jsx("span", {
+      "data-find-field": t4,
+      className: t5,
+      children: t6
+    });
+    $[39] = t4;
+    $[40] = t5;
+    $[41] = t6;
+    $[42] = t11;
+  } else {
+    t11 = $[42];
+  }
+  let t12;
+  if ($[43] !== state || $[44] !== task) {
+    t12 = /*#__PURE__*/_jsx(StateLine, {
+      state: state,
+      task: task
+    });
+    $[43] = state;
+    $[44] = task;
+    $[45] = t12;
+  } else {
+    t12 = $[45];
+  }
+  let t13;
+  if ($[46] !== t11 || $[47] !== t12 || $[48] !== t7) {
+    t13 = /*#__PURE__*/_jsxs("span", {
+      className: t7,
+      children: [t11, t12]
+    });
+    $[46] = t11;
+    $[47] = t12;
+    $[48] = t7;
+    $[49] = t13;
+  } else {
+    t13 = $[49];
+  }
+  let t14;
+  if ($[50] !== startedAt || $[51] !== state) {
+    t14 = (state === "running" || state === "waiting") && startedAt > 0 && /*#__PURE__*/_jsx(Elapsed, {
+      startedAt: startedAt
+    });
+    $[50] = startedAt;
+    $[51] = state;
+    $[52] = t14;
+  } else {
+    t14 = $[52];
+  }
+  let t15;
+  if ($[53] !== finishedAt || $[54] !== settled || $[55] !== startedAt) {
+    t15 = settled && startedAt > 0 && finishedAt !== null && finishedAt >= startedAt && /*#__PURE__*/_jsx("span", {
+      className: "shrink-0 text-xs text-text-faint tabular-nums",
+      children: formatElapsedShort(finishedAt - startedAt)
+    });
+    $[53] = finishedAt;
+    $[54] = settled;
+    $[55] = startedAt;
+    $[56] = t15;
+  } else {
+    t15 = $[56];
+  }
+  const t16 = open && "rotate-90";
+  let t17;
+  if ($[57] !== t16) {
+    t17 = clsx("shrink-0 text-text-faint transition-transform", t16);
+    $[57] = t16;
+    $[58] = t17;
+  } else {
+    t17 = $[58];
+  }
+  let t18;
+  if ($[59] !== t17) {
+    t18 = /*#__PURE__*/_jsx(Icon, {
+      icon: ChevronRight,
+      size: 12,
+      className: t17
+    });
+    $[59] = t17;
+    $[60] = t18;
+  } else {
+    t18 = $[60];
+  }
+  let t19;
+  if ($[61] !== t14 || $[62] !== t15 || $[63] !== t18) {
+    t19 = /*#__PURE__*/_jsxs("span", {
+      className: "flex h-5 shrink-0 items-center gap-2",
+      children: [t14, t15, t18]
+    });
+    $[61] = t14;
+    $[62] = t15;
+    $[63] = t18;
+    $[64] = t19;
+  } else {
+    t19 = $[64];
+  }
+  let t20;
+  if ($[65] !== t10 || $[66] !== t13 || $[67] !== t19 || $[68] !== t8 || $[69] !== t9) {
+    t20 = /*#__PURE__*/_jsxs("button", {
+      className: t8,
+      onClick: t9,
+      children: [t10, t13, t19]
+    });
+    $[65] = t10;
+    $[66] = t13;
+    $[67] = t19;
+    $[68] = t8;
+    $[69] = t9;
+    $[70] = t20;
+  } else {
+    t20 = $[70];
+  }
+  return t20;
+}

package/dist/chat/ui/rows/VisualRow.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useTranslation } from 'react-i18next';
 import { Ellipsis, Maximize2, Trash2 } from 'lucide-react';
 import { ButtonGroup, ErrorBoundary, Icon, IconButton, Menu, Surface } from '@adecore/ui';
@@ -12,13 +12,235 @@ import { VisualFrame } from '../VisualFrame.js';
  * touch screen, which has no hover. A click inside the page never reaches the thread's menu, so they
  * sit here.
  */
-export function VisualRow({ chatId, visual }) {
-    const host = useChatHost();
-    const { t } = useTranslation('agent-chat');
-    const { keyOf } = useChatScope();
-    if (host.visuals === null) {
-        return null;
-    }
-    const open = (kind) => useVisualDialog.getState().open(keyOf(chatId), visual.id, kind);
-    return (_jsx(ErrorBoundary, { label: t('visuals.renderFailed'), resetKeys: [visual], compact: true, className: "relative rounded-lg", children: _jsxs("div", { className: "group/visual relative", children: [_jsx(VisualFrame, { chatId: chatId, visual: visual }), _jsx(Surface, { role: "toolbar", "aria-label": t('visuals.actions', { title: visual.title }), className: "absolute top-2 right-2 rounded-lg p-0.5 opacity-0 transition-opacity group-focus-within/visual:opacity-100 group-hover/visual:opacity-100 has-[[data-popup-open]]:opacity-100 pointer-coarse:opacity-100", children: _jsxs(ButtonGroup, { children: [_jsx(IconButton, { icon: Maximize2, size: "sm", label: t('visuals.expand'), onClick: () => open('expand') }), _jsxs(Menu.Root, { children: [_jsx(IconButton, { icon: Ellipsis, size: "sm", label: t('visuals.more'), render: _jsx(Menu.Trigger, {}) }), _jsx(Menu.Popup, { align: "end", children: _jsxs(Menu.Item, { onClick: () => open('remove'), children: [_jsx(Icon, { icon: Trash2, size: 14 }), " ", t('visuals.remove')] }) })] })] }) })] }) }));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function VisualRow(t0) {
+  const $ = _c(50);
+  const {
+    chatId,
+    visual
+  } = t0;
+  const host = useChatHost();
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const {
+    keyOf
+  } = useChatScope();
+  if (host.visuals === null) {
+    return null;
+  }
+  let t1;
+  if ($[0] !== chatId || $[1] !== keyOf || $[2] !== visual.id) {
+    t1 = kind => useVisualDialog.getState().open(keyOf(chatId), visual.id, kind);
+    $[0] = chatId;
+    $[1] = keyOf;
+    $[2] = visual.id;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const open = t1;
+  let t2;
+  if ($[4] !== t) {
+    t2 = t("visuals.renderFailed");
+    $[4] = t;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== visual) {
+    t3 = [visual];
+    $[6] = visual;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== chatId || $[9] !== visual) {
+    t4 = /*#__PURE__*/_jsx(VisualFrame, {
+      chatId: chatId,
+      visual: visual
+    });
+    $[8] = chatId;
+    $[9] = visual;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== t || $[12] !== visual.title) {
+    t5 = t("visuals.actions", {
+      title: visual.title
+    });
+    $[11] = t;
+    $[12] = visual.title;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] !== t) {
+    t6 = t("visuals.expand");
+    $[14] = t;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  let t7;
+  if ($[16] !== open) {
+    t7 = () => open("expand");
+    $[16] = open;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[18] !== t6 || $[19] !== t7) {
+    t8 = /*#__PURE__*/_jsx(IconButton, {
+      icon: Maximize2,
+      size: "sm",
+      label: t6,
+      onClick: t7
+    });
+    $[18] = t6;
+    $[19] = t7;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  let t9;
+  if ($[21] !== t) {
+    t9 = t("visuals.more");
+    $[21] = t;
+    $[22] = t9;
+  } else {
+    t9 = $[22];
+  }
+  let t10;
+  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = /*#__PURE__*/_jsx(Menu.Trigger, {});
+    $[23] = t10;
+  } else {
+    t10 = $[23];
+  }
+  let t11;
+  if ($[24] !== t9) {
+    t11 = /*#__PURE__*/_jsx(IconButton, {
+      icon: Ellipsis,
+      size: "sm",
+      label: t9,
+      render: t10
+    });
+    $[24] = t9;
+    $[25] = t11;
+  } else {
+    t11 = $[25];
+  }
+  let t12;
+  if ($[26] !== open) {
+    t12 = () => open("remove");
+    $[26] = open;
+    $[27] = t12;
+  } else {
+    t12 = $[27];
+  }
+  let t13;
+  if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = /*#__PURE__*/_jsx(Icon, {
+      icon: Trash2,
+      size: 14
+    });
+    $[28] = t13;
+  } else {
+    t13 = $[28];
+  }
+  let t14;
+  if ($[29] !== t) {
+    t14 = t("visuals.remove");
+    $[29] = t;
+    $[30] = t14;
+  } else {
+    t14 = $[30];
+  }
+  let t15;
+  if ($[31] !== t12 || $[32] !== t14) {
+    t15 = /*#__PURE__*/_jsx(Menu.Popup, {
+      align: "end",
+      children: /*#__PURE__*/_jsxs(Menu.Item, {
+        onClick: t12,
+        children: [t13, " ", t14]
+      })
+    });
+    $[31] = t12;
+    $[32] = t14;
+    $[33] = t15;
+  } else {
+    t15 = $[33];
+  }
+  let t16;
+  if ($[34] !== t11 || $[35] !== t15) {
+    t16 = /*#__PURE__*/_jsxs(Menu.Root, {
+      children: [t11, t15]
+    });
+    $[34] = t11;
+    $[35] = t15;
+    $[36] = t16;
+  } else {
+    t16 = $[36];
+  }
+  let t17;
+  if ($[37] !== t16 || $[38] !== t8) {
+    t17 = /*#__PURE__*/_jsxs(ButtonGroup, {
+      children: [t8, t16]
+    });
+    $[37] = t16;
+    $[38] = t8;
+    $[39] = t17;
+  } else {
+    t17 = $[39];
+  }
+  let t18;
+  if ($[40] !== t17 || $[41] !== t5) {
+    t18 = /*#__PURE__*/_jsx(Surface, {
+      role: "toolbar",
+      "aria-label": t5,
+      className: "absolute top-2 right-2 rounded-lg p-0.5 opacity-0 transition-opacity group-focus-within/visual:opacity-100 group-hover/visual:opacity-100 has-[[data-popup-open]]:opacity-100 pointer-coarse:opacity-100",
+      children: t17
+    });
+    $[40] = t17;
+    $[41] = t5;
+    $[42] = t18;
+  } else {
+    t18 = $[42];
+  }
+  let t19;
+  if ($[43] !== t18 || $[44] !== t4) {
+    t19 = /*#__PURE__*/_jsxs("div", {
+      className: "group/visual relative",
+      children: [t4, t18]
+    });
+    $[43] = t18;
+    $[44] = t4;
+    $[45] = t19;
+  } else {
+    t19 = $[45];
+  }
+  let t20;
+  if ($[46] !== t19 || $[47] !== t2 || $[48] !== t3) {
+    t20 = /*#__PURE__*/_jsx(ErrorBoundary, {
+      label: t2,
+      resetKeys: t3,
+      compact: true,
+      className: "relative rounded-lg",
+      children: t19
+    });
+    $[46] = t19;
+    $[47] = t2;
+    $[48] = t3;
+    $[49] = t20;
+  } else {
+    t20 = $[49];
+  }
+  return t20;
+}