谷歌AI Studio 自动续写助手 (支持Agent模式)
// ==UserScript==
// @name Google AI Studio auto-continue helper
// @name:zh-CN Google AI Studio 自动续写助手
// @namespace http://tampermonkey.net/
// @version 5.2
// @description auto-continue helper for Google AI Studio with Agent mode
// @description:zh-CN 谷歌AI Studio 自动续写助手 (支持Agent模式)
// @author metrovoc
// @match https://aistudio.google.com/prompts/*
// @grant GM_addStyle
// @icon https://www.google.com/s2/favicons?domain=aistudio.google.com
// @license MIT
// ==/UserScript==
(function () {
"use strict";
// --- 配置区域 ---
const SCROLL_CONTAINER_SELECTOR = "ms-autoscroll-container";
const MESSAGE_TURN_SELECTOR = "ms-chat-turn";
const AUTOSIZE_CONTAINER_SELECTOR = "ms-autosize-textarea";
const TEXTAREA_SELECTOR = "ms-autosize-textarea textarea";
const RUN_BUTTON_SELECTOR = 'run-button button[aria-label="Run"]';
const STOP_BUTTON_SELECTOR = "run-button button.stoppable";
const DEFAULT_CONTINUE_PROMPT = "continue";
// --- 脚本状态变量 ---
let isAutoContinueEnabled = false;
let isAgentModeEnabled = false; // Agent模式开关
let targetMessageCount = 10; // 目标消息数
let isPanelExpanded = false;
let customContinuePrompt = DEFAULT_CONTINUE_PROMPT;
let debugPanel = null;
let agentProgressPanel = null; // Agent进度显示
let continueButton = null;
let toggleButton = null;
let customPromptInput = null;
let targetCountInput = null; // 目标数量输入框
let agentToggle = null; // Agent模式开关
let uiContainer = null;
let scrollTimeout = null;
let agentInterval = null; // Agent模式定时器
let countdownInterval = null; // 倒计时进度条定时器
let countdownProgressBar = null; // 倒计时进度条元素
let isAgentSectionExpanded = false; // Agent区域展开状态
let currentScrollContainer = null;
let containerWatcher = null;
let lastMessageCount = 0; // 上次消息数量
let pendingAgentTrigger = false; // 防止重复触发
// --- 启动逻辑 ---
console.log("Gemini 自动续写脚本 v4.2 (Agent Mode) 已启动！");
createAdvancedUI();
startContainerWatcher();
// 调试函数 - 可在控制台手动调用
window.debugAgentBreathing = function () {
const agentSection = document.querySelector(".agent-section");
if (agentSection) {
agentSection.classList.toggle("breathing");
console.log(
"呼吸效果状态:",
agentSection.classList.contains("breathing")
);
}
};
function startContainerWatcher() {
// 持续监控容器的存在和变化
containerWatcher = setInterval(() => {
const scrollContainer = document.querySelector(SCROLL_CONTAINER_SELECTOR);
// 检查容器是否发生变化
if (scrollContainer !== currentScrollContainer) {
if (currentScrollContainer) {
console.log("检测到容器变化，重新绑定监听器");
// 移除旧的监听器
currentScrollContainer.removeEventListener("scroll", handleScroll);
}
if (scrollContainer) {
console.log("找到新的滚动容器，绑定监听器");
currentScrollContainer = scrollContainer;
bindScrollListener(scrollContainer);
// 立即更新一次状态
setTimeout(() => updateDebugInfoAndTrigger(scrollContainer), 100);
} else {
console.log("未找到滚动容器");
currentScrollContainer = null;
if (debugPanel) {
debugPanel.textContent = "...";
}
if (agentProgressPanel) {
agentProgressPanel.textContent = "0/0";
}
}
}
// Agent模式独立更新
if (isAgentModeEnabled && scrollContainer) {
updateAgentProgress(scrollContainer);
} else if (isAgentModeEnabled) {
// 即使没有容器也要更新视觉状态
updateAgentVisualState();
}
// 每次都检查视觉状态，确保及时清除
updateAgentVisualState();
// 同步UI状态，确保continue button在fetching时被禁用
syncUIState();
}, 500);
}
function handleScroll() {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (currentScrollContainer) {
updateDebugInfoAndTrigger(currentScrollContainer);
}
}, 100);
}
function bindScrollListener(scrollContainer) {
scrollContainer.addEventListener("scroll", handleScroll);
}
// --- Agent模式相关函数 ---
function updateAgentProgress(container) {
const validTurns = getValidChatTurns(container);
const currentCount = validTurns.length;
if (agentProgressPanel) {
agentProgressPanel.textContent = `${currentCount}/${targetMessageCount}`;
}
// 更新Agent UI状态
updateAgentVisualState();
// 检查是否需要触发Agent自动续写
if (
isAgentModeEnabled &&
currentCount < targetMessageCount &&
!isCurrentlyFetching() &&
!pendingAgentTrigger
) {
// 检查消息数是否有增加(说明AI已经回复完成)
if (currentCount > lastMessageCount || lastMessageCount === 0) {
lastMessageCount = currentCount;
scheduleAgentContinue();
}
} else if (currentCount >= targetMessageCount) {
stopAgentMode();
}
}
function updateAgentVisualState() {
const agentSection = document.querySelector(".agent-section");
if (!agentSection) return;
// 如果Agent模式未启用，强制清除呼吸效果
if (!isAgentModeEnabled) {
agentSection.classList.remove("breathing");
return;
}
const isGenerating = isCurrentlyFetching();
const isCountingDown = pendingAgentTrigger;
console.log(
`视觉状态更新: Agent=${isAgentModeEnabled}, 生成中=${isGenerating}, 倒计时=${isCountingDown}`
);
// 只在AI正在生成且不在倒计时时显示呼吸效果
if (isGenerating && !isCountingDown) {
agentSection.classList.add("breathing");
} else {
agentSection.classList.remove("breathing");
}
}
function scheduleAgentContinue() {
// 随机间隔: 2-8秒，防止风控
const randomDelay = Math.random() * 6000 + 2000; // 2000-8000ms
console.log(
`Agent模式: 将在 ${(randomDelay / 1000).toFixed(1)} 秒后继续生成`
);
pendingAgentTrigger = true;
updateAgentVisualState(); // 更新视觉状态
startCountdownProgress(randomDelay);
agentInterval = setTimeout(() => {
if (isAgentModeEnabled && !isCurrentlyFetching()) {
console.log("Agent模式: 执行自动续写");
performAutoContinue();
}
pendingAgentTrigger = false;
updateAgentVisualState(); // 更新视觉状态
hideCountdownProgress();
}, randomDelay);
}
function startCountdownProgress(totalDelay) {
if (!countdownProgressBar) return;
countdownProgressBar.style.display = "block";
const startTime = Date.now();
const updateInterval = 50; // 每50ms更新一次
countdownInterval = setInterval(() => {
const elapsed = Date.now() - startTime;
const progress = Math.min((elapsed / totalDelay) * 100, 100);
const progressFill = countdownProgressBar.querySelector(".progress-fill");
if (progressFill) {
progressFill.style.width = `${progress}%`;
}
if (progress >= 100) {
clearInterval(countdownInterval);
countdownInterval = null;
}
}, updateInterval);
}
function hideCountdownProgress() {
if (countdownProgressBar) {
countdownProgressBar.style.display = "none";
const progressFill = countdownProgressBar.querySelector(".progress-fill");
if (progressFill) {
progressFill.style.width = "0%";
}
}
if (countdownInterval) {
clearInterval(countdownInterval);
countdownInterval = null;
}
}
function startAgentMode() {
console.log(`Agent模式启动: 目标 ${targetMessageCount} 条消息`);
isAgentModeEnabled = true;
lastMessageCount = 0;
pendingAgentTrigger = false;
updateAgentProgressVisibility();
// 立即检查一次状态
if (currentScrollContainer) {
updateAgentProgress(currentScrollContainer);
}
}
function stopAgentMode() {
console.log("Agent模式已停止");
isAgentModeEnabled = false;
pendingAgentTrigger = false;
lastMessageCount = 0;
if (agentInterval) {
clearTimeout(agentInterval);
agentInterval = null;
}
hideCountdownProgress();
updateAgentProgressVisibility();
// 强制清除呼吸效果
const agentSection = document.querySelector(".agent-section");
if (agentSection) {
agentSection.classList.remove("breathing");
}
updateAgentVisualState();
if (agentToggle) {
agentToggle.checked = false;
}
}
function updateAgentProgressVisibility() {
if (agentProgressPanel) {
const agentStatusSection = agentProgressPanel.closest(".panel-section");
if (agentStatusSection) {
agentStatusSection.style.display = isAgentModeEnabled ? "flex" : "none";
}
}
}
// 页面卸载时清理
window.addEventListener("beforeunload", () => {
stopAgentMode();
if (containerWatcher) {
clearInterval(containerWatcher);
}
if (countdownInterval) {
clearInterval(countdownInterval);
}
});
// --- 核心功能函数 ---
function isCurrentlyFetching() {
return !!document.querySelector(STOP_BUTTON_SELECTOR);
}
function syncUIState() {
if (continueButton) {
continueButton.disabled = isCurrentlyFetching();
}
}
function performAutoContinue() {
if (isCurrentlyFetching()) {
console.log("正在等待AI响应，续写操作已跳过。");
return;
}
const autosizeContainer = document.querySelector(
AUTOSIZE_CONTAINER_SELECTOR
);
const textarea = document.querySelector(TEXTAREA_SELECTOR);
const runButton = document.querySelector(RUN_BUTTON_SELECTOR);
if (autosizeContainer && textarea && runButton) {
console.log(`尝试执行续写，发送: "${customContinuePrompt}"`);
autosizeContainer.setAttribute("data-value", customContinuePrompt);
textarea.value = customContinuePrompt;
textarea.dispatchEvent(
new Event("input", { bubbles: true, composed: true })
);
// Generate random delay between 50ms and 250ms to simulate human behavior
const humanDelay = Math.random() * 200 + 50; // 50-250ms
console.log(
`Human-like delay: ${humanDelay.toFixed(
0
)}ms before clicking run button`
);
setTimeout(() => {
// Re-check conditions before clicking to avoid conflicts during delay
if (isCurrentlyFetching()) {
console.log(
"AI started responding during delay, skipping button click"
);
return;
}
const finalRunButton = document.querySelector(RUN_BUTTON_SELECTOR);
if (finalRunButton && !finalRunButton.disabled) {
finalRunButton.click();
console.log("消息已发送！");
// 立即同步UI状态，禁用continue button
setTimeout(() => syncUIState(), 100);
} else {
console.error("发送失败：按钮在填充输入后仍然被禁用。");
}
}, humanDelay);
} else {
console.warn("无法执行续写：缺少必要的UI组件。");
}
}
// 过滤有效的聊天轮次：包含model-prompt-container且不含ms-thought-chunk的ms-chat-turn
function getValidChatTurns(container) {
const allTurns = container.querySelectorAll(MESSAGE_TURN_SELECTOR);
const validTurns = [];
console.log(`[getValidChatTurns] 总聊天轮次: ${allTurns.length}`);
allTurns.forEach((turn, index) => {
// 检查是否包含 model-prompt-container
const hasModelPromptContainer = turn.querySelector(
".model-prompt-container"
);
if (!hasModelPromptContainer) {
console.log(
`[getValidChatTurns] 轮次 ${
index + 1
}: 跳过 - 无 model-prompt-container`
);
return;
}
// 检查是否不包含 ms-thought-chunk (自定义元素，不用点号)
const hasThoughtChunk = turn.querySelector("ms-thought-chunk");
if (hasThoughtChunk) {
console.log(
`[getValidChatTurns] 轮次 ${index + 1}: 跳过 - 包含 ms-thought-chunk`
);
return;
}
console.log(`[getValidChatTurns] 轮次 ${index + 1}: ✓ 有效`);
validTurns.push(turn);
});
console.log(
`[getValidChatTurns] 有效聊天轮次: ${validTurns.length}/${allTurns.length}`
);
return validTurns;
}
function updateDebugInfoAndTrigger(container) {
if (!debugPanel || !container) return;
const validTurns = getValidChatTurns(container);
const total = validTurns.length;
if (total === 0) {
debugPanel.textContent = "0/0";
return;
}
let currentIndex = -1;
const viewportTopThreshold = container.getBoundingClientRect().top + 60;
for (let i = 0; i < validTurns.length; i++) {
const rect = validTurns[i].getBoundingClientRect();
if (rect.top >= viewportTopThreshold) {
currentIndex = i;
break;
}
}
// 计算显示位置：
// currentIndex = -1 表示所有validturn都已滚动过，显示最后一个
// currentIndex = 0 表示还没开始看第一个validturn，显示0
// currentIndex = i 表示正在看第i个validturn，显示i
let displayPosition;
if (currentIndex === -1) {
displayPosition = total; // 所有都看过了
} else if (currentIndex === 0) {
displayPosition = 0; // 还没开始看第一个
} else {
displayPosition = currentIndex; // 正在看第currentIndex个（从0开始）
}
debugPanel.textContent = `${displayPosition}/${total}`;
// 只有在非Agent模式下才使用滚动逻辑触发
if (!isAgentModeEnabled) {
const shouldTrigger =
isAutoContinueEnabled && total > 1 && displayPosition >= total - 1;
if (shouldTrigger && !isCurrentlyFetching()) {
console.log(`自动续写条件满足：位置 ${displayPosition}/${total}`);
performAutoContinue();
}
}
}
// --- SVG图标创建函数 ---
function createSVGIcon(pathData, viewBox = "0 0 24 24") {
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "20");
svg.setAttribute("height", "20");
svg.setAttribute("viewBox", viewBox);
svg.setAttribute("fill", "currentColor");
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", pathData);
svg.appendChild(path);
return svg;
}
function createExpandIcon() {
return createSVGIcon("M7 14l5-5 5 5z");
}
function createCollapseIcon() {
return createSVGIcon("M7 10l5 5 5-5z");
}
function createSettingsIcon() {
return createSVGIcon(
"M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97 0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1 0 .33.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66Z"
);
}
function togglePanel() {
isPanelExpanded = !isPanelExpanded;
updatePanelState();
}
function updatePanelState() {
const panel = document.getElementById("tampermonkey-panel");
const toggleBtnIcon = document.getElementById("tampermonkey-toggle-icon");
if (isPanelExpanded) {
panel.style.display = "flex";
// 清空并重新添加icon
toggleBtnIcon.textContent = "";
toggleBtnIcon.appendChild(createCollapseIcon());
uiContainer.classList.add("expanded");
} else {
panel.style.display = "none";
// 清空并重新添加icon
toggleBtnIcon.textContent = "";
toggleBtnIcon.appendChild(createSettingsIcon());
uiContainer.classList.remove("expanded");
}
}
function toggleAgentSection() {
isAgentSectionExpanded = !isAgentSectionExpanded;
const agentDetails = document.querySelector(".agent-details");
const expandArrow = document.querySelector(".expand-arrow");
if (agentDetails && expandArrow) {
if (isAgentSectionExpanded) {
agentDetails.style.display = "block";
expandArrow.textContent = "▼";
expandArrow.classList.add("expanded");
} else {
agentDetails.style.display = "none";
expandArrow.textContent = "▶";
expandArrow.classList.remove("expanded");
}
}
}
// --- 高级UI创建 ---
function createAdvancedUI() {
// 主容器
uiContainer = document.createElement("div");
uiContainer.id = "tampermonkey-ui-container";
uiContainer.className = "collapsed";
document.body.appendChild(uiContainer);
// 切换按钮（始终可见）
toggleButton = document.createElement("button");
toggleButton.id = "tampermonkey-toggle-btn";
toggleButton.className = "toggle-button";
toggleButton.setAttribute("title", "Toggle Gemini Assistant Panel");
const toggleIcon = document.createElement("span");
toggleIcon.id = "tampermonkey-toggle-icon";
toggleIcon.appendChild(createSettingsIcon());
toggleButton.appendChild(toggleIcon);
toggleButton.addEventListener("click", togglePanel);
uiContainer.appendChild(toggleButton);
// 主面板容器（可折叠）
const panel = document.createElement("div");
panel.id = "tampermonkey-panel";
panel.className = "main-panel";
panel.style.display = "none";
uiContainer.appendChild(panel);
// 状态显示区域
const statusSection = document.createElement("div");
statusSection.className = "panel-section";
const statusLabel = document.createElement("span");
statusLabel.className = "section-label";
statusLabel.textContent = "Scroll Position:";
debugPanel = document.createElement("div");
debugPanel.id = "tampermonkey-debug-panel";
debugPanel.className = "status-display";
debugPanel.textContent = "...";
statusSection.appendChild(statusLabel);
statusSection.appendChild(debugPanel);
panel.appendChild(statusSection);
// Agent模式状态区域（初始隐藏）
const agentStatusSection = document.createElement("div");
agentStatusSection.className = "panel-section";
agentStatusSection.style.display = "none";
const agentStatusLabel = document.createElement("span");
agentStatusLabel.className = "section-label";
agentStatusLabel.textContent = "Agent Progress:";
agentProgressPanel = document.createElement("div");
agentProgressPanel.id = "tampermonkey-agent-panel";
agentProgressPanel.className = "status-display agent-status";
agentProgressPanel.textContent = "0/0";
agentStatusSection.appendChild(agentStatusLabel);
agentStatusSection.appendChild(agentProgressPanel);
panel.appendChild(agentStatusSection);
// 控制按钮区域
const controlSection = document.createElement("div");
controlSection.className = "panel-section compact";
// 手动继续按钮行
const continueRow = document.createElement("div");
continueRow.className = "control-row";
continueButton = document.createElement("button");
continueButton.id = "tampermonkey-continue-btn";
continueButton.className = "control-button primary compact";
continueButton.textContent = "Continue";
continueButton.addEventListener("click", () => {
console.log("手动触发续写...");
performAutoContinue();
// 更新Agent视觉状态，因为可能开始了新的生成
setTimeout(() => {
updateAgentVisualState();
syncUIState();
}, 100);
});
continueRow.appendChild(continueButton);
// 自动续写开关行
const autoRow = document.createElement("div");
autoRow.className = "control-row";
const autoLabel = document.createElement("label");
autoLabel.className = "control-label";
autoLabel.textContent = "Auto continue:";
const autoSwitchContainer = document.createElement("div");
autoSwitchContainer.className = "switch-container";
const autoSwitchLabel = document.createElement("label");
autoSwitchLabel.className = "switch-label small";
autoSwitchLabel.setAttribute("title", "Auto-Continue Toggle");
const autoContinueToggle = document.createElement("input");
autoContinueToggle.type = "checkbox";
autoContinueToggle.checked = isAutoContinueEnabled;
autoContinueToggle.addEventListener("change", (e) => {
isAutoContinueEnabled = e.target.checked;
// 开启普通自动续写时，关闭Agent模式
if (isAutoContinueEnabled && isAgentModeEnabled) {
stopAgentMode();
}
console.log(`自动续写已 ${isAutoContinueEnabled ? "开启" : "关闭"}`);
});
const switchSlider = document.createElement("span");
switchSlider.className = "switch-slider";
autoSwitchLabel.appendChild(autoContinueToggle);
autoSwitchLabel.appendChild(switchSlider);
autoSwitchContainer.appendChild(autoSwitchLabel);
autoRow.appendChild(autoLabel);
autoRow.appendChild(autoSwitchContainer);
controlSection.appendChild(continueRow);
controlSection.appendChild(autoRow);
panel.appendChild(controlSection);
// Agent模式控制区域
const agentSection = document.createElement("div");
agentSection.className = "panel-section agent-section";
// Agent模式主标题和展开箭头
const agentMainHeader = document.createElement("div");
agentMainHeader.className = "agent-main-header";
agentMainHeader.addEventListener("click", toggleAgentSection);
const agentMainTitle = document.createElement("span");
agentMainTitle.className = "section-label clickable";
agentMainTitle.textContent = "Agent Mode";
const expandArrow = document.createElement("span");
expandArrow.className = "expand-arrow";
expandArrow.textContent = "▶";
agentMainHeader.appendChild(agentMainTitle);
agentMainHeader.appendChild(expandArrow);
// Agent详细控制区域（可折叠）
const agentDetailsSection = document.createElement("div");
agentDetailsSection.className = "agent-details";
agentDetailsSection.style.display = "none";
// Agent模式开关行
const agentToggleRow = document.createElement("div");
agentToggleRow.className = "agent-control-row";
const agentToggleLabel = document.createElement("label");
agentToggleLabel.className = "control-label";
agentToggleLabel.textContent = "Enable:";
const agentSwitchContainer = document.createElement("div");
agentSwitchContainer.className = "switch-container";
const agentSwitchLabel = document.createElement("label");
agentSwitchLabel.className = "switch-label small";
agentSwitchLabel.setAttribute("title", "Agent Mode Toggle");
agentToggle = document.createElement("input");
agentToggle.type = "checkbox";
agentToggle.checked = isAgentModeEnabled;
agentToggle.addEventListener("change", (e) => {
if (e.target.checked) {
// 开启Agent模式时，关闭普通自动续写
if (isAutoContinueEnabled) {
isAutoContinueEnabled = false;
const normalToggle = document.querySelector(
'#tampermonkey-panel input[type="checkbox"]'
);
if (normalToggle && normalToggle !== agentToggle) {
normalToggle.checked = false;
}
}
startAgentMode();
} else {
stopAgentMode();
}
});
const agentSwitchSlider = document.createElement("span");
agentSwitchSlider.className = "switch-slider";
agentSwitchLabel.appendChild(agentToggle);
agentSwitchLabel.appendChild(agentSwitchSlider);
agentSwitchContainer.appendChild(agentSwitchLabel);
agentToggleRow.appendChild(agentToggleLabel);
agentToggleRow.appendChild(agentSwitchContainer);
// 目标数量输入行
const targetRow = document.createElement("div");
targetRow.className = "agent-control-row";
const targetLabel = document.createElement("label");
targetLabel.className = "control-label";
targetLabel.setAttribute("for", "tampermonkey-target-input");
targetLabel.textContent = "Target:";
targetCountInput = document.createElement("input");
targetCountInput.id = "tampermonkey-target-input";
targetCountInput.type = "number";
targetCountInput.className = "number-input compact";
targetCountInput.value = targetMessageCount;
targetCountInput.min = "1";
targetCountInput.max = "999";
targetCountInput.placeholder = "10";
targetCountInput.addEventListener("input", (e) => {
const value = parseInt(e.target.value);
if (value && value > 0) {
targetMessageCount = value;
console.log(`目标消息数已更新: ${targetMessageCount}`);
}
});
targetRow.appendChild(targetLabel);
targetRow.appendChild(targetCountInput);
// 倒计时进度条
countdownProgressBar = document.createElement("div");
countdownProgressBar.className = "countdown-progress";
countdownProgressBar.style.display = "none";
const progressLabel = document.createElement("div");
progressLabel.className = "progress-label";
progressLabel.textContent = "Next generation in:";
const progressBarContainer = document.createElement("div");
progressBarContainer.className = "progress-bar-container";
const progressFill = document.createElement("div");
progressFill.className = "progress-fill";
progressBarContainer.appendChild(progressFill);
countdownProgressBar.appendChild(progressLabel);
countdownProgressBar.appendChild(progressBarContainer);
agentDetailsSection.appendChild(agentToggleRow);
agentDetailsSection.appendChild(targetRow);
agentDetailsSection.appendChild(countdownProgressBar);
agentSection.appendChild(agentMainHeader);
agentSection.appendChild(agentDetailsSection);
panel.appendChild(agentSection);
// 自定义提示词区域
const promptSection = document.createElement("div");
promptSection.className = "panel-section";
const promptLabel = document.createElement("label");
promptLabel.className = "section-label";
promptLabel.setAttribute("for", "tampermonkey-prompt-input");
promptLabel.textContent = "Custom Prompt:";
customPromptInput = document.createElement("input");
customPromptInput.id = "tampermonkey-prompt-input";
customPromptInput.type = "text";
customPromptInput.className = "prompt-input";
customPromptInput.value = customContinuePrompt;
customPromptInput.placeholder = "Enter custom continue prompt...";
customPromptInput.addEventListener("input", (e) => {
customContinuePrompt = e.target.value.trim() || DEFAULT_CONTINUE_PROMPT;
console.log(`自定义提示词已更新: "${customContinuePrompt}"`);
});
promptSection.appendChild(promptLabel);
promptSection.appendChild(customPromptInput);
panel.appendChild(promptSection);
// 添加样式
GM_addStyle(`
#tampermonkey-ui-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.toggle-button {
width: 48px;
height: 48px;
border: none;
border-radius: 50%;
background: linear-gradient(135deg, #1a73e8, #185abc);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
}
.toggle-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(26, 115, 232, 0.4);
background: linear-gradient(135deg, #185abc, #1557a0);
}
.toggle-button:active {
transform: translateY(0);
}
#tampermonkey-toggle-icon {
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.expanded #tampermonkey-toggle-icon {
transform: rotate(180deg);
}
.main-panel {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 16px;
padding: 16px;
min-width: 280px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
display: none;
flex-direction: column;
gap: 12px;
animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.panel-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.panel-section.compact {
gap: 6px;
}
.control-row {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 32px;
}
.section-label {
font-size: 12px;
font-weight: 600;
color: #5f6368;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-display {
background: rgba(26, 115, 232, 0.1);
color: #1a73e8;
padding: 8px 12px;
border-radius: 8px;
font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
font-size: 14px;
font-weight: 600;
text-align: center;
border: 1px solid rgba(26, 115, 232, 0.2);
}
.agent-status {
background: rgba(34, 139, 34, 0.1);
color: #228b22;
border: 1px solid rgba(34, 139, 34, 0.2);
}
.control-button {
background: linear-gradient(135deg, #1a73e8, #185abc);
color: white;
border: none;
padding: 12px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(26, 115, 232, 0.3);
}
.control-button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(26, 115, 232, 0.4);
}
.control-button:disabled {
background: #e0e0e0;
color: #9e9e9e;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.control-button.compact {
padding: 8px 16px;
font-size: 13px;
width: 100%;
}
.switch-label {
position: relative;
display: inline-block;
width: 52px;
height: 28px;
cursor: pointer;
align-self: flex-start;
}
.switch-label input {
opacity: 0;
width: 0;
height: 0;
}
.switch-slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 28px;
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch-slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: white;
border-radius: 50%;
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.switch-label input:checked + .switch-slider {
background: linear-gradient(135deg, #1a73e8, #185abc);
}
.switch-label input:checked + .switch-slider:before {
transform: translateX(24px);
}
.switch-label.small {
width: 40px;
height: 22px;
}
.switch-label.small .switch-slider {
border-radius: 22px;
}
.switch-label.small .switch-slider:before {
height: 16px;
width: 16px;
left: 3px;
bottom: 3px;
}
.switch-label.small input:checked + .switch-slider:before {
transform: translateX(18px);
}
.prompt-input {
width: 100%;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 14px;
font-family: inherit;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(255, 255, 255, 0.8);
box-sizing: border-box;
}
.prompt-input:focus {
outline: none;
border-color: #1a73e8;
box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
background: white;
}
.prompt-input::placeholder {
color: #9e9e9e;
font-style: italic;
}
.agent-section {
border-top: 1px solid #e0e0e0;
background: rgba(34, 139, 34, 0.03);
border-radius: 10px;
padding: 10px;
margin-top: 4px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.agent-section.breathing {
animation: agentBreathing 2.2s ease-in-out infinite;
}
.agent-section.breathing::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
background: radial-gradient(circle at center, rgba(34, 139, 34, 0.4) 0%, rgba(34, 139, 34, 0.2) 40%, transparent 70%);
border-radius: inherit;
transform: scale(0);
animation: rippleBreathing 2.2s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
.agent-section.breathing::after {
content: '';
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background: radial-gradient(circle at center, rgba(34, 139, 34, 0.5) 0%, rgba(34, 139, 34, 0.3) 30%, transparent 60%);
border-radius: inherit;
transform: scale(0);
animation: rippleBreathing 2.2s ease-in-out infinite 0.6s;
pointer-events: none;
z-index: 1;
}
.agent-section.breathing > * {
position: relative;
z-index: 2;
}
@keyframes agentBreathing {
0%, 100% {
background: rgba(34, 139, 34, 0.03);
box-shadow: 0 0 0 0 rgba(34, 139, 34, 0.1),
0 0 15px 0 rgba(34, 139, 34, 0.05);
border-color: #e0e0e0;
transform: scale(1);
}
50% {
background: rgba(34, 139, 34, 0.12);
box-shadow: 0 0 0 4px rgba(34, 139, 34, 0.2),
0 0 25px 5px rgba(34, 139, 34, 0.15);
border-color: rgba(34, 139, 34, 0.4);
transform: scale(1.02);
}
}
@keyframes rippleBreathing {
0%, 100% {
transform: scale(0);
opacity: 0;
}
15% {
transform: scale(0.5);
opacity: 0.8;
}
35% {
transform: scale(1.2);
opacity: 0.7;
}
60% {
transform: scale(1.8);
opacity: 0.4;
}
85% {
transform: scale(2.2);
opacity: 0.1;
}
100% {
transform: scale(2.5);
opacity: 0;
}
}
.agent-main-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
padding: 4px 0;
transition: all 0.2s ease;
}
.agent-main-header:hover {
background: rgba(34, 139, 34, 0.1);
border-radius: 6px;
padding: 4px 8px;
}
.section-label.clickable {
user-select: none;
transition: color 0.2s ease;
}
.expand-arrow {
font-size: 12px;
transition: transform 0.3s ease;
color: #228b22;
font-weight: bold;
}
.expand-arrow.expanded {
transform: rotate(0deg);
}
.agent-details {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(34, 139, 34, 0.2);
display: none;
}
.agent-control-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
min-height: 28px;
}
.control-label {
font-size: 12px;
font-weight: 600;
color: #5f6368;
min-width: 60px;
}
.switch-container {
display: flex;
align-items: center;
}
.input-label {
font-size: 12px;
font-weight: 600;
color: #5f6368;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
display: block;
}
.number-input {
width: 100%;
padding: 10px 14px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
font-family: inherit;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(255, 255, 255, 0.8);
box-sizing: border-box;
text-align: center;
font-weight: 600;
}
.number-input:focus {
outline: none;
border-color: #228b22;
box-shadow: 0 0 0 3px rgba(34, 139, 34, 0.1);
background: white;
}
.number-input.compact {
width: 80px;
padding: 8px 12px;
font-size: 13px;
}
.countdown-progress {
background: rgba(34, 139, 34, 0.1);
border-radius: 8px;
padding: 8px;
margin: 6px 0;
border: 1px solid rgba(34, 139, 34, 0.2);
}
.progress-label {
font-size: 11px;
color: #228b22;
font-weight: 600;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.progress-bar-container {
width: 100%;
height: 4px;
background: rgba(34, 139, 34, 0.2);
border-radius: 2px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #228b22, #32cd32);
border-radius: 2px;
width: 0%;
transition: width 0.1s ease-out;
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.main-panel {
background: rgba(32, 33, 36, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.section-label {
color: #bdc1c6;
}
.prompt-input {
background: rgba(32, 33, 36, 0.8);
border-color: #5f6368;
color: #e8eaed;
}
.prompt-input:focus {
background: #32333;
border-color: #1a73e8;
}
.agent-section {
background: rgba(34, 139, 34, 0.08);
border-top: 1px solid #5f6368;
}
.agent-section.breathing::before {
background: radial-gradient(circle at center, rgba(74, 222, 128, 0.4) 0%, rgba(34, 139, 34, 0.2) 40%, transparent 70%);
}
.agent-section.breathing::after {
background: radial-gradient(circle at center, rgba(74, 222, 128, 0.5) 0%, rgba(34, 139, 34, 0.3) 30%, transparent 60%);
}
@keyframes agentBreathing {
0%, 100% {
background: rgba(34, 139, 34, 0.08);
box-shadow: 0 0 0 0 rgba(34, 139, 34, 0.15),
0 0 20px 0 rgba(34, 139, 34, 0.1);
border-color: #5f6368;
transform: scale(1);
}
50% {
background: rgba(34, 139, 34, 0.20);
box-shadow: 0 0 0 4px rgba(34, 139, 34, 0.35),
0 0 30px 8px rgba(34, 139, 34, 0.25);
border-color: rgba(74, 222, 128, 0.5);
transform: scale(1.02);
}
}
.agent-main-header:hover {
background: rgba(34, 139, 34, 0.15);
}
.agent-details {
border-top: 1px solid rgba(34, 139, 34, 0.3);
}
.input-label, .control-label {
color: #bdc1c6;
}
.number-input {
background: rgba(32, 33, 36, 0.8);
border-color: #5f6368;
color: #e8eaed;
}
.number-input:focus {
background: #323336;
border-color: #228b22;
}
.countdown-progress {
background: rgba(34, 139, 34, 0.15);
border-color: rgba(34, 139, 34, 0.3);
}
.progress-label {
color: #4ade80;
}
.progress-bar-container {
background: rgba(34, 139, 34, 0.3);
}
}
`);
// 初始化面板状态
updatePanelState();
}
})();