collabdocchat 1.2.13 → 2.0.1

package/src/utils/ai-assistant.js

@@ -0,0 +1,1398 @@
+/**
+ * AI 助手系统
+ * 提供智能回复、内容摘要、翻译等功能
+ */
+
+export class AIAssistant {
+  constructor(apiService) {
+    this.apiService = apiService;
+    this.isEnabled = true;
+    this.suggestions = [];
+  }
+
+  /**
+   * 生成AI响应
+   */
+  async generateAIResponse(message) {
+    const lowerMessage = message.toLowerCase();
+    
+    // 问候语
+    if (lowerMessage.includes('你好') || lowerMessage.includes('hi') || lowerMessage.includes('hello')) {
+      return '你好！我是AI助手，很高兴为你服务。有什么可以帮助你的吗？';
+    }
+    
+    // 感谢
+    if (lowerMessage.includes('谢谢') || lowerMessage.includes('thanks') || lowerMessage.includes('thank you')) {
+      return '不客气！很高兴能帮到你。还有其他问题吗？';
+    }
+    
+    // 询问功能
+    if (lowerMessage.includes('功能') || lowerMessage.includes('能做什么') || lowerMessage.includes('帮助')) {
+      return '我可以帮你：\n1. 智能回复建议 - 为你的消息提供回复建议\n2. 内容摘要 - 快速总结长文本\n3. 语法检查 - 检查文本中的语法问题\n4. 情感分析 - 分析文本的情感倾向\n5. 实时对话 - 随时与我交流\n\n你想了解哪个功能？';
+    }
+    
+    // 询问时间
+    if (lowerMessage.includes('时间') || lowerMessage.includes('几点')) {
+      const now = new Date();
+      return `现在是 ${now.toLocaleString('zh-CN')}`;
+    }
+    
+    // 询问日期
+    if (lowerMessage.includes('日期') || lowerMessage.includes('今天')) {
+      const now = new Date();
+      return `今天是 ${now.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' })}`;
+    }
+    
+    // 询问天气（模拟）
+    if (lowerMessage.includes('天气')) {
+      return '抱歉，我目前还不能查询实时天气信息。你可以使用天气应用或网站查询。';
+    }
+    
+    // 询问文档相关
+    if (lowerMessage.includes('文档') || lowerMessage.includes('document')) {
+      return '关于文档功能：\n- 你可以在"文档管理"中创建和编辑文档\n- 支持实时协作编辑\n- 可以设置文档权限（只读/可编辑）\n- 支持版本历史记录\n\n需要我详细介绍某个功能吗？';
+    }
+    
+    // 询问任务相关
+    if (lowerMessage.includes('任务') || lowerMessage.includes('task')) {
+      return '关于任务功能：\n- 管理员可以创建任务并分配给成员\n- 支持设置截止日期\n- 可以查看任务完成情况\n- 支持投票任务\n\n你想了解更多吗？';
+    }
+    
+    // 询问群组相关
+    if (lowerMessage.includes('群组') || lowerMessage.includes('group')) {
+      return '关于群组功能：\n- 管理员可以创建和管理群组\n- 支持添加/移除成员\n- 可以设置全体禁言或个人禁言\n- 支持清除聊天记录\n\n有什么具体问题吗？';
+    }
+    
+    // 询问协作工具
+    if (lowerMessage.includes('协作') || lowerMessage.includes('工具') || lowerMessage.includes('白板')) {
+      return '协作工具包括：\n1. 白板 - 实时协作绘图\n2. 投票 - 创建投票任务（管理员）\n3. 代码编辑 - 协作编写代码\n4. 思维导图 - 创建思维导图\n\n你想使用哪个工具？';
+    }
+    
+    // 问题类型
+    if (lowerMessage.includes('怎么') || lowerMessage.includes('如何') || lowerMessage.includes('怎样')) {
+      return '我会尽力帮你解答。请告诉我具体的问题，比如：\n- 怎么创建文档？\n- 如何分配任务？\n- 怎样使用白板？\n\n请详细描述你的问题。';
+    }
+    
+    // 确认/同意
+    if (lowerMessage.includes('好的') || lowerMessage.includes('ok') || lowerMessage.includes('可以') || lowerMessage.includes('明白')) {
+      return '很好！如果还有其他问题，随时告诉我。';
+    }
+    
+    // 否定/拒绝
+    if (lowerMessage.includes('不') && (lowerMessage.includes('需要') || lowerMessage.includes('用'))) {
+      return '好的，如果以后需要帮助，随时找我！';
+    }
+    
+    // 再见
+    if (lowerMessage.includes('再见') || lowerMessage.includes('拜拜') || lowerMessage.includes('bye')) {
+      return '再见！祝你使用愉快！👋';
+    }
+    
+    // 默认回复
+    const defaultReplies = [
+      '我理解你的意思。能告诉我更多细节吗？',
+      '这是个有趣的问题。你能具体说说吗？',
+      '我在学习中。你可以换个方式问我，或者使用其他AI功能。',
+      '我会记住这个问题。你还想了解什么？',
+      '有趣！你可以试试我的其他功能，比如内容摘要或语法检查。'
+    ];
+    
+    return defaultReplies[Math.floor(Math.random() * defaultReplies.length)];
+  }
+
+  /**
+   * 智能回复建议
+   */
+  async getSmartReplies(message, context = []) {
+    // 模拟AI回复建议（实际应用中应调用AI API）
+    const replies = this.generateSmartReplies(message);
+    return replies;
+  }
+
+  /**
+   * 生成智能回复
+   */
+  generateSmartReplies(message) {
+    const lowerMessage = message.toLowerCase();
+    
+    // 问候语
+    if (lowerMessage.includes('你好') || lowerMessage.includes('hi') || lowerMessage.includes('hello')) {
+      return [
+        '你好！有什么可以帮助你的吗？',
+        '嗨！很高兴见到你！',
+        '你好！欢迎！'
+      ];
+    }
+    
+    // 感谢
+    if (lowerMessage.includes('谢谢') || lowerMessage.includes('thanks')) {
+      return [
+        '不客气！',
+        '很高兴能帮到你！',
+        '随时为你服务！'
+      ];
+    }
+    
+    // 询问
+    if (lowerMessage.includes('怎么') || lowerMessage.includes('如何') || lowerMessage.includes('?') || lowerMessage.includes('？')) {
+      return [
+        '让我来帮你解答...',
+        '这是个好问题，我来看看...',
+        '我需要了解更多信息才能回答'
+      ];
+    }
+    
+    // 确认
+    if (lowerMessage.includes('好的') || lowerMessage.includes('ok') || lowerMessage.includes('可以')) {
+      return [
+        '明白了！',
+        '收到！',
+        '好的，我知道了'
+      ];
+    }
+    
+    // 默认回复
+    return [
+      '我明白了',
+      '好的',
+      '收到'
+    ];
+  }
+
+  /**
+   * 内容摘要
+   */
+  async summarizeContent(content) {
+    // 简单的摘要算法（实际应用中应使用AI模型）
+    const sentences = content.split(/[。！？.!?]/);
+    const summary = sentences.slice(0, 3).join('。') + '。';
+    
+    return {
+      summary: summary,
+      keyPoints: this.extractKeyPoints(content),
+      wordCount: content.length
+    };
+  }
+
+  /**
+   * 提取关键点
+   */
+  extractKeyPoints(content) {
+    // 简单的关键词提取
+    const keywords = [];
+    const commonWords = ['的', '了', '是', '在', '有', '和', '就', '不', '人', '都', '一', '我', '他', '她', '它'];
+    
+    const words = content.match(/[\u4e00-\u9fa5]+/g) || [];
+    const wordFreq = {};
+    
+    words.forEach(word => {
+      if (word.length > 1 && !commonWords.includes(word)) {
+        wordFreq[word] = (wordFreq[word] || 0) + 1;
+      }
+    });
+    
+    const sorted = Object.entries(wordFreq)
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 5);
+    
+    return sorted.map(([word]) => word);
+  }
+
+  /**
+   * 文本翻译（模拟）
+   */
+  async translate(text, targetLang = 'en') {
+    // 实际应用中应调用翻译API
+    return {
+      original: text,
+      translated: `[${targetLang}] ${text}`,
+      targetLang: targetLang
+    };
+  }
+
+  /**
+   * 语法检查
+   */
+  async checkGrammar(text) {
+    // 简单的语法检查
+    const issues = [];
+    
+    // 检查标点符号
+    if (!text.match(/[。！？.!?]$/)) {
+      issues.push({
+        type: 'punctuation',
+        message: '建议在句末添加标点符号',
+        position: text.length
+      });
+    }
+    
+    // 检查重复词
+    const words = text.split(/\s+/);
+    for (let i = 0; i < words.length - 1; i++) {
+      if (words[i] === words[i + 1]) {
+        issues.push({
+          type: 'repetition',
+          message: `重复的词: "${words[i]}"`,
+          position: i
+        });
+      }
+    }
+    
+    return {
+      text: text,
+      issues: issues,
+      score: Math.max(0, 100 - issues.length * 10)
+    };
+  }
+
+  /**
+   * 内容建议
+   */
+  async getSuggestions(text, type = 'general') {
+    const suggestions = [];
+    
+    switch (type) {
+      case 'email':
+        suggestions.push('建议添加称呼');
+        suggestions.push('建议添加结束语');
+        break;
+      case 'document':
+        suggestions.push('建议添加标题');
+        suggestions.push('建议分段显示');
+        break;
+      case 'chat':
+        suggestions.push('建议使用表情符号');
+        suggestions.push('建议@相关人员');
+        break;
+    }
+    
+    return suggestions;
+  }
+
+  /**
+   * 情感分析
+   */
+  async analyzeSentiment(text) {
+    // 简单的情感分析
+    const positiveWords = ['好', '棒', '优秀', '喜欢', '开心', '高兴', '感谢', '谢谢'];
+    const negativeWords = ['不好', '差', '糟糕', '讨厌', '难过', '失望', '抱歉', '对不起'];
+    
+    let positiveCount = 0;
+    let negativeCount = 0;
+    
+    positiveWords.forEach(word => {
+      if (text.includes(word)) positiveCount++;
+    });
+    
+    negativeWords.forEach(word => {
+      if (text.includes(word)) negativeCount++;
+    });
+    
+    let sentiment = 'neutral';
+    let score = 0;
+    
+    if (positiveCount > negativeCount) {
+      sentiment = 'positive';
+      score = Math.min(1, positiveCount / 5);
+    } else if (negativeCount > positiveCount) {
+      sentiment = 'negative';
+      score = -Math.min(1, negativeCount / 5);
+    }
+    
+    return {
+      sentiment: sentiment,
+      score: score,
+      confidence: Math.abs(score)
+    };
+  }
+
+  /**
+   * 自动完成
+   */
+  async getAutoComplete(text) {
+    // 简单的自动完成
+    const completions = [];
+    
+    if (text.endsWith('你好')) {
+      completions.push('你好！很高兴见到你！');
+      completions.push('你好！有什么可以帮助你的吗？');
+    }
+    
+    if (text.endsWith('谢谢')) {
+      completions.push('谢谢你的帮助！');
+      completions.push('谢谢！非常感谢！');
+    }
+    
+    return completions;
+  }
+
+  /**
+   * 渲染AI助手面板（优化后）
+   */
+  renderAssistantPanel(container, context = {}) {
+    // 添加优化样式
+    this.addAIAssistantStyles();
+    
+    container.innerHTML = `
+      <div class="ai-assistant-panel-modern">
+        <div class="assistant-header-modern">
+          <div class="header-left">
+            <div class="ai-avatar-large">🤖</div>
+            <div class="header-info">
+              <h3>AI 智能助手</h3>
+              <p class="header-subtitle">为您提供智能服务</p>
+            </div>
+          </div>
+          <button class="btn-close-modern" id="closeAssistant">✕</button>
+        </div>
+        
+        <div class="assistant-tabs-modern">
+          <button class="tab-btn-modern active" data-tab="chat">
+            <span class="tab-icon">💬</span>
+            <span class="tab-label">AI对话</span>
+          </button>
+          <button class="tab-btn-modern" data-tab="reply">
+            <span class="tab-icon">💡</span>
+            <span class="tab-label">智能回复</span>
+          </button>
+          <button class="tab-btn-modern" data-tab="summary">
+            <span class="tab-icon">📝</span>
+            <span class="tab-label">内容摘要</span>
+          </button>
+          <button class="tab-btn-modern" data-tab="grammar">
+            <span class="tab-icon">✍️</span>
+            <span class="tab-label">语法检查</span>
+          </button>
+          <button class="tab-btn-modern" data-tab="sentiment">
+            <span class="tab-icon">😊</span>
+            <span class="tab-label">情感分析</span>
+          </button>
+        </div>
+        
+        <div class="assistant-content-modern">
+          <div class="tab-content-modern active" id="chat-tab">
+            <div class="ai-chat-container-modern">
+              <div class="ai-chat-messages-modern" id="aiChatMessages">
+                <div class="ai-message-modern">
+                  <div class="ai-avatar-small">🤖</div>
+                  <div class="ai-message-bubble">
+                    你好！我是AI助手，有什么可以帮助你的吗？
+                  </div>
+                </div>
+              </div>
+              <div class="ai-chat-input-modern">
+                <input type="text" id="aiChatInput" placeholder="输入消息...按Enter发送" class="chat-input-field">
+                <button class="btn-send-modern" id="sendAiMessage">
+                  <span>📤</span> 发送
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <div class="tab-content-modern" id="reply-tab">
+            <div class="feature-card-modern">
+              <div class="feature-header">
+                <h4>💡 智能回复建议</h4>
+                <p>AI将根据上下文为您生成回复建议</p>
+              </div>
+              <div id="smartReplies" class="smart-replies-modern">
+                <div class="empty-state-small">
+                  <div class="empty-icon">💭</div>
+                  <p>输入消息后，AI将为您提供回复建议</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="tab-content-modern" id="summary-tab">
+            <div class="feature-card-modern">
+              <div class="feature-header">
+                <h4>📝 内容摘要</h4>
+                <p>快速提取文本的核心内容和关键信息</p>
+              </div>
+              <textarea id="summaryInput" placeholder="粘贴要摘要的内容..." rows="8" class="modern-textarea"></textarea>
+              <button class="btn-action-modern" id="generateSummary">
+                <span>✨</span> 生成摘要
+              </button>
+              <div id="summaryResult" class="result-box-modern"></div>
+            </div>
+          </div>
+          
+          <div class="tab-content-modern" id="grammar-tab">
+            <div class="feature-card-modern">
+              <div class="feature-header">
+                <h4>✍️ 语法检查</h4>
+                <p>检查文本中的语法错误和标点问题</p>
+              </div>
+              <textarea id="grammarInput" placeholder="输入要检查的文本..." rows="8" class="modern-textarea"></textarea>
+              <button class="btn-action-modern" id="checkGrammar">
+                <span>🔍</span> 检查语法
+              </button>
+              <div id="grammarResult" class="result-box-modern"></div>
+            </div>
+          </div>
+          
+          <div class="tab-content-modern" id="sentiment-tab">
+            <div class="feature-card-modern">
+              <div class="feature-header">
+                <h4>😊 情感分析</h4>
+                <p>分析文本的情感倾向和情绪色彩</p>
+              </div>
+              <textarea id="sentimentInput" placeholder="输入要分析的文本..." rows="8" class="modern-textarea"></textarea>
+              <button class="btn-action-modern" id="analyzeSentiment">
+                <span>📊</span> 分析情感
+              </button>
+              <div id="sentimentResult" class="result-box-modern"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    // 标签切换
+    container.querySelectorAll('.tab-btn-modern').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const tab = btn.dataset.tab;
+        
+        container.querySelectorAll('.tab-btn-modern').forEach(b => b.classList.remove('active'));
+        container.querySelectorAll('.tab-content-modern').forEach(c => c.classList.remove('active'));
+        
+        btn.classList.add('active');
+        container.querySelector(`#${tab}-tab`).classList.add('active');
+      });
+    });
+
+    // 关闭按钮
+    container.querySelector('#closeAssistant').addEventListener('click', () => {
+      // 完全移除容器内容和事件监听器
+      const panel = container.querySelector('.ai-assistant-panel');
+      if (panel) {
+        panel.remove();
+      }
+      container.innerHTML = '';
+      
+      // 如果容器是模态框，也移除模态框本身
+      if (container.classList.contains('modal')) {
+        container.remove();
+      }
+    });
+
+    // AI对话功能
+    const aiChatMessages = container.querySelector('#aiChatMessages');
+    const aiChatInput = container.querySelector('#aiChatInput');
+    const sendAiMessageBtn = container.querySelector('#sendAiMessage');
+
+    const sendAiMessage = async () => {
+      const message = aiChatInput.value.trim();
+      if (!message) return;
+
+      // 添加用户消息
+      const userMessageEl = document.createElement('div');
+      userMessageEl.className = 'user-message-modern';
+      userMessageEl.innerHTML = `
+        <div class="user-message-bubble">${message}</div>
+        <div class="user-avatar-small">👤</div>
+      `;
+      aiChatMessages.appendChild(userMessageEl);
+      aiChatInput.value = '';
+
+      // 滚动到底部
+      aiChatMessages.scrollTop = aiChatMessages.scrollHeight;
+
+      // 显示"正在输入"提示
+      const typingEl = document.createElement('div');
+      typingEl.className = 'ai-message-modern typing-indicator-modern';
+      typingEl.innerHTML = `
+        <div class="ai-avatar-small">🤖</div>
+        <div class="typing-bubble">
+          <span class="typing-dot"></span>
+          <span class="typing-dot"></span>
+          <span class="typing-dot"></span>
+        </div>
+      `;
+      aiChatMessages.appendChild(typingEl);
+      aiChatMessages.scrollTop = aiChatMessages.scrollHeight;
+
+      // 模拟AI响应（延迟1秒）
+      setTimeout(async () => {
+        typingEl.remove();
+
+        // 生成AI回复
+        const aiReply = await this.generateAIResponse(message);
+
+        // 添加AI消息
+        const aiMessageEl = document.createElement('div');
+        aiMessageEl.className = 'ai-message-modern';
+        aiMessageEl.innerHTML = `
+          <div class="ai-avatar-small">🤖</div>
+          <div class="ai-message-bubble">${aiReply}</div>
+        `;
+        aiChatMessages.appendChild(aiMessageEl);
+
+        // 滚动到底部
+        aiChatMessages.scrollTop = aiChatMessages.scrollHeight;
+      }, 1000);
+    };
+
+    sendAiMessageBtn.addEventListener('click', sendAiMessage);
+    aiChatInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        sendAiMessage();
+      }
+    });
+
+    // 生成摘要
+    container.querySelector('#generateSummary').addEventListener('click', async () => {
+      const input = container.querySelector('#summaryInput').value;
+      if (!input) {
+        alert('请输入内容');
+        return;
+      }
+
+      const result = await this.summarizeContent(input);
+      const resultDiv = container.querySelector('#summaryResult');
+      
+      resultDiv.innerHTML = `
+        <div class="result-card-modern">
+          <div class="result-section">
+            <h5 class="result-title">📄 摘要内容</h5>
+            <p class="result-text">${result.summary}</p>
+          </div>
+          <div class="result-section">
+            <h5 class="result-title">🔑 关键词</h5>
+            <div class="keywords-modern">
+              ${result.keyPoints.map(kw => `<span class="keyword-tag">${kw}</span>`).join('')}
+            </div>
+          </div>
+          <div class="result-meta">
+            <span class="meta-item">📊 字数: ${result.wordCount}</span>
+          </div>
+        </div>
+      `;
+    });
+
+    // 语法检查
+    container.querySelector('#checkGrammar').addEventListener('click', async () => {
+      const input = container.querySelector('#grammarInput').value;
+      if (!input) {
+        alert('请输入内容');
+        return;
+      }
+
+      const result = await this.checkGrammar(input);
+      const resultDiv = container.querySelector('#grammarResult');
+      
+      resultDiv.innerHTML = `
+        <div class="result-card-modern">
+          <div class="result-section">
+            <h5 class="result-title">📊 语法评分</h5>
+            <div class="score-display">
+              <div class="score-circle" style="background: conic-gradient(var(--success) ${result.score}%, var(--bg-dark) 0);">
+                <div class="score-inner">
+                  <span class="score-value">${result.score}</span>
+                  <span class="score-max">/100</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          ${result.issues.length === 0 ? 
+            '<div class="success-message"><span>✓</span> 未发现语法问题</div>' :
+            `<div class="result-section">
+              <h5 class="result-title">⚠️ 发现的问题</h5>
+              <div class="issues-list">
+              ${result.issues.map(issue => `
+                  <div class="issue-item">
+                    <span class="issue-type-badge">${issue.type}</span>
+                    <span class="issue-message">${issue.message}</span>
+                </div>
+              `).join('')}
+              </div>
+            </div>`
+          }
+        </div>
+      `;
+    });
+
+    // 情感分析
+    container.querySelector('#analyzeSentiment').addEventListener('click', async () => {
+      const input = container.querySelector('#sentimentInput').value;
+      if (!input) {
+        alert('请输入内容');
+        return;
+      }
+
+      const result = await this.analyzeSentiment(input);
+      const resultDiv = container.querySelector('#sentimentResult');
+      
+      const sentimentText = {
+        positive: '积极',
+        negative: '消极',
+        neutral: '中性'
+      };
+      
+      const sentimentEmoji = {
+        positive: '😊',
+        negative: '😔',
+        neutral: '😐'
+      };
+      
+      const sentimentColor = {
+        positive: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+        negative: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
+        neutral: 'linear-gradient(135deg, #6b7280 0%, #4b5563 100%)'
+      };
+      
+      resultDiv.innerHTML = `
+        <div class="result-card-modern">
+          <div class="result-section">
+            <h5 class="result-title">😊 情感倾向</h5>
+            <div class="sentiment-display">
+              <div class="sentiment-badge-large" style="background: ${sentimentColor[result.sentiment]};">
+                <span class="sentiment-emoji">${sentimentEmoji[result.sentiment]}</span>
+                <span class="sentiment-text">${sentimentText[result.sentiment]}</span>
+          </div>
+            </div>
+          </div>
+          <div class="result-section">
+            <h5 class="result-title">📊 详细数据</h5>
+            <div class="sentiment-stats">
+              <div class="stat-row">
+                <span class="stat-label">情感得分</span>
+                <span class="stat-value">${(result.score * 100).toFixed(0)}</span>
+              </div>
+              <div class="stat-row">
+                <span class="stat-label">置信度</span>
+                <span class="stat-value">${(result.confidence * 100).toFixed(0)}%</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+    });
+  }
+
+  /**
+   * 添加AI助手样式
+   */
+  addAIAssistantStyles() {
+    if (document.getElementById('ai-assistant-modern-styles')) return;
+
+    const style = document.createElement('style');
+    style.id = 'ai-assistant-modern-styles';
+    style.textContent = `
+      /* AI助手面板 - 现代化样式 */
+      .ai-assistant-panel-modern {
+        background: var(--bg-card);
+        border-radius: 20px;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        height: 80vh;
+        max-height: 700px;
+      }
+
+      /* 头部 */
+      .assistant-header-modern {
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+        padding: 20px 24px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: white;
+      }
+
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+      }
+
+      .ai-avatar-large {
+        width: 50px;
+        height: 50px;
+        border-radius: 12px;
+        background: rgba(255,255,255,0.2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 28px;
+      }
+
+      .header-info h3 {
+        margin: 0;
+        font-size: 20px;
+        font-weight: 700;
+      }
+
+      .header-subtitle {
+        margin: 4px 0 0;
+        font-size: 13px;
+        opacity: 0.9;
+      }
+
+      .btn-close-modern {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        background: rgba(255,255,255,0.2);
+        border: none;
+        color: white;
+        font-size: 24px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .btn-close-modern:hover {
+        background: rgba(255,255,255,0.3);
+        transform: rotate(90deg);
+      }
+
+      /* 标签栏 */
+      .assistant-tabs-modern {
+        display: flex;
+        background: var(--bg-dark);
+        border-bottom: 2px solid var(--border);
+        overflow-x: auto;
+        scrollbar-width: none;
+      }
+
+      .assistant-tabs-modern::-webkit-scrollbar {
+        display: none;
+      }
+
+      .tab-btn-modern {
+        flex: 1;
+        min-width: 100px;
+        padding: 16px 12px;
+        background: transparent;
+        border: none;
+        color: var(--text-secondary);
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 6px;
+        position: relative;
+      }
+
+      .tab-btn-modern::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background: var(--primary);
+        transform: scaleX(0);
+        transition: transform 0.3s ease;
+      }
+
+      .tab-btn-modern.active {
+        color: var(--primary);
+      }
+
+      .tab-btn-modern.active::after {
+        transform: scaleX(1);
+      }
+
+      .tab-btn-modern:hover {
+        background: rgba(99,102,241,0.1);
+      }
+
+      .tab-icon {
+        font-size: 24px;
+      }
+
+      .tab-label {
+        font-size: 12px;
+        font-weight: 600;
+      }
+
+      /* 内容区域 */
+      .assistant-content-modern {
+        flex: 1;
+        overflow-y: auto;
+        padding: 20px;
+      }
+
+      .tab-content-modern {
+        display: none;
+        animation: fadeIn 0.3s ease;
+      }
+
+      .tab-content-modern.active {
+        display: block;
+      }
+
+      /* 功能卡片 */
+      .feature-card-modern {
+        background: var(--bg-dark);
+        border: 2px solid var(--border);
+        border-radius: 16px;
+        padding: 24px;
+      }
+
+      .feature-header {
+        margin-bottom: 20px;
+      }
+
+      .feature-header h4 {
+        margin: 0 0 8px;
+        font-size: 18px;
+        color: var(--text-primary);
+      }
+
+      .feature-header p {
+        margin: 0;
+        font-size: 14px;
+        color: var(--text-secondary);
+      }
+
+      /* AI对话容器 */
+      .ai-chat-container-modern {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        background: var(--bg-dark);
+        border: 2px solid var(--border);
+        border-radius: 16px;
+        overflow: hidden;
+      }
+
+      .ai-chat-messages-modern {
+        flex: 1;
+        overflow-y: auto;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      /* AI消息 */
+      .ai-message-modern {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        animation: slideInLeft 0.3s ease;
+      }
+
+      .ai-avatar-small {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 20px;
+        flex-shrink: 0;
+      }
+
+      .ai-message-bubble {
+        background: var(--bg-card);
+        border: 1px solid var(--border);
+        border-radius: 12px 12px 12px 4px;
+        padding: 12px 16px;
+        max-width: 70%;
+        color: var(--text-primary);
+        line-height: 1.6;
+        word-wrap: break-word;
+      }
+
+      /* 用户消息 */
+      .user-message-modern {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        justify-content: flex-end;
+        animation: slideInRight 0.3s ease;
+      }
+
+      .user-avatar-small {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 20px;
+        flex-shrink: 0;
+      }
+
+      .user-message-bubble {
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+        border-radius: 12px 12px 4px 12px;
+        padding: 12px 16px;
+        max-width: 70%;
+        color: white;
+        line-height: 1.6;
+        word-wrap: break-word;
+      }
+
+      /* 输入中动画 */
+      .typing-indicator-modern {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+      }
+
+      .typing-bubble {
+        background: var(--bg-card);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 12px 16px;
+        display: flex;
+        gap: 6px;
+      }
+
+      .typing-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--text-secondary);
+        animation: typingDot 1.4s infinite;
+      }
+
+      .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);
+          opacity: 0.5;
+        }
+        30% {
+          transform: translateY(-10px);
+          opacity: 1;
+        }
+      }
+
+      /* 聊天输入 */
+      .ai-chat-input-modern {
+        padding: 16px;
+        background: var(--bg-card);
+        border-top: 1px solid var(--border);
+        display: flex;
+        gap: 12px;
+      }
+
+      .chat-input-field {
+        flex: 1;
+        padding: 12px 16px;
+        background: var(--bg-dark);
+        border: 2px solid var(--border);
+        border-radius: 10px;
+        color: var(--text-primary);
+        font-size: 14px;
+        transition: all 0.3s ease;
+      }
+
+      .chat-input-field:focus {
+        outline: none;
+        border-color: var(--primary);
+        box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
+      }
+
+      .btn-send-modern {
+        padding: 12px 24px;
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+        border: none;
+        border-radius: 10px;
+        color: white;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .btn-send-modern:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(99,102,241,0.4);
+      }
+
+      /* 文本域 */
+      .modern-textarea {
+        width: 100%;
+        padding: 12px 16px;
+        background: var(--bg-card);
+        border: 2px solid var(--border);
+        border-radius: 12px;
+        color: var(--text-primary);
+        font-size: 14px;
+        font-family: inherit;
+        resize: vertical;
+        transition: all 0.3s ease;
+        margin-bottom: 16px;
+      }
+
+      .modern-textarea:focus {
+        outline: none;
+        border-color: var(--primary);
+        box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
+      }
+
+      /* 操作按钮 */
+      .btn-action-modern {
+        width: 100%;
+        padding: 14px 24px;
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+        border: none;
+        border-radius: 12px;
+        color: white;
+        font-size: 15px;
+        font-weight: 700;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        margin-bottom: 20px;
+      }
+
+      .btn-action-modern:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 8px 24px rgba(99,102,241,0.4);
+      }
+
+      .btn-action-modern span {
+        font-size: 20px;
+      }
+
+      /* 结果卡片 */
+      .result-box-modern {
+        margin-top: 20px;
+      }
+
+      .result-card-modern {
+        background: var(--bg-card);
+        border: 2px solid var(--border);
+        border-radius: 16px;
+        padding: 24px;
+        animation: fadeInUp 0.5s ease;
+      }
+
+      .result-section {
+        margin-bottom: 24px;
+      }
+
+      .result-section:last-child {
+        margin-bottom: 0;
+      }
+
+      .result-title {
+        margin: 0 0 12px;
+        font-size: 16px;
+        font-weight: 700;
+        color: var(--text-primary);
+      }
+
+      .result-text {
+        margin: 0;
+        font-size: 14px;
+        color: var(--text-primary);
+        line-height: 1.8;
+      }
+
+      /* 关键词标签 */
+      .keywords-modern {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
+      .keyword-tag {
+        padding: 6px 12px;
+        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+        color: white;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 600;
+      }
+
+      .result-meta {
+        padding-top: 16px;
+        border-top: 1px solid var(--border);
+        display: flex;
+        gap: 16px;
+      }
+
+      .meta-item {
+        font-size: 13px;
+        color: var(--text-secondary);
+      }
+
+      /* 评分显示 */
+      .score-display {
+        display: flex;
+        justify-content: center;
+        padding: 20px 0;
+      }
+
+      .score-circle {
+        width: 120px;
+        height: 120px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+      }
+
+      .score-inner {
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+        background: var(--bg-dark);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .score-value {
+        font-size: 32px;
+        font-weight: 800;
+        color: var(--text-primary);
+      }
+
+      .score-max {
+        font-size: 14px;
+        color: var(--text-secondary);
+      }
+
+      /* 成功消息 */
+      .success-message {
+        padding: 16px;
+        background: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(5,150,105,0.05) 100%);
+        border: 2px solid var(--success);
+        border-radius: 12px;
+        color: var(--success);
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .success-message span {
+        font-size: 20px;
+      }
+
+      /* 问题列表 */
+      .issues-list {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .issue-item {
+        padding: 12px;
+        background: var(--bg-dark);
+        border: 1px solid var(--border);
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .issue-type-badge {
+        padding: 4px 10px;
+        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+        color: white;
+        border-radius: 6px;
+        font-size: 11px;
+        font-weight: 700;
+        text-transform: uppercase;
+      }
+
+      .issue-message {
+        flex: 1;
+        font-size: 14px;
+        color: var(--text-primary);
+      }
+
+      /* 情感显示 */
+      .sentiment-display {
+        display: flex;
+        justify-content: center;
+        padding: 20px 0;
+      }
+
+      .sentiment-badge-large {
+        padding: 20px 40px;
+        border-radius: 16px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        color: white;
+      }
+
+      .sentiment-emoji {
+        font-size: 48px;
+      }
+
+      .sentiment-text {
+        font-size: 24px;
+        font-weight: 700;
+      }
+
+      .sentiment-stats {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .stat-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px;
+        background: var(--bg-dark);
+        border: 1px solid var(--border);
+        border-radius: 10px;
+      }
+
+      .stat-label {
+        font-size: 14px;
+        color: var(--text-secondary);
+      }
+
+      .stat-value {
+        font-size: 18px;
+        font-weight: 700;
+        color: var(--text-primary);
+      }
+
+      /* 空状态 */
+      .empty-state-small {
+        text-align: center;
+        padding: 40px 20px;
+      }
+
+      .empty-icon {
+        font-size: 48px;
+        margin-bottom: 16px;
+      }
+
+      .empty-state-small p {
+        margin: 0;
+        color: var(--text-secondary);
+        font-size: 14px;
+      }
+
+      /* 智能回复 */
+      .smart-replies-modern {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      /* 动画 */
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translateY(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      @keyframes slideInLeft {
+        from {
+          opacity: 0;
+          transform: translateX(-20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+
+      @keyframes slideInRight {
+        from {
+          opacity: 0;
+          transform: translateX(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+
+      /* 响应式 */
+      @media (max-width: 768px) {
+        .ai-assistant-panel-modern {
+          height: 90vh;
+        }
+
+        .assistant-tabs-modern {
+          overflow-x: auto;
+        }
+
+        .tab-btn-modern {
+          min-width: 80px;
+        }
+
+        .tab-label {
+          font-size: 11px;
+        }
+
+        .ai-message-bubble,
+        .user-message-bubble {
+          max-width: 85%;
+        }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  /**
+   * 显示智能回复
+   */
+  async showSmartReplies(message, container) {
+    const replies = await this.getSmartReplies(message);
+    
+    container.innerHTML = `
+      <div class="smart-replies-list">
+        ${replies.map(reply => `
+          <button class="smart-reply-btn">${reply}</button>
+        `).join('')}
+      </div>
+    `;
+
+    // 点击回复按钮
+    container.querySelectorAll('.smart-reply-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        // 触发自定义事件，将回复内容传递出去
+        window.dispatchEvent(new CustomEvent('smartReplySelected', {
+          detail: { reply: btn.textContent }
+        }));
+      });
+    });
+  }
+}
+