@datalayer/agent-runtimes 1.0.2 → 1.0.3

package/lib/{components/chat/components → chat}/parts/ReasoningPart.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Reasoning message part display component.
  * Renders AI reasoning/thinking content with collapsible section.
  *
- * @module components/chat/components/display/ReasoningPart
+ * @module chat/display/ReasoningPart
  */
 import React from 'react';
 import { Text, Button } from '@primer/react';

package/lib/{components/chat/components → chat}/parts/TextPart.d.ts

@@ -2,7 +2,7 @@
  * Text message part display component.
  * Renders text content with markdown support, copy button, and regenerate action.
  *
- * @module components/chat/components/display/TextPart
+ * @module chat/display/TextPart
  */
 import type { UIMessage } from 'ai';
 export interface TextPartProps {

package/lib/{components/chat/components → chat}/parts/ToolPart.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Tool call display component.
  * Renders tool execution with input, output, and status.
  *
- * @module components/chat/components/display/ToolPart
+ * @module chat/display/ToolPart
  */
 import React from 'react';
 import { Text, Button } from '@primer/react';

package/lib/{components/chat/components → chat}/parts/index.d.ts

@@ -1,9 +1,10 @@
 /**
  * Display components barrel export.
  *
- * @module components/chat/components/parts
+ * @module chat/parts
  */
 export { TextPart, type TextPartProps } from './TextPart';
 export { ReasoningPart, type ReasoningPartProps } from './ReasoningPart';
 export { ToolPart, type ToolPartProps } from './ToolPart';
 export { DynamicToolPart, type DynamicToolPartProps } from './DynamicToolPart';
+export { MessagePart, type MessagePartProps } from './MessagePart';

package/lib/{components/chat/components → chat}/parts/index.js

@@ -5,9 +5,10 @@
 /**
  * Display components barrel export.
  *
- * @module components/chat/components/parts
+ * @module chat/parts
  */
 export { TextPart } from './TextPart';
 export { ReasoningPart } from './ReasoningPart';
 export { ToolPart } from './ToolPart';
 export { DynamicToolPart } from './DynamicToolPart';
+export { MessagePart } from './MessagePart';

package/lib/chat/prompt/InputFooter.d.ts

@@ -0,0 +1,43 @@
+import type { BuiltinTool, ContextSnapshotData, MCPServerConfig, ModelConfig, SkillInfo } from '../../types';
+export interface InputToolbarProps {
+    input: string;
+    setInput: (value: string) => void;
+    isLoading: boolean;
+    placeholder?: string;
+    autoFocus: boolean;
+    focusTrigger?: number;
+    padding: number;
+    onSend: () => void;
+    onStop: () => void;
+    showTokenUsage: boolean;
+    agentUsage?: ContextSnapshotData;
+    showModelSelector: boolean;
+    showToolsMenu: boolean;
+    showSkillsMenu: boolean;
+    codemodeEnabled: boolean;
+    isA2AProtocol: boolean;
+    hasConfigData: boolean;
+    hasSkillsData: boolean;
+    models: ModelConfig[];
+    selectedModel: string;
+    onModelSelect: (modelId: string) => void;
+    availableTools: BuiltinTool[];
+    /** MCP servers to render (already filtered by selection) */
+    mcpServers: MCPServerConfig[];
+    enabledMcpTools: Map<string, Set<string>>;
+    enabledMcpToolCount: number;
+    onToggleMcpTool: (serverId: string, toolName: string) => void;
+    onToggleAllMcpServerTools: (serverId: string, toolNames: string[], enable: boolean) => void;
+    skills: SkillInfo[];
+    skillsLoading: boolean;
+    enabledSkills: Set<string>;
+    onToggleSkill: (skillId: string) => void;
+    onToggleAllSkills: (skillIds: string[], enable: boolean) => void;
+    /** API base URL passed to MCP / Sandbox indicators */
+    apiBase?: string;
+    /** Auth token passed to MCP / Sandbox indicators */
+    authToken?: string;
+    /** Agent ID passed to Sandbox indicator for agent-scoped status */
+    agentId?: string;
+}
+export declare function InputToolbar({ input, setInput, isLoading, placeholder, autoFocus, focusTrigger, padding, onSend, onStop, showTokenUsage, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, isA2AProtocol, hasConfigData, hasSkillsData, models, selectedModel, onModelSelect, availableTools, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, apiBase, authToken, agentId, }: InputToolbarProps): import("react/jsx-runtime").JSX.Element;

package/lib/chat/prompt/InputFooter.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * InputFooter — Bottom toolbar below the InputPrompt component.
+ *
+ * Contains the InputPrompt component, the TokenUsageBar, and the
+ * model / tools / skills action-menu selectors.
+ *
+ * @module chat/prompt/InputFooter
+ */
+import { Text, Button, ActionMenu, ActionList, ToggleSwitch, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ToolsIcon, BriefcaseIcon, AiModelIcon } from '@primer/octicons-react';
+import { InputPrompt } from './InputPrompt';
+import { TokenUsageBar } from '../usage/TokenUsageBar';
+import { McpStatusIndicator } from '../indicators/McpStatusIndicator';
+import { SandboxStatusIndicator } from '../indicators/SandboxStatusIndicator';
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function InputToolbar({ input, setInput, isLoading, placeholder, autoFocus, focusTrigger, padding, onSend, onStop, showTokenUsage, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, isA2AProtocol, hasConfigData, hasSkillsData, models, selectedModel, onModelSelect, availableTools, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, apiBase, authToken, agentId, }) {
+    // Show token usage when we have valid context data
+    const hasContext = agentUsage && !agentUsage.error && agentUsage.totalTokens > 0;
+    return (_jsxs(Box, { children: [_jsx(InputPrompt, { placeholder: placeholder || 'Type a message...', isLoading: isLoading, onSend: onSend, onStop: onStop, autoFocus: autoFocus, focusTrigger: focusTrigger, padding: padding, value: input, onChange: setInput, footerRightContent: _jsxs(_Fragment, { children: [_jsx(SandboxStatusIndicator, { apiBase: apiBase, authToken: authToken, agentId: agentId }), _jsx(McpStatusIndicator, { apiBase: apiBase, authToken: authToken })] }) }), showTokenUsage && hasContext && (_jsx(TokenUsageBar, { agentUsage: agentUsage, padding: padding })), (showModelSelector || showToolsMenu || showSkillsMenu) &&
+                (hasConfigData || hasSkillsData) && (_jsxs(Box, { sx: {
+                    display: 'flex',
+                    gap: 2,
+                    px: padding,
+                    py: 1,
+                    borderTop: '1px solid',
+                    borderColor: 'border.default',
+                    alignItems: 'center',
+                    bg: 'canvas.subtle',
+                }, children: [showToolsMenu && (_jsx(ToolsMenu, { codemodeEnabled: codemodeEnabled, mcpServers: mcpServers, enabledMcpTools: enabledMcpTools, enabledMcpToolCount: enabledMcpToolCount, onToggleMcpTool: onToggleMcpTool, onToggleAllMcpServerTools: onToggleAllMcpServerTools, availableTools: availableTools })), showSkillsMenu && (_jsx(SkillsMenu, { skills: skills, skillsLoading: skillsLoading, enabledSkills: enabledSkills, onToggleSkill: onToggleSkill, onToggleAllSkills: onToggleAllSkills })), showModelSelector && models.length > 0 && selectedModel && (_jsx(ModelSelector, { models: models, selectedModel: selectedModel, onModelSelect: onModelSelect, isA2AProtocol: isA2AProtocol }))] }))] }));
+}
+// ---------------------------------------------------------------------------
+// ToolsMenu (private sub-component)
+// ---------------------------------------------------------------------------
+function ToolsMenu({ codemodeEnabled, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, availableTools, }) {
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { type: "button", variant: "invisible", size: "small", leadingVisual: ToolsIcon, children: _jsxs(Text, { sx: { fontSize: 0 }, children: ["Tools", enabledMcpToolCount > 0 && ` (${enabledMcpToolCount})`] }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: { maxHeight: '60vh', overflowY: 'auto' }, children: _jsxs(ActionList, { children: [codemodeEnabled && (_jsx(ActionList.Group, { title: "Codemode", children: _jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "MCP tools are accessible via Codemode meta-tools (search_tools, list_tool_names, execute_code)." }) }) })), mcpServers.length > 0 ? (mcpServers.map(server => {
+                                const serverTools = enabledMcpTools.get(server.id);
+                                const allToolNames = server.tools.map(t => t.name);
+                                const enabledCount = serverTools?.size ?? 0;
+                                const allEnabled = enabledCount === allToolNames.length &&
+                                    allToolNames.length > 0;
+                                return (_jsxs(ActionList.Group, { title: `${server.name}${server.isAvailable ? '' : ' (unavailable)'}`, children: [server.isAvailable && server.tools.length > 0 && (_jsxs(Box, { sx: {
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'space-between',
+                                                px: 3,
+                                                py: 2,
+                                                borderBottom: '1px solid',
+                                                borderColor: 'border.muted',
+                                            }, children: [_jsxs(Text, { id: `toggle-all-${server.id}`, sx: {
+                                                        fontSize: 0,
+                                                        fontWeight: 'semibold',
+                                                        color: 'fg.muted',
+                                                    }, children: ["Enable all (", enabledCount, "/", allToolNames.length, ")"] }), _jsx(ToggleSwitch, { size: "small", checked: allEnabled, onClick: () => onToggleAllMcpServerTools(server.id, allToolNames, !allEnabled), "aria-labelledby": `toggle-all-${server.id}` })] })), server.isAvailable && server.tools.length > 0 ? (server.tools.map(tool => {
+                                            const isEnabled = serverTools?.has(tool.name) ?? false;
+                                            return (_jsxs(Box, { sx: {
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'space-between',
+                                                    px: 3,
+                                                    py: 2,
+                                                    '&:hover': {
+                                                        backgroundColor: 'canvas.subtle',
+                                                    },
+                                                }, children: [_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { id: `toggle-tool-${server.id}-${tool.name}`, sx: { fontWeight: 'semibold' }, children: tool.name }), tool.description && (_jsx(Text, { sx: {
+                                                                    display: 'block',
+                                                                    fontSize: 0,
+                                                                    color: 'fg.muted',
+                                                                    overflow: 'hidden',
+                                                                    textOverflow: 'ellipsis',
+                                                                    whiteSpace: 'nowrap',
+                                                                }, children: tool.description }))] }), _jsx(ToggleSwitch, { size: "small", checked: isEnabled, onClick: () => onToggleMcpTool(server.id, tool.name), "aria-labelledby": `toggle-tool-${server.id}-${tool.name}` })] }, `${server.id}-${tool.name}`));
+                                        })) : server.isAvailable ? (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "No tools discovered" }) })) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "Server unavailable" }) }))] }, server.id));
+                            })) : (_jsx(ActionList.Group, { title: "Available Tools", children: availableTools.length > 0 ? (availableTools.map(tool => (_jsxs(ActionList.Item, { disabled: true, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(Box, { sx: {
+                                                    width: 8,
+                                                    height: 8,
+                                                    borderRadius: '50%',
+                                                    backgroundColor: 'success.emphasis',
+                                                } }) }), tool.name] }, tool.id)))) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "No tools available" }) })) }))] }) }) })] }));
+}
+// ---------------------------------------------------------------------------
+// SkillsMenu (private sub-component)
+// ---------------------------------------------------------------------------
+function SkillsMenu({ skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, }) {
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { type: "button", variant: "invisible", size: "small", leadingVisual: BriefcaseIcon, children: _jsxs(Text, { sx: { fontSize: 0 }, children: ["Skills", enabledSkills.size > 0 && ` (${enabledSkills.size})`] }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: { maxHeight: '60vh', overflowY: 'auto' }, children: _jsx(ActionList, { children: skillsLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "Loading skills..." }) })) : skills.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                        px: 3,
+                                        py: 2,
+                                        borderBottom: '1px solid',
+                                        borderColor: 'border.muted',
+                                    }, children: [_jsxs(Text, { id: "toggle-all-skills", sx: {
+                                                fontSize: 0,
+                                                fontWeight: 'semibold',
+                                                color: 'fg.muted',
+                                            }, children: ["Enable all (", enabledSkills.size, "/", skills.length, ")"] }), _jsx(ToggleSwitch, { size: "small", checked: enabledSkills.size === skills.length, onClick: () => onToggleAllSkills(skills.map(s => s.id), enabledSkills.size !== skills.length), "aria-labelledby": "toggle-all-skills" })] }), skills.map(skill => (_jsxs(Box, { sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                        px: 3,
+                                        py: 2,
+                                        '&:hover': {
+                                            backgroundColor: 'canvas.subtle',
+                                        },
+                                    }, children: [_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { id: `toggle-skill-${skill.id}`, sx: { fontWeight: 'semibold' }, children: skill.name }), skill.description && (_jsx(Text, { sx: {
+                                                        display: 'block',
+                                                        fontSize: 0,
+                                                        color: 'fg.muted',
+                                                        overflow: 'hidden',
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                    }, children: skill.description }))] }), _jsx(ToggleSwitch, { size: "small", checked: enabledSkills.has(skill.id), onClick: () => onToggleSkill(skill.id), "aria-labelledby": `toggle-skill-${skill.id}` })] }, skill.id)))] })) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "No skills available" }) })) }) }) })] }));
+}
+// ---------------------------------------------------------------------------
+// ModelSelector (private sub-component)
+// ---------------------------------------------------------------------------
+function ModelSelector({ models, selectedModel, onModelSelect, isA2AProtocol, }) {
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+        }, children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { type: "button", variant: "invisible", size: "small", leadingVisual: AiModelIcon, disabled: isA2AProtocol, sx: isA2AProtocol
+                                ? { opacity: 0.5, cursor: 'not-allowed' }
+                                : undefined, children: _jsx(Text, { sx: { fontSize: 0 }, children: models.find(m => m.id === selectedModel)?.name || 'Select Model' }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "end", children: _jsx(ActionList, { selectionVariant: "single", children: models.map(modelItem => (_jsxs(ActionList.Item, { selected: selectedModel === modelItem.id, onSelect: () => onModelSelect(modelItem.id), disabled: modelItem.isAvailable === false || isA2AProtocol, sx: modelItem.isAvailable === false
+                                    ? { color: 'fg.muted' }
+                                    : undefined, children: [modelItem.name, modelItem.isAvailable === false && (_jsx(ActionList.Description, { variant: "block", children: "Missing API key" }))] }, modelItem.id))) }) })] }), isA2AProtocol && (_jsx(Text, { sx: { fontSize: 0, color: 'attention.fg', mt: 1 }, children: "A2A: Model set by agent config" }))] }));
+}

package/lib/chat/prompt/InputPrompt.d.ts

@@ -0,0 +1,60 @@
+/**
+ * InputPrompt — Integrated chat input component.
+ *
+ * Layout (top → bottom):
+ *   1. Header   – slot for dropdowns / indicators
+ *   2. Input    – "text" (textarea) or "lexical" (plain-text Lexical editor)
+ *   3. Footer   – left slot for controls, submit / stop buttons on the right
+ *
+ * The component is wrapped in a rounded container with a subtle border,
+ * giving it a more integrated visual appearance.
+ *
+ * @module chat/prompt/InputPrompt
+ */
+import type { ReactNode } from 'react';
+/** Input variant type. */
+export type InputPromptVariant = 'text' | 'lexical';
+/**
+ * Props for the InputPrompt component.
+ */
+export interface InputPromptProps {
+    /** Input variant — "text" (default) or "lexical" */
+    variant?: InputPromptVariant;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the agent is loading / streaming */
+    isLoading?: boolean;
+    /** Callback when a message is submitted */
+    onSend: (message: string) => void;
+    /** Callback when the stop button is clicked */
+    onStop?: () => void;
+    /** Auto-focus the input on mount */
+    autoFocus?: boolean;
+    /** Trigger value change to refocus input */
+    focusTrigger?: number;
+    /** Whether to show a border on top of the outer wrapper */
+    showBorderTop?: boolean;
+    /** Whether to use a subtle background */
+    showBackground?: boolean;
+    /** Custom outer padding (default: 3) */
+    padding?: number;
+    /** Whether the prompt is disabled */
+    disabled?: boolean;
+    /** Additional sx props for the outer container */
+    sx?: Record<string, unknown>;
+    /** Controlled input value (external state) */
+    value?: string;
+    /** Controlled input onChange (external state) */
+    onChange?: (value: string) => void;
+    /** Content rendered in the header slot */
+    headerContent?: ReactNode;
+    /** Content rendered on the left side of the footer */
+    footerContent?: ReactNode;
+    /** Content rendered on the right side of the footer, next to send/stop */
+    footerRightContent?: ReactNode;
+}
+/**
+ * InputPrompt — Integrated chat input with header, input area, and footer.
+ */
+export declare function InputPrompt({ variant, placeholder, isLoading, onSend, onStop, autoFocus, focusTrigger, showBorderTop, showBackground, padding, disabled, sx, value: controlledValue, onChange: controlledOnChange, headerContent, footerContent, footerRightContent, }: InputPromptProps): import("react/jsx-runtime").JSX.Element;
+export default InputPrompt;

package/lib/chat/prompt/InputPrompt.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Box } from '@datalayer/primer-addons';
+import { InputPromptHeader } from './InputPromptHeader';
+import { InputPromptFooter } from './InputPromptFooter';
+import { InputPromptText } from './InputPromptText';
+import { InputPromptLexical } from './InputPromptLexical';
+/**
+ * InputPrompt — Integrated chat input with header, input area, and footer.
+ */
+export function InputPrompt({ variant = 'text', placeholder = 'Ask anything…', isLoading = false, onSend, onStop, autoFocus = false, focusTrigger, showBorderTop = true, showBackground = true, padding = 3, disabled = false, sx, value: controlledValue, onChange: controlledOnChange, headerContent, footerContent, footerRightContent, }) {
+    // ---- Controlled / uncontrolled state -----------------------------------
+    const [internalInput, setInternalInput] = useState('');
+    const input = controlledValue !== undefined ? controlledValue : internalInput;
+    const setInput = controlledOnChange !== undefined ? controlledOnChange : setInternalInput;
+    // ---- Refs (text variant only) ------------------------------------------
+    const inputRef = useRef(null);
+    // ---- Auto-focus --------------------------------------------------------
+    useEffect(() => {
+        if (autoFocus && variant === 'text' && inputRef.current) {
+            const t = setTimeout(() => inputRef.current?.focus(), 100);
+            return () => clearTimeout(t);
+        }
+    }, [autoFocus, variant]);
+    // ---- Refocus when focusTrigger changes ---------------------------------
+    useEffect(() => {
+        if (focusTrigger !== undefined &&
+            focusTrigger > 0 &&
+            variant === 'text' &&
+            inputRef.current) {
+            const t = setTimeout(() => inputRef.current?.focus(), 150);
+            return () => clearTimeout(t);
+        }
+    }, [focusTrigger, variant]);
+    // ---- Refocus after loading completes -----------------------------------
+    const wasLoadingRef = useRef(false);
+    useEffect(() => {
+        if (wasLoadingRef.current &&
+            !isLoading &&
+            variant === 'text' &&
+            inputRef.current) {
+            const t = setTimeout(() => inputRef.current?.focus(), 50);
+            return () => clearTimeout(t);
+        }
+        wasLoadingRef.current = isLoading;
+    }, [isLoading, variant]);
+    // ---- Send / Stop handlers ----------------------------------------------
+    const handleSend = useCallback(() => {
+        if (!input.trim() || isLoading || disabled)
+            return;
+        const message = input.trim();
+        if (controlledValue === undefined) {
+            setInput('');
+        }
+        onSend(message);
+    }, [input, isLoading, disabled, onSend, setInput, controlledValue]);
+    const handleStop = useCallback(() => {
+        onStop?.();
+    }, [onStop]);
+    // ---- Render ------------------------------------------------------------
+    return (_jsx(Box, { sx: sx, children: _jsx(Box, { sx: {
+                p: padding,
+                ...(showBorderTop && {
+                    borderTop: '1px solid',
+                    borderColor: 'border.default',
+                }),
+                ...(showBackground && {
+                    bg: 'canvas.subtle',
+                }),
+            }, children: _jsxs(Box, { sx: {
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    bg: 'canvas.default',
+                    overflow: 'hidden',
+                    transition: 'border-color 0.2s ease',
+                    '&:focus-within': {
+                        borderColor: 'accent.fg',
+                        boxShadow: (t) => `0 0 0 1px ${t?.colors?.accent?.fg ?? '#0969da'}`,
+                    },
+                }, children: [_jsx(InputPromptHeader, { children: headerContent }), variant === 'lexical' ? (_jsx(InputPromptLexical, { value: input, onChange: setInput, placeholder: placeholder, disabled: isLoading || disabled, onSubmit: handleSend, autoFocus: autoFocus })) : (_jsx(InputPromptText, { value: input, onChange: setInput, placeholder: placeholder, disabled: isLoading || disabled, onSubmit: handleSend, inputRef: inputRef })), _jsx(InputPromptFooter, { isLoading: isLoading, sendDisabled: !input.trim() || disabled, onSend: handleSend, onStop: handleStop, rightContent: footerRightContent, children: footerContent })] }) }) }));
+}
+export default InputPrompt;

package/lib/chat/prompt/InputPromptFooter.d.ts

@@ -0,0 +1,25 @@
+/**
+ * InputPromptFooter — Footer area of the InputPrompt component.
+ *
+ * Renders a horizontal bar below the input area with a left slot
+ * for dropdowns / indicators and submit / stop buttons on the right.
+ *
+ * @module chat/prompt/InputPromptFooter
+ */
+import type { ReactNode } from 'react';
+export interface InputPromptFooterProps {
+    /** Content to render on the left side (dropdowns, indicators, etc.) */
+    children?: ReactNode;
+    /** Content to render on the right side, just before the send/stop button */
+    rightContent?: ReactNode;
+    /** Whether the agent is loading / streaming */
+    isLoading?: boolean;
+    /** Whether the send button should be disabled */
+    sendDisabled?: boolean;
+    /** Callback when the send button is clicked */
+    onSend: () => void;
+    /** Callback when the stop button is clicked */
+    onStop?: () => void;
+}
+export declare function InputPromptFooter({ children, rightContent, isLoading, sendDisabled, onSend, onStop, }: InputPromptFooterProps): import("react/jsx-runtime").JSX.Element;
+export default InputPromptFooter;

package/lib/chat/prompt/InputPromptFooter.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconButton } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { PaperAirplaneIcon, SquareCircleIcon } from '@primer/octicons-react';
+export function InputPromptFooter({ children, rightContent, isLoading = false, sendDisabled = false, onSend, onStop, }) {
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 2,
+            px: 2,
+            pt: 1,
+            pb: 2,
+        }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, flex: 1 }, children: children }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [rightContent, isLoading ? (_jsx(IconButton, { icon: SquareCircleIcon, "aria-label": "Stop", onClick: onStop, size: "small" })) : (_jsx(IconButton, { icon: PaperAirplaneIcon, "aria-label": "Send", onClick: onSend, disabled: sendDisabled, size: "small" }))] })] }));
+}
+export default InputPromptFooter;

package/lib/chat/prompt/InputPromptHeader.d.ts

@@ -0,0 +1,15 @@
+/**
+ * InputPromptHeader — Header area of the InputPrompt component.
+ *
+ * Renders a horizontal slot above the input area for hosting
+ * dropdowns, indicators, or other controls.
+ *
+ * @module chat/prompt/InputPromptHeader
+ */
+import type { ReactNode } from 'react';
+export interface InputPromptHeaderProps {
+    /** Content to render in the header (dropdowns, indicators, etc.) */
+    children?: ReactNode;
+}
+export declare function InputPromptHeader({ children }: InputPromptHeaderProps): import("react/jsx-runtime").JSX.Element | null;
+export default InputPromptHeader;

package/lib/chat/prompt/InputPromptHeader.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@datalayer/primer-addons';
+export function InputPromptHeader({ children }) {
+    if (!children)
+        return null;
+    return (_jsx(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 2,
+            px: 2,
+            pt: 2,
+            pb: 1,
+        }, children: children }));
+}
+export default InputPromptHeader;

package/lib/chat/prompt/InputPromptLexical.d.ts

@@ -0,0 +1,16 @@
+export interface InputPromptLexicalProps {
+    /** Current input value */
+    value: string;
+    /** Callback when the value changes */
+    onChange: (value: string) => void;
+    /** Placeholder for the editor */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Callback when the user presses Enter (without Shift) */
+    onSubmit?: () => void;
+    /** Auto-focus the editor on mount */
+    autoFocus?: boolean;
+}
+export declare function InputPromptLexical({ value, onChange, placeholder, disabled, onSubmit, autoFocus, }: InputPromptLexicalProps): import("react/jsx-runtime").JSX.Element;
+export default InputPromptLexical;

package/lib/chat/prompt/InputPromptLexical.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * InputPromptLexical — Lexical editor input variant for InputPrompt.
+ *
+ * Uses a minimal Lexical setup (plain text only) as an alternative
+ * to the plain textarea.  Enter-to-submit and Shift+Enter for newline
+ * are handled via a custom Lexical plugin.
+ *
+ * IMPORTANT: This file imports from `@lexical/react` only — it does NOT
+ * import from `@datalayer/jupyter-lexical` to avoid pulling in heavy
+ * Lumino / Jupyter dependencies (see separated-hook-files pattern in CLAUDE.md).
+ *
+ * @module chat/prompt/InputPromptLexical
+ */
+import { useCallback, useEffect, useRef } from 'react';
+import { $getRoot, $createParagraphNode, $createTextNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, } from 'lexical';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { Box } from '@datalayer/primer-addons';
+// ---- Lexical config (plain-text only) ------------------------------------
+const EDITOR_CONFIG = {
+    namespace: 'InputPromptLexical',
+    theme: {
+        paragraph: 'input-prompt-lexical-p',
+    },
+    nodes: [],
+    onError(error) {
+        console.error('[InputPromptLexical]', error);
+    },
+};
+// ---- Enter-to-submit plugin ---------------------------------------------
+function EnterSubmitPlugin({ onSubmit, disabled, }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerCommand(KEY_ENTER_COMMAND, (event) => {
+            if (event?.shiftKey || disabled)
+                return false;
+            event?.preventDefault();
+            onSubmit?.();
+            return true;
+        }, COMMAND_PRIORITY_HIGH);
+    }, [editor, onSubmit, disabled]);
+    return null;
+}
+// ---- Sync plugin (controlled component bridge) --------------------------
+function SyncPlugin({ value, onChange, }) {
+    const [editor] = useLexicalComposerContext();
+    const lastExternalValue = useRef(value);
+    // Push external value → editor (only when value changes from outside)
+    useEffect(() => {
+        if (value === lastExternalValue.current)
+            return;
+        lastExternalValue.current = value;
+        editor.update(() => {
+            const root = $getRoot();
+            const currentText = root.getTextContent();
+            if (currentText === value)
+                return;
+            root.clear();
+            const p = $createParagraphNode();
+            if (value) {
+                p.append($createTextNode(value));
+            }
+            root.append(p);
+        });
+    }, [editor, value]);
+    // Editor → external value
+    const handleChange = useCallback(() => {
+        editor.getEditorState().read(() => {
+            const text = $getRoot().getTextContent();
+            lastExternalValue.current = text;
+            onChange(text);
+        });
+    }, [editor, onChange]);
+    return _jsx(OnChangePlugin, { onChange: handleChange });
+}
+// ---- Auto-focus plugin --------------------------------------------------
+function AutoFocusPlugin({ autoFocus }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (autoFocus) {
+            const t = setTimeout(() => editor.focus(), 100);
+            return () => clearTimeout(t);
+        }
+    }, [editor, autoFocus]);
+    return null;
+}
+export function InputPromptLexical({ value, onChange, placeholder = 'Ask anything…', disabled = false, onSubmit, autoFocus = false, }) {
+    return (_jsx(Box, { sx: {
+            px: 2,
+            py: 1,
+            '& .input-prompt-lexical-p': {
+                margin: 0,
+            },
+        }, children: _jsxs(LexicalComposer, { initialConfig: EDITOR_CONFIG, children: [_jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "input-prompt-lexical-content", "aria-label": "Message input", style: {
+                            outline: 'none',
+                            minHeight: 40,
+                            maxHeight: 120,
+                            overflowY: 'auto',
+                            fontSize: 14,
+                            lineHeight: '1.5',
+                            padding: '2px 0',
+                        } }), placeholder: _jsx(Box, { sx: {
+                            position: 'absolute',
+                            top: '11px',
+                            left: '15px',
+                            color: 'fg.subtle',
+                            fontSize: 1,
+                            pointerEvents: 'none',
+                            userSelect: 'none',
+                        }, children: placeholder }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, {}), _jsx(SyncPlugin, { value: value, onChange: onChange }), _jsx(EnterSubmitPlugin, { onSubmit: onSubmit, disabled: disabled }), _jsx(AutoFocusPlugin, { autoFocus: autoFocus })] }) }));
+}
+export default InputPromptLexical;

package/lib/chat/prompt/InputPromptText.d.ts

@@ -0,0 +1,24 @@
+/**
+ * InputPromptText — Plain-text input variant for InputPrompt.
+ *
+ * Auto-resizing textarea with Enter-to-send and Shift+Enter for newline.
+ *
+ * @module chat/prompt/InputPromptText
+ */
+import { type Ref } from 'react';
+export interface InputPromptTextProps {
+    /** Current input value */
+    value: string;
+    /** Callback when the value changes */
+    onChange: (value: string) => void;
+    /** Placeholder for the textarea */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Callback when the user presses Enter (without Shift) */
+    onSubmit?: () => void;
+    /** Ref forwarded to the underlying textarea */
+    inputRef?: Ref<HTMLTextAreaElement>;
+}
+export declare function InputPromptText({ value, onChange, placeholder, disabled, onSubmit, inputRef, }: InputPromptTextProps): import("react/jsx-runtime").JSX.Element;
+export default InputPromptText;