一、详细介绍

看着简单 实际也不难
功能超级实用。api自己去官网申请就行了，免费10元额度，可以用好久好久

二、效果展示

1.部分代码

代码如下（示例）：

function addMessage(message, isUser = true) {
        const messageContainer = $('<div>').addClass('message-container').css({
            'display': 'flex',
            'flex-direction': 'column',
            'margin-bottom': '10px'
        });

        // 添加时间戳
        const timestamp = $('<div>').css({
            'font-size': '0.8em',
            'color': '#666',
            'align-self': isUser ? 'flex-end' : 'flex-start',
            'margin-bottom': '2px'
        }).text('[' + getFormattedTime() + ']');
        
        messageContainer.append(timestamp);
        
        const messageElement = $('<div>').css({
            'max-width': '70%',
            'padding': '12px 16px',
            'border-radius': isUser ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
            'background': isUser ? '#0073aa' : '#f1f1f1',
            'color': isUser ? 'white' : '#333',
            'align-self': isUser ? 'flex-end' : 'flex-start',
            'margin-bottom': '10px',
            'box-shadow': '0 2px 4px rgba(0,0,0,0.1)',
            'position': 'relative',
            'opacity': '0',
            'transform': isUser ? 'translateX(20px)' : 'translateX(-20px)',
            'transition': 'all 0.3s ease'
        }).text(message);
        
        // 添加小三角指示
        const arrow = $('<div>').css({
            'position': 'absolute',
            'width': '0',
            'height': '0',
            'border': '6px solid transparent',
            'right': isUser ? '-12px' : 'auto',
            'left': isUser ? 'auto' : '-12px',
            'top': '12px',
            'border-left-color': isUser ? '#0073aa' : 'transparent',
            'border-right-color': isUser ? 'transparent' : '#f1f1f1'
        });

2.效果图展示