jupyter-chat-components 0.3.0 → 0.4.1

package/README.md

@@ -26,13 +26,7 @@ The registry is available directly on the `IComponentsRendererFactory` token as
 
 Other JupyterLab extensions can consume the `IComponentsRendererFactory` token and use `registry.add()` to register their own components, which will then be available for rendering via the MIME bundle.
 
-## Available components
-
-### `tool-call`
-
-Renders an AI tool call, displaying the tool name, input arguments, and output in a structured and readable format. Useful for visualizing function calls made by AI assistants during a conversation.
-
-More components are planned for future releases.
+For live end-to-end metadata examples, see the deployed demo notebook at [brichet.github.io/jupyter-chat-components/lab/index.html?path=components_demo.ipynb](https://brichet.github.io/jupyter-chat-components/lab/index.html?path=components_demo.ipynb). The source notebook lives at [demo/contents/components_demo.ipynb](./demo/contents/components_demo.ipynb).
 
 ## Requirements
 

package/lib/components/grouped-tool-calls.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { IComponentProps, IToolCallsEntry, IToolCallsMetadata, OpenToolCallPath, ToolCallPermissionDecision } from '../token';
+/**
+ * Props for rendering grouped tool calls.
+ */
+export interface IGroupedToolCallsProps extends IComponentProps, IToolCallsMetadata {
+    toolCallPermissionDecision?: ToolCallPermissionDecision;
+    openToolCallPath?: OpenToolCallPath;
+}
+/**
+ * Convert an absolute filesystem path to a server-relative path when possible.
+ */
+export declare function toServerRelativePath(absolutePath: string): string;
+/**
+ * Format tool payload (input/output) for display.
+ */
+export declare function formatToolCallIO(payload: unknown): string;
+/**
+ * Compute the line title shown for a tool call.
+ */
+export declare function getToolCallDisplayTitle(toolCall: IToolCallsEntry): string;
+/**
+ * Compute the pre-permission detail text for a tool call, or null if the
+ * title alone is enough.
+ */
+export declare function buildPermissionDetail(toolCall: IToolCallsEntry): string | null;
+/**
+ * React component for rendering grouped tool calls.
+ */
+export declare const GroupedToolCalls: React.FC<IGroupedToolCallsProps>;

package/lib/components/grouped-tool-calls.js

@@ -0,0 +1,432 @@
+import { PageConfig, PathExt } from '@jupyterlab/coreutils';
+import { nullTranslator } from '@jupyterlab/translation';
+import * as React from 'react';
+import { structuredPatch } from 'diff';
+/** Maximum number of rendered diff lines before truncation. */
+const MAX_DIFF_LINES = 20;
+/** Maximum number of lines shown in an expanded detail. */
+const MAX_DETAIL_LINES = 15;
+/** Tool kinds where expanded view shows file paths from locations. */
+const FILE_KINDS = new Set(['read', 'edit', 'delete', 'move']);
+const TOOL_KIND_LABELS = {
+    read: 'Reading',
+    edit: 'Editing',
+    delete: 'Deleting',
+    move: 'Moving',
+    search: 'Searching',
+    execute: 'Running command',
+    think: 'Thinking',
+    fetch: 'Fetching',
+    switch_mode: 'Switching mode'
+};
+function getConfiguredServerRoot() {
+    const rootUri = PageConfig.getOption('rootUri');
+    if (rootUri) {
+        try {
+            return new URL(rootUri, 'http://localhost').pathname;
+        }
+        catch (error) {
+            console.warn('Could not parse rootUri while rendering tool calls.', error);
+        }
+    }
+    const serverRoot = PageConfig.getOption('serverRoot');
+    return serverRoot || null;
+}
+/**
+ * Convert an absolute filesystem path to a server-relative path when possible.
+ */
+export function toServerRelativePath(absolutePath) {
+    const serverRoot = getConfiguredServerRoot();
+    if (!serverRoot) {
+        return absolutePath;
+    }
+    const relativePath = PathExt.relative(serverRoot, absolutePath);
+    if (relativePath.startsWith('..')) {
+        return absolutePath;
+    }
+    return relativePath;
+}
+/**
+ * Format tool payload (input/output) for display.
+ */
+export function formatToolCallIO(payload) {
+    if (typeof payload === 'string') {
+        return payload;
+    }
+    if (Array.isArray(payload) &&
+        payload.every(item => typeof item === 'object' &&
+            item !== null &&
+            typeof item.text === 'string')) {
+        return payload.map(item => item.text).join('\n');
+    }
+    return JSON.stringify(payload, null, 2);
+}
+function getLocationSummary(toolCall) {
+    var _a;
+    const firstLocation = (_a = toolCall.locations) === null || _a === void 0 ? void 0 : _a[0];
+    if (!firstLocation) {
+        return null;
+    }
+    return PathExt.basename(firstLocation) || firstLocation;
+}
+/**
+ * Compute the line title shown for a tool call.
+ */
+export function getToolCallDisplayTitle(toolCall) {
+    var _a, _b, _c;
+    const title = (_a = toolCall.title) === null || _a === void 0 ? void 0 : _a.trim();
+    if (title) {
+        return title;
+    }
+    const verb = (_c = TOOL_KIND_LABELS[(_b = toolCall.kind) !== null && _b !== void 0 ? _b : '']) !== null && _c !== void 0 ? _c : 'Working';
+    const location = getLocationSummary(toolCall);
+    if (location) {
+        return `${verb} ${location}`;
+    }
+    return `${verb}...`;
+}
+/**
+ * Compute the pre-permission detail text for a tool call, or null if the
+ * title alone is enough.
+ */
+export function buildPermissionDetail(toolCall) {
+    const { kind, title, locations, rawInput } = toolCall;
+    if (kind === 'execute') {
+        const rawObject = typeof rawInput === 'object' &&
+            rawInput !== null &&
+            !Array.isArray(rawInput)
+            ? rawInput
+            : null;
+        const command = rawObject && typeof rawObject.command === 'string'
+            ? rawObject.command
+            : (title === null || title === void 0 ? void 0 : title.replace(/^Running:\s*/i, '').replace(/\.\.\.$/, '').trim()) || null;
+        if (!command || command === title) {
+            return null;
+        }
+        return '$ ' + command;
+    }
+    if ((kind === 'delete' || kind === 'move' || kind === 'read') &&
+        (locations === null || locations === void 0 ? void 0 : locations.length)) {
+        return kind === 'move' && locations.length >= 2
+            ? `${toServerRelativePath(locations[0])}  \u2192  ${toServerRelativePath(locations[1])}`
+            : locations.map(toServerRelativePath).join('\n');
+    }
+    if (rawInput !== null &&
+        rawInput !== undefined &&
+        typeof rawInput === 'object' &&
+        !Array.isArray(rawInput)) {
+        const rawObject = rawInput;
+        const purpose = typeof rawObject.__tool_use_purpose === 'string'
+            ? rawObject.__tool_use_purpose
+            : null;
+        const paramEntries = Object.entries(rawObject).filter(([key]) => !key.startsWith('__'));
+        const filteredParams = paramEntries.reduce((result, [key, value]) => {
+            result[key] = value;
+            return result;
+        }, {});
+        const params = paramEntries.length > 0 ? formatToolCallIO(filteredParams) : null;
+        if (purpose && params) {
+            return `${purpose}\n${params}`;
+        }
+        if (purpose) {
+            return purpose;
+        }
+        if (params) {
+            return params;
+        }
+        return null;
+    }
+    if (rawInput !== null && rawInput !== undefined) {
+        return formatToolCallIO(rawInput);
+    }
+    return null;
+}
+/**
+ * Returns true when a completed/failed tool call has expandable detail content.
+ */
+function hasDetailContent(toolCall) {
+    const { kind, locations, rawInput, rawOutput } = toolCall;
+    const hasInput = rawInput !== null && rawInput !== undefined;
+    const hasOutput = rawOutput !== null && rawOutput !== undefined;
+    if (kind && FILE_KINDS.has(kind) && (locations === null || locations === void 0 ? void 0 : locations.length)) {
+        return true;
+    }
+    return hasInput || hasOutput;
+}
+function toDiffLineInfo(type, text, key) {
+    switch (type) {
+        case 'added':
+            return {
+                cssClass: 'jp-mod-added',
+                prefix: '+',
+                text,
+                key
+            };
+        case 'removed':
+            return {
+                cssClass: 'jp-mod-removed',
+                prefix: '-',
+                text,
+                key
+            };
+        case 'context':
+            return {
+                cssClass: 'jp-mod-context',
+                prefix: ' ',
+                text,
+                key
+            };
+    }
+}
+function buildDiffLinesFromHunk(hunk, hunkIndex) {
+    return hunk.lines
+        .filter(line => !line.startsWith('\\'))
+        .map((line, lineIndex) => {
+        var _a;
+        const prefix = (_a = line[0]) !== null && _a !== void 0 ? _a : ' ';
+        const text = line.slice(1);
+        const key = `${hunkIndex}-${hunk.oldStart}-${hunk.newStart}-${lineIndex}`;
+        if (prefix === '+') {
+            return toDiffLineInfo('added', text, key);
+        }
+        if (prefix === '-') {
+            return toDiffLineInfo('removed', text, key);
+        }
+        return toDiffLineInfo('context', text, key);
+    });
+}
+function buildDiffLines(diff) {
+    var _a;
+    const patch = structuredPatch(diff.path, diff.path, (_a = diff.oldText) !== null && _a !== void 0 ? _a : '', diff.newText, undefined, undefined, { context: Infinity });
+    return patch.hunks.reduce((lines, hunk, index) => {
+        lines.push(...buildDiffLinesFromHunk(hunk, index));
+        return lines;
+    }, []);
+}
+/**
+ * A labeled section with a capped height and show-all/show-less toggle.
+ */
+function ToolCallSection({ label, children, trans }) {
+    const [expanded, setExpanded] = React.useState(false);
+    const [isOverflowing, setIsOverflowing] = React.useState(false);
+    const preRef = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        const details = (_a = preRef.current) === null || _a === void 0 ? void 0 : _a.closest('details');
+        if (!details) {
+            return;
+        }
+        const handleToggle = () => {
+            if (!details.open) {
+                setExpanded(false);
+            }
+        };
+        details.addEventListener('toggle', handleToggle);
+        return () => details.removeEventListener('toggle', handleToggle);
+    }, []);
+    React.useLayoutEffect(() => {
+        const el = preRef.current;
+        if (!el) {
+            return;
+        }
+        const measure = () => {
+            if (!expanded) {
+                setIsOverflowing(el.scrollHeight > el.clientHeight);
+            }
+        };
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        measure();
+        return () => observer.disconnect();
+    }, [expanded]);
+    return (React.createElement("div", { className: "jp-ai-tool-call-detail-section" },
+        React.createElement("div", { className: "jp-ai-tool-call-detail-label" }, label),
+        React.createElement("pre", { ref: preRef, className: "jp-ai-tool-call-detail-code", style: {
+                maxHeight: expanded
+                    ? undefined
+                    : `calc(${MAX_DETAIL_LINES} * var(--jp-content-line-height) * var(--jp-ui-font-size1))`
+            } },
+            React.createElement("code", null, children)),
+        !expanded && isOverflowing && (React.createElement("button", { className: "jp-ai-tool-call-diff-toggle", onClick: () => setExpanded(true), type: "button" }, trans.__('Show all'))),
+        expanded && (React.createElement("button", { className: "jp-ai-tool-call-diff-toggle", onClick: () => setExpanded(false), type: "button" }, trans.__('Show less')))));
+}
+/**
+ * Expandable detail view for a completed or failed tool call.
+ */
+function ToolCallDetail({ toolCall, trans }) {
+    const { kind, locations, rawInput, rawOutput } = toolCall;
+    const hasInput = rawInput !== null && rawInput !== undefined;
+    const hasOutput = rawOutput !== null && rawOutput !== undefined;
+    if (kind && FILE_KINDS.has(kind) && (locations === null || locations === void 0 ? void 0 : locations.length)) {
+        return (React.createElement("div", { className: "jp-ai-tool-call-item-detail" }, locations.map((loc, i) => (React.createElement("div", { key: i, className: "jp-ai-tool-call-item-detail-path" }, toServerRelativePath(loc))))));
+    }
+    return (React.createElement("div", { className: "jp-ai-tool-call-item-detail" },
+        hasInput && (React.createElement(ToolCallSection, { label: trans.__('Input'), trans: trans }, formatToolCallIO(rawInput))),
+        hasOutput && (React.createElement(ToolCallSection, { label: trans.__('Output'), trans: trans }, formatToolCallIO(rawOutput)))));
+}
+function ToolCallDiffBlock({ diff, trans, openToolCallPath, pendingPermission }) {
+    const [expanded, setExpanded] = React.useState(false);
+    const allLines = React.useMemo(() => buildDiffLines(diff), [diff]);
+    const canTruncate = allLines.length > MAX_DIFF_LINES;
+    const visibleLines = canTruncate && !expanded ? allLines.slice(0, MAX_DIFF_LINES) : allLines;
+    const hiddenCount = allLines.length - MAX_DIFF_LINES;
+    const displayPath = toServerRelativePath(diff.path);
+    const canOpenPath = !!openToolCallPath && !(pendingPermission && !diff.oldText);
+    return (React.createElement("div", { className: "jp-ai-tool-call-diff-block" },
+        React.createElement("div", { className: `jp-ai-tool-call-diff-header${canOpenPath ? ' jp-ai-tool-call-diff-header-clickable' : ''}`, onClick: canOpenPath ? () => openToolCallPath(displayPath) : undefined, title: displayPath }, displayPath),
+        React.createElement("div", { className: "jp-ai-tool-call-diff-content" },
+            visibleLines.length ? (visibleLines.map(line => (React.createElement("div", { key: line.key, className: `jp-ai-tool-call-diff-line ${line.cssClass}` },
+                React.createElement("span", { className: "jp-ai-tool-call-diff-line-prefix" }, line.prefix),
+                React.createElement("span", { className: "jp-ai-tool-call-diff-line-text" }, line.text))))) : (React.createElement("div", { className: "jp-ai-tool-call-diff-empty" }, trans.__('No changes'))),
+            canTruncate && !expanded && (React.createElement("button", { className: "jp-ai-tool-call-diff-toggle", onClick: () => setExpanded(true), type: "button" }, trans.__('... %1 more lines', hiddenCount))),
+            canTruncate && expanded && (React.createElement("button", { className: "jp-ai-tool-call-diff-toggle", onClick: () => setExpanded(false), type: "button" }, trans.__('Show less'))))));
+}
+function ToolCallDiffView({ diffs, trans, openToolCallPath, pendingPermission }) {
+    return (React.createElement("div", { className: "jp-ai-tool-call-diff-container" }, diffs.map((diff, index) => (React.createElement(ToolCallDiffBlock, { key: `${diff.path}-${index}`, diff: diff, trans: trans, openToolCallPath: openToolCallPath, pendingPermission: pendingPermission })))));
+}
+function PermissionLabel({ toolCall }) {
+    var _a, _b;
+    if (toolCall.permissionStatus !== 'resolved' || !toolCall.selectedOptionId) {
+        return null;
+    }
+    const selectedName = (_b = (_a = toolCall.permissionOptions) === null || _a === void 0 ? void 0 : _a.find(option => option.optionId === toolCall.selectedOptionId)) === null || _b === void 0 ? void 0 : _b.name;
+    if (!selectedName) {
+        return null;
+    }
+    return (React.createElement("span", { className: "jp-ai-tool-call-permission-label" },
+        " - ",
+        selectedName));
+}
+function PermissionButtons({ toolCall, trans, toolCallPermissionDecision }) {
+    var _a;
+    const [submitting, setSubmitting] = React.useState(false);
+    if (!((_a = toolCall.permissionOptions) === null || _a === void 0 ? void 0 : _a.length) ||
+        toolCall.permissionStatus !== 'pending') {
+        return null;
+    }
+    const canSubmit = !!toolCallPermissionDecision &&
+        !!toolCall.sessionId &&
+        !!toolCall.toolCallId;
+    const handleClick = async (optionId) => {
+        if (!canSubmit) {
+            return;
+        }
+        setSubmitting(true);
+        try {
+            await toolCallPermissionDecision(toolCall.sessionId, toolCall.toolCallId, optionId);
+        }
+        catch (error) {
+            console.error('Failed to submit tool call permission decision:', error);
+            setSubmitting(false);
+        }
+    };
+    return (React.createElement("div", { className: "jp-ai-tool-call-permission-buttons" },
+        React.createElement("span", { className: "jp-ai-tool-call-permission-tree" }, '\u2514\u2500'),
+        React.createElement("span", null, trans.__('Allow?')),
+        toolCall.permissionOptions.map(option => {
+            const optionClass = option.kind
+                ? ` jp-ai-tool-call-permission-btn-${option.kind.replace(/_/g, '-')}`
+                : '';
+            return (React.createElement("button", { key: option.optionId, className: `jp-ai-tool-call-permission-btn${optionClass}`, onClick: () => handleClick(option.optionId), disabled: submitting || !canSubmit, title: option.kind, type: "button" }, option.name));
+        })));
+}
+function ToolCallRow({ toolCall, trans, openToolCallPath, toolCallPermissionDecision }) {
+    var _a, _b, _c, _d;
+    const displayTitle = getToolCallDisplayTitle(toolCall);
+    const selectedOption = (_a = toolCall.permissionOptions) === null || _a === void 0 ? void 0 : _a.find(option => option.optionId === toolCall.selectedOptionId);
+    const status = (_b = toolCall.status) !== null && _b !== void 0 ? _b : 'in_progress';
+    const isRejected = toolCall.permissionStatus === 'resolved' &&
+        (!!((_c = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.kind) === null || _c === void 0 ? void 0 : _c.includes('reject')) || status === 'rejected');
+    const hasPendingPermission = toolCall.permissionStatus === 'pending';
+    const isInProgress = !isRejected &&
+        (status === 'in_progress' || status === 'pending' || hasPendingPermission);
+    const isCompleted = status === 'completed';
+    const isFailed = status === 'failed' || isRejected;
+    const icon = isInProgress
+        ? '\u2022'
+        : isCompleted
+            ? '\u2713'
+            : isFailed
+                ? '\u2717'
+                : '\u2022';
+    const effectiveStatus = (isRejected ? 'failed' : status).replace(/_/g, '-');
+    const hasDiffs = !!((_d = toolCall.diffs) === null || _d === void 0 ? void 0 : _d.length);
+    const hasExpandableContent = hasDiffs ||
+        (!hasDiffs && (isCompleted || isFailed) && hasDetailContent(toolCall));
+    const cssClass = `jp-ai-tool-call-item jp-ai-tool-call-item-${effectiveStatus}${!hasExpandableContent && !hasPendingPermission ? ' jp-ai-tool-call-item-no-detail' : ''}`;
+    if (hasDiffs && hasPendingPermission) {
+        return (React.createElement("div", { className: cssClass },
+            React.createElement("details", { open: true },
+                React.createElement("summary", null,
+                    React.createElement("span", { className: "jp-ai-tool-call-item-icon" }, icon),
+                    ' ',
+                    React.createElement("div", { className: "jp-ai-tool-call-item-title" },
+                        displayTitle,
+                        toolCall.summary && (React.createElement("span", { className: "jp-ai-tool-call-item-summary" },
+                            '  ',
+                            toolCall.summary)))),
+                React.createElement(ToolCallDiffView, { diffs: toolCall.diffs, trans: trans, openToolCallPath: openToolCallPath, pendingPermission: true })),
+            React.createElement(PermissionButtons, { toolCall: toolCall, trans: trans, toolCallPermissionDecision: toolCallPermissionDecision })));
+    }
+    if (!hasDiffs && hasPendingPermission) {
+        const permissionDetail = buildPermissionDetail(toolCall);
+        if (permissionDetail !== null) {
+            return (React.createElement("div", { className: cssClass },
+                React.createElement("details", { open: true },
+                    React.createElement("summary", null,
+                        React.createElement("span", { className: "jp-ai-tool-call-item-icon" }, icon),
+                        ' ',
+                        React.createElement("div", { className: "jp-ai-tool-call-item-title" },
+                            displayTitle,
+                            toolCall.summary && (React.createElement("span", { className: "jp-ai-tool-call-item-summary" },
+                                '  ',
+                                toolCall.summary)))),
+                    React.createElement("div", { className: "jp-ai-tool-call-item-detail" }, permissionDetail)),
+                React.createElement(PermissionButtons, { toolCall: toolCall, trans: trans, toolCallPermissionDecision: toolCallPermissionDecision })));
+        }
+    }
+    if ((isCompleted || isFailed) && hasExpandableContent) {
+        return (React.createElement("details", { className: cssClass },
+            React.createElement("summary", null,
+                React.createElement("span", { className: "jp-ai-tool-call-item-icon" }, icon),
+                ' ',
+                React.createElement("div", { className: "jp-ai-tool-call-item-title" },
+                    displayTitle,
+                    toolCall.summary && (React.createElement("span", { className: "jp-ai-tool-call-item-summary" },
+                        '  ',
+                        toolCall.summary))),
+                React.createElement(PermissionLabel, { toolCall: toolCall })),
+            hasDiffs ? (React.createElement(ToolCallDiffView, { diffs: toolCall.diffs, trans: trans, openToolCallPath: openToolCallPath })) : (React.createElement(ToolCallDetail, { toolCall: toolCall, trans: trans }))));
+    }
+    if (isInProgress) {
+        return (React.createElement("div", { className: cssClass },
+            React.createElement("span", { className: "jp-ai-tool-call-item-icon" }, icon),
+            ' ',
+            React.createElement("div", { className: "jp-ai-tool-call-item-title" },
+                displayTitle,
+                toolCall.summary && (React.createElement("span", { className: "jp-ai-tool-call-item-summary" },
+                    '  ',
+                    toolCall.summary))),
+            React.createElement(PermissionButtons, { toolCall: toolCall, trans: trans, toolCallPermissionDecision: toolCallPermissionDecision })));
+    }
+    return (React.createElement("div", { className: cssClass },
+        React.createElement("span", { className: "jp-ai-tool-call-item-icon" }, icon),
+        React.createElement("div", { className: "jp-ai-tool-call-item-title" },
+            displayTitle,
+            toolCall.summary && (React.createElement("span", { className: "jp-ai-tool-call-item-summary" },
+                '  ',
+                toolCall.summary))),
+        React.createElement(PermissionLabel, { toolCall: toolCall })));
+}
+/**
+ * React component for rendering grouped tool calls.
+ */
+export const GroupedToolCalls = props => {
+    var _a;
+    const trans = (_a = props.trans) !== null && _a !== void 0 ? _a : nullTranslator.load('jupyterlab');
+    const { toolCalls } = props;
+    if (!toolCalls.length) {
+        return null;
+    }
+    return (React.createElement("div", { className: "jp-ai-tool-calls" }, toolCalls.map(toolCall => (React.createElement(ToolCallRow, { key: toolCall.toolCallId, toolCall: toolCall, trans: trans, openToolCallPath: props.openToolCallPath, toolCallPermissionDecision: props.toolCallPermissionDecision })))));
+};

package/lib/components/index.d.ts

@@ -1,3 +1,4 @@
 export * from './inline-diff';
 export * from './message-queue';
 export * from './tool-call';
+export * from './grouped-tool-calls';

package/lib/components/index.js

@@ -1,3 +1,4 @@
 export * from './inline-diff';
 export * from './message-queue';
 export * from './tool-call';
+export * from './grouped-tool-calls';

package/lib/factory.d.ts

@@ -2,7 +2,7 @@ import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import * as React from 'react';
 import { ComponentRegistry } from './registry';
-import { IComponentRegistry, IComponentsRendererFactory, RemoveQueuedMessage, ToolCallApproval } from './token';
+import { IComponentRegistry, IComponentsRendererFactory, OpenToolCallPath, RemoveQueuedMessage, ToolCallApproval, ToolCallPermissionDecision } from './token';
 type ReactRenderElement = Array<React.ReactElement<any>> | React.ReactElement<any>;
 /**
  * The options for the chat components renderer.
@@ -16,6 +16,14 @@ interface IComponentsRendererOptions extends IRenderMime.IRendererOptions {
      * The callback to remove a queued message.
      */
     removeQueuedMessage?: RemoveQueuedMessage;
+    /**
+     * The callback to submit a permission decision for grouped tool calls.
+     */
+    toolCallPermissionDecision?: ToolCallPermissionDecision;
+    /**
+     * The callback to open a path referenced by grouped tool calls.
+     */
+    openToolCallPath?: OpenToolCallPath;
     /**
      * The component registry.
      */
@@ -38,6 +46,8 @@ export declare class ComponentsRenderer extends ReactWidget implements IRenderMi
     private _mimeType;
     private _toolCallApproval?;
     private _removeQueuedMessage?;
+    private _toolCallPermissionDecision?;
+    private _openToolCallPath?;
     private _registry;
     private _data;
     private _metadata;
@@ -52,6 +62,8 @@ export declare class RendererFactory implements IComponentsRendererFactory {
     readonly registry: ComponentRegistry;
     toolCallApproval: ToolCallApproval;
     removeQueuedMessage: RemoveQueuedMessage;
+    toolCallPermissionDecision: ToolCallPermissionDecision;
+    openToolCallPath: OpenToolCallPath;
     constructor();
     createRenderer: (options: IRenderMime.IRendererOptions) => ComponentsRenderer;
 }

package/lib/factory.js

@@ -1,7 +1,7 @@
 import { nullTranslator } from '@jupyterlab/translation';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import * as React from 'react';
-import { InlineDiff, MessageQueue, ToolCall } from './components';
+import { GroupedToolCalls, InlineDiff, MessageQueue, ToolCall } from './components';
 import { ComponentRegistry } from './registry';
 /**
  * The default mime type for the extension.
@@ -27,6 +27,8 @@ export class ComponentsRenderer extends ReactWidget {
         this._mimeType = options.mimeType;
         this._toolCallApproval = options.toolCallApproval;
         this._removeQueuedMessage = options.removeQueuedMessage;
+        this._toolCallPermissionDecision = options.toolCallPermissionDecision;
+        this._openToolCallPath = options.openToolCallPath;
         this._registry = options.registry;
         this.addClass(CLASS_NAME);
     }
@@ -57,6 +59,11 @@ export class ComponentsRenderer extends ReactWidget {
         if (this._data === 'message-queue') {
             componentsProps.removeQueuedMessage = this._removeQueuedMessage;
         }
+        if (this._data === 'grouped-tool-calls') {
+            componentsProps.toolCallPermissionDecision =
+                this._toolCallPermissionDecision;
+            componentsProps.openToolCallPath = this._openToolCallPath;
+        }
         return React.createElement(Component, { ...componentsProps, trans: this._trans });
     }
 }
@@ -70,16 +77,21 @@ export class RendererFactory {
         this.defaultRank = 100;
         this.toolCallApproval = null;
         this.removeQueuedMessage = null;
+        this.toolCallPermissionDecision = null;
+        this.openToolCallPath = null;
         this.createRenderer = (options) => {
             return new ComponentsRenderer({
                 ...options,
                 toolCallApproval: this.toolCallApproval,
                 removeQueuedMessage: this.removeQueuedMessage,
+                toolCallPermissionDecision: this.toolCallPermissionDecision,
+                openToolCallPath: this.openToolCallPath,
                 registry: this.registry
             });
         };
         this.registry = new ComponentRegistry();
         this.registry.add('tool-call', ToolCall);
+        this.registry.add('grouped-tool-calls', GroupedToolCalls);
         this.registry.add('inline-diff', InlineDiff);
         this.registry.add('message-queue', MessageQueue);
     }