import React from "react"; import { Box, Text } from "ink"; import { renderMarkdown } from "../markdown.js"; import { renderToolCallLines } from "../toolcall.js"; import type { ToolCallInfo } from "../toolcall.js"; import type { ResponseItem } from "../types.js"; import { CRANBERRY, TEXT_DIM, GOLD } from "../colors.js"; import { Spinner } from "./Spinner.js"; export function emptyLine(key: string, width: number): React.ReactElement { return ; } export function renderUserPrompt( userText: string, width: number, turnId: string, collapsedUserPrompt: (text: string, width: number) => React.ReactElement ): React.ReactElement[] { const constrainedWidth = Math.max(width - 4, 10); return [ emptyLine(`u-gap-${turnId}`, width), {"❯ "} {collapsedUserPrompt(userText, constrainedWidth)} , ]; } export function renderToolCallItem( item: ResponseItem & { itemType: "tool_call" }, index: number, width: number, selected: boolean, ): React.ReactElement[] { const info: ToolCallInfo = { toolCallId: item.toolCallId, title: item.title, status: item.status ?? "pending", kind: item.kind, rawInput: item.rawInput, rawOutput: item.rawOutput, content: item.content, locations: item.locations, }; return [ emptyLine(`tc-gap-${index}`, width), ...renderToolCallLines(info, width, selected), ]; } export function renderErrorItem( item: ResponseItem & { itemType: "error" }, index: number, width: number ): React.ReactElement[] { const lines: React.ReactElement[] = [ emptyLine(`err-gap-${index}`, width), {"⚠ Error: "} , ]; const errorLines = item.message.split("\n"); errorLines.forEach((line, j) => { lines.push( {line} ); }); return lines; } export function renderContentItem( item: ResponseItem & { itemType: "content_chunk" }, index: number, width: number ): React.ReactElement[] { if (item.content.type !== "text" || !item.content.text) { return []; } const constrainedWidth = Math.max(width - 2, 10); const mdLines = renderMarkdown(item.content.text, constrainedWidth); const lines: React.ReactElement[] = [emptyLine(`md-gap-${index}`, width)]; mdLines.forEach((mdLine, j) => { lines.push( {mdLine} ); }); return lines; } export function renderLoadingIndicator( status: string, spinIdx: number, width: number ): React.ReactElement[] { return [ emptyLine("ld-gap", width), {status} , ]; } export function renderQueuedMessages( queuedMessages: string[], width: number ): React.ReactElement[] { const messageWidth = Math.max(width - 20, 10); return queuedMessages.map((message, i) => ( {"❯ "} {message} (queued) )); }