jupyter-chat-components 0.4.1 → 0.6.0

package/README.md

@@ -1,6 +1,6 @@
 # jupyter_chat_components
 
-[![Github Actions Status](https://github.com/brichet/jupyter-chat-components/workflows/Build/badge.svg)](https://github.com/brichet/jupyter-chat-components/actions/workflows/build.yml)
+[![Github Actions Status](https://github.com/jupyter-ai-contrib/jupyter-chat-components/workflows/Build/badge.svg)](https://github.com/jupyter-ai-contrib/jupyter-chat-components/actions/workflows/build.yml)
 
 A library of React components designed for use in Jupyter chat interfaces, with a focus on AI-powered interactions. These components are intended to be integrated into JupyterLab extensions that provide chat functionality.
 
@@ -26,7 +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.
 
-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).
+For live end-to-end metadata examples, see the deployed demo notebook at [jupyter-ai-contrib.github.io/jupyter-chat-components/lab/index.html?path=components_demo.ipynb](https://jupyter-ai-contrib.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/error.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { IComponentProps } from '../token';
+export interface IErrorProps extends IComponentProps {
+    errorMessage: string;
+    title?: string;
+}
+export declare const ErrorMessage: React.FC<IErrorProps>;

package/lib/components/error.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { errorIcon } from '../icons';
+export const ErrorMessage = ({ errorMessage, title = 'Error' }) => {
+    return (React.createElement("div", { className: "jp-ai-error-message" },
+        React.createElement("div", { className: "jp-ai-error-icon" },
+            React.createElement(errorIcon.react, { tag: "span", width: "18px", height: "18px" })),
+        React.createElement("div", { className: "jp-ai-error-body" },
+            React.createElement("div", { className: "jp-ai-error-title" }, title),
+            React.createElement("div", { className: "jp-ai-error-text" }, errorMessage))));
+};

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

@@ -1,11 +1,9 @@
 import * as React from 'react';
-import { IComponentProps, IToolCallsEntry, IToolCallsMetadata, OpenToolCallPath, ToolCallPermissionDecision } from '../token';
+import { IComponentProps, IGroupedToolCallCallbacks, IToolCallsEntry, IToolCallsMetadata } from '../token';
 /**
  * Props for rendering grouped tool calls.
  */
-export interface IGroupedToolCallsProps extends IComponentProps, IToolCallsMetadata {
-    toolCallPermissionDecision?: ToolCallPermissionDecision;
-    openToolCallPath?: OpenToolCallPath;
+export interface IGroupedToolCallsProps extends IComponentProps, IToolCallsMetadata, IGroupedToolCallCallbacks {
 }
 /**
  * Convert an absolute filesystem path to a server-relative path when possible.

package/lib/components/index.d.ts

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

package/lib/components/index.js

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

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

@@ -1,13 +1,5 @@
 import * as React from 'react';
-import { IComponentProps, IMessageQueueMetadata, RemoveQueuedMessage } from '../token';
-/**
- * Props for the MessageQueue component.
- */
-export interface IMessageQueueProps extends IComponentProps, IMessageQueueMetadata {
-    removeQueuedMessage?: RemoveQueuedMessage;
+import { IComponentProps, IMessageQueueMetadata, IQueueMessageCallbacks } from '../token';
+export interface IMessageQueueProps extends IComponentProps, IMessageQueueMetadata, IQueueMessageCallbacks {
 }
-/**
- * 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

@@ -1,13 +1,128 @@
 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 }) => {
+import { PathExt } from '@jupyterlab/coreutils';
+import { checkIcon, closeIcon, editIcon, fileIcon, notebookIcon } from '@jupyterlab/ui-components';
+function AttachmentIcon({ type }) {
+    const Icon = type === 'notebook' ? notebookIcon.react : fileIcon.react;
+    return React.createElement(Icon, { tag: "span", className: "jp-chat-message-queue-attachment-icon" });
+}
+function attachmentName(attachment) {
+    return PathExt.basename(attachment.value) || attachment.value;
+}
+export const MessageQueue = ({ messages, targetId, trans, removeQueuedMessage, reorderQueuedMessages, editQueuedMessage }) => {
+    const [expanded, setExpanded] = React.useState(true);
+    const [draggedIndex, setDraggedIndex] = React.useState(null);
+    const [dropLineIndex, setDropLineIndex] = React.useState(null);
+    const [editingId, setEditingId] = React.useState(null);
+    const [editBody, setEditBody] = React.useState('');
+    const textareaRef = React.useRef(null);
+    React.useEffect(() => {
+        if (editingId && textareaRef.current) {
+            const ta = textareaRef.current;
+            ta.focus();
+            ta.selectionStart = ta.selectionEnd = ta.value.length;
+            ta.style.height = 'auto';
+            ta.style.height = ta.scrollHeight + 'px';
+        }
+    }, [editingId]);
     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")))))));
+    const canDrag = !!reorderQueuedMessages && !!targetId;
+    const handleDragStart = (index) => {
+        setDraggedIndex(index);
+    };
+    // Full-width row dragover: use Y midpoint to decide before or after this item.
+    const handleRowDragOver = (e, index) => {
+        e.preventDefault();
+        const rect = e.currentTarget.getBoundingClientRect();
+        setDropLineIndex(e.clientY < rect.top + rect.height / 2 ? index : index + 1);
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        if (draggedIndex === null ||
+            dropLineIndex === null ||
+            !reorderQueuedMessages ||
+            !targetId) {
+            setDraggedIndex(null);
+            setDropLineIndex(null);
+            return;
+        }
+        const reordered = [...messages];
+        const [moved] = reordered.splice(draggedIndex, 1);
+        const insertAt = draggedIndex < dropLineIndex ? dropLineIndex - 1 : dropLineIndex;
+        reordered.splice(insertAt, 0, moved);
+        reorderQueuedMessages(targetId, reordered.map(m => m.id));
+        setDraggedIndex(null);
+        setDropLineIndex(null);
+    };
+    const handleDragEnd = () => {
+        setDraggedIndex(null);
+        setDropLineIndex(null);
+    };
+    const handleEditStart = (id, body) => {
+        setEditingId(id);
+        setEditBody(body);
+    };
+    const handleEditSave = () => {
+        if (!editQueuedMessage || !targetId || editingId === null) {
+            return;
+        }
+        editQueuedMessage(targetId, editingId, editBody.trim());
+        setEditingId(null);
+    };
+    const handleEditCancel = () => {
+        setEditingId(null);
+    };
+    const handleEditKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleEditSave();
+        }
+        else if (e.key === 'Escape') {
+            handleEditCancel();
+        }
+    };
+    const handleTextareaChange = (e) => {
+        setEditBody(e.target.value);
+        e.target.style.height = 'auto';
+        e.target.style.height = e.target.scrollHeight + 'px';
+    };
+    return (React.createElement("div", { className: "jp-chat-message-queue" },
+        React.createElement("div", { className: "jp-chat-message-queue-header" },
+            React.createElement("span", { className: "jp-chat-message-queue-count" }, trans.__('%1 queued', messages.length)),
+            React.createElement("button", { className: "jp-chat-message-queue-toggle", onClick: () => setExpanded(e => !e), type: "button", title: expanded ? trans.__('Collapse queue') : trans.__('Expand queue'), "aria-expanded": expanded }, expanded ? '▲' : '▼')),
+        expanded && (React.createElement("div", { className: "jp-chat-message-queue-list", onDrop: canDrag ? handleDrop : undefined },
+            messages.map((msg, index) => (React.createElement(React.Fragment, { key: msg.id },
+                dropLineIndex === index && (React.createElement("div", { className: "jp-chat-message-queue-drop-line" })),
+                React.createElement("div", { className: "jp-chat-message-queue-row", onDragOver: canDrag ? e => handleRowDragOver(e, index) : undefined },
+                    React.createElement("div", { className: [
+                            'jp-chat-message-queue-bubble',
+                            draggedIndex === index
+                                ? 'jp-chat-message-queue-bubble-dragging'
+                                : ''
+                        ]
+                            .filter(Boolean)
+                            .join(' '), draggable: canDrag && editingId !== msg.id, onDragStart: canDrag && editingId !== msg.id
+                            ? () => handleDragStart(index)
+                            : undefined, onDragEnd: canDrag ? handleDragEnd : undefined, title: editingId === msg.id ? undefined : msg.body },
+                        canDrag && (React.createElement("span", { className: "jp-chat-message-queue-drag-handle", "aria-hidden": "true" })),
+                        React.createElement("div", { className: "jp-chat-message-queue-content" },
+                            editingId === msg.id ? (React.createElement("textarea", { ref: textareaRef, className: "jp-chat-message-queue-edit-textarea", value: editBody, onChange: handleTextareaChange, onKeyDown: handleEditKeyDown, rows: 1, title: trans.__('Enter to save, Escape to cancel, Shift+Enter for newline') })) : (msg.body && (React.createElement("span", { className: "jp-chat-message-queue-text" }, msg.body))),
+                            msg.attachments && msg.attachments.length > 0 && (React.createElement("div", { className: "jp-chat-message-queue-attachments" }, msg.attachments.map((attachment, i) => (React.createElement("span", { key: i, className: "jp-chat-message-queue-attachment-item", title: attachment.value },
+                                React.createElement(AttachmentIcon, { type: attachment.type }),
+                                attachmentName(attachment))))))),
+                        editQueuedMessage && targetId && (React.createElement("button", { className: "jp-chat-message-queue-edit", onClick: editingId === msg.id
+                                ? handleEditSave
+                                : () => handleEditStart(msg.id, msg.body), title: editingId === msg.id
+                                ? trans.__('Save')
+                                : trans.__('Edit message'), type: "button" }, editingId === msg.id ? (React.createElement(checkIcon.react, { tag: "span", className: "jp-chat-message-queue-btn-icon" })) : (React.createElement(editIcon.react, { tag: "span", className: "jp-chat-message-queue-btn-icon" })))),
+                        removeQueuedMessage && targetId && editingId !== msg.id && (React.createElement("button", { className: "jp-chat-message-queue-remove", onClick: () => removeQueuedMessage(targetId, msg.id), title: trans.__('Remove from queue'), type: "button" },
+                            React.createElement(closeIcon.react, { tag: "span", className: "jp-chat-message-queue-btn-icon" })))))))),
+            dropLineIndex === messages.length && (React.createElement("div", { className: "jp-chat-message-queue-drop-line" })),
+            React.createElement("div", { className: "jp-chat-message-queue-end-zone", onDragOver: canDrag
+                    ? e => {
+                        e.preventDefault();
+                        setDropLineIndex(messages.length);
+                    }
+                    : undefined })))));
 };

package/lib/components/tool-call.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IComponentProps, ToolCallApproval } from '../token';
+import { IComponentProps, IToolCallCallbacks } from '../token';
 /**
  * Tool call status types.
  */
@@ -19,8 +19,7 @@ export interface IToolCallMetadata {
 /**
  * Options for building tool call HTML.
  */
-export interface IToolCallProps extends IComponentProps, IToolCallMetadata {
-    toolCallApproval?: ToolCallApproval;
+export interface IToolCallProps extends IComponentProps, IToolCallMetadata, IToolCallCallbacks {
 }
 export declare function escapeHtml(value: string): string;
 /**
@@ -28,5 +27,7 @@ export declare function escapeHtml(value: string): string;
  *
  * Renders a collapsible details element showing tool execution information
  * including input, output, and approval buttons if needed.
+ *
+ * @deprecated - the grouped tool call should be used instead.
  */
 export declare const ToolCall: React.FC<IToolCallProps>;

package/lib/components/tool-call.js

@@ -66,6 +66,8 @@ const getStatusText = (status, trans) => {
  *
  * Renders a collapsible details element showing tool execution information
  * including input, output, and approval buttons if needed.
+ *
+ * @deprecated - the grouped tool call should be used instead.
  */
 export const ToolCall = ({ toolName, input, status, summary, output, targetId, approvalId, trans, toolCallApproval }) => {
     const config = STATUS_CONFIG[status];

package/lib/factory.d.ts

@@ -2,28 +2,24 @@ import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import * as React from 'react';
 import { ComponentRegistry } from './registry';
-import { IComponentRegistry, IComponentsRendererFactory, OpenToolCallPath, RemoveQueuedMessage, ToolCallApproval, ToolCallPermissionDecision } from './token';
+import { IComponentRegistry, IComponentsRendererFactory, IGroupedToolCallCallbacks, IQueueMessageCallbacks, IToolCallCallbacks } from './token';
 type ReactRenderElement = Array<React.ReactElement<any>> | React.ReactElement<any>;
 /**
  * The options for the chat components renderer.
  */
 interface IComponentsRendererOptions extends IRenderMime.IRendererOptions {
     /**
-     * The callback to approve or reject a tool.
+     * Callbacks for the ToolCall component.
      */
-    toolCallApproval?: ToolCallApproval;
+    toolCallCallbacks?: IToolCallCallbacks;
     /**
-     * The callback to remove a queued message.
+     * Callbacks for the GroupedToolCalls component.
      */
-    removeQueuedMessage?: RemoveQueuedMessage;
+    groupedToolCallCallbacks?: IGroupedToolCallCallbacks;
     /**
-     * The callback to submit a permission decision for grouped tool calls.
+     * Callbacks for the MessageQueue component.
      */
-    toolCallPermissionDecision?: ToolCallPermissionDecision;
-    /**
-     * The callback to open a path referenced by grouped tool calls.
-     */
-    openToolCallPath?: OpenToolCallPath;
+    queueMessageCallbacks?: IQueueMessageCallbacks;
     /**
      * The component registry.
      */
@@ -44,10 +40,9 @@ export declare class ComponentsRenderer extends ReactWidget implements IRenderMi
     protected render(): ReactRenderElement | null;
     private _trans;
     private _mimeType;
-    private _toolCallApproval?;
-    private _removeQueuedMessage?;
-    private _toolCallPermissionDecision?;
-    private _openToolCallPath?;
+    private _toolCallCallbacks?;
+    private _groupedToolCallCallbacks?;
+    private _queueMessageCallbacks?;
     private _registry;
     private _data;
     private _metadata;
@@ -60,10 +55,9 @@ export declare class RendererFactory implements IComponentsRendererFactory {
     readonly mimeTypes: string[];
     readonly defaultRank = 100;
     readonly registry: ComponentRegistry;
-    toolCallApproval: ToolCallApproval;
-    removeQueuedMessage: RemoveQueuedMessage;
-    toolCallPermissionDecision: ToolCallPermissionDecision;
-    openToolCallPath: OpenToolCallPath;
+    toolCallCallbacks?: IToolCallCallbacks;
+    groupedToolCallCallbacks?: IGroupedToolCallCallbacks;
+    queueMessageCallbacks?: IQueueMessageCallbacks;
     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 { GroupedToolCalls, InlineDiff, MessageQueue, ToolCall } from './components';
+import { GroupedToolCalls, InlineDiff, MessageQueue, ToolCall, ErrorMessage } from './components';
 import { ComponentRegistry } from './registry';
 /**
  * The default mime type for the extension.
@@ -25,10 +25,9 @@ export class ComponentsRenderer extends ReactWidget {
         this._metadata = null;
         this._trans = ((_a = options.translator) !== null && _a !== void 0 ? _a : nullTranslator).load('jupyterlab');
         this._mimeType = options.mimeType;
-        this._toolCallApproval = options.toolCallApproval;
-        this._removeQueuedMessage = options.removeQueuedMessage;
-        this._toolCallPermissionDecision = options.toolCallPermissionDecision;
-        this._openToolCallPath = options.openToolCallPath;
+        this._toolCallCallbacks = options.toolCallCallbacks;
+        this._groupedToolCallCallbacks = options.groupedToolCallCallbacks;
+        this._queueMessageCallbacks = options.queueMessageCallbacks;
         this._registry = options.registry;
         this.addClass(CLASS_NAME);
     }
@@ -52,17 +51,18 @@ export class ComponentsRenderer extends ReactWidget {
         if (!Component) {
             return null;
         }
-        const componentsProps = { ...this._metadata };
+        let componentsProps = { ...this._metadata };
         if (this._data === 'tool-call') {
-            componentsProps.toolCallApproval = this._toolCallApproval;
+            componentsProps = { ...componentsProps, ...this._toolCallCallbacks };
         }
-        if (this._data === 'message-queue') {
-            componentsProps.removeQueuedMessage = this._removeQueuedMessage;
+        else if (this._data === 'message-queue') {
+            componentsProps = { ...componentsProps, ...this._queueMessageCallbacks };
         }
-        if (this._data === 'grouped-tool-calls') {
-            componentsProps.toolCallPermissionDecision =
-                this._toolCallPermissionDecision;
-            componentsProps.openToolCallPath = this._openToolCallPath;
+        else if (this._data === 'grouped-tool-calls') {
+            componentsProps = {
+                ...componentsProps,
+                ...this._groupedToolCallCallbacks
+            };
         }
         return React.createElement(Component, { ...componentsProps, trans: this._trans });
     }
@@ -75,17 +75,12 @@ export class RendererFactory {
         this.safe = true;
         this.mimeTypes = [MIME_TYPE];
         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,
+                toolCallCallbacks: this.toolCallCallbacks,
+                groupedToolCallCallbacks: this.groupedToolCallCallbacks,
+                queueMessageCallbacks: this.queueMessageCallbacks,
                 registry: this.registry
             });
         };
@@ -94,5 +89,6 @@ export class RendererFactory {
         this.registry.add('grouped-tool-calls', GroupedToolCalls);
         this.registry.add('inline-diff', InlineDiff);
         this.registry.add('message-queue', MessageQueue);
+        this.registry.add('error', ErrorMessage);
     }
 }

package/lib/icons.d.ts

@@ -0,0 +1,2 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+export declare const errorIcon: LabIcon;

package/lib/icons.js

@@ -0,0 +1,5 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+export const errorIcon = new LabIcon({
+    name: 'jupyter-chat:error',
+    svgstr: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>'
+});

package/lib/index.d.ts

@@ -8,4 +8,5 @@ export * from './token';
 export * from './factory';
 export * from './registry';
 export * from './components';
+export * from './icons';
 export default factory;

package/lib/index.js

@@ -20,4 +20,5 @@ export * from './token';
 export * from './factory';
 export * from './registry';
 export * from './components';
+export * from './icons';
 export default factory;

package/lib/token.d.ts

@@ -11,17 +11,64 @@ export declare const IComponentsRendererFactory: Token<IComponentsRendererFactor
  */
 export type ToolCallApproval = ((targetId: string, approvalId: string, approve: boolean) => void) | null;
 /**
- * The callback to submit a tool-call permission decision.
+ * The callback to submit a tool-call permission decision (grouped tool call component).
  */
 export type ToolCallPermissionDecision = ((sessionId: string, toolCallId: string, optionId: string) => Promise<void> | void) | null;
+/**
+ * The callback to open a file or resource path referenced by a tool call (grouped tool call component).
+ */
+export type OpenToolCallPath = ((path: string) => void) | null;
 /**
  * The callback to remove a queued message.
  */
 export type RemoveQueuedMessage = ((targetId: string, messageId: string) => void) | null;
 /**
- * The callback to open a file or resource path referenced by a tool call.
+ * The callback to reorder queued messages. Receives the new ordered list of message IDs.
  */
-export type OpenToolCallPath = ((path: string) => void) | null;
+export type ReorderQueuedMessages = ((targetId: string, messageIds: string[]) => void) | null;
+/**
+ * The callback to edit the body of a queued message.
+ */
+export type EditQueuedMessage = ((targetId: string, messageId: string, newBody: string) => void) | null;
+/**
+ * Callbacks for the ToolCall component.
+ */
+export interface IToolCallCallbacks {
+    /**
+     * The callback to approve or reject a tool.
+     */
+    toolCallApproval?: ToolCallApproval;
+}
+/**
+ * Callbacks for the GroupedToolCalls component.
+ */
+export interface IGroupedToolCallCallbacks {
+    /**
+     * 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;
+}
+/**
+ * Callbacks for the MessageQueue component.
+ */
+export interface IQueueMessageCallbacks {
+    /**
+     * The callback to remove a queued message.
+     */
+    removeQueuedMessage?: RemoveQueuedMessage;
+    /**
+     * The callback to reorder queued messages.
+     */
+    reorderQueuedMessages?: ReorderQueuedMessages;
+    /**
+     * The callback to edit the body of a queued message.
+     */
+    editQueuedMessage?: EditQueuedMessage;
+}
 /**
  * The interface for components renderer factory.
  */
@@ -31,21 +78,17 @@ export interface IComponentsRendererFactory extends IRenderMime.IRendererFactory
      */
     registry: IComponentRegistry;
     /**
-     * The callback to approve or reject a tool.
-     */
-    toolCallApproval: ToolCallApproval;
-    /**
-     * The callback to remove a queued message.
+     * Grouped callbacks for the ToolCall component.
      */
-    removeQueuedMessage: RemoveQueuedMessage;
+    toolCallCallbacks?: IToolCallCallbacks;
     /**
-     * The callback to submit a permission decision for grouped tool calls.
+     * Grouped callbacks for the GroupedToolCalls component.
      */
-    toolCallPermissionDecision: ToolCallPermissionDecision;
+    groupedToolCallCallbacks?: IGroupedToolCallCallbacks;
     /**
-     * The callback to open a path referenced by grouped tool calls.
+     * Grouped callbacks for the MessageQueue component.
      */
-    openToolCallPath: OpenToolCallPath;
+    queueMessageCallbacks?: IQueueMessageCallbacks;
 }
 /**
  * The interface for the component registry.
@@ -256,12 +299,20 @@ export interface IInlineDiffMetadata {
      */
     diffs: IInlineDiff[];
 }
+/**
+ * A single attachment in a queued message.
+ */
+export interface IQueuedMessageAttachment {
+    type: 'file' | 'notebook';
+    value: string;
+}
 /**
  * A single queued message entry.
  */
 export interface IQueuedMessage {
     id: string;
     body: string;
+    attachments?: IQueuedMessageAttachment[];
 }
 /**
  * Metadata for the message queue component.

package/package.json

@@ -1,15 +1,15 @@
 {
     "name": "jupyter-chat-components",
-    "version": "0.4.1",
+    "version": "0.6.0",
     "description": "Components to displayed in jupyter chat",
     "keywords": [
         "jupyter",
         "jupyterlab",
         "jupyterlab-extension"
     ],
-    "homepage": "https://github.com/brichet/jupyter-chat-components",
+    "homepage": "https://github.com/jupyter-ai-contrib/jupyter-chat-components",
     "bugs": {
-        "url": "https://github.com/brichet/jupyter-chat-components/issues"
+        "url": "https://github.com/jupyter-ai-contrib/jupyter-chat-components/issues"
     },
     "license": "BSD-3-Clause",
     "author": {
@@ -26,7 +26,7 @@
     "style": "style/index.css",
     "repository": {
         "type": "git",
-        "url": "https://github.com/brichet/jupyter-chat-components.git"
+        "url": "https://github.com/jupyter-ai-contrib/jupyter-chat-components.git"
     },
     "scripts": {
         "build": "jlpm build:lib && jlpm build:labextension:dev",
@@ -61,6 +61,7 @@
         "@jupyterlab/rendermime": "^4.5.0",
         "@jupyterlab/rendermime-interfaces": "^3.8.0",
         "@jupyterlab/translation": "^4.5.0",
+        "@jupyterlab/ui-components": "^4.5.0",
         "@lumino/coreutils": "^2.2.2",
         "@lumino/widgets": "^2.1.0",
         "diff": "^8.0.0"

package/src/components/error.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { IComponentProps } from '../token';
+import { errorIcon } from '../icons';
+
+export interface IErrorProps extends IComponentProps {
+  errorMessage: string;
+  title?: string;
+}
+
+export const ErrorMessage: React.FC<IErrorProps> = ({
+  errorMessage,
+  title = 'Error'
+}) => {
+  return (
+    <div className="jp-ai-error-message">
+      <div className="jp-ai-error-icon">
+        <errorIcon.react tag="span" width="18px" height="18px" />
+      </div>
+      <div className="jp-ai-error-body">
+        <div className="jp-ai-error-title">{title}</div>
+        <div className="jp-ai-error-text">{errorMessage}</div>
+      </div>
+    </div>
+  );
+};

package/src/components/grouped-tool-calls.tsx

@@ -7,6 +7,7 @@ import type { StructuredPatchHunk } from 'diff';
 
 import {
   IComponentProps,
+  IGroupedToolCallCallbacks,
   IToolCallDiff,
   IToolCallsEntry,
   IToolCallsMetadata,
@@ -46,10 +47,7 @@ interface IDiffLineInfo {
  * Props for rendering grouped tool calls.
  */
 export interface IGroupedToolCallsProps
-  extends IComponentProps, IToolCallsMetadata {
-  toolCallPermissionDecision?: ToolCallPermissionDecision;
-  openToolCallPath?: OpenToolCallPath;
-}
+  extends IComponentProps, IToolCallsMetadata, IGroupedToolCallCallbacks {}
 
 function getConfiguredServerRoot(): string | null {
   const rootUri = PageConfig.getOption('rootUri');

package/src/components/index.ts

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