jupyter-chat-components 0.1.2 → 0.2.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/__tests__/jupyter_ai_chat_components.spec.d.ts

@@ -0,0 +1,3 @@
+/**
+ * Example of [Jest](https://jestjs.io/docs/getting-started) unit tests
+ */

package/lib/__tests__/jupyter_ai_chat_components.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+/**
+ * Example of [Jest](https://jestjs.io/docs/getting-started) unit tests
+ */
+describe('jupyter-chat-components', () => {
+    it('should be tested', () => {
+        expect(1 + 1).toEqual(2);
+    });
+});

package/lib/components/index.d.ts

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

package/lib/components/index.js

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

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

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

package/lib/components/inline-diff.js

@@ -0,0 +1,82 @@
+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 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 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 DiffBlock({ diff, trans }) {
+    const filename = getDiffFilename(diff.path);
+    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-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 file 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 })))));
+};

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+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 IToolCallMetadata {
+    toolName: string;
+    input: string;
+    status: ToolCallStatus;
+    summary?: string;
+    output?: string;
+    targetId?: string;
+    approvalId?: string;
+}
+/**
+ * Options for building tool call HTML.
+ */
+export interface IToolCallProps extends IComponentProps, IToolCallMetadata {
+    toolCallApproval?: ToolCallApproval;
+}
+export declare function escapeHtml(value: string): string;
+/**
+ * React functional component for displaying a tool call.
+ *
+ * Renders a collapsible details element showing tool execution information
+ * including input, output, and approval buttons if needed.
+ */
+export declare const ToolCall: React.FC<IToolCallProps>;

package/lib/components/tool-call.js

@@ -0,0 +1,96 @@
+import * as React from 'react';
+const STATUS_CONFIG = {
+    pending: {
+        cssClass: 'jp-ai-tool-pending',
+        statusClass: 'jp-ai-tool-status-pending'
+    },
+    awaiting_approval: {
+        cssClass: 'jp-ai-tool-pending',
+        statusClass: 'jp-ai-tool-status-approval',
+        open: true
+    },
+    approved: {
+        cssClass: 'jp-ai-tool-pending',
+        statusClass: 'jp-ai-tool-status-completed'
+    },
+    rejected: {
+        cssClass: 'jp-ai-tool-error',
+        statusClass: 'jp-ai-tool-status-error'
+    },
+    completed: {
+        cssClass: 'jp-ai-tool-completed',
+        statusClass: 'jp-ai-tool-status-completed'
+    },
+    error: {
+        cssClass: 'jp-ai-tool-error',
+        statusClass: 'jp-ai-tool-status-error'
+    }
+};
+export function escapeHtml(value) {
+    // Prefer the same native escaping approach used in JupyterLab itself
+    // (e.g. `@jupyterlab/completer`).
+    if (typeof document !== 'undefined') {
+        const node = document.createElement('span');
+        node.textContent = value;
+        return node.innerHTML;
+    }
+    // Fallback
+    return value
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+/**
+ * Returns the translated status text for a given tool status.
+ */
+const getStatusText = (status, trans) => {
+    switch (status) {
+        case 'pending':
+            return trans.__('Running...');
+        case 'awaiting_approval':
+            return trans.__('Awaiting Approval');
+        case 'approved':
+            return trans.__('Approved - Executing...');
+        case 'rejected':
+            return trans.__('Rejected');
+        case 'completed':
+            return trans.__('Completed');
+        case 'error':
+            return trans.__('Error');
+    }
+};
+/**
+ * React functional component for displaying a tool call.
+ *
+ * Renders a collapsible details element showing tool execution information
+ * including input, output, and approval buttons if needed.
+ */
+export const ToolCall = ({ toolName, input, status, summary, output, targetId, approvalId, trans, toolCallApproval }) => {
+    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"),
+            React.createElement("div", { className: "jp-ai-tool-title" },
+                toolName,
+                summary && React.createElement("span", { className: "jp-ai-tool-summary" }, summary)),
+            React.createElement("div", { className: `jp-ai-tool-status ${config.statusClass}` }, statusText)),
+        React.createElement("div", { className: "jp-ai-tool-body" },
+            React.createElement("div", { className: "jp-ai-tool-section" },
+                React.createElement("div", { className: "jp-ai-tool-label" }, trans.__('Input')),
+                React.createElement("pre", { className: "jp-ai-tool-code" },
+                    React.createElement("code", null, input))),
+            status === 'awaiting_approval' && approvalId && targetId && (React.createElement("div", { className: `jp-ai-tool-approval-buttons jp-ai-approval-id--${approvalId}` },
+                React.createElement("button", { className: "jp-ai-approval-btn jp-ai-approval-approve", onClick: () => toolCallApproval === null || toolCallApproval === void 0 ? void 0 : toolCallApproval(targetId, approvalId, true) }, trans.__('Approve')),
+                React.createElement("button", { className: "jp-ai-approval-btn jp-ai-approval-reject", onClick: () => toolCallApproval === null || toolCallApproval === void 0 ? void 0 : toolCallApproval(targetId, approvalId, false) }, trans.__('Reject')))),
+            output !== undefined && (React.createElement("div", { className: "jp-ai-tool-section" },
+                React.createElement("div", { className: "jp-ai-tool-label" }, resultLabel),
+                React.createElement("pre", { className: "jp-ai-tool-code" },
+                    React.createElement("code", null, output)))))));
+};

package/lib/factory.d.ts

@@ -0,0 +1,52 @@
+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';
+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.
+     */
+    toolCallApproval?: ToolCallApproval;
+    /**
+     * The component registry.
+     */
+    registry: IComponentRegistry;
+}
+/**
+ * A widget for rendering components from mime bundle.
+ */
+export declare class ComponentsRenderer extends ReactWidget implements IRenderMime.IRenderer {
+    /**
+     * Construct a new output widget.
+     */
+    constructor(options: IComponentsRendererOptions);
+    /**
+     * Render  into this widget's node.
+     */
+    renderModel(model: IRenderMime.IMimeModel): Promise<void>;
+    protected render(): ReactRenderElement | null;
+    private _trans;
+    private _mimeType;
+    private _toolCallApproval?;
+    private _registry;
+    private _data;
+    private _metadata;
+}
+/**
+ * A mime renderer factory for chat components.
+ */
+export declare class RendererFactory implements IComponentsRendererFactory {
+    readonly safe = true;
+    readonly mimeTypes: string[];
+    readonly defaultRank = 100;
+    readonly registry: ComponentRegistry;
+    toolCallApproval: ToolCallApproval;
+    constructor();
+    createRenderer: (options: IRenderMime.IRendererOptions) => ComponentsRenderer;
+}
+export {};

package/lib/factory.js

@@ -0,0 +1,79 @@
+import { nullTranslator } from '@jupyterlab/translation';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import * as React from 'react';
+import { InlineDiff, ToolCall } from './components';
+import { ComponentRegistry } from './registry';
+/**
+ * The default mime type for the extension.
+ */
+const MIME_TYPE = 'application/vnd.jupyter.chat.components';
+/**
+ * The class name added to the extension.
+ */
+const CLASS_NAME = 'jp-RenderedChatComponents';
+/**
+ * A widget for rendering components from mime bundle.
+ */
+export class ComponentsRenderer extends ReactWidget {
+    /**
+     * Construct a new output widget.
+     */
+    constructor(options) {
+        var _a;
+        super();
+        this._data = null;
+        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._registry = options.registry;
+        this.addClass(CLASS_NAME);
+    }
+    /**
+     * Render  into this widget's node.
+     */
+    async renderModel(model) {
+        var _a;
+        this._data = model.data[this._mimeType];
+        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') {
+            componentsProps.toolCallApproval = this._toolCallApproval;
+        }
+        return React.createElement(Component, { ...componentsProps, trans: this._trans });
+    }
+}
+/**
+ * A mime renderer factory for chat components.
+ */
+export class RendererFactory {
+    constructor() {
+        this.safe = true;
+        this.mimeTypes = [MIME_TYPE];
+        this.defaultRank = 100;
+        this.toolCallApproval = null;
+        this.createRenderer = (options) => {
+            return new ComponentsRenderer({
+                ...options,
+                toolCallApproval: this.toolCallApproval,
+                registry: this.registry
+            });
+        };
+        this.registry = new ComponentRegistry();
+        this.registry.add('tool-call', ToolCall);
+        this.registry.add('inline-diff', InlineDiff);
+    }
+}

package/lib/index.d.ts

@@ -1,32 +1,11 @@
 import { JupyterFrontEndPlugin } from '@jupyterlab/application';
-import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
-import { Widget } from '@lumino/widgets';
-import { IComponentsRendererFactory, ToolCallApproval } from './token';
+import { IComponentsRendererFactory } from './token';
 /**
- * The options for the chat components renderer.
+ * The plugin providing the chat component renderer.
  */
-interface IComponentsRendererOptions extends IRenderMime.IRendererOptions {
-    /**
-     * The callback to approve or reject a tool.
-     */
-    toolCallApproval: ToolCallApproval;
-}
-/**
- * A widget for rendering .
- */
-export declare class ComponentsRenderer extends Widget implements IRenderMime.IRenderer {
-    /**
-     * Construct a new output widget.
-     */
-    constructor(options: IComponentsRendererOptions);
-    /**
-     * Render  into this widget's node.
-     */
-    renderModel(model: IRenderMime.IMimeModel): Promise<void>;
-    private _trans;
-    private _mimeType;
-    private _toolCallApproval;
-}
-declare const plugin: JupyterFrontEndPlugin<IComponentsRendererFactory>;
+declare const factory: JupyterFrontEndPlugin<IComponentsRendererFactory>;
 export * from './token';
-export default plugin;
+export * from './factory';
+export * from './registry';
+export * from './components';
+export default factory;

package/lib/index.js

@@ -1,67 +1,11 @@
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
-import { nullTranslator } from '@jupyterlab/translation';
-import { Widget } from '@lumino/widgets';
+import { RendererFactory } from './factory';
 import { IComponentsRendererFactory } from './token';
-import { buildToolCallHtml } from './tool-call';
 /**
- * The default mime type for the extension.
+ * The plugin providing the chat component renderer.
  */
-const MIME_TYPE = 'application/vnd.jupyter.chat.components';
-/**
- * The class name added to the extension.
- */
-const CLASS_NAME = 'jp-RenderedChatComponents';
-/**
- * A widget for rendering .
- */
-export class ComponentsRenderer extends Widget {
-    /**
-     * Construct a new output widget.
-     */
-    constructor(options) {
-        var _a;
-        super();
-        this._trans = ((_a = options.translator) !== null && _a !== void 0 ? _a : nullTranslator).load('jupyterlab');
-        this._mimeType = options.mimeType;
-        this._toolCallApproval = options.toolCallApproval;
-        this.addClass(CLASS_NAME);
-    }
-    /**
-     * Render  into this widget's node.
-     */
-    renderModel(model) {
-        const data = model.data[this._mimeType];
-        const metadata = { ...model.metadata };
-        if (data === 'tool-call') {
-            const toolCallOptions = {
-                ...metadata,
-                trans: this._trans,
-                toolCallApproval: this._toolCallApproval
-            };
-            this.node.appendChild(buildToolCallHtml(toolCallOptions));
-        }
-        return Promise.resolve();
-    }
-}
-/**
- * A mime renderer factory for chat components.
- */
-class RendererFactory {
-    constructor() {
-        this.safe = true;
-        this.mimeTypes = [MIME_TYPE];
-        this.defaultRank = 100;
-        this.toolCallApproval = null;
-        this.createRenderer = (options) => {
-            return new ComponentsRenderer({
-                ...options,
-                toolCallApproval: this.toolCallApproval
-            });
-        };
-    }
-}
-const plugin = {
-    id: 'jupyter-chat-components:plugin',
+const factory = {
+    id: 'jupyter-chat-components:factory',
     description: 'Adds MIME type renderer for chat components',
     autoStart: true,
     provides: IComponentsRendererFactory,
@@ -73,4 +17,7 @@ const plugin = {
     }
 };
 export * from './token';
-export default plugin;
+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());
+    }
+}