☰

Mathspace Interface with AI

Adds AI capabilities to Mathspace

  1. // ==UserScript==
  2. // @name         Mathspace Interface with AI
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Adds AI capabilities to Mathspace
  6. // @author       PrimeMinisteModiji1111111111
  7. // @match        https://*.mathspace.co/*
  8. // @match        https://mathspace.co/*
  9. // @grant        GM_addStyle
  10. // @grant        GM_xmlhttpRequest
  11. // @grant        GM_setValue
  12. // @grant        GM_getValue
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.     'use strict';
  17.  
  18.     // Add required styles - keeping most of the original styles but adjusting for Mathspace's design
  19.     const styles = `
  20.         /* Original styles remain largely the same, but with Mathspace-specific adjustments */
  21.         .ms-ai-container {
  22.             position: fixed;
  23.             bottom: 20px;
  24.             right: 20px;
  25.             z-index: 9999;
  26.             width: 400px;
  27.             background-color: white;
  28.             border-radius: 12px;
  29.             box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  30.             display: none;
  31.         }
  32.  
  33.         .ms-ai-header {
  34.             padding: 16px;
  35.             border-bottom: 1px solid #E5E7EB;
  36.             display: flex;
  37.             justify-content: space-between;
  38.             align-items: center;
  39.         }
  40.  
  41.         .ms-ai-toggle {
  42.             position: fixed;
  43.             bottom: 20px;
  44.             right: 20px;
  45.             z-index: 9999;
  46.             width: 60px;
  47.             height: 60px;
  48.             border-radius: 50%;
  49.             background: #12957D;
  50.             color: white;
  51.             display: flex;
  52.             align-items: center;
  53.             justify-content: center;
  54.             cursor: pointer;
  55.             box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  56.         }
  57.  
  58.         /* Reuse existing styles with ms- prefix */
  59.         .ms-search-form {
  60.             position: relative;
  61.             display: flex;
  62.             align-items: center;
  63.             width: 100%;
  64.             height: 40px;
  65.             background: white;
  66.             border: 1px solid #E5E7EB;
  67.             border-radius: 9999px;
  68.             padding: 8px 75px 8px 16px;
  69.             margin: 16px;
  70.         }
  71.  
  72.         /* Rest of the styles remain the same but with ms- prefix */
  73.         ${styles.replace(/mathful-/g, 'ms-')}
  74.     `;
  75.  
  76.     GM_addStyle(styles);
  77.  
  78.     // Create floating AI helper button and panel
  79.     function createAIHelper() {
  80.         // Create toggle button
  81.         const toggleButton = document.createElement('div');
  82.         toggleButton.className = 'ms-ai-toggle';
  83.         toggleButton.innerHTML = `
  84.             <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
  85.                 <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 16h2v-2h-2v2zm1.61-7.83c.04-.16.06-.32.06-.48 0-.88-.72-1.6-1.6-1.6s-1.6.72-1.6 1.6.72 1.6 1.6 1.6h.48l1.06 1.06v.52l-.72.72v.88l-.88.88v1.2h3.12v-1.2l-.88-.88v-.88l-.72-.72V11l1.08-1.08c.16.04.32.06.48.06.88 0 1.6-.72 1.6-1.6s-.72-1.6-1.6-1.6-1.6.72-1.6 1.6c0 .16.02.32.06.48L12 9.93l-.39-.39z" fill="currentColor"/>
  86.             </svg>
  87.         `;
  88.  
  89.         // Create AI helper panel
  90.         const helperPanel = document.createElement('div');
  91.         helperPanel.className = 'ms-ai-container';
  92.         helperPanel.innerHTML = `
  93.             <div class="ms-ai-header">
  94.                 <h3>Math AI Assistant</h3>
  95.                 <button class="ms-close-button">×</button>
  96.             </div>
  97.             <form class="ms-search-form">
  98.                 <input type="text" 
  99.                        class="ms-search-input" 
  100.                        placeholder="Ask about this problem" 
  101.                        required />
  102.                 <button type="submit" class="submit-button">
  103.                     <svg viewBox="0 0 24 24" width="20" height="20">
  104.                         <path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
  105.                     </svg>
  106.                 </button>
  107.             </form>
  108.             <div class="ms-ai-content"></div>
  109.         `;
  110.  
  111.         // Add to page
  112.         document.body.appendChild(toggleButton);
  113.         document.body.appendChild(helperPanel);
  114.  
  115.         // Toggle panel visibility
  116.         toggleButton.addEventListener('click', () => {
  117.             helperPanel.style.display = helperPanel.style.display === 'none' ? 'block' : 'none';
  118.         });
  119.  
  120.         // Close button functionality
  121.         const closeButton = helperPanel.querySelector('.ms-close-button');
  122.         closeButton.addEventListener('click', () => {
  123.             helperPanel.style.display = 'none';
  124.         });
  125.  
  126.         // Handle form submission
  127.         const searchForm = helperPanel.querySelector('.ms-search-form');
  128.         searchForm.addEventListener('submit', async (e) => {
  129.             e.preventDefault();
  130.             const input = searchForm.querySelector('.ms-search-input');
  131.             const query = input.value.trim();
  132.             if (query) {
  133.                 // Get current problem context
  134.                 const problemContext = getCurrentProblemContext();
  135.                 await handleAIQuery(query, problemContext);
  136.             }
  137.         });
  138.     }
  139.  
  140.     // Get the current problem context from Mathspace
  141.     function getCurrentProblemContext() {
  142.         // Extract problem information from the current page
  143.         const problemElement = document.querySelector('.question-text, .problem-statement');
  144.         const problemText = problemElement ? problemElement.textContent.trim() : '';
  145.         
  146.         // Get any relevant images
  147.         const problemImages = Array.from(document.querySelectorAll('.question-image, .problem-image'))
  148.             .map(img => img.src);
  149.  
  150.         return {
  151.             problemText,
  152.             problemImages,
  153.             url: window.location.href,
  154.             timestamp: new Date().toISOString()
  155.         };
  156.     }
  157.  
  158.     // Handle AI query
  159.     async function handleAIQuery(query, context) {
  160.         const aiContent = document.querySelector('.ms-ai-content');
  161.         aiContent.innerHTML = '<div class="loading">Processing your request...</div>';
  162.  
  163.         try {
  164.             // TODO: Replace with actual API call
  165.             const response = await simulateAIResponse(query, context);
  166.             
  167.             aiContent.innerHTML = `
  168.                 <div class="ms-ai-response">
  169.                     <div class="ms-ai-answer">${response.answer}</div>
  170.                     ${response.steps ? `<div class="ms-ai-steps">${response.steps}</div>` : ''}
  171.                 </div>
  172.             `;
  173.         } catch (error) {
  174.             aiContent.innerHTML = `<div class="error">Sorry, there was an error processing your request.</div>`;
  175.         }
  176.     }
  177.  
  178.     // Temporary function to simulate AI response
  179.     function simulateAIResponse(query, context) {
  180.         return new Promise((resolve) => {
  181.             setTimeout(() => {
  182.                 resolve({
  183.                     answer: `Here's how to solve this problem: ${query}`,
  184.                     steps: `<ol>
  185.                         <li>First, understand the problem</li>
  186.                         <li>Break it down into steps</li>
  187.                         <li>Apply relevant formulas</li>
  188.                         <li>Check your work</li>
  189.                     </ol>`
  190.                 });
  191.             }, 1000);
  192.         });
  193.     }
  194.  
  195.     // Initialize when page is loaded
  196.     window.addEventListener('load', () => {
  197.         createAIHelper();
  198.     });
  199.  
  200. })();
  201.