ChatGPT Advanced Controls Toolbar-2.0.user.js

// ==UserScript==
// @name         ChatGPT Advanced Controls Toolbar
// @namespace    https://example.com/
// @version      2.0
// @description  A frosted-glass, collapsible toolbar for ChatGPT that matches your system theme, with improved light mode contrast.
// @match        https://chatgpt.com/*
// @author       Cole Rohan (coletrohan@gmail.com)
// @run-at       document-end
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(function() {
  'use strict';
  console.log("[FrostedGlassToolbar] Script started.");

  /********************************************************
   * 1. MASTER DATA & HELPER FUNCTIONS
   ********************************************************/

  const ROLES = [
    "Software Developer", "Chef", "Financial Advisor", "Motivational Coach",
    "Language Tutor", "Business Consultant", "AI developer", "Artist", "Recipe Guru",
    "E-commerce Expert", "Researcher", "Futurist", "UX Designer", "Marketing Coach",
    "Health Coach", "Project Manager", "Writer", "Journalist", "Game Designer",
    "Relationship Advisor", "Quick Problem Solver", "Scientist", "Pro Blogger",
    "Startup Founder", "Travel Blogger", "Tech Evangelist", "Life Coach", "Music Composer",
    "Teacher", "Philosopher", "Politician", "Lawyer", "Doctor", "Therapist", "Engineer"
  ];

  const TONES = [
    "Informative", "Inspirational", "Formal", "Respectful", "Persuasive", "Reflective",
    "Critical", "Friendly", "Professional", "Casual", "Empowering", "Optimistic",
    "Encouraging", "Instructional", "Concise", "Emotional", "Upbeat", "Analytical",
    "Gentle", "Harsh", "Dark", "Mysterious", "Sarcastic", "Empathetic", "Technical",
    "Soothing", "Irreverent", "Satirical", "Inquisitive", "Witty", "Engaging",
    "Serious", "Energetic", "Conversational", "Bold", "Dramatic", "Summarize",
    "Hypothesize", "Suggest", "Evaluate", "Argue", "Propose", "Explain", "Analyze",
    "Question", "Reiterate", "Synthesize", "Excited"
  ];

  const INSTRUCTIONS = [
    "Create", "Inspire", "Report", "Suggest", "Reflect", "Summarize", "Evaluate",
    "Argue", "Teach", "Simplify", "Illustrate", "Hypothesize", "Devise", "Brainstorm",
    "Expand", "Condense", "Justify", "Analyze", "Propose", "Explain", "Question",
    "Reiterate", "Synthesize", "Excited"
  ];

  const LENGTH_STEPS = {
    1: "Crisp",
    2: "Short",
    3: "Medium",
    4: "Extended",
    5: "Expanded",
    6: "Long",
    7: "Very long",
    8: "Custom"
  };

  const CONTENT_TYPES = [
    "Article", "Blog", "Resume", "Video Script", "Code", "Chat Script", "Poem",
    "Social Post", "Email", "Novel", "Game Manual", "Technical Document",
    "System Analysis", "Policy", "Letter", "Memo", "Interview", "News Release",
    "Manual", "Explanation", "Analysis", "Presentation", "QnA", "Test", "Whitepaper",
    "Eulogy", "Rant", "Proof", "Script", "Recipe", "Ad Copy", "Short Story",
    "Brainstorming Outline", "Marketing Plan", "SEO Content", "Book Chapter", "Song",
    "Lullaby", "Limerick", "ASCII Art", "VR Script", "AR Script", "DnD Campaign",
    "Film Scene", "Theater Script", "Story Outline", "Vision", "Roadmap",
    "Flowchart description", "Step by step guide"
  ];

  const FORMATS = [
    "Plain Text (.txt)", "HTML (.html)", "Markdown (.md)", "CSV (.csv)",
    "JSON (.json)", "XML (.xml)", "LaTeX (.tex)", "PDF (.pdf)", "Word Doc (.docx)",
    "PowerPoint (.pptx)", "ePub (.epub)", "RTF (.rtf)", "Rich Script (.rsc)",
    "Ruby Script (.rb)", "Perl Script (.pl)", "C Code (.c)", "Java Code (.java)",
    "Python Code (.py)", "Shell Script (.sh)", "JavaScript Code (.js)",
    "TypeScript Code (.ts)", "Assembly Code (.asm)", "Go Code (.go)", "Swift Code (.swift)",
    "Visual Basic (.vb)", "Batch Script (.bat)", "Bash Script (.bash)", "ASCII Art",
    "JSON-LD", "Terraform Script (.tf)", "GraphQL Schema", "Chatbot code", "Regex"
  ];

  const TARGET_AUDIENCES = [
    "Students", "Professionals", "Researchers", "Developers", "Families", "Elderly",
    "Children", "Managers", "Government Executives", "Voters", "Investors", "Healthcare",
    "Data Scientists", "Travelers", "Activists", "Teachers", "Entrepreneurs", "Creators",
    "Visionaries", "Artists", "Gamers", "Designers", "Techies", "Non-tech", "Historians",
    "Philosophers"
  ];

  const PLACEHOLDER_MAP = {};
  ROLES.forEach(role => {
    PLACEHOLDER_MAP[role] = {
      about: `E.g. "General topic for ${role}..."`,
      inclusion: 'E.g. "specific examples, references"',
      exclusion: 'E.g. "irrelevant content"'
    };
  });

  function storeValue(key, value) {
    try {
      GM_setValue(key, value);
    } catch(e) {
      localStorage.setItem(key, JSON.stringify(value));
    }
  }
  function getValue(key, defaultValue) {
    try {
      return GM_getValue(key, defaultValue);
    } catch(e) {
      const stored = localStorage.getItem(key);
      return stored ? JSON.parse(stored) : defaultValue;
    }
  }

  function createEl(tag, options = {}, children = []) {
    const el = document.createElement(tag);
    for (const [attr, val] of Object.entries(options)) {
      if (attr === 'style') {
        Object.assign(el.style, val);
      } else if (attr.startsWith('on') && typeof val === 'function') {
        el.addEventListener(attr.substring(2), val);
      } else {
        el.setAttribute(attr, val);
      }
    }
    children.forEach(child => {
      if (typeof child === 'string') {
        el.textContent = child;
      } else {
        el.appendChild(child);
      }
    });
    return el;
  }

  function createInfoIcon(tooltip) {
    return createEl('span', { class: 'info-icon', 'data-tooltip': tooltip }, [' i ']);
  }

  function buildPrompt(data) {
    let prompt = `Act as ${data.role}, use a ${data.tone} tone.\n`;
    prompt += `Instruction: ${data.instruction}.\n`;
    let lengthLabel = LENGTH_STEPS[data.lengthStep];
    if (data.lengthStep === 8 && data.lengthNumber) {
      lengthLabel = `${data.lengthNumber} words`;
    }
    prompt += `Length: ${lengthLabel}.\n`;
    prompt += `Content type: ${data.contentType}, Format: ${data.format}.\n`;
    prompt += `Target Audience: ${data.targetAudience}.\n`;
    if (data.about) prompt += `About: ${data.about}\n`;
    if (data.inclusion) prompt += `Include: ${data.inclusion}\n`;
    if (data.exclusion) prompt += `Exclude: ${data.exclusion}\n`;
    return prompt.trim();
  }

  function insertPromptIntoChatGPT(prompt) {
    const pmElem = document.querySelector('#prompt-textarea');
    if (!pmElem) {
      console.warn("[FrostedGlassToolbar] Could not find #prompt-textarea.");
      return;
    }
    pmElem.innerHTML = '';
    pmElem.focus();
    const range = document.createRange();
    range.selectNodeContents(pmElem);
    range.deleteContents();
    range.insertNode(document.createTextNode(prompt));
    pmElem.dispatchEvent(new Event('input', { bubbles: true }));
  }

  /********************************************************
   * 2. BUILD THE UI
   ********************************************************/

  let savedPresets = getValue('chatgpt_presets_v8', []);
  console.log("[FrostedGlassToolbar] Existing presets:", savedPresets);

  const toolbar = createEl('div', { id: 'chatgpt-toolbar' });

  // Use a single side toggle button.
  const sideToggleBtn = createEl('button', {
    id: 'sideToggleBtn',
    onclick: () => {
      if (toolbar.classList.contains('collapsed')) {
        toolbar.classList.remove('collapsed');
        sideToggleBtn.textContent = '◀';
      } else {
        toolbar.classList.add('collapsed');
        sideToggleBtn.textContent = '▶';
      }
      updateSideToggleBtn();
    }
  }, ['▶']);

  const titleEl = createEl('h3', {}, ['ChatGPT Tools v1.0']);
  const subheaderEl = createEl('div', { id: 'subheader' }, ['Created by Cole Rohan']);

  const roleLabel = createEl('label', {}, [
    'Role: ',
    createInfoIcon("Specifies the persona ChatGPT should adopt (e.g., Software Developer).")
  ]);
  const roleSelect = createEl('select', { id: 'roleSelect' },
    ROLES.map(r => createEl('option', { value: r }, [r]))
  );

  const toneLabel = createEl('label', {}, [
    'Tone: ',
    createInfoIcon("Sets the style/mood (e.g., Formal, Casual).")
  ]);
  const toneSelect = createEl('select', { id: 'toneSelect' },
    TONES.map(t => createEl('option', { value: t }, [t]))
  );

  const instructionLabel = createEl('label', {}, [
    'Instruction: ',
    createInfoIcon("Specifies what ChatGPT should do (e.g., Summarize, Explain).")
  ]);
  const instructionSelect = createEl('select', { id: 'instructionSelect' },
    INSTRUCTIONS.map(i => createEl('option', { value: i }, [i]))
  );

  const lengthLabel = createEl('label', {}, [
    'Length: ',
    createInfoIcon("Pick a preset length (1–7) or 'Custom' (8) for an exact word count.")
  ]);
  const lengthRange = createEl('input', { type: 'range', id: 'lengthRange', min: '1', max: '8', value: '3', step: '1' });
  const lengthRangeValue = createEl('span', { id: 'lengthRangeValue' }, [LENGTH_STEPS[3]]);
  const lengthNumberInput = createEl('input', { type: 'text', id: 'lengthNumberInput', style: { display: 'none' }, placeholder: 'e.g., 500' });
  lengthRange.addEventListener('input', () => {
    const val = parseInt(lengthRange.value, 10);
    lengthRangeValue.textContent = LENGTH_STEPS[val];
    if (val === 8) {
      lengthNumberInput.style.display = '';
    } else {
      lengthNumberInput.style.display = 'none';
    }
  });

  const contentTypeLabel = createEl('label', {}, [
    'Content Type: ',
    createInfoIcon("The type of content (e.g., Article, Code).")
  ]);
  const contentTypeSelect = createEl('select', { id: 'contentTypeSelect' },
    CONTENT_TYPES.map(ct => createEl('option', { value: ct }, [ct]))
  );

  const formatLabel = createEl('label', {}, [
    'Format: ',
    createInfoIcon("Output format (e.g., Markdown, JSON).")
  ]);
  const formatSelect = createEl('select', { id: 'formatSelect' },
    FORMATS.map(f => createEl('option', { value: f }, [f]))
  );

  const targetAudienceLabel = createEl('label', {}, [
    'Target Audience: ',
    createInfoIcon("Who is this content intended for?")
  ]);
  const targetAudienceSelect = createEl('select', { id: 'targetAudienceSelect' },
    TARGET_AUDIENCES.map(a => createEl('option', { value: a }, [a]))
  );

  const aboutLabel = createEl('label', {}, [
    'About: ',
    createInfoIcon("Brief context or topic (dynamic based on Role).")
  ]);
  const aboutInput = createEl('input', { type: 'text', id: 'aboutInput', placeholder: 'E.g. "Building scalable APIs in Node.js"' });

  const inclusionLabel = createEl('label', {}, [
    'Include: ',
    createInfoIcon("Key points to include (e.g., code snippets).")
  ]);
  const inclusionInput = createEl('input', { type: 'text', id: 'inclusionInput', placeholder: 'E.g. "performance tips, examples"' });

  const exclusionLabel = createEl('label', {}, [
    'Exclude: ',
    createInfoIcon("Topics/details to avoid.")
  ]);
  const exclusionInput = createEl('input', { type: 'text', id: 'exclusionInput', placeholder: 'E.g. "irrelevant details"' });

  const generateBtn = createEl('button', {
    id: 'generateBtn',
    onclick: () => {
      console.log("[FrostedGlassToolbar] Generate Prompt clicked.");
      const data = {
        role: roleSelect.value,
        tone: toneSelect.value,
        instruction: instructionSelect.value,
        lengthStep: parseInt(lengthRange.value, 10),
        lengthNumber: lengthNumberInput.value.trim(),
        contentType: contentTypeSelect.value,
        format: formatSelect.value,
        targetAudience: targetAudienceSelect.value,
        about: aboutInput.value.trim(),
        inclusion: inclusionInput.value.trim(),
        exclusion: exclusionInput.value.trim()
      };
      const prompt = buildPrompt(data);
      console.log("[FrostedGlassToolbar] Prompt built:", prompt);
      insertPromptIntoChatGPT(prompt);
    }
  }, ['Generate Prompt']);

  const presetNameInput = createEl('input', { type: 'text', id: 'presetNameInput', placeholder: 'Preset Name' });
  const savePresetBtn = createEl('button', {
    onclick: () => {
      const newPreset = {
        name: presetNameInput.value || `Preset ${savedPresets.length + 1}`,
        role: roleSelect.value,
        tone: toneSelect.value,
        instruction: instructionSelect.value,
        lengthStep: parseInt(lengthRange.value, 10),
        lengthNumber: lengthNumberInput.value.trim(),
        contentType: contentTypeSelect.value,
        format: formatSelect.value,
        targetAudience: targetAudienceSelect.value,
        about: aboutInput.value.trim(),
        inclusion: inclusionInput.value.trim(),
        exclusion: exclusionInput.value.trim()
      };
      savedPresets.push(newPreset);
      storeValue('chatgpt_presets_v8', savedPresets);
      updatePresetList();
      presetNameInput.value = '';
      console.log("[FrostedGlassToolbar] Preset saved:", newPreset);
    }
  }, ['Save Preset']);

  const presetSelect = createEl('select', {
    id: 'presetSelect',
    onchange: () => {
      const idx = presetSelect.selectedIndex - 1;
      if (idx >= 0) {
        const p = savedPresets[idx];
        roleSelect.value = p.role;
        toneSelect.value = p.tone;
        instructionSelect.value = p.instruction;
        lengthRange.value = p.lengthStep;
        lengthRangeValue.textContent = LENGTH_STEPS[p.lengthStep];
        if (p.lengthStep === 8) {
          lengthNumberInput.style.display = '';
          lengthNumberInput.value = p.lengthNumber || '';
        } else {
          lengthNumberInput.style.display = 'none';
        }
        contentTypeSelect.value = p.contentType;
        formatSelect.value = p.format;
        targetAudienceSelect.value = p.targetAudience;
        aboutInput.value = p.about;
        inclusionInput.value = p.inclusion;
        exclusionInput.value = p.exclusion;
        console.log("[FrostedGlassToolbar] Loaded preset:", p.name);
      }
    }
  });
  function updatePresetList() {
    while (presetSelect.firstChild) {
      presetSelect.removeChild(presetSelect.firstChild);
    }
    presetSelect.appendChild(createEl('option', {}, ['Load a preset...']));
    savedPresets.forEach(preset => {
      presetSelect.appendChild(createEl('option', { value: preset.name }, [preset.name]));
    });
  }

  // Default presets – add as many as needed
  const defaultPresets = [
    {
      name: "Motivational Speech",
      role: "Motivational Coach",
      tone: "Inspirational",
      instruction: "Create",
      lengthStep: 7,
      lengthNumber: "",
      contentType: "Speech",
      format: "Plain Text (.txt)",
      targetAudience: "Students",
      about: "Overcoming challenges",
      inclusion: "uplifting quotes, positivity",
      exclusion: "negativity"
    }
    // Add additional default presets here…
  ];

  if (savedPresets.length === 0) {
    savedPresets = defaultPresets.slice();
    storeValue('chatgpt_presets_v8', savedPresets);
    console.log("[FrostedGlassToolbar] Initialized default presets.");
  }
  updatePresetList();

  function updateDynamicPlaceholders(role) {
    const ph = PLACEHOLDER_MAP[role] || {
      about: 'E.g. "General topic..."',
      inclusion: 'E.g. "specific examples"',
      exclusion: 'E.g. "irrelevant content"'
    };
    aboutInput.placeholder = ph.about;
    inclusionInput.placeholder = ph.inclusion;
    exclusionInput.placeholder = ph.exclusion;
  }
  roleSelect.addEventListener('change', () => {
    updateDynamicPlaceholders(roleSelect.value);
  });
  updateDynamicPlaceholders(roleSelect.value);

  const clearAllBtn = createEl('button', {
    id: 'clearAllBtn',
    onclick: () => {
      roleSelect.selectedIndex = 0;
      toneSelect.selectedIndex = 0;
      instructionSelect.selectedIndex = 0;
      lengthRange.value = 3;
      lengthRangeValue.textContent = LENGTH_STEPS[3];
      lengthNumberInput.value = '';
      lengthNumberInput.style.display = 'none';
      contentTypeSelect.selectedIndex = 0;
      formatSelect.selectedIndex = 0;
      targetAudienceSelect.selectedIndex = 0;
      aboutInput.value = '';
      inclusionInput.value = '';
      exclusionInput.value = '';
      updateDynamicPlaceholders(roleSelect.value);
      console.log("[FrostedGlassToolbar] Cleared all fields.");
    }
  }, ['Clear All']);

  const toolbarContent = createEl('div', { id: 'toolbarContent' }, [
    titleEl,
    subheaderEl,
    createEl('hr'),
    roleLabel, roleSelect,
    toneLabel, toneSelect,
    instructionLabel, instructionSelect,
    lengthLabel,
    createEl('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } }, [lengthRange, lengthRangeValue, lengthNumberInput]),
    contentTypeLabel, contentTypeSelect,
    formatLabel, formatSelect,
    targetAudienceLabel, targetAudienceSelect,
    createEl('hr'),
    aboutLabel, aboutInput,
    inclusionLabel, inclusionInput,
    exclusionLabel, exclusionInput,
    createEl('hr'),
    generateBtn,
    createEl('hr'),
    createEl('label', {}, ['Preset Name: ']), presetNameInput, savePresetBtn,
    createEl('label', {}, [' Load Preset: ']), presetSelect,
    createEl('hr'),
    clearAllBtn
  ]);
  toolbar.appendChild(toolbarContent);

  // Append toolbar and side toggle button
  document.body.appendChild(toolbar);
  document.body.appendChild(sideToggleBtn);

  toolbar.classList.add('collapsed');

  function updateSideToggleBtn() {
    if (toolbar.classList.contains('collapsed')) {
      sideToggleBtn.style.right = '20px';
      sideToggleBtn.textContent = '▶';
      sideToggleBtn.style.top = `${window.innerHeight / 2 - sideToggleBtn.offsetHeight / 2}px`;
    } else {
      sideToggleBtn.style.right = '360px';
      sideToggleBtn.textContent = '◀';
      const toolbarRect = toolbar.getBoundingClientRect();
      sideToggleBtn.style.top = `${toolbarRect.top + toolbar.offsetHeight/2 - sideToggleBtn.offsetHeight/2}px`;
    }
  }
  const observer = new MutationObserver(updateSideToggleBtn);
  observer.observe(toolbar, { attributes: true, attributeFilter: ['class'] });
  window.addEventListener('resize', updateSideToggleBtn);

  console.log("[FrostedGlassToolbar] UI setup complete.");

  /********************************************************
   * 3. STYLING - FROSTED GLASS
   ********************************************************/
  GM_addStyle(`
    /* Main toolbar container (frosted glass) */
    #chatgpt-toolbar {
      position: fixed;
      top: 80px;
      right: 0;
      bottom: 10px;
      width: 360px;
      z-index: 9998;
      background-color: rgba(255,255,255,0.1);
      backdrop-filter: blur(12px);
      color: #f0f0f0;
      padding: 16px;
      box-shadow: -2px 0 8px rgba(0,0,0,0.3);
      display: flex;
      flex-direction: column;
      border-radius: 20px 0 0 20px;
      transition: transform 0.3s ease;
      overflow-y: auto;
    }
    #chatgpt-toolbar.collapsed {
      transform: translateX(100%);
    }
    #toolbarContent {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 40px;
      position: relative;
    }
    /* Side toggle button */
    #sideToggleBtn {
      position: fixed;
      z-index: 10000;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background-color: rgba(255,255,255,0.2);
      backdrop-filter: blur(12px);
      color: #fff;
      font-size: 1.2rem;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s, right 0.3s, top 0.3s;
    }
    #sideToggleBtn:hover {
      background-color: rgba(255,255,255,0.3);
    }
    /* Form controls */
    #chatgpt-toolbar label {
      font-weight: 600;
      margin-bottom: 2px;
      display: flex;
      align-items: center;
      gap: 4px;
      color: #fff;
    }
    #chatgpt-toolbar select,
    #chatgpt-toolbar input[type="text"],
    #chatgpt-toolbar button {
      font-size: 0.9rem;
      border-radius: 9999px;
      border: 1px solid rgba(255,255,255,0.2);
      background-color: rgba(255,255,255,0.1);
      color: #fff;
      padding: 6px 10px;
    }
    #chatgpt-toolbar button {
      cursor: pointer;
      margin-top: 4px;
    }
    #chatgpt-toolbar button:hover {
      background-color: rgba(255,255,255,0.2);
    }
    /* Slider for length */
    #lengthRange {
      width: 120px;
    }
    /* Info icon tooltips */
    .info-icon {
      position: relative;
      display: inline-block;
      width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      font-size: 0.7rem;
      background-color: rgba(255,255,255,0.2);
      color: #fff;
      border-radius: 50%;
      cursor: default;
      margin-left: 4px;
    }
    .info-icon:hover::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: #fff;
      padding: 4px 8px;
      border-radius: 4px;
      white-space: normal;
      overflow-wrap: break-word;
      max-width: 340px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
      font-size: 0.8rem;
      pointer-events: none;
      opacity: 1;
      z-index: 10001;
      text-align: center;
    }
    .info-icon:hover::before {
      content: '';
      position: absolute;
      bottom: 115%;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: rgba(0,0,0,0.8);
      opacity: 1;
      z-index: 10001;
    }
    /* Subheader */
    #subheader {
      font-size: 0.9rem;
      color: #ccc;
      text-align: left;
      margin-top: 4px;
    }
    /* Clear All button */
    #clearAllBtn {
      background-color: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      padding: 8px;
      border-radius: 9999px;
      font-size: 0.9rem;
      cursor: pointer;
      margin-top: 8px;
    }
    #clearAllBtn:hover {
      background-color: rgba(255,255,255,0.2);
    }
    /* Light/Dark mode adjustments */
    #chatgpt-toolbar.dark-mode {
      background-color: rgba(255,255,255,0.1);
      color: #f0f0f0;
    }
    #chatgpt-toolbar.light-mode {
      background-color: rgba(255,255,255,0.8);
      color: #000;
    }
    #chatgpt-toolbar.light-mode button {
      background-color: rgba(255,255,255,0.9);
      color: #000;
    }
    #chatgpt-toolbar.light-mode input,
    #chatgpt-toolbar.light-mode select {
      border: 1px solid #666;
      color: #000;
    }
  `);

  console.log("[FrostedGlassToolbar] Script fully loaded.");
})();