webrtcapichat.html 110 KB

Raw Blame History Permalink

<!--
  AIfeng/2024-12-19
  WebRTC API Chat - 数字人对话页面
  功能：支持文字、语音输入与数字人实时对话，包含完整的对话记录功能
  录像功能：通知后台，对数字人接下来的播报进行录像。

-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>WebRTC 数字人</title>
    <style>
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        display: flex;
        height: 100vh;
    }

    /* 侧边栏样式 */
    #sidebar {
        width: 300px;
        min-width: 300px;
        max-width: 300px;
        background-color: #f8f9fa;
        padding: 20px;
        box-shadow: 0 0 15px rgba(0,0,0,0.1);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 15px;
        transition: all 0.4s ease;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        border-radius: 0 10px 10px 0;
        z-index: 50;
    }

    /* 收缩状态的侧边栏 */
    #sidebar.collapsed {
        width: 0;
        min-width: 0;
        padding: 0;
        margin-left: 0;
        opacity: 0;
        transform: translateX(-100%);
    }

    /* 收缩状态下隐藏内容 */
    #sidebar.collapsed > div {
        display: none;
    }

    /* 切换按钮样式 */
    #sidebar-toggle {
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 48px;
        height: 48px;
        background-color: #4285f4;
        color: white;
        border: none;
        border-radius: 50%;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1002 !important;
        font-size: 20px;
        box-shadow: 0 3px 8px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
        opacity: 1 !important;
        visibility: visible !important;
    }


    /* 主内容区域样式 */
    #main-content {
        margin-left: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #f0f0f0;
        overflow: visible;
        transition: all 0.4s ease;
        position: relative;
        padding: 10px;
        box-sizing: border-box;
        min-height: 100vh;
        width: calc(100vw - 300px);
    }

    /* 侧边栏收缩时主内容区域样式 */
    #sidebar.collapsed ~ #main-content {
        margin-left: 0;
        width: 100vw;
    }


    /* 按钮样式 */
    button {
        padding: 8px 16px;
        margin: 5px 0;
        cursor: pointer;
        border: none;
        border-radius: 4px;
        background-color: #4285f4;
        color: white;
        font-weight: bold;
    }

    button:hover {
        background-color: #3367d6;
    }

    button:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
    }

    /* 表单样式 */
    .form-group {
        margin-bottom: 15px;
        width: 100%;
    }

    .form-control {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
    }

    /* 媒体区域样式 */
    #media {
        width: 100%;
        max-width: 1080px;
        height: 100%;
        max-height: 90vh; /* 限制最大高度为视口高度的90% */
        position: relative;
        overflow: hidden;
        background-color: #000;
        margin: 0 auto; /* 居中显示 */
        box-sizing: border-box; /* 确保padding不会增加宽度 */
        aspect-ratio: 9/16; /* 设置宽高比为9:16（竖屏） */
        display: block !important; /* 确保始终显示 */
        z-index: 20; /* 提高z-index确保可见 */
    }

    #media h2 {
        position: absolute;
        top: 10px;
        left: 10px;
        color: white;
        margin: 0;
        z-index: 10;
        background-color: rgba(0,0,0,0.5);
        padding: 5px 10px;
        border-radius: 4px;
    }

    video {
        width: 100%;
        height: 100%;
        object-fit: contain; /* 保持视频比例 */
        position: absolute;
        top: 0;
        left: 0;
        max-width: 100%; /* 确保不超出容器 */
        max-height: 100%; /* 确保不超出容器 */
    }

    /* 确保侧边栏收缩时视频元素本身也可见 */
    #sidebar.collapsed ~ #main-content #video,
    #sidebar.collapsed + #main-content #video {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* 侧边栏收缩时媒体区域全屏显示 */
    #sidebar.collapsed ~ #main-content #media {
        width: 100vw;
        height: 100vh;
        max-width: none;
        max-height: none;
        aspect-ratio: unset;
        margin: 0;
        padding: 0;
        border-radius: 0;
    }

    /* 侧边栏收缩时主内容区域调整 */
    #sidebar.collapsed ~ #main-content {
       padding: 0;
       background-color: #000;
    }


    .option {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }

    .section-title {
        font-weight: bold;
        margin-bottom: 12px;
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 8px;
        color: #4285f4;
        font-size: 16px;
        letter-spacing: 0.5px;
    }

    /* 美化表单控件 */
    .form-control:focus {
        outline: none;
        border-color: #4285f4;
        box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
    }

    /* 侧边栏内部元素样式优化 */
    #sidebar > div {
        background-color: white;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    /* 聊天消息样式 */
    #chatOverlay {
        font-family: 'Microsoft YaHei', Arial, sans-serif;
    }

    #chatOverlay .message {
        display: flex;
        margin-bottom: 12px;
        max-width: 100%;
        animation: fadeInUp 0.3s ease-out;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #chatOverlay .message.right {
        justify-content: flex-end;
    }

    #chatOverlay .message.left {
        justify-content: flex-start;
    }

    #chatOverlay .avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        margin: 0 6px;
        flex-shrink: 0;
        border: 1px solid rgba(255,255,255,0.2);
        background-color: rgba(255,255,255,0.5);
    }

    #chatOverlay .text-container {
        background-color: rgba(255,255,255,0.5);
        border-radius: 12px;
        padding: 8px 12px;
        max-width: 75%;
        color: #333;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        position: relative;
    }

    #chatOverlay .message.right .text-container {
        background-color: rgba(66,133,244,0.5);
        color: white;
    }

    /* 数字人回复样式 - 根据模式区分 */
    #chatOverlay .message.left .text-container {
        background-color: rgba(248,249,250,0.5);
        border-left: 3px solid #4285f4;
    }

    /* Echo模式 - 回音重复 */
    #chatOverlay .message.left.mode-echo .text-container {
        background-color: rgba(255,235,59,0.5);
        border-left: 3px solid #FFC107;
        color: #333;
    }

    /* Chat模式 - 大模型回复 */
    #chatOverlay .message.left.mode-chat .text-container {
        background-color: rgba(76,175,80,0.5);
        border-left: 3px solid #4CAF50;
        color: white;
    }

    /* Audio模式 - 语音识别回复 */
    #chatOverlay .message.left.mode-audio .text-container {
        background-color: rgba(156,39,176,0.5);
        border-left: 3px solid #9C27B0;
        color: white;
    }

    /* Plaintext模式 - 纯文本 */
    #chatOverlay .message.left.mode-plaintext .text-container {
        background-color: rgba(96,125,139,0.5);
        border-left: 3px solid #607D8B;
        color: white;
    }

    #chatOverlay .source-tag {
        font-size: 8px;
        color: #666;
        background-color: rgba(66,133,244,0.1);
        padding: 1px 4px;
        border-radius: 6px;
        margin-bottom: 3px;
        display: inline-block;
        font-weight: 500;
        letter-spacing: 0.2px;
    }

    #chatOverlay .message.right .source-tag {
        background-color: rgba(255,255,255,0.2);
        color: rgba(255,255,255,0.9);
    }

    /* 不同模式的source-tag样式 */
    #chatOverlay .message.left.mode-echo .source-tag {
        background-color: rgba(255,193,7,0.2);
        color: #E65100;
    }

    #chatOverlay .message.left.mode-chat .source-tag {
        background-color: rgba(76,175,80,0.2);
        color: #1B5E20;
    }

    #chatOverlay .message.left.mode-audio .source-tag {
        background-color: rgba(156,39,176,0.2);
        color: #4A148C;
    }

    #chatOverlay .message.left.mode-plaintext .source-tag {
        background-color: rgba(96,125,139,0.2);
        color: #263238;
    }

    #chatOverlay .text {
        line-height: 1.3;
        word-wrap: break-word;
        margin-bottom: 3px;
        font-size: 13px;
    }

    #chatOverlay .time {
        font-size: 9px;
        color: #999;
        text-align: right;
        margin-top: 3px;
        opacity: 0.7;
    }

    #chatOverlay .message.right .time {
        color: rgba(255,255,255,0.7);
    }

    /* 简化的聊天框头部 - 图标化 */
     #chatOverlay .chat-header {
         background-color: rgba(0,0,0,0.4);
         color: rgba(255,255,255,0.9);
         padding: 3px 8px;
         border-radius: 0 0 8px 8px;
         font-size: 10px;
         font-weight: normal;
         text-align: center;
         margin: 0 -8px -8px -8px;
         border-top: 1px solid rgba(255,255,255,0.15);
         backdrop-filter: blur(8px);
         position: relative;
         flex-shrink: 0;
     }

    /* 清空按钮 */
    #chatOverlay .clear-chat {
        position: absolute;
        top: 0px;
        right: 15px;
        background: none;
        border: none;
        color: rgba(255,255,255,0.6);
        cursor: pointer;
        font-size: 12px;
        padding: 1px;
        border-radius: 2px;
        transition: all 0.2s;
    }

    #chatOverlay .clear-chat:hover {
        background-color: rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.9);
    }

     /* 响应式适配 */
    @media (max-width: 2560px) {
        #chatOverlay {
            width: min(800px, 40vw) !important;
            height: 270px !important;
        }
    }
     /* 响应式适配 */
    @media (max-width: 2160px) {
        #chatOverlay {
            width: min(800px, 40vw) !important;
            height: 270px !important;
        }
    }

    /* 响应式适配 */
    @media (max-width: 1200px) {
        #chatOverlay {
            width: min(600px, 40vw) !important;
            height: 180px !important;
        }
    }

    @media (max-width: 768px) {
        #chatOverlay {
            width: min(300px, 40vw) !important;
            height: 160px !important;
            bottom: 10px !important;
            right: 10px !important;
        }
    }

    @media (max-width: 480px) {
        #chatOverlay {
            width: min(200px, 45vw) !important;
            height: 140px !important;
        }
    }

    /* ASR 语音识别相关样式 */
    .mode-asr {
        background-color: rgba(233, 30, 99, 0.5) !important;
        border-left: 3px solid #E91E63 !important;
        color: white !important;
    }

    .mode-asr .source-tag {
        background-color: rgba(233, 30, 99, 0.2) !important;
        color: #880E4F !important;
    }

    .mode-system {
        background-color: rgba(158, 158, 158, 0.5) !important;
        border-left: 3px solid #9E9E9E !important;
        color: white !important;
    }

    .mode-system .source-tag {
        background-color: rgba(158, 158, 158, 0.2) !important;
        color: #424242 !important;
    }

    /* 麦克风控制按钮样式 */
    .mic-controls {
        display: flex;
        gap: 8px;
        margin-bottom: 10px;
        align-items: center;
    }

    .mic-status {
        font-size: 12px;
        color: #666;
        margin-bottom: 8px;
    }

    #audio-level-indicator {
        width: 100%;
        height: 6px;
        background-color: #e0e0e0;
        border-radius: 3px;
        overflow: hidden;
        margin-top: 4px;
    }

    #audio-level-bar {
        height: 100%;
        background-color: #4CAF50;
        width: 0%;
        transition: width 0.1s ease;
        border-radius: 3px;
    }


    .text-success {
        color: #28a745 !important;
    }

    .text-warning {
        color: #ffc107 !important;
    }

    .text-danger {
        color: #dc3545 !important;
    }

    /* 按钮样式优化 */
    .btn {
        padding: 6px 12px;
        margin: 2px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        transition: all 0.3s ease;
    }

    .btn-primary {
        background-color: #007bff;
        color: white;
    }

    .btn-primary:hover {
        background-color: #0056b3;
    }

    .btn-success {
        background-color: #28a745;
        color: white;
    }

    .btn-success:hover {
        background-color: #1e7e34;
    }

    .btn-danger {
        background-color: #dc3545;
        color: white;
    }

    .btn-danger:hover {
        background-color: #c82333;
    }

    .btn-secondary {
        background-color: #6c757d;
        color: white;
    }

    .btn-secondary:hover {
        background-color: #545b62;
    }

    .btn-default {
        background-color: #f8f9fa;
        color: #212529;
        border: 1px solid #dee2e6;
    }

    .btn-default:hover {
        background-color: #e2e6ea;
    }

    .btn-info {
        background-color: #17a2b8;
        color: white;
    }

    .btn-info:hover {
        background-color: #138496;
    }

    .btn:disabled {
        background-color: #6c757d;
        color: #fff;
        cursor: not-allowed;
        opacity: 0.65;
    }
    </style>
</head>
<body>

<!-- 侧边栏切换按钮 (Moved to be a direct child of body) -->
<button id="sidebar-toggle">≪</button>

<!-- 侧边栏 -->
<div id="sidebar">
    <div>
        <div class="section-title">连接控制</div>
        <div class="option">
            <input id="use-stun" type="checkbox"/>
            <label for="use-stun">使用 STUN 服务器</label>
        </div>
        <button id="start" onclick="start()">开始连接</button>
        <button id="stop" style="display: none" onclick="stop()">停止连接</button>
    </div>

    <div>
        <div class="section-title">录像控制</div>
        <button class="btn btn-primary" id="btn_start_record">开始录制</button>
        <button class="btn btn-primary" id="btn_stop_record" disabled>停止录制</button>
    </div>

    <div>
        <div class="section-title">文本输入</div>
        <input type="hidden" id="sessionid" value="0">
        <div class="form-group">
             <label for="current-sessionid">当前会话ID</label>
             <div class="input-group">
                 <input type="text" class="form-control" id="current-sessionid" readonly placeholder="未连接">
                 <div class="input-group-append">
                     <button class="btn btn-outline-secondary" type="button" id="clear-session-btn" title="清除会话ID，重新连接">重置</button>
                 </div>
             </div>
             <!-- 连接状态显示 -->
             <div class="mt-2">
                 <div class="alert alert-info" role="alert" id="connection-status-alert" style="display: none; margin-bottom: 10px; padding: 8px;">
                     <small><strong>连接状态：</strong><span id="connection-status-text">准备连接</span></small>
                 </div>
             </div>
         </div>
        <form class="form-inline" id="echo-form">
            <div class="form-group">
                <label for="message-type">消息类型</label>
                <select class="form-control" id="message-type">
                    <option value="chat">智能对话</option>
                    <option value="echo">回音模式</option>
                </select>
            </div>
            <div class="form-group">
                <label for="message">输入文本</label>
                <textarea rows="3" class="form-control" id="message">test</textarea>
            </div>
            <button type="submit" class="btn btn-default">发送</button>
        </form>
    </div>

    <div>
        <div class="section-title">对话框配置</div>
        <div class="option">
            <input id="show-chat-overlay" type="checkbox" checked/>
            <label for="show-chat-overlay">显示对话框</label>
        </div>
        <div class="form-group">
            <label for="chat-overlay-opacity">对话框透明度</label>
            <input type="range" class="form-control" id="chat-overlay-opacity" min="10" max="90" value="50" step="10">
            <small class="form-text text-muted">当前: <span id="opacity-value">50</span>%</small>
        </div>
        <div class="form-group">
            <label for="message-opacity">消息框透明度</label>
            <input type="range" class="form-control" id="message-opacity" min="10" max="90" value="50" step="10">
            <small class="form-text text-muted">当前: <span id="message-opacity-value">50</span>%</small>
        </div>
        <button id="reset-chat-config" class="btn btn-secondary">重置配置</button>
    </div>

    <div>
        <div class="section-title">本地存储设置</div>
        <div class="option">
            <input id="enable-storage" type="checkbox" checked/>
            <label for="enable-storage">启用本地聊天记录</label>
        </div>
        <button id="load-history" class="btn btn-secondary">加载历史记录</button>
        <button id="clear-storage" class="btn btn-danger">清理本地记录</button>
        <button id="view-history" class="btn btn-info">查看历史记录</button>
    </div>


    <div>
        <div class="section-title">语音识别 (ASR)</div>
        <div class="option">
            <input id="enable-asr" type="checkbox" checked/>
            <label for="enable-asr">启用语音识别</label>
        </div>

        <!-- ASR服务类型选择 -->
        <div class="form-group">
            <label for="asr-service-type">ASR服务类型</label>
            <select class="form-control" id="asr-service-type">
                <option value="funasr">FunASR (默认)</option>
                <option value="doubao">豆包ASR</option>
            </select>
        </div>

        <!-- 音频文件上传区域 -->
        <div class="form-group">
            <label for="audio-file-input">音频文件识别</label>
            <input type="file" class="form-control" id="audio-file-input" accept=".mp3,.wav,.m4a,.flac,.aac" multiple>
            <small class="form-text text-muted">支持 MP3, WAV, M4A, FLAC, AAC 格式</small>
        </div>
        <button id="upload-audio-btn" class="btn btn-primary" disabled>上传并识别</button>

        <!-- 麦克风录音区域 -->
        <div class="form-group" style="margin-top: 15px;">
            <label>实时语音识别</label>

        </div>


    </div>

    <div>
        <div class="section-title">聊天服务器配置</div>
        <div class="form-group">
            <label for="chat-ws-host">聊天服务器主机</label>
            <input type="text" class="form-control" id="chat-ws-host" placeholder="默认: localhost">
        </div>
        <div class="form-group">
            <label for="chat-ws-port">聊天服务器端口</label>
            <input type="text" class="form-control" id="chat-ws-port" placeholder="默认: 8010">
        </div>
        <button id="save-chat-ws-config" class="btn btn-default">保存聊天配置</button>
        <button id="reset-chat-ws-config" class="btn btn-default">重置聊天配置</button>
    </div>
     <div>
        <div class="section-title">控制服务器配置</div>
        <div class="option">
            <input id="enable-control-ws" type="checkbox" checked/>
            <label for="enable-control-ws">启用控制服务器连接</label>
        </div>
        <div class="form-group">
            <label for="control-ws-host">控制服务器主机</label>
            <input type="text" class="form-control" id="control-ws-host" placeholder="默认: 127.0.0.1">
        </div>
        <div class="form-group">
            <label for="control-ws-port">控制服务器端口</label>
            <input type="text" class="form-control" id="control-ws-port" placeholder="默认: 10002">
        </div>
        <button id="save-control-ws-config" class="btn btn-default">保存控制配置</button>
        <button id="reset-control-ws-config" class="btn btn-default">重置控制配置</button>
        <button id="connect-control-ws" class="btn btn-default">连接控制服务器</button>
        <button id="disconnect-control-ws" class="btn btn-default" disabled>断开控制服务器</button>
    </div>
</div>

<!-- 主内容区域 -->
<div id="main-content">
    <input type="hidden" id="username" value="">
    <div id="media">
        <h2>艺云展陈</h2>
        <audio id="audio" autoplay="true"></audio>
        <video id="video" autoplay="true" playsinline="true"></video>
    </div>
    <!-- 聊天消息显示区域 -->
    <div id="chatOverlay" style="position: absolute; bottom: 15px; right: 15px; width: min(320px, 30vw); height: 200px; overflow: hidden; background-color: rgba(0,0,0,0.5); border-radius: 12px; padding: 8px; color: white; z-index: 1005; backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column;">
        <div id="chatMessages" style="overflow: hidden; flex: 1; margin-bottom: 3px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; cursor: pointer;">
            <!-- 消息将在这里动态添加 -->
        </div>
        <div class="chat-header">
            💬 对话
            <button class="clear-chat" id="toggle-chat-btn" title="隐藏对话框">−</button>
        </div>
    </div>
</div>

<script src="client.js?random=12323"></script>
<script src="js/server-recording.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.1/dist/sockjs.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8">

        $(document).ready(function() {
            // Function to update toggle button icon based on sidebar state
            function updateToggleButtonState() {
                var sidebarIsCollapsed = $('#sidebar').hasClass('collapsed');
                var toggleButton = $('#sidebar-toggle');
                if (sidebarIsCollapsed) {
                    toggleButton.html('≫');
                } else {
                    toggleButton.html('≪');
                }
            }

            // Initial state setup for the toggle button
            updateToggleButtonState();

            // Load saved WebSocket configuration or set defaults
            function loadWsConfig() {
                // 控制服务器配置
                var savedControlHost = localStorage.getItem('controlWsHost');
                var savedControlPort = localStorage.getItem('controlWsPort');
                var enableControlWs = localStorage.getItem('enableControlWs');

                if (savedControlHost) {
                    $('#control-ws-host').val(savedControlHost);
                } else {
                    $('#control-ws-host').val('127.0.0.1'); // Default host
                }

                if (savedControlPort) {
                    $('#control-ws-port').val(savedControlPort);
                } else {
                    $('#control-ws-port').val('10002'); // Default port
                }

                // 设置控制服务器开关状态
                if (enableControlWs !== null) {
                    $('#enable-control-ws').prop('checked', enableControlWs === 'true');
                }

                // 聊天服务器配置
                var savedChatHost = localStorage.getItem('chatWsHost');
                var savedChatPort = localStorage.getItem('chatWsPort');

                if (savedChatHost) {
                    $('#chat-ws-host').val(savedChatHost);
                } else {
                    $('#chat-ws-host').val('localhost'); // Default host
                }

                if (savedChatPort) {
                    $('#chat-ws-port').val(savedChatPort);
                } else {
                    $('#chat-ws-port').val('8010'); // Default port
                }

                // 初始化控制服务器连接按钮状态
                $('#connect-control-ws').prop('disabled', false);
                $('#disconnect-control-ws').prop('disabled', true);

                // ASR服务类型配置
                var savedAsrServiceType = localStorage.getItem('asrServiceType');
                if (savedAsrServiceType) {
                    $('#asr-service-type').val(savedAsrServiceType);
                } else {
                    $('#asr-service-type').val('funasr'); // 默认使用FunASR
                }
            }

            loadWsConfig(); // Load config on document ready

            // 初始化聊天滚轮支持
            initChatWheelSupport();


            // 侧边栏切换功能
            $('#sidebar-toggle').click(function() {
                $('#sidebar').toggleClass('collapsed');
                updateToggleButtonState();
            });

            // 聊天对话框切换功能
            $('#toggle-chat-btn').click(function() {
                toggleChatOverlay();
            });

            $('#btn_start_record').click(function() {
                console.log('Starting recording...');
                fetch('/record', {
                    body: JSON.stringify({
                            type: 'start_record',
                            sessionid: parseInt(document.getElementById('sessionid').value),
                        }),
                        headers: {
                            'Content-Type': 'application/json'
                        },
                    method: 'POST'
                }).then(function(response) {
                    if (response.ok) {
                        console.log('Recording started.');
                        $('#btn_start_record').prop('disabled', true);
                        $('#btn_stop_record').prop('disabled', false);
                    } else {
                        console.error('Failed to start recording.');
                    }
                }).catch(function(error) {
                    console.error('Error:', error);
                });
            });

            $('#btn_stop_record').click(function() {
                console.log('Stopping recording...');
                fetch('/record', {
                    body: JSON.stringify({
                            type: 'end_record',
                            sessionid: parseInt(document.getElementById('sessionid').value),
                        }),
                        headers: {
                            'Content-Type': 'application/json'
                        },
                    method: 'POST'
                }).then(function(response) {
                    if (response.ok) {
                        console.log('Recording stopped.');
                        $('#btn_start_record').prop('disabled', false);
                        $('#btn_stop_record').prop('disabled', true);
                    } else {
                        console.error('Failed to stop recording.');
                    }
                }).catch(function(error) {
                    console.error('Error:', error);
                });
            });

      // ========== 服务端录音功能 ==========
      let serverRecordingClient = null;
      let isServerRecording = false;

      // 保留ASR WebSocket用于兼容性
      let asrWebSocket = null;

      // 音量可视化相关变量（服务端状态显示）
      let lastDataTransferTime = 0;
      let transferIndicatorTimer = null;

      // 服务端录音功能初始化
      function initServerRecordingFunctionality() {
          console.log('初始化服务端录音功能...');

          // 加载配置
          loadServerRecordingConfig();

          // 绑定事件监听器
          bindServerRecordingEventListeners();

          // 初始化状态显示器
          initStatusDisplay();
      }

      // 初始化状态显示器
      function initStatusDisplay() {
          // 初始化服务端录音状态显示
          updateServerRecordingStatus('未连接');
      }

      // 加载服务端录音配置
      function loadServerRecordingConfig() {
          const savedHost = localStorage.getItem('serverRecordingHost');
          const savedPort = localStorage.getItem('serverRecordingPort');
          const enableServerRecording = localStorage.getItem('enableServerRecording');

          if (savedHost) {
              $('#asr-server-host').val(savedHost);
          } else {
              $('#asr-server-host').val('localhost');
          }

          if (savedPort) {
              $('#asr-server-port').val(savedPort);
          } else {
              $('#asr-server-port').val('10197');
          }

          if (enableServerRecording !== null) {
              $('#enable-asr').prop('checked', enableServerRecording === 'true');
          }
      }

      // 绑定服务端录音事件监听器
      function bindServerRecordingEventListeners() {


          // 服务端录音开关
          $('#enable-asr').on('change', function() {
              const enabled = $(this).prop('checked');
              localStorage.setItem('enableServerRecording', enabled.toString());
              if (!enabled && serverRecordingClient) {
                  disconnectServerRecording();
              }
          });

          // ASR服务类型选择变化事件
          $('#asr-service-type').on('change', function() {
              const selectedType = $(this).val();
              localStorage.setItem('asrServiceType', selectedType);
              console.log('ASR服务类型已切换为:', selectedType);
          });

      }

      // 开始服务端录音
      /*
      function startServerRecording() {
          try {
              console.log('开始服务端录音...');

              // 检查sessionId
              const sessionId = document.getElementById('sessionid').value;
              if (!sessionId || sessionId === '0') {
                  throw new Error('请先建立WebRTC连接获取有效的SessionID');
              }

              if (isServerRecording) {
                  console.log('服务端录音已在进行中');
                  return;
              }

              const host = $('#asr-server-host').val() || 'localhost';
              const port = $('#asr-server-port').val() || '10197';
              const wsUrl = `ws://${host}:${port}/ws/server-recording`;

              console.log('连接到服务端录音服务器:', wsUrl);
              updateServerRecordingStatus('连接中...');

              // 创建服务端录音客户端
               if (typeof ServerRecordingClient !== 'undefined') {
                   serverRecordingClient = new ServerRecordingClient({
                       wsUrl: wsUrl,
                       sessionId: sessionId
                   });

                   // 绑定事件回调
                   serverRecordingClient.onConnected = () => {
                       console.log('服务端录音连接成功');
                       updateServerRecordingStatus('已连接');
                   };

                   serverRecordingClient.onDisconnected = () => {
                       console.log('服务端录音连接断开');
                       updateServerRecordingStatus('未连接');
                       isServerRecording = false;
                   };

                   serverRecordingClient.onRecordingStarted = () => {
                       console.log('服务端录音已开始');
                       updateServerRecordingStatus('录音中');
                       isServerRecording = true;
                   };

                   serverRecordingClient.onRecordingStopped = () => {
                       console.log('服务端录音已停止');
                       updateServerRecordingStatus('已连接');
                       isServerRecording = false;
                   };

                   serverRecordingClient.onPartialResult = (result) => {
                       console.log('部分识别结果:', result);
                       handleServerRecordingResult(result, false);
                   };

                   serverRecordingClient.onFinalResult = (result) => {
                       console.log('最终识别结果:', result);
                       handleServerRecordingResult(result, true);
                   };

                   serverRecordingClient.onError = (error) => {
                       console.error('服务端录音错误:', error);
                       handleServerRecordingError(error);
                   };

                  // 连接并开始录音
                  serverRecordingClient.connect().then(() => {
                      const config = {
                          enable_continuous: $('#enable-continuous-recording').is(':checked')
                      };
                      return serverRecordingClient.startRestartRecording(config);
                  }).catch(error => {
                      console.error('启动服务端录音失败:', error);
                      updateServerRecordingStatus('启动失败');
                      alert('启动录音失败: ' + error.message);
                  });
              } else {
                  console.error('ServerRecordingClient未定义');
                  updateServerRecordingStatus('客户端未加载');
                  alert('录音客户端未加载，请检查js/server-recording.js文件');
              }
          } catch (error) {
              console.error('开始服务端录音失败:', error);
              updateServerRecordingStatus('启动失败');
              alert('开始录音失败: ' + error.message);
          }
      }
      */
      //停止服务端录音
      /*
      function stopServerRecording() {
          try {
              if (!isServerRecording || !serverRecordingClient) {
                  console.log('服务端录音未在进行中');
                  return;
              }

              console.log('停止服务端录音...');
              updateServerRecordingStatus('停止中...');

              serverRecordingClient.stopRecording()
                  .then(() => {
                      console.log('服务端录音已停止');
                  })
                  .catch(error => {
                      console.error('停止服务端录音失败:', error);
                      updateServerRecordingStatus('停止失败');
                      alert('停止录音失败: ' + error.message);
                  });
          } catch (error) {
              console.error('停止服务端录音失败:', error);
              updateServerRecordingStatus('停止失败');
              alert('停止录音失败: ' + error.message);
          }
      }
    */

      // 断开服务端录音连接
      function disconnectServerRecording() {
          console.log('断开服务端录音连接...');

          if (serverRecordingClient) {
              serverRecordingClient.disconnect();
              serverRecordingClient = null;
          }

          isServerRecording = false;
          updateServerRecordingStatus('未连接');
      }


      // 更新服务端录音状态
      function updateServerRecordingStatus(status) {
          const statusElement = $('#asr-connection-status');
          if (statusElement.length) {
              statusElement.text(status);

              // 根据状态设置颜色
              const parentElement = statusElement.parent();
              parentElement.removeClass('text-success text-warning text-danger');

              switch (status) {
                  case '已连接':
                  case '录音中':
                      parentElement.css('background-color', '#d4edda');
                      statusElement.css('color', '#155724');
                      break;
                  case '连接中...':
                  case '启动中...':
                  case '停止中...':
                      parentElement.css('background-color', '#fff3cd');
                      statusElement.css('color', '#856404');
                      break;
                  case '未连接':
                  case '启动失败':
                  case '停止失败':
                  case '连接错误':
                  case '客户端未加载':
                  default:
                      parentElement.css('background-color', '#f8d7da');
                      statusElement.css('color', '#721c24');
                      break;
              }
          }
      }

      // 处理服务端录音结果
      function handleServerRecordingResult(result, isFinal) {
          console.log('处理识别结果:', result, '是否最终结果:', isFinal);

          if (isFinal && result.text && result.text.trim()) {
              // 只处理最终结果
              const recognizedText = result.text.trim();
              console.log('识别到的文本:', recognizedText);

              // 显示用户输入的消息
              addMessage(recognizedText, 'right', '用户', 'audio', '', 'voice');

              // 发送到聊天服务器
              sendServerRecordingResultToChat(recognizedText);
          } else if (!isFinal && result.text) {
              // 部分结果可以用于实时显示（可选）
              console.log('部分识别结果:', result.text);
          }
      }

      // 处理服务端录音错误
      function handleServerRecordingError(error) {
          console.error('服务端录音错误:', error);

          // 显示错误消息
          const errorMessage = error.message || error.toString();
          addMessage(`录音错误: ${errorMessage}`, 'left', '系统错误', 'error');

          // 重置状态
          isServerRecording = false;
          updateServerRecordingStatus('连接错误');
      }

      // 发送服务端录音结果到聊天服务器
      function sendServerRecordingResultToChat(text) {
          console.log('发送识别结果到聊天服务器:', text);

          const sessionId = document.getElementById('sessionid').value;
          if (!sessionId || sessionId === '0') {
              console.error('无效的SessionID，无法发送消息');
              addMessage('错误: 无效的会话ID，请重新连接', 'left', '系统错误', 'error');
              return;
          }

          // 通过HTTP接口发送到聊天服务器
          fetch('/human', {
              method: 'POST',
              headers: {
                  'Content-Type': 'application/json',
                  'X-Request-Source': 'voice'
              },
              body: JSON.stringify({
                  text: text,
                  type: 'audio',
                  interrupt: true,
                  sessionid: parseInt(sessionId)
              })
          }).then(response => {
              if (!response.ok) {
                  throw new Error(`HTTP ${response.status}: ${response.statusText}`);
              }
              return response.json();
          }).then(data => {
              console.log('聊天服务器响应:', data);
              if (data.code !== 0) {
                  console.error('聊天服务器处理失败:', data.message || data.msg);
                  addMessage(`服务器错误: ${data.message || data.msg}`, 'left', '系统错误', 'error');
              }
          }).catch(error => {
              console.error('发送到聊天服务器失败:', error);
              addMessage(`网络错误: ${error.message}`, 'left', '系统错误', 'error');
          });
      }

      // 保存服务端录音配置
      function saveServerRecordingConfig() {
          const host = $('#asr-server-host').val().trim();
          const port = $('#asr-server-port').val().trim();

          // 验证输入
          if (!host) {
              alert('请输入ASR服务器主机地址');
              return;
          }

          if (!port || isNaN(port)) {
              alert('请输入有效的ASR服务器端口号');
              return;
          }

          localStorage.setItem('serverRecordingHost', host);
          localStorage.setItem('serverRecordingPort', port);

          console.log('服务端录音配置已保存:', { host, port });
          alert('ASR配置已保存');

          // 如果已连接，提示重新连接
          if (serverRecordingClient && serverRecordingClient.isConnected) {
              if (confirm('配置已更改，是否重新连接ASR服务器？')) {
                  disconnectServerRecording();
              }
          }
      }

      // 重置服务端录音配置
      function resetServerRecordingConfig() {
          if (confirm('确定要重置ASR配置吗？')) {
              $('#asr-server-host').val('localhost');
              $('#asr-server-port').val('10197');
              $('#enable-asr').prop('checked', false);

              localStorage.removeItem('serverRecordingHost');
              localStorage.removeItem('serverRecordingPort');
              localStorage.removeItem('enableServerRecording');

              console.log('服务端录音配置已重置');
              alert('ASR配置已重置为默认值');

              // 如果已连接，断开连接
              if (serverRecordingClient && serverRecordingClient.isConnected) {
                  disconnectServerRecording();
              }
          }
      }

      // 服务端录音功能已替换原有的音频文件上传功能
      // 如需音频文件识别，请使用服务端录音接口

      // 原有的麦克风录音功能已被服务端录音功能替代
      // 以下函数已移除：
      // - startMicrophoneRecording()
      // - stopMicrophoneRecording()
      // - sendAudioToASR()
      // - startAudioLevelAnimation()
      // - stopAudioLevelAnimation()
      // - drawSpectrum()

          // 原有的频谱绘制、数据传输指示器、静音检测、连续录音等功能已被服务端录音功能替代
          // 以下函数已移除：
          // - updateDataTransferIndicator()
          // - startSilenceDetection()
          // - clearSilenceTimer()
          // - startContinuousRecording()
          // - stopContinuousRecording()
          // - startNewAudioSegment()
          // - processContinuousAudioSegment()
          // - processAudioChunks()

              // 原有的ASR相关代码已被服务端录音功能替代
              // 以下函数已移除：
              // - saveASRConfig()
              // - resetASRConfig()
              // - addMessageToChat() (ASR版本)

            // Note: The original '#expand-sidebar'.click handler was part of the replaced block.
            // If an element with id #expand-sidebar exists and needs to control the sidebar,
            // its click handler should be re-implemented similar to this:
            // $('#expand-sidebar').click(function() {
            //     if ($('#sidebar').hasClass('collapsed')) {
            //         $('#sidebar').removeClass('collapsed');
            //         updateToggleButtonState();
            //     }
            // });

            // 控制服务器配置保存和重置
            $('#save-control-ws-config').click(function() {
                var controlHost = $('#control-ws-host').val().trim();
                var controlPort = $('#control-ws-port').val().trim();
                var enableControl = $('#enable-control-ws').prop('checked');

                if (!controlHost) {
                    alert('控制服务器主机不能为空。');
                    $('#control-ws-host').focus();
                    return;
                }
                if (!controlPort) {
                    alert('控制服务器端口不能为空。');
                    $('#control-ws-port').focus();
                    return;
                }

                localStorage.setItem('controlWsHost', controlHost);
                localStorage.setItem('controlWsPort', controlPort);
                localStorage.setItem('enableControlWs', enableControl.toString());

                var originalText = $(this).text();
                $(this).text('已保存!').prop('disabled', true);
                setTimeout(function() {
                    $('#save-control-ws-config').text(originalText).prop('disabled', false);
                }, 1500);

                console.log('控制服务器配置已保存: Host - ' + controlHost + ', Port - ' + controlPort + ', Enabled - ' + enableControl);
            });

            // 聊天服务器配置保存
            $('#save-chat-ws-config').click(function() {
                var chatHost = $('#chat-ws-host').val().trim();
                var chatPort = $('#chat-ws-port').val().trim();

                if (!chatHost) {
                    alert('聊天服务器主机不能为空。');
                    $('#chat-ws-host').focus();
                    return;
                }
                if (!chatPort) {
                    alert('聊天服务器端口不能为空。');
                    $('#chat-ws-port').focus();
                    return;
                }

                localStorage.setItem('chatWsHost', chatHost);
                localStorage.setItem('chatWsPort', chatPort);

                var originalText = $(this).text();
                $(this).text('已保存!').prop('disabled', true);
                setTimeout(function() {
                    $('#save-chat-ws-config').text(originalText).prop('disabled', false);
                }, 1500);

                console.log('聊天服务器配置已保存: Host - ' + chatHost + ', Port - ' + chatPort);
            });

            // 控制服务器配置重置
            $('#reset-control-ws-config').click(function() {
                $('#control-ws-host').val('127.0.0.1');
                $('#control-ws-port').val('10002');
                $('#enable-control-ws').prop('checked', true);

                var originalText = $(this).text();
                $(this).text('已重置!').prop('disabled', true);
                setTimeout(function() {
                    $('#reset-control-ws-config').text(originalText).prop('disabled', false);
                }, 1500);
                console.log('控制服务器配置已重置为默认值');
            });

            // 聊天服务器配置重置
            $('#reset-chat-ws-config').click(function() {
                $('#chat-ws-host').val('localhost');
                $('#chat-ws-port').val('8010');

                var originalText = $(this).text();
                $(this).text('已重置!').prop('disabled', true);
                setTimeout(function() {
                    $('#reset-chat-ws-config').text(originalText).prop('disabled', false);
                }, 1500);
                console.log('聊天服务器配置已重置为默认值');
            });

            // 控制服务器连接管理
            var controlWs = null;

            $('#connect-control-ws').click(function() {
                if (!$('#enable-control-ws').prop('checked')) {
                    alert('请先启用控制服务器连接');
                    return;
                }

                var controlHost = $('#control-ws-host').val().trim() || '127.0.0.1';
                var controlPort = $('#control-ws-port').val().trim() || '10002';
                var controlWsUrl = 'ws://' + controlHost + ':' + controlPort + '/ws';

                console.log('连接控制服务器:', controlWsUrl);

                controlWs = new WebSocket(controlWsUrl);

                controlWs.onopen = function() {
                    console.log('控制服务器连接成功');
                    $('#connect-control-ws').prop('disabled', true);
                    $('#disconnect-control-ws').prop('disabled', false);

                    // 控制服务器专注于控制命令处理，不再处理WSA注册
                    console.log('控制服务器已连接，等待控制命令...');
                };

                controlWs.onclose = function() {
                    console.log('控制服务器连接关闭');
                    $('#connect-control-ws').prop('disabled', false);
                    $('#disconnect-control-ws').prop('disabled', true);
                };

                // 控制服务器关闭时的清理工作
                var originalClose = controlWs.close;
                controlWs.close = function() {
                    console.log('正在关闭控制服务器连接...');
                    originalClose.call(this);
                };

                controlWs.onerror = function(error) {
                    console.error('控制服务器连接错误:', error);
                    alert('控制服务器连接失败');
                };

                // 处理控制WebSocket接收到的消息
                controlWs.onmessage = function(event) {
                    try {
                        var data = JSON.parse(event.data);
                        console.log('控制WebSocket收到消息:', data);

                        switch(data.type) {
                            case 'wsa_registered':
                                console.log('WSA注册成功:', data);
                                // 可以在这里添加注册成功的UI反馈
                                break;
                            case 'wsa_error':
                                console.error('WSA错误:', data.message || data.error);
                                break;
                            case 'wsa_command':
                                console.log('收到WSA命令:', data);
                                // 处理来自WSA服务的命令
                                handleWSACommand(data);
                                break;
                            case 'wsa_status':
                                console.log('WSA状态更新:', data);
                                break;
                            default:
                                console.log('未知控制消息类型:', data.type);
                        }
                    } catch (e) {
                        console.error('解析控制WebSocket消息失败:', e, event.data);
                    }
                };
            });

            $('#disconnect-control-ws').click(function() {
                if (controlWs) {
                    controlWs.close();
                    controlWs = null;
                }
            });

            // 控制服务器开关状态变化处理
            $('#enable-control-ws').change(function() {
                var enabled = $(this).prop('checked');
                localStorage.setItem('enableControlWs', enabled.toString());

                if (!enabled && controlWs) {
                    controlWs.close();
                    controlWs = null;
                }
            });

      // Old WebSocket code commented out
      // var host = window.location.hostname
      // var ws = new WebSocket("ws://"+host+":8000/humanecho");
      // //document.getElementsByTagName("video")[0].setAttribute("src", aa["video"]);
      // ws.onopen = function() {
        // console.log('Connected');
      // };
      // ws.onmessage = function(e) {
        // console.log('Received: ' + e.data);
        // data = e
        // var vid = JSON.parse(data.data);
        // console.log(typeof(vid),vid)
        // //document.getElementsByTagName("video")[0].setAttribute("src", vid["video"]);

      // };
      // ws.onclose = function(e) {
        // console.log('Closed');
      // };

      $('#echo-form').on('submit', function(e) {
          e.preventDefault();
          var message = $('#message').val().trim();
          if (!message) return;

          console.log('Sending: ' + message);
          console.log('sessionid: ', document.getElementById('sessionid').value);

          // 保存最后一条用户消息用于模式判断
          localStorage.setItem('lastUserMessage', message);

          // 获取选择的消息类型，默认为chat
          var messageType = document.getElementById('message-type') ? document.getElementById('message-type').value : 'chat';

        //   // 立即将用户消息显示在对话框右侧
        //   var senderLabel = '用户';
        //   var messageMode = 'text';
        //   if (messageType === 'chat') {
        //       senderLabel = '用户';
        //       messageMode = 'chat';
        //   } else if (messageType === 'echo') {
        //       senderLabel = '用户';
        //       messageMode = 'echo';
        //   }

        //   // 添加用户消息到界面
        //   addMessage(message, 'right', senderLabel, messageMode, '', 'web');

          // 发送消息到服务器
          var requestData = {
              text: message,
              type: messageType,
              interrupt: true,
              sessionid: parseInt(document.getElementById('sessionid').value),
          };
          console.log('准备发送HTTP请求到/human:', requestData);
          console.log('当前WebSocket连接状态:', ws ? ws.readyState : 'WebSocket未初始化');

          fetch('/human', {
                body: JSON.stringify(requestData),
                headers: {
                    'Content-Type': 'application/json',
                    'X-Request-Source': 'web'
                },
                method: 'POST'
          }).then(response => {
              console.log('HTTP响应状态:', response.status);
              return response.json();
          }).then(data => {
              console.log('/human接口响应:', data);
              if (data.code !== 0) {
                  console.error('服务器处理失败:', data.message || data.msg);
              }
              // 所有消息显示都通过WebSocket推送，不再从HTTP响应获取数据
          }).catch(error => {
              console.error('发送消息错误:', error);
              // 网络错误时添加错误消息到界面
              addMessage(`网络错误: ${error.message}`, 'left', '系统错误', 'error');
          });

          $('#message').val('');
      });

      // 本地存储设置事件处理
      $('#enable-storage').change(function() {
          const enabled = $(this).is(':checked');
          ChatStorage.setStorageEnabled(enabled);
          console.log('本地存储已', enabled ? '启用' : '禁用');
      });

      $('#load-history').click(function() {
          loadChatHistory();
          alert('历史记录已加载！');
      });

      $('#clear-storage').click(function() {
          if (confirm('确定要清理所有本地聊天记录吗？此操作不可恢复！')) {
              ChatStorage.clearStorage();
              localStorage.removeItem('chatHistory');
              const chatMessages = document.getElementById("chatMessages");
              if (chatMessages) {
                  chatMessages.innerHTML = '';
              }
              alert('本地记录已清理！');
          }
      });

      $('#view-history').click(function() {
          const dates = ChatStorage.getAllDates();
          if (dates.length === 0) {
              alert('暂无历史记录');
              return;
          }

          let historyHtml = '<div style="max-height: 400px; overflow-y: auto; padding: 10px;">';
          historyHtml += '<h3>聊天记录</h3>';

          dates.forEach(date => {
              const dateHistory = ChatStorage.getDateHistory(date);
              historyHtml += `<h4>${date} (${dateHistory.length}条消息)</h4>`;

              dateHistory.forEach(msg => {
                  const time = new Date(msg.timestamp).toLocaleTimeString('zh-CN', { hour12: false });
                  const sourceIcon = msg.type === 'right' ? '👤' : '🤖';
                  historyHtml += `<div style="margin: 5px 0; padding: 5px; border-left: 3px solid ${msg.type === 'right' ? '#4285f4' : '#4CAF50'}; background: #f9f9f9;">`;
                  historyHtml += `<small>${sourceIcon} ${time} - 会话${msg.sessionId}</small><br>`;
                  historyHtml += `<span>${msg.text}</span>`;
                  historyHtml += '</div>';
              });
          });

          historyHtml += '</div>';

          // 创建模态框显示历史记录
          const modal = document.createElement('div');
          modal.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center;';

          const content = document.createElement('div');
          content.style.cssText = 'background: white; border-radius: 8px; max-width: 80%; max-height: 80%; overflow: hidden;';
          content.innerHTML = historyHtml + '<div style="text-align: center; padding: 10px;"><button onclick="this.closest(\'div\').parentElement.remove()" style="padding: 8px 16px; background: #4285f4; color: white; border: none; border-radius: 4px; cursor: pointer;">关闭</button></div>';

          modal.appendChild(content);
          document.body.appendChild(modal);

          // 点击背景关闭
          modal.addEventListener('click', function(e) {
              if (e.target === modal) {
                  modal.remove();
              }
          });
      });

      // 页面加载时初始化存储设置
      $(document).ready(function() {
          const storageEnabled = ChatStorage.isStorageEnabled();
          $('#enable-storage').prop('checked', storageEnabled);

          // 自动加载历史记录
          if (storageEnabled) {
              setTimeout(loadChatHistory, 1000); // 延迟1秒加载，确保页面完全加载
          }

          // 初始化对话框配置
          loadChatOverlayConfig();

          // 对话框显示/隐藏开关
          $('#show-chat-overlay').change(function() {
              const chatOverlay = document.getElementById('chatOverlay');
              if (this.checked) {
                  chatOverlay.style.display = 'flex';
                  localStorage.setItem('chatOverlayVisible', 'true');
              } else {
                  chatOverlay.style.display = 'none';
                  localStorage.setItem('chatOverlayVisible', 'false');
              }
          });

          // 对话框透明度滑块
          $('#chat-overlay-opacity').on('input', function() {
              const opacity = this.value;
              $('#opacity-value').text(opacity);
              updateChatOverlayOpacity(parseInt(opacity));
          });

          // 消息框透明度滑块
          $('#message-opacity').on('input', function() {
              const opacity = this.value;
              $('#message-opacity-value').text(opacity);
              updateMessageOpacity(parseInt(opacity));
          });

          // 重置对话框配置
          $('#reset-chat-config').click(function() {
              // 重置为默认值
              $('#show-chat-overlay').prop('checked', true);
              $('#chat-overlay-opacity').val(50);
              $('#opacity-value').text('50');
              $('#message-opacity').val(50);
              $('#message-opacity-value').text('50');

              // 应用默认设置
              document.getElementById('chatOverlay').style.display = 'flex';
              updateChatOverlayOpacity(50);
              updateMessageOpacity(50);

              // 清除本地存储
              localStorage.removeItem('chatOverlayVisible');
              localStorage.removeItem('chatOverlayOpacity');
              localStorage.removeItem('messageOpacity');

              // 提示用户
              const originalText = $(this).text();
              $(this).text('已重置!').prop('disabled', true);
              setTimeout(() => {
                  $(this).text(originalText).prop('disabled', false);
              }, 1500);
          });
      });

      $('#btn_start_record').click(function() {
          console.log('Starting recording...');
          fetch('/record', {
              body: JSON.stringify({
                      type: 'start_record',
                      sessionid: parseInt(document.getElementById('sessionid').value),
                  }),
                  headers: {
                      'Content-Type': 'application/json'
                  },
              method: 'POST'
          }).then(function(response) {
              if (response.ok) {
                  console.log('Recording started.');
                  $('#btn_start_record').prop('disabled', true);
                  $('#btn_stop_record').prop('disabled', false);
              } else {
                  console.error('Failed to start recording.');
              }
          }).catch(function(error) {
              console.error('Error:', error);
          });
      });

      $('#btn_stop_record').click(function() {
          console.log('Stopping recording...');
          fetch('/record', {
              body: JSON.stringify({
                      type: 'end_record',
                      sessionid: parseInt(document.getElementById('sessionid').value),
                  }),
                  headers: {
                      'Content-Type': 'application/json'
                  },
              method: 'POST'
          }).then(function(response) {
              if (response.ok) {
                  console.log('Recording stopped.');
                  $('#btn_start_record').prop('disabled', false);
                  $('#btn_stop_record').prop('disabled', true);
              } else {
                  console.error('Failed to stop recording.');
              }
          }).catch(function(error) {
              console.error('Error:', error);
          });
      });

      // WebSocket connection to Fay digital avatar (port 10002)
      var ws;
      var reconnectInterval = 5000; // 初始重连间隔为5秒
      var reconnectAttempts = 0;
      var maxReconnectInterval = 60000; // 最大重连间隔为60秒
      var isReconnecting = false; // 标记是否正在重连中

      // 基于sessionId生成临时username
      function getTemporaryUsername() {
        var sessionId = document.getElementById('sessionid').value;
        return sessionId ? 'User_' + sessionId : 'User_0';
      }

      // 页面加载时恢复聊天记录
      function loadChatHistory() {
          const recentMessages = ChatStorage.loadRecentMessages();
          const chatMessages = document.getElementById("chatMessages");

          if (chatMessages && recentMessages.length > 0) {
              // 清空现有消息
              chatMessages.innerHTML = '';

              // 添加历史消息
              recentMessages.forEach(msg => {
                  addMessage(msg.text, msg.type, msg.source, msg.mode, msg.modelInfo || '', msg.requestSource || '');
              });

              console.log(`已加载 ${recentMessages.length} 条历史消息`);
          }
      }

       // 本地存储管理
      const ChatStorage = {
          // 获取存储设置
          isStorageEnabled: function() {
              return localStorage.getItem('chatStorageEnabled') !== 'false';
          },

          // 设置存储开关
          setStorageEnabled: function(enabled) {
              localStorage.setItem('chatStorageEnabled', enabled.toString());
          },

          // 保存消息到本地存储
          saveMessage: function(messageData) {
              if (!this.isStorageEnabled()) return;

              const sessionId = document.getElementById('sessionid').value;
              const storageKey = `chat_history_${sessionId}`;
              let history = JSON.parse(localStorage.getItem(storageKey) || '[]');

              // 添加新消息
              history.push({
                  ...messageData,
                  timestamp: new Date().toISOString(),
                  date: new Date().toDateString()
              });

              // 保存到localStorage
              localStorage.setItem(storageKey, JSON.stringify(history));

              // 同时保存到按日期分组的存储中
              this.saveToDateStorage(messageData);
          },

          // 按日期保存消息
          saveToDateStorage: function(messageData) {
              const today = new Date().toDateString();
              const dateKey = `chat_date_${today.replace(/\s+/g, '_')}`;
              let dateHistory = JSON.parse(localStorage.getItem(dateKey) || '[]');

              dateHistory.push({
                  ...messageData,
                  timestamp: new Date().toISOString(),
                  sessionId: document.getElementById('sessionid').value
              });

              localStorage.setItem(dateKey, JSON.stringify(dateHistory));
          },

          // 加载最近12条消息
          loadRecentMessages: function() {
              if (!this.isStorageEnabled()) return [];

              const sessionId = document.getElementById('sessionid').value;
              const storageKey = `chat_history_${sessionId}`;
              const history = JSON.parse(localStorage.getItem(storageKey) || '[]');

              // 返回最后12条消息
              return history.slice(-12);
          },

          // 获取所有日期的聊天记录
          getAllDates: function() {
              const dates = [];
              for (let i = 0; i < localStorage.length; i++) {
                  const key = localStorage.key(i);
                  if (key && key.startsWith('chat_date_')) {
                      const date = key.replace('chat_date_', '').replace(/_/g, ' ');
                      dates.push(date);
                  }
              }
              return dates.sort((a, b) => new Date(b) - new Date(a));
          },

          // 获取指定日期的聊天记录
          getDateHistory: function(date) {
              const dateKey = `chat_date_${date.replace(/\s+/g, '_')}`;
              return JSON.parse(localStorage.getItem(dateKey) || '[]');
          },

          // 清理本地记录
          clearStorage: function() {
              const keys = [];
              for (let i = 0; i < localStorage.length; i++) {
                  const key = localStorage.key(i);
                  if (key && (key.startsWith('chat_history_') || key.startsWith('chat_date_'))) {
                      keys.push(key);
                  }
              }
              keys.forEach(key => localStorage.removeItem(key));
          }
      };

      // 全局 addMessage 函数定义
      function addMessage(text, type = "right", source = "", mode = "", modelInfo = "", requestSource = "") {
          const chatMessages = document.getElementById("chatMessages");
          if (!chatMessages) {
              console.error('聊天消息容器不存在');
              return;
          }

          // 创建消息数据对象
          const messageData = {
              text: text,
              type: type,
              source: source,
              mode: mode,
              modelInfo: modelInfo,
              requestSource: requestSource
          };

          // 保存到本地存储
          ChatStorage.saveMessage(messageData);

          const messageDiv = document.createElement("div");
          messageDiv.classList.add("message", type);

          // 为左侧消息添加模式类
          if (type === "left" && mode) {
              messageDiv.classList.add("mode-" + mode);
          }

          const avatar = document.createElement("div");
          avatar.classList.add("avatar");
          avatar.style.width = "28px";
          avatar.style.height = "28px";
          avatar.style.borderRadius = "50%";
          avatar.style.display = "flex";
          avatar.style.alignItems = "center";
          avatar.style.justifyContent = "center";
          avatar.style.fontSize = "12px";
          avatar.style.fontWeight = "bold";
          avatar.style.color = "white";
          avatar.style.border = "1px solid rgba(255,255,255,0.2)";

          if (type === "right") {
              avatar.style.backgroundColor = "#4285f4";
              avatar.textContent = "👤";
          } else {
              // 根据模式设置不同的头像和颜色
              switch(mode) {
                  case "echo":
                      avatar.style.backgroundColor = "#FFC107";
                      avatar.textContent = "🔄";
                      break;
                  case "chat":
                      avatar.style.backgroundColor = "#4CAF50";
                      avatar.textContent = "🤖";
                      break;
                  case "audio":
                      avatar.style.backgroundColor = "#9C27B0";
                      avatar.textContent = "🎤";
                      break;
                  case "plaintext":
                      avatar.style.backgroundColor = "#607D8B";
                      avatar.textContent = "📝";
                      break;
                  default:
                      avatar.style.backgroundColor = "#34a853";
                      avatar.textContent = "🤖";
              }
          }

          const textContainer = document.createElement("div");
          textContainer.classList.add("text-container");

          // 添加来源标签
          if (source) {
              const sourceTag = document.createElement("div");
              sourceTag.classList.add("source-tag");
              // 根据模式显示不同的标签文本
              let tagText = source;
              if (type === "right") {
                  // 用户消息，显示请求来源
                  if (requestSource) {
                      tagText = requestSource === 'web' ? "🌐 网页" : requestSource === 'api' ? "🔗 API" : "👤 用户";
                  } else {
                      tagText = "👤 用户";
                  }
              } else {
                  // 数字人回复，显示模式和模型信息
                  switch(mode) {
                      case "echo":
                          tagText = "🔄 回音";
                          break;
                      case "chat":
                          tagText = modelInfo ? `🤖 ${modelInfo}` : "🤖 智能";
                          break;
                      case "audio":
                          tagText = "🎤 语音";
                          break;
                      case "plaintext":
                          tagText = "📝 文本";
                          break;
                      default:
                          tagText = "🤖 数字人";
                  }
              }
              sourceTag.textContent = tagText;
              textContainer.appendChild(sourceTag);
          }

          const textDiv = document.createElement("div");
          textDiv.classList.add("text");
          textDiv.textContent = text;
          textContainer.appendChild(textDiv);

          const timeDiv = document.createElement("div");
          timeDiv.classList.add("time");
          const now = new Date();
          timeDiv.textContent = now.toLocaleTimeString('zh-CN', { hour12: false });
          textContainer.appendChild(timeDiv);

          if (type === "right") {
              messageDiv.appendChild(textContainer);
              messageDiv.appendChild(avatar);
          } else {
              messageDiv.appendChild(avatar);
              messageDiv.appendChild(textContainer);
          }

          chatMessages.appendChild(messageDiv);

          // 限制消息数量，只保留最新的12条消息
          const messages = chatMessages.children;
          const maxMessages = 12;
          while (messages.length > maxMessages) {
              chatMessages.removeChild(messages[0]);
          }

          // 显示聊天区域（如果之前隐藏）
          const chatOverlay = document.getElementById("chatOverlay");
          if (chatOverlay) {
              chatOverlay.style.display = "flex";
          }

          // 保存聊天记录
          saveChatHistory();
      }


      // 切换对话框显示/隐藏
      function toggleChatOverlay() {
          const chatOverlay = document.getElementById('chatOverlay');
          const showCheckbox = document.getElementById('show-chat-overlay');

          if (chatOverlay.style.display === 'none') {
              chatOverlay.style.display = 'flex';
              showCheckbox.checked = true;
              localStorage.setItem('chatOverlayVisible', 'true');
          } else {
              chatOverlay.style.display = 'none';
              showCheckbox.checked = false;
              localStorage.setItem('chatOverlayVisible', 'false');
          }
      }

      // 更新对话框透明度
      function updateChatOverlayOpacity(opacity) {
          const chatOverlay = document.getElementById('chatOverlay');
          const newBgColor = `rgba(0,0,0,${opacity / 100})`;
          chatOverlay.style.backgroundColor = newBgColor;
          localStorage.setItem('chatOverlayOpacity', opacity);
      }

      // 更新消息框透明度
      function updateMessageOpacity(opacity) {
          const style = document.createElement('style');
          style.id = 'dynamic-message-opacity';

          // 移除旧的样式
          const oldStyle = document.getElementById('dynamic-message-opacity');
          if (oldStyle) {
              oldStyle.remove();
          }

          style.innerHTML = `
              #chatOverlay .text-container {
                  background-color: rgba(255,255,255,${opacity / 100}) !important;
              }
              #chatOverlay .message.right .text-container {
                  background-color: rgba(66,133,244,${opacity / 100}) !important;
              }
              #chatOverlay .message.left .text-container {
                  background-color: rgba(248,249,250,${opacity / 100}) !important;
              }
              #chatOverlay .message.left.mode-echo .text-container {
                  background-color: rgba(255,235,59,${opacity / 100}) !important;
              }
              #chatOverlay .message.left.mode-chat .text-container {
                  background-color: rgba(76,175,80,${opacity / 100}) !important;
              }
              #chatOverlay .message.left.mode-audio .text-container {
                  background-color: rgba(156,39,176,${opacity / 100}) !important;
              }
              #chatOverlay .message.left.mode-plaintext .text-container {
                  background-color: rgba(96,125,139,${opacity / 100}) !important;
              }
              #chatOverlay .avatar {
                  background-color: rgba(255,255,255,${opacity / 100}) !important;
              }
          `;

          document.head.appendChild(style);
          localStorage.setItem('messageOpacity', opacity);
      }

      // 加载对话框配置
      function loadChatOverlayConfig() {
          // 加载显示状态
          const isVisible = localStorage.getItem('chatOverlayVisible');
          if (isVisible === 'false') {
              document.getElementById('chatOverlay').style.display = 'none';
              document.getElementById('show-chat-overlay').checked = false;
          }

          // 加载透明度设置
          const overlayOpacity = localStorage.getItem('chatOverlayOpacity') || '50';
          const messageOpacity = localStorage.getItem('messageOpacity') || '50';

          document.getElementById('chat-overlay-opacity').value = overlayOpacity;
          document.getElementById('opacity-value').textContent = overlayOpacity;
          updateChatOverlayOpacity(parseInt(overlayOpacity));

          document.getElementById('message-opacity').value = messageOpacity;
          document.getElementById('message-opacity-value').textContent = messageOpacity;
          updateMessageOpacity(parseInt(messageOpacity));
      }

      // 初始化聊天滚轮支持
      function initChatWheelSupport() {
          const chatMessages = document.getElementById("chatMessages");
          const chatOverlay = document.getElementById("chatOverlay");
          if (!chatMessages || !chatOverlay) return;

          let scrollPosition = 0; // 当前滚动位置
          const scrollStep = 25; // 每次滚动的像素数
          let isScrolling = false; // 防止滚动冲突
          let lastWheelTime = 0; // 上次滚轮事件时间
          const throttleDelay = 16; // 约60fps的节流延迟

          // 节流函数
          function throttle(func, delay) {
              return function(...args) {
                  const now = Date.now();
                  if (now - lastWheelTime >= delay) {
                      lastWheelTime = now;
                      func.apply(this, args);
                  }
              };
          }

          // 滚轮处理函数
          function handleWheel(e) {
              e.preventDefault();
              e.stopPropagation();

              if (isScrolling) return;

              const messages = chatMessages.children;
              if (messages.length === 0) return;

              // 计算总内容高度
              let totalHeight = 0;
              for (let i = 0; i < messages.length; i++) {
                  totalHeight += messages[i].offsetHeight + 12; // 12px是margin-bottom
              }

              const containerHeight = chatMessages.offsetHeight;
              const maxScroll = Math.max(0, totalHeight - containerHeight);

              // 如果内容不超出容器，不需要滚动
              if (maxScroll <= 0) return;

              isScrolling = true;

              // 根据滚轮方向和强度调整滚动位置
              const delta = Math.sign(e.deltaY) * scrollStep;
              const newPosition = Math.max(0, Math.min(scrollPosition + delta, maxScroll));

              if (newPosition !== scrollPosition) {
                  scrollPosition = newPosition;

                  // 应用滚动效果
                  chatMessages.style.transform = `translateY(-${scrollPosition}px)`;
                  chatMessages.style.transition = 'transform 0.08s ease-out';

                  // 清除过渡效果和滚动锁定
                  setTimeout(() => {
                      chatMessages.style.transition = '';
                      isScrolling = false;
                  }, 80);
              } else {
                  isScrolling = false;
              }
          }

          // 使用节流的滚轮处理函数
          const throttledWheelHandler = throttle(handleWheel, throttleDelay);

          // 同时在chatMessages和chatOverlay上绑定事件，提高响应性
          chatMessages.addEventListener('wheel', throttledWheelHandler, { passive: false });
          chatOverlay.addEventListener('wheel', throttledWheelHandler, { passive: false });

          // 当新消息添加时，自动滚动到底部
          const observer = new MutationObserver(function(mutations) {
              mutations.forEach(function(mutation) {
                  if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                      // 重置滚动位置到底部
                      scrollPosition = 0;
                      chatMessages.style.transform = 'translateY(0)';
                      chatMessages.style.transition = '';
                  }
              });
          });

          observer.observe(chatMessages, { childList: true });

          // 返回清理函数
          return function cleanup() {
              chatMessages.removeEventListener('wheel', throttledWheelHandler);
              chatOverlay.removeEventListener('wheel', throttledWheelHandler);
              observer.disconnect();
          };
      }

      // 保存聊天记录到本地存储
      function saveChatHistory(messageData) {
          if (messageData && ChatStorage.isStorageEnabled()) {
              ChatStorage.saveMessage(messageData);
          } else {
              // 兼容旧的保存方式（如果没有传入消息数据）
              const chatMessages = document.getElementById("chatMessages");
              if (chatMessages) {
                  localStorage.setItem('chatHistory', chatMessages.innerHTML);
              }
          }
      }

      // 从本地存储加载聊天记录
      function loadChatHistory() {
          const chatMessages = document.getElementById("chatMessages");
          if (!chatMessages) return;

          // 优先使用新的ChatStorage系统
          if (ChatStorage.isStorageEnabled()) {
              ChatStorage.loadRecentMessages();
          } else {
              // 兼容旧的localStorage方式
              const savedHistory = localStorage.getItem('chatHistory');
              if (savedHistory) {
                  chatMessages.innerHTML = savedHistory;
                  // 自动滚动到底部
                  chatMessages.scrollTop = chatMessages.scrollHeight;
              }
          }
      }

      window.connectWebSocket = function() {
          var host = window.location.hostname;
          // 获取聊天服务器WebSocket地址，优先使用配置值，否则使用当前主机名
          var chatWsHost = localStorage.getItem('chatWsHost') || host;
          var chatWsPort = localStorage.getItem('chatWsPort') || '8010'; // 聊天服务器端口
          var wsProtocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
          var wsUrl = wsProtocol + chatWsHost + ':' + chatWsPort + '/ws'; // 聊天服务器WebSocket路径
          console.log('Connecting to WebSocket server:', wsUrl);
          updateConnectionStatus('connecting', '正在连接聊天服务器...');
          ws = new WebSocket(wsUrl);
          ws.onopen = function() {
              console.log('Connected to WebSocket server');
              console.log('WebSocket URL:', ws.url);
              console.log('WebSocket readyState:', ws.readyState);
              reconnectAttempts = 0; // 重置重连次数
              reconnectInterval = 5000; // 重置重连间隔

              // 等待sessionid设置完成后再发送登录消息
              function attemptLogin(retryCount = 0) {
                  var sessionid = parseInt(document.getElementById('sessionid').value) || 0;

                  if (sessionid === 0 && retryCount < 20) {
                      console.log(`等待sessionid设置，重试次数: ${retryCount + 1}/20`);
                      updateConnectionStatus('connecting', `等待会话ID... (${retryCount + 1}/20)`);
                      setTimeout(() => attemptLogin(retryCount + 1), 200);
                      return;
                  }

                  if (sessionid === 0) {
                      console.error('sessionid仍为0，WebRTC连接可能失败');
                      console.error('请检查：1) WebRTC连接是否成功建立 2) /offer接口是否正常响应 3) 网络连接是否正常');
                      updateConnectionStatus('failed', '无法获取有效的会话ID，WebRTC连接失败');

                      // 关闭WebSocket连接，避免无效连接
                      if (ws && ws.readyState === WebSocket.OPEN) {
                          ws.close();
                      }

                      // 在控制台输出错误提示，不在对话框中显示
                      console.error('连接失败：无法获取有效的会话ID，请重新点击"开始连接"按钮');
                      return;
                  }

                  updateConnectionStatus('connecting', '正在登录聊天服务器...');
                  var loginMessage = {
                      type: 'login',
                      sessionid: sessionid,
                      username: getTemporaryUsername()
                  };

                  console.log('发送登录消息:', loginMessage);
                   console.log('当前sessionid值:', sessionid);
                   console.log('sessionid元素值:', document.getElementById('sessionid').value);
                   ws.send(JSON.stringify(loginMessage));
                   console.log('登录消息已发送:', JSON.stringify(loginMessage));

                   // 更新显示的sessionId
                   if (sessionid !== 0) {
                       document.getElementById('current-sessionid').value = sessionid;
                       document.getElementById('current-sessionid').placeholder = '已连接';
                   }
              }

              // 开始尝试登录
              attemptLogin();

              // 发送WSA注册消息到主服务
              var wsaRegisterMessage = {
                  type: 'wsa_register_web',
                  username: getTemporaryUsername(),
                  timestamp: Date.now()
              };
              console.log('发送WSA注册消息到主服务:', wsaRegisterMessage);
              ws.send(JSON.stringify(wsaRegisterMessage));

              // 发送心跳检测
              setInterval(function() {
                  if (ws.readyState === WebSocket.OPEN) {
                      ws.send(JSON.stringify({type: 'ping'}));
                  }
              }, 30000); // 每30秒发送一次心跳
          };

          ws.onmessage = function(e) {
              console.log('WebSocket原始消息:', e.data);
              console.log('WebSocket连接状态:', ws.readyState);
              var messageData = JSON.parse(e.data);
              console.log('解析后的消息数据:', messageData);

              // 处理聊天消息推送
              /*
              if (messageData.type === 'chat_message') {
                  var data = messageData.data;
                  console.log('收到聊天消息推送:', data);
                  console.log('消息sessionid:', data.sessionid);
                  console.log('当前页面sessionid:', document.getElementById('sessionid').value);

                  // 根据消息来源确定显示位置
                  var position = data.source === '用户' ? 'right' : 'left';
                  var messageType = data.message_type || 'chat';
                  var modelInfo = data.model_info || '';
                  var requestSource = data.request_source || '';

                  console.log('准备添加消息到界面:', {
                      content: data.content,
                      position: position,
                      source: data.source,
                      messageType: messageType,
                      modelInfo: modelInfo,
                      requestSource: requestSource
                  });

                  // 添加消息到聊天界面
                  addMessage(data.content, position, data.source, messageType, modelInfo, requestSource);
                  return;
              }
              */
              // 处理登录成功消息
              if (messageData.type === 'login_success') {
                  console.log('WebSocket登录成功:', messageData.message);
                  console.log('登录成功的sessionid:', messageData.sessionid);

                  updateConnectionStatus('connected', `聊天服务器已连接 (会话ID: ${messageData.sessionid || document.getElementById('sessionid').value})`);
                  return;
              }

              // 处理心跳响应
              if (messageData.type === 'pong') {
                  console.log('收到心跳响应');
                  // 心跳正常时确保连接状态显示为已连接
                  var currentSessionId = document.getElementById('sessionid').value;
                  if (currentSessionId && parseInt(currentSessionId) !== 0) {
                      updateConnectionStatus('connected', `聊天服务器已连接 (会话ID: ${currentSessionId})`);
                  }
                  return;
              }

              // 处理服务器推送的聊天消息
              if (messageData.type === 'chat_message') {
                  console.log('收到聊天消息:', messageData);

                  // 正确解析嵌套的content对象
                  var contentObj = messageData.content || {};
                  var messageContent = '';
                  var messageType = 'text';
                  var sender = 'unknown';
                  var sessionId = messageData.session_id;
                  var modelInfo = '';
                  var requestSource = '';
                  var timestamp = messageData.timestamp || new Date().toISOString();

                  // 如果content是对象，从中提取字段
                  if (typeof contentObj === 'object' && contentObj !== null) {
                      messageContent = contentObj.content || contentObj.message || contentObj.text || '';
                      messageType = contentObj.message_type || 'text';
                      sender = contentObj.source || messageData.sender || 'unknown';
                      modelInfo = contentObj.model_info || '';
                      requestSource = contentObj.request_source || '';
                  } else {
                      // 如果content是字符串，直接使用
                      messageContent = contentObj || messageData.message || messageData.text || '';
                      messageType = messageData.message_type || 'text';
                      sender = messageData.sender || 'unknown';
                      modelInfo = messageData.model_info || '';
                      requestSource = messageData.request_source || '';
                  }

                  // 判断消息方向和样式
                  var alignment = 'left';
                  var senderLabel = '数字人回复';
                  var messageMode = messageType;

                  if (sender === '用户' || sender === 'user' || sender === 'human') {
                      alignment = 'right';
                      senderLabel = '用户';
                      if (messageType === 'audio') {
                          senderLabel = '用户语音';
                          messageContent = '[语音输入]';
                      }
                  } else if (sender === 'AI助手' || sender === 'ai' || sender === 'assistant') {
                      alignment = 'left';
                      senderLabel = modelInfo ? `AI回复(${modelInfo})` : 'AI回复';
                  } else if (sender === '回音' || sender === 'echo') {
                      alignment = 'left';
                      senderLabel = modelInfo ? `回音模式(${modelInfo})` : '回音模式';
                  } else if (sender === '系统错误') {
                      alignment = 'left';
                      senderLabel = '系统错误';
                      messageMode = 'error';
                  }


                  // 添加消息到界面
                  addMessage(messageContent, alignment, senderLabel, messageMode, modelInfo, requestSource);

                  // 保存到本地存储
                  if (document.getElementById('enable-storage').checked) {
                      saveChatHistory({
                          content: messageContent,
                          alignment: alignment,
                          sender: senderLabel,
                          mode: messageMode,
                          modelInfo: modelInfo,
                          requestSource: requestSource,
                          timestamp: timestamp,
                          sessionId: sessionId
                      });
                  }
                  return;
              }

              if (messageData.Data && messageData.Data.Key) {
                       if(messageData.Data.Key == "audio"){
                       var value = messageData.Data.HttpValue;
                       console.log('Value:', value);

                       // 发送语音文件到服务器处理，不再直接添加到界面，等待WebSocket推送
                       fetch('/humanaudio', {
                              body: JSON.stringify({
                                  file_url: value,
                                  sessionid:parseInt(document.getElementById('sessionid').value),
                              }),
                              headers: {
                                  'Content-Type': 'application/json',
                                  'X-Request-Source': 'web'
                              },
                              method: 'POST'
                      });
                       }else if (messageData.Data.Key == "text") {
                                var reply = messageData.Data.Value;
                                console.log('收到text消息，内容:', reply);

                                // 将text类型消息推送到服务器，由数字人服务通过TTS合成语音并播放
                                // 使用原始的消息类型，而不是固定的echo
                                var originalType = messageData.Data.Type || 'echo';
                                fetch('/human', {
                                    body: JSON.stringify({
                                        text: reply,
                                        type: originalType,
                                        interrupt: true,
                                        sessionid: parseInt(document.getElementById('sessionid').value),
                                    }),
                                    headers: {
                                        'Content-Type': 'application/json'
                                    },
                                    method: 'POST'
                                }).then(response => response.json()).then(data => {
                                    console.log('/human接口响应(文本消息):', data);
                                    if (data.code !== 0) {
                                        console.error('服务器处理失败:', data.message || data.msg);
                                    }
                                    // 所有消息显示都通过WebSocket推送，不再从HTTP响应获取数据
                                }).catch(error => {
                                    console.error('发送文本消息错误:', error);
                                    addMessage(`网络错误: ${error.message}`, 'left', '系统错误', 'error');
                                });
                              }else if (messageData.Data.Key == "plaintext") {
                                // 处理纯文本消息类型
                                var textContent = messageData.Data.Value;
                                console.log('收到纯文本消息:', textContent);

                                // 使用浏览器的语音合成API进行本地语音合成
                                if (window.speechSynthesis) {
                                    console.log('使用本地语音合成播放文本:', textContent);
                                    var utterance = new SpeechSynthesisUtterance(textContent);
                                    utterance.lang = 'zh-CN'; // 设置语言为中文
                                    utterance.rate = 1.0;     // 设置语速
                                    utterance.pitch = 1.0;    // 设置音高
                                    utterance.volume = 1.0;   // 设置音量
                                    speechSynthesis.speak(utterance);
                                }
                              }
               }

          };

          ws.onclose = function(e) {
              console.log('WebSocket connection closed');

              // 在连接关闭前发送WSA注销消息到主服务
              if (ws.readyState === WebSocket.OPEN) {
                //   try {
                //       var wsaUnregisterMessage = {
                //           type: 'wsa_unregister_web',
                //           username: getTemporaryUsername(),
                //           timestamp: Date.now()
                //       };
                //       console.log('发送WSA注销消息到主服务:', wsaUnregisterMessage);
                //       ws.send(JSON.stringify(wsaUnregisterMessage));
                //   } catch (error) {
                //       console.error('发送WSA注销消息失败:', error);
                //   }
                console.debug('close触发:',Date.now());
              }

              updateConnectionStatus('disconnected', 'WebSocket连接已断开，正在重连...');
              attemptReconnect();
          };

          ws.onerror = function(e) {
              console.error('WebSocket error:', e);
              updateConnectionStatus('error', 'WebSocket连接错误，正在重连...');
              ws.close(); // 关闭连接并尝试重连
          };
      }

      function attemptReconnect() {
          if (isReconnecting) return; // 防止多次重连

          isReconnecting = true;
          reconnectAttempts++;

          // 使用指数退避算法计算下一次重连间隔
          var currentInterval = Math.min(reconnectInterval * Math.pow(1.5, reconnectAttempts - 1), maxReconnectInterval);

          console.log('Attempting to reconnect... (Attempt ' + reconnectAttempts + ', 间隔: ' + currentInterval/1000 + '秒)');

          if(document.getElementById('is_open') && parseInt(document.getElementById('is_open').value) == 1){
            stop()
          }

          setTimeout(function() {
              isReconnecting = false;
              connectWebSocket();
          }, currentInterval);
      }

      // 连接状态管理功能 - 将函数挂载到window对象，使其全局可访问
      window.updateConnectionStatus = function(status, message) {
          const statusAlert = document.getElementById('connection-status-alert');
          const statusText = document.getElementById('connection-status-text');

          if (statusAlert && statusText) {
              statusAlert.style.display = 'block';
              statusText.textContent = message || status;

              // 根据状态设置不同的样式
              statusAlert.className = 'alert';
              switch(status) {
                  case 'connecting':
                      statusAlert.classList.add('alert-warning');
                      break;
                  case 'connected':
                      statusAlert.classList.add('alert-success');
                      break;
                  case 'error':
                  case 'failed':
                      statusAlert.classList.add('alert-danger');
                      break;
                  case 'disconnected':
                      statusAlert.classList.add('alert-secondary');
                      break;
                  default:
                      statusAlert.classList.add('alert-info');
              }
          }
      }

      // SessionId管理功能 - 将函数挂载到window对象，使其全局可访问
      window.saveSessionId = function(sessionId) {
          localStorage.setItem('currentSessionId', sessionId);
          var currentSessionElement = document.getElementById('current-sessionid');
          currentSessionElement.value = sessionId;
          currentSessionElement.placeholder = ''; // 清除placeholder，确保显示sessionId
          console.log('SessionId已保存到本地存储:', sessionId);
          updateConnectionStatus('connected', `已连接 (会话ID: ${sessionId})`);
      }

      window.restoreSessionId = function() {
          var savedSessionId = localStorage.getItem('currentSessionId');
          var currentSessionId = document.getElementById('sessionid').value;

          // 只有在当前没有有效sessionId时才恢复
          if (savedSessionId && savedSessionId !== '0' && (!currentSessionId || currentSessionId === '0')) {
              document.getElementById('sessionid').value = savedSessionId;
              document.getElementById('current-sessionid').value = savedSessionId;
              console.log('已恢复SessionId:', savedSessionId);
              return savedSessionId;
          }
          return null;
      }

      window.clearSessionId = function() {
          localStorage.removeItem('currentSessionId');
          document.getElementById('sessionid').value = '0';
          document.getElementById('current-sessionid').value = '';
          document.getElementById('current-sessionid').placeholder = '未连接';
          updateConnectionStatus('disconnected', '会话已重置，请重新连接');
          console.log('SessionId已清除');
      }

      // 绑定重置会话按钮事件
       document.getElementById('clear-session-btn').addEventListener('click', function() {
           if (confirm('确定要重置会话ID吗？这将断开当前连接并清除会话记录。')) {
               // 清除sessionId
               clearSessionId();

               // 断开WebSocket连接
               if (ws && ws.readyState === WebSocket.OPEN) {
                   ws.close();
               }

               // 停止WebRTC连接
               if (typeof stop === 'function') {
                   stop();
               }

               console.log('会话已重置，可以重新连接');
               alert('会话已重置，请重新点击"开始"按钮建立新连接');
           }
       });

       // 音频文件上传功能初始化
       function initAudioFileUpload() {
           const audioFileInput = document.getElementById('audio-file-input');
           const uploadAudioBtn = document.getElementById('upload-audio-btn');

           // 监听文件选择事件
           audioFileInput.addEventListener('change', function(event) {
               const files = event.target.files;
               if (files && files.length > 0) {
                   // 有文件选择时启用上传按钮
                   uploadAudioBtn.disabled = false;
                   console.log('已选择音频文件:', files.length + '个文件');
               } else {
                   // 没有文件时禁用上传按钮
                   uploadAudioBtn.disabled = true;
               }
           });

           // 监听上传按钮点击事件
           uploadAudioBtn.addEventListener('click', function() {
               const files = audioFileInput.files;
               if (!files || files.length === 0) {
                   alert('请先选择音频文件');
                   return;
               }

               // 处理每个选择的文件
               Array.from(files).forEach((file, index) => {
                   uploadAudioFile(file, index);
               });
           });
       }

       // 上传音频文件到后台进行识别
       function uploadAudioFile(file, index) {
           console.log('开始上传音频文件:', file.name);

           // 获取选择的ASR服务类型
           const asrServiceType = document.getElementById('asr-service-type').value;
           console.log('使用ASR服务类型:', asrServiceType);

           // 创建FormData对象
           const formData = new FormData();
           formData.append('audio', file);
           // 获取当前sessionid
           const sessionid = document.getElementById('sessionid').value || '0';
           formData.append('sessionid', sessionid);
           // 添加ASR服务类型参数
           formData.append('asr_service', asrServiceType);

           // 显示上传状态
           const uploadBtn = document.getElementById('upload-audio-btn');
           const originalText = uploadBtn.textContent;
           uploadBtn.textContent = '上传中...';
           uploadBtn.disabled = true;

           // 发送到/humanaudio接口
           fetch('/humanaudio', {
               method: 'POST',
               body: formData
           })
           .then(response => response.json())
           .then(data => {
               console.log('音频文件上传响应:', data);
               if (data.code === 0) {
                   console.log('音频文件上传成功:', file.name);
                   // 显示成功消息
                   addMessage(`音频文件 "${file.name}" 已上传，正在识别中...`, 'right', '用户', 'audio');
               } else {
                   console.error('音频文件上传失败:', data.message || data.msg);
                   alert('音频文件上传失败: ' + (data.message || data.msg || '未知错误'));
               }
           })
           .catch(error => {
               console.error('音频文件上传错误:', error);
               alert('音频文件上传错误: ' + error.message);
           })
           .finally(() => {
               // 恢复按钮状态
               uploadBtn.textContent = originalText;
               uploadBtn.disabled = false;

               // 清空文件选择
               document.getElementById('audio-file-input').value = '';
               uploadBtn.disabled = true; // 重新禁用按钮，等待下次文件选择
           });
       }

       // 页面初始化时尝试恢复sessionId（仅在没有当前sessionId时）
       setTimeout(function() {
           var currentSessionId = document.getElementById('sessionid').value;
           if (!currentSessionId || currentSessionId === '0') {
               var restoredSessionId = restoreSessionId();

               // 如果恢复了sessionId，尝试重新连接WebSocket
               if (restoredSessionId && typeof connectWebSocket === 'function') {
                   console.log('检测到已保存的SessionId，尝试重新连接WebSocket...');
                   connectWebSocket();
               }
           }
       }, 500);

       // 初始化ASR功能
        // initASRFunctionality(); // 暂时注释掉，避免函数未定义错误

        // 初始化服务端录音功能
        initServerRecordingFunctionality();

        // 初始化状态显示
        initStatusDisplay();

        // 初始化音频文件上传功能
        initAudioFileUpload();

      // WSA命令处理函数
      function handleWSACommand(data) {
          console.log('处理WSA命令:', data);

          // 根据命令类型执行相应操作
          switch(data.command) {
              case 'status_update':
                  console.log('状态更新命令:', data.data);
                  break;
              case 'broadcast':
                  console.log('广播命令:', data.data);
                  // 可以在这里处理广播消息，比如显示系统通知
                  if (data.data && data.data.message) {
                      addMessage(data.data.message, 'left', 'WSA系统', 'system');
                  }
                  break;
              case 'control':
                  console.log('控制命令:', data.data);
                  // 处理控制命令，如暂停、继续等
                  break;
              default:
                  console.log('未知WSA命令:', data.command);
          }
      }

      // 注意：WebSocket连接现在由WebRTC连接建立后触发
      // connectWebSocket(); // 移除自动连接，改为在获得sessionid后连接

      // 加载聊天记录
      loadChatHistory();

      // 添加页面可见性变化监听，当页面从隐藏变为可见时尝试重连
      document.addEventListener('visibilitychange', function() {
          if (document.visibilityState === 'visible') {
              // 页面变为可见状态，检查WebSocket连接
              if (!ws || ws.readyState === WebSocket.CLOSED || ws.readyState === WebSocket.CLOSING) {
                  console.log('页面可见，检测到WebSocket未连接，尝试重连...');
                  // 重置重连计数和间隔，立即尝试重连
                  reconnectAttempts = 0;
                  reconnectInterval = 5000;
                  connectWebSocket();
              }
          }
      });
    });
</script>
</body>
</html>