Tailwind CSS 实战：基于 Kooboo 构建 AI 对话框页面（七）：消息框交互功能添加

kooboo china.2025-06-06 13:51

Tailwind CSS 实战，基于Kooboo构建AI对话框页面（一）

Tailwind CSS 实战，基于Kooboo构建AI对话框页面（二）：实现交互功能

Tailwind CSS 实战，基于 Kooboo 构建 AI 对话框页面（三）：实现暗黑模式主题切换

Tailwind CSS 实战，基于 Kooboo 构建 AI 对话框页面（四）：语音识别输入功能

Tailwind CSS 实战：基于 Kooboo 构建 AI 对话框页面（五）：语音合成输出与交互增强

Tailwind CSS 实战：基于 Kooboo 构建 AI 对话框页面（六）：图片上传交互功能

在**《Tailwind CSS 实战》系列** 前六篇内容中，我们围绕**Kooboo 平台** ，逐步构建起 ++AI 对话框页面的基础框架、语音交互、主题切换++ 等能力。本篇作为第七篇，聚焦纯 JavaScript 驱动的消息交互功能迭代 ，在不改动 HTML 结构的前提下，为消息框新增 复制、编辑、删除 （用户消息）**及复制、重新生成（AI 消息）**功能，深度优化对话交互体验。实现效果如下：

​

一、功能需求分析

（一）用户消息操作

  • 复制内容：点击复制按钮，调用浏览器剪贴板 API，将消息文本复制，支持后续粘贴复用。
  • 编辑消息：允许对已发送的消息进行编辑，编辑完成并发送后，在消息上显示 "(已编辑)" 标记，清晰区分原始与修改后内容。
  • 删除消息 ：用户可主动移除自身发送的消息，触发删除操作时，通过 confirm 弹窗二次确认，避免误删。

（二）AI 消息操作

  • 复制内容：与用户消息复制逻辑复用，快速提取 AI 回复文本到剪贴板。
  • 重新生成：点击按钮后，展示加载动画，模拟 AI 重新处理逻辑，完成后替换原有回复内容，为用户提供多样化 AI 回答。

二、实现思路

  • 不改动 HTML 结构 ：依赖 Tailwind CSS 预设的 .message .copy-button 等类名，通过 JavaScript 动态绑定 事件。
  • 交互逻辑解耦：封装通用函数（如复制、加载状态），避免重复代码，适配用户与 AI 消息的差异化交互。

三、核心 Javascript 逻辑代码

1. 初始化与事件绑定

javascript 复制代码 
// 初始化消息操作事件
    function setupMessageActions() {
        const messages = document.querySelectorAll('.message');
        
        messages.forEach(message => {
            const messageType = message.dataset.messageType;
            const actions = message.querySelector('.absolute.top-2.right-2');
            
            // 鼠标悬停显示操作按钮
            message.addEventListener('mouseenter', () => {
                actions.classList.remove('opacity-0');
                actions.classList.add('opacity-100');
            });
            
            message.addEventListener('mouseleave', () => {
                actions.classList.remove('opacity-100');
                actions.classList.add('opacity-0');
            });
            
            // 复制按钮点击
            const copyButton = message.querySelector('.copy-button');
            if (copyButton) {
                copyButton.addEventListener('click', () => {
                    copyMessageContent(copyButton);
                });
            }
            
            // 编辑按钮点击（用户消息）
            if (messageType === 'user') {
                const editButton = message.querySelector('.edit-button');
                const deleteButton = message.querySelector('.delete-button');
                
                editButton.addEventListener('click', () => {
                    const messageId = message.dataset.messageId;
                    const messageText = message.querySelector('.message-content p').textContent;
                    
                    // 设置当前编辑的消息ID
                    currentEditingMessageId = messageId;
                    
                    // 将消息内容放入输入框
                    messageInput.value = messageText;
                    messageInput.focus();
                    
                    // 保持发送按钮文本不变
                    sendButton.textContent = '发送';
                });
                
                // 删除消息
                deleteButton.addEventListener('click', () => {
                    if (confirm('确定要删除这条消息吗？')) {
                        message.remove();
                        
                    }
                });
            }
            
            // 重新生成按钮点击（AI消息）
            if (messageType === 'ai') {
                const regenerateButton = message.querySelector('.regenerate-button');
                regenerateButton.addEventListener('click', () => {
                    const originalText = message.querySelector('.message-content code').textContent.trim();
                    regenerateAIResponse(message, originalText);
                });
            }
        });
    }

核心逻辑：

  • 事件处理函数仅负责状态变更 （如设置 currentEditingMessageId）和触发行为 （如调用 copyMessageContent）。
  • 具体的 DOM 更新（如修改消息内容、添加标记）集中在其他函数（如 sendMessage）中处理，避免事件回调过于臃肿。

2. 复制功能实现

javascript 复制代码 
function copyMessageContent(element) {
    const messageContent = element.closest('.message').querySelector('.message-content');
    let textToCopy = '';
    
    // 智能识别文本类型（普通文本或代码块）
    const paragraphs = messageContent.querySelectorAll('p');
    if (paragraphs.length > 0) {
        paragraphs.forEach(p => textToCopy += p.textContent + '\n');
    } else {
        const codeBlocks = messageContent.querySelectorAll('code');
        if (codeBlocks.length > 0) {
            codeBlocks.forEach(code => textToCopy += code.textContent + '\n');
        }
    }
    
    // 使用现代剪贴板 API
    navigator.clipboard.writeText(textToCopy.trim())
        .then(() => showToast(' 内容已复制到剪贴板'))
        .catch(err => {
            console.error('无法复制内容:', err);
            showToast('复制失败，请重试');
        });
}

核心逻辑：

  • 通过 closest('.message') 找到最近的消息容器，确保能正确定位内容
  • 自动识别内容类型（普通文本 p 或代码块 code）
  • 使用 navigator.clipboard.writeText 实现跨平台复制
  • 成功 / 失败都有明确的视觉反馈（toast 提示）

3. 编辑功能实现

javascript 复制代码 
// 全局变量跟踪当前编辑状态
let currentEditingMessageId = null;

// 编辑按钮点击事件
editButton.addEventListener('click', () => {
    const messageId = message.dataset.messageId;
    const messageText = message.querySelector('.message-content p').textContent;
    
    // 设置编辑状态并填充内容
    currentEditingMessageId = messageId;
    messageInput.value = messageText;
    messageInput.focus();
});

// 发送消息时处理编辑状态
function sendMessage(text) {
    if (!text) return;
    
    if (currentEditingMessageId) {
        // 找到原消息并标记为已编辑
        const originalMessage = document.querySelector(`.message[data-message-id="${currentEditingMessageId}"]`);
        const editIndicator = document.createElement('span');
        editIndicator.className = 'text-xs text-blue-300 ml-2';
        editIndicator.textContent = '(已编辑)';
        
        // 添加编辑标记并隐藏操作按钮
        const timestamp = originalMessage.querySelector('.message-timestamp');
        timestamp.parentNode.insertBefore(editIndicator, timestamp.nextSibling);
        originalMessage.querySelector('.absolute.top-2.right-2').style.display = 'none';
        
        // 清除编辑状态
        currentEditingMessageId = null;
    }
    
    // 正常发送消息逻辑...
}

核心逻辑：

  • 使用全局变量**currentEditingMessageId**跟踪编辑状态
  • 点击编辑时，将消息内容回填到输入框
  • 发送消息时，检查编辑状态并处理原消息：
    • 添加 "(已编辑)" 标记
    • 隐藏编辑 / 删除按钮（防止重复编辑）
  • 编辑完成后自动清除状态

4. 删除功能实现

javascript 复制代码 
deleteButton.addEventListener('click', () => {
    if (confirm('确定要删除这条消息吗？')) {
        message.remove();
    }
});

核心逻辑：

  • 使用浏览器内置的 confirm 对话框进行二次确认
  • 确认后直接从 DOM 中移除消息元素
  • 简单高效，防止误操作

5. 重新生成功能实现

javascript 复制代码 
regenerateButton.addEventListener('click', () => {
    const originalText = message.querySelector('.message-content code').textContent.trim();
    const contentDiv = message.querySelector('.message-content');
    
    // 显示加载状态
    contentDiv.innerHTML = `
        <div class="flex items-center">
            <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500 mr-2"></div>
            <span class="text-sm text-gray-500">正在重新生成...</span>
        </div>
    `;
    
    // 模拟API请求延迟
    setTimeout(() => {
        const newResponse = generateAIResponse(originalText);
        contentDiv.innerHTML = `
            <pre class="text-sm bg-[var(--bg-primary)] p-3 rounded-md text-[var(--text-primary)]"><code>${newResponse}</code></pre>
            <span class="text-xs text-[var(--text-secondary)] mt-2 block message-timestamp">${getCurrentTime()}</span>
        `;
        
        // 更新时间戳
        const timestamp = message.querySelector('.message-timestamp');
        timestamp.textContent = getCurrentTime();
        
        // 自动播放语音（如果启用）
        if (speechSettings.autoPlay && !synth.speaking) {
            speak(newResponse);
        }
    }, 1000);
});

核心逻辑：

  • 点击后立即显示加载动画（旋转的蓝色圆点）
  • 使用 setTimeout 模拟 API 请求延迟（实际项目中替换为真实 API 调用）
  • 生成新内容后：
    • 更新消息内容
    • 更新时间戳
    • 自动播放语音（如果启用）
  • 整个过程保持界面响应，用户可随时取消

6. 提示信息显示

javascript 复制代码 
function showToast(message) {
    const toast = document.createElement('div');
    toast.className = 'fixed top-4 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg z-50 transition-all duration-300 translate-y-[-20px] opacity-0';
    toast.innerHTML = `<i class="fa fa-check-circle"></i><span>${message}</span>`;
    
    document.body.appendChild(toast);
    setTimeout(() => {
        toast.classList.remove('translate-y-[-20px]', 'opacity-0');
        toast.classList.add('translate-y-0', 'opacity-100');
    }, 10);
    
    setTimeout(() => {
        toast.classList.add('translate-y-[-20px]', 'opacity-0');
        setTimeout(() => {
            document.body.removeChild(toast);
        }, 300);
    }, 3000);
}

核心逻辑：

  • 创建顶部居中的提示框
  • 使用 Tailwind CSS 类控制动画：
    • 淡入：从 opacity-0 到 opacity-100
    • 上移：从 translate-y-[-20px] 到 translate-y-0
  • 3 秒后自动淡出并移除

7. 全局状态管理

javascript 复制代码 
// 全局变量跟踪状态
let currentEditingMessageId = null;
let lastPlayedButton = null;
let lastPlayedText = '';

// 点击非消息区域时取消编辑状态
document.addEventListener('click', (e) => {
    if (!e.target.closest('.message') && !e.target.closest('#messageInput')) {
        currentEditingMessageId = null;
    }
});

核心逻辑：

  • 使用全局变量跟踪关键状态（编辑、语音播放等）
  • 点击其他区域时自动取消编辑状态
  • 确保系统状态与用户操作保持同步

四、功能验证

  1. 复制功能：点击用户 / AI 消息的 "复制" 按钮，检查剪贴板内容是否正确，提示框是否正常显示 / 消失。
  2. 编辑功能：编辑用户消息后发送，确认 "(已编辑)" 标记显示、操作按钮隐藏。
  3. 删除功能：删除用户消息时，确认二次确认弹窗，及消息节点是否从 DOM 移除。
  4. 重新生成功能：点击 AI 消息 "重新生成"，检查加载动画、新内容渲染是否正常。

五、总结

本次功能的实现采用了以下关键技术和设计模式：

  1. 状态管理模式：使用全局变量跟踪编辑状态
  2. 事件委托模式：为动态生成的元素绑定事件
  3. 异步处理：使用 Promise 和 setTimeout 处理剪贴板操作和 API 请求
  4. UI 状态机：通过修改 DOM 结构实现加载状态和编辑标记
  5. 响应式设计：使用 Tailwind 的响应式类名适配不同屏幕尺寸

这些功能通过精心设计的交互流程和视觉反馈，为用户提供了直观、高效的消息管理体验，同时保持了代码的可维护性和扩展性。

热门推荐
01YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】02KGG转MP3工具|非KGM文件|解密音频03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04【无人机】无人机通信模块，无人机图数传模块的介绍，数传，图传，图传数传一体电台，05【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！06DeepSeek各版本说明与优缺点分析07神经网络架构KAN确实具有一些独特的特点及底层原理和应用场景08VMware虚拟机安装Win7专业版保姆级教程（附镜像包）09组基轨迹建模 GBTM的介绍与实现（Stata 或 R）10柬埔寨语翻译通App，一款真正实现高棉语翻译、语音识别和中柬双语无障碍交流的应用程序。