`;
/** One message row; `mine` is a sent message (accent bubble, right), otherwise received (avatar, left). `min` is the contrast the fixture asks for on the message text. */
function row({ mine = false, text, time = '20:14', quote = null, reaction = null, link = null, mention = null, avatarShown = true }) {
const bubble = mine ? 'bg-chat-accent' : 'bg-gray-50';
const quoteBlock = quote ? `
` : '';
const rows = group ? [
separator('Today 20:14'),
row({ text: 'first message of the day, scrolled to the top', time: '20:14', mention: '@rowan' }),
row({ text: 'great job, the lip sync demo holds up', time: '20:15', reaction: ['👍', '3'] }),
row({ text: 'Impressive for sure. How does it handle a voice line?', time: '20:17', link: 'example.github.io', quote: { from: 'Rowan Vale', text: 'I have not tried proper voice syncing yet' } }),
row({ mine: true, text: 'I can share the rig later tonight', time: '20:18' }),
row({ text: 'Thank you, I will have to try it', time: '20:25' }),
`
${avatar(16)}Typing …
`,
] : [
`
Joined August 2026
22 Followers
`,
separator('Sunday 23:26'),
row({ mine: true, text: 'chat test under a theme', time: '23:26' }),
row({ text: 'got it, reads fine here', time: '23:27', avatarShown: false, reaction: ['🔥', '1'] }),
separator('Today 18:11'),
row({ mine: true, text: 'reply with a quote', time: '18:15', quote: { from: 'You', text: 'chat test under a theme' } }),
row({ mine: true, text: 'see https://example.com for the notes', time: '18:16' }).replace('https://example.com', 'https://example.com'),
];
const typed = group ? '' : 'a message being written';
const composer = `
${iconButton('dm-composer-attachment-button')}
`;
return `
${header}${pinned}
${rows.join('')}
${composer}
`;
}
/** XChat's message menu (Base UI, portaled into ``): Reply, Forward, Copy, Info, Delete. */
function menu() {
// The second item is the one under the pointer (X paints it with `--x-hover-subtle`).
const item = 'display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer;';
return `
`;
}
/**
* The chat route: X's chat row (fixed width, capped at the pane) with the two-panel app inside
* `primaryColumn`. `m` is the matrix's X mode (inline colors X writes on its own elements).
*/
export function chatRoute(m, kind, withMenu = false, embed = false) {
const app = `
${inbox()}${conversation(kind)}
`;
// The embed (live since 2026-10-01): the chat app inside the open shadow root of X's XChatEmbed host,
// styled only by the root's own adopted sheets (EMBED_SCRIPT attaches both).
const body = embed
? `
${app}${withMenu ? menu() : ''}
`
: app;
return `
${body}
${withMenu && !embed ? menu() : ''}`;
}
/**
* Runs first in the fixture: the embed host gets its open shadow root with the chat inside and X's
* chat sheet adopted by the root, its tokens on `:host` as x.com declares them there.
*/
// The chat's primitives and label utilities live in the embed's own sheet on x.com, not in the document.
const EMBED_PRIMITIVES = ':root { --x-white: #ffffff; --x-black: #000000; --x-blue-500: #1d9bf0; }';
const EMBED_UTILITIES = '.bg-chat-accent { background-color: hsl(var(--chat-accent)); }\n.text-white { color: var(--x-white); }\n.text-white-60 { color: var(--x-white-60); }\n.text-inherit { color: inherit; }';
export const EMBED_SCRIPT = `
(function () {
var host = document.querySelector('[data-testid="xchatEmbedRoute"]'), tpl = document.getElementById('fx-embed');
if (!host || !tpl) return;
// x.com's document no longer declares the chat's primitives (--x-white is empty outside the root).
var x = document.getElementById('x-css'); if (x) x.textContent = x.textContent.replace(${JSON.stringify(CHAT_CSS)}, '').replace(${JSON.stringify(EMBED_PRIMITIVES)}, '');
var root = host.attachShadow({ mode: 'open' });
root.appendChild(tpl.content.cloneNode(true));
var sheet = new CSSStyleSheet();
sheet.replaceSync(${JSON.stringify(CHAT_CSS)}.replace(/:root\\[data-theme="(dark|light)"\\]/g, ':host([data-theme="$1"])').replace(/:root/g, ':host'));
sheet.insertRule(${JSON.stringify(EMBED_PRIMITIVES.replace(':root', ':host'))}, sheet.cssRules.length);
${JSON.stringify(EMBED_UTILITIES)}.split('\\n').forEach(function (rule) { if (rule.trim()) sheet.insertRule(rule, sheet.cssRules.length); });
root.adoptedStyleSheets = [sheet];
})();
`;
/** Runs in the fixture: what X's own script does (one panel below the wide container width, the top spacer as tall as the floating header). */
export const CHAT_SCRIPT = `
(function () {
var embed = document.querySelector('[data-testid="xchatEmbedRoute"]');
var container = document.querySelector('[data-testid="dm-container"]') || (embed && embed.shadowRoot && embed.shadowRoot.querySelector('[data-testid="dm-container"]')); if (!container) return;
function layout() {
// On the chat route X keeps its nav as the icon rail at every width.
var navInner = document.querySelector('.fx-nav');
if (navInner) { navInner.classList.remove('r-nav275'); navInner.classList.add('r-nav88'); document.querySelectorAll('.fx-label').forEach(function (l) { l.style.display = 'none'; }); var post = document.querySelector('.fx-post span'); if (post) post.textContent = '+'; }
var wide = container.clientWidth >= 918;
var inboxPanel = container.querySelector('[data-testid="dm-inbox-panel"]');
inboxPanel.style.display = wide ? '' : 'none';
container.querySelector('.fx-back').style.display = wide ? 'none' : '';
var overlay = container.querySelector('.fx-overlay'), scroller = container.querySelector('[data-testid="dm-message-scroller"]');
var top = Math.ceil(overlay.getBoundingClientRect().height) + 3;
container.querySelector('.fx-top-spacer').style.height = top + 'px';
scroller.style.scrollPaddingTop = top + 'px';
}
layout(); window.addEventListener('resize', layout);
if (window.ResizeObserver) new ResizeObserver(layout).observe(container.querySelector('.fx-overlay'));
})();
`;