@adecore/agents-react 0.44.3 → 0.45.0

package/src/chat/ui/rows/WorkRows.tsx

@@ -561,30 +561,31 @@ export function TurnFoldRow({
     label,
     work,
     expanded,
+    expandable,
     onToggle
 }: {
     turn: ChatTurnItem;
     label: string;
     work: readonly string[];
     expanded: boolean;
+    /* False when the fold hides nothing a person may see, so it stays a label. */
+    expandable: boolean;
     onToggle(): void;
 }) {
     const { commandLooks } = useChatHost();
     const brands = commandLooks?.flatMap(({ brand }) => (brand === undefined ? [] : [brand])) ?? [];
+    const className = clsx(
+        'group group/line -mx-1 mb-2 flex h-7 w-[calc(100%+8px)] min-w-0 items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted',
+        expandable && 'hover:bg-surface-hover',
+        turn.state === 'error' && 'text-status-error'
+    );
 
-    return (
-        <button
-            className={clsx(
-                'group group/line -mx-1 mb-2 flex h-7 w-[calc(100%+8px)] min-w-0 items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted hover:bg-surface-hover',
-                turn.state === 'error' && 'text-status-error'
-            )}
-            aria-expanded={expanded}
-            onClick={onToggle}
-        >
+    const content = (
+        <>
             <span className={ROW_GUTTER}>
-                <Icon icon={ChevronRight} size={12} className={clsx('transition-transform', expanded && 'rotate-90')} />
+                {expandable && <Icon icon={ChevronRight} size={12} className={clsx('transition-transform', expanded && 'rotate-90')} />}
             </span>
-            <span className="shrink-0 group-hover:text-text">{label}</span>
+            <span className={clsx('shrink-0', expandable && 'group-hover:text-text')}>{label}</span>
             {work.length > 0 && (
                 <span className="min-w-0 truncate text-text-faint">
                     {work.map((part, index) => (
@@ -597,6 +598,16 @@ export function TurnFoldRow({
             )}
             <span className="grow" />
             <RowTime at={turn.createdAt} />
+        </>
+    );
+
+    if (!expandable) {
+        return <div className={className}>{content}</div>;
+    }
+
+    return (
+        <button className={className} aria-expanded={expanded} onClick={onToggle}>
+            {content}
         </button>
     );
 }

package/src/host-hooks.ts

@@ -39,6 +39,10 @@ export function useHostSendDelivery(): ReturnType<ChatHost['useSendDelivery']> {
     return useChatHost().useSendDelivery();
 }
 
+export function useHostHidesToolCalls(...args: Parameters<ChatHost['useHidesToolCalls']>): ReturnType<ChatHost['useHidesToolCalls']> {
+    return useChatHost().useHidesToolCalls(...args);
+}
+
 export function useHostTimelineFind(...args: Parameters<ChatHost['useTimelineFind']>): ReturnType<ChatHost['useTimelineFind']> {
     return useChatHost().useTimelineFind(...args);
 }

package/src/host.ts

@@ -172,6 +172,15 @@ export interface ComposerSlotProps {
     insert(text: string): void;
 }
 
+/* What an app's own bar over the composer gets: the chat it stands on, which may be one the bar has nothing for. */
+export interface ComposerHeaderSlotProps {
+    scopeId: string;
+    chatId: string;
+    disabled: boolean;
+    /* Whether this composer has the focus; a bar keeps its controls out of the tab order while it does not, as the editor does. */
+    focused: boolean;
+}
+
 /* What a send action of the app's gets: the message as it stands when a person picks the action. */
 export interface ComposerSendDraft {
     scopeId: string;
@@ -402,6 +411,8 @@ export interface ChatHost {
     useStreaming(): 'words' | 'blocks' | 'whole';
     /* How Send handles a running turn; Option or Alt selects the other behavior. */
     useSendDelivery(): 'queue' | 'steer';
+    /* Whether a thread leaves out its tool lines; a settled turn still says how long it worked. */
+    useHidesToolCalls(scopeId: string, chatId: string): boolean;
     /* Paths in an answer as links; null leaves them text. */
     fileLinks: {
         /* The reference a piece of text names, where the folder it counts from lets it be opened. */
@@ -479,6 +490,8 @@ export interface ChatHost {
     useComposerPlaceholder(scopeId: string, chatId: string): string | null;
     /* The app's own control in the composer's row, after the pickers; null draws none. */
     ComposerSlot: ComponentType<ComposerSlotProps> | null;
+    /* The app's own bar at the top of the composer, inside its card, such as a switch between chats of one thing; left out, or a slot that renders nothing, draws none. */
+    ComposerHeaderSlot?: ComponentType<ComposerHeaderSlotProps> | null;
     /* Actions of the app's own behind a chevron on the send button, in the order given; left out, or none, Send stands alone. */
     useComposerSendActions?(scopeId: string, chatId: string): readonly ComposerSendAction[];
     /* The app's own chips for a chat's sub-agents over the composer; null draws the one flyout. */
@@ -514,6 +527,7 @@ const DEFAULT_HOST: ChatHost = {
     code: { useMode: () => 'light', useThemes: () => ({ light: 'github-light', dark: 'github-dark' }), custom: [] },
     useStreaming: () => 'words',
     useSendDelivery: () => 'queue',
+    useHidesToolCalls: () => false,
     fileLinks: null,
     useTimelineFind: () => NO_FIND,
     dictation: { Textarea: PlainTextarea, composer: null },

package/src/index.ts

@@ -8,6 +8,7 @@ export {
     type TimelineFindOptions,
     type TimelineFind,
     type ComposerDictationProps,
+    type ComposerHeaderSlotProps,
     type ComposerSlotProps,
     type ComposerSendAction,
     type ComposerSendDraft,