Increase the width of the conversation panel, replaces MCP button from MCP SuperAssistant extension, updates chip icon with model name matching sources button radius
// ==UserScript==
// @name Enhance Perplexity AI chat
// @namespace facelook.hk
// @version 1.7
// @author FacelookHK
// @description Increase the width of the conversation panel, replaces MCP button from MCP SuperAssistant extension, updates chip icon with model name matching sources button radius
// @match https://www.perplexity.ai/*
// @grant GM_addStyle
// @license none
// ==/UserScript==
(function () {
'use strict';
// Chip icon logic
const CPU_ICON_ID = '#pplx-icon-cpu';
GM_addStyle(`
button[data-pplx-modeltext="1"] {
width: auto !important;
padding: 0 8px !important;
gap: 6px !important;
border-radius: 9999px !important; /* rounded-full equivalent */
height: 32px !important;
min-height: 32px !important;
align-items: center !important;
display: inline-flex !important;
}
button[data-pplx-modeltext="1"] svg {
display: none !important;
}
button[data-pplx-modeltext="1"] .pplx-modeltext-label {
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
`);
function useHref(useEl) {
return (
useEl.getAttribute('href') ||
useEl.getAttribute('xlink:href') ||
''
).trim();
}
function isQueryBoxButton(btn) {
if (btn.closest('[data-cplx-component^="query-box"]')) return true;
if (btn.closest('div').parentElement?.querySelector('input[type="file"]')) return true;
if (btn.closest('.col-start-3.row-start-2')) return true;
return false;
}
function upgradeButton(btn) {
const useEl = btn.querySelector('use');
if (!useEl || useHref(useEl) !== CPU_ICON_ID) return;
if (isQueryBoxButton(btn)) return;
const label = (btn.getAttribute('aria-label') || '').trim();
if (!label) return;
const currentSpan = btn.querySelector('.pplx-modeltext-label');
if (btn.dataset.pplxModeltext === '1' && currentSpan && currentSpan.textContent === label) {
return;
}
btn.textContent = '';
const span = document.createElement('span');
span.className = 'pplx-modeltext-label';
span.textContent = label;
btn.appendChild(span);
btn.dataset.pplxModeltext = '1';
// Remove tooltip
btn.removeAttribute('title');
}
function startObserver() {
const observer = new MutationObserver((mutations) => {
const candidates = new Set();
for (const mutation of mutations) {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach((node) => {
if (node.nodeType === 1) {
node.querySelectorAll?.('button').forEach(b => candidates.add(b));
if (node.tagName === 'BUTTON') candidates.add(node);
if (node.tagName === 'svg' || node.tagName === 'use') {
const parentBtn = node.closest('button');
if (parentBtn) candidates.add(parentBtn);
}
}
});
} else if (mutation.type === 'attributes') {
if (mutation.target.tagName === 'BUTTON') {
candidates.add(mutation.target);
} else if (mutation.target.tagName === 'USE') {
const parentBtn = mutation.target.closest('button');
if (parentBtn) candidates.add(parentBtn);
}
}
}
candidates.forEach(upgradeButton);
});
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['aria-label', 'href', 'xlink:href']
});
document.querySelectorAll('button').forEach(upgradeButton);
}
// Main script logic (layout, MCP button, etc.)
const OVERLAY_ID = "mcp-custom-overlay-btn";
const DEFAULT_STYLE = {
width: "32px",
height: "32px",
bg: "var(--super, #3C82F6)",
radius: "8px"
};
const SVG_ICON = `
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 16V8.00002C20.9996 7.64927 20.9071 7.30481 20.7315 7.00116C20.556 6.69751 20.3037 6.44536 20 6.27002L13 2.27002C12.696 2.09449 12.3511 2.00205 12 2.00205C11.6489 2.00205 11.304 2.09449 11 2.27002L4 6.27002C3.69626 6.44536 3.44398 6.69751 3.26846 7.00116C3.09294 7.30481 3.00036 7.64927 3 8.00002V16C3.00036 16.3508 3.09294 16.6952 3.26846 16.9989C3.44398 17.3025 3.69626 17.5547 4 17.73L11 21.73C11.304 21.9056 11.6489 21.998 12 21.998C12.3511 21.998 12.696 21.9056 13 21.73L20 17.73C20.3037 17.5547 20.556 17.3025 20.7315 16.9989C20.9071 16.6952 20.9996 16.3508 21 16Z" stroke="#606260" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`;
const voiceBtnSelectors = [
'button[aria-label="Voice Search"]',
'button[aria-label="Voice Mode"]',
'[data-testid="voice-search-button"]',
'.fa-microphone'
];
const layoutSelectors = [
{ sel: ".mx-auto.max-w-threadContentWidth", prop: "max-width", val: (artifact) => artifact ? "85%" : "65%" },
{ sel: ".md\\:max-w-threadContentWidth.md\\:mx-auto.md\\:w-full", prop: "margin-left", val: "unset" },
{ sel: ".max-w-threadContentWidth.relative.isolate", prop: "max-width", val: "unset" },
{ sel: ".max-w-\\[300px\\]", prop: "max-width", val: "90%" },
{ sel: ".isolate.mx-auto.max-w-threadContentWidth", prop: "max-width", val: "unset" }
];
function getVoiceButtonStyle() {
for (const sel of voiceBtnSelectors) {
const el = document.querySelector(sel);
const btn = el?.tagName === 'BUTTON' ? el : el?.closest('button');
if (btn) {
const style = window.getComputedStyle(btn);
if (parseFloat(style.width) > 0) {
return {
width: style.width,
height: style.height,
bg: style.backgroundColor,
radius: style.borderRadius,
padding: style.padding
};
}
}
}
return null;
}
function apply() {
const artifactExists = document.getElementById("cplx-artifact");
layoutSelectors.forEach(item => {
document.querySelectorAll(item.sel).forEach(el => {
const value = typeof item.val === "function" ? item.val(artifactExists) : item.val;
el.style.setProperty(item.prop, value, "important");
});
});
const targetStyle = getVoiceButtonStyle() || DEFAULT_STYLE;
const buttons = document.querySelectorAll("button.mcp-perplexity-button-base");
buttons.forEach(originalBtn => {
if (originalBtn.style.opacity !== "0") {
originalBtn.style.cssText = `
opacity: 0 !important;
visibility: visible !important;
width: ${targetStyle.width} !important;
height: ${targetStyle.height} !important;
min-width: ${targetStyle.width} !important;
padding: 0 !important;
margin: 0 !important;
position: absolute !important;
top: 0; left: 0; z-index: 0 !important;
`;
}
const parent = originalBtn.parentElement;
if (parent) {
parent.style.position = "relative";
parent.style.display = "inline-flex";
parent.style.width = targetStyle.width;
parent.style.height = targetStyle.height;
parent.style.alignItems = "center";
parent.style.justifyContent = "center";
}
let overlay = parent.querySelector(`#${OVERLAY_ID}`);
if (!overlay) {
overlay = document.createElement("div");
overlay.id = OVERLAY_ID;
overlay.innerHTML = SVG_ICON;
overlay.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
originalBtn.click();
});
parent.appendChild(overlay);
}
overlay.style.cssText = `
position: absolute;
top: 1px; left: 0;
width: 36px; height: 36px;
background-color: #191B1B;
border-radius: ${targetStyle.radius};
display: flex; justify-content: center; align-items: center;
cursor: pointer;
z-index: 10;
color: white;
transition: background-color 0.2s;
pointer-events: auto;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
`;
});
}
// Apply layout and MCP button changes
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", apply, { once: true });
} else {
apply();
}
apply();
const mo = new MutationObserver(apply);
mo.observe(document.documentElement, { childList: true, subtree: true });
// Start chip icon observer
setTimeout(startObserver, 500);
})();