@adecore/agents-react 0.36.0 → 0.37.0

package/dist/chat/ui/Timeline.js

@@ -1,7 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
 import clsx from 'clsx';
 import { LoaderCircle } from 'lucide-react';
 import { useForkedTurns } from '../forks.js';
@@ -409,7 +409,8 @@ export function Timeline({
   const visuals = useChatRow(chatId, row_3 => row_3?.visuals);
   const forkedTurns = useForkedTurns(chatId);
   const info = useChatRow(chatId, row_4 => row_4?.info ?? null);
-  const cursor = useChatRow(chatId, row_5 => row_5?.history?.cursor ?? null);
+  const historyPending = useChatRow(chatId, row_5 => row_5?.historyPending === true);
+  const cursor = useChatRow(chatId, row_6 => row_6?.history?.cursor ?? null);
   const scope = useChatScope();
   const {
     id: scopeId,
@@ -456,9 +457,6 @@ export function Timeline({
   });
   const [loadingEarlier, setLoadingEarlier] = useState(false);
   const loadingEarlierRef = useRef(false);
-  // The row being read and where it stood, taken after every render, so a page going in above puts it back.
-  const anchorRef = useRef(null);
-  const headRef = useRef(undefined);
   const loadEarlier = useCallback(() => {
     if (cursor === null || loadingEarlierRef.current) {
       return;
@@ -490,9 +488,10 @@ export function Timeline({
   const heldFrom = cursor === null ? null : items?.[order?.[0] ?? '']?.createdAt ?? null;
   const rows = useMemo(() => withTimedRows(threadRows, timedRowsOf(cards, drawsVisuals ? visuals ?? [] : null, heldFrom)), [threadRows, cards, drawsVisuals, visuals, heldFrom]);
   const welcomes = useHostWelcome(chatId);
+  const loadingHistory = historyPending && (info !== null && (info.usage.turns > 0 || info.activeTurnId !== null) || (order?.length ?? 0) > 0);
   const empty = rows.length === 0;
   // A chat that took a turn before is one whose thread has not come in yet, not one to greet.
-  const welcome = welcomes && empty && (info === null || info.usage.turns === 0 && info.activeTurnId === null);
+  const welcome = !loadingHistory && welcomes && empty && (info === null || info.usage.turns === 0 && info.activeTurnId === null);
   const marks = useMemo(() => bookmarkRows(rows, bookmarks ?? [], items ?? {}), [rows, bookmarks, items]);
   const ticks = useMemo(() => ticksOf(rows, marks), [rows, marks]);
   // A message a jump is on its way to; it may first have to open the turn its reply folded into.
@@ -519,7 +518,7 @@ export function Timeline({
     } : null
   }), [revealBlock, flash, keyOf, chatId]);
   // Whether the thread's text clears the strip depends on the width of the view, which only the thread's own frame tells.
-  useEffect(() => {
+  useLayoutEffect(() => {
     const element = frameRef.current;
     if (element === null || typeof ResizeObserver === 'undefined') {
       return;
@@ -555,14 +554,32 @@ export function Timeline({
   useEffect(() => registerTimeline(chatId, scrollRef.current, enabled => {
     followRef.current = enabled;
   }, () => coveredHeightRef.current), [chatId]);
+  const [measuredThread, setMeasuredThread] = useState(null);
+  const initialLayout = measuredThread !== keyOf(chatId);
+  const [, settleLayout] = useReducer(count => count + 1, 0);
+  // Changing this callback invalidates every cached measurement, including on a scroll.
+  const getItemKey = useCallback(index => rows[index].id, [rows]);
   // Nothing here builds with the React Compiler, so its memoization rule has nothing to break.
   // oxlint-disable-next-line react/incompatible-library
   const virtualizer = useVirtualizer({
-    count: rows.length,
+    count: loadingHistory ? 0 : rows.length,
     getScrollElement: () => scrollRef.current,
     estimateSize: () => ESTIMATED_ROW_PX,
-    getItemKey: index => rows[index].id,
+    getItemKey,
     overscan: 8,
+    anchorTo: 'end',
+    // Include the end before the first pin, so its actual heights are known before revealing it.
+    rangeExtractor: range => {
+      const indexes = defaultRangeExtractor(range);
+      if (!initialLayout) {
+        return indexes;
+      }
+      const tail = Math.max(8, Math.ceil(frame.height / ESTIMATED_ROW_PX));
+      return [...new Set([...indexes, ...Array.from({
+        length: Math.min(tail, range.count)
+      }, (_, index_0) => range.count - 1 - index_0)])].sort((left, right) => left - right);
+    },
+    measureElement: (element_1, entry) => Math.round(entry?.borderBoxSize?.[0]?.blockSize ?? element_1.offsetHeight),
     scrollPaddingEnd: coveredHeight
   });
   /*
@@ -572,42 +589,34 @@ export function Timeline({
    * A word that does not add a line moves nothing, so the thread does not listen to the words.
    */
   const totalSize = virtualizer.getTotalSize();
+  const virtualRows = virtualizer.getVirtualItems();
   useLayoutEffect(() => {
-    const element_1 = scrollRef.current;
-    if (!followRef.current || element_1 === null) {
+    if (!initialLayout || empty || loadingHistory || frame.height === 0) {
       return;
     }
-    // The composer is in the scroll flow, so its measured height is part of this end position.
-    element_1.scrollTop = element_1.scrollHeight;
-    scrollGeometry.current = {
-      top: element_1.scrollTop,
-      height: element_1.scrollHeight,
-      viewport: element_1.clientHeight
-    };
-  }, [rows.length, totalSize, composerHeight, frame.height]);
-  // A page that went in above moves every row down by what it measures; the reader stays on the row they were on.
-  useLayoutEffect(() => {
-    const element_2 = scrollRef.current;
-    const head = order?.[0];
-    const moved = head !== headRef.current;
-    headRef.current = head;
-    if (element_2 === null) {
+    // Ref measurements can change offsets after render. Commit those offsets before the first paint.
+    const measured = virtualizer.getVirtualItems();
+    if (virtualRows.length !== measured.length || virtualRows.some((row_7, index_1) => row_7.key !== measured[index_1]?.key || row_7.start !== measured[index_1]?.start || row_7.size !== measured[index_1]?.size)) {
+      settleLayout();
       return;
     }
-    const anchor = anchorRef.current;
-    const index_0 = moved && anchor !== null && !followRef.current ? rows.findIndex(row_6 => row_6.id === anchor.id) : -1;
-    if (anchor !== null && index_0 !== -1) {
-      // The total measures again what this commit's rows reported; the cache alone lags behind them.
-      virtualizer.getTotalSize();
-      element_2.scrollTop = virtualizer.measurementsCache[index_0].start - anchor.offset;
+    if (measured.at(-1)?.index === rows.length - 1) {
+      setMeasuredThread(keyOf(chatId));
+    }
+  }, [initialLayout, empty, loadingHistory, frame.height, virtualRows, virtualizer, rows.length, keyOf, chatId]);
+  useLayoutEffect(() => {
+    const element_2 = scrollRef.current;
+    if (!followRef.current || element_2 === null) {
       return;
     }
-    const row_7 = virtualizer.getVirtualItemForOffset(element_2.scrollTop);
-    anchorRef.current = row_7 === undefined ? null : {
-      id: String(row_7.key),
-      offset: row_7.start - element_2.scrollTop
+    // The composer is in the scroll flow, so its measured height is part of this end position.
+    element_2.scrollTop = element_2.scrollHeight;
+    scrollGeometry.current = {
+      top: element_2.scrollTop,
+      height: element_2.scrollHeight,
+      viewport: element_2.clientHeight
     };
-  });
+  }, [rows.length, totalSize, composerHeight, frame.height]);
   // Close to the top, the page before goes in; again after each page that left too little above the reader.
   useEffect(() => {
     const element_3 = scrollRef.current;
@@ -621,12 +630,15 @@ export function Timeline({
   const showsScrubber = frame.column && onMainAgent && ticks.length >= SCRUBBER_MIN_TICKS;
   const readingWidth = useChatPreferences(preferences => preferences.readingWidth);
   const paddingLeft = threadPaddingLeft(frame.width, showsScrubber, readingMeasure(readingWidth));
-  /*
-   * Where each message starts, from the virtualizer's measurements (an estimate for a row it never
-   * drew), so reading the scroll position costs no layout.
-   */
+  // The virtualizer materializes measurements on access; binary searches need only a few message starts.
   const measurements = virtualizer.measurementsCache;
-  const starts = ticks.map(tick => measurements[tick.rowIndex]?.start ?? tick.rowIndex * ESTIMATED_ROW_PX);
+  const starts = {
+    length: ticks.length,
+    at: index_2 => {
+      const tick = ticks.at(index_2);
+      return tick === undefined ? undefined : measurements[tick.rowIndex]?.start ?? tick.rowIndex * ESTIMATED_ROW_PX;
+    }
+  };
   const scrollTop = virtualizer.scrollOffset ?? 0;
   const viewport = virtualizer.scrollRect?.height ?? 0;
   const visibleHeight = Math.max(0, viewport - coveredHeight);
@@ -641,7 +653,7 @@ export function Timeline({
    * The virtualizer draws again only when its range of rows changes, which a scroll inside one long
    * row never does; the scroll itself redraws the strip once the messages in view are others.
    */
-  const [, redrawStrip] = useReducer(count => count + 1, 0);
+  const [, redrawStrip] = useReducer(count_0 => count_0 + 1, 0);
   const stripRef = useRef({
     starts,
     inView
@@ -685,11 +697,11 @@ export function Timeline({
     openGroup: groups.add,
     openSubagent: subagents.add,
     // A row already on screen stays put; the find scrolls to the match itself once it is drawn.
-    scrollToRow: index_1 => {
+    scrollToRow: index_3 => {
       const top_0 = scrollRef.current?.scrollTop ?? 0;
       const bottom = top_0 + visibleHeightRef.current;
-      if (!virtualizer.getVirtualItems().some(virtualRow_0 => virtualRow_0.index === index_1 && virtualRow_0.end > top_0 && virtualRow_0.start < bottom)) {
-        virtualizer.scrollToIndex(index_1, {
+      if (!virtualizer.getVirtualItems().some(virtualRow_0 => virtualRow_0.index === index_3 && virtualRow_0.end > top_0 && virtualRow_0.start < bottom)) {
+        virtualizer.scrollToIndex(index_3, {
           align: 'center'
         });
       }
@@ -707,8 +719,8 @@ export function Timeline({
   }, [searching, loadEarlier]);
   const found = useMemo(() => searching ? ticksWithHits(ticks, chatFind.hitRows) : [], [searching, ticks, chatFind.hitRows]);
   const foundCurrent = chatFind.currentRow === null ? null : tickOfRow(ticks, chatFind.currentRow);
-  const jumpTo = index_2 => {
-    const tick_0 = ticks[index_2];
+  const jumpTo = index_4 => {
+    const tick_0 = ticks[index_4];
     if (!tick_0) {
       return;
     }
@@ -730,6 +742,9 @@ export function Timeline({
       setSeeking(null);
       return;
     }
+    if (loadingHistory) {
+      return;
+    }
     if (seeking.block) {
       const jump = uiReplyJump(seeking.block, rows, items, turns.ids, cursor !== null);
       if (jump.kind === 'earlier') {
@@ -748,10 +763,10 @@ export function Timeline({
       }
       return;
     }
-    const index_3 = rows.findIndex(row_8 => row_8.id === seeking.itemId);
-    if (index_3 !== -1) {
+    const index_5 = rows.findIndex(row_8 => row_8.id === seeking.itemId);
+    if (index_5 !== -1) {
       setSeeking(null);
-      showRowAtTop(virtualizer, followRef, index_3);
+      showRowAtTop(virtualizer, followRef, index_5);
       if (seeking.options?.flash) {
         useTimelineFlash.getState().flash(seeking.key, seeking.itemId, false);
       }
@@ -773,8 +788,8 @@ export function Timeline({
     }
     setSeeking(null);
     seeking.options?.onMissing?.();
-  }, [seeking, rows, items, turns, virtualizer, cursor, loadEarlier, keyOf, chatId]);
-  const waitingForThread = seeking !== null && items === undefined;
+  }, [seeking, rows, items, turns, virtualizer, cursor, loadEarlier, keyOf, chatId, loadingHistory]);
+  const waitingForThread = seeking !== null && (items === undefined || loadingHistory);
   useEffect(() => {
     if (!waitingForThread) {
       return;
@@ -845,7 +860,7 @@ export function Timeline({
   // The strip is memoized and draws on every scroll, so it gets one callback for its life.
   const jumpRef = useRef(jumpTo);
   jumpRef.current = jumpTo;
-  const pick = useCallback(index_4 => jumpRef.current(index_4), []);
+  const pick = useCallback(index_6 => jumpRef.current(index_6), []);
   // Read when the card asks rather than on every render, so the strip's memo holds while the thread streams.
   const cardChat = useMemo(() => ({
     chatId,
@@ -863,11 +878,11 @@ export function Timeline({
     if (!onMainAgent) {
       return false;
     }
-    const index_5 = stepMessage(starts, i => ticks[i].kind === 'person', scrollTop, direction);
-    if (index_5 === null) {
+    const index_7 = stepMessage(starts, i => ticks[i].kind === 'person', scrollTop, direction);
+    if (index_7 === null) {
       return false;
     }
-    jumpTo(index_5);
+    jumpTo(index_7);
     return true;
   };
   useEffect(() => registerMessageStepper(keyOf(chatId), direction_0 => stepRef.current(direction_0)), [keyOf, chatId]);
@@ -953,20 +968,31 @@ export function Timeline({
                 },
                 inert: overlay ? true : undefined,
                 onContextMenu: e_0 => setTarget(readTimelineTarget(e_0.target, threadRef.current, withCurrentText(rows, fullItems()))),
-                children: welcome ? /*#__PURE__*/_jsx(WelcomeGreeting, {
+                children: loadingHistory ? /*#__PURE__*/_jsxs("div", {
+                  className: "flex grow items-center justify-center gap-2 text-sm text-text-muted",
+                  role: "status",
+                  children: [/*#__PURE__*/_jsx(Icon, {
+                    icon: LoaderCircle,
+                    size: 16,
+                    className: "animate-spin"
+                  }), /*#__PURE__*/_jsx("span", {
+                    children: t('timeline.loading')
+                  })]
+                }) : welcome ? /*#__PURE__*/_jsx(WelcomeGreeting, {
                   chatId: chatId
                 }) : empty ? /*#__PURE__*/_jsx(EmptyThread, {
                   chatId: chatId
                 }) : /*#__PURE__*/_jsx("div", {
                   className: "relative w-full shrink-0",
                   style: {
-                    height: virtualizer.getTotalSize()
+                    height: totalSize,
+                    visibility: initialLayout ? 'hidden' : undefined
                   },
                   children: /*#__PURE__*/_jsx(UiReplyNavigationContext.Provider, {
                     value: uiNavigation,
                     children: /*#__PURE__*/_jsx(FindRevealContext.Provider, {
                       value: chatFind.reveal,
-                      children: virtualizer.getVirtualItems().map(virtualRow_1 => {
+                      children: virtualRows.map(virtualRow_1 => {
                         const row_12 = rows[virtualRow_1.index];
                         return /*#__PURE__*/_jsx(ThreadRow, {
                           row: row_12,

package/dist/chat/ui/code-lines.d.ts

@@ -7,6 +7,11 @@ export type Tokenize<State> = (code: string, state: State | undefined) => {
     lines: CodeToken[][];
     state: State | undefined;
 };
+export declare class TokenCache<State> {
+    private readonly entries;
+    private size;
+    wrap(namespace: string, tokenize: Tokenize<State>): Tokenize<State>;
+}
 export declare class IncrementalLines<State> {
     private readonly tokenize;
     private source;

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

@@ -1,3 +1,40 @@
+// Virtual rows unmount offscreen; share this budget across their languages and themes.
+const TOKEN_CACHE_BUDGET = 4 * 1024 * 1024;
+const TOKEN_CACHE_ENTRIES = 128;
+export class TokenCache {
+  entries = new Map();
+  size = 0;
+  wrap(namespace, tokenize) {
+    return (code, state) => {
+      if (state !== undefined) {
+        return tokenize(code, state);
+      }
+      const key = `${namespace}\0${code}`;
+      const known = this.entries.get(key);
+      if (known !== undefined) {
+        this.entries.delete(key);
+        this.entries.set(key, known);
+        return known.result;
+      }
+      const result = tokenize(code, state);
+      // Account for tokens too, so dense code cannot fill the cache with tiny strings.
+      const cost = key.length * 2 + result.lines.reduce((sum, line) => sum + line.length * 64, 0);
+      if (cost <= TOKEN_CACHE_BUDGET) {
+        while (this.entries.size > 0 && (this.size + cost > TOKEN_CACHE_BUDGET || this.entries.size >= TOKEN_CACHE_ENTRIES)) {
+          const oldest = this.entries.keys().next().value;
+          this.size -= this.entries.get(oldest).cost;
+          this.entries.delete(oldest);
+        }
+        this.entries.set(key, {
+          result,
+          cost
+        });
+        this.size += cost;
+      }
+      return result;
+    };
+  }
+}
 /*
  * The lines of a code block that grows at the end. A line that ended keeps the tokens it got, and
  * the grammar state after it is where the next line starts, so a delta tokenizes the lines that are

package/dist/chat/ui/composer/use-pending-requests.d.ts

@@ -1,2 +1,2 @@
-import type { ChatApprovalItem, ChatQuestionItem } from '@adecore/agent-contracts';
-export declare function usePendingRequests(chatId: string): Array<ChatApprovalItem | ChatQuestionItem>;
+import type { PromptSubject } from '../../../prompts/logic/subjects.js';
+export declare function usePendingRequests(chatId: string): PromptSubject[];

package/dist/chat/ui/composer/use-pending-requests.js

@@ -1,43 +1,35 @@
 import { c as _c } from "react/compiler-runtime";
-import { useMemo } from 'react';
-import { useChatRow, waitingRequestsOf } from '../../../state/chats.js';
-/* The approvals and then the questions the chat waits on, which take the composer's place until answered. */
+import { useEffect, useState } from 'react';
+import { useChatScope } from '../../../scope.js';
+import { ChatPromptFeed } from '../../pending-prompts.js';
 export function usePendingRequests(chatId) {
-  const $ = _c(4);
-  const structure = useChatRow(chatId, _temp);
-  const order = useChatRow(chatId, _temp2);
-  const waitingBefore = useChatRow(chatId, _temp3);
+  const $ = _c(5);
+  const scope = useChatScope();
   let t0;
-  if ($[0] !== order || $[1] !== structure || $[2] !== waitingBefore) {
-    const approvals = [];
-    const questions = [];
-    for (const item of waitingRequestsOf(structure && order ? {
-      structure,
-      order,
-      waitingBefore
-    } : undefined)) {
-      if (item.kind === "approval") {
-        approvals.push(item);
-      } else {
-        questions.push(item);
-      }
-    }
-    t0 = [...approvals, ...questions];
-    $[0] = order;
-    $[1] = structure;
-    $[2] = waitingBefore;
-    $[3] = t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
   } else {
-    t0 = $[3];
+    t0 = $[0];
   }
-  return t0;
-}
-function _temp3(row_1) {
-  return row_1?.waitingBefore;
-}
-function _temp2(row_0) {
-  return row_0?.order;
-}
-function _temp(row) {
-  return row?.structure;
+  const [subjects, setSubjects] = useState(t0);
+  let t1;
+  let t2;
+  if ($[1] !== chatId || $[2] !== scope) {
+    t1 = () => {
+      const feed = new ChatPromptFeed(scope, chatId, setSubjects);
+      feed.start();
+      return () => feed.dispose();
+    };
+    t2 = [scope, chatId];
+    $[1] = chatId;
+    $[2] = scope;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t1 = $[3];
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  return subjects;
 }

package/dist/chat/ui/highlighter.d.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties } from 'react';
 import type { Highlighter } from 'shiki';
-import type { CodeToken, Tokenize } from './code-lines.js';
+import { type CodeToken, type Tokenize } from './code-lines.js';
 import { type ChatHost } from '../../host.js';
 export type { Highlighter };
 export type GrammarState = ReturnType<Highlighter['getLastGrammarState']>;

package/dist/chat/ui/highlighter.js

@@ -1,4 +1,5 @@
 import { c as _c } from "react/compiler-runtime";
+import { TokenCache } from './code-lines.js';
 import { useChatHost } from '../../host.js';
 import { shikiThemeOf } from './code-theme.js';
 // A plain language needs no grammar; shiki draws it in the theme's own foreground.
@@ -22,6 +23,7 @@ function createCodeHighlighter(source) {
   const languageLoads = new Map();
   const themes = new Set();
   const themeLoads = new Map();
+  const tokens = new TokenCache();
   const tokenizers = new Map();
   const load = () => {
     highlighterLoad ??= source().then(loaded => {
@@ -83,7 +85,7 @@ function createCodeHighlighter(source) {
           theme
         };
         entry = {
-          tokenize: (code, state) => {
+          tokenize: tokens.wrap(key, (code, state) => {
             const result = loaded.codeToTokens(code, state ? {
               ...options,
               grammarState: state
@@ -92,7 +94,7 @@ function createCodeHighlighter(source) {
               lines: result.tokens,
               state: result.grammarState
             };
-          },
+          }),
           fg: loaded.getTheme(theme).fg
         };
         tokenizers.set(key, entry);

package/dist/locales/en/agent-chat.d.ts

@@ -233,6 +233,7 @@ declare const _default: {
             canRead: string;
             worksIn: string;
         };
+        loading: string;
         loadingEarlier: string;
         stripFailed: string;
         cardFailed: string;

package/dist/locales/en/agent-chat.js

@@ -233,6 +233,7 @@ export default {
       canRead: 'It can read',
       worksIn: 'It works in'
     },
+    loading: 'Loading conversation',
     loadingEarlier: 'Loading earlier messages',
     stripFailed: 'Could not show the messages',
     cardFailed: 'Could not show this card',

package/dist/locales/nl/agent-chat.d.ts

@@ -233,6 +233,7 @@ declare const _default: {
             canRead: string;
             worksIn: string;
         };
+        loading: string;
         loadingEarlier: string;
         stripFailed: string;
         cardFailed: string;

package/dist/locales/nl/agent-chat.js

@@ -233,6 +233,7 @@ export default {
       canRead: 'Kan lezen',
       worksIn: 'Werkt in'
     },
+    loading: 'Gesprek laden',
     loadingEarlier: 'Eerdere berichten laden',
     stripFailed: 'Kon de berichten niet tonen',
     cardFailed: 'Kon deze kaart niet tonen',

package/dist/prompts/logic/subjects.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { AgentKind } from '@adecore/agent-contracts';
 import type { ChatHost } from '../../host.js';
 import { type PendingPrompt, type PromptAction, type PromptDraft } from './prompts.js';
 export interface HostPrompt {
@@ -12,6 +13,10 @@ export type PromptSubject = {
     kind: 'chat';
     nodeId: string;
     item: PendingPrompt;
+    source?: {
+        label: string;
+        provider?: AgentKind;
+    };
 } | {
     kind: 'host';
     nodeId: string;

package/dist/prompts/ui/PromptCard.js

@@ -120,7 +120,7 @@ export function PromptCard(t0) {
   let t8;
   if ($[12] !== meta) {
     t8 = meta && /*#__PURE__*/_jsx("div", {
-      className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-text-muted",
+      className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-text-muted",
       children: meta
     });
     $[12] = meta;