@adecore/agents-react 0.31.12 → 0.33.0

package/dist/chat/ui/SubagentTimeline.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Bot, LoaderCircle } from 'lucide-react';
 import { deriveTimelineRows } from '../logic/timeline.js';
@@ -23,100 +23,366 @@ import { readingWidthStyle } from '../reading-width.js';
 import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { EmptyState, ContextMenu, Icon } from '@adecore/ui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const NO_TURNS = new Set();
 /*
  * A sub-agent's whole conversation, read back from the host and grown while it is on screen. It
  * stands in the chat's own place, read-only, and a sub-agent it opened goes one level further down.
  */
-export function SubagentTimeline({ chatId, toolUseId }) {
-    const { t } = useTranslation('agent-chat');
-    const scope = useChatScope();
-    const { commandLooks } = useChatHost();
-    const connected = useSyncExternalStore(useCallback((changed) => scope.transport.subscribeStatus(changed), [scope]), useCallback(() => scope.transport.status === 'open', [scope]), () => false);
-    const { trail, show } = useSubagentTrail(chatId);
-    const [state, setState] = useState(INITIAL_CONVERSATION);
-    const denyReason = useProviders((row) => row.providers.find((provider) => provider.kind === state.context?.provider)?.capabilities.denyReason === true);
-    const controller = useRef(null);
-    const scrollRef = useRef(null);
-    const threadRef = useRef(null);
-    const [target, setTarget] = useState(EMPTY_TARGET);
-    const followRef = useRef(true);
-    const stopFollowing = useCallback(() => {
-        followRef.current = false;
-    }, []);
-    const groups = useToggleSet(stopFollowing);
-    const subagents = useToggleSet(stopFollowing);
-    // The row being read when an earlier page was asked for, so it stays where it was once that page is in.
-    const anchorRef = useRef(null);
-    const headRef = useRef(undefined);
-    const cwd = useChatRow(chatId, (row) => row?.info.cwd ?? null);
-    useEffect(() => {
-        const conversation = new SubagentConversation(scope.transport, chatId, toolUseId, setState);
-        controller.current = conversation;
-        void conversation.start();
-        return () => {
-            conversation.dispose();
-            controller.current = null;
-        };
-    }, [scope, chatId, toolUseId]);
-    useEffect(() => {
-        if (state.unsupported) {
-            useSubagentSupport.getState().markUnsupported(scope.id);
-        }
-    }, [state.unsupported, scope]);
-    const rows = useMemo(() => deriveTimelineRows(state.items, {
-        expandedGroups: groups.ids,
-        expandedTurns: NO_TURNS,
-        expandedSubagents: subagents.ids,
-        activeTurnId: null,
-        commandLooks
-    }), [state.items, groups.ids, subagents.ids, commandLooks]);
-    useLayoutEffect(() => {
-        const element = scrollRef.current;
-        if (element === null) {
-            return;
-        }
-        const head = state.items[0]?.id;
-        const moved = head !== headRef.current;
-        headRef.current = head;
-        if (moved && anchorRef.current !== null && !followRef.current) {
-            restoreAnchor(element, anchorRef.current);
-        }
-        else if (followRef.current) {
-            element.scrollTop = element.scrollHeight;
-        }
-        if (moved) {
-            anchorRef.current = null;
-        }
-    }, [rows, state.live, state.items]);
-    const loadEarlier = useCallback(() => {
-        const element = scrollRef.current;
-        if (element === null || state.cursor === null || !wantsEarlier(element)) {
-            return;
-        }
-        // Taken on every call, since the reader may scroll on while a page is on its way.
-        anchorRef.current = firstRowInView(element);
-        void controller.current?.loadEarlier();
-    }, [state.cursor]);
-    // Close to the top, the page before goes in; again after each page that left too little above the reader.
-    // A page that failed changes no row, so it is asked for again only on the next scroll.
-    useEffect(() => {
-        if (state.status === 'ready') {
-            loadEarlier();
+export function SubagentTimeline(t0) {
+  const $ = _c(56);
+  const {
+    chatId,
+    toolUseId
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const scope = useChatScope();
+  const {
+    commandLooks
+  } = useChatHost();
+  let t1;
+  if ($[0] !== scope.transport) {
+    t1 = changed => scope.transport.subscribeStatus(changed);
+    $[0] = scope.transport;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== scope.transport.status) {
+    t2 = () => scope.transport.status === "open";
+    $[2] = scope.transport.status;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const connected = useSyncExternalStore(t1, t2, _temp);
+  const {
+    trail,
+    show
+  } = useSubagentTrail(chatId);
+  const [state, setState] = useState(INITIAL_CONVERSATION);
+  let t3;
+  if ($[4] !== state.context?.provider) {
+    t3 = row => row.providers.find(provider => provider.kind === state.context?.provider)?.capabilities.denyReason === true;
+    $[4] = state.context?.provider;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const denyReason = useProviders(t3);
+  const controller = useRef(null);
+  const scrollRef = useRef(null);
+  const threadRef = useRef(null);
+  const [target, setTarget] = useState(EMPTY_TARGET);
+  const followRef = useRef(true);
+  let t4;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = () => {
+      followRef.current = false;
+    };
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  const stopFollowing = t4;
+  const groups = useToggleSet(stopFollowing);
+  const subagents = useToggleSet(stopFollowing);
+  const anchorRef = useRef(null);
+  const headRef = useRef(undefined);
+  const cwd = useChatRow(chatId, _temp2);
+  let t5;
+  if ($[7] !== chatId || $[8] !== scope.transport || $[9] !== toolUseId) {
+    t5 = () => {
+      const conversation = new SubagentConversation(scope.transport, chatId, toolUseId, setState);
+      controller.current = conversation;
+      conversation.start();
+      return () => {
+        conversation.dispose();
+        controller.current = null;
+      };
+    };
+    $[7] = chatId;
+    $[8] = scope.transport;
+    $[9] = toolUseId;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== chatId || $[12] !== scope || $[13] !== toolUseId) {
+    t6 = [scope, chatId, toolUseId];
+    $[11] = chatId;
+    $[12] = scope;
+    $[13] = toolUseId;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  useEffect(t5, t6);
+  let t7;
+  if ($[15] !== scope.id || $[16] !== state.unsupported) {
+    t7 = () => {
+      if (state.unsupported) {
+        useSubagentSupport.getState().markUnsupported(scope.id);
+      }
+    };
+    $[15] = scope.id;
+    $[16] = state.unsupported;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[18] !== scope || $[19] !== state.unsupported) {
+    t8 = [state.unsupported, scope];
+    $[18] = scope;
+    $[19] = state.unsupported;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  useEffect(t7, t8);
+  const rows = deriveTimelineRows(state.items, {
+    expandedGroups: groups.ids,
+    expandedTurns: NO_TURNS,
+    expandedSubagents: subagents.ids,
+    activeTurnId: null,
+    commandLooks
+  });
+  let t9;
+  if ($[21] !== state.items) {
+    t9 = () => {
+      const element = scrollRef.current;
+      if (element === null) {
+        return;
+      }
+      const head = state.items[0]?.id;
+      const moved = head !== headRef.current;
+      headRef.current = head;
+      if (moved && anchorRef.current !== null && !followRef.current) {
+        restoreAnchor(element, anchorRef.current);
+      } else {
+        if (followRef.current) {
+          element.scrollTop = element.scrollHeight;
         }
-    }, [rows, state.status, loadEarlier]);
-    const readingWidth = useChatPreferences((preferences) => preferences.readingWidth);
-    const openChild = (step) => {
-        show(openBelow(trail, step));
+      }
+      if (moved) {
+        anchorRef.current = null;
+      }
+    };
+    $[21] = state.items;
+    $[22] = t9;
+  } else {
+    t9 = $[22];
+  }
+  useLayoutEffect(t9, [rows, state.live, state.items]);
+  let t10;
+  if ($[23] !== state.cursor) {
+    t10 = () => {
+      const element_0 = scrollRef.current;
+      if (element_0 === null || state.cursor === null || !wantsEarlier(element_0)) {
+        return;
+      }
+      anchorRef.current = firstRowInView(element_0);
+      controller.current?.loadEarlier();
     };
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", style: readingWidthStyle(readingWidth), children: [_jsx(SubagentInfo, { chatId: chatId, toolUseId: toolUseId }), state.status === 'loading' && _jsx("div", { className: "chat-column-content px-4 pt-4 text-xs text-text-faint", children: t('subagents.loading') }), state.status === 'failed' && (_jsx(EmptyState, { icon: Bot, children: state.unsupported ? t('subagents.unsupported') : (state.error ?? t('subagents.unreadable')) })), state.status === 'ready' && (_jsx(FileLinkContext.Provider, { value: state.context?.cwd ?? cwd, children: _jsx(ReplyContext.Provider, { value: state.context ?? { provider: state.source === 'codex-thread' ? 'codex' : 'claude' }, children: _jsx("div", { ref: scrollRef, "data-file-cwd": state.context?.cwd ?? cwd ?? '', "data-file-scope-id": scope.id, className: "chat-thread relative min-h-0 grow overflow-auto px-4 pt-4 pb-3", 
-                        // The thread keeps its reader in place itself when a page goes in above.
-                        style: { overflowAnchor: 'none' }, onScroll: (event) => {
-                            const element = event.currentTarget;
-                            followRef.current = element.scrollHeight - element.scrollTop - element.clientHeight < FOLLOW_THRESHOLD_PX;
-                            loadEarlier();
-                        }, children: _jsxs(ContextMenu.Root, { children: [_jsxs(ContextMenu.Trigger, { ref: threadRef, className: "chat-column-content", onContextMenu: (event) => setTarget(readTimelineTarget(event.target, threadRef.current, rows)), children: [state.loadingEarlier && (_jsxs("div", { className: "pointer-events-none sticky top-0 z-10 flex h-0 justify-center", role: "status", children: [_jsx(Icon, { icon: LoaderCircle, size: 16, className: "animate-spin text-text-faint" }), _jsx("span", { className: "sr-only", children: t('timeline.loadingEarlier') })] })), rows.length === 0 && !state.live && _jsx(EmptyState, { icon: Bot, children: t('rows.subagent.nothingYet') }), rows.map((row, index) => {
-                                            const previous = index > 0 ? rows[index - 1] : null;
-                                            return (_jsx("div", { "data-item-id": row.id, className: rowRhythm(row, previous), children: _jsx(Row, { row: row, chatId: chatId, toggleGroup: groups.toggle, toggleTurn: () => undefined, toggleSubagent: subagents.toggle, openSubagent: () => undefined, openConversation: openChild }) }, row.id));
-                                        }), state.live && _jsx("div", { className: "chat-live-text pt-1 text-xs", children: t('subagents.working') })] }), _jsx(TimelineMenuPopup, { target: target, thread: threadRef })] }) }) }) })), state.context?.chatId !== undefined && state.pending.length > 0 && (_jsx("div", { className: "chat-column-content shrink-0", children: _jsx(PromptComposer, { chatId: state.context.chatId, pending: state.pending, focused: false, disabled: !connected, hasDraft: false, denyReason: denyReason, children: null }, state.context.chatId) }))] }));
+    $[23] = state.cursor;
+    $[24] = t10;
+  } else {
+    t10 = $[24];
+  }
+  const loadEarlier = t10;
+  let t11;
+  if ($[25] !== loadEarlier || $[26] !== state.status) {
+    t11 = () => {
+      if (state.status === "ready") {
+        loadEarlier();
+      }
+    };
+    $[25] = loadEarlier;
+    $[26] = state.status;
+    $[27] = t11;
+  } else {
+    t11 = $[27];
+  }
+  useEffect(t11, [rows, state.status, loadEarlier]);
+  const readingWidth = useChatPreferences(_temp3);
+  let t12;
+  if ($[28] !== show || $[29] !== trail) {
+    t12 = step => {
+      show(openBelow(trail, step));
+    };
+    $[28] = show;
+    $[29] = trail;
+    $[30] = t12;
+  } else {
+    t12 = $[30];
+  }
+  const openChild = t12;
+  const t13 = "flex h-full min-h-0 flex-col";
+  let t14;
+  if ($[31] !== readingWidth) {
+    t14 = readingWidthStyle(readingWidth);
+    $[31] = readingWidth;
+    $[32] = t14;
+  } else {
+    t14 = $[32];
+  }
+  let t15;
+  if ($[33] !== chatId || $[34] !== toolUseId) {
+    t15 = /*#__PURE__*/_jsx(SubagentInfo, {
+      chatId: chatId,
+      toolUseId: toolUseId
+    });
+    $[33] = chatId;
+    $[34] = toolUseId;
+    $[35] = t15;
+  } else {
+    t15 = $[35];
+  }
+  let t16;
+  if ($[36] !== state.status || $[37] !== t) {
+    t16 = state.status === "loading" && /*#__PURE__*/_jsx("div", {
+      className: "chat-column-content px-4 pt-4 text-xs text-text-faint",
+      children: t("subagents.loading")
+    });
+    $[36] = state.status;
+    $[37] = t;
+    $[38] = t16;
+  } else {
+    t16 = $[38];
+  }
+  let t17;
+  if ($[39] !== state.error || $[40] !== state.status || $[41] !== state.unsupported || $[42] !== t) {
+    t17 = state.status === "failed" && /*#__PURE__*/_jsx(EmptyState, {
+      icon: Bot,
+      children: state.unsupported ? t("subagents.unsupported") : state.error ?? t("subagents.unreadable")
+    });
+    $[39] = state.error;
+    $[40] = state.status;
+    $[41] = state.unsupported;
+    $[42] = t;
+    $[43] = t17;
+  } else {
+    t17 = $[43];
+  }
+  const t18 = state.status === "ready" && /*#__PURE__*/_jsx(FileLinkContext.Provider, {
+    value: state.context?.cwd ?? cwd,
+    children: /*#__PURE__*/_jsx(ReplyContext.Provider, {
+      value: state.context ?? {
+        provider: state.source === "codex-thread" ? "codex" : "claude"
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        ref: scrollRef,
+        "data-file-cwd": state.context?.cwd ?? cwd ?? "",
+        "data-file-scope-id": scope.id,
+        className: "chat-thread relative min-h-0 grow overflow-auto px-4 pt-4 pb-3",
+        style: {
+          overflowAnchor: "none"
+        },
+        onScroll: event => {
+          const element_1 = event.currentTarget;
+          followRef.current = element_1.scrollHeight - element_1.scrollTop - element_1.clientHeight < FOLLOW_THRESHOLD_PX;
+          loadEarlier();
+        },
+        children: /*#__PURE__*/_jsxs(ContextMenu.Root, {
+          children: [/*#__PURE__*/_jsxs(ContextMenu.Trigger, {
+            ref: threadRef,
+            className: "chat-column-content",
+            onContextMenu: event_0 => setTarget(readTimelineTarget(event_0.target, threadRef.current, rows)),
+            children: [state.loadingEarlier && /*#__PURE__*/_jsxs("div", {
+              className: "pointer-events-none sticky top-0 z-10 flex h-0 justify-center",
+              role: "status",
+              children: [/*#__PURE__*/_jsx(Icon, {
+                icon: LoaderCircle,
+                size: 16,
+                className: "animate-spin text-text-faint"
+              }), /*#__PURE__*/_jsx("span", {
+                className: "sr-only",
+                children: t("timeline.loadingEarlier")
+              })]
+            }), rows.length === 0 && !state.live && /*#__PURE__*/_jsx(EmptyState, {
+              icon: Bot,
+              children: t("rows.subagent.nothingYet")
+            }), rows.map((row_1, index) => {
+              const previous = index > 0 ? rows[index - 1] : null;
+              return /*#__PURE__*/_jsx("div", {
+                "data-item-id": row_1.id,
+                className: rowRhythm(row_1, previous),
+                children: /*#__PURE__*/_jsx(Row, {
+                  row: row_1,
+                  chatId: chatId,
+                  toggleGroup: groups.toggle,
+                  toggleTurn: _temp4,
+                  toggleSubagent: subagents.toggle,
+                  openSubagent: _temp5,
+                  openConversation: openChild
+                })
+              }, row_1.id);
+            }), state.live && /*#__PURE__*/_jsx("div", {
+              className: "chat-live-text pt-1 text-xs",
+              children: t("subagents.working")
+            })]
+          }), /*#__PURE__*/_jsx(TimelineMenuPopup, {
+            target: target,
+            thread: threadRef
+          })]
+        })
+      })
+    })
+  });
+  let t19;
+  if ($[44] !== connected || $[45] !== denyReason || $[46] !== state.context || $[47] !== state.pending) {
+    t19 = state.context?.chatId !== undefined && state.pending.length > 0 && /*#__PURE__*/_jsx("div", {
+      className: "chat-column-content shrink-0",
+      children: /*#__PURE__*/_jsx(PromptComposer, {
+        chatId: state.context.chatId,
+        pending: state.pending,
+        focused: false,
+        disabled: !connected,
+        hasDraft: false,
+        denyReason: denyReason,
+        children: null
+      }, state.context.chatId)
+    });
+    $[44] = connected;
+    $[45] = denyReason;
+    $[46] = state.context;
+    $[47] = state.pending;
+    $[48] = t19;
+  } else {
+    t19 = $[48];
+  }
+  let t20;
+  if ($[49] !== t14 || $[50] !== t15 || $[51] !== t16 || $[52] !== t17 || $[53] !== t18 || $[54] !== t19) {
+    t20 = /*#__PURE__*/_jsxs("div", {
+      className: t13,
+      style: t14,
+      children: [t15, t16, t17, t18, t19]
+    });
+    $[49] = t14;
+    $[50] = t15;
+    $[51] = t16;
+    $[52] = t17;
+    $[53] = t18;
+    $[54] = t19;
+    $[55] = t20;
+  } else {
+    t20 = $[55];
+  }
+  return t20;
+}
+function _temp5() {}
+function _temp4() {}
+function _temp3(preferences) {
+  return preferences.readingWidth;
+}
+function _temp2(row_0) {
+  return row_0?.info.cwd ?? null;
 }
+function _temp() {
+  return false;
+}