@justinechang39/maki
Version:
AI-powered CLI agent for file operations, CSV manipulation, todo management, and web content fetching using OpenRouter
20 lines (19 loc) • 1.46 kB
JavaScript
import React from 'react';
import { Box, Text, Static } from 'ink';
import { MessageRenderer } from './MessageRenderer.js';
import { ProcessingIndicator } from './ProcessingIndicator.js';
import { InputArea } from './InputArea.js';
import { UsageDisplay } from './UsageDisplay.js';
export const ChatInterface = React.memo(({ messages, isProcessing, inputKey, onSubmit, onInputKeyChange, usage }) => {
return (React.createElement(Box, { flexDirection: "column", height: "100%" },
React.createElement(Static, { items: [{ id: 'header' }] }, (item) => React.createElement(Text, { key: item.id, bold: true, color: "cyan" }, "\u258Cmaki")),
React.createElement(Box, { flexDirection: "column", paddingY: 1, flexGrow: 1, minHeight: 0, overflowY: "hidden" }, messages.map((msg, index) => (React.createElement(Box, { key: msg.id || `msg-${index}` },
React.createElement(MessageRenderer, { message: msg }))))),
React.createElement(Box, { flexShrink: 0 },
React.createElement(ProcessingIndicator, { isProcessing: isProcessing })),
React.createElement(Box, { flexShrink: 0 },
React.createElement(InputArea, { inputKey: inputKey, isProcessing: isProcessing, onSubmit: onSubmit, onInputKeyChange: onInputKeyChange })),
usage && (React.createElement(Box, { flexShrink: 0 },
React.createElement(UsageDisplay, { usage: usage })))));
});
ChatInterface.displayName = 'ChatInterface';