mygotalkeditor studio 1.0

源HTML编辑

<!DOCTYPE html>
<html lang="zh-CN">

<head> 
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>二次元聊天界面</title>
  
  <script src="https://cdn.tailwindcss.com"></script>
  
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#FF6B9C', // 二次元粉
            secondary: '#F0F0FF', // 浅紫背景
            dark: '#333366',
            'gray-light': '#E5E5FF',
            'gray-mid': '#9999CC',
            'gray-dark': '#666699',
            'accent': '#9A6BFF', // 二次元紫
          },
          fontFamily: {
            sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],
          },
        },
      }
    }
  </script>

<style type="text/tailwindcss">
    @layer utilities {
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .message-appear {
        animation: messageAppear 0.3s ease-out forwards;
      }
      .bubble-appear {
        animation: bubbleAppear 0.4s ease-out forwards;
      }
      .image-bubble-appear {
        animation: imageBubbleAppear 0.5s ease-out forwards;
      }
      .typing-indicator {
        display: flex;
        align-items: center;
      }
      .typing-indicator span {
        height: 6px;
        width: 6px;
        margin: 0 1px;
        background-color: #9999CC;
        border-radius: 50%;
        display: inline-block;
        animation: typing 1.4s infinite ease-in-out;
      }
      .typing-indicator span:nth-child(1) { animation-delay: 0s; }
      .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
      .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
      
      /* 下拉菜单样式 */
      .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        z-index: 100;
        min-width: 180px;
        overflow: hidden;
      }
      .dropdown-menu.show {
        display: block;
      }
      .dropdown-item {
      width:250px;
        padding: 10px 16px;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        transition: all 0.2s;
      }
      .dropdown-item:hover {
        background-color: #f5f5ff;
        color: #9A6BFF;
      }
      .dropdown-item i {
        margin-right: 8px;
        width: 20px;
        text-align: center;
      }
      
      /* 导出进度 */
      .export-progress {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(154, 107, 255, 0.95);
        color: white;
        padding: 25px 35px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        z-index: 10000;
        text-align: center;
        display: none;
        max-width: 300px;
      }
      .progress-bar {
        height: 8px;
        background: rgba(255,255,255,0.3);
        border-radius: 4px;
        margin: 15px 0;
        overflow: hidden;
      }
      .progress-fill {
        height: 100%;
        width: 0%;
        background: white;
        border-radius: 4px;
        transition: width 0.3s;
      }
    }
    
    @keyframes messageAppear {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes bubbleAppear {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }
    
    @keyframes imageBubbleAppear {
      from { opacity: 0; transform: scale(0.8); }
      to { opacity: 1; transform: scale(1); }
    }
    
    @keyframes typing {
      0%, 60%, 100% { transform: translateY(0); }
      30% { transform: translateY(-3px); }
    }
    
    /* 二次元风格调整 */
    .message-bubble {
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .user-message-bubble {
      background: #009DFF;
      color: white;
    }
    .character-avatar {
      border: 2px solid white;
      box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }
    
    /* 二次元装饰元素 */
    .anime-decoration {
      position: absolute;
      pointer-events: none;
      z-index: -1;
      opacity: 0.15;
    }
    .decoration-1 {
      top: 10%;
      left: 5%;
      width: 120px;
      height: 120px;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%23FF6B9C"/></svg>');
    }
    .decoration-2 {
      bottom: 10%;
      right: 5%;
      width: 80px;
      height: 80px;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,15 61,35 85,40 68,57 71,80 50,70 29,80 32,57 15,40 39,35" fill="%239A6BFF"/></svg>');
    }
    
    /* 导出提示 */
    .export-notice {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(154, 107, 255, 0.9);
      color: white;
      padding: 10px 20px;
      border-radius: 30px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      z-index: 1000;
      animation: fadeInOut 3s ease-in-out;
      display: none;
    }
    
    @keyframes fadeInOut {
      0% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
      15% { opacity: 1; transform: translateX(-50%) translateY(0); }
      85% { opacity: 1; transform: translateX(-50%) translateY(0); }
      100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    }
  </style>
</head>

<body class="bg-gray-100 min-h-screen font-sans relative">
  
  <div id="exportNotice" class="export-notice">
    <i class="fa fa-check-circle"></i> 聊天记录已导出为图片！
  </div>

<div id="exportProgress" class="export-progress">
    <i class="fa fa-spinner fa-spin fa-2x"></i>
    <h3 class="mt-3 mb-1 text-xl font-bold">正在导出聊天记录...</h3>
    <p id="progressText" class="text-sm opacity-80">准备中</p>
    <div class="progress-bar">
      <div id="progressFill" class="progress-fill"></div>
    </div>
  </div>

<div class="anime-decoration decoration-1"></div>
  <div class="anime-decoration decoration-2"></div>

<div id="animeChat" class="">
    
    <div class="chat-header bg-white shadow-sm border-b border-gray-200 rounded-t-lg relative">
      <div class="flex items-center justify-between p-0">
        <div class="flex items-center">
          <button class="text-gray-dark hover:text-primary transition-colors p-0">
            <i class="fa fa-arrow-left"></i>
          </button>
          <div class="ml-2">
            <h2 class="font-medium text-dark" id="chatTitle">聊天室</h2>
          </div>
        </div>
        <div class="flex items-center relative">
          <div class="relative">
            <button id="menuButton" class="text-gray-dark hover:text-primary transition-colors p-2">
              <i class="fa fa-ellipsis-h"></i>
            </button>
            
            <div id="dropdownMenu" class="dropdown-menu">
              <div class="dropdown-item" id="exportAllBtn">
                <i class="fa fa-image"></i> 导出全部记录为图片<br>(iframe内也有效+建议电脑端)
              </div>
              <div class="dropdown-item">
                <i class="fa fa-file-text"></i> todo1
              </div>
              <div class="dropdown-item">
                <i class="fa fa-cog"></i> todo2
              </div>
              <div class="dropdown-item">
                <i class="fa fa-info-circle"></i> todo3
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

<div class="chat-content h-[800px] overflow-y-auto p-4 space-y-4 bg-secondary scrollbar-hide" id="chatContent">
      
    </div>

<div class="chat-input bg-white border-t border-gray-200 rounded-b-lg shadow-sm">
      
      <div class="flex items-center justify-between p-2 border-b border-gray-100">
        <div class="flex items-center space-x-4">
          <button id="imageBtn" class="text-gray-mid hover:text-primary transition-colors p-2" title="发送图片">
            <i class="fa fa-image text-xl"></i>
          </button>
          <button class="text-gray-mid hover:text-primary transition-colors p-2">
            <i class="fa fa-smile-o text-xl"></i>
          </button>
        </div>
        <div class="flex items-center space-x-4">
          <button class="text-gray-mid hover:text-primary transition-colors p-2">
            <i class="fa fa-microphone text-xl"></i>
          </button>
          <button class="text-gray-mid hover:text-primary transition-colors p-2">
            <i class="fa fa-camera text-xl"></i>
          </button>
        </div>
      </div>

<div class="p-3 relative">
        <div class="flex items-center">
          <input type="text" id="messageInput" placeholder="输入消息..."
            class="flex-1 px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
          <button id="sendButton"
            class="ml-2 bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors opacity-50 pointer-events-none">
            发送
          </button>
        </div>
        
        <div id="imagePreview"
          class="hidden absolute bottom-full left-0 right-0 mt-2 p-2 bg-white rounded-lg shadow-md z-10 max-w-xs">
          <div class="flex items-center justify-between">
            <div id="previewImage" class="max-w-xs max-h-32"></div>
            <button id="removeImage" class="text-red-500 hover:text-red-700">
              <i class="fa fa-times"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

// 获取单例实例的静态方法
      static getInstance() {
        if (!AnimeChat.instance) {
          AnimeChat.instance = new AnimeChat();
        }
        return AnimeChat.instance;
      }
      constructor() {
        // 确保只创建一个实例
        if (AnimeChat.instance) {
          return AnimeChat.instance;
        }
        this.element = document.getElementById('animeChat');
        this.titleElement = document.getElementById('chatTitle');
        this.contentElement = document.getElementById('chatContent');
        this.messageInput = document.getElementById('messageInput');
        this.sendButton = document.getElementById('sendButton');
        this.imageBtn = document.getElementById('imageBtn');
        this.imagePreview = document.getElementById('imagePreview');
        this.previewImage = document.getElementById('previewImage');
        this.removeImage = document.getElementById('removeImage');
        this.menuButton = document.getElementById('menuButton');
        this.dropdownMenu = document.getElementById('dropdownMenu');
        this.exportAllBtn = document.getElementById('exportAllBtn');
        this.exportNotice = document.getElementById('exportNotice');
        this.exportProgress = document.getElementById('exportProgress');
        this.progressText = document.getElementById('progressText');
        this.progressFill = document.getElementById('progressFill');

// 图片相关变量
        this.selectedImage = null;

// 聊天角色配置
        this.characters = [];

// 初始化
        this.init();
                AnimeChat.instance = this; // 将实例赋值给静态属性
      }

init() {
        // 设置标题
        this.setTitle('群聊');

// 初始化事件监听
        this.setupEventListeners();
      }

// 设置聊天标题
      setTitle(title) {
        this.titleElement.textContent = title;
      }

// 添加角色
      添加人物(id, name, avatar, color, isUser = false) {
        this.characters.push({ id, name, avatar, color, isUser });
      }

// 添加文本消息
      add文本信息(characterId, message) {
        const character = this.characters.find(c => c.id === characterId);
        if (!character) {
          console.error(`角色ID ${characterId} 不存在！`);
          return;
        }

const now = new Date();
        const timeString = now.getHours().toString().padStart(2, '0') + ':' +
          now.getMinutes().toString().padStart(2, '0');

const messageElement = document.createElement('div');
        messageElement.className = `message-item flex items-start ${character.isUser ? 'justify-end' : ''} message-appear`;

const bubbleClass = character.isUser
          ? 'user-message-bubble'
          : 'bg-white';

const bubbleCorner = character.isUser
          ? 'rounded-tr-none'
          : 'rounded-tl-none';

const bubbleStyle = character.isUser
          ? ''
          : `border-left-color: ${character.color}; border-left-width: 3px;`;

let avatarSection = '';
        if (!character.isUser) {
          avatarSection = `
            <img src="${character.avatar}" alt="${character.name}" 
                 class="w-10 h-10 rounded-full object-cover character-avatar">
          `;
        }

messageElement.innerHTML = `
          ${avatarSection}
          <div class="${character.isUser ? 'mr-2' : 'ml-2'} max-w-[75%]">
            ${!character.isUser ? `<div class="text-xs text-gray-mid mb-1">${character.name}</div>` : ''}
            <div class="message-bubble ${bubbleClass} p-3 rounded-lg ${bubbleCorner} bubble-appear" style="${bubbleStyle}">
              <p class="${character.isUser ? 'text-white' : 'text-dark'}">${message}</p>
            </div>
            <div class="${character.isUser ? 'flex justify-end' : 'flex justify-start'} mt-1">
              ${character.isUser ? '<i class="fa fa-check-circle ml-1 text-white"></i>' : ''}
            </div>
          </div>
        `;

// 添加新消息
        this.contentElement.appendChild(messageElement);
      }

// 添加时间气泡
      addTimeBubble(timeText) {
        const bubbleElement = document.createElement('div');
        bubbleElement.className = 'flex justify-center message-appear';

const spanElement = document.createElement('span');
        spanElement.className = 'bg-gray-light text-gray-mid text-xs px-3 py-1 rounded-full';
        spanElement.textContent = timeText;

bubbleElement.appendChild(spanElement);

// 添加新消息
        this.contentElement.appendChild(bubbleElement);
      }

add气泡(Text) {
        const bubbleElement = document.createElement('div');
        bubbleElement.className = 'flex justify-center message-appear';

const spanElement = document.createElement('span');
        spanElement.className = 'text-base px-2 py-0 rounded-lg'; // Adjusted styling for a more cinematic effect
        spanElement.textContent = Text;

bubbleElement.appendChild(spanElement);

// Add the new message to the content
        this.contentElement.appendChild(bubbleElement);
      }

// 添加图片消息
      addMessage支持图片(characterId, content, isImageFirst = true) {
        const character = this.characters.find(c => c.id === characterId);
        if (!character) {
          console.error(`角色ID ${characterId} 不存在！`);
          return;
        }

const messageElement = document.createElement('div');
        messageElement.className = `message-item flex items-start ${character.isUser ? 'justify-end' : ''} message-appear`;

const bubbleClass = character.isUser
          ? 'user-message-bubble'
          : 'bg-white';

const bubbleCorner = character.isUser
          ? 'rounded-tr-none'
          : 'rounded-tl-none';

const bubbleStyle = character.isUser
          ? ''
          : `border-left-color: ${character.color}; border-left-width: 3px;`;

// 处理图片和文字内容
        let contentHTML = '';
        if (typeof content === 'string' && (content.startsWith('http') || content.startsWith('data:'))) {
          // 纯图片消息
          contentHTML = `
            <div class="flex items-center justify-center">
              <img src="${content}" alt="图片消息" class="max-w-[90%] max-h-[300px] rounded-lg object-cover image-bubble-appear">
            </div>
          `;
        } else if (typeof content === 'object' && content.image && content.text) {
          // 图片带文字或文字带图片
          if (isImageFirst) {
            contentHTML = `
              <div class="flex flex-col items-center">
                <img src="${content.image}" alt="图片消息" class="max-w-[90%] max-h-[200px] rounded-lg object-cover mb-2 image-bubble-appear">
                <p class="${character.isUser ? 'text-white' : 'text-dark'}">${content.text}</p>
              </div>
            `;
          } else {
            contentHTML = `
              <div>
                <p class="${character.isUser ? 'text-white' : 'text-dark'}">${content.text}</p>
                <img src="${content.image}" alt="图片消息" class="mt-2 max-w-[90%] max-h-[200px] rounded-lg object-cover image-bubble-appear">
              </div>
            `;
          }
        } else if (typeof content === 'string') {
          // 文字消息中包含图片链接（格式: [image:图片URL]）
          contentHTML = `
            <p class="${character.isUser ? 'text-white' : 'text-dark'}">
              ${content.replace(/\[image:(.*?)\]/g,
            '<div class="my-1 text-center"><img src="$1" alt="图片" class="max-w-[80%] max-h-[200px] rounded-lg object-cover image-bubble-appear"></div>')}
            </p>
          `;
        }

messageElement.innerHTML = `
          ${avatarSection}
          <div class="${character.isUser ? 'mr-2' : 'ml-2'} max-w-[75%]">
            ${!character.isUser ? `<div class="text-xs text-gray-mid mb-1">${character.name}</div>` : ''}
            <div class="message-bubble ${bubbleClass} p-3 rounded-lg ${bubbleCorner} bubble-appear" style="${bubbleStyle}">
              ${contentHTML}
            </div>
            <div class="${character.isUser ? 'flex justify-end' : 'flex justify-start'} mt-1">
              ${character.isUser ? '<i class="fa fa-check-circle ml-1 text-white"></i>' : ''}
            </div>
          </div>
        `;

// 添加新消息
        this.contentElement.appendChild(messageElement);
      }

// 显示"正在输入"指示器
      showTypingIndicator(characterId) {
        // 移除之前的"正在输入"提示
        this.hideTypingIndicator();

const character = this.characters.find(c => c.id === characterId);
        if (!character) return;

// 添加新的"正在输入"提示
        this.contentElement.appendChild(typingElement);
      }

// 添加左侧场景描述框（左对齐，宽度60%）
      add左气泡_有info(text, info) {
        const messageElement = document.createElement('div');
        messageElement.className = 'message-item flex items-start message-appear';

messageElement.innerHTML = `
          <div class="ml-4 max-w-[60%]">
            <div class="bg-gray-light/70 p-3 rounded-xl bubble-appear border border-gray-mid/30">
              <div class="flex justify-between items-center mb-2 pb-1">
                <div class="text-xs text-gray-dark font-medium">${info}</div>
              </div>
              <p class="text-gray-dark text-sm">${text}</p>
            </div>
          </div>
        `;

this.contentElement.appendChild(messageElement);
      }

// 添加右侧场景描述框（右对齐，宽度60%）
      add右气泡_有info(text, info) {
        const messageElement = document.createElement('div');
        messageElement.className = 'message-item flex items-start justify-end message-appear';

messageElement.innerHTML = `
          <div class="mr-4 max-w-[60%]">
            <div class="bg-gray-light/70 p-3 rounded-xl bubble-appear border border-gray-mid/30">
              <div class="flex justify-between items-center mb-2 pb-1">
                <div class="text-xs text-gray-dark font-medium">${info}</div>
              </div>
              <p class="text-gray-dark text-sm">${text}</p>
            </div>
          </div>
        `;

this.contentElement.appendChild(messageElement);
      }

// 添加左侧场景描述框 single版本 不要左上角（左对齐，宽度60%）
      add左气泡_无info(text) {
        const messageElement = document.createElement('div');
        messageElement.className = 'message-item flex items-start message-appear';

messageElement.innerHTML = `
          <div class="ml-4 max-w-[60%]">
            <div class="bg-gray-light/70 p-3 rounded-xl bubble-appear border border-gray-mid/30">
              <p class="text-gray-dark text-sm">${text}</p>
            </div>
          </div>
        `;

this.contentElement.appendChild(messageElement);
      }

// 添加右侧场景描述框 single版本 不要左上角（右对齐，宽度60%）
      add右气泡_无info(text) {
        const messageElement = document.createElement('div');
        messageElement.className = 'message-item flex items-start justify-end message-appear';

messageElement.innerHTML = `
          <div class="mr-4 max-w-[60%]">
            <div class="bg-gray-light/70 p-3 rounded-xl bubble-appear border border-gray-mid/30">
              <p class="text-gray-dark text-sm">${text}</p>
            </div>
          </div>
        `;

this.contentElement.appendChild(messageElement);
      }

// 更新导出进度
      updateProgress(percent, text) {
        this.progressFill.style.width = `${percent}%`;
        this.progressText.textContent = text;
      }

setupEventListeners() {
        // 发送按钮事件
        this.sendButton.addEventListener('click', () => this.handleSend());

// 输入内容监听
        this.messageInput.addEventListener('input', () => {
          this.updateSendButtonState();
        });

// 按Enter发送消息
        this.messageInput.addEventListener('keypress', (e) => {
          if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            this.handleSend();
          }
        });

// 菜单按钮事件
        this.menuButton.addEventListener('click', (e) => {
          e.stopPropagation();
          this.dropdownMenu.classList.toggle('show');
        });

// 导出按钮事件
        this.exportAllBtn.addEventListener('click', () => {
          this.exportChatToImage();
          this.dropdownMenu.classList.remove('show');
        });

// 点击其他地方关闭下拉菜单
        document.addEventListener('click', (e) => {
          if (!this.menuButton.contains(e.target)) {
            this.dropdownMenu.classList.remove('show');
          }
        });
      }

// 更新发送按钮状态
      updateSendButtonState() {
        if (this.messageInput.value.trim() !== '') {
          this.sendButton.classList.remove('opacity-50', 'pointer-events-none');
          this.sendButton.classList.add('opacity-100', 'pointer-events-auto');
        } else {
          this.sendButton.classList.add('opacity-50', 'pointer-events-none');
          this.sendButton.classList.remove('opacity-100', 'pointer-events-auto');
        }
      }

// 处理发送消息
      handleSend() {
        const message = this.messageInput.value.trim();
        if (message === '') return;

// 添加用户消息
        this.add文本信息('muto', message);

// 清空输入框
        this.messageInput.value = '';
        this.updateSendButtonState();

// 滚动到底部
        this.contentElement.scrollTop = this.contentElement.scrollHeight;
      }

async getAvatarUrl(characterName) {
        try {
          // 尝试从url.json获取头像
          const response = await fetch('https://bangbg.com/assets/url.json');
          const avatarData = await response.json();

// 检查是否有匹配的头像
          const avatarKey = `${characterName}头像`;
          if (avatarData[avatarKey]) {
            return avatarData[avatarKey];
          }

// 如果没有匹配的，尝试使用外部API获取随机头像
          return `https://picsum.photos/200/200?random=${Math.floor(Math.random() * 1000)}`;
        } catch (error) {
          console.error('获取头像URL失败:', error);
          // 如果都失败，返回默认头像
          return 'https://picsum.photos/200/200?random=default';
        }
      }

// 发送带右侧头像的消息
      async sendMessageWithAvatar(characterName, message, customAvatarUrl = null) {
        const a = AnimeChat.getInstance();
        const avatarUrl = customAvatarUrl || await this.getAvatarUrl(characterName);

// 临时添加人物信息（如果不存在）
        if (!a.characters.some(c => c.id === characterName)) {
          a.添加人物(
            characterName,
            characterName,
            avatarUrl,
            `#${Math.floor(Math.random() * 16777215).toString(16)}`,
            true
          );
        }

a.addMessage带头像(characterName, message);
      }

// 发送带左侧头像的消息
      async sendMessageWithLeftAvatar(characterName, message, customAvatarUrl = null) {
        const a = AnimeChat.getInstance();
        const avatarUrl = customAvatarUrl || await this.getAvatarUrl(characterName);

// 临时添加人物信息（如果不存在）
        if (!a.characters.some(c => c.id === characterName)) {
          console.log(`临时添加人物`);
          a.添加人物(
            characterName,
            characterName,
            avatarUrl,
            `#${Math.floor(Math.random() * 16777215).toString(16)}`,
            false
          );
        }

console.log(characterName);
        console.log(message);
        a.addMessage带头像_左(characterName, message);
      }
      // 这三个是为了适配bangbgeditor-mygotalk的函数
      // 发送不带右侧头像的右侧消息
      async sendMessageRightWithNoAvatar(characterName, message, customAvatarUrl = null) {
        const a = AnimeChat.getInstance();
        a.addMessage不带头像(characterName, message);
      }

// 发送不带左侧头像的左侧消息
      async sendMessageLeftWithNoAvatar(characterName, message, customAvatarUrl = null) {
        const a = AnimeChat.getInstance();
        a.addMessage不带头像_左(characterName, message);
      }

// 添加右侧文本消息（完全靠右）
      addMessage带头像(characterId, message) {
        const character = this.characters.find(c => c.id === characterId);
        if (!character) {
          console.error(`角色ID ${characterId} 不存在！`);
          return;
        }

const messageElement = document.createElement('div');
        messageElement.className = 'message-item flex justify-end message-appear'; // 添加 justify-end

messageElement.innerHTML = `
    <div class="flex items-start max-w-[75%]">
      <div class="mr-2 flex flex-col items-end">
        <div class="text-xs text-gray-mid mb-1">${character.name}</div>
        <div class="message-bubble user-message-bubble p-3 rounded-lg rounded-tr-none bubble-appear">
          <p class="text-white">${message}</p>
        </div>
      </div>
      <img src="${character.avatar}" alt="${character.name}" 
           class="w-10 h-10 rounded-full object-cover character-avatar">
    </div>
  `;

this.contentElement.appendChild(messageElement);
        this.contentElement.scrollTop = this.contentElement.scrollHeight;
      }

// 添加左侧文本消息（完全靠左）
      addMessage不带头像_左(characterId, message) {

const messageElement = document.createElement('div');
        messageElement.className = 'message-item flex message-appear';

messageElement.innerHTML = `
          <div class="flex items-start max-w-[75%]">
            <div class="flex flex-col">
          <div class="message-bubble character-message-bubble p-3 rounded-lg rounded-tl-none bubble-appear"
               style="border: 1px solid #D3D3D3; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
                <p class="text-gray-800">${message}</p>
              </div>
            </div>
          </div>
        `;

this.contentElement.appendChild(messageElement);
      }

// 添加右侧用户消息（完全靠右）
addMessage不带头像(userId, message) {
  const messageElement = document.createElement('div');
  messageElement.className = 'message-item flex justify-end message-appear'; // 通过 flex 反向布局

messageElement.innerHTML = `
    <div class="flex items-start max-w-[75%]">
      <div class="flex flex-col items-end">
        <div class="message-bubble user-message-bubble p-3 rounded-lg rounded-tr-none bubble-appear"
             style="border: 1px solid #D3D3D3; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
          <p class="text-white">${message}</p>
        </div>
      </div>
    </div>
  `;

this.contentElement.appendChild(messageElement);
  this.contentElement.scrollTop = this.contentElement.scrollHeight;
}

// 添加带右侧头像的文本消息（完全靠右）
      addMessage带头像(characterId, message) {
        const character = this.characters.find(c => c.id === characterId);
        if (!character) {
          console.error(`角色ID ${characterId} 不存在！`);
          return;
        }

const messageElement = document.createElement('div');
        messageElement.className = 'message-item flex justify-end message-appear'; // 添加 justify-end

messageElement.innerHTML = `
    <div class="flex items-start max-w-[75%]">
      <div class="mr-2 flex flex-col items-end">
        <div class="text-xs text-gray-mid mb-1">${character.name}</div>
        <div class="message-bubble user-message-bubble p-3 rounded-lg rounded-tr-none bubble-appear"
        style="border: 1px solid #D3D3D3; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
          <p class="text-white">${message}</p>
        </div>
      </div>
      <img src="${character.avatar}" alt="${character.name}" 
           class="w-10 h-10 rounded-full object-cover character-avatar">
    </div>
  `;

this.contentElement.appendChild(messageElement);
        this.contentElement.scrollTop = this.contentElement.scrollHeight;
      }

// 添加带左侧头像的文本消息（完全靠左）
      addMessage带头像_左(characterId, message) {
        const character = this.characters.find(c => c.id === characterId);
        if (!character) {
          console.error(`角色ID ${characterId} 不存在！`);
          return;
        }

const messageElement = document.createElement('div');
        messageElement.className = 'message-item flex message-appear'; // 左侧不需要 justify-end

messageElement.innerHTML = `
    <div class="flex items-start max-w-[75%]">
      <img src="${character.avatar}" alt="${character.name}" 
          class="w-10 h-10 rounded-full object-cover character-avatar mr-2">
      <div class="flex flex-col">
        <div class="text-xs text-gray-mid mb-1">${character.name}</div>
          <div class="message-bubble character-message-bubble p-3 rounded-lg rounded-tl-none bubble-appear"
               style="border: 1px solid #D3D3D3; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
          <p class="text-gray-800">${message}</p>
        </div>
      </div>
    </div>
  `;

this.contentElement.appendChild(messageElement);
      }

// 添加带右侧头像的文本消息

// 添加带右侧头像的图片消息
      addMessage支持图片WithAvatar(characterId, imageUrl, caption = '') {
        const character = this.characters.find(c => c.id === characterId);
        if (!character) {
          console.error(`角色ID ${characterId} 不存在！`);
          return;
        }

const messageElement = document.createElement('div');
        messageElement.className = 'message-item flex items-start justify-end message-appear';

messageElement.innerHTML = `
          <div class="mr-2 max-w-[75%]">
            <div class="flex justify-end text-xs text-gray-mid mb-1">${character.name}</div>
            <div class="message-bubble user-message-bubble p-1 rounded-lg rounded-tr-none image-bubble-appear">
              <img src="${imageUrl}" alt="发送的图片" class="max-w-full rounded-lg">
              ${caption ? `<p class="text-white mt-2 px-2">${caption}</p>` : ''}
            </div>
          </div>
          <img src="${character.avatar}" alt="${character.name}" 
               class="w-10 h-10 rounded-full object-cover character-avatar ml-2">
        `;

this.contentElement.appendChild(messageElement);
      }

// 导出聊天记录为图片（完整版）old version  新版本一直error
      exportChatToImage() {
            // 1. 先关闭右上角隐藏菜单
  this.dropdownMenu.classList.remove('show');
        // 显示导出进度
        this.exportProgress.style.display = 'block';
        this.updateProgress(0, '准备导出...');

// 克隆整个聊天内容区域
        const contentClone = this.contentElement.cloneNode(true);
        contentClone.style.position = 'absolute';
        contentClone.style.left = '-9999px';
        contentClone.style.top = '0';
        contentClone.style.width = this.contentElement.clientWidth + 'px';
        contentClone.style.height = 'auto';
        contentClone.style.overflow = 'visible';
        contentClone.style.padding = this.contentElement.style.padding;
        contentClone.style.backgroundColor = this.contentElement.style.backgroundColor;

// 添加到文档中
        document.body.appendChild(contentClone);

// 更新进度
        this.updateProgress(20, '正在处理内容...');

//官网解决方案

const style = document.createElement('style');
        document.head.appendChild(style);
        style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');

// 使用html2canvas截图
        html2canvas(contentClone, {
          backgroundColor: '#F0F0FF',
          scale: 2,
          useCORS: true,
          logging: false,
          async: true,
          onclone: (doc) => {
            // 确保所有资源都加载完成
            const images = doc.querySelectorAll('img');
            let loadedCount = 0;
            const totalImages = images.length;

images.forEach(img => {

if (img.complete) {
                loadedCount++;
              } else {
                img.onload = () => {
                  loadedCount++;
                  this.updateProgress(20 + Math.floor(60 * loadedCount / totalImages),
                    `加载图片中... (${loadedCount}/${totalImages})`);

if (loadedCount === totalImages) {
                    this.updateProgress(90, '正在生成截图...');
                  }
                };
              }
            });

// 如果没有图片，直接进入下一步
            if (totalImages === 0) {
              this.updateProgress(90, '正在生成截图...');
            }
          }
        }).then(canvas => {
          style.remove();
          // 创建下载链接
          const link = document.createElement('a');
          link.download = `聊天记录-${new Date().toLocaleDateString()}.png`;
          link.href = canvas.toDataURL('image/png');

// 移除克隆节点
          document.body.removeChild(contentClone);

// 完成导出
          this.updateProgress(100, '导出完成！');

setTimeout(() => {
            this.exportProgress.style.display = 'none';
            link.click();

// 显示导出成功提示
            this.exportNotice.style.display = 'block';
            setTimeout(() => {
              this.exportNotice.style.display = 'none';
            }, 3000);
          }, 500);
        }).catch(error => {
          console.error('导出失败:', error);
          this.updateProgress(0, '导出失败！');
          setTimeout(() => {
            this.exportProgress.style.display = 'none';
          }, 1500);

// 移除克隆节点
          document.body.removeChild(contentClone);
        });
      }

addMessage支持图片_single(content, isImageFirst = true, alignLeft = true) {
    const messageElement = document.createElement('div');
    messageElement.className = `message-item flex items-start ${alignLeft ? 'justify-start' : 'justify-end'} message-appear`;

// 定义气泡样式类
    const bubbleClass = alignLeft ? 'bg-white' : 'user-message-bubble';
    const bubbleCorner = alignLeft ? 'rounded-tl-none' : 'rounded-tr-none';
    const bubbleStyle = alignLeft ? '' : '';

// 处理内容 - 正确的优先级顺序
    let contentHTML = '';
    
    // 1. 首先检查是否是纯图片URL
    if (typeof content === 'string' && (content.startsWith('http') || content.startsWith('data:'))) {
        contentHTML = `
            <div class="flex items-center justify-center">
                <img src="${content}" alt="图片消息" class="max-w-[90%] max-h-[300px] rounded-lg object-cover image-bubble-appear">
            </div>
        `;
    } 
    // 2. 检查是否是包含[image:...]标记的内容
    else if (typeof content === 'string' && /$$image:(.*?)$$/.test(content)) {
        contentHTML = content.replace(/$$image:(.*?)$$/g, 
            '<div class="my-1 text-center"><img src="$1" alt="图片" class="max-w-[80%] max-h-[200px] rounded-lg object-cover image-bubble-appear"></div>');
    }
    // 3. 检查是否是包含图片和文字的对象
    else if (typeof content === 'object' && content.image) {
        if (isImageFirst) {
            contentHTML = `
                <div class="flex flex-col items-center">
                    <img src="${content.image}" alt="图片消息" class="max-w-[90%] max-h-[200px] rounded-lg object-cover mb-2 image-bubble-appear">
                    ${content.text ? `<p class="${alignLeft ? 'text-dark' : 'text-white'}">${content.text}</p>` : ''}
                </div>
            `;
        } else {
            contentHTML = `
                <div>
                    ${content.text ? `<p class="${alignLeft ? 'text-dark' : 'text-white'}">${content.text}</p>` : ''}
                    <img src="${content.image}" alt="图片消息" class="mt-2 max-w-[90%] max-h-[200px] rounded-lg object-cover image-bubble-appear">
                </div>
            `;
        }
    }
    // 4. 最后作为纯文本处理
    else {
        contentHTML = `
            <p class="${alignLeft ? 'text-dark' : 'text-white'}">${content}</p>
        `;
    }

messageElement.innerHTML = `
        <div class="${alignLeft ? 'ml-2' : 'mr-2'} max-w-[75%]">
            ${!alignLeft ? `<div class="text-xs text-gray-mid mb-1"></div>` : ''}
            <div class="message-bubble ${bubbleClass} p-3 rounded-lg ${bubbleCorner} bubble-appear" style="${bubbleStyle}">
                ${contentHTML}
            </div>
            <div class="${alignLeft ? 'flex justify-start' : 'flex justify-end'} mt-1">
                ${!alignLeft ? '<i class="fa fa-check-circle ml-1 text-white"></i>' : ''}
            </div>
        </div>
    `;

// 添加新消息
    this.contentElement.appendChild(messageElement);
    this.contentElement.scrollTop = this.contentElement.scrollHeight;
}
     // 由于神秘的bug 我必须得提前引入这个东西  我也不知道为什么 但是这样就可以支持导出图片了
__addMessage永远不要使用(characterId, message) {
    const character = this.characters.find(c => c.id === characterId);
    if (!character) {
      console.error(`角色ID ${characterId} 不存在！`);
      return;
    }

const messageElement = document.createElement('div');
    messageElement.className = 'message-item flex justify-end message-appear'; // 添加 justify-end

messageElement.innerHTML = `
      <div class="flex items-start max-w-[75%]">
        <div class="mr-2 flex flex-col items-end">
          <div class="text-xs text-gray-mid mb-1">${character.name}</div>
        </div>
        <img src="${character.avatar}" alt="${character.name}" 
             class="w-10 h-1 rounded-full object-cover character-avatar">
      </div>
    `;

// 设置行内样式来调整大小
    messageElement.style.fontSize = '10rem'; // 调整字体大小
    messageElement.style.width = '3px';        // 设置宽度
    messageElement.style.height = '3px';      // 设置高度
    messageElement.style.padding = '5px';      // 设置内边距

this.contentElement.appendChild(messageElement);
    this.contentElement.scrollTop = this.contentElement.scrollHeight;
}

}

a = new AnimeChat(); 
    a.添加人物('muto', ' ', 'https://picsum.photos/200/200?random=201', '#FF99C3', true);

// 如果将来这里出问题就换一个可以跨域的tu的外链就好
      a.__addMessage永远不要使用('muto', '这是带右侧头像的主体发言');

// 初始化 这个 不需要了
    // document.addEventListener('DOMContentLoaded', () => {

// });
  </script>

</body>