Spaces:

samlax12
/

agent

Running

App Files Files Community

samlax12 commited on Mar 29

Commit

707fdf3

verified ·

1 Parent(s): 2d52ac2

Create student.html

Browse files

Files changed (1) hide show

templates/student.html +1382 -0

templates/student.html ADDED Viewed

	@@ -0,0 +1,1382 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI学习助手</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+    <!-- KaTeX 用于渲染数学公式 -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">
+    <!-- Highlight.js 样式 -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        :root {
+            /* 主要配色 */
+            --primary-color: #0f2d49;
+            --primary-light: #234a70;
+            --secondary-color: #4a6cfd;
+            --secondary-light: #7b91ff;
+            --tertiary-color: #f7f9fe;
+            /* 功能颜色 */
+            --success-color: #10b981;
+            --success-light: #d1fae5;
+            --warning-color: #f59e0b;
+            --warning-light: #fef3c7;
+            --danger-color: #ef4444;
+            --danger-light: #fee2e2;
+            --info-color: #3b82f6;
+            --info-light: #dbeafe;
+            /* 中性色 */
+            --neutral-50: #f9fafb;
+            --neutral-100: #f3f4f6;
+            --neutral-200: #e5e7eb;
+            --neutral-300: #d1d5db;
+            --neutral-400: #9ca3af;
+            --neutral-500: #6b7280;
+            --neutral-600: #4b5563;
+            --neutral-700: #374151;
+            --neutral-800: #1f2937;
+            --neutral-900: #111827;
+            /* 界面元素 */
+            --border-radius-sm: 0.25rem;
+            --border-radius: 0.375rem;
+            --border-radius-lg: 0.5rem;
+            --border-radius-xl: 0.75rem;
+            --border-radius-xxl: 1rem;
+            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+            --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+            --transition-base: all 0.2s ease-in-out;
+            --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            --font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+        }
+        body {
+            font-family: var(--font-family);
+            margin: 0;
+            padding: 0;
+            height: 100vh;
+            background-color: var(--neutral-50);
+            color: var(--neutral-800);
+            display: flex;
+            flex-direction: column;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        /* 头部样式 */
+        .header {
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            color: white;
+            padding: 1rem 1.5rem;
+            box-shadow: var(--shadow-md);
+            position: relative;
+            z-index: 10;
+        }
+        .header-content {
+            max-width: 1600px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .header h1 {
+            margin: 0;
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: white;
+            display: flex;
+            align-items: center;
+        }
+        .header h1 i {
+            margin-right: 0.75rem;
+            color: rgba(255, 255, 255, 0.8);
+        }
+        .header .badge {
+            background-color: rgba(255, 255, 255, 0.15);
+            color: white;
+            font-weight: 500;
+            padding: 0.35em 0.75em;
+            font-size: 0.85rem;
+            border-radius: 9999px;
+        }
+        /* 主容器样式 */
+        .main-container {
+            flex: 1;
+            display: flex;
+            max-width: 1600px;
+            margin: 0 auto;
+            padding: 1.5rem;
+            width: 100%;
+            box-sizing: border-box;
+            height: calc(100vh - 70px); /* Header height + padding */
+            overflow: hidden;
+        }
+        .chat-container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background-color: white;
+            border-radius: var(--border-radius-xl);
+            box-shadow: var(--shadow);
+            overflow: hidden;
+            height: 100%;
+            max-width: 800px;
+            margin: 0 auto;
+            transition: var(--transition-smooth);
+            position: relative;
+        }
+        /* 聊天对话区域样式 */
+        .chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            background-color: var(--neutral-50);
+            gap: 1rem;
+            scroll-behavior: smooth;
+        }
+        /* 自定义滚动条 */
+        .chat-messages::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+        .chat-messages::-webkit-scrollbar-track {
+            background: var(--neutral-100);
+            border-radius: 10px;
+        }
+        .chat-messages::-webkit-scrollbar-thumb {
+            background: var(--neutral-300);
+            border-radius: 10px;
+        }
+        .chat-messages::-webkit-scrollbar-thumb:hover {
+            background: var(--neutral-400);
+        }
+        /* 消息气泡样式 */
+        .message {
+            max-width: 85%;
+            border-radius: var(--border-radius-lg);
+            padding: 1rem;
+            position: relative;
+            line-height: 1.5;
+            box-shadow: var(--shadow-sm);
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+            hyphens: auto;
+        }
+        .message .message-content {
+            padding: 0 10px;
+            margin: 0;
+        }
+        .user-message {
+            background: linear-gradient(135deg, #e9f5ff, #c2e4ff);
+            align-self: flex-end;
+            color: var(--primary-color);
+            border-bottom-right-radius: 0.2rem;
+            border-left: 1px solid rgba(74, 108, 253, 0.1);
+            border-top: 1px solid rgba(255, 255, 255, 0.5);
+        }
+        .bot-message {
+            background-color: white;
+            align-self: flex-start;
+            color: var(--neutral-800);
+            border-bottom-left-radius: 0.2rem;
+            border-left: 3px solid var(--secondary-color);
+            box-shadow: var(--shadow);
+        }
+        /* 输入区域样式 */
+        .input-container {
+            padding: 1rem 1.5rem;
+            border-top: 1px solid var(--neutral-200);
+            background-color: white;
+            position: relative;
+        }
+        .input-row {
+            display: flex;
+            gap: 0.75rem;
+            position: relative;
+        }
+        .input-field {
+            flex: 1;
+            padding: 0.85rem 1rem;
+            border: 1px solid var(--neutral-200);
+            border-radius: var(--border-radius-lg);
+            resize: none;
+            font-size: 0.95rem;
+            box-shadow: var(--shadow-inner);
+            transition: var(--transition-base);
+        }
+        .input-field:focus {
+            outline: none;
+            border-color: var(--secondary-color);
+            box-shadow: 0 0 0 3px rgba(74, 108, 253, 0.15);
+        }
+        .send-button {
+            padding: 0 1.25rem;
+            background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
+            color: white;
+            border: none;
+            border-radius: var(--border-radius-lg);
+            cursor: pointer;
+            font-weight: 500;
+            transition: var(--transition-base);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .send-button:hover {
+            box-shadow: 0 4px 10px rgba(74, 108, 253, 0.25);
+            transform: translateY(-1px);
+        }
+        .send-button:disabled {
+            background: var(--neutral-300);
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        /* 插件容器样式 */
+        .plugin-container {
+            display: none;
+            flex-direction: column;
+            background-color: white;
+            border-radius: var(--border-radius-xl);
+            box-shadow: var(--shadow);
+            overflow: hidden;
+            height: 100%;
+            flex: 2;
+            margin-left: 1.5rem;
+            transition: var(--transition-smooth);
+        }
+        .plugin-header {
+            padding: 0.85rem 1.25rem;
+            border-bottom: 1px solid var(--neutral-200);
+            background-color: var(--neutral-50);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .plugin-title {
+            margin: 0;
+            font-size: 1rem;
+            font-weight: 600;
+            color: var(--primary-color);
+            display: flex;
+            align-items: center;
+        }
+        .plugin-title i {
+            margin-right: 0.5rem;
+            color: var(--secondary-color);
+        }
+        .plugin-close {
+            width: 32px;
+            height: 32px;
+            background: var(--neutral-100);
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+            font-size: 0.85rem;
+            color: var(--neutral-700);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: var(--transition-base);
+        }
+        .plugin-close:hover {
+            background-color: var(--neutral-200);
+            color: var(--neutral-900);
+        }
+        .plugin-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 0;
+            background-color: var(--neutral-50);
+        }
+        /* 当插件激活时的样式 */
+        .main-container.with-plugin .chat-container {
+            max-width: 380px;
+            margin: 0;
+        }
+        /* 代码块样式 */
+        pre {
+            margin: 1rem 0;
+            padding: 1rem;
+            background-color: var(--neutral-800);
+            border-radius: var(--border-radius);
+            overflow-x: auto;
+            position: relative;
+        }
+        pre code {
+            font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+            font-size: 0.9rem;
+            color: #e5e7eb;
+            padding: 0;
+            background: none;
+        }
+        .copy-button {
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            padding: 0.25rem 0.5rem;
+            background-color: rgba(255, 255, 255, 0.1);
+            color: rgba(255, 255, 255, 0.6);
+            border: none;
+            border-radius: var(--border-radius-sm);
+            font-size: 0.75rem;
+            cursor: pointer;
+            transition: var(--transition-base);
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+        }
+        .copy-button:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+            color: rgba(255, 255, 255, 0.9);
+        }
+        /* 代码执行结果样式 */
+        .code-result {
+            margin-top: 0.5rem;
+            padding: 0.75rem;
+            background-color: var(--neutral-900);
+            border-radius: var(--border-radius);
+            color: white;
+            font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+            font-size: 0.85rem;
+            white-space: pre-wrap;
+        }
+        /* 内联代码样式 */
+        code:not(pre code) {
+            font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+            font-size: 0.9em;
+            color: var(--primary-color);
+            background-color: var(--neutral-100);
+            padding: 0.2em 0.4em;
+            border-radius: 3px;
+        }
+        /* 参考资料样式 */
+        .reference-container {
+            margin-top: 1rem;
+            border-top: 1px dashed var(--neutral-300);
+            padding-top: 0.75rem;
+        }
+        .reference-toggle {
+            color: var(--neutral-600);
+            font-size: 0.85rem;
+            font-weight: 500;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            transition: var(--transition-base);
+        }
+        .reference-toggle:hover {
+            color: var(--secondary-color);
+        }
+        .reference-toggle i {
+            margin-right: 0.35rem;
+            font-size: 0.9rem;
+        }
+        .reference-content {
+            display: none;
+            margin-top: 0.75rem;
+            padding: 0.75rem;
+            background-color: var(--neutral-100);
+            border-radius: var(--border-radius);
+            font-size: 0.85rem;
+        }
+        .reference-item {
+            margin-bottom: 0.75rem;
+            padding-bottom: 0.75rem;
+            border-bottom: 1px solid var(--neutral-200);
+        }
+        .reference-item:last-child {
+            margin-bottom: 0;
+            padding-bottom: 0;
+            border-bottom: none;
+        }
+        .reference-item-source {
+            color: var(--neutral-600);
+            font-size: 0.8rem;
+            margin-top: 0.25rem;
+        }
+        /* 欢迎消息样式 */
+        .welcome-message {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            margin-bottom: 1.5rem;
+        }
+        .welcome-icon {
+            width: 64px;
+            height: 64px;
+            background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 1rem;
+            color: white;
+            font-size: 2rem;
+            box-shadow: 0 4px 12px rgba(74, 108, 253, 0.25);
+        }
+        .welcome-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: var(--primary-color);
+        }
+        .welcome-description {
+            color: var(--neutral-700);
+            max-width: 400px;
+            margin-bottom: 0;
+        }
+        /* 思维导图和可视化插件内容样式 */
+        .visualization-result, .mindmap-result {
+            padding: 1.5rem;
+            text-align: center;
+        }
+        .visualization-image, .mindmap-image {
+            max-width: 100%;
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow);
+        }
+        /* 响应式样式 */
+        @media (max-width: 1200px) {
+            .main-container.with-plugin .chat-container {
+                max-width: 320px;
+            }
+        }
+        @media (max-width: 992px) {
+            .main-container {
+                flex-direction: column;
+                padding: 1rem;
+            }
+            .main-container.with-plugin .chat-container {
+                max-width: 100%;
+                margin-bottom: 1rem;
+                height: 40vh;
+            }
+            .plugin-container {
+                margin-left: 0;
+                height: calc(60vh - 32px);
+            }
+        }
+        @media (max-width: 768px) {
+            .main-container {
+                padding: 0.75rem;
+            }
+            .message {
+                max-width: 95%;
+            }
+        }
+        /* 增强的卡塔赫和Markdown样式 */
+        .katex {
+            font-size: 1.1em;
+        }
+        .message h1, .message h2, .message h3,
+        .message h4, .message h5, .message h6 {
+            margin-top: 1em;
+            margin-bottom: 0.5em;
+            line-height: 1.3;
+        }
+        .message h1 {
+            font-size: 1.6em;
+            border-bottom: 1px solid var(--neutral-200);
+            padding-bottom: 0.3em;
+        }
+        .message h2 {
+            font-size: 1.4em;
+            border-bottom: 1px solid var(--neutral-200);
+            padding-bottom: 0.3em;
+        }
+        .message h3 {
+            font-size: 1.2em;
+        }
+        .message h4 {
+            font-size: 1.1em;
+        }
+        .message h5, .message h6 {
+            font-size: 1em;
+        }
+        .message p {
+            margin: 0.5em 0;
+        }
+        .message ul, .message ol {
+            margin: 0.5em 0;
+            padding-left: 1.5em;
+        }
+        .message li {
+            margin: 0.25em 0;
+        }
+        .message blockquote {
+            margin: 0.5em 0;
+            padding-left: 1em;
+            border-left: 4px solid var(--neutral-300);
+            color: var(--neutral-700);
+        }
+        .message img {
+            max-width: 100%;
+            border-radius: var(--border-radius);
+        }
+        .message table {
+            border-collapse: collapse;
+            margin: 1em 0;
+            width: 100%;
+        }
+        .message table th,
+        .message table td {
+            border: 1px solid var(--neutral-300);
+            padding: 0.5em;
+        }
+        .message table th {
+            background-color: var(--neutral-100);
+            font-weight: 600;
+        }
+        .message table tr:nth-child(even) {
+            background-color: var(--neutral-50);
+        }
+        /* 动画效果 */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .message {
+            animation: fadeIn 0.3s ease forwards;
+        }
+        /* 输入提示区域 */
+        .input-suggestions {
+            position: absolute;
+            bottom: 100%;
+            left: 0;
+            right: 0;
+            background-color: white;
+            border-top-left-radius: var(--border-radius-lg);
+            border-top-right-radius: var(--border-radius-lg);
+            box-shadow: var(--shadow-md);
+            padding: 0.75rem;
+            display: none;
+            border: 1px solid var(--neutral-200);
+            border-bottom: none;
+        }
+        .suggestion-title {
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--neutral-700);
+            margin-bottom: 0.5rem;
+        }
+        .suggestion-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+        .suggestion-button {
+            padding: 0.5rem 0.75rem;
+            background-color: var(--neutral-100);
+            border: 1px solid var(--neutral-200);
+            border-radius: var(--border-radius);
+            font-size: 0.85rem;
+            color: var(--neutral-800);
+            cursor: pointer;
+            transition: var(--transition-base);
+        }
+        .suggestion-button:hover {
+            background-color: var(--secondary-light);
+            color: white;
+            border-color: var(--secondary-light);
+        }
+        /* 打字机效果 */
+        .typing-indicator {
+            display: inline-block;
+            margin-left: 5px;
+        }
+        .typing-dot {
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background-color: var(--neutral-500);
+            margin-right: 3px;
+            animation: typingDot 1.4s infinite ease-in-out;
+        }
+        .typing-dot:nth-child(1) { animation-delay: 0s; }
+        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
+        .typing-dot:nth-child(3) { animation-delay: 0.4s; }
+        @keyframes typingDot {
+            0%, 60%, 100% { transform: translateY(0); }
+            30% { transform: translateY(-5px); }
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="header-content">
+            <h1><i class="bi bi-mortarboard"></i> {{ agent_name }}</h1>
+            <div>
+                <span class="badge">AI学习助手</span>
+            </div>
+        </div>
+    </header>
+    <div class="main-container" id="main-container">
+        <div class="chat-container">
+            <div class="chat-messages" id="chat-messages">
+                <div class="welcome-message">
+                    <div class="welcome-icon">
+                        <i class="bi bi-robot"></i>
+                    </div>
+                    <h2 class="welcome-title">欢迎使用 {{ agent_name }}</h2>
+                    {% if agent_description %}
+                    <p class="welcome-description">{{ agent_description }}</p>
+                    {% else %}
+                    <p class="welcome-description">我是您的AI学习助手，有任何问题都可以随时向我提问</p>
+                    {% endif %}
+                </div>
+                <div class="message bot-message">
+                    <div class="message-content">
+                        <p>您好！我是{{ agent_name }}，很高兴能够帮助您学习。请问有什么我可以协助您的问题吗？</p>
+                    </div>
+                </div>
+            </div>
+            <div class="input-container">
+                <div class="input-suggestions" id="input-suggestions">
+                    <div class="suggestion-title">推荐问题：</div>
+                    <div class="suggestion-buttons">
+                        <button class="suggestion-button">介绍一下这门课程的主要内容</button>
+                        <button class="suggestion-button">这门课程有哪些重点知识？</button>
+                        <button class="suggestion-button">请给我一些学习建议</button>
+                    </div>
+                </div>
+                <div class="input-row">
+                    <textarea class="input-field" id="user-input" placeholder="输入您的问题..." rows="2"></textarea>
+                    <button class="send-button" id="send-button">
+                        <i class="bi bi-send"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- 代码执行插件 -->
+        <div class="plugin-container code-plugin" id="code-plugin">
+            <div class="plugin-header">
+                <h3 class="plugin-title"><i class="bi bi-code-square"></i> Python代码执行</h3>
+                <button class="plugin-close" id="close-code-plugin">
+                    <i class="bi bi-x-lg"></i>
+                </button>
+            </div>
+            <div class="plugin-content">
+                <iframe id="code-execution-frame" src="" style="width: 100%; height: 100%; border: none;"></iframe>
+            </div>
+        </div>
+        <!-- 3D可视化插件 -->
+        <div class="plugin-container visualization-plugin" id="visualization-plugin">
+            <div class="plugin-header">
+                <h3 class="plugin-title"><i class="bi bi-graph-up"></i> 3D可视化</h3>
+                <button class="plugin-close" id="close-visualization-plugin">
+                    <i class="bi bi-x-lg"></i>
+                </button>
+            </div>
+            <div class="plugin-content">
+                <div class="visualization-result" id="visualization-result">
+                    <div class="text-center py-4">
+                        <div class="spinner-border text-primary" role="status">
+                            <span class="visually-hidden">加载中...</span>
+                        </div>
+                        <p class="mt-3">正在准备3D可视化...</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 思维导图插件 -->
+        <div class="plugin-container mindmap-plugin" id="mindmap-plugin">
+            <div class="plugin-header">
+                <h3 class="plugin-title"><i class="bi bi-diagram-3"></i> 思维导图</h3>
+                <button class="plugin-close" id="close-mindmap-plugin">
+                    <i class="bi bi-x-lg"></i>
+                </button>
+            </div>
+            <div class="plugin-content">
+                <div class="mindmap-result" id="mindmap-result">
+                    <div class="text-center py-4">
+                        <div class="spinner-border text-primary" role="status">
+                            <span class="visually-hidden">加载中...</span>
+                        </div>
+                        <p class="mt-3">正在生成思维导图...</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it.min.js"></script>
+    <script>
+        // 全局变量
+        const agentId = "{{ agent_id }}";
+        const token = "{{ token }}";
+        let executionContext = null;
+        const mainContainer = document.getElementById('main-container');
+        let isTyping = false;
+        // DOM元素
+        const chatMessages = document.getElementById('chat-messages');
+        const userInput = document.getElementById('user-input');
+        const sendButton = document.getElementById('send-button');
+        // 代码执行插件元素
+        const codePlugin = document.getElementById('code-plugin');
+        const closeCodePlugin = document.getElementById('close-code-plugin');
+        const codeExecutionFrame = document.getElementById('code-execution-frame');
+        // 3D可视化插件元素
+        const visualizationPlugin = document.getElementById('visualization-plugin');
+        const closeVisualizationPlugin = document.getElementById('close-visualization-plugin');
+        const visualizationResult = document.getElementById('visualization-result');
+        // 思维导图插件元素
+        const mindmapPlugin = document.getElementById('mindmap-plugin');
+        const closeMindmapPlugin = document.getElementById('close-mindmap-plugin');
+        const mindmapResult = document.getElementById('mindmap-result');
+        // 输入建议
+        const inputSuggestions = document.getElementById('input-suggestions');
+        // Markdown-it 实例
+        const md = window.markdownit({
+            html: false,
+            linkify: true,
+            typographer: true,
+            breaks: true,
+            highlight: function (str, lang) {
+                if (lang && hljs.getLanguage(lang)) {
+                    try {
+                        const highlighted = hljs.highlight(str, { language: lang }).value;
+                        return `<pre><code class="hljs language-${lang}">${highlighted}</code><button class="copy-button" onclick="copyToClipboard(this)"><i class="bi bi-clipboard"></i> 复制</button></pre>`;
+                    } catch (__) {}
+                }
+                return `<pre><code class="hljs">${md.utils.escapeHtml(str)}</code><button class="copy-button" onclick="copyToClipboard(this)"><i class="bi bi-clipboard"></i> 复制</button></pre>`;
+            }
+        });
+        // 页面加载完成后执行
+        document.addEventListener('DOMContentLoaded', function() {
+            // 初始化发送按钮事件
+            sendButton.addEventListener('click', sendMessage);
+            // 初始化输入框回车事件
+            userInput.addEventListener('keydown', function(e) {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    sendMessage();
+                }
+            });
+            // 初始化问题建议按钮
+            document.querySelectorAll('.suggestion-button').forEach(button => {
+                button.addEventListener('click', function() {
+                    userInput.value = this.textContent;
+                    sendMessage();
+                });
+            });
+            // 初始化插件关闭事件
+            closeCodePlugin.addEventListener('click', () => {
+                codePlugin.style.display = 'none';
+                // 清空iframe源以停止任何运行中的代码
+                codeExecutionFrame.src = '';
+                updateMainContainerLayout();
+            });
+            closeVisualizationPlugin.addEventListener('click', () => {
+                visualizationPlugin.style.display = 'none';
+                updateMainContainerLayout();
+            });
+            closeMindmapPlugin.addEventListener('click', () => {
+                mindmapPlugin.style.display = 'none';
+                updateMainContainerLayout();
+            });
+            // 焦点事件
+            userInput.addEventListener('focus', function() {
+                // inputSuggestions.style.display = 'block';
+            });
+            userInput.addEventListener('blur', function(e) {
+                // 延迟执行，以便点击建议按钮事件先触发
+                setTimeout(() => {
+                    // inputSuggestions.style.display = 'none';
+                }, 100);
+            });
+        });
+        // 更新主容器布局
+        function updateMainContainerLayout() {
+            // 检查是否有任何插件处于显示状态
+            const isAnyPluginVisible =
+                codePlugin.style.display === 'flex' ||
+                visualizationPlugin.style.display === 'flex' ||
+                mindmapPlugin.style.display === 'flex';
+            // 更新主容器类名
+            if (isAnyPluginVisible) {
+                mainContainer.classList.add('with-plugin');
+            } else {
+                mainContainer.classList.remove('with-plugin');
+            }
+        }
+        // 发送消息
+        async function sendMessage() {
+            const message = userInput.value.trim();
+            if (!message || isTyping) return;
+            // 添加用户消息
+            addMessage(message, true);
+            // 清空输入框
+            userInput.value = '';
+            // 禁用发送按钮
+            sendButton.disabled = true;
+            isTyping = true;
+            // 添加机器人正在输入的指示
+            const typingIndicator = addTypingIndicator();
+            try {
+                // 发送请求
+                const response = await fetch(`/api/student/chat/${agentId}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        message: message,
+                        token: token
+                    })
+                });
+                const data = await response.json();
+                // 移除输入指示器
+                if (typingIndicator) {
+                    typingIndicator.remove();
+                }
+                if (data.success) {
+                    // 处理回复内容，移除参考来源部分
+                    const processedContent = processResponseContent(data.message);
+                    // 添加机器人回复
+                    const messageElement = addMessage(processedContent, false);
+                    // 添加参考信息（如果有）
+                    if (data.references && data.references.length > 0) {
+                        addReferences(messageElement, data.references);
+                    }
+                    // 检查是否需要显示工具
+                    if (data.tools && data.tools.length > 0) {
+                        // 隐藏所有插件
+                        hideAllPlugins();
+                        // 使用新的插件激活函数
+                        activatePlugins(data.message, data.tools);
+                    }
+                } else {
+                    // 添加错误消息
+                    addMessage(`错误: ${data.message}`, false);
+                }
+            } catch (error) {
+                console.error('发送请求出错:', error);
+                // 移除输入指示器
+                if (typingIndicator) {
+                    typingIndicator.remove();
+                }
+                addMessage('发送请求时出错，请重试', false);
+            } finally {
+                // 恢复发送按钮
+                sendButton.disabled = false;
+                isTyping = false;
+            }
+        }
+        // 添加打字指示器
+        function addTypingIndicator() {
+            const botMessage = document.createElement('div');
+            botMessage.className = 'message bot-message';
+            const content = document.createElement('div');
+            content.className = 'message-content';
+            content.innerHTML = `
+                <p>
+                    <span class="typing-indicator">
+                        <span class="typing-dot"></span>
+                        <span class="typing-dot"></span>
+                        <span class="typing-dot"></span>
+                    </span>
+                </p>
+            `;
+            botMessage.appendChild(content);
+            chatMessages.appendChild(botMessage);
+            // 滚动到底部
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            return botMessage;
+        }
+        // 处理回复内容，移除参考来源部分
+        function processResponseContent(content) {
+            // 移除 "===参考来源开始===" 到 "===参考来源结束===" 之间的内容
+            return content.replace(/===参考来源开始===[\s\S]*?===参考来源结束===/, '');
+        }
+        // 添加参考信息显示函数
+        function addReferences(messageElement, references) {
+            // 创建参考容器
+            const referenceContainer = document.createElement('div');
+            referenceContainer.className = 'reference-container';
+            // 创建参考切换按钮
+            const toggleButton = document.createElement('div');
+            toggleButton.className = 'reference-toggle';
+            toggleButton.innerHTML = '<i class="bi bi-journal-text"></i> 参考来源';
+            // 创建参考内容
+            const referenceContent = document.createElement('div');
+            referenceContent.className = 'reference-content';
+            // 添加参考项
+            references.forEach(ref => {
+                const refItem = document.createElement('div');
+                refItem.className = 'reference-item';
+                refItem.innerHTML = `
+                    <div><strong>[${ref.index}]</strong> ${ref.summary}</div>
+                    <div class="reference-item-source">来源: ${ref.file_name}</div>
+                `;
+                referenceContent.appendChild(refItem);
+            });
+            // 添加切换功能
+            toggleButton.addEventListener('click', () => {
+                if (referenceContent.style.display === 'block') {
+                    referenceContent.style.display = 'none';
+                    toggleButton.innerHTML = '<i class="bi bi-journal-text"></i> 参考来源';
+                } else {
+                    referenceContent.style.display = 'block';
+                    toggleButton.innerHTML = '<i class="bi bi-journal-arrow-up"></i> 收起参考来源';
+                }
+            });
+            // 组装并添加到消息
+            referenceContainer.appendChild(toggleButton);
+            referenceContainer.appendChild(referenceContent);
+            messageElement.appendChild(referenceContainer);
+        }
+        // 添加消息函数
+        function addMessage(content, isUser) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = isUser ? 'message user-message' : 'message bot-message';
+            const messageContent = document.createElement('div');
+            messageContent.className = 'message-content';
+            if (isUser) {
+                // 直接显示用户消息，仅替换换行符
+                messageContent.innerHTML = `<p>${content.replace(/\n/g, '<br>')}</p>`;
+            } else {
+                // 使用 Markdown-it 解析机器人消息
+                messageContent.innerHTML = md.render(content);
+                // 渲染LaTeX公式
+                setTimeout(() => {
+                    try {
+                        renderMathInElement(messageContent, {
+                            delimiters: [
+                                {left: '$$', right: '$$', display: true},
+                                {left: '$', right: '$', display: false},
+                                {left: '\\(', right: '\\)', display: false},
+                                {left: '\\[', right: '\\]', display: true}
+                            ],
+                            throwOnError: false
+                        });
+                    } catch (e) {
+                        console.error('渲染LaTeX出错:', e);
+                    }
+                }, 0);
+            }
+            messageDiv.appendChild(messageContent);
+            chatMessages.appendChild(messageDiv);
+            // 滚动到底部
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            return messageDiv;
+        }
+        // 复制代码到剪贴板
+        function copyToClipboard(button) {
+            const codeBlock = button.parentNode.querySelector('code');
+            const text = codeBlock.textContent;
+            navigator.clipboard.writeText(text).then(() => {
+                button.innerHTML = '<i class="bi bi-check"></i> 已复制';
+                setTimeout(() => {
+                    button.innerHTML = '<i class="bi bi-clipboard"></i> 复制';
+                }, 2000);
+            }).catch(err => {
+                console.error('复制失败:', err);
+                button.innerHTML = '<i class="bi bi-exclamation-triangle"></i> 失败';
+                setTimeout(() => {
+                    button.innerHTML = '<i class="bi bi-clipboard"></i> 复制';
+                }, 2000);
+            });
+        }
+        // 隐藏所有插件
+        function hideAllPlugins() {
+            codePlugin.style.display = 'none';
+            visualizationPlugin.style.display = 'none';
+            mindmapPlugin.style.display = 'none';
+            updateMainContainerLayout();
+        }
+        // 提取代码块
+        function extractCodeBlocks(message) {
+            const codeBlocks = [];
+            const codeRegex = /```python\n([\s\S]*?)\n```/g;
+            let match;
+            while ((match = codeRegex.exec(message)) !== null) {
+                codeBlocks.push(match[1]);
+            }
+            return codeBlocks;
+        }
+        // 提取3D可视化函数代码
+        function extract3DVisualizationCode(message) {
+            // 尝试提取函数代码块
+            const codeRegex = /```python\s*(import[\s\S]*?def create_3d_plot\(\):[\s\S]*?return[\s\S]*?})\s*```/i;
+            const match = codeRegex.exec(message);
+            if (match) {
+                return match[1].trim();
+            }
+            return null;
+        }
+        // 提取思维导图内容
+        function extractMindmapContent(message) {
+            // 尝试提取@startmindmap和@endmindmap之间的内容
+            const mindmapRegex = /@startmindmap\n([\s\S]*?)@endmindmap/;
+            const match = mindmapRegex.exec(message);
+            if (match) {
+                return `@startmindmap\n${match[1]}\n@endmindmap`;
+            }
+            return null;
+        }
+        // 激活代码执行插件
+        function activateCodePlugin(message) {
+            // 提取代码块
+            const codeBlocks = extractCodeBlocks(message);
+            if (codeBlocks.length > 0) {
+                const isAlreadyVisible = codePlugin.style.display === 'flex';
+                // 显示插件容器
+                codePlugin.style.display = 'flex';
+                updateMainContainerLayout();
+                // 获取iframe
+                const iframe = document.getElementById('code-execution-frame');
+                // 如果插件已经可见且iframe已加载
+                if (isAlreadyVisible && iframe.contentWindow) {
+                    // 发送新代码到现有iframe
+                    iframe.contentWindow.postMessage({
+                        type: 'setCode',
+                        code: codeBlocks[0]
+                    }, '*');
+                } else {
+                    // 设置iframe源
+                    let src = '/code_execution.html';
+                    if (codeBlocks.length > 0) {
+                        src += `?code=${encodeURIComponent(codeBlocks[0])}`;
+                    }
+                    iframe.src = src;
+                    // 设置iframe加载事件处理程序
+                    iframe.onload = function() {
+                        if (codeBlocks.length > 0) {
+                            iframe.contentWindow.postMessage({
+                                type: 'setCode',
+                                code: codeBlocks[0]
+                            }, '*');
+                        }
+                    };
+                }
+            }
+        }
+        // 激活3D可视化插件
+        function activate3DVisualization(message) {
+            const code = extract3DVisualizationCode(message);
+            if (code) {
+                // 显示插件容器
+                visualizationPlugin.style.display = 'flex';
+                updateMainContainerLayout();
+                // 显示加载状态
+                visualizationResult.innerHTML = `
+                    <div class="text-center py-4">
+                        <div class="spinner-border" style="color: var(--secondary-color);" role="status">
+                            <span class="visually-hidden">生成中...</span>
+                        </div>
+                        <p class="mt-3">正在生成3D图形，请稍候...</p>
+                    </div>
+                `;
+                // 自动生成可视化
+                fetch('/api/visualization/3d-surface', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ code: code })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        // 直接嵌入HTML
+                        visualizationResult.innerHTML = `
+                            <div class="visualization-iframe-container" style="width:100%; height:500px;">
+                                <iframe src="${data.html_url}" style="width:100%; height:100%; border:none;"></iframe>
+                            </div>
+                            <div class="text-center mt-3">
+                                <p>3D图形生成成功</p>
+                                <a href="${data.html_url}" class="btn btn-sm btn-outline-primary" target="_blank">
+                                    <i class="bi bi-arrows-fullscreen"></i> 全屏查看
+                                </a>
+                            </div>
+                        `;
+                    } else {
+                        visualizationResult.innerHTML = `
+                            <div class="alert alert-danger">
+                                <i class="bi bi-exclamation-triangle-fill me-2"></i>
+                                生成失败: ${data.message}
+                            </div>
+                        `;
+                    }
+                })
+                .catch(error => {
+                    console.error('生成3D图形出错:', error);
+                    visualizationResult.innerHTML = `
+                        <div class="alert alert-danger">
+                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
+                            生成3D图形时发生错误，请重试
+                        </div>
+                    `;
+                });
+            }
+        }
+        // 激活思维导图插件
+        function activateMindmap(message) {
+            const content = extractMindmapContent(message);
+            if (content) {
+                // 显示插件容器
+                mindmapPlugin.style.display = 'flex';
+                updateMainContainerLayout();
+                // 显示加载状态
+                mindmapResult.innerHTML = `
+                    <div class="text-center py-4">
+                        <div class="spinner-border" style="color: var(--secondary-color);" role="status">
+                            <span class="visually-hidden">生成中...</span>
+                        </div>
+                        <p class="mt-3">正在生成思维导图，请稍候...</p>
+                    </div>
+                `;
+                // 自动生成思维导图
+                fetch('/api/visualization/mindmap', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ content: content })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        mindmapResult.innerHTML = `
+                            <div class="text-center">
+                                <img src="${data.url}" class="mindmap-image" alt="思维导图">
+                                <p class="mt-3">生成成功！</p>
+                                <a href="${data.url}" class="btn btn-sm btn-outline-primary mt-2" target="_blank">
+                                    <i class="bi bi-download"></i> 下载图片
+                                </a>
+                            </div>
+                        `;
+                    } else {
+                        mindmapResult.innerHTML = `
+                            <div class="alert alert-danger">
+                                <i class="bi bi-exclamation-triangle-fill me-2"></i>
+                                生成失败: ${data.message}
+                            </div>
+                        `;
+                    }
+                })
+                .catch(error => {
+                    console.error('生成思维导图出错:', error);
+                    mindmapResult.innerHTML = `
+                        <div class="alert alert-danger">
+                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
+                            生成思维导图时发生错误，请重试
+                        </div>
+                    `;
+                });
+            }
+        }
+        // 根据消息内容激活适当的插件
+        function activatePlugins(message, tools) {
+            // 检查并激活代码执行插件
+            if (tools.includes('code') && message.includes('```python')) {
+                activateCodePlugin(message);
+            }
+            // 检查并激活3D可视化插件
+            if (tools.includes('visualization') &&
+                (message.includes('def create_3d_plot') ||
+                 message.includes('3D') || message.includes('可视化'))) {
+                activate3DVisualization(message);
+            }
+            // 检查并激活思维导图插件
+            if (tools.includes('mindmap') &&
+                (message.includes('@startmindmap') ||
+                 message.includes('思维导图'))) {
+                activateMindmap(message);
+            }
+        }
+    </script>
+    <!-- 添加highlight.js用于代码高亮 -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/python.min.js"></script>
+</body>
+</html>