automagik-cli/dist/ui-backup/components/ChatDisplay.js

Automagik CLI - A powerful command-line interface for interacting with Automagik Hive multi-agent AI systems

import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { Box, Text } from 'ink';
import { MessageType } from '../types.js';
export const ChatDisplay = ({ history, pendingMessage, terminalWidth, terminalHeight, }) => {
    const maxWidth = Math.min(terminalWidth - 4, 120);
    const maxHeight = Math.max(terminalHeight - 15, 10); // Reserve space for header/footer
    const formatTimestamp = (timestamp) => {
        return new Date(timestamp).toLocaleTimeString();
    };
    const getMessageColor = (type) => {
        switch (type) {
            case MessageType.USER:
                return 'blue';
            case MessageType.ASSISTANT:
                return 'green';
            case MessageType.THINKING:
                return 'cyan';
            case MessageType.TOOL_START:
                return 'yellow';
            case MessageType.TOOL_COMPLETE:
                return 'green';
            case MessageType.AGENT_START:
                return 'magenta';
            case MessageType.ERROR:
                return 'red';
            case MessageType.INFO:
                return 'yellow';
            case MessageType.SYSTEM:
                return 'gray';
            default:
                return 'white';
        }
    };
    const getMessagePrefix = (type) => {
        switch (type) {
            case MessageType.USER:
                return '👤 You';
            case MessageType.ASSISTANT:
                return '🤖 Assistant';
            case MessageType.THINKING:
                return '💭 Thinking';
            case MessageType.TOOL_START:
                return '🔧 Tool';
            case MessageType.TOOL_COMPLETE:
                return '✅ Tool';
            case MessageType.AGENT_START:
                return '🚀 Agent';
            case MessageType.ERROR:
                return '❌ Error';
            case MessageType.INFO:
                return 'ℹ️  Info';
            case MessageType.SYSTEM:
                return '⚙️  System';
            default:
                return '• ';
        }
    };
    const wrapText = (text, width) => {
        const words = text.split(' ');
        const lines = [];
        let currentLine = '';
        for (const word of words) {
            if (currentLine.length + word.length + 1 <= width) {
                currentLine += (currentLine ? ' ' : '') + word;
            }
            else {
                if (currentLine) {
                    lines.push(currentLine);
                }
                currentLine = word;
            }
        }
        if (currentLine) {
            lines.push(currentLine);
        }
        return lines.length > 0 ? lines : [''];
    };
    const isCompactMessage = (type) => {
        return [
            MessageType.THINKING,
            MessageType.TOOL_START,
            MessageType.TOOL_COMPLETE,
            MessageType.AGENT_START
        ].includes(type);
    };
    const renderMessage = (message, isPending = false) => {
        const color = getMessageColor(message.type);
        const prefix = getMessagePrefix(message.type);
        const timestamp = formatTimestamp(message.timestamp);
        const isCompact = isCompactMessage(message.type);
        // For compact messages (thinking, tools), show inline
        if (isCompact && !isPending) {
            return (_jsx(Box, { marginY: 0, children: _jsxs(Text, { color: color, dimColor: true, children: [prefix, ": ", message.text] }) }, message.id));
        }
        // For main messages (user, assistant), show full format
        const textLines = wrapText(message.text, maxWidth - 4);
        return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { color: color, bold: true, children: prefix }), _jsxs(Text, { color: "gray", dimColor: true, children: [timestamp, message.metadata?.target && (_jsxs(Text, { children: [" \u2022 ", message.metadata.target.type, ":", message.metadata.target.id] })), isPending && (_jsx(Text, { color: "yellow", children: " \u2022 streaming..." }))] })] }), _jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: 1, children: [textLines.map((line, index) => {
                            // Simple markdown-like formatting
                            let formattedLine = line;
                            const isBold = line.startsWith('**') && line.endsWith('**');
                            const isListItem = line.trim().startsWith('- ') || line.trim().startsWith('• ');
                            const isHeader = line.startsWith('##') || line.startsWith('###');
                            return (_jsx(Text, { color: isPending ? 'gray' : 'white', bold: isBold, dimColor: isListItem, children: formattedLine }, index));
                        }), isPending && message.text && (_jsx(Text, { color: "yellow", children: "\u258A" }) // Cursor for streaming
                        )] })] }, isPending ? 'pending' : message.id));
    };
    // Show recent messages that fit in the available height
    const allMessages = [...history];
    if (pendingMessage) {
        allMessages.push(pendingMessage);
    }
    // Calculate how many messages we can show
    const visibleMessages = allMessages.slice(-10); // Show last 10 messages
    return (_jsx(Box, { flexDirection: "column", height: maxHeight, marginY: 1, children: visibleMessages.length === 0 ? (_jsx(Box, { justifyContent: "center", alignItems: "center", height: "100%", children: _jsx(Text, { color: "gray", children: "Welcome! Start a conversation by typing a message below." }) })) : (_jsx(Box, { flexDirection: "column", children: visibleMessages.map((message, index) => {
                const isPending = Boolean(pendingMessage && message === pendingMessage);
                return renderMessage(message, isPending);
            }) })) }));
};