@datalayer/agent-runtimes 0.0.10 → 0.0.12

package/lib/components/chat/components/elements/ChatInputPrompt.js

@@ -1,150 +0,0 @@
-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.
- */
-/**
- * Chat input component.
- * Provides the message input area with send button and optional tool suggestions.
- *
- * @module components/chat/components/elements/ChatInputPrompt
- */
-import React, { useState, useRef, useCallback, useEffect, } from 'react';
-import { Button, Textarea, IconButton, ActionList } from '@primer/react';
-import { Box } from '@datalayer/primer-addons';
-import { PaperAirplaneIcon, SquareCircleIcon, UploadIcon, MentionIcon, } from '@primer/octicons-react';
-import { useChat } from '../../../../hooks/useChat';
-import { useChatStreaming, useChatTools } from '../../store/chatStore';
-/**
- * Chat Input Prompt component
- */
-export function ChatInputPrompt({ placeholder = 'Type a message...', disabled = false, showToolSuggestions = true, showFileUpload = false, maxRows = 6, className, leadingIcon, sendButtonText = 'Send', onBeforeSend, onAfterSend, }) {
-    const [input, setInput] = useState('');
-    const [showSuggestions, setShowSuggestions] = useState(false);
-    const textareaRef = useRef(null);
-    const { sendMessage, stopGeneration } = useChat();
-    const { isStreaming } = useChatStreaming();
-    const tools = useChatTools();
-    // Auto-resize textarea based on content
-    const adjustTextareaHeight = useCallback(() => {
-        const textarea = textareaRef.current;
-        if (textarea) {
-            // Reset height to auto to get proper scrollHeight
-            textarea.style.height = 'auto';
-            // Set height to scrollHeight, capped at maxHeight
-            const maxHeight = maxRows * 24; // Approximate line height
-            const newHeight = Math.min(textarea.scrollHeight, maxHeight);
-            textarea.style.height = `${newHeight}px`;
-            // Add overflow if content exceeds maxHeight
-            textarea.style.overflowY =
-                textarea.scrollHeight > maxHeight ? 'auto' : 'hidden';
-        }
-    }, [maxRows]);
-    // Adjust textarea height when input changes
-    useEffect(() => {
-        adjustTextareaHeight();
-    }, [input, adjustTextareaHeight]);
-    // Auto-focus on mount
-    useEffect(() => {
-        if (textareaRef.current && !disabled) {
-            textareaRef.current.focus();
-        }
-    }, [disabled]);
-    // Handle send
-    const handleSend = useCallback(async () => {
-        const trimmedInput = input.trim();
-        if (!trimmedInput || disabled || isStreaming)
-            return;
-        // Call onBeforeSend hook
-        if (onBeforeSend) {
-            const result = onBeforeSend(trimmedInput);
-            if (result === false)
-                return;
-        }
-        try {
-            await sendMessage(trimmedInput);
-            setInput('');
-            onAfterSend?.(trimmedInput);
-        }
-        catch (error) {
-            console.error('[ChatInputPrompt] Send error:', error);
-        }
-    }, [input, disabled, isStreaming, sendMessage, onBeforeSend, onAfterSend]);
-    // Handle stop
-    const handleStop = useCallback(() => {
-        stopGeneration();
-    }, [stopGeneration]);
-    // Handle key press
-    const handleKeyDown = useCallback((event) => {
-        if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            handleSend();
-        }
-        // Show tool suggestions with @
-        if (event.key === '@' && showToolSuggestions) {
-            setShowSuggestions(true);
-        }
-    }, [handleSend, showToolSuggestions]);
-    // Handle tool mention
-    const handleToolMention = useCallback((toolName) => {
-        const cursorPosition = textareaRef.current?.selectionStart || input.length;
-        const beforeCursor = input.slice(0, cursorPosition);
-        const afterCursor = input.slice(cursorPosition);
-        // Replace @... with tool mention
-        const lastAtIndex = beforeCursor.lastIndexOf('@');
-        const newInput = beforeCursor.slice(0, lastAtIndex) + `@${toolName} ` + afterCursor;
-        setInput(newInput);
-        setShowSuggestions(false);
-        // Focus back on textarea
-        textareaRef.current?.focus();
-    }, [input]);
-    // Filter tools based on input
-    const filteredTools = React.useMemo(() => {
-        if (!showSuggestions)
-            return [];
-        const cursorPosition = textareaRef.current?.selectionStart || input.length;
-        const beforeCursor = input.slice(0, cursorPosition);
-        const lastAtIndex = beforeCursor.lastIndexOf('@');
-        if (lastAtIndex === -1)
-            return [];
-        const query = beforeCursor.slice(lastAtIndex + 1).toLowerCase();
-        return Object.values(tools).filter(tool => tool.name.toLowerCase().includes(query) ||
-            tool.description?.toLowerCase().includes(query));
-    }, [tools, input, showSuggestions]);
-    return (_jsxs(Box, { className: className, sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 2,
-            p: 3,
-            borderTop: '1px solid',
-            borderColor: 'border.default',
-            bg: 'canvas.default',
-            position: 'relative',
-        }, children: [showSuggestions && filteredTools.length > 0 && (_jsx(Box, { sx: {
-                    position: 'absolute',
-                    bottom: '100%',
-                    left: 3,
-                    right: 3,
-                    maxHeight: 200,
-                    overflow: 'auto',
-                    bg: 'canvas.overlay',
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    boxShadow: 'shadow.large',
-                    zIndex: 10,
-                }, children: _jsx(ActionList, { children: filteredTools.map(tool => (_jsxs(ActionList.Item, { onSelect: () => handleToolMention(tool.name), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(MentionIcon, {}) }), _jsxs(Box, { children: [_jsx(Box, { sx: { fontWeight: 'semibold' }, children: tool.name }), tool.description && (_jsx(Box, { sx: { fontSize: 0, color: 'fg.muted' }, children: tool.description }))] })] }, tool.name))) }) })), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'flex-end' }, children: [leadingIcon && (_jsx(Box, { sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            color: 'fg.muted',
-                            pb: 2,
-                        }, children: leadingIcon })), showFileUpload && (_jsx(IconButton, { icon: UploadIcon, "aria-label": "Upload file", variant: "invisible", disabled: disabled || !!isStreaming })), _jsx(Box, { sx: { flex: 1 }, children: _jsx(Textarea, { ref: textareaRef, value: input, onChange: e => setInput(e.target.value), onKeyDown: handleKeyDown, onBlur: () => setTimeout(() => setShowSuggestions(false), 200), placeholder: placeholder, disabled: disabled || !!isStreaming, rows: 1, sx: {
-                                width: '100%',
-                                maxHeight: `${maxRows * 24}px`,
-                                minHeight: '40px',
-                                resize: 'none',
-                                overflow: 'hidden',
-                                transition: 'height 0.1s ease-out',
-                            } }) }), isStreaming ? (_jsx(Button, { variant: "danger", onClick: handleStop, leadingVisual: SquareCircleIcon, "aria-label": "Stop generation", children: "Stop" })) : (_jsx(Button, { variant: "primary", onClick: handleSend, disabled: disabled || !input.trim(), leadingVisual: PaperAirplaneIcon, "aria-label": "Send message", children: sendButtonText }))] }), _jsxs(Box, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Press ", _jsx("kbd", { children: "Enter" }), " to send, ", _jsx("kbd", { children: "Shift+Enter" }), " for new line", showToolSuggestions && ', @ to mention tools'] })] }));
-}
-export default ChatInputPrompt;