jupyter-chat-components 0.1.1

package/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2026, Project Jupyter
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,136 @@
+# 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)
+
+Components to displayed in jupyter chat
+
+## Requirements
+
+- JupyterLab >= 4.0.0
+
+## Install
+
+To install the extension, execute:
+
+```bash
+pip install jupyter_chat_components
+```
+
+## Uninstall
+
+To remove the extension, execute:
+
+```bash
+pip uninstall jupyter_chat_components
+```
+
+## Contributing
+
+### Development install
+
+Note: You will need NodeJS to build the extension package.
+
+The `jlpm` command is JupyterLab's pinned version of
+[yarn](https://yarnpkg.com/) that is installed with JupyterLab. You may use
+`yarn` or `npm` in lieu of `jlpm` below.
+
+```bash
+# Clone the repo to your local environment
+# Change directory to the jupyter_chat_components directory
+
+# Set up a virtual environment and install package in development mode
+python -m venv .venv
+source .venv/bin/activate
+pip install --editable "."
+
+# Link your development version of the extension with JupyterLab
+jupyter labextension develop . --overwrite
+
+# Rebuild extension Typescript source after making changes
+# IMPORTANT: Unlike the steps above which are performed only once, do this step
+# every time you make a change.
+jlpm build
+```
+
+You can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the extension.
+
+```bash
+# Watch the source directory in one terminal, automatically rebuilding when needed
+jlpm watch
+# Run JupyterLab in another terminal
+jupyter lab
+```
+
+With the watch command running, every saved change will immediately be built locally and available in your running JupyterLab. Refresh JupyterLab to load the change in your browser (you may need to wait several seconds for the extension to be rebuilt).
+
+By default, the `jlpm build` command generates the source maps for this extension to make it easier to debug using the browser dev tools. To also generate source maps for the JupyterLab core extensions, you can run the following command:
+
+```bash
+jupyter lab build --minimize=False
+```
+
+### Development uninstall
+
+```bash
+pip uninstall jupyter_chat_components
+```
+
+In development mode, you will also need to remove the symlink created by `jupyter labextension develop`
+command. To find its location, you can run `jupyter labextension list` to figure out where the `labextensions`
+folder is located. Then you can remove the symlink named `jupyter-chat-components` within that folder.
+
+### Testing the extension
+
+#### Frontend tests
+
+This extension is using [Jest](https://jestjs.io/) for JavaScript code testing.
+
+To execute them, execute:
+
+```sh
+jlpm
+jlpm test
+```
+
+#### Integration tests
+
+This extension uses [Playwright](https://playwright.dev/docs/intro) for the integration tests (aka user level tests).
+More precisely, the JupyterLab helper [Galata](https://github.com/jupyterlab/jupyterlab/tree/master/galata) is used to handle testing the extension in JupyterLab.
+
+More information are provided within the [ui-tests](./ui-tests/README.md) README.
+
+## AI Coding Assistant Support
+
+This project includes an `AGENTS.md` file with coding standards and best practices for JupyterLab extension development. The file follows the [AGENTS.md standard](https://agents.md) for cross-tool compatibility.
+
+### Compatible AI Tools
+
+`AGENTS.md` works with AI coding assistants that support the standard, including Cursor, GitHub Copilot, Windsurf, Aider, and others. For a current list of compatible tools, see [the AGENTS.md standard](https://agents.md).
+
+Other conventions you might encounter:
+
+- `.cursorrules` - Cursor's YAML/JSON format (Cursor also supports AGENTS.md natively)
+- `CONVENTIONS.md` / `CONTRIBUTING.md` - For CodeConventions.ai and GitHub bots
+- Project-specific rules in JetBrains AI Assistant settings
+
+All tool-specific files should be symlinks to `AGENTS.md` as the single source of truth.
+
+### What's Included
+
+The `AGENTS.md` file provides guidance on:
+
+- Code quality rules and file-scoped validation commands
+- Naming conventions for packages, plugins, and files
+- Coding standards (TypeScript)
+- Development workflow and debugging
+- Common pitfalls and how to avoid them
+
+### Customization
+
+You can edit `AGENTS.md` to add project-specific conventions or adjust guidelines to match your team's practices. The file uses plain Markdown with Do/Don't patterns and references to actual project files.
+
+**Note**: `AGENTS.md` is living documentation. Update it when you change conventions, add dependencies, or discover new patterns. Include `AGENTS.md` updates in commits that modify workflows or coding standards.
+
+### Packaging the extension
+
+See [RELEASE](RELEASE.md)

package/lib/index.d.ts

@@ -0,0 +1,32 @@
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
+import { Widget } from '@lumino/widgets';
+import { IComponentsRendererFactory, ToolCallApproval } from './token';
+/**
+ * The options for the chat components 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>;
+export * from './token';
+export default plugin;

package/lib/index.js

@@ -0,0 +1,76 @@
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { nullTranslator } from '@jupyterlab/translation';
+import { Widget } from '@lumino/widgets';
+import { IComponentsRendererFactory } from './token';
+import { buildToolCallHtml } from './tool-call';
+/**
+ * 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 .
+ */
+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',
+    description: 'Adds MIME type renderer for chat components',
+    autoStart: true,
+    provides: IComponentsRendererFactory,
+    requires: [IRenderMimeRegistry],
+    activate: (app, rendermime) => {
+        const rendererFactory = new RendererFactory();
+        rendermime.addFactory(rendererFactory);
+        return rendererFactory;
+    }
+};
+export * from './token';
+export default plugin;

package/lib/token.d.ts

@@ -0,0 +1,35 @@
+import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
+import { Token } from '@lumino/coreutils';
+/**
+ * The token providing the chat components renderer.
+ */
+export declare const IComponentsRendererFactory: Token<IComponentsRendererFactory>;
+/**
+ * The callback to approve or reject a tool.
+ */
+export type ToolCallApproval = ((targetId: string, approvalId: string, approve: boolean) => void) | null;
+/**
+ * The interface for components renderer factory.
+ */
+export interface IComponentsRendererFactory extends IRenderMime.IRendererFactory {
+    /**
+     * The callback to approve or reject a tool.
+     */
+    toolCallApproval: ToolCallApproval;
+}
+/**
+ * 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;
+}

package/lib/token.js

@@ -0,0 +1,5 @@
+import { Token } from '@lumino/coreutils';
+/**
+ * The token providing the chat components renderer.
+ */
+export const IComponentsRendererFactory = new Token('jupyter-chat-components:IComponentsRendererFactory', 'The chat components renderer factory');

package/lib/tool-call.d.ts

@@ -0,0 +1,14 @@
+import { TranslationBundle } from '@jupyterlab/translation';
+import { IToolCallMetadata, ToolCallApproval } from './token';
+/**
+ * Options for building tool call HTML.
+ */
+export interface IToolCallHtmlOptions extends IToolCallMetadata {
+    trans: TranslationBundle;
+    toolCallApproval: ToolCallApproval;
+}
+export declare function escapeHtml(value: string): string;
+/**
+ * Builds HTML for a tool call display.
+ */
+export declare function buildToolCallHtml(options: IToolCallHtmlOptions): HTMLDetailsElement;

package/lib/tool-call.js

@@ -0,0 +1,152 @@
+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');
+    }
+};
+/**
+ * Builds HTML for a tool call display.
+ */
+export function buildToolCallHtml(options) {
+    const { toolName, input, status, summary, output, targetId, approvalId, trans } = options;
+    const config = STATUS_CONFIG[status];
+    const statusText = getStatusText(status, trans);
+    const escapedToolName = escapeHtml(toolName);
+    const escapedInput = escapeHtml(input);
+    const details = document.createElement('details');
+    details.classList.add('jp-ai-tool-call', config.cssClass);
+    if (config.open) {
+        details.setAttribute('open', 'true');
+    }
+    const summaryElement = document.createElement('summary');
+    summaryElement.classList.add('jp-ai-tool-header');
+    // Build summary header
+    const icon = document.createElement('div');
+    icon.classList.add('jp-ai-tool-icon');
+    icon.textContent = '⚡';
+    const title = document.createElement('div');
+    title.classList.add('jp-ai-tool-title');
+    title.textContent = escapedToolName;
+    if (summary) {
+        const summarySpan = document.createElement('span');
+        summarySpan.classList.add('jp-ai-tool-summary');
+        summarySpan.textContent = summary;
+        title.appendChild(summarySpan);
+    }
+    const statusDiv = document.createElement('div');
+    statusDiv.classList.add('jp-ai-tool-status', config.statusClass);
+    statusDiv.textContent = statusText;
+    summaryElement.appendChild(icon);
+    summaryElement.appendChild(title);
+    summaryElement.appendChild(statusDiv);
+    // Build body
+    const body = document.createElement('div');
+    body.classList.add('jp-ai-tool-body');
+    // Add input section
+    const inputSection = document.createElement('div');
+    inputSection.classList.add('jp-ai-tool-section');
+    const inputLabel = document.createElement('div');
+    inputLabel.classList.add('jp-ai-tool-label');
+    inputLabel.textContent = trans.__('Input');
+    const inputPre = document.createElement('pre');
+    inputPre.classList.add('jp-ai-tool-code');
+    const inputCode = document.createElement('code');
+    inputCode.textContent = escapedInput;
+    inputPre.appendChild(inputCode);
+    inputSection.appendChild(inputLabel);
+    inputSection.appendChild(inputPre);
+    body.appendChild(inputSection);
+    // Add approval buttons if awaiting approval
+    if (status === 'awaiting_approval' && approvalId && targetId) {
+        const approvalButtonsDiv = document.createElement('div');
+        approvalButtonsDiv.classList.add('jp-ai-tool-approval-buttons', `jp-ai-approval-id--${approvalId}`);
+        const approveBtn = document.createElement('button');
+        approveBtn.classList.add('jp-ai-approval-btn', 'jp-ai-approval-approve');
+        approveBtn.textContent = trans.__('Approve');
+        const rejectBtn = document.createElement('button');
+        rejectBtn.classList.add('jp-ai-approval-btn', 'jp-ai-approval-reject');
+        rejectBtn.textContent = trans.__('Reject');
+        approvalButtonsDiv.appendChild(approveBtn);
+        approvalButtonsDiv.appendChild(rejectBtn);
+        body.appendChild(approvalButtonsDiv);
+        approveBtn.addEventListener('click', () => { var _a; return (_a = options.toolCallApproval) === null || _a === void 0 ? void 0 : _a.call(options, targetId, approvalId, true); });
+        rejectBtn.addEventListener('click', () => { var _a; return (_a = options.toolCallApproval) === null || _a === void 0 ? void 0 : _a.call(options, targetId, approvalId, false); });
+    }
+    // Add output/result section if provided
+    if (output !== undefined) {
+        const escapedOutput = escapeHtml(output);
+        const label = status === 'error' ? trans.__('Error') : trans.__('Result');
+        const outputSection = document.createElement('div');
+        outputSection.classList.add('jp-ai-tool-section');
+        const outputLabel = document.createElement('div');
+        outputLabel.classList.add('jp-ai-tool-label');
+        outputLabel.textContent = label;
+        const outputPre = document.createElement('pre');
+        outputPre.classList.add('jp-ai-tool-code');
+        const outputCode = document.createElement('code');
+        outputCode.textContent = escapedOutput;
+        outputPre.appendChild(outputCode);
+        outputSection.appendChild(outputLabel);
+        outputSection.appendChild(outputPre);
+        body.appendChild(outputSection);
+    }
+    details.appendChild(summaryElement);
+    details.appendChild(body);
+    return details;
+}

package/package.json

@@ -0,0 +1,202 @@
+{
+    "name": "jupyter-chat-components",
+    "version": "0.1.1",
+    "description": "Components to displayed in jupyter chat",
+    "keywords": [
+        "jupyter",
+        "jupyterlab",
+        "jupyterlab-extension"
+    ],
+    "homepage": "https://github.com/brichet/jupyter-chat-components",
+    "bugs": {
+        "url": "https://github.com/brichet/jupyter-chat-components/issues"
+    },
+    "license": "BSD-3-Clause",
+    "author": {
+        "name": "Project Jupyter",
+        "email": "jupyter@googlegroups.com"
+    },
+    "files": [
+        "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+        "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
+        "src/**/*.{ts,tsx}"
+    ],
+    "main": "lib/index.js",
+    "types": "lib/index.d.ts",
+    "style": "style/index.css",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/brichet/jupyter-chat-components.git"
+    },
+    "scripts": {
+        "build": "jlpm build:lib && jlpm build:labextension:dev",
+        "build:prod": "jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
+        "build:labextension": "jupyter labextension build .",
+        "build:labextension:dev": "jupyter labextension build --development True .",
+        "build:lib": "tsc --sourceMap",
+        "build:lib:prod": "tsc",
+        "clean": "jlpm clean:lib",
+        "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
+        "clean:lintcache": "rimraf .eslintcache .stylelintcache",
+        "clean:labextension": "rimraf jupyter_chat_components/labextension jupyter_chat_components/_version.py",
+        "clean:all": "jlpm clean:lib && jlpm clean:labextension && jlpm clean:lintcache",
+        "eslint": "jlpm eslint:check --fix",
+        "eslint:check": "eslint . --cache --ext .ts,.tsx",
+        "install:extension": "jlpm build",
+        "lint": "jlpm stylelint && jlpm prettier && jlpm eslint",
+        "lint:check": "jlpm stylelint:check && jlpm prettier:check && jlpm eslint:check",
+        "prettier": "jlpm prettier:base --write --list-different",
+        "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
+        "prettier:check": "jlpm prettier:base --check",
+        "stylelint": "jlpm stylelint:check --fix",
+        "stylelint:check": "stylelint --cache \"style/**/*.css\"",
+        "test": "jest --coverage",
+        "watch": "run-p watch:src watch:labextension",
+        "watch:src": "tsc -w --sourceMap",
+        "watch:labextension": "jupyter labextension watch ."
+    },
+    "dependencies": {
+        "@jupyterlab/application": "^4.5.0",
+        "@jupyterlab/rendermime": "^4.5.0",
+        "@jupyterlab/rendermime-interfaces": "^3.8.0",
+        "@jupyterlab/translation": "^4.5.0",
+        "@lumino/coreutils": "^2.2.2",
+        "@lumino/widgets": "^2.1.0"
+    },
+    "devDependencies": {
+        "@jupyterlab/builder": "^4.0.0",
+        "@jupyterlab/testutils": "^4.0.0",
+        "@types/jest": "^29.2.0",
+        "@types/json-schema": "^7.0.11",
+        "@types/react": "^18.0.26",
+        "@types/react-addons-linked-state-mixin": "^0.14.22",
+        "@typescript-eslint/eslint-plugin": "^6.1.0",
+        "@typescript-eslint/parser": "^6.1.0",
+        "css-loader": "^6.7.1",
+        "eslint": "^8.36.0",
+        "eslint-config-prettier": "^8.8.0",
+        "eslint-plugin-prettier": "^5.0.0",
+        "jest": "^29.2.0",
+        "npm-run-all2": "^7.0.1",
+        "prettier": "^3.0.0",
+        "rimraf": "^5.0.1",
+        "source-map-loader": "^1.0.2",
+        "style-loader": "^3.3.1",
+        "stylelint": "^15.10.1",
+        "stylelint-config-recommended": "^13.0.0",
+        "stylelint-config-standard": "^34.0.0",
+        "stylelint-csstree-validator": "^3.0.0",
+        "stylelint-prettier": "^4.0.0",
+        "typescript": "~5.5.4",
+        "yjs": "^13.5.0"
+    },
+    "resolutions": {
+        "lib0": "0.2.111"
+    },
+    "sideEffects": [
+        "style/*.css",
+        "style/index.js"
+    ],
+    "styleModule": "style/index.js",
+    "publishConfig": {
+        "access": "public"
+    },
+    "jupyterlab": {
+        "extension": true,
+        "outputDir": "jupyter_chat_components/labextension"
+    },
+    "eslintIgnore": [
+        "node_modules",
+        "dist",
+        "coverage",
+        "**/*.d.ts",
+        "tests",
+        "**/__tests__",
+        "ui-tests"
+    ],
+    "eslintConfig": {
+        "extends": [
+            "eslint:recommended",
+            "plugin:@typescript-eslint/eslint-recommended",
+            "plugin:@typescript-eslint/recommended",
+            "plugin:prettier/recommended"
+        ],
+        "parser": "@typescript-eslint/parser",
+        "parserOptions": {
+            "project": "tsconfig.json",
+            "sourceType": "module"
+        },
+        "plugins": [
+            "@typescript-eslint"
+        ],
+        "rules": {
+            "@typescript-eslint/naming-convention": [
+                "error",
+                {
+                    "selector": "interface",
+                    "format": [
+                        "PascalCase"
+                    ],
+                    "custom": {
+                        "regex": "^I[A-Z]",
+                        "match": true
+                    }
+                }
+            ],
+            "@typescript-eslint/no-unused-vars": [
+                "warn",
+                {
+                    "args": "none"
+                }
+            ],
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-namespace": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/quotes": [
+                "error",
+                "single",
+                {
+                    "avoidEscape": true,
+                    "allowTemplateLiterals": false
+                }
+            ],
+            "curly": [
+                "error",
+                "all"
+            ],
+            "eqeqeq": "error",
+            "prefer-arrow-callback": "error"
+        }
+    },
+    "prettier": {
+        "singleQuote": true,
+        "trailingComma": "none",
+        "arrowParens": "avoid",
+        "endOfLine": "auto",
+        "overrides": [
+            {
+                "files": "package.json",
+                "options": {
+                    "tabWidth": 4
+                }
+            }
+        ]
+    },
+    "stylelint": {
+        "extends": [
+            "stylelint-config-recommended",
+            "stylelint-config-standard",
+            "stylelint-prettier/recommended"
+        ],
+        "plugins": [
+            "stylelint-csstree-validator"
+        ],
+        "rules": {
+            "csstree/validator": true,
+            "property-no-vendor-prefix": null,
+            "selector-class-pattern": "^([a-z][A-z\\d]*)(-[A-z\\d]+)*$",
+            "selector-no-vendor-prefix": null,
+            "value-no-vendor-prefix": null
+        }
+    }
+}

package/src/__tests__/jupyter_ai_chat_components.spec.ts

@@ -0,0 +1,9 @@
+/**
+ * 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/src/index.ts

@@ -0,0 +1,115 @@
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+
+import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
+
+import { nullTranslator, TranslationBundle } from '@jupyterlab/translation';
+
+import { Widget } from '@lumino/widgets';
+
+import {
+  IComponentsRendererFactory,
+  IToolCallMetadata,
+  ToolCallApproval
+} from './token';
+
+import { buildToolCallHtml, IToolCallHtmlOptions } from './tool-call';
+
+/**
+ * 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';
+
+/**
+ * The options for the chat components renderer.
+ */
+interface IComponentsRendererOptions extends IRenderMime.IRendererOptions {
+  /**
+   * The callback to approve or reject a tool.
+   */
+  toolCallApproval: ToolCallApproval;
+}
+
+/**
+ * A widget for rendering .
+ */
+export class ComponentsRenderer
+  extends Widget
+  implements IRenderMime.IRenderer
+{
+  /**
+   * Construct a new output widget.
+   */
+  constructor(options: IComponentsRendererOptions) {
+    super();
+    this._trans = (options.translator ?? nullTranslator).load('jupyterlab');
+    this._mimeType = options.mimeType;
+    this._toolCallApproval = options.toolCallApproval;
+    this.addClass(CLASS_NAME);
+  }
+
+  /**
+   * Render  into this widget's node.
+   */
+  renderModel(model: IRenderMime.IMimeModel): Promise<void> {
+    const data = model.data[this._mimeType] as string;
+    const metadata = { ...model.metadata };
+    if (data === 'tool-call') {
+      const toolCallOptions: IToolCallHtmlOptions = {
+        ...(metadata as unknown as IToolCallMetadata),
+        trans: this._trans,
+        toolCallApproval: this._toolCallApproval
+      };
+      this.node.appendChild(buildToolCallHtml(toolCallOptions));
+    }
+    return Promise.resolve();
+  }
+
+  private _trans: TranslationBundle;
+  private _mimeType: string;
+  private _toolCallApproval: ToolCallApproval;
+}
+
+/**
+ * A mime renderer factory for chat components.
+ */
+class RendererFactory implements IComponentsRendererFactory {
+  readonly safe = true;
+  readonly mimeTypes = [MIME_TYPE];
+  readonly defaultRank = 100;
+  toolCallApproval: ToolCallApproval = null;
+  createRenderer = (options: IRenderMime.IRendererOptions) => {
+    return new ComponentsRenderer({
+      ...options,
+      toolCallApproval: this.toolCallApproval
+    });
+  };
+}
+
+const plugin: JupyterFrontEndPlugin<IComponentsRendererFactory> = {
+  id: 'jupyter-chat-components:plugin',
+  description: 'Adds MIME type renderer for chat components',
+  autoStart: true,
+  provides: IComponentsRendererFactory,
+  requires: [IRenderMimeRegistry],
+  activate: (
+    app: JupyterFrontEnd,
+    rendermime: IRenderMimeRegistry
+  ): IComponentsRendererFactory => {
+    const rendererFactory = new RendererFactory();
+    rendermime.addFactory(rendererFactory);
+    return rendererFactory;
+  }
+};
+
+export * from './token';
+export default plugin;

package/src/token.ts

@@ -0,0 +1,53 @@
+import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
+
+import { Token } from '@lumino/coreutils';
+
+/**
+ * The token providing the chat components renderer.
+ */
+export const IComponentsRendererFactory = new Token<IComponentsRendererFactory>(
+  'jupyter-chat-components:IComponentsRendererFactory',
+  'The chat components renderer factory'
+);
+
+/**
+ * The callback to approve or reject a tool.
+ */
+export type ToolCallApproval =
+  | ((targetId: string, approvalId: string, approve: boolean) => void)
+  | null;
+
+/**
+ * The interface for components renderer factory.
+ */
+export interface IComponentsRendererFactory
+  extends IRenderMime.IRendererFactory {
+  /**
+   * The callback to approve or reject a tool.
+   */
+  toolCallApproval: ToolCallApproval;
+}
+
+/**
+ * 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;
+}

package/src/tool-call.ts

@@ -0,0 +1,224 @@
+import { TranslationBundle } from '@jupyterlab/translation';
+
+import { IToolCallMetadata, ToolCallApproval, ToolCallStatus } from './token';
+
+/**
+ * Configuration for rendering tool call status.
+ */
+interface IStatusConfig {
+  cssClass: string;
+  statusClass: string;
+  open?: boolean;
+}
+
+const STATUS_CONFIG: Record<ToolCallStatus, IStatusConfig> = {
+  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'
+  }
+};
+
+/**
+ * Options for building tool call HTML.
+ */
+export interface IToolCallHtmlOptions extends IToolCallMetadata {
+  trans: TranslationBundle;
+  toolCallApproval: ToolCallApproval;
+}
+
+export function escapeHtml(value: string): string {
+  // 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, '&amp;')
+    .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: ToolCallStatus,
+  trans: TranslationBundle
+): string => {
+  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');
+  }
+};
+
+/**
+ * Builds HTML for a tool call display.
+ */
+export function buildToolCallHtml(
+  options: IToolCallHtmlOptions
+): HTMLDetailsElement {
+  const {
+    toolName,
+    input,
+    status,
+    summary,
+    output,
+    targetId,
+    approvalId,
+    trans
+  } = options;
+  const config = STATUS_CONFIG[status];
+  const statusText = getStatusText(status, trans);
+  const escapedToolName = escapeHtml(toolName);
+  const escapedInput = escapeHtml(input);
+
+  const details = document.createElement('details');
+  details.classList.add('jp-ai-tool-call', config.cssClass);
+  if (config.open) {
+    details.setAttribute('open', 'true');
+  }
+
+  const summaryElement = document.createElement('summary');
+  summaryElement.classList.add('jp-ai-tool-header');
+
+  // Build summary header
+  const icon = document.createElement('div');
+  icon.classList.add('jp-ai-tool-icon');
+  icon.textContent = '⚡';
+
+  const title = document.createElement('div');
+  title.classList.add('jp-ai-tool-title');
+  title.textContent = escapedToolName;
+
+  if (summary) {
+    const summarySpan = document.createElement('span');
+    summarySpan.classList.add('jp-ai-tool-summary');
+    summarySpan.textContent = summary;
+    title.appendChild(summarySpan);
+  }
+
+  const statusDiv = document.createElement('div');
+  statusDiv.classList.add('jp-ai-tool-status', config.statusClass);
+  statusDiv.textContent = statusText;
+
+  summaryElement.appendChild(icon);
+  summaryElement.appendChild(title);
+  summaryElement.appendChild(statusDiv);
+
+  // Build body
+  const body = document.createElement('div');
+  body.classList.add('jp-ai-tool-body');
+
+  // Add input section
+  const inputSection = document.createElement('div');
+  inputSection.classList.add('jp-ai-tool-section');
+
+  const inputLabel = document.createElement('div');
+  inputLabel.classList.add('jp-ai-tool-label');
+  inputLabel.textContent = trans.__('Input');
+
+  const inputPre = document.createElement('pre');
+  inputPre.classList.add('jp-ai-tool-code');
+
+  const inputCode = document.createElement('code');
+  inputCode.textContent = escapedInput;
+
+  inputPre.appendChild(inputCode);
+  inputSection.appendChild(inputLabel);
+  inputSection.appendChild(inputPre);
+  body.appendChild(inputSection);
+
+  // Add approval buttons if awaiting approval
+  if (status === 'awaiting_approval' && approvalId && targetId) {
+    const approvalButtonsDiv = document.createElement('div');
+    approvalButtonsDiv.classList.add(
+      'jp-ai-tool-approval-buttons',
+      `jp-ai-approval-id--${approvalId}`
+    );
+
+    const approveBtn = document.createElement('button');
+    approveBtn.classList.add('jp-ai-approval-btn', 'jp-ai-approval-approve');
+    approveBtn.textContent = trans.__('Approve');
+
+    const rejectBtn = document.createElement('button');
+    rejectBtn.classList.add('jp-ai-approval-btn', 'jp-ai-approval-reject');
+    rejectBtn.textContent = trans.__('Reject');
+
+    approvalButtonsDiv.appendChild(approveBtn);
+    approvalButtonsDiv.appendChild(rejectBtn);
+    body.appendChild(approvalButtonsDiv);
+
+    approveBtn.addEventListener('click', () =>
+      options.toolCallApproval?.(targetId, approvalId, true)
+    );
+    rejectBtn.addEventListener('click', () =>
+      options.toolCallApproval?.(targetId, approvalId, false)
+    );
+  }
+
+  // Add output/result section if provided
+  if (output !== undefined) {
+    const escapedOutput = escapeHtml(output);
+    const label = status === 'error' ? trans.__('Error') : trans.__('Result');
+
+    const outputSection = document.createElement('div');
+    outputSection.classList.add('jp-ai-tool-section');
+
+    const outputLabel = document.createElement('div');
+    outputLabel.classList.add('jp-ai-tool-label');
+    outputLabel.textContent = label;
+
+    const outputPre = document.createElement('pre');
+    outputPre.classList.add('jp-ai-tool-code');
+
+    const outputCode = document.createElement('code');
+    outputCode.textContent = escapedOutput;
+
+    outputPre.appendChild(outputCode);
+    outputSection.appendChild(outputLabel);
+    outputSection.appendChild(outputPre);
+    body.appendChild(outputSection);
+  }
+
+  details.appendChild(summaryElement);
+  details.appendChild(body);
+
+  return details;
+}

package/style/base.css

@@ -0,0 +1,207 @@
+/*
+    See the JupyterLab Developer Guide for useful CSS Patterns:
+
+    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
+*/
+
+/* Modern Tool Call Card Styling */
+.jp-ai-tool-call {
+  margin: 8px 0;
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 6px;
+  background: var(--jp-layout-color0);
+  box-shadow: var(--jp-elevation-z2);
+  transition: all 0.2s ease;
+  overflow: hidden;
+}
+
+.jp-ai-tool-call:hover {
+  border-color: var(--jp-border-color2);
+  box-shadow: var(--jp-elevation-z4);
+}
+
+/* Tool Header - clickable summary */
+.jp-ai-tool-header {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  background: var(--jp-layout-color1);
+  cursor: pointer;
+  user-select: none;
+  gap: 8px;
+  transition: background-color 0.2s ease;
+}
+
+.jp-ai-tool-header:hover {
+  background: var(--jp-layout-color2);
+}
+
+.jp-ai-tool-header::before {
+  content: '';
+  width: 0;
+  height: 0;
+  border-left: 5px solid var(--jp-ui-font-color2);
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  transition: transform 0.2s ease;
+}
+
+.jp-ai-tool-call[open] .jp-ai-tool-header::before {
+  transform: rotate(90deg);
+}
+
+.jp-ai-tool-icon {
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+.jp-ai-tool-title {
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size1);
+  font-weight: 500;
+  color: var(--jp-ui-font-color1);
+  flex: 1;
+}
+
+.jp-ai-tool-summary {
+  font-weight: 400;
+  opacity: 0.7;
+  font-size: var(--jp-ui-font-size0);
+}
+
+.jp-ai-tool-summary::before {
+  content: ' ';
+  white-space: pre;
+}
+
+.jp-ai-tool-status {
+  font-size: var(--jp-ui-font-size0);
+  font-weight: 500;
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+
+.jp-ai-tool-status-pending {
+  background: rgb(var(--jp-warn-color1-rgb) / 15%);
+  color: var(--jp-warn-color1);
+}
+
+.jp-ai-tool-status-completed {
+  background: rgb(var(--jp-success-color1-rgb) / 15%);
+  color: var(--jp-success-color1);
+}
+
+.jp-ai-tool-status-error {
+  background: rgb(var(--jp-error-color1-rgb) / 15%);
+  color: var(--jp-error-color1);
+}
+
+.jp-ai-tool-status-approval {
+  background: rgb(var(--jp-warn-color1-rgb) / 15%);
+  color: var(--jp-warn-color1);
+}
+
+/* Tool Body */
+.jp-ai-tool-body {
+  padding: 8px 12px 12px;
+}
+
+.jp-ai-tool-section {
+  margin-bottom: 8px;
+}
+
+.jp-ai-tool-section:last-child {
+  margin-bottom: 0;
+}
+
+.jp-ai-tool-label {
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size0);
+  font-weight: 600;
+  color: var(--jp-ui-font-color2);
+  margin-bottom: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.jp-ai-tool-code {
+  background: var(--jp-layout-color2);
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 4px;
+  padding: 8px;
+  margin: 0;
+  font-family: var(--jp-code-font-family);
+  font-size: var(--jp-code-font-size);
+  line-height: 1.4;
+  overflow: auto auto;
+  max-height: 200px;
+}
+
+.jp-ai-tool-code code {
+  background: none;
+  padding: 0;
+  border: none;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* State-specific styling */
+.jp-ai-tool-pending {
+  border-left: 4px solid var(--jp-warn-color1);
+}
+
+.jp-ai-tool-completed {
+  border-left: 4px solid var(--jp-success-color1);
+}
+
+.jp-ai-tool-error {
+  border-left: 4px solid var(--jp-error-color1);
+}
+
+/* Tool Approval Button Styles */
+.jp-ai-tool-approval-buttons {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  justify-content: flex-end;
+}
+
+.jp-ai-approval-btn {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size0);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: 70px;
+  display: inline-block;
+}
+
+.jp-ai-approval-approve {
+  background: var(--jp-success-color1);
+  color: var(--jp-ui-inverse-font-color1);
+}
+
+.jp-ai-approval-approve:hover:not(:disabled) {
+  background: var(--jp-success-color0);
+  transform: translateY(-1px);
+  box-shadow: var(--jp-elevation-z4);
+}
+
+.jp-ai-approval-reject {
+  background: var(--jp-error-color1);
+  color: var(--jp-ui-inverse-font-color1);
+}
+
+.jp-ai-approval-reject:hover:not(:disabled) {
+  background: var(--jp-error-color0);
+  transform: translateY(-1px);
+  box-shadow: var(--jp-elevation-z4);
+}
+
+.jp-ai-approval-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

package/style/index.css

@@ -0,0 +1 @@
+@import url('base.css');

package/style/index.js

@@ -0,0 +1 @@
+import './base.css';