@datalayer/agent-runtimes 0.0.12 → 1.0.0

package/lib/AgentLexical.d.ts

@@ -28,7 +28,6 @@ import 'prismjs/components/prism-swift';
 import React from 'react';
 import '@datalayer/jupyter-lexical/style/index.css';
 import './examples/lexical/lexical-theme.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 import '../style/primer-primitives.css';
 export declare const AgentLexical: React.FC;
 export default AgentLexical;

package/lib/AgentLexical.js

@@ -61,7 +61,6 @@ import { editorConfig } from './examples/lexical/editorConfig';
 import { DEFAULT_MODEL } from './specs';
 import '@datalayer/jupyter-lexical/style/index.css';
 import './examples/lexical/lexical-theme.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 import '../style/primer-primitives.css';
 setupPrimerPortals();
 const BASE_URL = window.location.origin;

package/lib/examples/AgentRuntimeLexical2Example.d.ts

@@ -27,7 +27,6 @@ import 'prismjs/components/prism-rust';
 import 'prismjs/components/prism-swift';
 import type { ServiceManager } from '@jupyterlab/services';
 import '@datalayer/jupyter-lexical/style/index.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 import './lexical/lexical-theme.css';
 /**
  * Chat Lexical Example with Simple integration

package/lib/examples/AgentRuntimeLexical2Example.js

@@ -54,7 +54,6 @@ import { ChatFloating, useChatStore, useFrontendTool, DatalayerInferenceProvider
 import { useLexicalToolActions, ActionRegistrar, } from '../tools/adapters/copilotkit/lexicalHooks';
 import { editorConfig } from './lexical/editorConfig';
 import '@datalayer/jupyter-lexical/style/index.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 import './lexical/lexical-theme.css';
 // Fixed lexical document ID
 const LEXICAL_ID = 'chat-popup-lexical-example';

package/lib/examples/AgentRuntimeLexicalExample.d.ts

@@ -25,7 +25,6 @@ import 'prismjs/components/prism-swift';
 import type { ServiceManager } from '@jupyterlab/services';
 import '@datalayer/jupyter-lexical/style/index.css';
 import './lexical/lexical-theme.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 /**
  * Main Agent Runtime lexical example component
  */

package/lib/examples/AgentRuntimeLexicalExample.js

@@ -54,7 +54,6 @@ import { useLexicalTools } from '../tools/adapters/agent-runtimes/lexicalHooks';
 import { editorConfig } from './lexical/editorConfig';
 import '@datalayer/jupyter-lexical/style/index.css';
 import './lexical/lexical-theme.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 // Fixed lexical document ID
 const LEXICAL_ID = 'agui-lexical-example';
 // Base URL for agent-runtimes server

package/lib/examples/AgentRuntimeLexicalSidebarExample.d.ts

@@ -26,7 +26,6 @@ import 'prismjs/components/prism-rust';
 import 'prismjs/components/prism-swift';
 import type { ServiceManager } from '@jupyterlab/services';
 import '@datalayer/jupyter-lexical/style/index.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 import './lexical/lexical-theme.css';
 /**
  * Agent Runtime Lexical Sidebar Example with Simple integration

package/lib/examples/AgentRuntimeLexicalSidebarExample.js

@@ -54,7 +54,6 @@ import { useChatInlineToolbarItems } from '../lexical/useChatInlineToolbarItems'
 import { useLexicalTools } from '../tools/adapters/agent-runtimes/lexicalHooks';
 import { editorConfig } from './lexical/editorConfig';
 import '@datalayer/jupyter-lexical/style/index.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 import './lexical/lexical-theme.css';
 // Fixed lexical document ID
 const LEXICAL_ID = 'chat-lexical-example';

package/lib/examples/CopilotKitLexicalExample.d.ts

@@ -26,7 +26,6 @@ import 'prismjs/components/prism-swift';
 import type { ServiceManager } from '@jupyterlab/services';
 import '@datalayer/jupyter-lexical/style/index.css';
 import '@copilotkit/react-ui/styles.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 import './lexical/lexical-theme.css';
 /**
  * Main CopilotKit lexical example component

package/lib/examples/CopilotKitLexicalExample.js

@@ -53,7 +53,6 @@ import { ActionRegistrar, useLexicalToolActions, } from '../tools/adapters/copil
 import { editorConfig } from './lexical/editorConfig';
 import '@datalayer/jupyter-lexical/style/index.css';
 import '@copilotkit/react-ui/styles.css';
-import '@datalayer/jupyter-lexical/style/modal-overrides.css';
 import './lexical/lexical-theme.css';
 // Fixed lexical document ID
 const LEXICAL_ID = 'agui-lexical-example';

package/lib/lexical/ChatInlinePlugin.js

@@ -35,7 +35,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * @module lexical/ChatInlinePlugin
  */
-import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
 import { $getSelection, $isRangeSelection, $createParagraphNode, $createTextNode, TextNode, COMMAND_PRIORITY_LOW, createCommand, } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
@@ -179,12 +179,33 @@ export function ChatInlinePlugin({ protocol, isOpen, onClose, pendingPrompt, onP
     // Selection tracking
     const { range } = useRange();
     const selectedText = useSelectionText();
-    // Update floating reference position based on selection
+    // ---------------------------------------------------------------
+    // Latch: save position & text when AI panel opens so that a
+    // transient selection loss (e.g. portal render triggering
+    // selectionchange) does not unmount the panel.
+    // ---------------------------------------------------------------
+    const savedRectRef = useRef(null);
+    const savedTextRef = useRef('');
+    useEffect(() => {
+        if (isOpen && range) {
+            // Keep saving the latest rect/text while open and range is valid
+            savedRectRef.current = range.getBoundingClientRect();
+            savedTextRef.current = selectedText || '';
+        }
+        if (!isOpen) {
+            savedRectRef.current = null;
+            savedTextRef.current = '';
+        }
+    }, [isOpen, range, selectedText]);
+    // Effective values: prefer live selection, fall back to saved snapshot
+    const effectiveRect = useMemo(() => range?.getBoundingClientRect() ?? savedRectRef.current ?? null, [range]);
+    const effectiveText = range ? selectedText : savedTextRef.current;
+    // Update floating reference position based on selection (or saved rect)
     useLayoutEffect(() => {
         setReference({
-            getBoundingClientRect: () => range?.getBoundingClientRect() || new DOMRect(),
+            getBoundingClientRect: () => effectiveRect || new DOMRect(),
         });
-    }, [setReference, range]);
+    }, [setReference, effectiveRect]);
     // Handle replace selection
     const handleReplaceSelection = useCallback((text) => {
         editor.update(() => {
@@ -219,8 +240,8 @@ export function ChatInlinePlugin({ protocol, isOpen, onClose, pendingPrompt, onP
             }
         });
     }, [editor]);
-    // Don't render if not open or no selection
-    if (!isOpen || range === null) {
+    // Don't render if not open, or if we have neither a live range nor a saved rect
+    if (!isOpen || (range === null && savedRectRef.current === null)) {
         return null;
     }
     const portalTarget = portalContainer || document.body;
@@ -236,6 +257,6 @@ export function ChatInlinePlugin({ protocol, isOpen, onClose, pendingPrompt, onP
             width: editor._rootElement
                 ? editor._rootElement.getBoundingClientRect().width - MARGIN_X * 2
                 : 'auto',
-        }, children: _jsx(ChatInline, { selectedText: selectedText, protocol: protocol, onReplaceSelection: handleReplaceSelection, onInsertInline: handleInsertInline, onInsertBelow: handleInsertBelow, onClose: onClose, onSaveSelection: saveSelection, onRestoreSelection: restoreSelection, pendingPrompt: pendingPrompt, onPendingPromptConsumed: onPendingPromptConsumed }) }), portalTarget);
+        }, children: _jsx(ChatInline, { selectedText: effectiveText, protocol: protocol, onReplaceSelection: handleReplaceSelection, onInsertInline: handleInsertInline, onInsertBelow: handleInsertBelow, onClose: onClose, onSaveSelection: saveSelection, onRestoreSelection: restoreSelection, pendingPrompt: pendingPrompt, onPendingPromptConsumed: onPendingPromptConsumed }) }), portalTarget);
 }
 export default ChatInlinePlugin;

package/lib/lexical/index.d.ts

@@ -4,4 +4,4 @@
  * @module lexical
  */
 export { ChatInlinePlugin, type ChatInlinePluginProps, SAVE_SELECTION_COMMAND, RESTORE_SELECTION_COMMAND, } from './ChatInlinePlugin';
-export { useChatInlineToolbarItems, type ChatInlineToolbarState, } from './useChatInlineToolbarItems';
+export { useChatInlineToolbarItems, type ChatInlineToolbarOptions, type ChatInlineToolbarState, } from './useChatInlineToolbarItems';

package/lib/lexical/useChatInlineToolbarItems.d.ts

@@ -18,11 +18,18 @@ export interface ChatInlineToolbarState {
     /** Close the AI panel */
     closeAi: () => void;
 }
+/**
+ * Options for useChatInlineToolbarItems.
+ */
+export interface ChatInlineToolbarOptions {
+    /** When true the AI sparkle button is rendered in a disabled state. */
+    disabled?: boolean;
+}
 /**
  * Hook that creates ToolbarItem[] for AI actions in the floating toolbar.
  *
- * Returns toolbar items (divider + AI dropdown + sparkle button) and
+ * Returns toolbar items (divider + AI sparkle button) and
  * state for controlling the ChatInline panel.
  */
-export declare function useChatInlineToolbarItems(): ChatInlineToolbarState;
+export declare function useChatInlineToolbarItems(options?: ChatInlineToolbarOptions): ChatInlineToolbarState;
 export default useChatInlineToolbarItems;

package/lib/lexical/useChatInlineToolbarItems.js

@@ -6,13 +6,14 @@
  * useChatInlineToolbarItems - Hook that creates ToolbarItem[] for the
  * FloatingTextFormatToolbarPlugin's extraItems prop.
  *
- * Registers an AI sparkle button + dropdown with AI actions
- * (Improve, Fix, Simplify, Add detail, Summarise, Explain, Translate)
- * into the floating inline toolbar.
+ * Registers an AI sparkle button in the floating inline toolbar.
+ * Clicking the sparkle button directly opens the ChatInlinePlugin
+ * floating panel, where users can type free-form AI prompts.
  *
  * Usage:
  * ```tsx
- * const { toolbarItems, isAiOpen, submitPrompt, closeAi } = useChatInlineToolbarItems();
+ * const { toolbarItems, isAiOpen, pendingPrompt, clearPendingPrompt, closeAi } =
+ *   useChatInlineToolbarItems();
  *
  * <FloatingTextFormatToolbarPlugin
  *   anchorElem={floatingAnchorElem}
@@ -20,82 +21,25 @@
  *   extraItems={toolbarItems}
  * />
  *
- * {isAiOpen && <ChatInlinePlugin ... />}
+ * <ChatInlinePlugin
+ *   isOpen={isAiOpen}
+ *   onClose={closeAi}
+ *   pendingPrompt={pendingPrompt}
+ *   onPendingPromptConsumed={clearPendingPrompt}
+ * />
  * ```
  *
  * @module lexical/useChatInlineToolbarItems
  */
 import { useState, useMemo, useCallback } from 'react';
-import { SparkleFillIcon, PencilIcon, CheckIcon, XIcon, PlusIcon, CopyIcon, SyncIcon, InfoIcon, } from '@primer/octicons-react';
-/**
- * AI action groups for the toolbar dropdown.
- */
-const AI_ACTIONS = {
-    modify: [
-        {
-            key: 'ai-improve',
-            label: 'Improve writing',
-            prompt: 'Improve the quality of the text',
-            icon: PencilIcon,
-        },
-        {
-            key: 'ai-fix',
-            label: 'Fix mistakes',
-            prompt: 'Fix any typos or general errors in the text',
-            icon: CheckIcon,
-        },
-        {
-            key: 'ai-simplify',
-            label: 'Simplify',
-            prompt: 'Shorten the text, simplifying it',
-            icon: XIcon,
-        },
-        {
-            key: 'ai-detail',
-            label: 'Add more detail',
-            prompt: 'Lengthen the text, going into more detail',
-            icon: PlusIcon,
-        },
-    ],
-    generate: [
-        {
-            key: 'ai-summarise',
-            label: 'Summarise',
-            prompt: 'Summarise the text',
-            icon: CopyIcon,
-        },
-        {
-            key: 'ai-explain',
-            label: 'Explain',
-            prompt: 'Explain what the text is about',
-            icon: InfoIcon,
-        },
-    ],
-    translate: [
-        'Arabic',
-        'Chinese',
-        'Dutch',
-        'English',
-        'French',
-        'German',
-        'Japanese',
-        'Korean',
-        'Portuguese',
-        'Spanish',
-    ].map(lang => ({
-        key: `ai-translate-${lang.toLowerCase()}`,
-        label: lang,
-        prompt: `Translate text into the ${lang} language`,
-        icon: SyncIcon,
-    })),
-};
+import { SparkleFillIcon } from '@primer/octicons-react';
 /**
  * Hook that creates ToolbarItem[] for AI actions in the floating toolbar.
  *
- * Returns toolbar items (divider + AI dropdown + sparkle button) and
+ * Returns toolbar items (divider + AI sparkle button) and
  * state for controlling the ChatInline panel.
  */
-export function useChatInlineToolbarItems() {
+export function useChatInlineToolbarItems(options) {
     const [isAiOpen, setIsAiOpen] = useState(false);
     const [pendingPrompt, setPendingPrompt] = useState(null);
     const openAi = useCallback(() => {
@@ -112,27 +56,8 @@ export function useChatInlineToolbarItems() {
     const clearPendingPrompt = useCallback(() => {
         setPendingPrompt(null);
     }, []);
+    const isDisabled = options?.disabled ?? false;
     const toolbarItems = useMemo(() => {
-        const allOptions = [
-            ...AI_ACTIONS.modify.map(action => ({
-                key: action.key,
-                label: action.label,
-                icon: action.icon,
-                onClick: () => submitPrompt(action.prompt),
-            })),
-            ...AI_ACTIONS.generate.map(action => ({
-                key: action.key,
-                label: action.label,
-                icon: action.icon,
-                onClick: () => submitPrompt(action.prompt),
-            })),
-            ...AI_ACTIONS.translate.map(action => ({
-                key: action.key,
-                label: action.label,
-                icon: action.icon,
-                onClick: () => submitPrompt(action.prompt),
-            })),
-        ];
         return [
             {
                 key: 'ai-divider',
@@ -141,15 +66,18 @@ export function useChatInlineToolbarItems() {
             },
             {
                 key: 'ai-actions',
-                type: 'dropdown',
+                type: 'button',
                 order: 901,
                 ariaLabel: 'AI Actions',
-                title: 'AI Actions',
+                title: isDisabled
+                    ? 'Assign an agent to enable AI actions'
+                    : 'AI Actions',
                 icon: SparkleFillIcon,
-                options: allOptions,
+                onClick: openAi,
+                disabled: isDisabled,
             },
         ];
-    }, [submitPrompt]);
+    }, [openAi, isDisabled]);
     return {
         toolbarItems,
         isAiOpen,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/agent-runtimes",
-  "version": "0.0.12",
+  "version": "1.0.0",
   "type": "module",
   "workspaces": [
     ".",