☰

AesirChat - Fundo com Orb (Simplificado)

Permite mudar a imagem de fundo com um orb flutuante no AesirChat (sem configuração de bolhas)

// ==UserScript==
// @name         AesirChat - Fundo com Orb (Simplificado)
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Permite mudar a imagem de fundo com um orb flutuante no AesirChat (sem configuração de bolhas)
// @author       Você
// @match        https://aesirchat.com/app/accounts/*/conversations/*
// @grant        none
// @license MIT

// ==/UserScript==

(function () {
  'use strict';

  const waitForElement = (selector, callback) => {
    const check = () => {
      const el = document.querySelector(selector);
      if (el) callback(el);
      else setTimeout(check, 500);
    };
    check();
  };

  const initOrb = () => {
    if (document.getElementById('chatCustomizationOrb')) return;

    // ORB
    const orb = document.createElement('div');
    orb.id = 'chatCustomizationOrb';
    orb.style = `
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      background: radial-gradient(circle at center, #0af, #05a);
      border-radius: 50%;
      cursor: pointer;
      z-index: 99999;
      box-shadow: 0 0 10px #0af;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
    `;
    orb.textContent = '🖼️';
    document.body.appendChild(orb);

    // PAINEL
    const panel = document.createElement('div');
    panel.id = 'chatCustomizationPopup';
    panel.style = `
      position: fixed;
      bottom: 80px;
      right: 20px;
      width: 300px;
      background: #222;
      color: white;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 0 20px #0af;
      font-family: sans-serif;
      font-size: 14px;
      display: none;
      z-index: 99999;
    `;
    panel.innerHTML = `
      <h3 style="margin-top:0;">Imagem de Fundo</h3>
      <label>Link da imagem:<br>
        <input type="url" id="bgImageInput" placeholder="https://..." style="width: 100%; margin-top:6px; background:#333; color:#fff; border:none; border-radius:4px; padding:6px;">
      </label>
      <button id="saveChatSettings" style="margin-top:15px; width: 100%; padding: 10px; background:#0af; border:none; border-radius:4px; color:#fff; font-weight:bold; cursor:pointer;">Aplicar</button>
    `;
    document.body.appendChild(panel);

    // Toggle
    orb.onclick = () => {
      panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
    };

    // Load saved config
    const saved = JSON.parse(localStorage.getItem('chatBgConfig') || '{}');
    if (saved.bgImage) panel.querySelector('#bgImageInput').value = saved.bgImage;

    // Apply background
    const applyBackground = (url) => {
      const panel = document.querySelector('.conversation-panel.bg-n-background');
      if (panel) {
        panel.style.backgroundImage = `url(${url})`;
        panel.style.backgroundSize = 'cover';
        panel.style.backgroundPosition = 'center';
        panel.style.backgroundRepeat = 'no-repeat';
        panel.style.backgroundAttachment = 'fixed';
      }
    };

    // Salvar botão
    panel.querySelector('#saveChatSettings').onclick = () => {
      const bgImage = panel.querySelector('#bgImageInput').value.trim();
      localStorage.setItem('chatBgConfig', JSON.stringify({ bgImage }));
      applyBackground(bgImage);
      alert('Imagem aplicada!');
    };

    // Aplica automaticamente ao carregar
    applyBackground(saved.bgImage);

    // Observa mudanças na conversa (pra manter o fundo)
    const observer = new MutationObserver(() => {
      const latest = JSON.parse(localStorage.getItem('chatBgConfig') || '{}');
      applyBackground(latest.bgImage);
    });

    const panelContainer = document.querySelector('.conversation-panel.bg-n-background');
    if (panelContainer) {
      observer.observe(panelContainer, { childList: true, subtree: true });
    }
  };

  // Inicia quando conversa estiver carregada
  waitForElement('.conversation-panel.bg-n-background', initOrb);
})();