eveAI/eveai_chat_client/static/assets/vue-components/MessageHistory.vue

<template>
    <div class="message-history-container">
        <!-- Normal messages container -->
        <div class="chat-messages" ref="messagesContainer">
            <!-- Loading indicator for load more -->
            <div v-if="$slots.loading" class="load-more-indicator">
                <slot name="loading"></slot>
            </div>
            
            <!-- Messages wrapper for bottom alignment -->
            <div class="messages-wrapper">
                <!-- Empty state (only show when no messages) -->
                <div v-if="normalMessages.length === 0" class="empty-state">
                    <div class="empty-icon">💬</div>
                    <div class="empty-text">Nog geen berichten</div>
                    <div class="empty-subtext">Start een gesprek door een bericht te typen!</div>
                </div>
                
                <!-- Normal message list (excluding temporarily positioned AI messages) -->
                <template v-if="normalMessages.length > 0">
                    <!-- Messages -->
                    <template v-for="(message, index) in normalMessages" :key="message.id">
                        <!-- The actual message -->
                        <chat-message
                            :message="message"
                            :is-submitting-form="isSubmittingForm"
                            :api-prefix="apiPrefix"
                            :is-latest-ai-message="isLatestAiMessage(message)"
                            @image-loaded="handleImageLoaded"
                            @specialist-complete="$emit('specialist-complete', $event)"
                            @specialist-error="$emit('specialist-error', $event)"
                        ></chat-message>
                    </template>
                </template>
                
                <!-- Typing indicator -->
                <typing-indicator v-if="isTyping"></typing-indicator>
            </div>
        </div>
        
    </div>
</template>

<script>
import ChatMessage from './ChatMessage.vue';
import TypingIndicator from './TypingIndicator.vue';
import { useTranslationClient } from '../js/composables/useTranslation.js';

export default {
    name: 'MessageHistory',
    components: {
        'chat-message': ChatMessage,
        'typing-indicator': TypingIndicator
    },
    setup() {
        const { translateSafe } = useTranslationClient();
        
        return {
            translateSafe
        };
    },
    props: {
        messages: {
            type: Array,
            default: () => []
        },
        isTyping: {
            type: Boolean,
            default: false
        },
        isSubmittingForm: {
            type: Boolean,
            default: false
        },
        apiPrefix: {
            type: String,
            default: ''
        },
        autoScroll: {
            type: Boolean,
            default: true
        }
    },
    emits: ['load-more', 'specialist-complete', 'specialist-error'],
    data() {
        return {
            isAtBottom: true,
            showScrollButton: false,
            unreadCount: 0,
            languageChangeHandler: null
        };
    },
    computed: {
        // Messages that should be shown in normal flow (excluding temporarily positioned AI messages)
        normalMessages() {
            return this.messages.filter(msg => !msg.isTemporarilyAtBottom);
        },
    },
    watch: {
        messages: {
            handler(newMessages, oldMessages) {
                const hasNewMessages = newMessages.length > (oldMessages?.length || 0);
                
                // Always auto-scroll when new messages are added (regardless of current scroll position)
                if (this.autoScroll && hasNewMessages) {
                    // Double $nextTick for better DOM update synchronization
                    this.$nextTick(() => {
                        this.$nextTick(() => {
                            this.scrollToBottom(true);
                        });
                    });
                }
            },
            deep: true,
            immediate: false
        },
        isTyping(newVal) {
            if (newVal && this.autoScroll) {
                this.$nextTick(() => {
                    this.scrollToBottom();
                });
            }
        }
    },
    created() {
        // Maak een benoemde handler voor betere cleanup
        this.languageChangeHandler = (event) => {
            if (event.detail && event.detail.language) {
                this.handleLanguageChange(event);
            }
        };

        // Luister naar taalwijzigingen
        document.addEventListener('language-changed', this.languageChangeHandler);
    },
    mounted() {
        this.setupScrollListener();
        
        // Initial scroll to bottom
        if (this.autoScroll) {
            this.$nextTick(() => {
                this.scrollToBottom();
            });
        }
    },
    beforeUnmount() {
        // Cleanup scroll listener
        const container = this.$refs.messagesContainer;
        if (container) {
            container.removeEventListener('scroll', this.handleScroll);
        }

        // Cleanup language change listener
        if (this.languageChangeHandler) {
            document.removeEventListener('language-changed', this.languageChangeHandler);
        }
    },
    methods: {
        async handleLanguageChange(event) {
            // Controleer of dit het eerste bericht is in een gesprek met maar één bericht
            if (this.messages.length === 1 && this.messages[0].sender === 'ai') {
                const firstMessage = this.messages[0];
                
                // Controleer of we een originele inhoud hebben om te vertalen
                if (firstMessage.content) {

                    if (!firstMessage.originalContent) {
                        firstMessage.originalContent = firstMessage.content;
                    }

                    console.log('Originele inhoud van eerste AI bericht:', firstMessage.originalContent);
                    console.log('Content eerste AI bericht:', firstMessage.content);

                    console.log('Vertaling van eerste AI bericht naar:', event.detail.language);
                    
                    try {
                        // Gebruik moderne translateSafe composable
                        const translatedText = await this.translateSafe(
                            firstMessage.originalContent,
                            event.detail.language,
                            {
                                context: 'chat_message',
                                apiPrefix: this.apiPrefix,
                                fallbackText: firstMessage.originalContent
                            }
                        );

                        // Update de inhoud van het bericht
                        firstMessage.content = translatedText;
                        console.log('Eerste bericht succesvol vertaald');
                    } catch (error) {
                        console.error('Fout bij vertalen eerste bericht:', error);
                        // Fallback naar originele inhoud
                        firstMessage.content = firstMessage.originalContent;
                    }
                }
            }
        },

        scrollToBottom(force = false) {
            const container = this.$refs.messagesContainer;
            if (container) {
                // Use requestAnimationFrame for better timing
                requestAnimationFrame(() => {
                    container.scrollTop = container.scrollHeight;
                    this.isAtBottom = true;
                    this.showScrollButton = false;
                    this.unreadCount = 0;
                });
            }
        },

        setupScrollListener() {
            const container = this.$refs.messagesContainer;
            if (!container) return;

            container.addEventListener('scroll', this.handleScroll);
        },

        handleScroll() {
            const container = this.$refs.messagesContainer;
            if (!container) return;

            const threshold = 50; // Reduced threshold for better detection
            const isNearBottom = container.scrollHeight - container.scrollTop - container.clientHeight < threshold;

            this.isAtBottom = isNearBottom;

            // Load more messages when scrolled to top
            if (container.scrollTop === 0) {
                this.$emit('load-more');
            }
        },

        handleImageLoaded() {
            // Auto-scroll when img load to maintain position
            if (this.isAtBottom) {
                this.$nextTick(() => this.scrollToBottom());
            }
        },

        searchMessages(query) {
            // Simple message search
            if (!query.trim()) return this.messages;

            const searchTerm = query.toLowerCase();
            return this.messages.filter(message =>
                message.content &&
                message.content.toLowerCase().includes(searchTerm)
            );
        },

        isLatestAiMessage(message) {
            // Only AI messages with taskId can be "latest"
            if (message.sender !== 'ai' || !message.taskId) {
                return false;
            }

            // Find the latest AI message with a taskId by iterating in reverse order
            // The latest AI message is the one where the specialist interaction is still active
            for (let i = this.messages.length - 1; i >= 0; i--) {
                const msg = this.messages[i];
                if (msg.sender === 'ai' && msg.taskId) {
                    // This is the latest AI message with a taskId
                    return msg.id === message.id;
                }
            }

            return false;
        }
    }
};
</script>

<style scoped>
.message-history-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    scroll-behavior: smooth;
    
    /* Bottom-aligned messages implementation */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
}

.messages-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between messages */
}

.load-more-indicator {
    text-align: center;
    padding: 10px;
    color: #666;
    font-size: 0.9rem;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #666;
    padding: 40px 20px;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-text {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 8px;
    color: #333;
}

.empty-subtext {
    font-size: 0.9rem;
    color: #666;
    max-width: 300px;
    line-height: 1.4;
}

/* Scrollbar styling */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chat-messages {
        padding: 8px;
    }
    
    .empty-state {
        padding: 20px 16px;
    }
    
    .empty-icon {
        font-size: 2.5rem;
    }
    
    .empty-text {
        font-size: 1.1rem;
    }
}
</style>