// ==UserScript==
// @name ChatGPT / Gemini AI Chat Exporter by RevivalStack
// @namespace https://github.com/revivalstack/chatgpt-exporter
// @version 2.5.0
// @description Export your ChatGPT or Gemini conversation into a properly and elegantly formatted Markdown or JSON.
// @author Mic Mejia (Refactored by Google Gemini)
// @homepage https://github.com/micmejia
// @license MIT License
// @match https://chat.openai.com/*
// @match https://chatgpt.com/*
// @match https://gemini.google.com/*
// @grant GM_getValue
// @grant GM_setValue
// ==/UserScript==
(function () {
"use strict";
// --- Global Constants ---
const EXPORTER_VERSION = "2.5.0";
const EXPORT_CONTAINER_ID = "export-controls-container";
const OUTLINE_CONTAINER_ID = "export-outline-container"; // ID for the outline div
const DOM_READY_TIMEOUT = 1000;
const EXPORT_BUTTON_TITLE_PREFIX = `AI Chat Exporter v${EXPORTER_VERSION}`;
const ALERT_CONTAINER_ID = "exporter-alert-container";
const HIDE_ALERT_FLAG = "exporter_hide_scroll_alert"; // Local Storage flag
const ALERT_AUTO_CLOSE_DURATION = 30000; // 30 seconds
const OUTLINE_COLLAPSED_STATE_KEY = "outline_is_collapsed"; // Local Storage key for collapsed state
const AUTOSCROLL_INITIAL_DELAY = 2000; // Initial delay before starting auto-scroll (X seconds)
const OUTLINE_TITLE_ID = "ai-chat-exporter-outline-title";
const OUTPUT_FILE_FORMAT_DEFAULT = "{platform}_{title}_{timestampLocal}";
const GM_OUTPUT_FILE_FORMAT = "aiChatExporter_fileFormat";
// --- Font Stack for UI Elements ---
const FONT_STACK = `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`;
// Common styles for the container and buttons
// These will be applied property by property.
const COMMON_CONTROL_PROPS = {
position: "fixed",
bottom: "20px",
right: "20px",
zIndex: "9999",
boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
fontSize: "14px",
cursor: "pointer",
borderRadius: "8px",
display: "flex",
alignItems: "center",
fontFamily: FONT_STACK,
};
// New styles for the outline container (property by property)
const OUTLINE_CONTAINER_PROPS = {
position: "fixed",
bottom: "70px", // Position above the export buttons
right: "20px",
zIndex: "9998", // Below buttons, above general content
boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
fontSize: "12px", // Smaller font for outline
borderRadius: "8px",
backgroundColor: "#fff", // White background
color: "#333", // Dark text
maxHeight: "350px", // Max height for scrollable content
width: "300px", // Fixed width
padding: "10px",
border: "1px solid #ddd",
fontFamily: FONT_STACK,
display: "flex",
flexDirection: "column",
transition:
"max-height 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out",
opacity: "1",
transformOrigin: "bottom right", // For scaling/transform animations if desired
};
const OUTLINE_CONTAINER_COLLAPSED_PROPS = {
maxHeight: "30px", // Height when collapsed
padding: "5px 10px",
overflow: "hidden",
opacity: "0.9",
};
const OUTLINE_HEADER_PROPS = {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "5px",
paddingBottom: "5px",
borderBottom: "1px solid #eee",
fontWeight: "bold",
cursor: "pointer", // Indicates it's clickable to collapse/expand
};
const OUTLINE_TITLE_PROPS = {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "5px",
paddingBottom: "5px",
borderBottom: "1px solid #eee",
wordWrap: "break-word" /* Ensures long titles wrap */,
};
// Styles for the "Select all" section
const SELECT_ALL_CONTAINER_PROPS = {
display: "flex",
alignItems: "center",
padding: "5px 0",
marginBottom: "5px",
borderBottom: "1px solid #eee",
};
// Styles for the search bar
const SEARCH_INPUT_PROPS = {
width: "calc(100% - 20px)", // Full width minus padding
padding: "6px 10px",
margin: "5px 0 10px 0",
border: "1px solid #ddd",
borderRadius: "4px",
fontSize: "12px",
fontFamily: FONT_STACK,
};
const NO_MATCH_MESSAGE_PROPS = {
textAlign: "center",
fontStyle: "italic",
fontWeight: "bold",
color: "#666",
padding: "10px 0",
};
const OUTLINE_ITEM_PROPS = {
display: "flex",
alignItems: "center",
marginBottom: "3px",
lineHeight: "1.3",
};
const OUTLINE_CHECKBOX_PROPS = {
marginRight: "5px",
cursor: "pointer",
};
const OUTLINE_TOGGLE_BUTTON_PROPS = {
background: "none",
border: "none",
fontSize: "16px",
cursor: "pointer",
padding: "0 5px",
color: "#5b3f86",
};
const BUTTON_BASE_PROPS = {
padding: "10px 14px",
backgroundColor: "#5b3f86", // Primary brand color
color: "white",
border: "none",
cursor: "pointer",
borderRadius: "8px",
};
const BUTTON_SPACING_PROPS = {
marginLeft: "8px",
};
// --- Alert Styles ---
// Note: max-width for ALERT_PROPS will be dynamically set
const ALERT_PROPS = {
position: "fixed",
top: "20px",
left: "50%",
transform: "translateX(-50%)",
zIndex: "10000",
backgroundColor: "rgba(91, 63, 134, 0.9)", // Shade of #5b3f86 with transparency
color: "white",
padding: "15px 20px",
borderRadius: "8px",
boxShadow: "0 2px 10px rgba(0,0,0,0.2)",
display: "flex",
flexDirection: "column", // Changed to column for title, message and checkbox
justifyContent: "space-between",
alignItems: "flex-start", // Align items to the start for better layout
fontSize: "14px",
opacity: "1",
transition: "opacity 0.5s ease-in-out",
fontFamily: FONT_STACK,
};
const ALERT_MESSAGE_ROW_PROPS = {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
marginBottom: "10px", // Space between message and checkbox
};
const ALERT_CLOSE_BUTTON_PROPS = {
background: "none",
border: "none",
color: "white",
fontSize: "20px",
cursor: "pointer",
marginLeft: "15px", // Add margin to push it right
lineHeight: "1", // Align 'x' vertically
};
const ALERT_CHECKBOX_CONTAINER_PROPS = {
display: "flex",
alignItems: "center",
width: "100%",
};
const ALERT_CHECKBOX_PROPS = {
marginRight: "5px",
};
// --- Hostname-Specific Selectors & Identifiers ---
const CHATGPT_HOSTNAMES = ["chat.openai.com", "chatgpt.com"];
const CHATGPT_TITLE_REPLACE_TEXT = " - ChatGPT";
const CHATGPT_ARTICLE_SELECTOR = "article";
const CHATGPT_HEADER_SELECTOR = "h5";
const CHATGPT_TEXT_DIV_SELECTOR = "div.text-base";
const CHATGPT_USER_MESSAGE_INDICATOR = "you said";
const CHATGPT_POPUP_DIV_CLASS = "popover";
const CHATGPT_BUTTON_SPECIFIC_CLASS = "text-sm";
const GEMINI_HOSTNAMES = ["gemini.google.com"];
const GEMINI_TITLE_REPLACE_TEXT = "Gemini - ";
const GEMINI_MESSAGE_ITEM_SELECTOR = "user-query, model-response";
const GEMINI_SIDEBAR_ACTIVE_CHAT_SELECTOR =
'div[data-test-id="conversation"].selected .conversation-title';
// --- Markdown Formatting Constants ---
const DEFAULT_CHAT_TITLE = "chat";
const MARKDOWN_TOC_PLACEHOLDER_LINK = "#table-of-contents";
const MARKDOWN_BACK_TO_TOP_LINK = `___\n###### [top](${MARKDOWN_TOC_PLACEHOLDER_LINK})\n`;
// Parents of <p> tags where newlines should be suppressed or handled differently
// LI is handled separately in the paragraph rule for single newlines.
const PARAGRAPH_FILTER_PARENT_NODES = ["TH", "TR"];
// Styles for the scrollable message list div
const MESSAGE_LIST_PROPS = {
overflowY: "auto", // Enable vertical scrolling for this specific div
flexGrow: "1", // Allow it to grow and take available space
paddingRight: "5px", // Add some padding for scrollbar visibility
};
// --- Inlined Turndown.js (v7.1.2) - BEGIN ---
// Customized TurndownService to handle specific chat DOM structures
class TurndownService {
constructor(options = {}) {
this.rules = [];
this.options = {
headingStyle: "atx",
hr: "___",
bulletListMarker: "-",
codeBlockStyle: "fenced",
...options,
};
this.addRule("lineBreak", {
filter: "br",
replacement: () => " \n",
});
this.addRule("heading", {
filter: ["h1", "h2", "h3", "h4", "h5", "h6"],
replacement: (content, node) => {
const hLevel = Number(node.nodeName.charAt(1));
return `\n\n${"#".repeat(hLevel)} ${content}\n\n`;
},
});
// Custom rule for list items to ensure proper nesting and markers
this.addRule("customLi", {
filter: "li",
replacement: function (content, node) {
let processedContent = content.trim();
// Heuristic: If content contains multiple lines and the second line
// looks like a list item, ensure a double newline for nested lists.
if (processedContent.length > 0) {
const lines = processedContent.split("\n");
if (lines.length > 1 && /^\s*[-*+]|^[0-9]+\./.test(lines[1])) {
processedContent = lines.join("\n\n").trim();
}
}
let listItemMarkdown;
if (node.parentNode.nodeName === "UL") {
let indent = "";
let liAncestorCount = 0;
let parent = node.parentNode;
// Calculate indentation for nested unordered lists
while (parent) {
if (parent.nodeName === "LI") {
liAncestorCount++;
}
parent = parent.parentNode;
}
for (let i = 0; i < liAncestorCount; i++) {
indent += " "; // 4 spaces per nesting level
}
listItemMarkdown = `${indent}${this.options.bulletListMarker} ${processedContent}`;
} else if (node.parentNode.nodeName === "OL") {
// Get the correct index for ordered list items
const siblings = Array.from(node.parentNode.children).filter(
(child) => child.nodeName === "LI"
);
const index = siblings.indexOf(node);
listItemMarkdown = `${index + 1}. ${processedContent}`;
} else {
listItemMarkdown = processedContent; // Fallback
}
// Always add a newline after each list item for separation
return listItemMarkdown + "\n";
}.bind(this),
});
this.addRule("code", {
filter: "code",
replacement: (content, node) => {
if (node.parentNode.nodeName === "PRE") return content;
return `\`${content}\``;
},
});
// Rule for preformatted code blocks
this.addRule("pre", {
filter: "pre",
replacement: (content, node) => {
let lang = "";
// Attempt to find language for Gemini's code blocks
const geminiCodeBlockParent = node.closest(".code-block");
if (geminiCodeBlockParent) {
const geminiLanguageSpan = geminiCodeBlockParent.querySelector(
".code-block-decoration span"
);
if (geminiLanguageSpan && geminiLanguageSpan.textContent.trim()) {
lang = geminiLanguageSpan.textContent.trim();
}
}
// Fallback to ChatGPT's language selector if Gemini's wasn't found
if (!lang) {
const chatgptLanguageDiv = node.querySelector(
".flex.items-center.text-token-text-secondary"
);
if (chatgptLanguageDiv) {
lang = chatgptLanguageDiv.textContent.trim();
}
}
const codeElement = node.querySelector("code");
const codeText = codeElement ? codeElement.textContent.trim() : "";
// Ensure a blank line before the code section's language text if its parent is a list item
let prefix = "\n"; // Default prefix for code blocks
let prevSibling = node.previousElementSibling;
// Check for a specific pattern: <p> immediately followed by <pre> inside an <li>
if (prevSibling && prevSibling.nodeName === "P") {
let parentLi = prevSibling.closest("li");
if (parentLi && parentLi.contains(node)) {
// Ensure the <pre> is also a descendant of the same <li>
prefix = "\n\n"; // Add an extra newline for better separation
}
}
return `${prefix}\`\`\`${lang}\n${codeText}\n\`\`\`\n`;
},
});
this.addRule("strong", {
filter: ["strong", "b"],
replacement: (content) => `**${content}**`,
});
this.addRule("em", {
filter: ["em", "i"],
replacement: (content) => `_${content}_`,
});
this.addRule("blockQuote", {
filter: "blockquote",
replacement: (content) =>
content
.trim()
.split("\n")
.map((l) => `> ${l}`)
.join("\n"),
});
this.addRule("link", {
filter: "a",
replacement: (content, node) =>
`[${content}](${node.getAttribute("href")})`,
});
this.addRule("strikethrough", {
filter: (node) => node.nodeName === "DEL",
replacement: (content) => `~~${content}~~`,
});
// Rule for HTML tables to Markdown table format
this.addRule("table", {
filter: "table",
replacement: function (content, node) {
const headerRows = Array.from(node.querySelectorAll("thead tr"));
const bodyRows = Array.from(node.querySelectorAll("tbody tr"));
const footerRows = Array.from(node.querySelectorAll("tfoot tr"));
let allRowsContent = [];
const getRowCellsContent = (rowElement) => {
const cells = Array.from(rowElement.querySelectorAll("th, td"));
return cells.map((cell) =>
cell.textContent.replace(/\s+/g, " ").trim()
);
};
if (headerRows.length > 0) {
allRowsContent.push(getRowCellsContent(headerRows[0]));
}
bodyRows.forEach((row) => {
allRowsContent.push(getRowCellsContent(row));
});
footerRows.forEach((row) => {
allRowsContent.push(getRowCellsContent(row));
});
if (allRowsContent.length === 0) {
return "";
}
const isFirstRowAHeader = headerRows.length > 0;
const maxCols = Math.max(...allRowsContent.map((row) => row.length));
const paddedRows = allRowsContent.map((row) => {
const paddedRow = [...row];
while (paddedRow.length < maxCols) {
paddedRow.push("");
}
return paddedRow;
});
let markdownTable = "";
if (isFirstRowAHeader) {
markdownTable += "| " + paddedRows[0].join(" | ") + " |\n";
markdownTable += "|" + Array(maxCols).fill("---").join("|") + "|\n";
for (let i = 1; i < paddedRows.length; i++) {
markdownTable += "| " + paddedRows[i].join(" | ") + " |\n";
}
} else {
for (let i = 0; i < paddedRows.length; i++) {
markdownTable += "| " + paddedRows[i].join(" | ") + " |\n";
if (i === 0) {
markdownTable +=
"|" + Array(maxCols).fill("---").join("|") + "|\n";
}
}
}
return markdownTable.trim();
},
});
// Universal rule for paragraph tags with a fix for list item newlines
this.addRule("paragraph", {
filter: "p",
replacement: (content, node) => {
if (!content.trim()) return ""; // Ignore empty paragraphs
let currentNode = node.parentNode;
while (currentNode) {
// If inside TH or TR (table headers/rows), suppress newlines.
if (PARAGRAPH_FILTER_PARENT_NODES.includes(currentNode.nodeName)) {
return content;
}
// If inside an LI (list item), add a single newline for proper separation.
if (currentNode.nodeName === "LI") {
return content + "\n";
}
currentNode = currentNode.parentNode;
}
// For all other cases, add double newlines for standard paragraph separation.
return `\n\n${content}\n\n`;
},
});
}
addRule(key, rule) {
this.rules.push({ key, ...rule });
}
turndown(rootNode) {
let output = "";
const process = (node) => {
if (node.nodeType === Node.TEXT_NODE) return node.nodeValue;
if (node.nodeType !== Node.ELEMENT_NODE) return "";
const rule = this.rules.find(
(r) =>
(typeof r.filter === "string" &&
r.filter === node.nodeName.toLowerCase()) ||
(Array.isArray(r.filter) &&
r.filter.includes(node.nodeName.toLowerCase())) ||
(typeof r.filter === "function" && r.filter(node))
);
const content = Array.from(node.childNodes)
.map((n) => process(n))
.join("");
if (rule) return rule.replacement(content, node, this.options);
return content;
};
let parsedRootNode = rootNode;
if (typeof rootNode === "string") {
const parser = new DOMParser();
const doc = parser.parseFromString(rootNode, "text/html");
parsedRootNode = doc.body || doc.documentElement;
}
output = Array.from(parsedRootNode.childNodes)
.map((n) => process(n))
.join("");
// Clean up excessive newlines (more than two)
return output.trim().replace(/\n{3,}/g, "\n\n");
}
}
// --- Inlined Turndown.js - END ---
// --- Utility Functions ---
const Utils = {
/**
* Converts a string into a URL-friendly slug.
* @param {string} str The input text.
* @returns {string} The slugified string.
*/
slugify(str, toLowerCase = true, maxLength = 120) {
if (typeof str !== "string") {
return "invalid-filename"; // Handle non-string input gracefully
}
if (toLowerCase) {
str = str.toLocaleLowerCase();
}
return str
.replace(/[^a-zA-Z0-9\-_.+]+/g, "-")
.replace(/-+/g, "-")
.replace(/^-|-$/g, "")
.replace(/^$/, "invalid-filename")
.slice(0, maxLength);
},
/**
* Formats a Date object into a local time string with UTC offset.
* @param {Date} d The Date object.
* @returns {string} The formatted local time string.
*/
formatLocalTime(d) {
const pad = (n) => String(n).padStart(2, "0");
const tzOffsetMin = -d.getTimezoneOffset();
const sign = tzOffsetMin >= 0 ? "+" : "-";
const absOffset = Math.abs(tzOffsetMin);
const offsetHours = pad(Math.floor(absOffset / 60));
const offsetMinutes = pad(absOffset % 60);
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(
d.getDate()
)}T${pad(d.getHours())}-${pad(d.getMinutes())}-${pad(
d.getSeconds()
)}${sign}${offsetHours}${offsetMinutes}`;
},
/**
* Truncates a string to a given maximum length, adding "…" if truncated.
* @param {string} str The input string.
* @param {number} [len=70] The maximum length.
* @returns {string} The truncated string.
*/
truncate(str, len = 70) {
return str.length <= len ? str : str.slice(0, len).trim() + "…";
},
/**
* Escapes Markdown special characters in a string.
* @param {string} text The input string.
* @returns {string} The string with Markdown characters escaped.
*/
escapeMd(text) {
return text.replace(/[|\\`*_{}\[\]()#+\-!>]/g, "\\$&");
},
/**
* Downloads text content as a file.
* @param {string} filename The name of the file to download.
* @param {string} text The content to save.
* @param {string} [mimeType='text/plain;charset=utf-8'] The MIME type.
*/
downloadFile(filename, text, mimeType = "text/plain;charset=utf-8") {
const blob = new Blob([text], { type: mimeType });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
},
/**
* Applies a set of CSS properties to an element.
* @param {HTMLElement} element The HTML element to style.
* @param {object} styles An object where keys are CSS property names (camelCase) and values are their values.
*/
applyStyles(element, styles) {
for (const prop in styles) {
element.style[prop] = styles[prop];
}
},
/**
* Formats a filename string based on provided format and chat data.
*
* @param {string} format - The format string with placeholders (e.g., "{platform}_{tag1}_{title}_{timestamp}.md").
* @param {string} title - The cleaned title of the chat.
* @param {string[]} tags - An array of tags for the chat.
* @param {string} ext - The file extenstion without leading dot.
* @returns {string} The formatted filename.
*/
formatFileName(format, title, tags, ext) {
// Ensure tags is an array
const tagsArray = Array.isArray(tags) ? tags : [];
const replacements = {
"{exporter}": EXPORTER_VERSION,
"{platform}": Utils.getPlatformPrefix(),
"{title}": title.slice(0, 70).toLocaleLowerCase(),
"{timestamp}": new Date().toISOString(),
"{timestampLocal}": Utils.formatLocalTime(new Date()),
"{tags}": tagsArray.join("-").toLocaleLowerCase(), // Comma separated string of all tags
};
// Add individual tags (tag1 to tag9)
for (let i = 0; i < 9; i++) {
const tagName = `{tag${i + 1}}`;
replacements[tagName] = tagsArray[i]
? tagsArray[i].toLocaleLowerCase()
: ""; // Use tag if it exists, otherwise empty string
}
let formattedFilename = format;
for (const placeholder in replacements) {
if (replacements.hasOwnProperty(placeholder)) {
// Replace all occurrences of the placeholder with its value
formattedFilename = formattedFilename
.split(placeholder)
.join(replacements[placeholder]);
}
}
return Utils.slugify(`${formattedFilename}.${ext}`, false);
},
/**
* Determines the current AI chat platform based on the hostname.
*
* @returns {string} The lowercase platform prefix (e.g., "chatgpt", "gemini", "unknown").
*/
getPlatformPrefix() {
// Hardcoded constants for known platform hostnames
const PLATFORM_HOSTNAMES = {
chatgpt: CHATGPT_HOSTNAMES,
gemini: GEMINI_HOSTNAMES,
};
const currentHostname = window.location.hostname;
for (const platform in PLATFORM_HOSTNAMES) {
if (PLATFORM_HOSTNAMES.hasOwnProperty(platform)) {
const hostnames = PLATFORM_HOSTNAMES[platform];
if (hostnames.some((host) => currentHostname.includes(host))) {
// Return the platform key (which is already lowercase)
return platform;
}
}
}
// If no match is found, return a default/unknown platform
return "unknown";
},
/**
* Parses a raw chat title to extract tags and the cleaned main title.
* Tags starting with '#' followed by one or more digits are ignored.
*
* @param {string} rawTitle - The raw chat title string, e.g., "#aice #plan #tech #50731 Browser Storage Options Comparison".
* @returns {{title: string, tags: string[]}} An object containing the cleaned title and an array of extracted tags.
*/
parseChatTitleAndTags(rawTitle) {
const tags = [];
let cleanedTitle = rawTitle.trim();
// Regular expression to find tags at the beginning of the string:
// # (hash)
// \S+ (one or more non-whitespace characters)
// ^ (start of string)
// (\s*#\S+)* (zero or more occurrences of space and then a tag)
const tagRegex = /(^|\s+)#(\S+)/g;
let match;
// Iterate over all matches to extract tags
while ((match = tagRegex.exec(cleanedTitle)) !== null) {
const fullTag = match[0].trim(); // e.g., "#aice", " #plan"
const tagName = match[2]; // e.g., "aice", "plan"
// Check if the tag is numeric (e.g., #50731)
if (!/^\d+$/.test(tagName)) {
tags.push(tagName);
}
}
// Remove all tags from the title string, including the numeric ones,
// to get the final cleaned title.
// This regex matches a hash, followed by one or more non-whitespace characters,
// optionally followed by a space, only if it appears at the beginning or after a space.
cleanedTitle = cleanedTitle.replace(/(^|\s+)#\S+/g, " ").trim();
// Remove any extra spaces that might result from tag removal
cleanedTitle = cleanedTitle.replace(/\s+/g, " ").trim();
return {
title: cleanedTitle,
tags: tags,
};
},
};
// --- Core Export Logic ---
const ChatExporter = {
_currentConversationData: null, // Store the last extracted conversation data
_selectedMessageIds: new Set(), // Store IDs of selected messages for export
/**
* Extracts conversation data from ChatGPT's DOM structure.
* @param {Document} doc - The Document object.
* @returns {object|null} The standardized conversation data, or null.
*/
extractChatGPTConversationData(doc) {
const articles = [...doc.querySelectorAll(CHATGPT_ARTICLE_SELECTOR)];
if (articles.length === 0) return null;
let title =
doc.title.replace(CHATGPT_TITLE_REPLACE_TEXT, "").trim() ||
DEFAULT_CHAT_TITLE;
const messages = [];
let chatIndex = 1;
for (const article of articles) {
const seenDivs = new Set();
const header =
article.querySelector(CHATGPT_HEADER_SELECTOR)?.textContent?.trim() ||
"";
const textDivs = article.querySelectorAll(CHATGPT_TEXT_DIV_SELECTOR);
let fullText = "";
textDivs.forEach((div) => {
const key = div.innerText.trim();
if (!key || seenDivs.has(key)) return;
seenDivs.add(key);
fullText += key + "\n";
});
if (!fullText.trim()) continue;
const isUser = header
.toLowerCase()
.includes(CHATGPT_USER_MESSAGE_INDICATOR);
const author = isUser ? "user" : "ai";
// Assign a unique ID to each message. This is crucial for selection.
const messageId = `${author}-${chatIndex}-${Date.now()}-${Math.random()
.toString(36)
.substring(2, 9)}`;
messages.push({
id: messageId, // Unique ID
author: author,
contentHtml: article, // Store the direct DOM Element
contentText: fullText.trim(),
timestamp: new Date(),
originalIndex: chatIndex, // Keep original index for outline
});
if (!isUser) chatIndex++;
}
const _parsedTitle = Utils.parseChatTitleAndTags(title);
return {
_raw_title: title,
title: _parsedTitle.title,
tags: _parsedTitle.tags,
author: Utils.getPlatformPrefix(),
messages: messages,
messageCount: messages.filter((m) => m.author === "user").length, // Count user messages as questions
exportedAt: new Date(),
exporterVersion: EXPORTER_VERSION,
threadUrl: window.location.href,
};
},
/**
* Extracts conversation data from Gemini's DOM structure.
* @param {Document} doc - The Document object.
* @returns {object|null} The standardized conversation data, or null.
*/
extractGeminiConversationData(doc) {
const messageItems = [
...doc.querySelectorAll(GEMINI_MESSAGE_ITEM_SELECTOR),
];
if (messageItems.length === 0) return null;
let title = DEFAULT_CHAT_TITLE;
// Prioritize title from sidebar if available and not generic
const sidebarActiveChatItem = doc.querySelector(
GEMINI_SIDEBAR_ACTIVE_CHAT_SELECTOR
);
if (sidebarActiveChatItem && sidebarActiveChatItem.textContent.trim()) {
title = sidebarActiveChatItem.textContent.trim();
} else {
title = doc.title;
}
if (title.startsWith(GEMINI_TITLE_REPLACE_TEXT)) {
title = title.replace(GEMINI_TITLE_REPLACE_TEXT, "").trim();
}
const messages = [];
let chatIndex = 1;
for (const item /* @type {HTMLElement} */ of messageItems) {
let author = "";
let messageContentElem = null;
const tagName = item.tagName.toLowerCase();
if (tagName === "user-query") {
author = "user";
messageContentElem = item.querySelector("div.query-content");
} else if (tagName === "model-response") {
author = "ai";
messageContentElem = item.querySelector("message-content");
}
if (!messageContentElem) continue;
// Assign a unique ID to each message. This is crucial for selection.
const messageId = `${author}-${chatIndex}-${Date.now()}-${Math.random()
.toString(36)
.substring(2, 9)}`;
messages.push({
id: messageId, // Unique ID
author: author,
contentHtml: messageContentElem, // Store the direct DOM Element
contentText: messageContentElem.innerText.trim(),
timestamp: new Date(),
originalIndex: chatIndex, // Keep original index for outline
});
if (author === "ai") chatIndex++;
}
// Final fallback to the first user message if title is still default
if (
title === DEFAULT_CHAT_TITLE &&
messages.length > 0 &&
messages[0].author === "user"
) {
const firstUserMessage = messages[0].contentText;
const words = firstUserMessage
.split(/\s+/)
.filter((word) => word.length > 0);
if (words.length > 0) {
let generatedTitle = words.slice(0, 7).join(" ");
generatedTitle = generatedTitle.replace(/[,.;:!?\-+]$/, "").trim();
if (generatedTitle.length < 5 && words.length > 1) {
generatedTitle = words
.slice(0, Math.min(words.length, 10))
.join(" ");
generatedTitle = generatedTitle.replace(/[,.;:!?\-+]$/, "").trim();
}
title = generatedTitle || DEFAULT_CHAT_TITLE;
}
}
const _parsedTitle = Utils.parseChatTitleAndTags(title);
return {
_raw_title: title,
title: _parsedTitle.title,
tags: _parsedTitle.tags,
author: Utils.getPlatformPrefix(),
messages: messages,
messageCount: messages.filter((m) => m.author === "user").length, // Count user messages as questions
exportedAt: new Date(),
exporterVersion: EXPORTER_VERSION,
threadUrl: window.location.href,
};
},
/**
* Converts standardized conversation data to Markdown format.
* This function now expects a pre-filtered `conversationData`.
* @param {object} conversationData - The standardized conversation data (already filtered).
* @param {TurndownService} turndownServiceInstance - Configured TurndownService.
* @returns {{output: string, fileName: string}} Markdown string and filename.
*/
formatToMarkdown(conversationData, turndownServiceInstance) {
let toc = "";
let content = "";
let exportChatIndex = 0; // Initialize to 0 for sequential user message numbering
conversationData.messages.forEach((msg) => {
if (msg.author === "user") {
exportChatIndex++; // Increment only for user messages
const preview = Utils.truncate(
msg.contentText.replace(/\s+/g, " "),
70
);
toc += `- [${exportChatIndex}: ${Utils.escapeMd(
preview
)}](#chat-${exportChatIndex})\n`;
content +=
`### chat-${exportChatIndex}\n\n> ` +
msg.contentText.replace(/\n/g, "\n> ") +
"\n\n";
} else {
let markdownContent;
try {
markdownContent = turndownServiceInstance.turndown(msg.contentHtml);
} catch (e) {
console.error(
`Error converting AI message ${msg.id} to Markdown:`,
e
);
markdownContent = `[CONVERSION ERROR: Failed to render this section. Original content below]\n\n\`\`\`\n${msg.contentText}\n\`\`\`\n`;
}
content += markdownContent + "\n\n" + MARKDOWN_BACK_TO_TOP_LINK;
}
// Removed the incorrect increment logic from here
});
const localTime = Utils.formatLocalTime(conversationData.exportedAt);
const yaml = `---\ntitle: ${
conversationData.title
}\ntags: [${conversationData.tags.join(", ")}]\nauthor: ${
conversationData.author
}\ncount: ${
conversationData.messageCount
}\nexporter: ${EXPORTER_VERSION}\ndate: ${localTime}\nurl: ${
conversationData.threadUrl
}\n---\n`;
const tocBlock = `## Table of Contents\n\n${toc.trim()}\n\n`;
const finalOutput =
yaml +
`\n# ${conversationData.title}\n\n` +
tocBlock +
content.trim() +
"\n\n";
// const platformPrefix = Utils.getPlatformPrefix();
// const fileName = `${platformPrefix}_${Utils.slugify(
// conversationData.title
// )}_${localTime}.md`;
const fileName = Utils.formatFileName(
GM_getValue(GM_OUTPUT_FILE_FORMAT, OUTPUT_FILE_FORMAT_DEFAULT),
conversationData.title,
conversationData.tags,
"md"
);
return { output: finalOutput, fileName: fileName };
},
/**
* Converts standardized conversation data to JSON format.
* This function now expects a pre-filtered `conversationData`.
* @param {object} conversationData - The standardized conversation data (already filtered).
* @returns {{output: string, fileName: string}} JSON string and filename.
*/
formatToJSON(conversationData) {
const jsonOutput = {
title: conversationData.title,
tags: conversationData.tags,
author: conversationData.author,
count: conversationData.messageCount,
exporter: EXPORTER_VERSION,
date: conversationData.exportedAt.toISOString(),
url: conversationData.threadUrl,
messages: conversationData.messages.map((msg) => ({
id: msg.id.split("-").slice(0, 2).join("-"), // Keep the ID for reference in JSON
author: msg.author,
content: msg.contentText,
})),
};
// const localTime = Utils.formatLocalTime(conversationData.exportedAt);
// const platformPrefix = Utils.getPlatformPrefix();
// const fileName = `${platformPrefix}_${Utils.slugify(
// conversationData.title
// )}_${localTime}.json`;
const fileName = Utils.formatFileName(
GM_getValue(GM_OUTPUT_FILE_FORMAT, OUTPUT_FILE_FORMAT_DEFAULT),
conversationData.title,
conversationData.tags,
"json"
);
return {
output: JSON.stringify(jsonOutput, null, 2),
fileName: fileName,
};
},
/**
* Main export orchestrator. Extracts data, configures Turndown, and formats.
* This function now filters messages based on _selectedMessageIds and visibility.
* @param {string} format - The desired output format ('markdown' or 'json').
*/
initiateExport(format) {
// Use the _currentConversationData that matches the outline's IDs
const rawConversationData = ChatExporter._currentConversationData;
let turndownServiceInstance = null;
if (!rawConversationData || rawConversationData.messages.length === 0) {
alert("No messages found to export.");
return;
}
// --- Refresh ChatExporter._selectedMessageIds from current UI state and visibility ---
ChatExporter._selectedMessageIds.clear(); // Clear previous state
const outlineContainer = document.querySelector(
`#${OUTLINE_CONTAINER_ID}`
);
if (outlineContainer) {
// Only consider checkboxes that are checked AND visible
const checkedVisibleCheckboxes = outlineContainer.querySelectorAll(
".outline-item-checkbox:checked"
); // This will only return visible ones if their parent `itemDiv` is hidden with `display:none` as `querySelectorAll` won't find them
checkedVisibleCheckboxes.forEach((cb) => {
// Ensure the parent element is actually visible before adding to selected
const parentItemDiv = cb.closest("div");
if (
parentItemDiv &&
window.getComputedStyle(parentItemDiv).display !== "none" &&
cb.dataset.messageId
) {
ChatExporter._selectedMessageIds.add(cb.dataset.messageId);
}
});
// Also, manually add AI responses that follow selected *and visible* user messages.
const visibleUserMessageIds = new Set();
checkedVisibleCheckboxes.forEach((cb) => {
const parentItemDiv = cb.closest("div");
if (
parentItemDiv &&
window.getComputedStyle(parentItemDiv).display !== "none" &&
cb.dataset.messageId
) {
visibleUserMessageIds.add(cb.dataset.messageId);
}
});
rawConversationData.messages.forEach((msg, index) => {
if (msg.author === "ai") {
let prevUserMessageId = null;
for (let i = index - 1; i >= 0; i--) {
if (rawConversationData.messages[i].author === "user") {
prevUserMessageId = rawConversationData.messages[i].id;
break;
}
}
if (
prevUserMessageId &&
visibleUserMessageIds.has(prevUserMessageId)
) {
ChatExporter._selectedMessageIds.add(msg.id);
}
}
});
}
// --- End Refresh ---
// --- Filter messages based on selection ---
const filteredMessages = rawConversationData.messages.filter((msg) =>
ChatExporter._selectedMessageIds.has(msg.id)
);
if (filteredMessages.length === 0) {
alert(
"No messages selected or visible for export. Please check at least one question in the outline or clear your search filter."
);
return;
}
// Create a new conversationData object for the filtered export
// Also, re-calculate messageCount for the filtered set
const conversationDataForExport = {
...rawConversationData,
messages: filteredMessages,
messageCount: filteredMessages.filter((m) => m.author === "user")
.length,
exportedAt: new Date(), // Set current timestamp just before export
};
let fileOutput = null;
let fileName = null;
let mimeType = "";
if (format === "markdown") {
turndownServiceInstance = new TurndownService();
// ChatGPT-specific rules for handling unique elements/classes
if (
CHATGPT_HOSTNAMES.some((host) =>
window.location.hostname.includes(host)
)
) {
turndownServiceInstance.addRule("popup-div", {
filter: (node) =>
node.nodeName === "DIV" &&
node.classList.contains(CHATGPT_POPUP_DIV_CLASS),
replacement: (content) => {
// Convert HTML content of popups to a code block
const textWithLineBreaks = content
.replace(/<br\s*\/?>/gi, "\n")
.replace(/<\/(p|div|h[1-6]|ul|ol|li)>/gi, "\n")
.replace(/<(?:p|div|h[1-6]|ul|ol|li)[^>]*>/gi, "\n")
.replace(/<\/?[^>]+(>|$)/g, "")
.replace(/\n+/g, "\n");
return "\n```\n" + textWithLineBreaks + "\n```\n";
},
});
turndownServiceInstance.addRule("buttonWithSpecificClass", {
filter: (node) =>
node.nodeName === "BUTTON" &&
node.classList.contains(CHATGPT_BUTTON_SPECIFIC_CLASS),
replacement: (content) =>
content.trim() ? `__${content}__\n\n` : "",
});
turndownServiceInstance.addRule("remove-img", {
filter: "img",
replacement: () => "", // Remove image tags
});
}
// Gemini specific rule to remove language labels from being processed as content
if (
GEMINI_HOSTNAMES.some((host) =>
window.location.hostname.includes(host)
)
) {
turndownServiceInstance.addRule("geminiCodeLanguageLabel", {
filter: (node) =>
node.nodeName === "SPAN" &&
node.closest(".code-block-decoration") &&
node.textContent.trim().length > 0, // Ensure it's not an an empty span
replacement: () => "", // Replace with empty string
});
}
// Pass the filtered conversation data to formatToMarkdown
const markdownResult = ChatExporter.formatToMarkdown(
conversationDataForExport,
turndownServiceInstance
);
fileOutput = markdownResult.output;
fileName = markdownResult.fileName;
mimeType = "text/markdown;charset=utf-8";
} else if (format === "json") {
// Pass the filtered conversation data to formatToJSON
const jsonResult = ChatExporter.formatToJSON(conversationDataForExport);
fileOutput = jsonResult.output;
fileName = jsonResult.fileName;
mimeType = "application/json;charset=utf-8";
} else {
alert("Invalid export format selected.");
return;
}
if (fileOutput && fileName) {
Utils.downloadFile(fileName, fileOutput, mimeType);
}
},
};
// --- UI Management ---
const UIManager = {
/**
* Stores the timeout ID for the alert's auto-hide.
* @type {number|null}
*/
alertTimeoutId: null,
_outlineIsCollapsed: false, // State for the outline collapse
_lastProcessedChatUrl: null, // Track the last processed chat URL for Gemini
_initialListenersAttached: false, // Track if the URL change handlers are initialized
/**
* Determines the appropriate width for the alert based on the chat's content area.
* @returns {string} The width in pixels (e.g., '600px').
*/
getTargetContentWidth() {
let targetElement = null;
let width = 0;
if (
CHATGPT_HOSTNAMES.some((host) =>
window.location.hostname.includes(host)
)
) {
// Try to find the specific input container for ChatGPT
targetElement = document.querySelector(
"form > div.relative.flex.h-full.max-w-full.flex-1.flex-col"
);
if (!targetElement) {
// Fallback to a broader conversation content container if the specific input container is not found
targetElement = document.querySelector(
"div.w-full.md\\:max-w-2xl.lg\\:max-w-3xl.xl\\:max-w-4xl.flex-shrink-0.px-4"
);
}
} else if (
GEMINI_HOSTNAMES.some((host) => window.location.hostname.includes(host))
) {
// Try to find the specific input container for Gemini
targetElement = document.querySelector(
"gb-chat-input-textarea-container"
);
if (!targetElement) {
// Fallback to the main input section container
targetElement = document.querySelector(
"div.flex.flex-col.w-full.relative.max-w-3xl.m-auto"
);
}
}
if (targetElement) {
width = targetElement.offsetWidth;
}
// Apply a reasonable min/max to prevent extreme sizes
if (width < 350) width = 350; // Minimum width
if (width > 900) width = 900; // Maximum width for very wide monitors
return `${width}px`;
},
/**
* Adds the export buttons to the current page.
*/
addExportControls() {
if (document.querySelector(`#${EXPORT_CONTAINER_ID}`)) {
return; // Controls already exist
}
const container = document.createElement("div");
container.id = EXPORT_CONTAINER_ID;
Utils.applyStyles(container, COMMON_CONTROL_PROPS);
const markdownButton = document.createElement("button");
markdownButton.id = "export-markdown-btn";
markdownButton.textContent = "⬇ Export MD";
markdownButton.title = `${EXPORT_BUTTON_TITLE_PREFIX}: Export to Markdown`;
Utils.applyStyles(markdownButton, BUTTON_BASE_PROPS);
markdownButton.onclick = () => ChatExporter.initiateExport("markdown");
container.appendChild(markdownButton);
const jsonButton = document.createElement("button");
jsonButton.id = "export-json-btn";
jsonButton.textContent = "⬇ JSON";
jsonButton.title = `${EXPORT_BUTTON_TITLE_PREFIX}: Export to JSON`;
Utils.applyStyles(jsonButton, {
...BUTTON_BASE_PROPS,
...BUTTON_SPACING_PROPS,
});
jsonButton.onclick = () => ChatExporter.initiateExport("json");
container.appendChild(jsonButton);
// --- Settings Button (NEW) ---
const settingsButton = document.createElement("button");
settingsButton.className = "export-button-settings";
settingsButton.textContent = "⚙️";
settingsButton.title = `${EXPORT_BUTTON_TITLE_PREFIX}: ⚙️ Settings: Configure Filename Format`;
Utils.applyStyles(settingsButton, {
...BUTTON_BASE_PROPS,
...BUTTON_SPACING_PROPS,
});
settingsButton.addEventListener("click", () => {
const currentFormat = GM_getValue(
GM_OUTPUT_FILE_FORMAT,
OUTPUT_FILE_FORMAT_DEFAULT
);
const newFormat = window.prompt(
`+++++++ ${EXPORT_BUTTON_TITLE_PREFIX} +++++++\n\n ` +
`ENTER NEW FILENAME FORMAT:\n` +
` • sample1: {platform}__{tag1}__{title}__{timestampLocal}\n` +
` • sample2: {tag1}__{title}-v{exporter}-{timestamp}\n` +
` • current: ${currentFormat}\n\n` +
`valid placeholders: \n ` +
`- {platform} : e.g. chatgpt, gemini\n ` +
`- {title} : title, with tags removed\n ` +
`- {timestamp} : YYYY-MM-DDTHH-mm-ss.sssZ\n ` +
`- {timestampLocal}: YYYY-MM-DDTHH-mm-ss[+/-]HHMM\n ` +
`- {tags} : all tags, hyphen-separated\n ` +
`- {tag1} : 1st tag\n ` +
`- {tag2} : 2nd tag\n ` +
` ...\n ` +
`- {tag9} : 9th tag\n ` +
`- {exporter} : AI Chat Exporter version\n`,
currentFormat
);
if (newFormat !== null && newFormat !== currentFormat) {
GM_setValue(GM_OUTPUT_FILE_FORMAT, newFormat);
alert("Filename format updated successfully!");
console.log("New filename format saved:", newFormat);
} else if (newFormat === currentFormat) {
// User clicked OK but didn't change the value, or entered same value
console.log("Filename format not changed.");
} else {
// User clicked Cancel
console.log("Filename format update cancelled.");
}
});
container.appendChild(settingsButton);
// --- End Settings Button ---
document.body.appendChild(container);
},
/**
* Adds and manages the collapsible outline div.
*/
addOutlineControls() {
let outlineContainer = document.querySelector(`#${OUTLINE_CONTAINER_ID}`);
if (!outlineContainer) {
outlineContainer = document.createElement("div");
outlineContainer.id = OUTLINE_CONTAINER_ID;
document.body.appendChild(outlineContainer);
}
// Apply base styles
Utils.applyStyles(outlineContainer, OUTLINE_CONTAINER_PROPS);
// Apply collapsed styles if state is collapsed
if (UIManager._outlineIsCollapsed) {
Utils.applyStyles(outlineContainer, OUTLINE_CONTAINER_COLLAPSED_PROPS);
}
UIManager.generateOutlineContent();
},
/**
* Generates and updates the content of the outline div.
* This function should be called whenever the conversation data changes.
*/
generateOutlineContent() {
const outlineContainer = document.querySelector(
`#${OUTLINE_CONTAINER_ID}`
);
if (!outlineContainer) return;
// Extract fresh conversation data
const currentHost = window.location.hostname; // Define currentHost here
let freshConversationData = null;
if (CHATGPT_HOSTNAMES.some((host) => currentHost.includes(host))) {
freshConversationData =
ChatExporter.extractChatGPTConversationData(document);
} else if (GEMINI_HOSTNAMES.some((host) => currentHost.includes(host))) {
freshConversationData =
ChatExporter.extractGeminiConversationData(document);
} else {
outlineContainer.style.display = "none"; // Hide if not supported
return;
}
// Check if conversation data has changed significantly to warrant a re-render
// Compare message count and content of the last few messages as a heuristic
// This is to avoid regenerating the outline on every minor DOM change.
const hasDataChanged =
!ChatExporter._currentConversationData || // No previous data
!freshConversationData || // No new data
freshConversationData._raw_title !==
ChatExporter._currentConversationData._raw_title ||
freshConversationData.messages.length !==
ChatExporter._currentConversationData.messages.length ||
(freshConversationData.messages.length > 0 &&
ChatExporter._currentConversationData.messages.length > 0 &&
freshConversationData.messages[
freshConversationData.messages.length - 1
].contentText !==
ChatExporter._currentConversationData.messages[
ChatExporter._currentConversationData.messages.length - 1
].contentText);
if (!hasDataChanged) {
// If data hasn't changed, just ensure visibility based on message presence
outlineContainer.style.display =
freshConversationData && freshConversationData.messages.length > 0
? "flex"
: "none";
return; // No need to regenerate content
}
// Update stored conversation data
ChatExporter._currentConversationData = freshConversationData;
// Hide if no messages after update
if (
!ChatExporter._currentConversationData ||
ChatExporter._currentConversationData.messages.length === 0
) {
outlineContainer.style.display = "none";
return;
} else {
outlineContainer.style.display = "flex";
}
// Clear existing content safely to avoid TrustedHTML error
while (outlineContainer.firstChild) {
outlineContainer.removeChild(outlineContainer.firstChild);
}
// Reset selections and check all by default (only on fresh rebuild)
ChatExporter._selectedMessageIds.clear();
// Header for Chat Outline (always visible)
const headerDiv = document.createElement("div");
Utils.applyStyles(headerDiv, OUTLINE_HEADER_PROPS);
headerDiv.title = `AI Chat Exporter v${EXPORTER_VERSION}`;
headerDiv.onclick = UIManager.toggleOutlineCollapse; // Only this div handles collapse
const headerSpan = document.createElement("span");
headerSpan.textContent = "AI Chat Exporter: Chat Outline";
headerDiv.appendChild(headerSpan);
const toggleButton = document.createElement("button");
toggleButton.id = "outline-toggle-btn";
toggleButton.textContent = UIManager._outlineIsCollapsed ? "▲" : "▼"; // Up/Down arrow
Utils.applyStyles(toggleButton, OUTLINE_TOGGLE_BUTTON_PROPS);
headerDiv.appendChild(toggleButton);
outlineContainer.appendChild(headerDiv);
const titleDiv = document.createElement("div");
Utils.applyStyles(titleDiv, OUTLINE_TITLE_PROPS);
titleDiv.textContent = freshConversationData.title || DEFAULT_CHAT_TITLE;
titleDiv.title = "tags: " + freshConversationData.tags.join(", ");
titleDiv.id = OUTLINE_TITLE_ID;
outlineContainer.appendChild(titleDiv);
// New: Select All checkbox and label section (below header)
const selectAllContainer = document.createElement("div");
Utils.applyStyles(selectAllContainer, SELECT_ALL_CONTAINER_PROPS);
selectAllContainer.id = "outline-select-all-container"; // For easier hiding/showing
const masterCheckbox = document.createElement("input");
masterCheckbox.type = "checkbox";
masterCheckbox.id = "outline-select-all";
masterCheckbox.checked = true; // Default to checked
Utils.applyStyles(masterCheckbox, OUTLINE_CHECKBOX_PROPS);
// masterCheckbox.onchange will be set later after updateSelectedCountDisplay is defined and elements exist
selectAllContainer.appendChild(masterCheckbox);
const selectAllLabel = document.createElement("span");
selectAllContainer.appendChild(selectAllLabel); // Append label here, content set later
outlineContainer.appendChild(selectAllContainer);
// Search Bar
const searchInput = document.createElement("input");
searchInput.type = "text";
searchInput.id = "outline-search-input";
searchInput.placeholder =
"Search text or regex in user queries & AI responses.";
Utils.applyStyles(searchInput, SEARCH_INPUT_PROPS);
outlineContainer.appendChild(searchInput);
const noMatchMessage = document.createElement("div");
noMatchMessage.id = "outline-no-match-message";
noMatchMessage.textContent = "Your search text didn't match any items";
Utils.applyStyles(noMatchMessage, NO_MATCH_MESSAGE_PROPS);
noMatchMessage.style.display = "none"; // Hidden by default
outlineContainer.appendChild(noMatchMessage);
const hr = document.createElement("hr"); // Horizontal rule
hr.style.cssText =
"border: none; border-top: 1px solid #eee; margin: 5px 0;";
outlineContainer.appendChild(hr);
// List of messages
const messageListDiv = document.createElement("div");
messageListDiv.id = "outline-message-list";
Utils.applyStyles(messageListDiv, MESSAGE_LIST_PROPS);
let userQuestionCount = 0; // This will be 'y' (total items)
const updateSelectedCountDisplay = () => {
const totalUserMessages = userQuestionCount; // 'y'
let selectedAndVisibleMessages = 0;
// Only count if the outline is not collapsed
if (!UIManager._outlineIsCollapsed) {
const allCheckboxes = outlineContainer.querySelectorAll(
".outline-item-checkbox"
);
allCheckboxes.forEach((checkbox) => {
// Check if the checkbox is checked AND its parent div is visible due to search filter
const parentItemDiv = checkbox.closest("div");
if (
checkbox.checked &&
parentItemDiv &&
window.getComputedStyle(parentItemDiv).display !== "none"
) {
selectedAndVisibleMessages++;
}
});
}
// Clear existing content safely
while (selectAllLabel.firstChild) {
selectAllLabel.removeChild(selectAllLabel.firstChild);
}
// Create a strong element for bold text
const strongElement = document.createElement("strong");
strongElement.appendChild(
document.createTextNode("Items to export: ")
);
strongElement.appendChild(
document.createTextNode(selectedAndVisibleMessages.toString())
);
strongElement.appendChild(document.createTextNode(" out of "));
strongElement.appendChild(
document.createTextNode(totalUserMessages.toString())
);
selectAllLabel.appendChild(strongElement);
};
// Store references to the actual itemDiv elements for easy access during search
const outlineItemElements = new Map(); // Map<messageId, itemDiv>
ChatExporter._currentConversationData.messages.forEach((msg, index) => {
if (msg.author === "user") {
userQuestionCount++; // Increment 'y'
const itemDiv = document.createElement("div");
Utils.applyStyles(itemDiv, OUTLINE_ITEM_PROPS);
itemDiv.dataset.userMessageId = msg.id; // Store user message ID for search lookup
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = true; // Default to checked
checkbox.className = "outline-item-checkbox"; // Add class for easy selection
checkbox.dataset.messageId = msg.id; // Store message ID on checkbox
Utils.applyStyles(checkbox, OUTLINE_CHECKBOX_PROPS);
checkbox.onchange = (e) => {
// Update master checkbox state based on individual checkboxes
const allVisibleCheckboxes = Array.from(
outlineContainer.querySelectorAll(
".outline-item-checkbox:not([style*='display: none'])"
)
);
const allVisibleChecked = allVisibleCheckboxes.every(
(cb) => cb.checked
);
masterCheckbox.checked = allVisibleChecked;
updateSelectedCountDisplay(); // Update count on individual checkbox change
};
itemDiv.appendChild(checkbox);
const itemText = document.createElement("span");
itemText.textContent = `${userQuestionCount}: ${Utils.truncate(
msg.contentText,
40
)}`; // Truncate to 40
itemText.style.cursor = "pointer"; // Set cursor to hand
itemText.style.textDecoration = "none"; // Remove underline
itemText.title = `${userQuestionCount}: ${Utils.truncate(
msg.contentText.replace(/\n+/g, "\n"),
140
)}`; // Truncate to 140 // Add tooltip
// Add hover effect
itemText.onmouseover = () => {
itemText.style.backgroundColor = "#f0f0f0"; // Light gray background on hover
itemText.style.color = "#5b3f86"; // Change text color on hover
};
itemText.onmouseout = () => {
itemText.style.backgroundColor = "transparent"; // Revert background on mouse out
itemText.style.color = "#333"; // Revert text color on mouse out (assuming default is #333, adjust if needed)
};
itemText.onclick = () => {
// Find the original message element using the stored contentHtml reference
const messageElement =
ChatExporter._currentConversationData.messages.find(
(m) => m.id === msg.id
)?.contentHtml;
if (messageElement) {
messageElement.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
};
itemDiv.appendChild(itemText);
messageListDiv.appendChild(itemDiv);
outlineItemElements.set(msg.id, itemDiv);
// Add to selected IDs by default (will be refreshed on export anyway)
ChatExporter._selectedMessageIds.add(msg.id);
} else {
// For AI responses, if they follow a selected user message, also add them to selected IDs
// This is a pre-population, actual selection is determined on export.
const prevUserMessage =
ChatExporter._currentConversationData.messages.find(
(m, i) =>
i <
ChatExporter._currentConversationData.messages.indexOf(msg) &&
m.author === "user"
);
if (
prevUserMessage &&
ChatExporter._selectedMessageIds.has(prevUserMessage.id)
) {
ChatExporter._selectedMessageIds.add(msg.id);
}
}
});
// Now set the master checkbox onchange after userQuestionCount is final
masterCheckbox.onchange = (e) => {
const isChecked = e.target.checked;
// Only toggle visible checkboxes
const visibleCheckboxes = outlineContainer.querySelectorAll(
".outline-item-checkbox:not([style*='display: none'])"
);
visibleCheckboxes.forEach((cb) => {
cb.checked = isChecked;
});
updateSelectedCountDisplay(); // Update count on master checkbox change
};
outlineContainer.appendChild(messageListDiv);
// Initial call to set the display text once all checkboxes are rendered and userQuestionCount is final
// This call is now placed AFTER messageListDiv (containing all checkboxes) is appended to outlineContainer.
updateSelectedCountDisplay();
// --- Search Bar Logic ---
searchInput.oninput = () => {
const searchText = searchInput.value.trim(); // Get the raw input text
let anyMatchFound = false;
let searchRegex;
let regexError = false;
// Reset previous error message and style
noMatchMessage.textContent = "Your search text didn't match any items";
noMatchMessage.style.color = "#7e7e7e"; // Default color
if (searchText === "") {
// If search text is empty, no regex is needed, all items will be shown
} else {
try {
// Create a RegExp object from the search input.
// The 'i' flag is added by default for case-insensitive search.
// Users can still specify other flags (e.g., /pattern/gi) directly in the input.
searchRegex = new RegExp(searchText, "i");
} catch (e) {
regexError = true;
// Display an error message for invalid regex
noMatchMessage.textContent = `Invalid regex: ${e.message}`;
noMatchMessage.style.color = "red"; // Make error message red
noMatchMessage.style.display = "block";
messageListDiv.style.display = "none";
// Hide all outline items if there's a regex error
outlineItemElements.forEach((itemDiv) => {
itemDiv.style.display = "none";
});
masterCheckbox.checked = false; // No valid visible items
updateSelectedCountDisplay(); // Update the count display
return; // Exit the function early if regex is invalid
}
}
const messages = ChatExporter._currentConversationData.messages;
const userMessageMap = new Map();
// Group user messages with their immediate AI responses
for (let i = 0; i < messages.length; i++) {
const msg = messages[i];
if (msg.author === "user") {
const userMsg = msg;
let aiMsg = null;
if (i + 1 < messages.length && messages[i + 1].author === "ai") {
aiMsg = messages[i + 1];
}
userMessageMap.set(userMsg.id, { user: userMsg, ai: aiMsg });
}
}
outlineItemElements.forEach((itemDiv, userMsgId) => {
const userAiPair = userMessageMap.get(userMsgId);
let match = false;
if (userAiPair) {
const userContent = userAiPair.user.contentText;
const aiContent = userAiPair.ai ? userAiPair.ai.contentText : "";
if (searchText === "") {
match = true; // If search box is empty, consider it a match (show all)
} else if (searchRegex) {
// Use regex.test() for matching against content
if (
searchRegex.test(userContent) ||
searchRegex.test(aiContent)
) {
match = true;
}
}
}
if (match) {
itemDiv.style.display = "flex";
anyMatchFound = true;
} else {
itemDiv.style.display = "none";
}
});
// Show/hide no match message and adjust message list visibility
if (searchText !== "" && !anyMatchFound && !regexError) {
noMatchMessage.style.display = "block";
messageListDiv.style.display = "none";
} else if (searchText === "" || anyMatchFound) {
noMatchMessage.style.display = "none";
if (!UIManager._outlineIsCollapsed) {
// Only show message list if outline is expanded
// Keep this as a fallback if messageListDiv display is not primarily controlled by flexGrow
messageListDiv.style.display = "block";
}
}
// After filtering, update master checkbox and count display based on visible items
const visibleCheckboxes = outlineContainer.querySelectorAll(
".outline-item-checkbox:not([style*='display: none'])"
);
const allVisibleChecked =
visibleCheckboxes.length > 0 &&
Array.from(visibleCheckboxes).every((cb) => cb.checked);
masterCheckbox.checked = allVisibleChecked;
updateSelectedCountDisplay();
};
// --- End Search Bar Logic ---
// Ensure visibility based on collapse state
if (UIManager._outlineIsCollapsed) {
titleDiv.style.display = "none";
selectAllContainer.style.display = "none";
searchInput.style.display = "none";
noMatchMessage.style.display = "none";
hr.style.display = "none";
messageListDiv.style.display = "none";
} else {
titleDiv.style.display = "flex";
selectAllContainer.style.display = "flex";
searchInput.style.display = "block";
// noMatchMessage and messageListDiv display will be handled by searchInput.oninput
hr.style.display = "block";
}
},
/**
* Toggles the collapse state of the outline div.
*/
toggleOutlineCollapse() {
UIManager._outlineIsCollapsed = !UIManager._outlineIsCollapsed;
// New: Save the new state to localStorage
localStorage.setItem(
OUTLINE_COLLAPSED_STATE_KEY,
UIManager._outlineIsCollapsed.toString()
);
const outlineContainer = document.querySelector(
`#${OUTLINE_CONTAINER_ID}`
);
const titleDiv = document.querySelector(`#${OUTLINE_TITLE_ID}`);
const selectAllContainer = document.querySelector(
"#outline-select-all-container"
);
const searchInput = document.querySelector("#outline-search-input");
const noMatchMessage = document.querySelector(
"#outline-no-match-message"
);
const hr = outlineContainer.querySelector("hr");
const messageListDiv = document.querySelector("#outline-message-list");
const toggleButton = document.querySelector("#outline-toggle-btn");
if (UIManager._outlineIsCollapsed) {
Utils.applyStyles(outlineContainer, {
...OUTLINE_CONTAINER_PROPS,
...OUTLINE_CONTAINER_COLLAPSED_PROPS,
});
if (titleDiv) titleDiv.style.display = "none";
if (selectAllContainer) selectAllContainer.style.display = "none";
if (searchInput) searchInput.style.display = "none";
if (noMatchMessage) noMatchMessage.style.display = "none";
if (hr) hr.style.display = "none";
if (messageListDiv) messageListDiv.style.display = "none";
if (toggleButton) toggleButton.textContent = "▲";
} else {
Utils.applyStyles(outlineContainer, OUTLINE_CONTAINER_PROPS);
if (titleDiv) titleDiv.style.display = "flex";
if (selectAllContainer) selectAllContainer.style.display = "flex";
if (searchInput) searchInput.style.display = "block";
// noMatchMessage and messageListDiv display depend on search state, not just collapse
if (hr) hr.style.display = "block";
// Trigger a re-evaluation of search filter if it was active
const currentSearchText = searchInput
? searchInput.value.toLowerCase().trim()
: "";
if (currentSearchText !== "") {
searchInput.dispatchEvent(new Event("input")); // Re-run search filter
} else {
// If no search text, ensure all messages are visible
if (messageListDiv) messageListDiv.style.display = "block";
const allItems = outlineContainer.querySelectorAll(
".outline-item-checkbox"
);
allItems.forEach((cb) => {
const parentDiv = cb.closest("div");
if (parentDiv) parentDiv.style.display = "flex";
});
if (noMatchMessage) noMatchMessage.style.display = "none";
}
if (toggleButton) toggleButton.textContent = "▼";
}
},
/**
* Displays a non-obstructive alert message.
* @param {string} message The message to display.
*/
showAlert(message) {
// Clear any existing auto-hide timeout before showing a new alert
if (UIManager.alertTimeoutId) {
clearTimeout(UIManager.alertTimeoutId);
UIManager.alertTimeoutId = null;
}
// Only show alert if the flag is not set in local storage
if (localStorage.getItem(HIDE_ALERT_FLAG) === "true") {
return;
}
// Check if alert is already present to avoid multiple instances.
// If it is, and we're trying to show a new one, remove the old one first.
let alertContainer = document.querySelector(`#${ALERT_CONTAINER_ID}`);
if (alertContainer) {
alertContainer.remove();
}
alertContainer = document.createElement("div");
alertContainer.id = ALERT_CONTAINER_ID;
Utils.applyStyles(alertContainer, ALERT_PROPS);
// Set dynamic max-width
alertContainer.style.maxWidth = UIManager.getTargetContentWidth();
// New: Title for the alert
const titleElement = document.createElement("strong");
titleElement.textContent = EXPORT_BUTTON_TITLE_PREFIX; // Use the global variable for title
titleElement.style.display = "block"; // Ensure it takes full width and breaks line
titleElement.style.marginBottom = "8px"; // Spacing before the message
titleElement.style.fontSize = "16px"; // Slightly larger font for title
titleElement.style.width = "100%"; // Take full available width of the alert box
titleElement.style.textAlign = "center"; // Center the title
alertContainer.appendChild(titleElement);
// Message row with close button
const messageRow = document.createElement("div");
Utils.applyStyles(messageRow, ALERT_MESSAGE_ROW_PROPS);
const messageSpan = document.createElement("span");
messageSpan.textContent = message;
messageRow.appendChild(messageSpan);
const closeButton = document.createElement("button");
closeButton.textContent = "×";
Utils.applyStyles(closeButton, ALERT_CLOSE_BUTTON_PROPS);
messageRow.appendChild(closeButton);
alertContainer.appendChild(messageRow);
// Checkbox for "never show again"
const checkboxContainer = document.createElement("div");
Utils.applyStyles(checkboxContainer, ALERT_CHECKBOX_CONTAINER_PROPS);
const hideCheckbox = document.createElement("input");
hideCheckbox.type = "checkbox";
hideCheckbox.id = "hide-exporter-alert";
Utils.applyStyles(hideCheckbox, ALERT_CHECKBOX_PROPS);
checkboxContainer.appendChild(hideCheckbox);
const label = document.createElement("label");
label.htmlFor = "hide-exporter-alert";
label.textContent = "Don't show this again";
checkboxContainer.appendChild(label);
alertContainer.appendChild(checkboxContainer);
document.body.appendChild(alertContainer);
// Function to hide and remove the alert
const hideAndRemoveAlert = () => {
alertContainer.style.opacity = "0";
setTimeout(() => {
if (alertContainer) {
// Check if element still exists before removing
alertContainer.remove();
}
UIManager.alertTimeoutId = null; // Reset timeout ID
}, 500); // Remove after fade out
};
// Event listener for close button
closeButton.onclick = () => {
if (hideCheckbox.checked) {
localStorage.setItem(HIDE_ALERT_FLAG, "true");
}
hideAndRemoveAlert();
};
// Set auto-hide timeout
UIManager.alertTimeoutId = setTimeout(() => {
// Only auto-hide if the checkbox is NOT checked
if (
alertContainer &&
alertContainer.parentNode &&
!hideCheckbox.checked
) {
hideAndRemoveAlert();
} else {
UIManager.alertTimeoutId = null; // Clear if not auto-hiding
}
}, ALERT_AUTO_CLOSE_DURATION); // Use the defined duration
},
/**
* Attempts to auto-scroll the Gemini conversation to the top to load all messages.
* This function uses an iterative approach to handle dynamic loading.
*/
autoScrollToTop: async function () {
if (
!GEMINI_HOSTNAMES.some((host) =>
window.location.hostname.includes(host)
)
) {
// console.log("autoScrollToTop: Not on a Gemini hostname. Returning early.");
return;
}
// Track the current URL to avoid re-scrolling the same chat repeatedly
const currentUrl = window.location.href;
// New: Check if we have already effectively started auto-scrolling for this URL.
// UIManager._lastProcessedChatUrl will be null initially, or explicitly reset by handleUrlChange for new URLs.
// It will be set to currentUrl *after* the initial message element is found.
if (UIManager._lastProcessedChatUrl === currentUrl) {
console.log(
"Auto-scroll already initiated or completed for this URL. Skipping."
);
return;
}
// console.log(`Auto-scroll triggered for new URL: ${currentUrl}`);
let scrollableElement =
document.querySelector('[data-test-id="chat-history-container"]') || // **PRIMARY TARGET (CONFIRMED BY LOGS)**
document.querySelector("#chat-history") || // Fallback to chat history div by ID
document.querySelector("main") || // Fallback to main element
document.documentElement; // Final fallback to the document's root element
if (!scrollableElement) {
// UIManager.showAlert(
// "Error: Could not find chat scroll area. Auto-scroll failed."
// );
return;
}
// UIManager.showAlert(
// "Auto-scrolling to load entire conversation... Please wait."
// );
const AUTOSCROLL_MAT_PROGRESS_BAR_POLL_INTERVAL = 50;
const AUTOSCROLL_MAT_PROGRESS_BAR_APPEAR_TIMEOUT = 3000;
const AUTOSCROLL_MAT_PROGRESS_BAR_DISAPPEAR_TIMEOUT = 5000;
const AUTOSCROLL_REPEAT_DELAY = 500;
const AUTOSCROLL_MAX_RETRY = 3;
const MESSAGE_ELEMENT_APPEAR_TIMEOUT = 5000;
let previousMessageCount = -1;
let retriesForProgressBar = 0;
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const waitForElementToAppear = async (
selector,
timeoutMs,
checkInterval = AUTOSCROLL_MAT_PROGRESS_BAR_POLL_INTERVAL
) => {
const startTime = Date.now();
return new Promise((resolve) => {
const interval = setInterval(() => {
const element = document.querySelector(selector);
if (element) {
clearInterval(interval);
resolve(element);
} else if (Date.now() - startTime > timeoutMs) {
clearInterval(interval);
resolve(null);
}
}, checkInterval);
});
};
const waitForElementToDisappear = async (
selector,
timeoutMs,
checkInterval = AUTOSCROLL_MAT_PROGRESS_BAR_POLL_INTERVAL
) => {
const startTime = Date.now();
return new Promise((resolve) => {
const interval = setInterval(() => {
const element = document.querySelector(selector);
if (
!element ||
(element.offsetWidth === 0 && element.offsetHeight === 0)
) {
clearInterval(interval);
resolve(true);
} else if (Date.now() - startTime > timeoutMs) {
clearInterval(interval);
console.warn(
`waitForElementToDisappear: Timeout waiting for '${selector}' to disappear.`
);
resolve(false);
}
}, checkInterval);
});
};
// --- Wait for initial chat messages to appear ---
// This is crucial for new chat loads from sidebar clicks.
// console.log("Waiting for initial chat message elements...");
const initialMessageElement = await waitForElementToAppear(
GEMINI_MESSAGE_ITEM_SELECTOR,
MESSAGE_ELEMENT_APPEAR_TIMEOUT
);
if (!initialMessageElement) {
// UIManager.showAlert(
// "Timeout waiting for chat messages to appear. Auto-scroll cannot proceed."
// );
console.error(
"Initial chat message elements did not appear within timeout."
);
// If initial messages don't appear, this URL was not successfully processed for auto-scroll.
// So, reset _lastProcessedChatUrl to null to allow a retry or a different trigger for this URL.
UIManager._lastProcessedChatUrl = null; // Add this line
return;
}
// console.log("Initial chat message elements found. Starting scroll loop.");
// Mark this URL as processed *only after* initial messages are found.
// This ensures that autoScrollToTop will proceed if called for a new URL,
// and will block subsequent calls for the *same* URL until _lastProcessedChatUrl is reset by handleUrlChange.
UIManager._lastProcessedChatUrl = currentUrl; // Move this line from the beginning to here.
// --- IMPORTANT: Attach URL change listeners here after initial chat message elements appears ---
if (!UIManager._initialListenersAttached) {
// Only attach them once
UIManager.initUrlChangeObserver();
UIManager._initialListenersAttached = true; // Mark that they are attached
}
while (true) {
scrollableElement.scrollTop = 0;
await delay(50); // Small delay after scroll
// console.log("Scrolling to top, checking for progress bar...");
const progressBarElement = await waitForElementToAppear(
"mat-progress-bar.mdc-linear-progress--indeterminate",
AUTOSCROLL_MAT_PROGRESS_BAR_APPEAR_TIMEOUT
);
if (progressBarElement) {
retriesForProgressBar = 0; // Reset retries if progress bar appeared
// console.log("Progress bar appeared. Waiting for it to disappear...");
const disappeared = await waitForElementToDisappear(
"mat-progress-bar.mdc-linear-progress--indeterminate",
AUTOSCROLL_MAT_PROGRESS_BAR_DISAPPEAR_TIMEOUT
);
if (!disappeared) {
console.warn(
"autoScrollToTop: mat-progress-bar did not disappear within expected time."
);
}
} else {
// If progress bar doesn't appear, increment retry count
retriesForProgressBar++;
if (retriesForProgressBar > AUTOSCROLL_MAX_RETRY) {
break;
}
await delay(AUTOSCROLL_REPEAT_DELAY);
continue; // Continue loop to try scrolling again
}
const currentConversationData =
ChatExporter.extractGeminiConversationData(document);
const currentMessageCount = currentConversationData
? currentConversationData.messages.length
: 0;
if (currentMessageCount > previousMessageCount) {
previousMessageCount = currentMessageCount;
retriesForProgressBar = 0; // Reset retries if new messages found
} else {
// No new messages detected after a scroll attempt (and progress bar check)
// If we had messages before, and now no new ones, it means we reached the top.
// console.log("autoScrollToTop: No NEW messages detected after this load cycle. Checking for termination conditions.");
if (previousMessageCount !== -1) {
// console.log("autoScrollToTop: Assuming end of conversation due to no new messages after loading.");
break;
}
}
await delay(AUTOSCROLL_REPEAT_DELAY);
}
// console.log("autoScrollToTop: Auto-scroll process complete. Final message count:", previousMessageCount);
// UIManager.showAlert(
// "Auto-scroll complete. You can now export your conversation."
// );
UIManager.addOutlineControls();
},
/**
* Handles URL changes to trigger auto-scroll for new Gemini chats.
* This will only be attached AFTER the initial page load auto-scroll finishes.
*/
handleUrlChange: function () {
const newUrl = window.location.href;
// console.log(
// "URL Change Detected (popstate or customHistoryChange):",
// newUrl
// );
const isGeminiChatUrl =
GEMINI_HOSTNAMES.some((host) => newUrl.includes(host)) &&
newUrl.includes("/app");
if (isGeminiChatUrl) {
// Trigger auto-scroll for valid Gemini chat URLs.
setTimeout(() => {
UIManager.autoScrollToTop();
}, 100); // Small delay to allow DOM to update before triggering
} else {
console.log(
"URL is not a Gemini chat URL. Skipping auto-scroll for:",
newUrl
);
}
},
/**
* Initializes a MutationObserver to ensure the controls are always present
* and to regenerate the outline on DOM changes.
*/
initObserver() {
const observer = new MutationObserver((mutations) => {
// Only re-add export controls if they are missing
if (!document.querySelector(`#${EXPORT_CONTAINER_ID}`)) {
UIManager.addExportControls();
}
// Always ensure outline controls are present and regenerate content on changes
// This covers new messages, and for Gemini, scrolling up to load more content.
UIManager.addOutlineControls();
});
// Observe a broad area that includes chat messages and where new messages are added
const chatContainerSelector = CHATGPT_HOSTNAMES.some((h) =>
window.location.hostname.includes(h)
)
? "main" // ChatGPT's main content area
: "#__next"; // Gemini's root container, or a more specific chat area if found
const targetNode =
document.querySelector(chatContainerSelector) || document.body;
observer.observe(targetNode, {
childList: true,
subtree: true,
attributes: false,
});
// Additionally, for Gemini, listen for scroll events on the window or a specific scrollable div
// if MutationObserver isn't sufficient for detecting all content loads.
if (
GEMINI_HOSTNAMES.some((host) => window.location.hostname.includes(host))
) {
let scrollTimeout;
window.addEventListener(
"scroll",
() => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
// Only regenerate if title or tags are different or current data count is less than actual count (implies more loaded)
const newConversationData =
ChatExporter.extractGeminiConversationData(document);
if (
newConversationData &&
ChatExporter._currentConversationData &&
(newConversationData._raw_title !==
ChatExporter._currentConversationData._raw_title ||
newConversationData.messages.length >
ChatExporter._currentConversationData.messages.length)
) {
UIManager.addOutlineControls(); // Regenerate outline
}
}, 500); // Debounce scroll events
},
true
); // Use capture phase to ensure it works
}
},
/**
* Sets up the event listeners for URL changes (popstate and customHistoryChange).
* This function will be called *after* the initial page load auto-scroll.
*/
initUrlChangeObserver: function () {
// console.log("Attaching URL change listeners.");
window.addEventListener("popstate", UIManager.handleUrlChange);
// Overwrite history.pushState and history.replaceState to dispatch custom event
(function (history) {
const pushState = history.pushState;
history.pushState = function (state) {
if (typeof history.onpushstate == "function") {
history.onpushstate({ state: state });
}
const customEvent = new Event("customHistoryChange");
window.dispatchEvent(customEvent);
return pushState.apply(history, arguments);
};
const replaceState = history.replaceState;
history.replaceState = function (state) {
if (typeof history.onreplacestate == "function") {
history.onreplacestate({ state: state });
}
const customEvent = new Event("customHistoryChange");
window.dispatchEvent(customEvent);
return replaceState.apply(history, arguments);
};
})(window.history);
window.addEventListener("customHistoryChange", UIManager.handleUrlChange);
},
/**
* Initializes the UI components by adding controls and setting up the observer.
*/
init() {
// New: Read collapsed state from localStorage on init
const storedCollapsedState = localStorage.getItem(
OUTLINE_COLLAPSED_STATE_KEY
);
UIManager._outlineIsCollapsed = storedCollapsedState === "true";
// Add controls after DOM is ready
if (
document.readyState === "complete" ||
document.readyState === "interactive"
) {
// console.log("DOM is ready (complete or interactive). Setting timeout for UI controls.");
setTimeout(() => {
// console.log("Timeout elapsed. Adding export and outline controls.");
UIManager.addExportControls();
UIManager.addOutlineControls(); // Add outline after buttons
// New: Initiate auto-scroll for Gemini after controls are set up
// console.log("Checking if current host is a Gemini hostname...");
if (
GEMINI_HOSTNAMES.some((host) =>
window.location.hostname.includes(host)
)
) {
setTimeout(() => {
// console.log("Delayed auto-scroll initiated."); // Debug log
UIManager.autoScrollToTop(); // This call will now use the async logic below
}, AUTOSCROLL_INITIAL_DELAY);
}
}, DOM_READY_TIMEOUT); // DOM_READY_TIMEOUT is assumed to be defined elsewhere, e.g., 1000ms
} else {
// console.log("DOM not yet ready. Adding DOMContentLoaded listener.");
window.addEventListener("DOMContentLoaded", () =>
setTimeout(() => {
// console.log("DOMContentLoaded event fired. Adding export and outline controls after timeout.");
UIManager.addExportControls();
UIManager.addOutlineControls(); // Add outline after buttons
// New: Initiate auto-scroll for Gemini after controls are set up
// console.log("Checking if current host is a Gemini hostname (from DOMContentLoaded).");
if (
GEMINI_HOSTNAMES.some((host) =>
window.location.hostname.includes(host)
)
) {
setTimeout(() => {
// console.log("Delayed auto-scroll initiated (from DOMContentLoaded)."); // Debug log
UIManager.autoScrollToTop(); // This call will now use the async logic below
}, AUTOSCROLL_INITIAL_DELAY);
}
}, DOM_READY_TIMEOUT)
);
}
UIManager.initObserver();
},
};
// --- Script Initialization ---
UIManager.init();
})();
