Update app/templates/article.html

app/templates/article.html

@@ -1,612 +1,689 @@
-{% extends "base.html" %}
-
-{% block title %}{{ article.title }} - 个人博客{% endblock %}
-
-{% block extra_css %}
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
-<style>
-    /* 文章容器样式 */
-    .article-container {
-        max-width: 900px;
-        margin: 0 auto;
-        background: white;
-        border-radius: 20px;
-        box-shadow: 0 2px 12px rgba(99, 145, 197, 0.08);
-        border: 2px solid var(--light-blue);
-        padding: 2.5rem;
-    }
-
-    /* 文章头部样式 */
-    .article-header {
-        margin-bottom: 2.5rem;
-        padding-bottom: 1.5rem;
-        border-bottom: 1px solid var(--light-blue);
-    }
-
-    .article-title {
-        font-size: 2.5rem;
-        font-weight: 700;
-        color: var(--text-dark);
-        line-height: 1.3;
-        margin-bottom: 1rem;
-        background: linear-gradient(135deg, var(--primary-blue), var(--soft-purple));
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-    }
-
-    .article-meta {
-        display: flex;
-        align-items: center;
-        gap: 1.5rem;
-        color: #64748B;
-    }
-
-    .meta-item {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-
-    .meta-item i {
-        color: var(--primary-blue);
-    }
-
-    /* AI 摘要样式 */
-    .article-summary {
-        background: var(--warm-cream);
-        border-radius: 16px;
-        padding: 1.5rem;
-        margin: 2rem 0;
-        position: relative;
-    }
-
-    .summary-label {
-        position: absolute;
-        top: -12px;
-        left: 16px;
-        background: var(--primary-blue);
-        color: white;
-        padding: 0.25rem 1rem;
-        border-radius: 20px;
-        font-size: 0.875rem;
-        font-weight: 500;
-    }
-
-    /* 文章内容样式 */
-    .article-content {
-        line-height: 1.8;
-        color: var(--text-dark);
-    }
-
-    .markdown-body {
-        font-size: 1.1rem;
-    }
-
-    .markdown-body h1,
-    .markdown-body h2,
-    .markdown-body h3 {
-        color: var(--primary-blue);
-        margin-top: 2em;
-        margin-bottom: 1em;
-        font-weight: 600;
-    }
-
-    .markdown-body p {
-        margin-bottom: 1.5em;
-    }
-
-    .markdown-body a {
-        color: var(--primary-blue);
-        text-decoration: none;
-        border-bottom: 1px dashed var(--light-blue);
-        transition: all 0.3s;
-    }
-
-    .markdown-body a:hover {
-        border-bottom-style: solid;
-        color: var(--soft-purple);
-    }
-
-    .markdown-body code {
-        background: #F8FAFC;
-        padding: 0.2em 0.4em;
-        border-radius: 4px;
-        font-size: 0.9em;
-        color: var(--primary-blue);
-    }
-
-    .markdown-body pre {
-        background: #F8FAFC;
-        border-radius: 12px;
-        padding: 1rem;
-        overflow-x: auto;
-        border: 1px solid var(--light-blue);
-    }
-
-    .markdown-body pre code {
-        background: none;
-        padding: 0;
-        color: inherit;
-    }
-
-    .markdown-body blockquote {
-        border-left: 4px solid var(--light-blue);
-        padding: 0.5rem 0 0.5rem 1rem;
-        margin: 1.5rem 0;
-        color: #64748B;
-        background: #F8FAFC;
-    }
-
-    .markdown-body img {
-        max-width: 100%;
-        border-radius: 12px;
-        margin: 1.5rem 0;
-    }
-
-    /* AI 聊天窗口样式 */
-    .chat-toggle {
-        position: fixed;
-        right: 2rem;
-        bottom: 2rem;
-        width: 56px;
-        height: 56px;
-        border-radius: 28px;
-        background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
-        color: white;
-        border: none;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 1.5rem;
-        box-shadow: 0 4px 12px rgba(99, 145, 197, 0.2);
-        transition: all 0.3s;
-        z-index: 998;
-    }
-
-    .chat-toggle:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 6px 16px rgba(99, 145, 197, 0.3);
-    }
-
-    .chat-window {
-        position: fixed;
-        right: 2rem;
-        bottom: 2rem;
-        width: 380px;
-        height: 600px;
-        background: white;
-        border-radius: 20px;
-        box-shadow: 0 4px 20px rgba(99, 145, 197, 0.15);
-        display: flex;
-        flex-direction: column;
-        transform: scale(0);
-        opacity: 0;
-        transform-origin: bottom right;
-        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-        z-index: 999;
-        border: 1px solid var(--light-blue);
-    }
-
-    .chat-window.active {
-        transform: scale(1);
-        opacity: 1;
-    }
-
-    .chat-header {
-        padding: 1.25rem;
-        background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
-        color: white;
-        border-radius: 20px 20px 0 0;
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-    }
-
-    .chat-title {
-        font-weight: 600;
-        flex: 1;
-    }
-
-    .chat-close {
-        background: none;
-        border: none;
-        color: white;
-        cursor: pointer;
-        width: 32px;
-        height: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 16px;
-        transition: all 0.3s;
-    }
-
-    .chat-close:hover {
-        background: rgba(255, 255, 255, 0.2);
-    }
-
-    .chat-messages {
-        flex: 1;
-        overflow-y: auto;
-        overflow-x: hidden;
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        width: 100%;
-    }
-
-    .chat-message {
-        max-width: 85%;
-        padding: 1rem;
-        border-radius: 16px;
-        line-height: 1.3;
-        animation: messageSlide 0.3s ease;
-        word-wrap: break-word;
-        overflow-wrap: break-word;
-        width: fit-content;
-    }
-    
-    .chat-message p {
-        margin: 0;
-        white-space: pre-wrap;
-    }
-    
-    .chat-message img,
-    .chat-message pre,
-    .chat-message code {
-        max-width: 100%;
-        overflow-x: hidden;
-    }
-    .chat-message.user {
-        background: var(--primary-blue);
-        color: white;
-        margin-left: auto;
-    }
-
-    .chat-message.assistant {
-        background: #7b85b8;
-        color: white;
-        margin-right: auto;
-    }
-
-    .chat-input-container {
-        padding: 1.25rem;
-        border-top: 1px solid var(--light-blue);
-    }
-
-    .chat-input-wrapper {
-        display: flex;
-        gap: 0.75rem;
-        align-items: flex-end;
-    }
-
-    .chat-input {
-        flex: 1;
-        min-height: 44px;
-        max-height: 120px;
-        padding: 0.75rem 1rem;
-        border: 2px solid var(--light-blue);
-        border-radius: 12px;
-        resize: none;
-        font-size: 1rem;
-        line-height: 1.5;
-        transition: all 0.3s;
-    }
-
-    .chat-input:focus {
-        outline: none;
-        border-color: var(--primary-blue);
-        box-shadow: 0 0 0 3px rgba(99, 145, 197, 0.1);
-    }
-
-    .chat-send {
-        background: var(--primary-blue);
-        color: white;
-        width: 44px;
-        height: 44px;
-        border: none;
-        border-radius: 12px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.3s;
-    }
-
-    .chat-send:hover {
-        background: var(--light-blue);
-        transform: translateY(-2px);
-    }
-
-    /* 动画 */
-    @keyframes messageSlide {
-        from {
-            opacity: 0;
-            transform: translateY(10px);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-
-    /* 响应式设计 */
-    @media (max-width: 768px) {
-        .article-container {
-            padding: 1.5rem;
-            border-radius: 12px;
-        }
-
-        .article-title {
-            font-size: 2rem;
-        }
-
-        .chat-window {
-            right: 1rem;
-            bottom: 1rem;
-            left: 1rem;
-            width: auto;
-            height: 500px;
-        }
-
-        .chat-toggle {
-            right: 1rem;
-            bottom: 1rem;
-        }
-    }
-</style>
-{% endblock %}
-
-{% block content %}
-<!-- 文章内容 -->
-<article class="article-container">
-    <header class="article-header">
-        <h1 class="article-title">{{ article.title }}</h1>
-        <div class="article-meta">
-            <div class="meta-item">
-                <i class="fas fa-calendar"></i>
-                <span>{{ article.created_at.strftime('%Y-%m-%d') }}</span>
-            </div>
-        </div>
-    </header>
-
-    {% if article.summary %}
-    <div class="article-summary">
-        <span class="summary-label">AI 摘要</span>
-        <p>{{ article.summary }}</p>
-    </div>
-    {% endif %}
-
-    <div class="article-content markdown-body">
-        {{ article.content|markdown }}
-    </div>
-</article>
-
-<!-- AI 聊天窗口 -->
-<button class="chat-toggle" id="chatToggle">
-    <i class="fas fa-robot"></i>
-</button>
-
-<div class="chat-window" id="chatWindow">
-    <div class="chat-header">
-        <i class="fas fa-robot"></i>
-        <span class="chat-title">AI 智能助手</span>
-        <button class="chat-close" id="chatClose">
-            <i class="fas fa-times"></i>
-        </button>
-    </div>
-    <div class="chat-messages" id="chatMessages"></div>
-        <div class="chat-input-wrapper">
-            <textarea 
-                id="chatInput" 
-                class="chat-input" 
-                placeholder="输入您的问题..."
-                rows="1"
-            ></textarea>
-            <button class="chat-send" onclick="sendMessage()">
-                <i class="fas fa-paper-plane"></i>
-            </button>
-        </div>
-</div>
-{% endblock %}
-
-{% block extra_js %}
-<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-<script>
-    // 初始化文章上下文
-    window.articleContext = {
-        title: {{ article.title|tojson|safe }},
-        content: {{ article.content|tojson|safe }}
-    };
-
-    // 配置Marked
-    marked.setOptions({
-        breaks: true,
-        gfm: true
-    });
-
-    // 聊天窗口控制
-    const chatToggle = document.getElementById('chatToggle');
-    const chatWindow = document.getElementById('chatWindow');
-    const chatClose = document.getElementById('chatClose');
-    const chatInput = document.getElementById('chatInput');
-    const chatMessages = document.getElementById('chatMessages');
-
-    // 模型上下文
-    const modelContext = `这是一篇关于"${window.articleContext.title}"的文章。文章内容：\n\n${window.articleContext.content}\n\n请基于以上文章内容来回答用户的问题。`;
-
-    // 欢迎消息
-    const welcomeMessage = `您好！我是这篇《${window.articleContext.title}》的AI助手。我已经仔细阅读了全文，可以解答您关于文章内容的任何问题，也提供更深入的讨论和见解，从而帮助您更好地理解文章要点
-让我们开始对话吧！`;
-    // 初始化消息数组
-    let messages = [{
-        role: 'system',
-        content: modelContext
-    }];
-
-    // 初始化聊天
-    function initializeChat() {
-        displayMessage('assistant', welcomeMessage);
-    }
-
-    // 切换聊天窗口
-    function toggleChat() {
-        chatWindow.classList.toggle('active');
-        if (chatWindow.classList.contains('active')) {
-            chatToggle.style.display = 'none';
-            chatInput.focus();
-            if (chatMessages.children.length === 0) {
-                initializeChat();
-            }
-        } else {
-            chatToggle.style.display = 'flex';
-        }
-    }
-
-    chatToggle.addEventListener('click', toggleChat);
-    chatClose.addEventListener('click', toggleChat);
-
-    // 自动调整文本框高度
-    chatInput.addEventListener('input', function() {
-        this.style.height = 'auto';
-        this.style.height = Math.min(this.scrollHeight, 120) + 'px';
-    });
-
-    // 发送消息
-    async function sendMessage() {
-        const messageText = chatInput.value.trim();
-        if (!messageText) return;
-
-        const userMessage = {
-            role: 'user',
-            content: messageText
-        };
-
-        // 重置输入框
-        chatInput.value = '';
-        chatInput.style.height = 'auto';
-
-        // 显示用户消息
-        displayMessage('user', messageText);
-
-        try {
-            const currentMessages = [...messages, userMessage];
-            
-            const response = await fetch('/api/chat', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ messages: currentMessages })
-            });
-
-            if (response.ok) {
-                const data = await response.json();
-                
-                // 更新消息历史
-                messages.push(userMessage);
-                messages.push({
-                    role: 'assistant',
-                    content: data.response
-                });
-                
-                // 显示AI响应
-                displayMessage('assistant', data.response);
-            } else {
-                throw new Error('Network response was not ok');
-            }
-        } catch (error) {
-            console.error('Error:', error);
-            displayMessage('assistant', '抱歉，发生了错误，请稍后再试。');
-        }
-    }
-
-    // 显示消息
-    function displayMessage(role, content) {
-        const messageDiv = document.createElement('div');
-        messageDiv.className = `chat-message ${role}`;
-        
-        // 使用marked渲染Markdown内容
-        messageDiv.innerHTML = marked.parse(content);
-        
-        chatMessages.appendChild(messageDiv);
-        chatMessages.scrollTop = chatMessages.scrollHeight;
-    }
-
-    // 回车发送消息
-    chatInput.addEventListener('keypress', function(event) {
-        if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            sendMessage();
-        }
-    });
-
-    // 聊天窗口拖动功能
-    let isDragging = false;
-    let currentX;
-    let currentY;
-    let initialX;
-    let initialY;
-    let xOffset = 0;
-    let yOffset = 0;
-
-    chatWindow.addEventListener('mousedown', dragStart);
-    document.addEventListener('mousemove', drag);
-    document.addEventListener('mouseup', dragEnd);
-
-    function dragStart(e) {
-        if (e.target.closest('.chat-header') && !e.target.closest('.chat-close')) {
-            initialX = e.clientX - xOffset;
-            initialY = e.clientY - yOffset;
-            isDragging = true;
-            chatWindow.style.cursor = 'grabbing';
-        }
-    }
-
-    function drag(e) {
-        if (isDragging) {
-            e.preventDefault();
-            currentX = e.clientX - initialX;
-            currentY = e.clientY - initialY;
-            xOffset = currentX;
-            yOffset = currentY;
-            
-            // 确保窗口不会超出视口边界
-            const rect = chatWindow.getBoundingClientRect();
-            const viewportWidth = window.innerWidth;
-            const viewportHeight = window.innerHeight;
-            
-            // 限制X轴移动
-            if (rect.left < 0) {
-                currentX -= rect.left;
-            }
-            if (rect.right > viewportWidth) {
-                currentX -= (rect.right - viewportWidth);
-            }
-            
-            // 限制Y轴移动
-            if (rect.top < 0) {
-                currentY -= rect.top;
-            }
-            if (rect.bottom > viewportHeight) {
-                currentY -= (rect.bottom - viewportHeight);
-            }
-            
-            setTranslate(currentX, currentY, chatWindow);
-        }
-    }
-
-    function dragEnd() {
-        initialX = currentX;
-        initialY = currentY;
-        isDragging = false;
-        chatWindow.style.cursor = 'default';
-    }
-
-    function setTranslate(xPos, yPos, el) {
-        el.style.transform = `translate(${xPos}px, ${yPos}px)`;
-    }
-</script>
+{% extends "base.html" %}
+
+{% block title %}{{ article.title }} - 个人博客{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
+<style>
+    /* 文章容器样式 */
+    .article-container {
+        max-width: 900px;
+        margin: 0 auto;
+        background: white;
+        border-radius: 20px;
+        box-shadow: 0 2px 12px rgba(99, 145, 197, 0.08);
+        border: 2px solid var(--light-blue);
+        padding: 2.5rem;
+    }
+
+    /* 文章头部样式 */
+    .article-header {
+        margin-bottom: 2.5rem;
+        padding-bottom: 1.5rem;
+        border-bottom: 1px solid var(--light-blue);
+    }
+
+    .article-title {
+        font-size: 2.5rem;
+        font-weight: 700;
+        color: var(--text-dark);
+        line-height: 1.3;
+        margin-bottom: 1rem;
+        background: linear-gradient(135deg, var(--primary-blue), var(--soft-purple));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    .article-meta {
+        display: flex;
+        align-items: center;
+        gap: 1.5rem;
+        color: #64748B;
+    }
+
+    .meta-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .meta-item i {
+        color: var(--primary-blue);
+    }
+
+    /* AI 摘要样式 */
+    .article-summary {
+        background: var(--warm-cream);
+        border-radius: 16px;
+        padding: 1.5rem;
+        margin: 2rem 0;
+        position: relative;
+    }
+
+    .summary-label {
+        position: absolute;
+        top: -12px;
+        left: 16px;
+        background: var(--primary-blue);
+        color: white;
+        padding: 0.25rem 1rem;
+        border-radius: 20px;
+        font-size: 0.875rem;
+        font-weight: 500;
+    }
+
+    /* 文章内容样式 */
+    .article-content {
+        line-height: 1.8;
+        color: var(--text-dark);
+    }
+
+    .article-content .markdown-body {
+        font-size: 1.1rem;
+    }
+
+    .article-content .markdown-body h1,
+    .article-content .markdown-body h2,
+    .article-content .markdown-body h3 {
+        color: var(--primary-blue);
+        margin-top: 2em;
+        margin-bottom: 1em;
+        font-weight: 600;
+    }
+
+    .article-content .markdown-body p {
+        margin-bottom: 1.5em;
+    }
+
+    .article-content .markdown-body a {
+        color: var(--primary-blue);
+        text-decoration: none;
+        border-bottom: 1px dashed var(--light-blue);
+        transition: all 0.3s;
+    }
+
+    .article-content .markdown-body a:hover {
+        border-bottom-style: solid;
+        color: var(--soft-purple);
+    }
+
+    .article-content .markdown-body code {
+        background: #F8FAFC;
+        padding: 0.2em 0.4em;
+        border-radius: 4px;
+        font-size: 0.9em;
+        color: var(--primary-blue);
+    }
+
+    .article-content .markdown-body pre {
+        background: #F8FAFC;
+        border-radius: 12px;
+        padding: 1rem;
+        overflow-x: auto;
+        border: 1px solid var(--light-blue);
+    }
+
+    .article-content .markdown-body pre code {
+        background: none;
+        padding: 0;
+        color: inherit;
+    }
+
+    .article-content .markdown-body blockquote {
+        border-left: 4px solid var(--light-blue);
+        padding: 0.5rem 0 0.5rem 1rem;
+        margin: 1.5rem 0;
+        color: #64748B;
+        background: #F8FAFC;
+    }
+
+    .article-content .markdown-body img {
+        max-width: 100%;
+        border-radius: 12px;
+        margin: 1.5rem 0;
+    }
+
+    /* AI 聊天窗口样式 */
+    .chat-toggle {
+        position: fixed;
+        right: 2rem;
+        bottom: 2rem;
+        width: 56px;
+        height: 56px;
+        border-radius: 28px;
+        background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
+        color: white;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.5rem;
+        box-shadow: 0 4px 12px rgba(99, 145, 197, 0.2);
+        transition: all 0.3s;
+        z-index: 998;
+    }
+
+    .chat-toggle:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(99, 145, 197, 0.3);
+    }
+
+    .chat-window {
+        position: fixed;
+        right: 2rem;
+        bottom: 2rem;
+        width: 380px;
+        height: 600px;
+        background: white;
+        border-radius: 20px;
+        box-shadow: 0 4px 20px rgba(99, 145, 197, 0.15);
+        display: flex;
+        flex-direction: column;
+        transform: scale(0);
+        opacity: 0;
+        transform-origin: bottom right;
+        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+        z-index: 999;
+        border: 1px solid var(--light-blue);
+    }
+
+    .chat-window.active {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    .chat-header {
+        padding: 1.25rem;
+        background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
+        color: white;
+        border-radius: 20px 20px 0 0;
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .chat-title {
+        font-weight: 600;
+        flex: 1;
+    }
+
+    .chat-close {
+        background: none;
+        border: none;
+        color: white;
+        cursor: pointer;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 16px;
+        transition: all 0.3s;
+    }
+
+    .chat-close:hover {
+        background: rgba(255, 255, 255, 0.2);
+    }
+
+    /* Enhanced Chat Messages Styles */
+    .chat-messages {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        width: 100%;
+        background: #f8f9fa;
+    }
+
+    .chat-message {
+        max-width: 85%;
+        padding: 1rem 1.25rem;
+        border-radius: 16px;
+        line-height: 1.5;
+        animation: messageSlide 0.3s ease;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        width: fit-content;
+        border: 2px solid var(--light-blue);
+        background: white;
+        color: var(--text-dark);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    }
+
+    .chat-message.user {
+        margin-left: auto;
+        border-radius: 16px 16px 4px 16px;
+        background: #f8f9fa;
+    }
+
+    .chat-message.assistant {
+        margin-right: auto;
+        border-radius: 16px 16px 16px 4px;
+    }
+
+    .chat-message p {
+        margin: 0;
+        margin-bottom: 0.75rem;
+        white-space: pre-wrap;
+    }
+
+    .chat-message p:last-child {
+        margin-bottom: 0;
+    }
+
+    .chat-message pre {
+        background: #f1f5f9;
+        border-radius: 8px;
+        padding: 1rem;
+        margin: 0.75rem 0;
+        overflow-x: auto;
+        border: 1px solid var(--light-blue);
+    }
+
+    .chat-message pre code {
+        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+        font-size: 0.9rem;
+        line-height: 1.5;
+        color: var(--text-dark);
+        background: transparent;
+        padding: 0;
+    }
+
+    .chat-message code {
+        background: #f1f5f9;
+        padding: 0.2em 0.4em;
+        border-radius: 4px;
+        font-size: 0.9em;
+        color: var(--primary-blue);
+        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    }
+
+    .chat-message img {
+        max-width: 100%;
+        height: auto;
+        border-radius: 8px;
+        margin: 0.75rem 0;
+    }
+
+    .chat-message blockquote {
+        border-left: 3px solid var(--light-blue);
+        margin: 0.75rem 0;
+        padding: 0.5rem 0 0.5rem 1rem;
+        color: #64748b;
+        background: #f8fafc;
+        border-radius: 4px;
+    }
+
+    .chat-message .katex-display {
+        margin: 0.75rem 0;
+        overflow-x: auto;
+        padding: 0.5rem 0;
+    }
+
+    .chat-message .katex {
+        font-size: 1.1em;
+    }
+
+    .chat-message table {
+        border-collapse: collapse;
+        width: 100%;
+        margin: 0.75rem 0;
+        overflow-x: auto;
+        display: block;
+    }
+
+    .chat-message table th,
+    .chat-message table td {
+        padding: 0.5rem 0.75rem;
+        border: 1px solid var(--light-blue);
+    }
+
+    .chat-message table th {
+        background: #f8fafc;
+        font-weight: 600;
+    }
+
+    .chat-input-container {
+        padding: 1.25rem;
+        border-top: 1px solid var(--light-blue);
+    }
+
+    .chat-input-wrapper {
+        display: flex;
+        gap: 0.75rem;
+        align-items: flex-end;
+    }
+
+    .chat-input {
+        flex: 1;
+        min-height: 44px;
+        max-height: 120px;
+        padding: 0.75rem 1rem;
+        border: 2px solid var(--light-blue);
+        border-radius: 12px;
+        resize: none;
+        font-size: 1rem;
+        line-height: 1.5;
+        transition: all 0.3s;
+    }
+
+    .chat-input:focus {
+        outline: none;
+        border-color: var(--primary-blue);
+        box-shadow: 0 0 0 3px rgba(99, 145, 197, 0.1);
+    }
+
+    .chat-send {
+        background: var(--primary-blue);
+        color: white;
+        width: 44px;
+        height: 44px;
+        border: none;
+        border-radius: 12px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s;
+    }
+
+    .chat-send:hover {
+        background: var(--light-blue);
+        transform: translateY(-2px);
+    }
+
+    /* 动画 */
+    @keyframes messageSlide {
+        from {
+            opacity: 0;
+            transform: translateY(10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    /* 响应式设计 */
+    @media (max-width: 768px) {
+        .article-container {
+            padding: 1.5rem;
+            border-radius: 12px;
+        }
+
+        .article-title {
+            font-size: 2rem;
+        }
+
+        .chat-window {
+            right: 1rem;
+            bottom: 1rem;
+            left: 1rem;
+            width: auto;
+            height: 500px;
+        }
+
+        .chat-toggle {
+            right: 1rem;
+            bottom: 1rem;
+        }
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<!-- 文章内容 -->
+<article class="article-container">
+    <header class="article-header">
+        <h1 class="article-title">{{ article.title }}</h1>
+        <div class="article-meta">
+            <div class="meta-item">
+                <i class="fas fa-calendar"></i>
+                <span>{{ article.created_at.strftime('%Y-%m-%d') }}</span>
+            </div>
+        </div>
+    </header>
+
+    {% if article.summary %}
+    <div class="article-summary">
+        <span class="summary-label">AI 摘要</span>
+        <p>{{ article.summary }}</p>
+    </div>
+    {% endif %}
+
+    <div class="article-content markdown-body">
+        {{ article.content|markdown }}
+    </div>
+</article>
+
+<!-- AI 聊天窗口 -->
+<button class="chat-toggle" id="chatToggle">
+    <i class="fas fa-robot"></i>
+</button>
+
+<div class="chat-window" id="chatWindow">
+    <div class="chat-header">
+        <i class="fas fa-robot"></i>
+        <span class="chat-title">AI 智能助手</span>
+        <button class="chat-close" id="chatClose">
+            <i class="fas fa-times"></i>
+        </button>
+    </div>
+    <div class="chat-messages" id="chatMessages"></div>
+    <div class="chat-input-wrapper">
+        <textarea 
+            id="chatInput" 
+            class="chat-input" 
+            placeholder="输入您的问题..."
+            rows="1"
+        ></textarea>
+        <button class="chat-send" onclick="sendMessage()">
+            <i class="fas fa-paper-plane"></i>
+        </button>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script>
+    // 初始化文章上下文
+    window.articleContext = {
+        title: {{ article.title|tojson|safe }},
+        content: {{ article.content|tojson|safe }}
+    };
+
+    // 配置Marked
+    marked.setOptions({
+        breaks: true,
+        gfm: true
+    });
+
+    // 聊天窗口控制
+    const chatToggle = document.getElementById('chatToggle');
+    const chatWindow = document.getElementById('chatWindow');
+    const chatClose = document.getElementById('chatClose');
+    const chatInput = document.getElementById('chatInput');
+    const chatMessages = document.getElementById('chatMessages');
+
+    // 模型上下文
+    const modelContext = `这是一篇关于"${window.articleContext.title}"的文章。文章内容：\n\n${window.articleContext.content}\n\n请基于以上文章内容来回答用户的问题。`;
+
+    // 欢迎消息
+    const welcomeMessage = `您好！我是这篇《${window.articleContext.title}》的AI助手。我已经仔细阅读了全文，可以解答您关于文章内容的任何问题，也提供更深入的讨论和见解，从而帮助您更好地理解文章要点
+让我们开始对话吧！`;
+    
+    // 初始化消息数��
+    let messages = [{
+        role: 'system',
+        content: modelContext
+    }];
+
+    // 初始化聊天
+    function initializeChat() {
+        displayMessage('assistant', welcomeMessage);
+    }
+
+    // 切换聊天窗口
+    function toggleChat() {
+        chatWindow.classList.toggle('active');
+        if (chatWindow.classList.contains('active')) {
+            chatToggle.style.display = 'none';
+            chatInput.focus();
+            if (chatMessages.children.length === 0) {
+                initializeChat();
+            }
+        } else {
+            chatToggle.style.display = 'flex';
+        }
+    }
+
+    chatToggle.addEventListener('click', toggleChat);
+    chatClose.addEventListener('click', toggleChat);
+
+    // 自动调整文本框高度
+    chatInput.addEventListener('input', function() {
+        this.style.height = 'auto';
+        this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+    });
+
+    // 发送消息
+    async function sendMessage() {
+        const messageText = chatInput.value.trim();
+        if (!messageText) return;
+
+        const userMessage = {
+            role: 'user',
+            content: messageText
+        };
+
+        // 重置输入框
+        chatInput.value = '';
+        chatInput.style.height = 'auto';
+
+        // 显示用户消息
+        displayMessage('user', messageText);
+
+        try {
+            const currentMessages = [...messages, userMessage];
+            
+            const response = await fetch('/api/chat', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ messages: currentMessages })
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                
+                // 更新消息历史
+                messages.push(userMessage);
+                messages.push({
+                    role: 'assistant',
+                    content: data.response
+                });
+                
+                // 显示AI响应
+                displayMessage('assistant', data.response);
+            } else {
+                throw new Error('Network response was not ok');
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            displayMessage('assistant', '抱歉，发生了错误，请稍后再试。');
+        }
+    }
+
+    // 显示消息
+    function displayMessage(role, content) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `chat-message ${role}`;
+        
+        // 使用marked渲染Markdown内容
+        messageDiv.innerHTML = marked.parse(content);
+        
+        chatMessages.appendChild(messageDiv);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+
+    // 回车发送消息
+    chatInput.addEventListener('keypress', function(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            sendMessage();
+        }
+    });
+
+    // 聊天窗口拖动功能
+    let isDragging = false;
+    let currentX;
+    let currentY;
+    let initialX;
+    let initialY;
+    let xOffset = 0;
+    let yOffset = 0;
+
+    chatWindow.addEventListener('mousedown', dragStart);
+    document.addEventListener('mousemove', drag);
+    document.addEventListener('mouseup', dragEnd);
+
+    function dragStart(e) {
+        if (e.target.closest('.chat-header') && !e.target.closest('.chat-close')) {
+            initialX = e.clientX - xOffset;
+            initialY = e.clientY - yOffset;
+            isDragging = true;
+            chatWindow.style.cursor = 'grabbing';
+        }
+    }
+
+    function drag(e) {
+        if (isDragging) {
+            e.preventDefault();
+            currentX = e.clientX - initialX;
+            currentY = e.clientY - initialY;
+            xOffset = currentX;
+            yOffset = currentY;
+            
+            // 确保窗口不会超出视口边界
+            const rect = chatWindow.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            
+            // 限制X轴移动
+            if (rect.left < 0) {
+                currentX -= rect.left;
+            }
+            if (rect.right > viewportWidth) {
+                currentX -= (rect.right - viewportWidth);
+            }
+            
+            // 限制Y轴移动
+            if (rect.top < 0) {
+                currentY -= rect.top;
+            }
+            if (rect.bottom > viewportHeight) {
+                currentY -= (rect.bottom - viewportHeight);
+            }
+            
+            setTranslate(currentX, currentY, chatWindow);
+        }
+    }
+
+    function dragEnd() {
+        initialX = currentX;
+        initialY = currentY;
+        isDragging = false;
+        chatWindow.style.cursor = 'default';
+    }
+
+    function setTranslate(xPos, yPos, el) {
+        el.style.transform = `translate(${xPos}px, ${yPos}px)`;
+    }
+</script>
 {% endblock %}