AIEC-new/AIEC-server/js/force-text-wrap.js

/**
 * 强制文本换行处理
 * 解决列表项中文本不换行的问题
 */

(function() {
    'use strict';
    
    /**
     * 处理列表项的换行
     */
    function processListItems() {
        // 获取所有消息中的列表项
        const listItems = document.querySelectorAll(
            '.ai-message li, .user-message li, .message li, #chatMessages li'
        );
        
        listItems.forEach(li => {
            // 获取列表项的计算样式
            const computedStyle = window.getComputedStyle(li);
            const parentWidth = li.parentElement.offsetWidth;
            
            // 如果列表项内容超出父容器宽度，强制设置样式
            if (li.scrollWidth > parentWidth) {
                li.style.wordBreak = 'break-all';
                li.style.overflowWrap = 'anywhere';
                li.style.whiteSpace = 'normal';
                li.style.maxWidth = '100%';
            }
            
            // 处理列表项中的所有文本节点
            const walker = document.createTreeWalker(
                li,
                NodeFilter.SHOW_TEXT,
                null,
                false
            );
            
            let textNode;
            while (textNode = walker.nextNode()) {
                const text = textNode.textContent;
                // 检查是否包含长连续字符串（超过30个字符没有空格）
                if (text && /\S{30,}/.test(text)) {
                    // 在长字符串中插入零宽空格以允许换行
                    const newText = text.replace(/(\S{20})/g, '$1\u200B');
                    if (newText !== text) {
                        textNode.textContent = newText;
                    }
                }
            }
        });
    }
    
    /**
     * 设置全局样式
     */
    function setGlobalStyles() {
        // 检查是否已经添加了样式
        if (document.getElementById('force-wrap-styles')) {
            return;
        }
        
        // 创建style元素
        const style = document.createElement('style');
        style.id = 'force-wrap-styles';
        style.textContent = `
            /* 强制列表项换行 */
            .ai-message li,
            .user-message li,
            .message li,
            #chatMessages li {
                word-break: break-all !important;
                overflow-wrap: anywhere !important;
                white-space: normal !important;
                max-width: 100% !important;
                line-break: anywhere !important;
            }
            
            /* 列表容器设置 */
            .ai-message ul,
            .ai-message ol,
            .user-message ul,
            .user-message ol,
            .message ul,
            .message ol,
            #chatMessages ul,
            #chatMessages ol {
                max-width: 100% !important;
                width: 100% !important;
            }
        `;
        
        // 添加到head
        document.head.appendChild(style);
    }
    
    /**
     * 监听DOM变化
     */
    function setupObserver() {
        const chatContainer = document.getElementById('chatMessages');
        if (!chatContainer) {
            setTimeout(setupObserver, 500);
            return;
        }
        
        // 创建观察器
        const observer = new MutationObserver((mutations) => {
            // 当有新消息添加时处理
            let hasNewMessages = false;
            mutations.forEach((mutation) => {
                if (mutation.addedNodes.length > 0) {
                    hasNewMessages = true;
                }
            });
            
            if (hasNewMessages) {
                // 延迟处理，等待渲染完成
                setTimeout(processListItems, 100);
            }
        });
        
        // 开始观察
        observer.observe(chatContainer, {
            childList: true,
            subtree: true
        });
    }
    
    /**
     * 初始化
     */
    function init() {
        // 设置全局样式
        setGlobalStyles();
        
        // DOM加载完成后执行
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', () => {
                processListItems();
                setupObserver();
            });
        } else {
            processListItems();
            setupObserver();
        }
        
        // 定期检查（后备方案）
        setInterval(processListItems, 3000);
    }
    
    // 启动
    init();
    
})();