@hhoangphuoc/escape-room-cli/dist/components/ResponseComponents.js

A CLI for playing AI-generated escape room games. Install globally with: npm install -g @hhoangphuoc/escape-room-cli

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Box, Text, useInput } from 'ink';
import Gradient from 'ink-gradient';
// Help Response Component
export const HelpResponseComponent = ({ response }) => (_jsxs(Box, { flexDirection: "column", marginY: 1, borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsx(Gradient, { name: "vice", children: _jsx(Text, { bold: true, children: "\uD83C\uDFAE Available Commands" }) }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: response.commands.map((cmd, index) => (_jsxs(Box, { marginY: 0, children: [_jsx(Text, { color: "cyan", bold: true, children: cmd.command }), _jsxs(Text, { color: "gray", children: [" - ", cmd.description] })] }, index))) }), response.currentContext && (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { color: "yellow", bold: true, children: "\uD83D\uDCCA Current Status" }), response.currentContext.isAuthenticated ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: "green", children: "\u2713 Authenticated" }), response.currentContext.currentRoom && (_jsxs(Text, { color: "blue", children: ["\uD83C\uDFE0 Room: ", response.currentContext.currentRoom] })), response.currentContext.gameMode && (_jsxs(Text, { color: "magenta", children: ["\uD83C\uDFAE Mode: ", response.currentContext.gameMode] }))] })) : (_jsx(Text, { color: "red", children: "\u2717 Not authenticated. Use /login to enter the session." })), response.currentContext.hasAI && (_jsxs(Text, { color: "purple", children: ["\uD83E\uDD16 AI: ", response.currentContext.currentModel || 'Available'] }))] }))] }));
// Look Response Component
export const LookResponseComponent = ({ response }) => (_jsxs(Box, { flexDirection: "column", marginY: 1, borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsx(Gradient, { name: "vice", children: _jsxs(Text, { bold: true, children: ["\uD83D\uDCCD ", response.roomData.name] }) }), response.roomData.background && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", wrap: "wrap", children: response.roomData.background }) })), _jsx(Text, { color: "magenta", bold: true, children: "\uD83D\uDD0D Objects found:" }), _jsx(Box, { flexDirection: "column", marginTop: 1, rowGap: 1, children: response.roomData.objects.length > 0 ? (response.roomData.objects.map((obj, index) => (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: "gray", children: ["\u2022 ", obj] }) }, index)))) : (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", italic: true, children: "No objects visible in this room." }) })) })] }));
// Inspect Response Component
export const InspectResponseComponent = ({ response }) => (_jsx(Box, { flexDirection: "column", marginY: 1, borderStyle: "round", borderColor: "cyan", paddingX: 1, children: response.objectData && (_jsxs(_Fragment, { children: [_jsx(Gradient, { name: "fruit", children: _jsxs(Text, { bold: true, children: ["\uD83D\uDD0E ", response.objectData.name] }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", wrap: "wrap", children: ["\uD83D\uDCDD ", response.objectData.description] }) }), _jsx(Box, { marginTop: 1, flexDirection: "row", alignItems: "center", children: _jsx(Text, { color: response.objectData.unlocked ? "green" : "red", bold: true, children: response.objectData.unlocked ? "🔓 Status: Unlocked" : "🔒 Status: Locked" }) }), response.objectData.unlocked && response.objectData.answer && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "green", children: ["\u2705 Answer: ", response.objectData.answer] }) })), response.objectData.details && response.objectData.details.length > 0 && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: "\uD83D\uDCCB Details:" }), response.objectData.details.map((detail, index) => (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: "gray", children: ["\u2022 ", detail] }) }, index)))] }))] })) }));
// Guess Response Component
export const GuessResponseComponent = ({ response }) => (_jsxs(Box, { flexDirection: "column", marginY: 1, borderStyle: "round", borderColor: response.success && response.objectData.correctAnswer ? "green" : "red", paddingX: 1, children: [response.success && response.objectData.correctAnswer ? (_jsx(Gradient, { name: "summer", children: _jsx(Text, { bold: true, children: "\uD83C\uDF89 Correct Answer!" }) })) : (_jsx(Text, { color: "red", bold: true, children: "\u274C Incorrect Guess" })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: response.message }) }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: "cyan", children: ["\uD83C\uDFAF Object: ", response.objectData.name] }), response.success && response.objectData.correctAnswer && (_jsx(Text, { color: "green", children: "\uD83D\uDD13 The object is now unlocked!" }))] })] }));
// Password Response Component
export const PasswordResponseComponent = ({ response }) => (_jsx(Box, { flexDirection: "column", marginY: 1, borderStyle: "round", borderColor: response.gameResult.escaped ? "green" : "red", paddingX: 1, children: response.gameResult.escaped ? (_jsxs(_Fragment, { children: [_jsx(Gradient, { name: "summer", children: _jsx(Text, { bold: true, children: "\uD83C\uDF8A Congratulations! You Escaped!" }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: "green", paddingX: 1, rowGap: 0.25, children: [_jsx(Text, { color: "yellow", bold: true, children: "\uD83C\uDFC6 Escape Summary" }), response.gameResult.timeElapsed && (_jsxs(Text, { color: "cyan", children: ["\u23F1\uFE0F  Time: ", response.gameResult.timeElapsed, " seconds"] })), response.gameResult.hintsUsed !== undefined && (_jsxs(Text, { color: "yellow", children: ["\uD83D\uDCA1 Hints used: ", response.gameResult.hintsUsed] })), response.gameResult.gameCompleted && (_jsx(Text, { color: "green", bold: true, children: "\uD83C\uDFAE Game completed! Well done!" }))] })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: "red", bold: true, children: "\u274C Password Incorrect" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: response.message }) })] })) }));
// Hint Response Component
export const HintResponseComponent = ({ response }) => (_jsxs(Box, { flexDirection: "column", marginY: 1, borderStyle: "round", borderColor: "cyan", paddingX: 1, rowGap: 0.25, children: [_jsx(Text, { color: "cyan", bold: true, children: "\uD83D\uDCA1 Hint" }), _jsx(Box, { marginTop: 1, borderStyle: "single", borderColor: "yellow", paddingX: 1, children: _jsx(Text, { color: "yellow", wrap: "wrap", children: response.hintData.hint }) }), response.hintData.hintsUsed > 0 && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", children: ["\uD83D\uDCCA Hints used so far: ", response.hintData.hintsUsed] }) }))] }));
// New Game Response Component
export const NewGameResponseComponent = ({ response }) => (_jsxs(Box, { flexDirection: "column", marginY: 1, borderStyle: "round", borderColor: "cyan", paddingX: 1, rowGap: 0.5, paddingY: 1, children: [_jsx(Gradient, { name: "vice", children: _jsxs(Text, { bold: true, children: ["\uD83C\uDFAE ", response.gameData.name] }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: "green", paddingX: 1, rowGap: 0.25, children: [_jsxs(Text, { color: "cyan", children: ["\uD83C\uDD94 Game ID: ", response.gameData.id] }), _jsxs(Text, { color: "blue", children: ["\uD83C\uDFE0 Room: ", response.gameData.currentRoom, "/", response.gameData.totalRooms] }), _jsxs(Text, { color: "yellow", children: ["\uD83D\uDCE6 Objects: ", response.gameData.objectCount] }), _jsxs(Text, { color: "magenta", children: ["\uD83C\uDFAF Mode: ", response.gameData.mode] }), response.gameData.startTime && (_jsxs(Text, { color: "gray", children: ["\u23F0 Started: ", new Date(response.gameData.startTime).toLocaleTimeString()] }))] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", wrap: "wrap", children: response.gameData.background }) })] }));
// Leaderboard Response Component
export const LeaderboardResponseComponent = ({ response }) => (_jsxs(Box, { flexDirection: "column", marginY: 1, borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [_jsx(Gradient, { name: "teen", children: _jsx(Text, { bold: true, children: "\uD83C\uDFC6 Leaderboard" }) }), _jsx(Box, { marginTop: 1, flexDirection: "column", rowGap: 0.5, children: response.leaderboardData.entries.map((entry, index) => (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: "gray", children: ["\u2022 ", entry.rank, ". ", entry.userName, " - ", entry.timeElapsed, "s, ", entry.hintsUsed, " hints", entry.totalTokens !== undefined ? `, ${entry.totalTokens} tokens` : '', entry.totalCost !== undefined ? `, $${entry.totalCost.toFixed(3)}` : ''] }) }, index))) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", children: ["\uD83C\uDFAE Mode: ", response.leaderboardData.mode] }) })] }));
// Auth Response Component
export const AuthResponseComponent = ({ response }) => (_jsx(Box, { flexDirection: "column", marginY: 1, paddingX: 1, children: response.success ? (_jsx(_Fragment, { children: response.userData ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingX: 1, borderStyle: "single", borderColor: "green", children: [_jsx(Gradient, { name: "vice", children: _jsx(Text, { bold: true, children: "\uD83D\uDD10 Login Successfully" }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, paddingX: 1, rowGap: 0.25, children: [_jsxs(Text, { color: "cyan", children: ["\uD83D\uDC64 Welcome, ", response.userData.userName, "!"] }), response.userData.apiKey && (_jsx(Text, { color: "gray", children: "\uD83D\uDD11 Your API key is configured" }))] })] })) : (_jsx(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: "green", paddingX: 1, children: _jsx(Text, { color: "green", children: "\uD83D\uDC64 Logged out successfully. Type /login to login again." }) })) })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: "red", bold: true, children: "\u274C Authentication Failed" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", children: response.message }) })] })) }));
// AI Response Component
export const AIResponseComponent = ({ response, 
// isExpanded = false, 
hotkey,
// onToggle?: () => void;
 }) => {
    // const reasoningAvailable = Boolean(response.reasoning?.summary) || Boolean(response.reasoning?.steps && response.reasoning.steps.length > 0);
    // const toggleKeyLabel = hotkey ? `Ctrl+${hotkey}` : 'Ctrl+R';
    const usage = response.usage;
    const formattedCost = typeof usage?.cost === 'number' ? usage.cost.toFixed(5) : undefined;
    const inputTokens = usage?.inputTokens ?? '—';
    const outputTokens = usage?.outputTokens ?? '—';
    // const reasoningTokens = usage?.reasoningTokens;
    const totalTokens = usage?.tokens;
    useInput((input, key) => {
        // if (!onToggle || !hotkey || !reasoningAvailable) return;
        if (key.ctrl && input === String(hotkey)) {
            // onToggle();
        }
    }, { isActive: Boolean(hotkey) });
    return (_jsxs(Box, { flexDirection: "column", marginY: 1, borderStyle: "round", borderColor: "cyan", paddingX: 1, rowGap: 0.5, children: [_jsx(Gradient, { name: "atlas", children: _jsxs(Text, { bold: true, children: ["\uD83E\uDD16 AI Response", response.usage?.model ? ` • ${response.usage.model}` : ''] }) }), _jsx(Box, { children: _jsx(Text, { color: "gray", wrap: "wrap", children: response.message }) }), (usage?.cost !== undefined || usage?.inputTokens !== undefined || usage?.tokens !== undefined) && (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, rowGap: 0.25, children: [_jsx(Text, { color: "yellow", bold: true, children: "\uD83D\uDCCA Usage" }), formattedCost !== undefined && (_jsxs(Text, { color: "green", children: ["\uD83D\uDCB0 Cost: $", formattedCost] })), _jsxs(Text, { color: "cyan", children: ["\u2B06\uFE0F Input tokens: ", inputTokens, " | \u2B07\uFE0F Output tokens: ", outputTokens] }), totalTokens !== undefined && (_jsxs(Text, { color: "gray", children: ["\uD83D\uDD22 Total tokens: ", totalTokens] }))] }))] }));
};
// Error Response Component
export const ErrorResponseComponent = ({ message }) => (_jsxs(Box, { flexDirection: "column", marginY: 1, borderStyle: "round", borderColor: "red", paddingX: 1, children: [_jsx(Text, { color: "red", bold: true, children: "\u274C Error" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", wrap: "wrap", children: message }) })] }));
// Success Response Component
export const SuccessResponseComponent = ({ message }) => (_jsxs(Box, { flexDirection: "column", marginY: 1, borderStyle: "round", borderColor: "green", paddingX: 1, children: [_jsx(Text, { color: "green", bold: true, children: "\u2705 Success" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "green", wrap: "wrap", children: message }) })] }));
// Info Response Component
export const InfoResponseComponent = ({ message }) => (_jsxs(Box, { flexDirection: "column", marginY: 1, borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: "\u2139\uFE0F  Information" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "cyan", wrap: "wrap", children: message }) })] }));
// Generic Response Component
export const GenericResponseComponent = ({ message }) => (_jsx(Box, { flexDirection: "column", marginY: 1, paddingX: 1, children: _jsx(Text, { color: "gray", wrap: "wrap", children: message }) }));