文章目录[隐藏]

手把手教程：为WordPress网站添加智能在线客服系统及常用互联网小工具
手把手教程：为WordPress网站添加智能在线客服系统及常用互联网小工具（续）
- 三、前端聊天界面开发（续）
  - 3.3 JavaScript交互功能

手把手教程：为WordPress网站添加智能在线客服系统及常用互联网小工具

摘要

本文将详细介绍如何通过WordPress代码二次开发，为网站添加智能在线客服系统，并实现多种常用互联网小工具功能。我们将从基础环境搭建开始，逐步实现一个完整的客服系统，包含前端界面、后台管理、数据库设计和常用工具集成。教程包含完整的代码示例和详细注释，适合有一定WordPress开发基础的读者。

一、环境准备与项目规划

1.1 开发环境要求

在开始开发之前，请确保您的环境满足以下要求：

WordPress 5.0及以上版本
PHP 7.2及以上版本
MySQL 5.6及以上版本
基本的HTML、CSS、JavaScript知识
对WordPress插件开发有基本了解

1.2 项目结构规划

我们将创建一个名为"Smart-Chat-System"的WordPress插件，主要包含以下模块：

客服系统主界面
聊天消息管理
用户会话管理
常用工具集成（如文件传输、快捷回复等）
后台管理界面

1.3 创建插件基础文件

首先，在WordPress的wp-content/plugins目录下创建我们的插件文件夹：

<?php
/**
 * Plugin Name: 智能在线客服系统
 * Plugin URI: https://yourwebsite.com/smart-chat-system
 * Description: 为WordPress网站添加智能在线客服系统，集成多种实用工具
 * Version: 1.0.0
 * Author: 您的名称
 * Author URI: https://yourwebsite.com
 * License: GPL v2 or later
 * Text Domain: smart-chat-system
 */

// 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}

// 定义插件常量
define('SCS_VERSION', '1.0.0');
define('SCS_PLUGIN_DIR', plugin_dir_path(__FILE__));
define('SCS_PLUGIN_URL', plugin_dir_url(__FILE__));

// 初始化插件
function scs_init() {
    // 检查WordPress版本
    if (version_compare(get_bloginfo('version'), '5.0', '<')) {
        wp_die(__('本插件需要WordPress 5.0或更高版本', 'smart-chat-system'));
    }
    
    // 加载文本域
    load_plugin_textdomain('smart-chat-system', false, dirname(plugin_basename(__FILE__)) . '/languages');
}
add_action('plugins_loaded', 'scs_init');
?>

二、数据库设计与创建

2.1 设计数据库表结构

我们需要创建三张主要数据表：

scs_conversations - 存储会话信息
scs_messages - 存储聊天消息
scs_quick_replies - 存储快捷回复模板

2.2 创建数据库表

在插件激活时创建所需的数据库表：

<?php
/**
 * 创建插件所需的数据库表
 */
function scs_create_database_tables() {
    global $wpdb;
    
    $charset_collate = $wpdb->get_charset_collate();
    $table_prefix = $wpdb->prefix . 'scs_';
    
    // 会话表
    $conversations_table = $table_prefix . 'conversations';
    $conversations_sql = "CREATE TABLE IF NOT EXISTS $conversations_table (
        id BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT,
        user_id BIGINT(20) UNSIGNED DEFAULT NULL,
        visitor_id VARCHAR(100) NOT NULL,
        visitor_name VARCHAR(100) DEFAULT '访客',
        visitor_email VARCHAR(100) DEFAULT NULL,
        visitor_ip VARCHAR(45) DEFAULT NULL,
        status ENUM('active', 'closed', 'pending') DEFAULT 'active',
        assigned_to BIGINT(20) UNSIGNED DEFAULT NULL,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
        updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
        PRIMARY KEY (id),
        KEY visitor_id (visitor_id),
        KEY status (status),
        KEY assigned_to (assigned_to)
    ) $charset_collate;";
    
    // 消息表
    $messages_table = $table_prefix . 'messages';
    $messages_sql = "CREATE TABLE IF NOT EXISTS $messages_table (
        id BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT,
        conversation_id BIGINT(20) UNSIGNED NOT NULL,
        sender_type ENUM('visitor', 'agent', 'system') NOT NULL,
        sender_id BIGINT(20) UNSIGNED DEFAULT NULL,
        message_type ENUM('text', 'image', 'file', 'quick_reply') DEFAULT 'text',
        content LONGTEXT NOT NULL,
        attachment_url VARCHAR(500) DEFAULT NULL,
        attachment_name VARCHAR(255) DEFAULT NULL,
        is_read TINYINT(1) DEFAULT 0,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
        PRIMARY KEY (id),
        KEY conversation_id (conversation_id),
        KEY sender_type (sender_type),
        KEY is_read (is_read),
        FOREIGN KEY (conversation_id) REFERENCES $conversations_table(id) ON DELETE CASCADE
    ) $charset_collate;";
    
    // 快捷回复表
    $quick_replies_table = $table_prefix . 'quick_replies';
    $quick_replies_sql = "CREATE TABLE IF NOT EXISTS $quick_replies_table (
        id BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT,
        title VARCHAR(200) NOT NULL,
        content TEXT NOT NULL,
        category VARCHAR(100) DEFAULT 'general',
        created_by BIGINT(20) UNSIGNED NOT NULL,
        use_count INT(11) DEFAULT 0,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
        updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
        PRIMARY KEY (id),
        KEY category (category),
        KEY created_by (created_by)
    ) $charset_collate;";
    
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    
    // 执行SQL语句
    dbDelta($conversations_sql);
    dbDelta($messages_sql);
    dbDelta($quick_replies_sql);
    
    // 添加默认的快捷回复
    scs_add_default_quick_replies();
}

/**
 * 添加默认的快捷回复
 */
function scs_add_default_quick_replies() {
    global $wpdb;
    
    $table_name = $wpdb->prefix . 'scs_quick_replies';
    $current_user_id = get_current_user_id();
    
    $default_replies = array(
        array(
            'title' => '欢迎语',
            'content' => '您好！欢迎咨询，请问有什么可以帮您？',
            'category' => 'greeting'
        ),
        array(
            'title' => '稍等回复',
            'content' => '请稍等，我马上为您查询相关信息。',
            'category' => 'general'
        ),
        array(
            'title' => '结束语',
            'content' => '感谢您的咨询，如果还有其他问题，请随时联系我们！',
            'category' => 'closing'
        )
    );
    
    foreach ($default_replies as $reply) {
        $wpdb->insert(
            $table_name,
            array_merge($reply, array('created_by' => $current_user_id)),
            array('%s', '%s', '%s', '%d')
        );
    }
}

// 注册激活钩子
register_activation_hook(__FILE__, 'scs_create_database_tables');
?>

三、前端聊天界面开发

3.1 创建聊天窗口HTML结构

创建前端聊天界面的HTML结构：

<!-- 文件路径: smart-chat-system/templates/chat-window.php -->
<div id="scs-chat-container" class="scs-chat-container">
    <!-- 聊天窗口头部 -->
    <div class="scs-chat-header">
        <div class="scs-header-left">
            <div class="scs-avatar">
                <img src="<?php echo SCS_PLUGIN_URL . 'assets/images/avatar.png'; ?>" alt="客服头像">
            </div>
            <div class="scs-header-info">
                <h3 class="scs-agent-name">在线客服</h3>
                <span class="scs-status-indicator online"></span>
                <span class="scs-status-text">在线</span>
            </div>
        </div>
        <div class="scs-header-right">
            <button class="scs-minimize-btn" title="最小化">
                <span class="dashicons dashicons-minus"></span>
            </button>
            <button class="scs-close-btn" title="关闭">
                <span class="dashicons dashicons-no-alt"></span>
            </button>
        </div>
    </div>
    
    <!-- 聊天消息区域 -->
    <div class="scs-chat-body" id="scs-chat-messages">
        <!-- 消息将通过JavaScript动态加载 -->
        <div class="scs-welcome-message">
            <p>您好！我是智能客服，请问有什么可以帮您？</p>
            <p>我们的工作时间是周一至周五 9:00-18:00</p>
        </div>
    </div>
    
    <!-- 聊天输入区域 -->
    <div class="scs-chat-footer">
        <!-- 工具栏 -->
        <div class="scs-toolbar">
            <button class="scs-tool-btn" data-tool="emoji" title="表情">
                <span class="dashicons dashicons-smiley"></span>
            </button>
            <button class="scs-tool-btn" data-tool="image" title="发送图片">
                <span class="dashicons dashicons-format-image"></span>
            </button>
            <button class="scs-tool-btn" data-tool="file" title="发送文件">
                <span class="dashicons dashicons-paperclip"></span>
            </button>
            <button class="scs-tool-btn" data-tool="quick-reply" title="快捷回复">
                <span class="dashicons dashicons-admin-comments"></span>
            </button>
        </div>
        
        <!-- 输入框 -->
        <div class="scs-input-container">
            <textarea 
                id="scs-message-input" 
                class="scs-message-input" 
                placeholder="请输入消息..." 
                rows="3"
            ></textarea>
            <button id="scs-send-btn" class="scs-send-btn" title="发送">
                <span class="dashicons dashicons-arrow-right-alt"></span>
            </button>
        </div>
        
        <!-- 快捷回复面板 -->
        <div class="scs-quick-replies-panel" id="scs-quick-replies-panel">
            <div class="scs-quick-replies-header">
                <h4>快捷回复</h4>
                <button class="scs-close-panel">×</button>
            </div>
            <div class="scs-quick-replies-content">
                <!-- 快捷回复内容将通过AJAX加载 -->
            </div>
        </div>
    </div>
</div>

<!-- 聊天触发按钮 -->
<button id="scs-chat-toggle" class="scs-chat-toggle">
    <span class="scs-toggle-icon dashicons dashicons-format-chat"></span>
    <span class="scs-toggle-text">在线咨询</span>
</button>

3.2 添加CSS样式

创建聊天界面的CSS样式：

/* 文件路径: smart-chat-system/assets/css/chat-style.css */

/* 聊天容器 */
.scs-chat-container {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 380px;
    height: 500px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* 最小化状态 */
.scs-chat-container.minimized {
    height: 60px;
}

/* 隐藏状态 */
.scs-chat-container.hidden {
    display: none;
}

/* 聊天头部 */
.scs-chat-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.scs-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.scs-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.scs-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scs-header-info h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
}

.scs-status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
}

.scs-status-indicator.online {
    background: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
}

.scs-status-text {
    font-size: 12px;
    opacity: 0.9;
}

.scs-header-right {
    display: flex;
    gap: 10px;
}

.scs-header-right button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background 0.2s;
}

.scs-header-right button:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* 聊天消息区域 */
.scs-chat-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #f8f9fa;
}

.scs-welcome-message {
    background: white;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #667eea;
}

.scs-welcome-message p {
    margin: 5px 0;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
}

/* 消息气泡 */
.scs-message {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.scs-message.visitor {
    align-items: flex-end;
}

.scs-message.agent {
    align-items: flex-start;
}

.scs-message-bubble {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 18px;
    position: relative;
    word-wrap: break-word;
    line-height: 1.4;
}

.scs-message.visitor .scs-message-bubble {
    background: #667eea;
    color: white;
    border-bottom-right-radius: 4px;
}

.scs-message.agent .scs-message-bubble {
    background: white;
    color: #333;
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.scs-message-time {
    font-size: 11px;
    color: #999;
    margin-top: 5px;
    padding: 0 5px;
}

/* 聊天底部 */
.scs-chat-footer {
    border-top: 1px solid #eee;
    background: white;
    flex-shrink: 0;
}

.scs-toolbar {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: 10px;
}

.scs-tool-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.2s;
}

.scs-tool-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.scs-input-container {
    padding: 15px;
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.scs-message-input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 12px 15px;
    font-size: 14px;
    resize: none;
    outline: none;
    transition: border 0.2s;
    font-family: inherit;
}

.scs-message-input:focus {
    border-color: #667eea;
}

.scs-send-btn {
    background: #667eea;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.scs-send-btn:hover {
    background: #5a6fd8;
}

/* 快捷回复面板 */
.scs-quick-replies-panel {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;

手把手教程：为WordPress网站添加智能在线客服系统及常用互联网小工具（续）

三、前端聊天界面开发（续）

3.3 JavaScript交互功能

创建聊天系统的核心JavaScript功能：

// 文件路径: smart-chat-system/assets/js/chat-system.js

(function($) {
    'use strict';
    
    // 智能在线客服系统主对象
    var SmartChatSystem = {
        // 初始化配置
        config: {
            ajaxUrl: scs_ajax.ajax_url,
            nonce: scs_ajax.nonce,
            visitorId: null,
            conversationId: null,
            pollInterval: 3000, // 轮询间隔3秒
            maxFileSize: 5 * 1024 * 1024, // 最大文件大小5MB
            allowedFileTypes: ['image/jpeg', 'image/png', 'image/gif', 'application/pdf', 'text/plain']
        },
        
        // 初始化函数
        init: function() {
            this.setupEventListeners();
            this.generateVisitorId();
            this.loadConversation();
            this.startMessagePolling();
            this.setupToolbar();
        },
        
        // 生成访客ID
        generateVisitorId: function() {
            var visitorId = localStorage.getItem('scs_visitor_id');
            if (!visitorId) {
                visitorId = 'visitor_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
                localStorage.setItem('scs_visitor_id', visitorId);
            }
            this.config.visitorId = visitorId;
        },
        
        // 设置事件监听器
        setupEventListeners: function() {
            var self = this;
            
            // 聊天窗口切换
            $('#scs-chat-toggle').on('click', function() {
                self.toggleChatWindow();
            });
            
            // 最小化/关闭按钮
            $('.scs-minimize-btn').on('click', function() {
                self.minimizeChat();
            });
            
            $('.scs-close-btn').on('click', function() {
                self.closeChat();
            });
            
            // 发送消息
            $('#scs-send-btn').on('click', function() {
                self.sendMessage();
            });
            
            // 回车发送消息（Ctrl+Enter换行）
            $('#scs-message-input').on('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey) {
                    e.preventDefault();
                    self.sendMessage();
                }
            });
            
            // 快捷回复面板
            $('.scs-tool-btn[data-tool="quick-reply"]').on('click', function() {
                self.toggleQuickReplies();
            });
            
            $('.scs-close-panel').on('click', function() {
                $('#scs-quick-replies-panel').hide();
            });
            
            // 文件上传
            $('.scs-tool-btn[data-tool="file"]').on('click', function() {
                $('#scs-file-upload').click();
            });
            
            // 监听文件选择
            $(document).on('change', '#scs-file-upload', function(e) {
                self.handleFileUpload(e.target.files[0]);
            });
        },
        
        // 切换聊天窗口显示/隐藏
        toggleChatWindow: function() {
            var $container = $('#scs-chat-container');
            if ($container.hasClass('hidden')) {
                $container.removeClass('hidden minimized');
                $('#scs-message-input').focus();
            } else {
                this.minimizeChat();
            }
        },
        
        // 最小化聊天窗口
        minimizeChat: function() {
            var $container = $('#scs-chat-container');
            if ($container.hasClass('minimized')) {
                $container.removeClass('minimized');
                $('#scs-message-input').focus();
            } else {
                $container.addClass('minimized');
            }
        },
        
        // 关闭聊天窗口
        closeChat: function() {
            $('#scs-chat-container').addClass('hidden');
        },
        
        // 加载或创建会话
        loadConversation: function() {
            var self = this;
            
            $.ajax({
                url: self.config.ajaxUrl,
                type: 'POST',
                data: {
                    action: 'scs_get_conversation',
                    visitor_id: self.config.visitorId,
                    nonce: self.config.nonce
                },
                success: function(response) {
                    if (response.success && response.data.conversation_id) {
                        self.config.conversationId = response.data.conversation_id;
                        self.loadMessages();
                        
                        // 如果有未读消息，显示通知
                        if (response.data.unread_count > 0) {
                            self.showNotification('您有' + response.data.unread_count + '条未读消息');
                        }
                    }
                }
            });
        },
        
        // 发送消息
        sendMessage: function() {
            var self = this;
            var $input = $('#scs-message-input');
            var message = $input.val().trim();
            
            if (!message) return;
            
            // 显示发送中的消息
            self.appendMessage(message, 'visitor', 'sending');
            
            // 清空输入框
            $input.val('');
            
            // 发送到服务器
            $.ajax({
                url: self.config.ajaxUrl,
                type: 'POST',
                data: {
                    action: 'scs_send_message',
                    conversation_id: self.config.conversationId,
                    visitor_id: self.config.visitorId,
                    message: message,
                    nonce: self.config.nonce
                },
                success: function(response) {
                    if (response.success) {
                        // 更新消息状态为已发送
                        self.updateMessageStatus(response.data.message_id);
                        self.config.conversationId = response.data.conversation_id;
                    } else {
                        // 发送失败，显示错误
                        self.showError('消息发送失败: ' + response.data);
                    }
                },
                error: function() {
                    self.showError('网络错误，请检查连接');
                }
            });
        },
        
        // 处理文件上传
        handleFileUpload: function(file) {
            var self = this;
            
            // 验证文件大小
            if (file.size > self.config.maxFileSize) {
                self.showError('文件大小不能超过5MB');
                return;
            }
            
            // 验证文件类型
            if (self.config.allowedFileTypes.indexOf(file.type) === -1) {
                self.showError('不支持的文件类型');
                return;
            }
            
            // 创建FormData对象
            var formData = new FormData();
            formData.append('action', 'scs_upload_file');
            formData.append('conversation_id', self.config.conversationId);
            formData.append('visitor_id', self.config.visitorId);
            formData.append('file', file);
            formData.append('nonce', self.config.nonce);
            
            // 显示上传进度
            self.appendMessage('正在上传文件: ' + file.name, 'visitor', 'uploading');
            
            // 发送文件
            $.ajax({
                url: self.config.ajaxUrl,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                xhr: function() {
                    var xhr = new XMLHttpRequest();
                    
                    // 上传进度事件
                    xhr.upload.addEventListener('progress', function(e) {
                        if (e.lengthComputable) {
                            var percent = Math.round((e.loaded / e.total) * 100);
                            self.updateUploadProgress(percent);
                        }
                    }, false);
                    
                    return xhr;
                },
                success: function(response) {
                    if (response.success) {
                        self.updateMessageStatus(response.data.message_id, 'file');
                        self.appendFileMessage(response.data, 'visitor');
                    } else {
                        self.showError('文件上传失败: ' + response.data);
                    }
                },
                error: function() {
                    self.showError('文件上传失败，请重试');
                }
            });
        },
        
        // 开始轮询新消息
        startMessagePolling: function() {
            var self = this;
            
            setInterval(function() {
                if (self.config.conversationId) {
                    self.checkNewMessages();
                }
            }, self.config.pollInterval);
        },
        
        // 检查新消息
        checkNewMessages: function() {
            var self = this;
            
            $.ajax({
                url: self.config.ajaxUrl,
                type: 'POST',
                data: {
                    action: 'scs_get_new_messages',
                    conversation_id: self.config.conversationId,
                    last_message_id: self.getLastMessageId(),
                    nonce: self.config.nonce
                },
                success: function(response) {
                    if (response.success && response.data.messages.length > 0) {
                        response.data.messages.forEach(function(message) {
                            self.appendMessageFromServer(message);
                        });
                        
                        // 如果有新消息且窗口最小化，显示通知
                        if ($('#scs-chat-container').hasClass('minimized')) {
                            self.showNotification('您有新消息');
                        }
                        
                        // 播放提示音
                        self.playNotificationSound();
                    }
                }
            });
        },
        
        // 加载历史消息
        loadMessages: function() {
            var self = this;
            
            $.ajax({
                url: self.config.ajaxUrl,
                type: 'POST',
                data: {
                    action: 'scs_get_messages',
                    conversation_id: self.config.conversationId,
                    nonce: self.config.nonce
                },
                success: function(response) {
                    if (response.success) {
                        var $container = $('#scs-chat-messages');
                        $container.empty();
                        
                        response.data.messages.forEach(function(message) {
                            self.appendMessageFromServer(message);
                        });
                        
                        // 滚动到底部
                        self.scrollToBottom();
                    }
                }
            });
        },
        
        // 从服务器获取的消息添加到界面
        appendMessageFromServer: function(message) {
            var senderClass = message.sender_type === 'visitor' ? 'visitor' : 'agent';
            var messageType = message.message_type || 'text';
            
            if (messageType === 'file') {
                this.appendFileMessage(message, senderClass);
            } else {
                this.appendMessage(message.content, senderClass, 'sent', message.created_at, message.id);
            }
        },
        
        // 添加文本消息
        appendMessage: function(content, sender, status, timestamp, messageId) {
            var $container = $('#scs-chat-messages');
            var messageClass = 'scs-message ' + sender;
            var time = timestamp || this.getCurrentTime();
            var messageHtml = '';
            
            if (status === 'sending') {
                messageHtml = `
                    <div class="${messageClass}" data-message-id="sending_${Date.now()}">
                        <div class="scs-message-bubble">
                            ${this.escapeHtml(content)}
                            <div class="scs-sending-indicator">
                                <span></span><span></span><span></span>
                            </div>
                        </div>
                        <div class="scs-message-time">发送中...</div>
                    </div>
                `;
            } else {
                messageHtml = `
                    <div class="${messageClass}" data-message-id="${messageId || ''}">
                        <div class="scs-message-bubble">
                            ${this.escapeHtml(content)}
                        </div>
                        <div class="scs-message-time">${time}</div>
                    </div>
                `;
            }
            
            $container.append(messageHtml);
            
            if (status !== 'sending') {
                this.scrollToBottom();
            }
        },
        
        // 添加文件消息
        appendFileMessage: function(fileData, sender) {
            var $container = $('#scs-chat-messages');
            var messageClass = 'scs-message ' + sender;
            var fileIcon = this.getFileIcon(fileData.file_type);
            var fileSize = this.formatFileSize(fileData.file_size);
            
            var messageHtml = `
                <div class="${messageClass}" data-message-id="${fileData.message_id || ''}">
                    <div class="scs-message-bubble scs-file-message">
                        <div class="scs-file-info">
                            <div class="scs-file-icon">${fileIcon}</div>
                            <div class="scs-file-details">
                                <div class="scs-file-name">${this.escapeHtml(fileData.file_name)}</div>
                                <div class="scs-file-size">${fileSize}</div>
                            </div>
                        </div>
                        <a href="${fileData.file_url}" class="scs-file-download" target="_blank" download>
                            下载
                        </a>
                    </div>
                    <div class="scs-message-time">${fileData.created_at || this.getCurrentTime()}</div>
                </div>
            `;
            
            $container.append(messageHtml);
            this.scrollToBottom();
        },
        
        // 更新消息状态
        updateMessageStatus: function(messageId, messageType) {
            var $message = $('[data-message-id^="sending_"]').first();
            if ($message.length) {
                $message.attr('data-message-id', messageId);
                $message.find('.scs-sending-indicator').remove();
                $message.find('.scs-message-time').text(this.getCurrentTime());
            }
        },
        
        // 更新上传进度
        updateUploadProgress: function(percent) {
            var $uploadingMessage = $('.scs-message .scs-message-bubble:contains("正在上传文件")').last();
            if ($uploadingMessage.length) {
                $uploadingMessage.append('<div class="scs-upload-progress">' + percent + '%</div>');
            }
        },
        
        // 获取最后一条消息的ID
        getLastMessageId: function() {
            var $messages = $('#scs-chat-messages .scs-message[data-message-id]');
            if ($messages.length) {
                var lastMessage = $messages.last();
                var messageId = lastMessage.data('message-id');
                return messageId && !messageId.startsWith('sending_') ? messageId : 0;
            }
            return 0;
        },
        
        // 设置工具栏功能
        setupToolbar: function() {
            var self = this;
            
            // 创建隐藏的文件上传输入
            if (!$('#scs-file-upload').length) {
                $('body').append('<input type="file" id="scs-file-upload" style="display: none;">');
            }
            
            // 表情选择器
            $('.scs-tool-btn[data-tool="emoji"]').on('click', function() {
                self.toggleEmojiPicker();
            });
            
            // 图片上传
            $('.scs-tool-btn[data-tool="image"]').on('click', function() {
                $('#scs-image-upload').click();
            });
            
            // 创建隐藏的图片上传输入
            if (!$('#scs-image-upload').length) {
                $('body').append('<input type="file" id="scs-image-upload" accept="image/*" style="display: none;">');
            }
            
            $(document).on('change', '#scs-image-upload', function(e) {
                self.handleImageUpload(e.target.files[0]);
            });
        },
        
        // 切换快捷回复面板
        toggleQuickReplies: function() {
            var $panel = $('#scs-quick-replies-panel');
            
            if ($panel.is(':visible')) {
                $panel.hide();
            } else {
                this.loadQuickReplies();
                $panel.show();
            }
        },
        
        // 加载快捷回复
        loadQuickReplies: function() {
            var self = this;
            var $content = $('#scs-quick-replies-panel .scs-quick-replies-content');
            
            $.ajax({
                url: self.config.ajaxUrl,
                type: 'POST',
                data: {
                    action: 'scs_get_quick_replies',
                    nonce: self.config.nonce
                },
                success: function(response) {
                    if (response.success) {
                        var html = '<div class="scs-quick-replies-categories">';
                        
                        // 按分类分组
                        var categories = {};
                        response.data.replies.forEach(function(reply) {
                            if (!categories[reply.category]) {
                                categories[reply.category] = [];
                            }
                            categories[reply.category].push(reply);
                        });
                        
                        // 生成分类标签页
                        var categoryNames = Object.keys(categories);
                        html += '<div class="scs-category-tabs">';
                        categoryNames.forEach(function(category, index) {
                            var activeClass = index === 0 ? 'active' : '';
                            html += `<button class="scs-category-tab ${activeClass}" data-category="${category}">${category}</button>`;
                        });
                        html += '</div>';
                        
                        // 生成回复内容
                        categoryNames.forEach(function(category, index) {
                            var displayStyle = index === 0 ? 'block' : 'none';
                            html += `<div class="scs-category-content" data-category="${category}" style="display: ${displayStyle}">`;
                            
                            categories[category].forEach(function(reply) {
                                html += `
                                    <div class="scs-quick-reply-item" data-content="${self.escapeHtml(reply.content)}">
                                        <div class="scs-reply-title">${self.escapeHtml(reply.title)}</div>
                                        <div class="scs-reply-content">${self.escapeHtml(reply.content)}</div>
                                    </div>
                                `;
                            });
                            
                            html += '</div>';
                        });
                        
                        html += '</div>';
                        $content.html(html);
                        
                        // 绑定分类标签页点击事件
                        $('.scs-category-tab').on('click', function() {
                            var category = $(this).data('category');
                            $('.scs-category-tab').removeClass('active');
                            $(this).addClass('active');
                            $('.scs-category-content').hide();
                            $(`.scs-category-content[data-category="${category}"]`).show();
                        });
                        
                        // 绑定快捷回复项点击事件
                        $('.scs-quick-reply-item').on('click', function() {

手把手教程，为网站添加智能在线客服系统

手把手教程：为WordPress网站添加智能在线客服系统及常用互联网小工具

摘要

一、环境准备与项目规划

1.1 开发环境要求

1.2 项目结构规划

1.3 创建插件基础文件

二、数据库设计与创建

2.1 设计数据库表结构

2.2 创建数据库表

三、前端聊天界面开发

3.1 创建聊天窗口HTML结构

3.2 添加CSS样式

手把手教程：为WordPress网站添加智能在线客服系统及常用互联网小工具（续）

三、前端聊天界面开发（续）

3.3 JavaScript交互功能

溯源库®作者

联系我们

微信扫一扫关注我们

手把手教程：为WordPress网站添加智能在线客服系统及常用互联网小工具

摘要

一、环境准备与项目规划

1.1 开发环境要求

1.2 项目结构规划

1.3 创建插件基础文件

二、数据库设计与创建

2.1 设计数据库表结构

2.2 创建数据库表

三、前端聊天界面开发

3.1 创建聊天窗口HTML结构

3.2 添加CSS样式

手把手教程：为WordPress网站添加智能在线客服系统及常用互联网小工具（续）

三、前端聊天界面开发（续）

3.3 JavaScript交互功能

相关文章：

溯源库®作者

为您推荐

柔性供应链教程 为独立游戏开发者提供实体典藏版生产与发货

个体创业者必读 利用柔性供应链实现预售订单的产能锁定与排程

详解按需融资 柔性供应链为初创者提供基于订单的动产质押服务

一人公司的供应链伙伴：漳州柔性供应链服务的低成本实战解决方案

联系我们

微信扫一扫关注我们

柔性供应链教程为独立游戏开发者提供实体典藏版生产与发货

个体创业者必读利用柔性供应链实现预售订单的产能锁定与排程

详解按需融资柔性供应链为初创者提供基于订单的动产质押服务