@jupyterlite/ai 0.9.0-a3 → 0.9.0

package/README.md

@@ -52,13 +52,25 @@ The process is different for each provider, so you may refer to their documentat
 
 ![screenshot showing the dialog to add a new provider](https://github.com/user-attachments/assets/823c71c6-5807-44c8-80b6-2e59379a65d5)
 
+### Using a generic OpenAI-compatible provider
+
+The Generic provider allows you to connect to any OpenAI-compatible API endpoint, including local servers like Ollama and LiteLLM.
+
+1. In JupyterLab, open the AI settings panel and go to the **Providers** section
+2. Click on "Add a new provider"
+3. Select the **Generic (OpenAI-compatible)** provider
+4. Configure the following settings:
+   - **Base URL**: The base URL of your API endpoint (suggestions are provided for common local servers)
+   - **Model**: The model name to use
+   - **API Key**: Your API key (if required by the provider)
+
 ### Using Ollama
 
 [Ollama](https://ollama.com/) allows you to run open-weight LLMs locally on your machine.
 
 #### Setting up Ollama
 
-1. Install Ollama following the instructions at https://ollama.com/download
+1. Install Ollama following the instructions at <https://ollama.com/download>
 2. Pull a model, for example:
 
 ```bash
@@ -71,21 +83,11 @@ ollama pull llama3.2
 
 1. In JupyterLab, open the AI settings panel and go to the **Providers** section
 2. Click on "Add a new provider"
-3. Select the **Ollama** provider
+3. Select the **Generic (OpenAI-compatible)** provider
 4. Configure the following settings:
+   - **Base URL**: Select `http://localhost:11434/v1` from the suggestions (or enter manually)
    - **Model**: The model name you pulled (e.g., `llama3.2`)
-
-### Using a generic OpenAI-compatible provider
-
-The Generic provider allows you to connect to any OpenAI-compatible API endpoint.
-
-1. In JupyterLab, open the AI settings panel and go to the **Providers** section
-2. Click on "Add a new provider"
-3. Select the **Generic** provider
-4. Configure the following settings:
-   - **Base URL**: The base URL of your API endpoint
-   - **Model**: The model name to use
-   - **API Key**: Your API key (if required by the provider)
+   - **API Key**: Leave empty (not required for Ollama)
 
 ### Using LiteLLM Proxy
 
@@ -97,7 +99,7 @@ Using LiteLLM Proxy with jupyterlite-ai provides flexibility to switch between d
 
 1. Install LiteLLM:
 
-Follow the instructions at https://docs.litellm.ai/docs/simple_proxy.
+Follow the instructions at <https://docs.litellm.ai/docs/simple_proxy>.
 
 2. Create a `litellm_config.yaml` file with your model configuration:
 
@@ -144,7 +146,7 @@ Providers are based on the [Vercel AI SDK](https://sdk.vercel.ai/docs/introducti
 
 ### Registering a Custom Provider
 
-**Example: Registering a custom OpenAI-compatible provider**
+#### Example: Registering a custom OpenAI-compatible provider
 
 ```typescript
 import {
@@ -192,7 +194,7 @@ The provider configuration object requires the following properties:
 - `supportsBaseURL`: Whether the provider supports a custom base URL
 - `factory`: Function that creates and returns a language model (the registry automatically wraps it for chat usage)
 
-**Example: Using a custom fetch function**
+#### Example: Using a custom fetch function
 
 You can provide a custom `fetch` function to the provider, which is useful for adding custom headers, handling authentication, or routing requests through a proxy:
 
@@ -253,75 +255,4 @@ pip uninstall jupyterlite-ai
 
 ## 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 jupyterlite_ai directory
-# Install package in development mode
-pip install -e "."
-# Link your development version of the extension with JupyterLab
-jupyter labextension develop . --overwrite
-# Rebuild extension Typescript source after making changes
-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
-```
-
-### Running UI tests
-
-The UI tests use Playwright and can be configured with environment variables:
-
-- `PWVIDEO`: Controls video recording during tests (default: `retain-on-failure`)
-  - `on`: Record video for all tests
-  - `off`: Do not record video
-  - `retain-on-failure`: Only keep videos for failed tests
-- `PWSLOWMO`: Adds a delay (in milliseconds) between Playwright actions for debugging (default: `0`)
-
-Example usage:
-
-```bash
-# Record all test videos
-PWVIDEO=on jlpm playwright test
-
-# Slow down test execution by 500ms per action
-PWSLOWMO=500 jlpm playwright test
-
-# Combine both options
-PWVIDEO=on PWSLOWMO=1000 jlpm playwright test
-```
-
-### Development uninstall
-
-```bash
-pip uninstall jupyterlite-ai
-```
-
-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 `@jupyterlite/ai` within that folder.
-
-### Packaging the extension
-
-See [RELEASE](RELEASE.md)
+See [CONTRIBUTING](CONTRIBUTING.md)

package/lib/agent.d.ts

@@ -73,18 +73,18 @@ export interface IAgentEventTypeMap {
     tool_call_start: {
         callId: string;
         toolName: string;
-        input: any;
+        input: string;
     };
     tool_call_complete: {
         callId: string;
         toolName: string;
-        output: any;
+        output: string;
         isError: boolean;
     };
     tool_approval_required: {
         interruptionId: string;
         toolName: string;
-        toolInput: any;
+        toolInput: string;
         callId?: string;
     };
     grouped_approval_required: {
@@ -92,7 +92,7 @@ export interface IAgentEventTypeMap {
         approvals: Array<{
             interruptionId: string;
             toolName: string;
-            toolInput: any;
+            toolInput: string;
         }>;
     };
     error: {
@@ -232,6 +232,12 @@ export declare class AgentManager {
      * @param result The async iterable result from agent execution
      */
     private _processRunResult;
+    /**
+     * Formats tool input for display by pretty-printing JSON strings.
+     * @param input The tool input string to format
+     * @returns Pretty-printed JSON string
+     */
+    private _formatToolInput;
     /**
      * Handles the start of a tool call from the model event.
      * @param modelEvent The model event containing tool call information

package/lib/agent.js

@@ -504,6 +504,22 @@ export class AgentManager {
             }
         }
     }
+    /**
+     * Formats tool input for display by pretty-printing JSON strings.
+     * @param input The tool input string to format
+     * @returns Pretty-printed JSON string
+     */
+    _formatToolInput(input) {
+        try {
+            // Parse and re-stringify with formatting
+            const parsed = JSON.parse(input);
+            return JSON.stringify(parsed, null, 2);
+        }
+        catch {
+            // If parsing fails, return the string as-is
+            return input;
+        }
+    }
     /**
      * Handles the start of a tool call from the model event.
      * @param modelEvent The model event containing tool call information
@@ -512,19 +528,12 @@ export class AgentManager {
         const toolCallId = modelEvent.toolCallId;
         const toolName = modelEvent.toolName;
         const toolInput = modelEvent.input;
-        let parsedToolInput;
-        try {
-            parsedToolInput = JSON.parse(toolInput);
-        }
-        catch (error) {
-            parsedToolInput = {};
-        }
         this._agentEvent.emit({
             type: 'tool_call_start',
             data: {
                 callId: toolCallId,
                 toolName,
-                input: parsedToolInput
+                input: this._formatToolInput(toolInput)
             }
         });
     }
@@ -540,7 +549,7 @@ export class AgentManager {
             ? toolCallOutput.output
             : JSON.stringify(toolCallOutput.output, null, 2);
         const isError = toolCallOutput.rawItem.type === 'function_call_result' &&
-            toolCallOutput.rawItem.error;
+            toolCallOutput.rawItem.status === 'incomplete';
         const toolName = toolCallOutput.rawItem.type === 'function_call_result'
             ? toolCallOutput.rawItem.name
             : 'Unknown Tool';
@@ -559,17 +568,19 @@ export class AgentManager {
      * @param interruption The tool approval interruption item
      */
     async _handleSingleToolApproval(interruption) {
-        const toolName = interruption.rawItem?.name || 'Unknown Tool';
-        const toolInput = interruption.rawItem?.arguments || {};
+        const toolName = interruption.rawItem.name || 'Unknown Tool';
+        const toolInput = interruption.rawItem.arguments || '{}';
         const interruptionId = `int-${Date.now()}-${Math.random()}`;
-        const callId = interruption.rawItem?.callId;
+        const callId = interruption.rawItem.type === 'function_call'
+            ? interruption.rawItem.callId
+            : undefined;
         this._pendingApprovals.set(interruptionId, { interruption });
         this._agentEvent.emit({
             type: 'tool_approval_required',
             data: {
                 interruptionId,
                 toolName,
-                toolInput,
+                toolInput: this._formatToolInput(toolInput),
                 callId
             }
         });
@@ -581,14 +592,14 @@ export class AgentManager {
     async _handleGroupedToolApprovals(interruptions) {
         const groupId = `group-${Date.now()}-${Math.random()}`;
         const approvals = interruptions.map(interruption => {
-            const toolName = interruption.rawItem?.name || 'Unknown Tool';
-            const toolInput = interruption.rawItem?.arguments || {};
+            const toolName = interruption.rawItem.name || 'Unknown Tool';
+            const toolInput = interruption.rawItem.arguments || '{}';
             const interruptionId = `int-${Date.now()}-${Math.random()}`;
             this._pendingApprovals.set(interruptionId, { interruption, groupId });
             return {
                 interruptionId,
                 toolName,
-                toolInput
+                toolInput: this._formatToolInput(toolInput)
             };
         });
         this._agentEvent.emit({
@@ -668,7 +679,9 @@ Guidelines:
 - Use natural, conversational tone throughout
 
 COMMAND DISCOVERY:
-- When you want to execute JupyterLab commands, ALWAYS use the 'discover_commands' tool first to find available commands and their metadata.
+- When you want to execute JupyterLab commands, ALWAYS use the 'discover_commands' tool first to find available commands and their metadata, with the optional query parameter.
+- The query should typically be a single word, e.g., 'terminal', 'notebook', 'cell', 'file', 'edit', 'view', 'run', etc, to find relevant commands.
+- If searching with a query does not yield the desired command, try again with a different query or use an empty query to list all commands.
 - This ensures you have complete information about command IDs, descriptions, and required arguments before attempting to execute them. Only after discovering the available commands should you use the 'execute_command' tool with the correct command ID and arguments.
 
 TOOL SELECTION GUIDELINES:

package/lib/chat-model.d.ts

@@ -138,6 +138,12 @@ export declare class AIChatModel extends AbstractChatModel {
      * @returns Array of formatted attachment contents
      */
     private _processAttachments;
+    /**
+     * Reads the content of a notebook cell.
+     * @param attachment The notebook attachment to read
+     * @returns Cell content as string or null if unable to read
+     */
+    private _readNotebookCells;
     /**
      * Reads the content of a file attachment.
      * @param attachment The file attachment to read

package/lib/chat-model.js

@@ -106,7 +106,7 @@ export class AIChatModel extends AbstractChatModel {
             time: Date.now() / 1000,
             type: 'msg',
             raw_time: false,
-            attachments: this.input.attachments
+            attachments: [...this.input.attachments]
         };
         this.messageAdded(userMessage);
         // Check if we have valid configuration
@@ -127,6 +127,8 @@ export class AIChatModel extends AbstractChatModel {
             let enhancedMessage = message.body;
             if (this.input.attachments.length > 0) {
                 const attachmentContents = await this._processAttachments(this.input.attachments);
+                // Clear attachments right after  processing
+                this.input.clearAttachments();
                 if (attachmentContents.length > 0) {
                     enhancedMessage +=
                         '\n\n--- Attached Files ---\n' + attachmentContents.join('\n\n');
@@ -134,8 +136,6 @@ export class AIChatModel extends AbstractChatModel {
             }
             this.updateWriters([{ user: this._getAIUser() }]);
             await this._agentManager.generateResponse(enhancedMessage);
-            // Clear attachments after processing
-            this.input.clearAttachments();
         }
         catch (error) {
             const errorMessage = {
@@ -219,10 +219,7 @@ export class AIChatModel extends AbstractChatModel {
      */
     _onSettingsChanged() {
         const config = this._settingsModel.config;
-        this.config = {
-            ...config,
-            enableCodeToolbar: true
-        };
+        this.config = { ...config, enableCodeToolbar: true };
         // Agent manager handles agent recreation automatically via its own settings listener
     }
     /**
@@ -312,7 +309,7 @@ export class AIChatModel extends AbstractChatModel {
 <div class="jp-ai-tool-body">
 <div class="jp-ai-tool-section">
 <div class="jp-ai-tool-label">Input</div>
-<pre class="jp-ai-tool-code"><code>${JSON.stringify(event.data.input, null, 2)}</code></pre>
+<pre class="jp-ai-tool-code"><code>${event.data.input}</code></pre>
 </div>
 </div>
 </details>`,
@@ -394,7 +391,7 @@ export class AIChatModel extends AbstractChatModel {
 <div class="jp-ai-tool-body">
 <div class="jp-ai-tool-section">
 <div class="jp-ai-tool-label">${assistantName} wants to execute this tool. Do you approve?</div>
-<pre class="jp-ai-tool-code"><code>${JSON.stringify(event.data.toolInput, null, 2)}</code></pre>
+<pre class="jp-ai-tool-code"><code>${event.data.toolInput}</code></pre>
 </div>
 [APPROVAL_BUTTONS:${event.data.interruptionId}]
 </div>
@@ -414,7 +411,9 @@ export class AIChatModel extends AbstractChatModel {
 
 ${assistantName} wants to execute this tool. Do you approve?
 
-${JSON.stringify(event.data.toolInput, null, 2)}
+\`\`\`json
+${event.data.toolInput}
+\`\`\`
 
 [APPROVAL_BUTTONS:${event.data.interruptionId}]`,
             sender: this._getAIUser(),
@@ -434,7 +433,7 @@ ${JSON.stringify(event.data.toolInput, null, 2)}
         const assistantName = this._getAIUser().display_name;
         const approvalMessageId = UUID.uuid4();
         const toolsList = event.data.approvals
-            .map((info, index) => `**${index + 1}. ${info.toolName}**\n${JSON.stringify(info.toolInput, null, 2)}\n`)
+            .map((info, index) => `**${index + 1}. ${info.toolName}**\n\`\`\`json\n${info.toolInput}\n\`\`\`\n`)
             .join('\n\n');
         const approvalMessage = {
             body: `**🤖 Multiple Tool Approvals Required**
@@ -477,12 +476,19 @@ ${toolsList}
         const contents = [];
         for (const attachment of attachments) {
             try {
-                const fileContent = await this._readFileAttachment(attachment);
-                if (fileContent) {
-                    // Get file extension for syntax highlighting
-                    const fileExtension = PathExt.extname(attachment.value).toLowerCase();
-                    const language = fileExtension === '.ipynb' ? 'json' : '';
-                    contents.push(`**File: ${attachment.value}**\n\`\`\`${language}\n${fileContent}\n\`\`\``);
+                if (attachment.type === 'notebook' && attachment.cells?.length) {
+                    const cellContents = await this._readNotebookCells(attachment);
+                    if (cellContents) {
+                        contents.push(cellContents);
+                    }
+                }
+                else {
+                    const fileContent = await this._readFileAttachment(attachment);
+                    if (fileContent) {
+                        const fileExtension = PathExt.extname(attachment.value).toLowerCase();
+                        const language = fileExtension === '.ipynb' ? 'json' : '';
+                        contents.push(`**File: ${attachment.value}**\n\`\`\`${language}\n${fileContent}\n\`\`\``);
+                    }
                 }
             }
             catch (error) {
@@ -492,6 +498,127 @@ ${toolsList}
         }
         return contents;
     }
+    /**
+     * Reads the content of a notebook cell.
+     * @param attachment The notebook attachment to read
+     * @returns Cell content as string or null if unable to read
+     */
+    async _readNotebookCells(attachment) {
+        if (attachment.type !== 'notebook' || !attachment.cells) {
+            return null;
+        }
+        try {
+            const model = await this.input.documentManager?.services.contents.get(attachment.value);
+            if (!model || model.type !== 'notebook') {
+                return null;
+            }
+            const kernelLang = model.content?.metadata?.language_info?.name ||
+                model.content?.metadata?.kernelspec?.language ||
+                'text';
+            const selectedCells = attachment.cells
+                .map(cellInfo => {
+                const cell = model.content.cells.find((c) => c.id === cellInfo.id);
+                if (!cell) {
+                    return null;
+                }
+                const code = cell.source || '';
+                const cellType = cell.cell_type;
+                const lang = cellType === 'code' ? kernelLang : cellType;
+                const DISPLAY_PRIORITY = [
+                    'application/vnd.jupyter.widget-view+json',
+                    'application/javascript',
+                    'text/html',
+                    'image/svg+xml',
+                    'image/png',
+                    'image/jpeg',
+                    'text/markdown',
+                    'text/latex',
+                    'text/plain'
+                ];
+                function extractDisplay(data) {
+                    for (const mime of DISPLAY_PRIORITY) {
+                        if (!(mime in data)) {
+                            continue;
+                        }
+                        const value = data[mime];
+                        if (!value) {
+                            continue;
+                        }
+                        switch (mime) {
+                            case 'application/vnd.jupyter.widget-view+json':
+                                return `Widget: ${value.model_id ?? 'unknown model'}`;
+                            case 'image/png':
+                                return `![image](data:image/png;base64,${value.slice(0, 100)}...)`;
+                            case 'image/jpeg':
+                                return `![image](data:image/jpeg;base64,${value.slice(0, 100)}...)`;
+                            case 'image/svg+xml':
+                                return String(value).slice(0, 500) + '...\n[svg truncated]';
+                            case 'text/html':
+                                return (String(value).slice(0, 1000) +
+                                    (String(value).length > 1000 ? '\n...[truncated]' : ''));
+                            case 'text/markdown':
+                            case 'text/latex':
+                            case 'text/plain': {
+                                let text = Array.isArray(value)
+                                    ? value.join('')
+                                    : String(value);
+                                if (text.length > 2000) {
+                                    text = text.slice(0, 2000) + '\n...[truncated]';
+                                }
+                                return text;
+                            }
+                            default:
+                                return JSON.stringify(value).slice(0, 2000);
+                        }
+                    }
+                    return JSON.stringify(data).slice(0, 2000);
+                }
+                let outputs = '';
+                if (cellType === 'code' && Array.isArray(cell.outputs)) {
+                    outputs = cell.outputs
+                        .map((output) => {
+                        if (output.output_type === 'stream') {
+                            return output.text;
+                        }
+                        else if (output.output_type === 'error') {
+                            const err = output;
+                            return `${err.ename}: ${err.evalue}\n${(err.traceback || []).join('\n')}`;
+                        }
+                        else if (output.output_type === 'execute_result' ||
+                            output.output_type === 'display_data') {
+                            const data = output.data;
+                            if (!data) {
+                                return '';
+                            }
+                            try {
+                                return extractDisplay(data);
+                            }
+                            catch (e) {
+                                console.error('Cannot extract cell output', e);
+                                return '';
+                            }
+                        }
+                        return '';
+                    })
+                        .filter(Boolean)
+                        .join('\n---\n');
+                    if (outputs.length > 2000) {
+                        outputs = outputs.slice(0, 2000) + '\n...[truncated]';
+                    }
+                }
+                return (`**Cell [${cellInfo.id}] (${cellType}):**\n` +
+                    `\`\`\`${lang}\n${code}\n\`\`\`` +
+                    (outputs ? `\n**Outputs:**\n\`\`\`text\n${outputs}\n\`\`\`` : ''));
+            })
+                .filter(Boolean)
+                .join('\n\n');
+            return `**Notebook: ${attachment.value}**\n${selectedCells}`;
+        }
+        catch (error) {
+            console.warn(`Failed to read notebook cells from ${attachment.value}:`, error);
+            return null;
+        }
+    }
     /**
      * Reads the content of a file attachment.
      * @param attachment The file attachment to read

package/lib/completion/completion-provider.js

@@ -2,18 +2,6 @@ import { NotebookPanel } from '@jupyterlab/notebook';
 import { generateText } from 'ai';
 import { createCompletionModel } from '../providers/models';
 import { SECRETS_NAMESPACE } from '../tokens';
-/**
- * Default system prompt for code completion
- */
-const DEFAULT_COMPLETION_SYSTEM_PROMPT = `You are an AI code completion assistant. Complete the given code fragment with appropriate code.
-Rules:
-- Return only the completion text, no explanations or comments
-- Do not include code block markers (\`\`\` or similar)
-- Make completions contextually relevant to the surrounding code and notebook context
-- Follow the language-specific conventions and style guidelines for the detected programming language
-- Keep completions concise but functional
-- Do not repeat the existing code that comes before the cursor
-- Use variables, imports, functions, and other definitions from previous notebook cells when relevant`;
 /**
  * Default temperature for code completion (lower than chat for more deterministic results)
  */
@@ -50,7 +38,7 @@ export class AICompletionProvider {
      * Get the system prompt for the completion.
      */
     get systemPrompt() {
-        return DEFAULT_COMPLETION_SYSTEM_PROMPT;
+        return this._settingsModel.config.completionSystemPrompt;
     }
     /**
      * Fetch completion items based on the request and context.

package/lib/components/completion-status.d.ts

@@ -0,0 +1,20 @@
+import { AISettingsModel } from '../models/settings-model';
+import { ReactWidget } from '@jupyterlab/ui-components';
+/**
+ * The completion status props.
+ */
+interface ICompletionStatusProps {
+    /**
+     * The settings model.
+     */
+    settingsModel: AISettingsModel;
+}
+/**
+ * The completion status widget that will be added to the status bar.
+ */
+export declare class CompletionStatusWidget extends ReactWidget {
+    constructor(options: ICompletionStatusProps);
+    render(): JSX.Element;
+    private _props;
+}
+export {};

package/lib/components/completion-status.js

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import { jupyternautIcon } from '../icons';
+const COMPLETION_STATUS_CLASS = 'jp-ai-completion-status';
+const COMPLETION_DISABLED_CLASS = 'jp-ai-completion-disabled';
+/**
+ * The completion status component.
+ */
+function CompletionStatus(props) {
+    const [disabled, setDisabled] = useState(true);
+    const [title, setTitle] = useState('');
+    /**
+     * Handle changes in the settings.
+     */
+    useEffect(() => {
+        const stateChanged = (model) => {
+            if (model.config.useSameProviderForChatAndCompleter) {
+                setDisabled(false);
+                setTitle(`Completion using ${model.getDefaultProvider()?.model}`);
+            }
+            else if (model.config.activeCompleterProvider) {
+                setDisabled(false);
+                setTitle(`Completion using ${model.getProvider(model.config.activeCompleterProvider)?.model}`);
+            }
+            else {
+                setDisabled(true);
+                setTitle('No completion');
+            }
+        };
+        props.settingsModel.stateChanged.connect(stateChanged);
+        stateChanged(props.settingsModel);
+        return () => {
+            props.settingsModel.stateChanged.disconnect(stateChanged);
+        };
+    }, [props.settingsModel]);
+    return (React.createElement(jupyternautIcon.react, { className: disabled ? COMPLETION_DISABLED_CLASS : '', top: '2px', width: '16px', stylesheet: 'statusBar', title: title }));
+}
+/**
+ * The completion status widget that will be added to the status bar.
+ */
+export class CompletionStatusWidget extends ReactWidget {
+    constructor(options) {
+        super();
+        this.addClass(COMPLETION_STATUS_CLASS);
+        this._props = options;
+    }
+    render() {
+        return React.createElement(CompletionStatus, { ...this._props });
+    }
+    _props;
+}

package/lib/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './clear-button';
+export * from './completion-status';
 export * from './model-select';
 export * from './stop-button';
 export * from './token-usage-display';

package/lib/components/index.js

@@ -1,4 +1,5 @@
 export * from './clear-button';
+export * from './completion-status';
 export * from './model-select';
 export * from './stop-button';
 export * from './token-usage-display';