jupyter-chat-components 0.1.3 → 0.3.0

package/README.md

@@ -2,7 +2,37 @@
 
 [![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)
 
-Components to displayed in jupyter chat
+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.
+
+## MIME renderer
+
+Components are exposed through a custom MIME type: `application/vnd.jupyter.chat.components`.
+
+This extension registers a MIME renderer factory with JupyterLab's render MIME registry. To display a component, produce output with the MIME type above, where:
+
+- the **data** value is the component name (e.g. `"tool-call"`)
+- the **metadata** contains the props to pass to the component
+
+The MIME renderer looks up the component name in the factory's registry and renders the corresponding React component.
+
+## Component registry
+
+The registry is available directly on the `IComponentsRendererFactory` token as the `registry` property. It maps component names to React components and exposes the following methods:
+
+- `add(name, component)` — register a new React component under a unique name
+- `get(name)` — retrieve a registered component by name
+- `has(name)` — check whether a component is registered
+- `getNames()` — list all registered component names
+
+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.
 
 ## Requirements
 

package/lib/components/index.d.ts

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

package/lib/components/index.js

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

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

@@ -0,0 +1,13 @@
+import { TranslationBundle } from '@jupyterlab/translation';
+import * as React from 'react';
+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 diffs.
+ */
+export declare const InlineDiff: React.FC<IInlineDiffProps>;

package/lib/components/inline-diff.js

@@ -0,0 +1,128 @@
+import { PathExt } from '@jupyterlab/coreutils';
+import { nullTranslator } from '@jupyterlab/translation';
+import * as React from 'react';
+import { structuredPatch } from 'diff';
+/** Maximum number of rendered lines before truncation. */
+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':
+            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 toLineInfo('added', text, key);
+        }
+        if (prefix === '-') {
+            return toLineInfo('removed', text, key);
+        }
+        return toLineInfo('context', text, key);
+    });
+}
+function buildDiffLines(diff) {
+    var _a;
+    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 = 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: 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),
+                React.createElement("span", { className: "jp-ai-inline-diff-line-text" }, line.text))))) : (React.createElement("div", { className: "jp-ai-inline-diff-empty" }, trans.__('No changes'))),
+            canTruncate && !expanded && (React.createElement("button", { className: "jp-ai-inline-diff-toggle", onClick: () => setExpanded(true), type: "button" }, trans.__('... %1 more lines', hiddenCount))),
+            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 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: `${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/components/tool-call.d.ts

@@ -1,19 +1,28 @@
-import { TranslationBundle } from '@jupyterlab/translation';
 import * as React from 'react';
-import { IToolCallMetadata, ToolCallApproval } from '../token';
+import { IComponentProps, ToolCallApproval } from '../token';
+/**
+ * Tool call status types.
+ */
+export type ToolCallStatus = 'pending' | 'awaiting_approval' | 'approved' | 'rejected' | 'completed' | 'error';
 /**
  * Options for building tool call HTML.
  */
-export interface IToolCallHtmlOptions extends IToolCallMetadata {
-    trans: TranslationBundle;
-    toolCallApproval: ToolCallApproval;
+export interface IToolCallMetadata {
+    toolName: string;
+    input: string;
+    status: ToolCallStatus;
+    summary?: string;
+    output?: string;
+    targetId?: string;
+    approvalId?: string;
 }
-export declare function escapeHtml(value: string): string;
 /**
- * React component props for ToolCall.
+ * Options for building tool call HTML.
  */
-export interface IToolCallProps extends IToolCallHtmlOptions {
+export interface IToolCallProps extends IComponentProps, IToolCallMetadata {
+    toolCallApproval?: ToolCallApproval;
 }
+export declare function escapeHtml(value: string): string;
 /**
  * React functional component for displaying a tool call.
  *

package/lib/components/tool-call.js

@@ -71,6 +71,9 @@ export const ToolCall = ({ toolName, input, status, summary, output, targetId, a
     const config = STATUS_CONFIG[status];
     const statusText = getStatusText(status, trans);
     const resultLabel = status === 'error' ? trans.__('Error') : trans.__('Result');
+    if (status === 'awaiting_approval' && !toolCallApproval) {
+        console.error('The tool call has no approval function, approval, it will not work as expected');
+    }
     return (React.createElement("details", { className: `jp-ai-tool-call ${config.cssClass}`, open: config.open },
         React.createElement("summary", { className: "jp-ai-tool-header" },
             React.createElement("div", { className: "jp-ai-tool-icon" }, "\u26A1"),

package/lib/factory.d.ts

@@ -1,7 +1,8 @@
 import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import * as React from 'react';
-import { IComponentsRendererFactory, ToolCallApproval } from './token';
+import { ComponentRegistry } from './registry';
+import { IComponentRegistry, IComponentsRendererFactory, RemoveQueuedMessage, ToolCallApproval } from './token';
 type ReactRenderElement = Array<React.ReactElement<any>> | React.ReactElement<any>;
 /**
  * The options for the chat components renderer.
@@ -10,10 +11,18 @@ interface IComponentsRendererOptions extends IRenderMime.IRendererOptions {
     /**
      * The callback to approve or reject a tool.
      */
-    toolCallApproval: ToolCallApproval;
+    toolCallApproval?: ToolCallApproval;
+    /**
+     * The callback to remove a queued message.
+     */
+    removeQueuedMessage?: RemoveQueuedMessage;
+    /**
+     * The component registry.
+     */
+    registry: IComponentRegistry;
 }
 /**
- * A widget for rendering .
+ * A widget for rendering components from mime bundle.
  */
 export declare class ComponentsRenderer extends ReactWidget implements IRenderMime.IRenderer {
     /**
@@ -27,7 +36,9 @@ export declare class ComponentsRenderer extends ReactWidget implements IRenderMi
     protected render(): ReactRenderElement | null;
     private _trans;
     private _mimeType;
-    private _toolCallApproval;
+    private _toolCallApproval?;
+    private _removeQueuedMessage?;
+    private _registry;
     private _data;
     private _metadata;
 }
@@ -38,7 +49,10 @@ export declare class RendererFactory implements IComponentsRendererFactory {
     readonly safe = true;
     readonly mimeTypes: string[];
     readonly defaultRank = 100;
+    readonly registry: ComponentRegistry;
     toolCallApproval: ToolCallApproval;
+    removeQueuedMessage: RemoveQueuedMessage;
+    constructor();
     createRenderer: (options: IRenderMime.IRendererOptions) => ComponentsRenderer;
 }
 export {};

package/lib/factory.js

@@ -1,7 +1,8 @@
 import { nullTranslator } from '@jupyterlab/translation';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import * as React from 'react';
-import { ToolCall } from './components/tool-call';
+import { InlineDiff, MessageQueue, ToolCall } from './components';
+import { ComponentRegistry } from './registry';
 /**
  * The default mime type for the extension.
  */
@@ -11,7 +12,7 @@ const MIME_TYPE = 'application/vnd.jupyter.chat.components';
  */
 const CLASS_NAME = 'jp-RenderedChatComponents';
 /**
- * A widget for rendering .
+ * A widget for rendering components from mime bundle.
  */
 export class ComponentsRenderer extends ReactWidget {
     /**
@@ -25,26 +26,38 @@ export class ComponentsRenderer extends ReactWidget {
         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._registry = options.registry;
         this.addClass(CLASS_NAME);
     }
     /**
      * Render  into this widget's node.
      */
     async renderModel(model) {
+        var _a;
         this._data = model.data[this._mimeType];
-        this._metadata = { ...model.metadata };
+        const metadata = model.metadata;
+        this._metadata = (_a = metadata[this._mimeType]) !== null && _a !== void 0 ? _a : {
+            ...metadata
+        };
         return this.update();
     }
     render() {
+        if (!this._data) {
+            return null;
+        }
+        const Component = this._registry.get(this._data);
+        if (!Component) {
+            return null;
+        }
+        const componentsProps = { ...this._metadata };
         if (this._data === 'tool-call') {
-            const toolCallOptions = {
-                ...this._metadata,
-                trans: this._trans,
-                toolCallApproval: this._toolCallApproval
-            };
-            return React.createElement(ToolCall, { ...toolCallOptions });
+            componentsProps.toolCallApproval = this._toolCallApproval;
+        }
+        if (this._data === 'message-queue') {
+            componentsProps.removeQueuedMessage = this._removeQueuedMessage;
         }
-        return null;
+        return React.createElement(Component, { ...componentsProps, trans: this._trans });
     }
 }
 /**
@@ -56,11 +69,18 @@ export class RendererFactory {
         this.mimeTypes = [MIME_TYPE];
         this.defaultRank = 100;
         this.toolCallApproval = null;
+        this.removeQueuedMessage = null;
         this.createRenderer = (options) => {
             return new ComponentsRenderer({
                 ...options,
-                toolCallApproval: this.toolCallApproval
+                toolCallApproval: this.toolCallApproval,
+                removeQueuedMessage: this.removeQueuedMessage,
+                registry: this.registry
             });
         };
+        this.registry = new ComponentRegistry();
+        this.registry.add('tool-call', ToolCall);
+        this.registry.add('inline-diff', InlineDiff);
+        this.registry.add('message-queue', MessageQueue);
     }
 }

package/lib/index.d.ts

@@ -6,4 +6,6 @@ import { IComponentsRendererFactory } from './token';
 declare const factory: JupyterFrontEndPlugin<IComponentsRendererFactory>;
 export * from './token';
 export * from './factory';
+export * from './registry';
+export * from './components';
 export default factory;

package/lib/index.js

@@ -1,6 +1,6 @@
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
-import { IComponentsRendererFactory } from './token';
 import { RendererFactory } from './factory';
+import { IComponentsRendererFactory } from './token';
 /**
  * The plugin providing the chat component renderer.
  */
@@ -18,4 +18,6 @@ const factory = {
 };
 export * from './token';
 export * from './factory';
+export * from './registry';
+export * from './components';
 export default factory;

package/lib/registry.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { IComponentRegistry } from './token';
+/**
+ * A registry for React components.
+ */
+export declare class ComponentRegistry implements IComponentRegistry {
+    /**
+     * Register a React component.
+     *
+     * @param name - The unique name/identifier for the component
+     * @param component - The React component
+     */
+    add(name: string, component: React.ComponentType<any>): void;
+    /**
+     * Get a registered component by name.
+     *
+     * @param name - The name of the component
+     * @returns the React component, or undefined if not found
+     */
+    get(name: string): React.ComponentType<any> | undefined;
+    /**
+     * Check if a component is registered.
+     *
+     * @param name - The name of the component
+     * @returns whether the component is registered
+     */
+    has(name: string): boolean;
+    /**
+     * Get all registered component names.
+     *
+     * @returns the component names
+     */
+    getNames(): string[];
+    private _components;
+}

package/lib/registry.js

@@ -0,0 +1,46 @@
+/**
+ * A registry for React components.
+ */
+export class ComponentRegistry {
+    constructor() {
+        this._components = new Map();
+    }
+    /**
+     * Register a React component.
+     *
+     * @param name - The unique name/identifier for the component
+     * @param component - The React component
+     */
+    add(name, component) {
+        if (this._components.has(name)) {
+            console.warn(`Component '${name}' is already registered and will be overwritten.`);
+        }
+        this._components.set(name, component);
+    }
+    /**
+     * Get a registered component by name.
+     *
+     * @param name - The name of the component
+     * @returns the React component, or undefined if not found
+     */
+    get(name) {
+        return this._components.get(name);
+    }
+    /**
+     * Check if a component is registered.
+     *
+     * @param name - The name of the component
+     * @returns whether the component is registered
+     */
+    has(name) {
+        return this._components.has(name);
+    }
+    /**
+     * Get all registered component names.
+     *
+     * @returns the component names
+     */
+    getNames() {
+        return Array.from(this._components.keys());
+    }
+}

package/lib/token.d.ts

@@ -1,5 +1,7 @@
 import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
+import { TranslationBundle } from '@jupyterlab/translation';
 import { Token } from '@lumino/coreutils';
+import * as React from 'react';
 /**
  * The token providing the chat components renderer.
  */
@@ -8,28 +10,147 @@ export declare const IComponentsRendererFactory: Token<IComponentsRendererFactor
  * The callback to approve or reject a tool.
  */
 export type ToolCallApproval = ((targetId: string, approvalId: string, approve: boolean) => void) | null;
+/**
+ * The callback to remove a queued message.
+ */
+export type RemoveQueuedMessage = ((targetId: string, messageId: string) => void) | null;
 /**
  * The interface for components renderer factory.
  */
 export interface IComponentsRendererFactory extends IRenderMime.IRendererFactory {
+    /**
+     * The registry of React components available for rendering.
+     */
+    registry: IComponentRegistry;
     /**
      * The callback to approve or reject a tool.
      */
     toolCallApproval: ToolCallApproval;
+    /**
+     * The callback to remove a queued message.
+     */
+    removeQueuedMessage: RemoveQueuedMessage;
+}
+/**
+ * The interface for the component registry.
+ */
+export interface IComponentRegistry {
+    /**
+     * Register a React component.
+     *
+     * @param name - The unique name/identifier for the component
+     * @param component - The React component
+     */
+    add(name: string, component: React.ComponentType<any>): void;
+    /**
+     * Get a registered component by name.
+     *
+     * @param name - The name of the component
+     * @returns The React component, or undefined if not found
+     */
+    get(name: string): React.ComponentType<any> | undefined;
+    /**
+     * Check if a component is registered.
+     *
+     * @param name - The name of the component
+     * @returns True if the component is registered
+     */
+    has(name: string): boolean;
+    /**
+     * Get all registered component names.
+     *
+     * @returns Array of component names
+     */
+    getNames(): string[];
+}
+/**
+ * The minimal required properties for the component.
+ */
+export interface IComponentProps {
+    /**
+     * The translation bundle.
+     */
+    trans: TranslationBundle;
 }
 /**
- * Tool call status types.
+ * A file diff target.
  */
-export type ToolCallStatus = 'pending' | 'awaiting_approval' | 'approved' | 'rejected' | 'completed' | 'error';
+export interface IInlineDiffFileTarget {
+    /**
+     * Discriminator for a regular file diff target.
+     */
+    kind: 'file';
+    /**
+     * Path of the file being diffed.
+     */
+    path: string;
+}
+/**
+ * A notebook cell diff target.
+ */
+export interface IInlineDiffNotebookCellTarget {
+    /**
+     * Discriminator for a notebook cell source diff target.
+     */
+    kind: 'cell';
+    /**
+     * Path of the notebook containing the cell.
+     */
+    notebookPath: string;
+    /**
+     * Stable cell identifier, when available from the producer.
+     */
+    cellId?: string;
+    /**
+     * Zero-based notebook cell index used for the default display label.
+     */
+    cellIndex?: number;
+}
+/**
+ * A supported inline diff target.
+ */
+export type IInlineDiffTarget = IInlineDiffFileTarget | IInlineDiffNotebookCellTarget;
+/**
+ * A single inline diff entry.
+ */
+export interface IInlineDiff {
+    /**
+     * Structured target metadata.
+     */
+    target: IInlineDiffTarget;
+    /**
+     * Optional explicit label for the diff header.
+     */
+    label?: string;
+    /**
+     * Updated text content for the diff target.
+     */
+    newText: string;
+    /**
+     * Previous text content for the diff target.
+     */
+    oldText?: string;
+}
+/**
+ * Metadata for rendering inline diffs.
+ */
+export interface IInlineDiffMetadata {
+    /**
+     * List of inline diff entries to render.
+     */
+    diffs: IInlineDiff[];
+}
+/**
+ * A single queued message entry.
+ */
+export interface IQueuedMessage {
+    id: string;
+    body: string;
+}
 /**
- * Options for building tool call HTML.
+ * Metadata for the message queue component.
  */
-export interface IToolCallMetadata {
-    toolName: string;
-    input: string;
-    status: ToolCallStatus;
-    summary?: string;
-    output?: string;
+export interface IMessageQueueMetadata {
+    messages: IQueuedMessage[];
     targetId?: string;
-    approvalId?: string;
 }