automagik-cli/dist/ui/components/HistoryItemDisplay.js

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { MessageType } from '../types.js';
import { MarkdownText } from './MarkdownText.js';
import { useResponsiveLayout, useResponsiveText } from '../hooks/useResponsiveLayout.js';
export const HistoryItemDisplay = ({ item, isPending = false, isFocused = true, terminalWidth, availableTerminalHeight, }) => {
    const layout = useResponsiveLayout();
    const getMessageColor = (type) => {
        switch (type) {
            case MessageType.USER:
                return Colors.AccentBlue;
            case MessageType.ASSISTANT:
                return Colors.Foreground;
            case MessageType.THINKING:
                return Colors.AccentPurple;
            case MessageType.TOOL_START:
                return Colors.AccentYellow;
            case MessageType.TOOL_COMPLETE:
                return Colors.AccentGreen;
            case MessageType.AGENT_START:
                return Colors.AccentCyan;
            case MessageType.TEAM_START:
                return Colors.AccentBlue;
            case MessageType.ERROR:
                return Colors.AccentRed;
            case MessageType.INFO:
                return Colors.AccentCyan;
            case MessageType.SYSTEM:
                return Colors.AccentYellow;
            default:
                return Colors.Foreground;
        }
    };
    const getMessagePrefix = (type) => {
        switch (type) {
            case MessageType.USER:
                return '👤 ';
            case MessageType.ASSISTANT:
                return '✨ ';
            case MessageType.THINKING:
                return '🤔 ';
            case MessageType.TOOL_START:
                return '🔧 ';
            case MessageType.TOOL_COMPLETE:
                return '✅ ';
            case MessageType.AGENT_START:
                return '🤖 ';
            case MessageType.TEAM_START:
                return '🔵 ';
            case MessageType.ERROR:
                return '❌ ';
            case MessageType.INFO:
                return 'ℹ️  ';
            case MessageType.SYSTEM:
                return '⚙️  ';
            default:
                return '';
        }
    };
    const formatTimestamp = (timestamp) => {
        const date = new Date(timestamp);
        return date.toLocaleTimeString([], {
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });
    };
    const renderRichToolData = () => {
        const tool = item.metadata?.tool;
        if (!tool)
            return null;
        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [tool.tool_args && Object.keys(tool.tool_args).length > 0 && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: Colors.AccentCyan, bold: true, children: "Arguments:" }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: Colors.Gray, children: JSON.stringify(tool.tool_args, null, 2) }) })] })), tool.tool_result && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: Colors.AccentGreen, bold: true, children: "Result:" }), _jsx(Box, { marginLeft: 2, children: typeof tool.tool_result === 'string' ? (_jsx(MarkdownText, { color: Colors.Gray, children: tool.tool_result })) : (_jsx(Text, { color: Colors.Gray, children: JSON.stringify(tool.tool_result, null, 2) })) })] })), tool.metrics && (_jsxs(Box, { children: [_jsx(Text, { color: Colors.AccentPurple, bold: true, children: "Metrics:" }), _jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: Colors.Gray, children: [tool.metrics.time ? `⏱️ ${(tool.metrics.time * 1000).toFixed(0)}ms` : '', " ", tool.metrics.tokens ? `🔤 ${tool.metrics.tokens} tokens` : ''] }) })] }))] }));
    };
    const renderRAGData = () => {
        const rag = item.metadata?.rag;
        if (!rag)
            return null;
        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [rag.query && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: Colors.AccentCyan, bold: true, children: "Query:" }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: Colors.Gray, children: rag.query }) })] })), rag.results && rag.results.length > 0 && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: Colors.AccentGreen, bold: true, children: "Results:" }), _jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: Colors.Gray, children: [rag.results.length, " matches found"] }) })] })), rag.metadata && (_jsxs(Box, { children: [_jsx(Text, { color: Colors.AccentPurple, bold: true, children: "Metadata:" }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: Colors.Gray, children: JSON.stringify(rag.metadata, null, 2) }) })] }))] }));
    };
    const renderMessageContent = () => {
        // Special rendering for tool events
        if (item.type === MessageType.TOOL_START || item.type === MessageType.TOOL_COMPLETE) {
            return (_jsxs(Box, { borderStyle: "round", borderColor: item.type === MessageType.TOOL_START ? Colors.AccentYellow : Colors.AccentGreen, paddingX: 1, marginY: 1, flexDirection: "column", children: [_jsx(Text, { color: getMessageColor(item.type), children: item.text }), item.metadata?.tool && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [item.metadata.tool.tool_call_id && (_jsxs(Box, { marginBottom: layout.isShort ? 0 : 1, flexDirection: layout.isSmall ? "column" : "row", children: [_jsx(Box, { minWidth: layout.isSmall ? 0 : 15, children: _jsx(Text, { color: Colors.AccentCyan, bold: true, children: "Tool Call ID:" }) }), _jsx(Text, { color: Colors.Gray, children: useResponsiveText(item.metadata.tool.tool_call_id, layout.maxContentWidth - 20) })] })), item.metadata.tool.agent_id && (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Box, { minWidth: 15, children: _jsx(Text, { color: Colors.AccentCyan, bold: true, children: "Agent:" }) }), _jsx(Text, { color: Colors.Gray, children: item.metadata.tool.agent_name || item.metadata.tool.agent_id })] })), item.metadata.tool.run_id && (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Box, { minWidth: 15, children: _jsx(Text, { color: Colors.AccentCyan, bold: true, children: "Run ID:" }) }), _jsx(Text, { color: Colors.Gray, children: item.metadata.tool.run_id })] })), item.metadata.tool.created_at && (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Box, { minWidth: 15, children: _jsx(Text, { color: Colors.AccentCyan, bold: true, children: "Created:" }) }), _jsx(Text, { color: Colors.Gray, children: new Date(item.metadata.tool.created_at).toLocaleTimeString() })] })), item.metadata.tool.tool_call_error && (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Box, { minWidth: 15, children: _jsx(Text, { color: Colors.AccentRed, bold: true, children: "Error:" }) }), _jsx(Text, { color: Colors.AccentRed, children: item.metadata.tool.tool_call_error })] }))] })), renderRichToolData()] }));
        }
        // Special rendering for agent events
        if (item.type === MessageType.AGENT_START) {
            return (_jsxs(Box, { borderStyle: "round", borderColor: Colors.AccentCyan, paddingX: 1, marginY: 1, flexDirection: "column", children: [_jsx(Text, { color: getMessageColor(item.type), children: item.text }), item.metadata?.agent && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [item.metadata.agent.agent_id && (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Box, { minWidth: 18, children: _jsx(Text, { color: Colors.AccentCyan, bold: true, children: "Agent ID:" }) }), _jsx(Text, { color: Colors.Gray, children: item.metadata.agent.agent_id })] })), item.metadata.agent.run_id && (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Box, { minWidth: 18, children: _jsx(Text, { color: Colors.AccentCyan, bold: true, children: "Run ID:" }) }), _jsx(Text, { color: Colors.Gray, children: item.metadata.agent.run_id })] })), item.metadata.agent.session_id && (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Box, { minWidth: 18, children: _jsx(Text, { color: Colors.AccentCyan, bold: true, children: "Session ID:" }) }), _jsx(Text, { color: Colors.Gray, children: item.metadata.agent.session_id })] })), item.metadata.agent.team_session_id && (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Box, { minWidth: 18, children: _jsx(Text, { color: Colors.AccentCyan, bold: true, children: "Team Session ID:" }) }), _jsx(Text, { color: Colors.Gray, children: item.metadata.agent.team_session_id })] })), item.metadata.agent.model && (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Box, { minWidth: 18, children: _jsx(Text, { color: Colors.AccentCyan, bold: true, children: "Model:" }) }), _jsxs(Text, { color: Colors.Gray, children: [item.metadata.agent.model_provider || 'unknown', "/", item.metadata.agent.model] })] }))] }))] }));
        }
        // Special rendering for team start events
        if (item.type === MessageType.TEAM_START) {
            return (_jsxs(Box, { borderStyle: "round", borderColor: Colors.AccentBlue, paddingX: 1, marginY: 1, flexDirection: "column", children: [_jsx(Text, { color: getMessageColor(item.type), children: item.text }), item.metadata?.team && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [item.metadata.team.team_id && (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Box, { minWidth: 15, children: _jsx(Text, { color: Colors.AccentBlue, bold: true, children: "Team ID:" }) }), _jsx(Text, { color: Colors.Gray, children: item.metadata.team.team_id })] })), item.metadata.team.team_name && (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Box, { minWidth: 15, children: _jsx(Text, { color: Colors.AccentBlue, bold: true, children: "Team Name:" }) }), _jsx(Text, { color: Colors.Gray, children: item.metadata.team.team_name })] })), item.metadata.team.run_id && (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Box, { minWidth: 15, children: _jsx(Text, { color: Colors.AccentBlue, bold: true, children: "Run ID:" }) }), _jsx(Text, { color: Colors.Gray, children: item.metadata.team.run_id })] })), item.metadata.team.model && (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Box, { minWidth: 15, children: _jsx(Text, { color: Colors.AccentBlue, bold: true, children: "Model:" }) }), _jsxs(Text, { color: Colors.Gray, children: [item.metadata.team.model_provider || 'unknown', "/", item.metadata.team.model] })] })), item.metadata.team.mode && (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Box, { minWidth: 15, children: _jsx(Text, { color: Colors.AccentBlue, bold: true, children: "Mode:" }) }), _jsx(Text, { color: Colors.Gray, children: item.metadata.team.mode })] }))] }))] }));
        }
        // Special rendering for thinking events
        if (item.type === MessageType.THINKING) {
            return (_jsxs(Box, { borderStyle: "round", borderColor: Colors.AccentPurple, paddingX: 1, marginY: 1, children: [_jsx(Text, { color: getMessageColor(item.type), italic: true, children: item.text }), item.metadata?.thinking && item.metadata.thinking.reasoning && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: Colors.AccentPurple, bold: true, children: "Reasoning:" }), _jsx(Box, { marginLeft: 2, children: _jsx(MarkdownText, { color: Colors.Gray, children: item.metadata.thinking.reasoning }) })] }))] }));
        }
        // Special rendering for memory events
        if (item.type === MessageType.MEMORY_UPDATE) {
            return (_jsxs(Box, { borderStyle: "round", borderColor: Colors.AccentPurple, paddingX: 1, marginY: 1, flexDirection: "column", children: [_jsx(Text, { color: getMessageColor(item.type), bold: true, children: item.text }), item.metadata?.memory && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [item.metadata.memory.type && (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Box, { minWidth: 12, children: _jsx(Text, { color: Colors.AccentPurple, bold: true, children: "Type:" }) }), _jsx(Text, { color: Colors.Gray, children: item.metadata.memory.type })] })), item.metadata.memory.content && (_jsxs(Box, { marginBottom: 1, flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: Colors.AccentPurple, bold: true, children: "Content:" }) }), _jsx(Box, { marginLeft: 2, children: _jsx(MarkdownText, { color: Colors.Gray, children: item.metadata.memory.content }) })] })), item.metadata.memory.metadata && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: Colors.AccentPurple, bold: true, children: "Metadata:" }) }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: Colors.Gray, children: JSON.stringify(item.metadata.memory.metadata, null, 2) }) })] }))] }))] }));
        }
        // For simple text content
        if (typeof item.text === 'string') {
            // Use markdown rendering for assistant responses
            if (item.type === MessageType.ASSISTANT) {
                return (_jsx(MarkdownText, { color: getMessageColor(item.type), children: item.text }));
            }
            return (_jsx(Text, { color: getMessageColor(item.type), children: item.text }));
        }
        // For more complex content (could be extended in the future)
        return (_jsx(Text, { color: getMessageColor(item.type), children: JSON.stringify(item.text) }));
    };
    // Responsive width calculation
    const maxWidth = Math.min(layout.maxContentWidth, Math.floor(terminalWidth * 0.9));
    // Responsive margins and spacing
    const marginBottom = layout.isShort ? 0 : 1;
    const contentPadding = layout.isSmall ? 1 : 2;
    return (_jsxs(Box, { flexDirection: "column", marginBottom: marginBottom, width: maxWidth, minHeight: availableTerminalHeight ? 1 : undefined, children: [_jsxs(Box, { justifyContent: "space-between", marginBottom: 0, children: [_jsxs(Box, { children: [_jsxs(Text, { color: getMessageColor(item.type), bold: true, children: [getMessagePrefix(item.type), item.type === MessageType.USER ? 'You' :
                                        item.type === MessageType.ASSISTANT ? (item.metadata?.target?.name || item.metadata?.target?.id || 'Automagik') :
                                            item.type.charAt(0).toUpperCase() + item.type.slice(1).replace('_', ' ')] }), isPending && (_jsx(Text, { color: Colors.AccentYellow, italic: true, children: " (processing...)" }))] }), item.timestamp && (_jsx(Text, { color: Colors.Gray, dimColor: true, children: formatTimestamp(item.timestamp) }))] }), _jsx(Box, { marginLeft: contentPadding, flexDirection: "column", width: "100%", children: renderMessageContent() }), item.type === MessageType.ERROR && item.details && (_jsx(Box, { marginLeft: contentPadding, marginTop: layout.isShort ? 0 : 1, borderStyle: "round", borderColor: Colors.AccentRed, paddingX: 1, children: _jsx(Text, { color: Colors.Gray, italic: true, children: useResponsiveText(item.details, layout.maxContentWidth - 10) }) }))] }));
};