jupyter-chat-components 0.2.0 → 0.4.0

package/README.md

@@ -32,7 +32,32 @@ Other JupyterLab extensions can consume the `IComponentsRendererFactory` token a
 
 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.
+### `grouped-tool-calls`
+
+Renders grouped tool calls, including:
+
+- grouped in-progress, completed, and failed tool rows
+- expandable raw output and file path details
+- inline file diffs for edit operations
+- permission options for approval flows
+
+The component uses a camelCase metadata API.
+
+If your host extension wants the approval buttons to be interactive, set the renderer factory callbacks:
+
+```ts
+rendererFactory.toolCallPermissionDecision = async (
+  sessionId,
+  toolCallId,
+  optionId
+) => {
+  // submit the decision to your backend
+};
+
+rendererFactory.openToolCallPath = path => {
+  // optionally open the referenced file or resource
+};
+```
 
 ## Requirements
 

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

@@ -0,0 +1,38 @@
+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 output for display.
+ */
+export declare function formatToolCallOutput(rawOutput: unknown): string;
+/**
+ * Format tool input for display.
+ */
+export declare function formatToolCallInput(input: 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;
+/**
+ * Build the expandable detail lines shown for completed and failed tool calls.
+ */
+export declare function buildToolCallDetailsLines(toolCall: IToolCallsEntry): string[];
+/**
+ * React component for rendering grouped tool calls.
+ */
+export declare const GroupedToolCalls: React.FC<IGroupedToolCallsProps>;

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

@@ -0,0 +1,381 @@
+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;
+/** Tool kinds where expanded view shows file paths from locations. */
+const FILE_KINDS = new Set(['read', 'edit', 'delete', 'move']);
+/** Tool kinds where expanded view shows raw output. */
+const OUTPUT_KINDS = new Set(['search', 'execute', 'think', 'fetch']);
+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 output for display.
+ */
+export function formatToolCallOutput(rawOutput) {
+    if (typeof rawOutput === 'string') {
+        return rawOutput;
+    }
+    if (Array.isArray(rawOutput) &&
+        rawOutput.every(item => typeof item === 'object' &&
+            item !== null &&
+            typeof item.text === 'string')) {
+        return rawOutput.map(item => item.text).join('\n');
+    }
+    return JSON.stringify(rawOutput, null, 2);
+}
+/**
+ * Format tool input for display.
+ */
+export function formatToolCallInput(input) {
+    if (typeof input === 'string') {
+        return input;
+    }
+    if (typeof input !== 'object' || input === null || Array.isArray(input)) {
+        return JSON.stringify(input, null, 2);
+    }
+    const entries = Object.entries(input);
+    const isFlat = entries.every(([, value]) => typeof value === 'string' ||
+        typeof value === 'number' ||
+        typeof value === 'boolean');
+    if (isFlat) {
+        return entries.map(([key, value]) => `${key}: ${value}`).join('\n');
+    }
+    return JSON.stringify(input, 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 ? formatToolCallInput(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 formatToolCallInput(rawInput);
+    }
+    return null;
+}
+/**
+ * Build the expandable detail lines shown for completed and failed tool calls.
+ */
+export function buildToolCallDetailsLines(toolCall) {
+    const lines = [];
+    const { kind, locations, rawOutput } = toolCall;
+    if (kind && FILE_KINDS.has(kind) && (locations === null || locations === void 0 ? void 0 : locations.length)) {
+        lines.push(...locations.map(toServerRelativePath));
+    }
+    else if (kind &&
+        OUTPUT_KINDS.has(kind) &&
+        rawOutput !== null &&
+        rawOutput !== undefined) {
+        lines.push(formatToolCallOutput(rawOutput));
+    }
+    else if (typeof rawOutput === 'string') {
+        lines.push(rawOutput);
+    }
+    return lines;
+}
+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;
+    }, []);
+}
+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 isRejected = toolCall.permissionStatus === 'resolved' &&
+        !!((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.kind) === null || _b === void 0 ? void 0 : _b.includes('reject'));
+    const hasPendingPermission = toolCall.permissionStatus === 'pending';
+    const status = (_c = toolCall.status) !== null && _c !== void 0 ? _c : 'in_progress';
+    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 cssClass = `jp-ai-tool-call-item jp-ai-tool-call-item-${effectiveStatus}`;
+    const hasDiffs = !!((_d = toolCall.diffs) === null || _d === void 0 ? void 0 : _d.length);
+    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("em", null, displayTitle)),
+                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("em", null, displayTitle)),
+                    React.createElement("div", { className: "jp-ai-tool-call-item-detail" }, permissionDetail)),
+                React.createElement(PermissionButtons, { toolCall: toolCall, trans: trans, toolCallPermissionDecision: toolCallPermissionDecision })));
+        }
+    }
+    const detailLines = !hasDiffs && (isCompleted || isFailed)
+        ? buildToolCallDetailsLines(toolCall)
+        : [];
+    const hasExpandableContent = hasDiffs || detailLines.length > 0;
+    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),
+                ' ',
+                displayTitle,
+                React.createElement(PermissionLabel, { toolCall: toolCall })),
+            hasDiffs ? (React.createElement(ToolCallDiffView, { diffs: toolCall.diffs, trans: trans, openToolCallPath: openToolCallPath })) : (React.createElement("div", { className: "jp-ai-tool-call-item-detail" }, detailLines.join('\n')))));
+    }
+    if (isInProgress) {
+        return (React.createElement("div", { className: cssClass },
+            React.createElement("span", { className: "jp-ai-tool-call-item-icon" }, icon),
+            ' ',
+            React.createElement("em", null, displayTitle),
+            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),
+        " ",
+        displayTitle,
+        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,2 +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,2 +1,4 @@
 export * from './inline-diff';
+export * from './message-queue';
 export * from './tool-call';
+export * from './grouped-tool-calls';

package/lib/components/inline-diff.d.ts

@@ -1,11 +1,13 @@
 import { TranslationBundle } from '@jupyterlab/translation';
 import * as React from 'react';
-import { IInlineDiffMetadata } from '../token';
+import { IInlineDiff, IInlineDiffMetadata } from '../token';
 export interface IInlineDiffProps extends IInlineDiffMetadata {
     trans?: TranslationBundle;
 }
 export declare function getDiffFilename(path: string): string;
+export declare function getInlineDiffLabel(diff: IInlineDiff): string;
+export declare function getInlineDiffTitle(diff: IInlineDiff): string;
 /**
- * React component for rendering one or more inline file diffs.
+ * React component for rendering one or more inline diffs.
  */
 export declare const InlineDiff: React.FC<IInlineDiffProps>;

package/lib/components/inline-diff.js

@@ -7,6 +7,50 @@ const MAX_DIFF_LINES = 20;
 export function getDiffFilename(path) {
     return PathExt.basename(path);
 }
+function getNotebookCellLabel(target) {
+    if (typeof target.cellIndex === 'number') {
+        return `Cell ${target.cellIndex + 1}`;
+    }
+    if (target.cellId) {
+        return `Cell ${target.cellId}`;
+    }
+    return 'Notebook Cell';
+}
+function getInlineDiffPatchPath(diff) {
+    var _a;
+    const target = diff.target;
+    if (target.kind === 'file') {
+        return target.path;
+    }
+    return [target.notebookPath, (_a = target.cellId) !== null && _a !== void 0 ? _a : target.cellIndex]
+        .filter(value => value !== undefined && value !== '')
+        .join('#');
+}
+export function getInlineDiffLabel(diff) {
+    if (diff.label) {
+        return diff.label;
+    }
+    const target = diff.target;
+    if (target.kind === 'file') {
+        return getDiffFilename(target.path);
+    }
+    const notebookName = getDiffFilename(target.notebookPath);
+    const cellLabel = getNotebookCellLabel(target);
+    return [notebookName, cellLabel].join(' · ');
+}
+export function getInlineDiffTitle(diff) {
+    const target = diff.target;
+    if (target.kind === 'file') {
+        return target.path;
+    }
+    const cellLabel = getNotebookCellLabel(target);
+    const cellIdLabel = typeof target.cellIndex === 'number' && target.cellId
+        ? `Cell ID ${target.cellId}`
+        : null;
+    return [target.notebookPath, cellLabel, cellIdLabel]
+        .filter(part => part !== null && part !== undefined && part !== '')
+        .join(' · ');
+}
 function toLineInfo(type, text, key) {
     switch (type) {
         case 'added':
@@ -51,21 +95,23 @@ function buildDiffLinesFromHunk(hunk, hunkIndex) {
 }
 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 });
+    const patchPath = getInlineDiffPatchPath(diff);
+    const patch = structuredPatch(patchPath, patchPath, (_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;
     }, []);
 }
 function DiffBlock({ diff, trans }) {
-    const filename = getDiffFilename(diff.path);
+    const filename = getInlineDiffLabel(diff);
+    const title = getInlineDiffTitle(diff);
     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;
     return (React.createElement("div", { className: "jp-ai-inline-diff-block" },
-        React.createElement("div", { className: "jp-ai-inline-diff-header", title: diff.path }, filename),
+        React.createElement("div", { className: "jp-ai-inline-diff-header", title: title }, filename),
         React.createElement("div", { className: "jp-ai-inline-diff-content" },
             visibleLines.length ? (visibleLines.map(line => (React.createElement("div", { key: line.key, className: `jp-ai-inline-diff-line ${line.cssClass}` },
                 React.createElement("span", { className: "jp-ai-inline-diff-line-prefix" }, line.prefix),
@@ -74,9 +120,9 @@ function DiffBlock({ diff, trans }) {
             canTruncate && expanded && (React.createElement("button", { className: "jp-ai-inline-diff-toggle", onClick: () => setExpanded(false), type: "button" }, trans.__('Show less'))))));
 }
 /**
- * React component for rendering one or more inline file diffs.
+ * React component for rendering one or more inline diffs.
  */
 export const InlineDiff = ({ diffs, trans }) => {
     const transBundle = trans !== null && trans !== void 0 ? trans : nullTranslator.load('jupyterlab');
-    return (React.createElement("div", { className: "jp-ai-inline-diff-container" }, diffs.map((diff, index) => (React.createElement(DiffBlock, { key: `${diff.path}-${index}`, diff: diff, trans: transBundle })))));
+    return (React.createElement("div", { className: "jp-ai-inline-diff-container" }, diffs.map((diff, index) => (React.createElement(DiffBlock, { key: `${getInlineDiffPatchPath(diff)}-${index}`, diff: diff, trans: transBundle })))));
 };

package/lib/components/message-queue.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { IComponentProps, IMessageQueueMetadata, RemoveQueuedMessage } from '../token';
+/**
+ * Props for the MessageQueue component.
+ */
+export interface IMessageQueueProps extends IComponentProps, IMessageQueueMetadata {
+    removeQueuedMessage?: RemoveQueuedMessage;
+}
+/**
+ * React component that displays a list of queued messages by
+ * showing each pending message as a bubble in the chat
+ */
+export declare const MessageQueue: React.FC<IMessageQueueProps>;

package/lib/components/message-queue.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+/**
+ * React component that displays a list of queued messages by
+ * showing each pending message as a bubble in the chat
+ */
+export const MessageQueue = ({ messages, targetId, trans, removeQueuedMessage }) => {
+    if (!messages || messages.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: "jp-chat-message-queue" }, messages.map(msg => (React.createElement("div", { key: msg.id, className: "jp-chat-message-queue-bubble" },
+        React.createElement("span", { className: "jp-chat-message-queue-text" }, msg.body),
+        removeQueuedMessage && targetId && (React.createElement("button", { className: "jp-chat-message-queue-remove", onClick: () => removeQueuedMessage(targetId, msg.id), title: trans.__('Remove from queue'), type: "button" }, "\u2715")))))));
+};

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, 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.
@@ -12,6 +12,18 @@ interface IComponentsRendererOptions extends IRenderMime.IRendererOptions {
      * The callback to approve or reject a tool.
      */
     toolCallApproval?: ToolCallApproval;
+    /**
+     * 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.
      */
@@ -33,6 +45,9 @@ export declare class ComponentsRenderer extends ReactWidget implements IRenderMi
     private _trans;
     private _mimeType;
     private _toolCallApproval?;
+    private _removeQueuedMessage?;
+    private _toolCallPermissionDecision?;
+    private _openToolCallPath?;
     private _registry;
     private _data;
     private _metadata;
@@ -46,6 +61,9 @@ export declare class RendererFactory implements IComponentsRendererFactory {
     readonly defaultRank = 100;
     readonly registry: ComponentRegistry;
     toolCallApproval: ToolCallApproval;
+    removeQueuedMessage: RemoveQueuedMessage;
+    toolCallPermissionDecision: ToolCallPermissionDecision;
+    openToolCallPath: OpenToolCallPath;
     constructor();
     createRenderer: (options: IRenderMime.IRendererOptions) => ComponentsRenderer;
 }