tinai

import Conversation from './conversation.js';
import { escapeHtml } from './util/format-utils.js';

/**
 * Class ScratchpadConversation
 * Handles formatting and rendering specifically for scratchpad conversation items.
 */
class ScratchpadConversation {

	#conversation;

	/**
	 * Initializes a new instance of ScratchpadConversation.
	 */
	constructor() {
		this.#conversation = new Conversation();
	}

	/**
	 * Formats a single scratchpad item as HTML.
	 * @param {Object} data - The data object for the scratchpad item.
	 * @param {number} index - The index of the item in history.
	 * @param {Object} [conversation_settings={}] - Settings for the conversation.
	 * @returns {string} The formatted HTML string.
	 */
	format_scratchpad_item(data, index, conversation_settings = {}) {
		if (!data) return '';

		let html = '';

		const rawTitle = data['summary'] || data.title || data.query || 'Scratchpad Entry';
		const titleText = escapeHtml(rawTitle);
		html += `<h3 class="scratchpad-header">${titleText}</h3>`;

		if (!data.pending) {
			html += `
				<div class="div-chat-response-buttons">
					<div class="div-chat-response-buttons-left">
						<button class="btn-copy-scratchpad" data-index="${index}">Copy</button>
					</div>
					<div class="div-chat-response-buttons-right">
						<button class="btn-redo-scratchpad" data-index="${index}">Redo</button>
						<button class="btn-undo-scratchpad" data-index="${index}">Undo</button>
						<button class="btn-delete-scratchpad" data-index="${index}">Delete</button>
					</div>
				</div>
			`;
		}

		html += this.#conversation.format_thinking_block(data.thinking, !!data.pending, index);

		if (data.pending) {
			return html;
		}

		let response_html = this.#conversation.format_content_block(data.content);
		response_html += this.#conversation.format_annotations_block(data.annotations);

		html += `<div class="div-response-content" data-index="${index}">${response_html}</div>`;
		html += this.#conversation.format_suggestions(data, conversation_settings);
		html += this.#conversation.format_cost_summary(data);

		return html;
	}

	/**
	 * Renders an entire scratchpad conversation's history turns into an HTML string.
	 * @param {Object} conversation - The conversation object containing HISTORY array.
	 * @param {Object} [options={}] - Render options (e.g. show_suggested, show_related).
	 * @returns {string} The complete HTML string for the scratchpad conversation.
	 */
	render(conversation, options = {}) {
		if (!conversation) return '<p>Enter a query to get started.</p>';
		const history = conversation.HISTORY || conversation.history || (Array.isArray(conversation) ? conversation : []);
		if (!Array.isArray(history) || history.length === 0) return '<p>Enter a query to get started.</p>';

		let html = '';
		history.forEach((data, index) => {
			html += this.format_scratchpad_item(data, index, options);
		});
		return html;
	}
}

export default ScratchpadConversation;