@adecore/agents-react 0.38.0 → 0.40.0

package/src/chat/ui/SubagentControls.tsx

@@ -11,9 +11,11 @@ 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 }: { chatId: string; className?: string; children: ReactNode }) {
     const { trail, show } = useSubagentTrail(chatId);
+
     if (trail.length === 0) {
         return <>{children}</>;
     }
+
     return (
         <button type="button" className={clsx('flex min-w-0 items-center', className)} onClick={() => show(MAIN_AGENT)}>
             {children}
@@ -25,9 +27,11 @@ export function SubagentTitleCrumb({ chatId, className, children }: { chatId: st
 export function SubagentBreadcrumb({ chatId, className }: { chatId: string; className?: string }) {
     const { t } = useTranslation('agent-chat');
     const { trail, show } = useSubagentTrail(chatId);
+
     if (trail.length === 0) {
         return null;
     }
+
     return (
         <nav aria-label={t('subagents.title')} className={clsx('flex min-w-0 items-center gap-1', className)}>
             {breadcrumbOf(trail).map((step) => (
@@ -53,11 +57,14 @@ export function SubagentActions({ chatId }: { chatId: string }) {
     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 (
         <div className="flex shrink-0 items-center gap-1">
             {shown !== undefined && <SubagentStopButton chatId={chatId} item={shown} size="sm" />}

package/src/chat/ui/SubagentInfo.tsx

@@ -24,6 +24,7 @@ export function SubagentInfo({ chatId, toolUseId }: { chatId: string; toolUseId:
     const now = useNow(1000, item?.status === 'running');
     const word = item === null ? null : statusWordOf(item, task);
     const facts = item === null ? [] : subagentFacts(item, item.model === undefined ? null : modelName);
+
     return (
         <section aria-label={t('subagents.info.label')} className="shrink-0 border-b border-border py-1.5 pr-1.5 pl-4">
             <div className="flex min-w-0 items-center gap-2 text-xs text-text-faint">

package/src/chat/ui/SubagentStopButton.tsx

@@ -26,9 +26,11 @@ export function SubagentStopButton({
     const actions = useChatActions();
     const turnRunning = useChatRow(chatId, (row) => (row?.info.activeTurnId ?? null) !== null);
     const stop = stopOf(item, turnRunning);
+
     if (stop === null) {
         return null;
     }
+
     const send = (): void => {
         void actions.stopSubagent(chatId, item.toolUseId).catch((e: unknown) => {
             const stale = e instanceof Error && 'code' in e && e.code === 'subagent-stale';
@@ -36,12 +38,16 @@ export function SubagentStopButton({
             host.notify({ kind: 'error', title: t('subagents.stopFailed'), description });
         });
     };
+
     const run = (): void => {
         if (stop === 'task' && item.childId !== undefined) {
             host.confirm.stopTask(id, item.childId, subagentTitle(item), send);
+
             return;
         }
+
         send();
     };
+
     return <IconButton icon={Square} size={size} label={stopLabel(stop)} className={className} onClick={run} />;
 }

package/src/chat/ui/SubagentTimeline.tsx

@@ -38,9 +38,11 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
     const threadRef = useRef<HTMLDivElement>(null);
     const [target, setTarget] = useState<TimelineTarget>(EMPTY_TARGET);
     const followRef = useRef(true);
+
     const stopFollowing = () => {
         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.
@@ -52,6 +54,7 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
         const conversation = new SubagentConversation(scope.transport, chatId, toolUseId, setState);
         controller.current = conversation;
         void conversation.start();
+
         return () => {
             conversation.dispose();
             controller.current = null;
@@ -74,17 +77,21 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
 
     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;
         }
@@ -92,9 +99,11 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
 
     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();
@@ -153,6 +162,7 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
                                     {rows.length === 0 && !state.live && <EmptyState icon={Bot}>{t('rows.subagent.nothingYet')}</EmptyState>}
                                     {rows.map((row, index) => {
                                         const previous = index > 0 ? rows[index - 1]! : null;
+
                                         return (
                                             <div key={row.id} data-item-id={row.id} className={rowRhythm(row, previous)}>
                                                 <Row