ChatGPT умирает на длинных разговорах. Не AI-часть — модель отлично держит тысячи сообщений. Умирает фронтенд. Таб зависает, скролл лагает, иногда браузер просто крашится.

Самое обидное — именно длинные разговоры самые ценные. Чем дольше обсуждаешь, тем больше контекста у модели, тем полезнее ответы. А продукт ломается ровно в тот момент, когда начинается максимальная отдача.

Мне это надоело и я полез разбираться.

Что происходит под капотом

Когда вы открываете разговор, ChatGPT делает запрос на /backend-api/conversation/{id}. В ответе приходит JSON с полем mapping — объект, где каждый ключ это ID сообщения, а значение — нода с контентом, parent-ссылкой и списком children.

{
  "mapping": {
    "abc-123": {
      "message": { "content": { "parts": ["..."] }, "author": { "role": "user" } },
      "parent": "abc-122",
      "children": ["abc-124"]
    }
  },
  "current_node": "abc-999"
}

React получает этот объект целиком и рендерит все ноды в DOM. Каждое сообщение — это не один <div>, а дерево: аватар, контент, кнопки, подсветка кода, MathJax-формулы. Одно сообщение ≈ 250 DOM-нод.

Считаем:

• 500 сообщений → ~125 000 DOM-нод

• 2 000 сообщений → ~500 000 DOM-нод

Chrome начинает задыхаться на ~100K нод. При полумиллионе таб просто ложится. Виртуализации списка нет.

Решение

Идея тривиальная: перехватить ответ API до того как React его получит, и обрезать mapping до последних N сообщений.

1. Перехват fetch. Content script с "world": "MAIN" позволяет подменить window.fetch:

const originalFetch = window.fetch;

window.fetch = async function(...args) {
  const url = typeof args[0] === 'string' ? args[0] : args[0]?.url || '';
  
  if (!/\/backend-api\/conversation\/[0-9a-f-]{36}$/.test(url)) {
    return originalFetch.apply(this, args);
  }
  
  const response = await originalFetch.apply(this, args);
  const data = await response.clone().json();
  const truncated = truncateMapping(data, 100);
  
  return new Response(JSON.stringify(truncated), {
    status: response.status,
    headers: response.headers,
  });
};

2. Обрезка. Идём от current_node по цепочке parent, собираем последние N сообщений:

function truncateMapping(data, max) {
  const keep = new Set();
  let id = data.current_node;
  let count = 0;

  while (id && count < max) {
    const node = data.mapping[id];
    if (!node) break;
    keep.add(id);
    if (node.message?.content) count++;
    id = node.parent;
  }

  const result = {};
  for (const id of keep) {
    const node = { ...data.mapping[id] };
    node.children = node.children?.filter(c => keep.has(c)) || [];
    if (node.parent && !keep.has(node.parent)) node.parent = null;
    result[id] = node;
  }

  return { ...data, mapping: result };
}

3. Кэш. Полный JSON сохраняется в Map. Кнопка "загрузить ещё" увеличивает окно и пересобирает из кэша — без повторного запроса.

Результат

• Разговор на 3000+ сообщений грузится мгновенно

• AI видит полную историю (обрезка только на стороне рендеринга)

• 30 КБ, ноль зависимостей, ноль внешних запросов

Задача уровня react-window — библиотеки на 6KB, которая существует с 2018 года. Чинится за вечер. Одним человеком. В Chrome extension.

Ссылки

• Скачать: https://inem.gumroad.com/l/unfreeze-for-chatgpt

• Chrome Web Store: на ревью

• Бесплатно, без трекинга, исходники тут

Если у вас есть длинные разговоры в ChatGPT которые вы боитесь открывать — попробуйте.

* * *

А, чуть не забыл:

Как починить фронтенд продукта компании за $800B за вечер?

Да просто надо как следует разозлиться, упереться рогом, и разобраться как оно устроено. Код за вас напишет AI.