@hhoangphuoc/escape-room-cli
Version:
A CLI for playing AI-generated escape room games. Install globally with: npm install -g @hhoangphuoc/escape-room-cli
56 lines (55 loc) • 5.3 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Box, Text, useInput } from 'ink';
import Gradient from 'ink-gradient';
import { MODELS_COLLECTION } from '../utils/constants.js';
const ModelSelector = ({ onSelect, onClose }) => {
const models = Object.values(MODELS_COLLECTION);
const [selectedIndex, setSelectedIndex] = useState(0);
useInput((_, key) => {
if (key.downArrow) {
setSelectedIndex((prev) => (prev + 1) % models.length);
}
else if (key.upArrow) {
setSelectedIndex((prev) => (prev - 1 + models.length) % models.length);
}
else if (key.return) {
const selectedModel = models[selectedIndex];
if (selectedModel) {
onSelect(selectedModel);
onClose();
}
}
else if (key.escape) {
onClose();
}
});
const getCostColor = (cost) => {
switch (cost) {
case 'low': return 'green';
case 'medium': return 'yellow';
case 'high': return 'red';
case 'very-high': return 'magenta';
default: return 'white';
}
};
const getCategoryColor = (category) => {
switch (category) {
case 'standard': return 'blue';
case 'reasoning': return 'purple';
case 'multimodal': return 'cyan';
default: return 'white';
}
};
const renderCapabilityBar = (level, maxLevel = 5) => {
const filled = '█'.repeat(level);
const empty = '░'.repeat(maxLevel - level);
return filled + empty;
};
const selectedModel = models[selectedIndex];
if (!selectedModel) {
return (_jsx(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "red", children: _jsx(Text, { color: "red", children: "Error: No models available" }) }));
}
return (_jsxs(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "cyan", width: "100%", height: "100%", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Gradient, { name: "vice", children: _jsx(Text, { bold: true, children: "\uD83E\uDD16 AI Model Selection" }) }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "gray", children: "Choose your AI companion for escape room assistance" }) }), _jsxs(Box, { flexDirection: "row", height: "100%", children: [_jsxs(Box, { flexDirection: "column", width: "50%", marginRight: 2, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "Available Models:" }) }), models.map((model, index) => (_jsxs(Box, { marginBottom: 1, children: [_jsx(Box, { children: _jsxs(Text, { color: index === selectedIndex ? 'cyan' : 'white', bold: index === selectedIndex, children: [index === selectedIndex ? '▶ ' : ' ', model.icon, " ", model.label] }) }), _jsx(Box, { paddingLeft: 4, children: _jsxs(Text, { color: getCategoryColor(model.category || 'standard'), children: ["[", model.category, "]"] }) })] }, model.value))), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "Press \u2191\u2193 to navigate \u2022 Enter to select \u2022 ESC to cancel" }) })] }), _jsxs(Box, { flexDirection: "column", width: "50%", borderLeft: true, borderColor: "gray", paddingLeft: 2, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Box, { children: _jsxs(Text, { bold: true, color: "cyan", children: [selectedModel.icon, " ", selectedModel.label] }) }), _jsx(Box, { children: _jsxs(Text, { color: getCategoryColor(selectedModel.category || 'standard'), children: ["[", selectedModel.category, "]"] }) })] }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { children: selectedModel.description }) }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: "yellow", children: "Capabilities:" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "\uD83E\uDDE0 Thinking: " }), _jsxs(Text, { color: "cyan", children: [renderCapabilityBar(selectedModel.thinkingCapability || 0), " ", selectedModel.thinkingCapability, "/5"] })] }), _jsxs(Box, { children: [_jsx(Text, { children: "\uD83D\uDD2C Reasoning: " }), _jsxs(Text, { color: "purple", children: [renderCapabilityBar(selectedModel.reasoningCapability || 0), " ", selectedModel.reasoningCapability, "/5"] })] }), _jsxs(Box, { children: [_jsx(Text, { children: "\u26A1 Speed: " }), _jsxs(Text, { color: "green", children: [renderCapabilityBar(selectedModel.speed || 0), " ", selectedModel.speed, "/5"] })] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "\uD83D\uDCB0 Cost: " }), _jsx(Text, { color: getCostColor(selectedModel.cost || 'medium'), bold: true, children: selectedModel.cost?.toUpperCase() })] })] }), _jsx(Box, { marginTop: 1, padding: 1, borderStyle: "round", borderColor: "gray", children: _jsxs(Text, { color: "gray", children: [selectedModel.category === 'reasoning' && '🎯 Best for complex puzzles and logical challenges', selectedModel.category === 'standard' && '📝 Great for general conversation and hints', selectedModel.category === 'multimodal' && '🎨 Excellent for visual and complex tasks'] }) })] })] })] }));
};
export default ModelSelector;