@justinechang39/maki
Version:
AI-powered CLI agent for file operations, CSV manipulation, todo management, and web content fetching using OpenRouter
57 lines (56 loc) • 2.84 kB
JavaScript
import React from 'react';
import { Box, Text } from 'ink';
export const MessageRenderer = React.memo(({ message: msg }) => {
if (msg.isToolResult) {
const isError = msg.content?.includes('❌');
const isSuccess = msg.content?.includes('✅') || (!isError && msg.content);
const borderColor = isError ? 'red' : isSuccess ? 'green' : 'cyan';
const iconColor = isError ? 'red' : isSuccess ? 'green' : 'cyan';
const icon = isError ? '❌' : '🔧';
return (React.createElement(Box, { paddingX: 2, paddingY: 1, borderStyle: "round", borderColor: borderColor },
React.createElement(Box, { flexDirection: "column" },
React.createElement(Box, { marginBottom: 1 },
React.createElement(Text, { color: iconColor, bold: true },
icon,
" ",
msg.toolName || 'tool')),
React.createElement(Text, { color: iconColor, wrap: "wrap" }, msg.content?.replace(/^[✅❌⚠️]\s*/, '') || ''))));
}
if (msg.isToolExecution) {
if (msg.toolName === 'think') {
return (React.createElement(Box, { paddingX: 2, paddingY: 1, borderStyle: "round", borderColor: "magenta" },
React.createElement(Text, { color: "magenta", italic: true, bold: true },
"thinking: ",
msg.content)));
}
return (React.createElement(Box, { paddingX: 2, paddingY: 1, borderStyle: "round", borderColor: "cyan" },
React.createElement(Text, { color: "cyan", bold: true },
"executing ",
msg.toolName,
"...")));
}
if (msg.isThinking) {
return (React.createElement(Box, { paddingX: 2, paddingY: 1, borderStyle: "round", borderColor: "magenta" },
React.createElement(Box, { flexDirection: "column" },
React.createElement(Box, { marginBottom: 1 },
React.createElement(Text, { color: "magenta", bold: true }, "\uD83D\uDCAD thinking")),
React.createElement(Text, { color: "magenta", italic: true, wrap: "wrap" }, msg.content))));
}
const isUser = msg.role === 'user';
const isAssistant = msg.role === 'assistant';
if (isUser) {
return (React.createElement(Box, null,
React.createElement(Text, { color: "blue" },
"\u258C",
msg.content)));
}
if (isAssistant) {
return (React.createElement(Box, null,
React.createElement(Text, { color: "green" },
"\u258C",
msg.content)));
}
return (React.createElement(Box, null,
React.createElement(Text, { dimColor: true }, msg.content || '')));
});
MessageRenderer.displayName = 'MessageRenderer';