frontend/js/components/transcript-view.js

/**
 * TranscriptView - manages conversation bubble rendering
 */
export class TranscriptView {
    constructor(container) {
        this.container = container;
        this.lastSpeaker = null;
        this.lastBubble = null;
    }

    /**
     * Add or append a message to the transcript.
     * Same speaker as last message → append text to existing bubble.
     * New speaker → create a new bubble.
     */
    addMessage(speaker, text) {
        if (!text || text.trim().length === 0) return;

        if (this.lastSpeaker === speaker && this.lastBubble) {
            const textEl = this.lastBubble.querySelector('.message-text');
            if (textEl) textEl.textContent += text;
        } else {
            const timestamp = new Date().toLocaleTimeString();
            const icons = { user: '👤', agent: '🤖', system: '⚠️' };
            const icon = icons[speaker] || '•';

            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${speaker}-message`;

            if (speaker === 'system') {
                messageDiv.innerHTML = `
                    <div class="message-bubble">
                        <div class="message-text">${text}</div>
                        <div class="timestamp">${timestamp}</div>
                    </div>`;
            } else if (speaker === 'user') {
                messageDiv.innerHTML = `
                    <div class="message-bubble">
                        <div class="message-text">${text}</div>
                        <div class="timestamp">${timestamp}</div>
                    </div>
                    <div class="message-avatar">${icon}</div>`;
            } else {
                messageDiv.innerHTML = `
                    <div class="message-avatar">${icon}</div>
                    <div class="message-bubble">
                        <div class="message-text">${text}</div>
                        <div class="timestamp">${timestamp}</div>
                    </div>`;
            }

            this.container.appendChild(messageDiv);
            this.lastSpeaker = speaker;
            this.lastBubble = messageDiv.querySelector('.message-bubble');
        }

        this.container.scrollTop = this.container.scrollHeight;
    }

    clear() {
        this.container.innerHTML = '';
        this.lastSpeaker = null;
        this.lastBubble = null;
    }
}