import { jsx, jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { Box, Text } from "ink";
import { MessageItem } from "./MessageItem.js";
function MessageList({ messages, maxVisible = 50 }) {
  const visibleMessages = useMemo(() => {
    return messages.slice(-maxVisible);
  }, [messages, maxVisible]);
  const hasMoreMessages = messages.length > maxVisible;
  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingX: 1, paddingY: 1, children: [
    hasMoreMessages && /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
      "... (",
      messages.length - maxVisible,
      " earlier messages hidden)"
    ] }) }),
    visibleMessages.length === 0 && /* @__PURE__ */ jsx(Box, { marginY: 2, children: /* @__PURE__ */ jsx(Text, { color: "greenBright", children: "Welcome to Dexto CLI! Type your message below or use /help for commands." }) }),
    visibleMessages.map((msg) => /* @__PURE__ */ jsx(MessageItem, { message: msg }, msg.id))
  ] });
}
export {
  MessageList
};
