@datalayer/agent-runtimes 1.0.29 → 1.3.11

package/lib/chat/prompt/InputPromptBase.js

@@ -0,0 +1,225 @@
+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 { useTypingPlaceholder } from './useTypingPlaceholder';
+import { InPromptHeader } from './header';
+import { InPromptFooter } from './footer';
+import { InputPromptText } from './InputPromptText';
+import { InputPromptLexical } from './InputPromptLexical';
+import { usePromptHistory } from './promptHistory';
+/**
+ * InputPromptBase — the editor, its header and its footer with header, input area, and footer.
+ */
+export function InputPromptBase({ variant = 'lexical', placeholder = 'Ask anything…', typingSuggestions, isLoading = false, isKernelBusy = false, onSend, onStop, autoFocus = false, focusTrigger, showBorderTop = true, showBackground = true, padding = 3, disabled = false, readOnly = false, mentionableAgents, promptHistory, sx, value: controlledValue, onChange: controlledOnChange, headerContent, headerStacks, footerContent, footerStacks, footerRightContent, }) {
+    // ---- Controlled / uncontrolled state -----------------------------------
+    const [internalInput, setInternalInput] = useState('');
+    const input = controlledValue !== undefined ? controlledValue : internalInput;
+    const setInput = controlledOnChange !== undefined ? controlledOnChange : setInternalInput;
+    // ---- Prompt history ----------------------------------------------------
+    const { remember, edited, navigate } = usePromptHistory(promptHistory);
+    /*
+     * The value as of now, for handlers that must not be rebuilt on every
+     * keystroke: the Lexical variant registers its arrow-key commands afresh
+     * whenever its handler changes, and a handler closing over `input` would
+     * change on each character typed.
+     */
+    const valueRef = useRef(input);
+    valueRef.current = input;
+    /*
+     * Typing ends a walk through the history — but this component's own
+     * writes are not typing. The editors report back whatever value is pushed
+     * into them, and that report says the same text that was just set, which
+     * is how the two are told apart.
+     */
+    const handleChange = useCallback((next) => {
+        if (next !== valueRef.current) {
+            edited();
+        }
+        setInput(next);
+    }, [edited, setInput]);
+    /** A step through the history: the box shows it, or the key is left alone. */
+    const navigateHistory = useCallback((direction) => {
+        const text = navigate(direction, valueRef.current);
+        if (text === null) {
+            return false;
+        }
+        setInput(text);
+        return true;
+    }, [navigate, setInput]);
+    // ---- Refs (text variant only) ------------------------------------------
+    const inputRef = useRef(null);
+    // ---- Typed placeholder --------------------------------------------------
+    /*
+     * Focus for the whole prompt, not for the editor alone.
+     *
+     * React's focus events bubble, so one pair of handlers on the container
+     * covers both variants and the controls in the footer — and somebody
+     * choosing a model from a menu is interacting with this prompt just as
+     * surely as somebody typing in it. `relatedTarget` is what distinguishes
+     * leaving the prompt from moving around inside it; without that check,
+     * every step between the editor and a button would restart the animation.
+     */
+    const [focused, setFocused] = useState(false);
+    /*
+     * The focus this prompt gave itself does not count as somebody arriving.
+     *
+     * `autoFocus` puts the caret in the box on mount — which is right, it is why
+     * the workspace exists — and it would otherwise stop the animation before
+     * its first character, on exactly the pages that most need the invitation. A
+     * click, a tab-in, or any later focus is a person; the first one is us.
+     */
+    const selfFocused = useRef(autoFocus);
+    /** The whole prompt — editor, footer controls and all. */
+    const containerRef = useRef(null);
+    /**
+     * Bumped to ask the Lexical editor for the caret.
+     *
+     * That editor is not focused by calling a method on a ref: it needs the
+     * retry loop in `AutoFocusPlugin`, which gives up if somebody is typing
+     * elsewhere. A counter re-runs the whole of it.
+     */
+    const [lexicalFocusSignal, setLexicalFocusSignal] = useState(0);
+    const animatedPlaceholder = useTypingPlaceholder({
+        phrases: typingSuggestions ?? [],
+        // Nothing to stand in for once there is something typed, and nothing to
+        // invite while the agent is answering or the box is inert.
+        enabled: !focused && !input && !isLoading && !disabled && !readOnly,
+        idle: placeholder,
+    });
+    // ---- 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 ---------------------------------
+    // Both variants, for the same reason as the turn-end refocus below: the
+    // default variant is `lexical`, so a caller bumping this got nothing.
+    useEffect(() => {
+        if (focusTrigger === undefined || focusTrigger <= 0) {
+            return;
+        }
+        if (variant === 'lexical') {
+            setLexicalFocusSignal(signal => signal + 1);
+            return;
+        }
+        if (!inputRef.current) {
+            return;
+        }
+        const t = setTimeout(() => inputRef.current?.focus(), 150);
+        return () => clearTimeout(t);
+    }, [focusTrigger, variant]);
+    /*
+     * The caret comes back when the turn ends.
+     *
+     * A turn finishing is an invitation to say the next thing, and having to
+     * click into the box first is a small tax charged on every single exchange.
+     *
+     * It used to be `variant === 'text'` only — and the default variant is
+     * `lexical`, so on every surface that ships the real prompt this did
+     * nothing at all. Both are handled now: the textarea takes focus directly,
+     * and the Lexical editor is asked through a signal, because focusing that
+     * one is a retry loop rather than a method call and it already lives in
+     * `AutoFocusPlugin`.
+     *
+     * Not if the reader has gone somewhere else in the meantime. Waiting out a
+     * turn is exactly when somebody edits a cell or scrolls the notebook, and
+     * snatching the caret out of that would be a far worse bug than the one
+     * being fixed. `document.body` means nobody is anywhere; anything inside
+     * this prompt is already us.
+     */
+    const wasLoadingRef = useRef(false);
+    useEffect(() => {
+        const justFinished = wasLoadingRef.current && !isLoading;
+        // Recorded before any early return: leaving it below one is how this kind
+        // of edge-trigger quietly stops firing.
+        wasLoadingRef.current = isLoading;
+        if (!justFinished || disabled || readOnly) {
+            return;
+        }
+        const active = document.activeElement;
+        const elsewhere = active &&
+            active !== document.body &&
+            !containerRef.current?.contains(active);
+        if (elsewhere) {
+            return;
+        }
+        if (variant === 'lexical') {
+            setLexicalFocusSignal(signal => signal + 1);
+            return;
+        }
+        const t = setTimeout(() => inputRef.current?.focus(), 50);
+        return () => clearTimeout(t);
+    }, [isLoading, variant, disabled, readOnly]);
+    // ---- Send / Stop handlers ----------------------------------------------
+    const handleSend = useCallback(() => {
+        if (!input.trim() || isLoading || disabled || readOnly)
+            return;
+        const message = input.trim();
+        // Newest in the history from now on, whatever the runtime records.
+        remember(message);
+        if (controlledValue === undefined) {
+            setInput('');
+        }
+        onSend(message);
+    }, [
+        input,
+        isLoading,
+        disabled,
+        readOnly,
+        onSend,
+        setInput,
+        controlledValue,
+        remember,
+    ]);
+    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
+            // Named so the turn-end refocus can ask whether the caret is already
+            // somewhere inside this prompt before it reaches for it.
+            , { 
+                // Named so the turn-end refocus can ask whether the caret is already
+                // somewhere inside this prompt before it reaches for it.
+                ref: containerRef, onFocusCapture: () => {
+                    if (selfFocused.current) {
+                        selfFocused.current = false;
+                        return;
+                    }
+                    setFocused(true);
+                }, 
+                // Typing is arriving too, whoever moved the caret. Without this an
+                // auto-focused prompt would keep animating under a person's first
+                // keystroke, until the character they typed made it stop.
+                onKeyDownCapture: () => {
+                    selfFocused.current = false;
+                    setFocused(true);
+                }, onBlurCapture: event => {
+                    if (!event.currentTarget.contains(event.relatedTarget)) {
+                        setFocused(false);
+                    }
+                }, 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 ?? '#16A085'}`,
+                    },
+                }, children: [_jsx(InPromptHeader, { stacks: headerStacks, children: headerContent }), variant === 'lexical' ? (_jsx(InputPromptLexical, { value: input, onChange: handleChange, placeholder: animatedPlaceholder, disabled: isLoading || disabled, readOnly: readOnly, onSubmit: handleSend, onHistory: navigateHistory, autoFocus: autoFocus, focusSignal: lexicalFocusSignal, mentionableAgents: mentionableAgents })) : (_jsx(InputPromptText, { value: input, onChange: handleChange, placeholder: animatedPlaceholder, disabled: isLoading || disabled, readOnly: readOnly, onSubmit: handleSend, onHistory: navigateHistory, inputRef: inputRef })), _jsx(InPromptFooter, { stacks: footerStacks, isLoading: isLoading, isKernelBusy: isKernelBusy, sendDisabled: !input.trim() || disabled || readOnly, onSend: handleSend, onStop: handleStop, rightContent: footerRightContent, children: footerContent })] }) }) }));
+}
+export default InputPromptBase;

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

@@ -1,3 +1,5 @@
+import { type MentionableAgent } from './plugins/AgentMentionPlugin';
+import type { HistoryDirection } from './promptHistory';
 export interface InputPromptLexicalProps {
     /** Current input value */
     value: string;
@@ -11,8 +13,23 @@ export interface InputPromptLexicalProps {
     readOnly?: boolean;
     /** Callback when the user presses Enter (without Shift) */
     onSubmit?: () => void;
+    /**
+     * Up or down through the prompt history, asked when the caret is on the
+     * first or last line. Answers whether it had somewhere to go; when it did
+     * not, the key moves the caret as it normally would.
+     */
+    onHistory?: (direction: HistoryDirection) => boolean;
     /** Auto-focus the editor on mount */
     autoFocus?: boolean;
+    /** Bumped by the parent to ask for the caret back — see `AutoFocusPlugin`. */
+    focusSignal?: number;
+    /**
+     * Agents this prompt may address by typing `@`.
+     *
+     * Empty or absent means no menu: a workspace with one agent has nobody to
+     * choose between, and a menu on every `@` would be in the way.
+     */
+    mentionableAgents?: MentionableAgent[];
 }
-export declare function InputPromptLexical({ value, onChange, placeholder, disabled, readOnly, onSubmit, autoFocus, }: InputPromptLexicalProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputPromptLexical({ value, onChange, placeholder, disabled, readOnly, onSubmit, onHistory, autoFocus, focusSignal, mentionableAgents, }: InputPromptLexicalProps): import("react").JSX.Element;
 export default InputPromptLexical;

package/lib/chat/prompt/InputPromptLexical.js

@@ -8,35 +8,44 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * 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.
+ * are handled via a custom Lexical plugin, and the arrow keys walk the
+ * prompt history from the text's edges via another.
  *
- * IMPORTANT: This file imports from `@lexical/react` only — it does NOT
+ * IMPORTANT: This file imports from the light `@lexical/*` packages 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 { $getRoot, $getSelection, $createParagraphNode, $createTextNode, $isElementNode, $isRangeSelection, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, defineExtension, } from 'lexical';
+import { LexicalExtensionComposer } from '@lexical/react/LexicalExtensionComposer';
 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 { HistoryExtension } from '@lexical/history';
+import { PlainTextExtension } from '@lexical/plain-text';
+import { MentionNode } from './plugins/MentionNode';
 import { Box } from '@datalayer/primer-addons';
-// ---- Lexical config (plain-text only) ------------------------------------
-const EDITOR_CONFIG = {
+import { AgentMentionPlugin, } from './plugins/AgentMentionPlugin';
+import { CommandPlugin, PROMPT_COMMANDS } from './plugins/CommandPlugin';
+// ---- Lexical extension (plain-text only) ---------------------------------
+// Module scope on purpose: the composer rebuilds the editor whenever this
+// reference changes.
+const EDITOR_EXTENSION = defineExtension({
+    name: '@datalayer/agent-runtimes/InputPrompt',
     namespace: 'InputPromptLexical',
     theme: {
         paragraph: 'input-prompt-lexical-p',
     },
-    nodes: [],
+    // The `@agent` chip. A node the editor does not know about is dropped on
+    // insert, silently — the mention would simply never appear.
+    nodes: () => [MentionNode],
+    dependencies: [PlainTextExtension, HistoryExtension],
     onError(error) {
         console.error('[InputPromptLexical]', error);
     },
-};
+});
 // ---- Enter-to-submit plugin ---------------------------------------------
 function EnterSubmitPlugin({ onSubmit, disabled, readOnly, }) {
     const [editor] = useLexicalComposerContext();
@@ -51,6 +60,118 @@ function EnterSubmitPlugin({ onSubmit, disabled, readOnly, }) {
     }, [editor, onSubmit, disabled, readOnly]);
     return null;
 }
+// ---- History plugin: the arrow keys over what was sent ------------------
+/**
+ * The text before and after the caret, over the whole editor — or `null`
+ * when there is no caret to speak of: nothing focused, or a range selected.
+ *
+ * Lines decide whether an arrow key walks the history — up from the first
+ * line, down from the last — and a plain-text editor keeps its lines as
+ * line-break nodes inside paragraphs, and as paragraphs, so the text is
+ * gathered by walking the tree rather than read off one node.
+ */
+function $textAroundCaret() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+        return null;
+    }
+    const { anchor } = selection;
+    const anchorNode = anchor.getNode();
+    let before = '';
+    let after = '';
+    let passed = false;
+    const take = (text) => {
+        if (passed) {
+            after += text;
+        }
+        else {
+            before += text;
+        }
+    };
+    const visit = (node) => {
+        if (node.is(anchorNode)) {
+            if ($isElementNode(node)) {
+                // The caret sits between children, and the offset counts them.
+                node.getChildren().forEach((child, index) => {
+                    if (index === anchor.offset) {
+                        passed = true;
+                    }
+                    take(child.getTextContent());
+                });
+            }
+            else {
+                const text = node.getTextContent();
+                before += text.slice(0, anchor.offset);
+                after += text.slice(anchor.offset);
+            }
+            passed = true;
+            return;
+        }
+        if ($isElementNode(node)) {
+            node.getChildren().forEach(visit);
+            return;
+        }
+        take(node.getTextContent());
+    };
+    $getRoot()
+        .getChildren()
+        .forEach((paragraph, index) => {
+        if (index > 0) {
+            take('\n');
+        }
+        visit(paragraph);
+    });
+    return passed ? { before, after } : null;
+}
+/**
+ * Up from the first line and down from the last walk the prompt history;
+ * anywhere else the keys move the caret, as in any editor.
+ *
+ * Registered at a low priority, and mounted after the `@` and `/` menus, so
+ * that a menu which is open takes the arrow keys first — it answers them
+ * and this never hears them.
+ */
+function HistoryPlugin({ onHistory, disabled, readOnly, }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!onHistory) {
+            return undefined;
+        }
+        const handle = (direction) => (event) => {
+            if (disabled || readOnly) {
+                return false;
+            }
+            // A modifier means something else is being asked for.
+            if (event &&
+                (event.shiftKey || event.altKey || event.metaKey || event.ctrlKey)) {
+                return false;
+            }
+            let atEdge = false;
+            editor.getEditorState().read(() => {
+                const around = $textAroundCaret();
+                if (!around) {
+                    return;
+                }
+                atEdge =
+                    direction === 'up'
+                        ? !around.before.includes('\n')
+                        : !around.after.includes('\n');
+            });
+            if (!atEdge || !onHistory(direction)) {
+                return false;
+            }
+            event?.preventDefault();
+            return true;
+        };
+        const unregisterUp = editor.registerCommand(KEY_ARROW_UP_COMMAND, handle('up'), COMMAND_PRIORITY_LOW);
+        const unregisterDown = editor.registerCommand(KEY_ARROW_DOWN_COMMAND, handle('down'), COMMAND_PRIORITY_LOW);
+        return () => {
+            unregisterUp();
+            unregisterDown();
+        };
+    }, [editor, onHistory, disabled, readOnly]);
+    return null;
+}
 // ---- Sync plugin (controlled component bridge) --------------------------
 function SyncPlugin({ value, onChange, }) {
     const [editor] = useLexicalComposerContext();
@@ -71,6 +192,9 @@ function SyncPlugin({ value, onChange, }) {
                 p.append($createTextNode(value));
             }
             root.append(p);
+            // The caret after what was put there — a history entry, a suggestion —
+            // where typing on from it is expected to continue.
+            p.selectEnd();
         });
     }, [editor, value]);
     // Editor → external value
@@ -84,14 +208,54 @@ function SyncPlugin({ value, onChange, }) {
     return _jsx(OnChangePlugin, { onChange: handleChange });
 }
 // ---- Auto-focus plugin --------------------------------------------------
-function AutoFocusPlugin({ autoFocus }) {
+function AutoFocusPlugin({ autoFocus, focusSignal, }) {
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
-        if (autoFocus) {
-            const t = setTimeout(() => editor.focus(), 100);
-            return () => clearTimeout(t);
+        if (!autoFocus && !focusSignal) {
+            return undefined;
         }
-    }, [editor, autoFocus]);
+        /*
+         * Asked for repeatedly, briefly, rather than once after a guessed delay.
+         *
+         * One `setTimeout(100)` assumed the editor was mounted and focusable by
+         * then. In a workspace that arrives through a lazy chunk it often is not:
+         * the notebook mounts alongside and takes focus, or the contenteditable
+         * is not in the document yet, and the single attempt lands on nothing and
+         * is never retried — which is exactly the prompt that would not focus.
+         *
+         * So: try immediately, then keep trying for a second, and stop the moment
+         * it works or the moment the person clicks somewhere themselves. Giving
+         * up matters as much as retrying — stealing focus back from someone who
+         * has started typing in a cell would be worse than never taking it.
+         */
+        let cancelled = false;
+        const deadline = Date.now() + 1000;
+        const focused = () => {
+            const root = editor.getRootElement();
+            return !!root && document.activeElement === root;
+        };
+        const attempt = () => {
+            if (cancelled || focused()) {
+                return;
+            }
+            const active = document.activeElement;
+            const stolen = active &&
+                active !== document.body &&
+                !editor.getRootElement()?.contains(active);
+            if (stolen) {
+                return;
+            }
+            editor.focus();
+            if (!focused() && Date.now() < deadline) {
+                timer = window.setTimeout(attempt, 50);
+            }
+        };
+        let timer = window.setTimeout(attempt, 0);
+        return () => {
+            cancelled = true;
+            window.clearTimeout(timer);
+        };
+    }, [editor, autoFocus, focusSignal]);
     return null;
 }
 function ReadOnlyPlugin({ readOnly }) {
@@ -101,29 +265,62 @@ function ReadOnlyPlugin({ readOnly }) {
     }, [editor, readOnly]);
     return null;
 }
-export function InputPromptLexical({ value, onChange, placeholder = 'Ask anything…', disabled = false, readOnly = false, onSubmit, autoFocus = false, }) {
+export function InputPromptLexical({ value, onChange, placeholder = 'Ask anything…', disabled = false, readOnly = false, onSubmit, onHistory, autoFocus = false, focusSignal, mentionableAgents, }) {
     return (_jsx(Box, { sx: {
+            /*
+              The placeholder is positioned against this box.
+    
+              It is `position: absolute` and this was `static`, so it resolved
+              against whatever ancestor happened to be positioned — which put
+              "Type a message..." up in the header, nowhere near the box it
+              describes. A containing block is the whole fix.
+            */
+            position: 'relative',
             px: 2,
-            py: 1,
+            // A little more above than the 2px it had: the text sat hard against
+            // the edge of the box, which reads as clipped rather than as tight.
+            // Still less than below, where the footer's own padding follows.
+            pt: '6px',
+            pb: 1,
+            /*
+             * Greyed while it cannot be typed in.
+             *
+             * `contenteditable=false` stops the caret and nothing else — the text
+             * kept the same weight and colour as a live prompt, so a person had to
+             * try typing to discover the box was inert. The colour is set on the
+             * container and inherited, because the editable element deliberately
+             * declares no colour of its own.
+             */
+            color: disabled || readOnly ? 'fg.subtle' : undefined,
+            cursor: disabled || readOnly ? 'not-allowed' : undefined,
             '& .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: {
+        }, children: _jsxs(LexicalExtensionComposer, { extension: EDITOR_EXTENSION, contentEditable: null, children: [_jsx(ContentEditable, { placeholder: _jsx(Box, { sx: {
                             position: 'absolute',
-                            top: '11px',
-                            left: '15px',
+                            /*
+                              Level with the first line of typing.
+            
+                              Relative to the box above, which establishes the containing
+                              block. The editor's own `padding: 2px 0` sits inside this
+                              box's `pt: 2px`, so the caret's first line starts 4px down —
+                              matching it here is what stops the placeholder floating
+                              above the text it stands in for.
+                            */
+                            top: '8px',
+                            left: '8px',
                             color: 'fg.subtle',
                             fontSize: 1,
                             pointerEvents: 'none',
                             userSelect: 'none',
-                        }, children: placeholder }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, {}), _jsx(SyncPlugin, { value: value, onChange: onChange }), _jsx(ReadOnlyPlugin, { readOnly: readOnly || disabled }), _jsx(EnterSubmitPlugin, { onSubmit: onSubmit, disabled: disabled, readOnly: readOnly }), _jsx(AutoFocusPlugin, { autoFocus: autoFocus })] }) }));
+                        }, children: placeholder }), "aria-placeholder": placeholder, className: "input-prompt-lexical-content", "aria-label": "Message input", style: {
+                        outline: 'none',
+                        minHeight: 32,
+                        maxHeight: 120,
+                        overflowY: 'auto',
+                        fontSize: 14,
+                        lineHeight: '1.5',
+                        padding: '2px 0',
+                    } }), _jsx(SyncPlugin, { value: value, onChange: onChange }), _jsx(ReadOnlyPlugin, { readOnly: readOnly || disabled }), _jsx(EnterSubmitPlugin, { onSubmit: onSubmit, disabled: disabled, readOnly: readOnly }), _jsx(AutoFocusPlugin, { autoFocus: autoFocus, focusSignal: focusSignal }), _jsx(CommandPlugin, { commands: PROMPT_COMMANDS }), mentionableAgents?.length ? (_jsx(AgentMentionPlugin, { agents: mentionableAgents })) : null, _jsx(HistoryPlugin, { onHistory: onHistory, disabled: disabled, readOnly: readOnly })] }) }));
 }
 export default InputPromptLexical;

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

@@ -1,11 +1,13 @@
 /**
  * InputPromptText — Plain-text input variant for InputPrompt.
  *
- * Auto-resizing textarea with Enter-to-send and Shift+Enter for newline.
+ * Auto-resizing textarea with Enter-to-send and Shift+Enter for newline,
+ * and the arrow keys through the prompt history from the text's edges.
  *
  * @module chat/prompt/InputPromptText
  */
 import { type Ref } from 'react';
+import type { HistoryDirection } from './promptHistory';
 export interface InputPromptTextProps {
     /** Current input value */
     value: string;
@@ -19,8 +21,14 @@ export interface InputPromptTextProps {
     readOnly?: boolean;
     /** Callback when the user presses Enter (without Shift) */
     onSubmit?: () => void;
+    /**
+     * Up or down through the prompt history, asked when the caret is on the
+     * first or last line. Answers whether it had somewhere to go; when it did
+     * not, the key moves the caret as it normally would.
+     */
+    onHistory?: (direction: HistoryDirection) => boolean;
     /** Ref forwarded to the underlying textarea */
     inputRef?: Ref<HTMLTextAreaElement>;
 }
-export declare function InputPromptText({ value, onChange, placeholder, disabled, readOnly, onSubmit, inputRef, }: InputPromptTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputPromptText({ value, onChange, placeholder, disabled, readOnly, onSubmit, onHistory, inputRef, }: InputPromptTextProps): import("react").JSX.Element;
 export default InputPromptText;

package/lib/chat/prompt/InputPromptText.js

@@ -6,14 +6,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * InputPromptText — Plain-text input variant for InputPrompt.
  *
- * Auto-resizing textarea with Enter-to-send and Shift+Enter for newline.
+ * Auto-resizing textarea with Enter-to-send and Shift+Enter for newline,
+ * and the arrow keys through the prompt history from the text's edges.
  *
  * @module chat/prompt/InputPromptText
  */
 import { useCallback, useEffect, } from 'react';
 import { Textarea } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-export function InputPromptText({ value, onChange, placeholder = 'Ask anything…', disabled = false, readOnly = false, onSubmit, inputRef, }) {
+export function InputPromptText({ value, onChange, placeholder = 'Ask anything…', disabled = false, readOnly = false, onSubmit, onHistory, inputRef, }) {
     // Auto-resize
     const adjustHeight = useCallback(() => {
         const el = inputRef && 'current' in inputRef
@@ -39,11 +40,42 @@ export function InputPromptText({ value, onChange, placeholder = 'Ask anything
         if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
             onSubmit?.();
+            return;
         }
-    }, [onSubmit]);
+        /*
+         * The arrow keys walk the history, but only from the edge of the text:
+         * up from the first line, down from the last. Anywhere else they move
+         * the caret, as in any editor — somebody on the third line of a long
+         * prompt pressing up wants the second line, not last week's question.
+         * A modifier means something else is being asked for.
+         */
+        if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') &&
+            onHistory &&
+            !e.shiftKey &&
+            !e.altKey &&
+            !e.metaKey &&
+            !e.ctrlKey) {
+            const el = e.currentTarget;
+            const direction = e.key === 'ArrowUp' ? 'up' : 'down';
+            const atEdge = direction === 'up'
+                ? !el.value.slice(0, el.selectionStart).includes('\n')
+                : !el.value.slice(el.selectionEnd).includes('\n');
+            if (atEdge && onHistory(direction)) {
+                e.preventDefault();
+            }
+        }
+    }, [onSubmit, onHistory]);
     return (_jsx(Box, { sx: { px: 2, py: 1 }, children: _jsx(Textarea, { ref: inputRef, value: value, onChange: e => onChange(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, readOnly: readOnly, sx: {
                 width: '100%',
                 resize: 'none',
+                // Greyed while it cannot be typed in, so the state is legible
+                // without trying it. Primer's `disabled` textarea keeps the
+                // author's colour, and `!important` is needed for the same reason
+                // the border rules below need it.
+                '& textarea:disabled, & textarea[readonly]': {
+                    color: 'fg.subtle !important',
+                    cursor: 'not-allowed',
+                },
                 minHeight: '40px',
                 maxHeight: '120px',
                 overflow: 'hidden',