NovelAi Prompts Management
// ==UserScript== // @name NovelAi online Prompts Tool // @namespace npm/vite-plugin-monkey // @version 0.9.9 // @author ChatGPT4 // @icon https://vitejs.dev/logo.svg // @match https://novelai.net/image // @require https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js // @grant GM_addStyle // @description NovelAi Prompts Management // @license MIT // ==/UserScript== (o=>{if(typeof GM_addStyle=="function"){GM_addStyle(o);return}const t=document.createElement("style");t.textContent=o,document.head.append(t)})(" #root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.side-drawer{position:fixed;width:90%;background-color:#333;transition:transform 1s ease;z-index:100;transform:translate(-100%);top:5%}.side-drawer.visible{transform:translate(0)}.container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container{position:fixed;z-index:10003;display:block;cursor:pointer;-webkit-user-select:none;user-select:none}.container svg{position:relative;top:0;left:0;height:50px;width:50px;transition:all .3s;fill:#666}.container svg:hover{transform:scale(1.1)}.container input:checked~svg{fill:#f5f3c2}.starButton{position:fixed;background-color:#f5f3c2;color:#13152c;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;box-shadow:0 2px 4px #0003;transition:background-color .3s ease}.animated-button{z-index:10000;position:absolute;display:flex;align-items:center;gap:4px;padding:6px 25px;border:4px solid;border-color:transparent;font-size:14px;background-color:inherit;border-radius:100px;font-weight:600;color:#fff;box-shadow:0 0 0 2px #fff;cursor:pointer;overflow:hidden;transition:all .6s cubic-bezier(.23,1,.32,1)}.animated-button svg{position:absolute;width:24px;fill:#fff;z-index:9;transition:all .8s cubic-bezier(.23,1,.32,1)}.animated-button .arr-1{right:16px}.animated-button .arr-2{left:-25%}.animated-button .circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;background-color:#fff;border-radius:50%;opacity:0;transition:all .8s cubic-bezier(.23,1,.32,1)}.animated-button .text{position:relative;z-index:1;transform:translate(-12px);transition:all .8s cubic-bezier(.23,1,.32,1)}.animated-button:hover{box-shadow:0 0 0 12px transparent;color:#212121;border-radius:12px}.animated-button:hover .arr-1{right:-25%}.animated-button:hover .arr-2{left:16px}.animated-button:hover .text{transform:translate(12px)}.animated-button:hover svg{fill:#212121}.animated-button:active{scale:.95;box-shadow:0 0 0 4px #fff}.animated-button:hover .circle{width:220px;height:220px;opacity:1}.thing{z-index:1;left:0}.container1{position:fixed;z-index:1005;background:transparent;border:solid white}.tab-manager-container{border:2px solid #2b2b2b;padding:2px;border-radius:5px;margin:2px auto;max-width:100%;position:fixed;top:0;left:450px;z-index:100;background-color:#1e1e1e;box-shadow:0 2px 4px #0000001a}.tabs-bar{display:flex;flex-wrap:wrap;align-items:center;padding:8px;background-color:#13152c;color:#13152c;box-shadow:0 0 10px #0003}.tab-content{padding-top:0;overflow-y:auto;max-height:500px;background-color:#34495e;color:#fff}.tab{flex:1 1 auto;text-align:center;cursor:pointer;padding:.1rem 0;color:#fff;transition:all .15s ease-in-out;border-radius:.5rem;background-color:#34495e;margin-right:5px;display:flex;justify-content:space-evenly;align-items:center}.delete-tab{background-color:#e74c3c;color:#fff;border:none;border-radius:4px;padding:4px 8px;cursor:pointer;transition:opacity .3s ease}.delete-tab:hover{opacity:.8}.tab:hover,.tab.active{background-color:#fff;color:#333;font-weight:600}.button{background-color:#f5f3c2;color:#13152c;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;box-shadow:0 2px 4px #0003;transition:background-color .3s ease}.button:hover{background-color:#2980b9}.input{border:1px solid #ccc;border-radius:4px;padding:8px;width:100%}.bin-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:#13152c;cursor:pointer;border:2px solid #34495e;transition-duration:.3s;position:relative;overflow:hidden}.bin-bottom{width:12px;z-index:2}.bin-top{width:12px;transform-origin:right;transition-duration:.3s;z-index:2}.bin-button:hover .bin-top{transform:rotate(45deg)}.bin-button:hover{background-color:red}.bin-button:active{transform:scale(.9)}.garbage{position:absolute;width:10px;height:auto;z-index:1;opacity:0;transition:all .3s}.bin-button:hover .garbage{animation:throw .4s linear}@keyframes throw{0%{transform:translate(-400%,-700%);opacity:0}to{transform:translate(0);opacity:1}}.input-group{position:relative}.input1{border:solid 1.5px #9e9e9e;border-radius:1rem;background:none;padding:1rem;font-size:1rem;color:#f5f5f5;transition:border .15s cubic-bezier(.4,0,.2,1)}.user-label{position:absolute;left:15px;color:#e8e8e8;pointer-events:none;transform:translateY(1rem);transition:.15s cubic-bezier(.4,0,.2,1)}.input1:focus{outline:none;border:1.5px solid #1a73e8}.input1:focus~label{transform:translateY(-50%) scale(.8);background-color:#212121;padding:0 .2em;color:#2196f3}.add-tab-button{background:#f5f3c2;border:none;font-size:10px;cursor:pointer}.tabs-bar{display:flex;justify-content:space-between}.input-group{display:none}.input-group.show{display:block}.promptAddButton{align-self:flex-end}.enter-button{align-items:center;justify-content:center;padding:4px 12px;gap:25px;font-size:.7em;letter-spacing:2px;color:#fff;cursor:pointer;background:#13152c;position:relative;border-radius:8px;border:1px solid rgb(65,65,65);transition-duration:.3s}.arrow{height:10px}.enter-button:hover{transition-duration:.3s;box-shadow:0 0 2px #b9b9b9,0 0 10px #616161}.enter-button:active{transform:scale(.95)}.asdasd{display:inline-flex}.search-results{background:#13152c;overflow-y:auto;max-height:400px}.a12345,.search-result-item{display:flex}.search-result-item h4{margin:0}.search-result-item p{margin:5px 0}.more-button{padding:inherit;background:inherit;border:1px solid rgb(65,65,65)}.tags-container{display:flex;flex-wrap:wrap;gap:5px;background-color:#2c2f33;padding:5px;border-radius:4px;font-size:.7rem;z-index:2000;position:fixed;max-width:400px;overflow:visible}.tag-item.dragging{opacity:.5}::-webkit-scrollbar{display:none}.tag-item-container{position:relative}.tag-item{display:flex;align-items:center;background-color:#3b3e43;border-radius:8px;padding:1px;position:relative}.tag-content{margin-right:5px;outline:none;background-color:transparent;border:none;color:#fff;max-width:100px;white-space:normal;word-wrap:break-word;overflow-wrap:break-word}.edit-tag{display:inline-flex;justify-content:center;align-items:center}.tag-content:focus{border-bottom:1px solid #7289da}.edit-tag,.delete-tag{margin:0 5px;cursor:pointer;padding:2px 4px;font-size:.5rem;width:25px;height:25px;display:flex;justify-content:center;align-items:center}.delete-tag{background:#cd5c5c}.tag-buttons{display:flex;justify-content:center;position:absolute;top:-24px;left:50%;transform:translate(-50%);visibility:hidden;opacity:0;transition:opacity .2s linear}.tag-item-container:hover .tag-buttons,.tag-buttons:hover{visibility:visible;opacity:1}.toggle-editor-btn{position:fixed;top:50%;left:0;transform:translateY(-50%);background-color:#7289da;color:#fff;border:none;cursor:pointer;padding:10px;border-top-right-radius:5px;border-bottom-right-radius:5px;font-size:1rem;z-index:1006}.tags-container.hidden{display:none}.tags-container.visible{display:flex}:root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}} "); (function (require$$0, require$$0$1) { 'use strict'; var jsxRuntime = { exports: {} }; var reactJsxRuntime_production_min = {}; /** * @license React * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ var f = require$$0, k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m$1 = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: true, ref: true, __self: true, __source: true }; function q(c, a, g) { var b, d = {}, e = null, h = null; void 0 !== g && (e = "" + g); void 0 !== a.key && (e = "" + a.key); void 0 !== a.ref && (h = a.ref); for (b in a) m$1.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]); if (c && c.defaultProps) for (b in a = c.defaultProps, a) void 0 === d[b] && (d[b] = a[b]); return { $$typeof: k, type: c, key: e, ref: h, props: d, _owner: n.current }; } reactJsxRuntime_production_min.Fragment = l; reactJsxRuntime_production_min.jsx = q; reactJsxRuntime_production_min.jsxs = q; { jsxRuntime.exports = reactJsxRuntime_production_min; } var jsxRuntimeExports = jsxRuntime.exports; var client = {}; var m = require$$0$1; { client.createRoot = m.createRoot; client.hydrateRoot = m.hydrateRoot; } function PromptHistory({ key, activeTab, setTabs, onPromptsUpdate }) { const [prompts, setPrompts] = require$$0.useState(() => { const saved = localStorage.getItem(`promptsHistory_${activeTab.id}`); const parsed = saved ? JSON.parse(saved) : []; return Array.isArray(parsed) ? parsed : []; }); const [newPrompt, setNewPrompt] = require$$0.useState(""); const [newName, setNewName] = require$$0.useState(""); const addPrompt = () => { if (!newPrompt.trim()) return; const newEntry = { name: newName.trim() || `Prompt ${prompts.length + 1}`, prompt: newPrompt }; setTabs((tabs) => { const updatedTabs = tabs.map((t) => { if (t.id === activeTab.id) { const updatedPrompts = [...t.prompts, newEntry]; return { ...t, prompts: updatedPrompts }; } return t; }); return updatedTabs; }); setNewPrompt(""); setNewName(""); }; require$$0.useEffect(() => { console.log("Prompts have been updated:", prompts); }, [prompts]); const deletePrompt = (index) => { setTabs((tabs) => { return tabs.map((t) => { if (t.id === activeTab.id) { const updatedPrompts = t.prompts.filter((_, i) => i !== index); return { ...t, prompts: updatedPrompts }; } return t; }); }); }; const addToTextarea = (promptText) => { const textarea = document.querySelector("textarea.sc-a2d0901c-45.kyIdtk"); if (textarea) { const existingContent = textarea.value; textarea.value = existingContent + promptText; } }; const replaceTextArea = (promptText) => { const textarea = document.querySelector("textarea.sc-a2d0901c-45.kyIdtk"); if (textarea) { textarea.value; textarea.value = promptText; } }; const [showInput, setShowInput] = require$$0.useState(false); const updatePromptContent = (e, index) => { const updatedPromptText = e.target.innerText; setTabs((tabs) => { return tabs.map((tab) => { console.log("现在扫到tab："); console.log(tab.id); console.log("现在的id是"); console.log(key); if (tab.id === activeTab.id) { const updatedPrompts = [...tab.prompts]; updatedPrompts[index] = { ...updatedPrompts[index], prompt: updatedPromptText }; return { ...tab, prompts: updatedPrompts }; } return tab; }); }); }; const updatePromptName = (e, index) => { const updatedName = e.target.innerText; setTabs((tabs) => { return tabs.map((tab) => { console.log("现在扫到tab："); console.log(tab.id); console.log("现在的id是"); console.log(key); if (tab.id === activeTab.id) { const updatedPrompts = [...tab.prompts]; updatedPrompts[index] = { ...updatedPrompts[index], name: updatedName }; console.log(updatedPrompts); return { ...tab, prompts: updatedPrompts }; } return tab; }); }); }; return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { padding: "2px", backgroundColor: "#13152c", color: "#FFF" }, children: [ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: activeTab.prompts.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [ item && item.name && /* @__PURE__ */ jsxRuntimeExports.jsx( "div", { contentEditable: "true", suppressContentEditableWarning: true, onBlur: (e) => updatePromptName(e, index), dangerouslySetInnerHTML: { __html: item.name }, style: { border: "1px solid #ccc", minHeight: "20px", cursor: "text", padding: "5px", margin: "5px 0" } } ), item && item.prompt && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx( "div", { contentEditable: "true", suppressContentEditableWarning: true, onBlur: (e) => updatePromptContent(e, index), dangerouslySetInnerHTML: { __html: item.prompt }, style: { border: "1px solid #ccc", minHeight: "20px", cursor: "text", padding: "5px" } } ) }), /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "asdasd", children: [ /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "enter-button", onClick: () => addToTextarea(item.prompt), children: "+" }), /* @__PURE__ */ jsxRuntimeExports.jsx( "button", { className: "enter-button", onClick: () => replaceTextArea(item.prompt), children: "use" } ), /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "bin-button", onClick: () => deletePrompt(index), children: [ /* @__PURE__ */ jsxRuntimeExports.jsxs( "svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 39 7", className: "bin-top", children: [ /* @__PURE__ */ jsxRuntimeExports.jsx("line", { strokeWidth: "4", stroke: "white", y2: "5", x2: "39", y1: "5" }), /* @__PURE__ */ jsxRuntimeExports.jsx("line", { strokeWidth: "3", stroke: "white", y2: "1.5", x2: "26.0357", y1: "1.5", x1: "12" }) ] } ), /* @__PURE__ */ jsxRuntimeExports.jsxs( "svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 33 39", className: "bin-bottom", children: [ /* @__PURE__ */ jsxRuntimeExports.jsx("mask", { id: "path-1-inside-1_8_19", fill: "white", children: /* @__PURE__ */ jsxRuntimeExports.jsx( "path", { d: "M0 0H33V35C33 37.2091 31.2091 39 29 39H4C1.79086 39 0 37.2091 0 35V0Z" } ) }), /* @__PURE__ */ jsxRuntimeExports.jsx( "path", { mask: "url(#path-1-inside-1_8_19)", fill: "white", d: "M0 0H33H0ZM37 35C37 39.4183 33.4183 43 29 43H4C-0.418278 43 -4 39.4183 -4 35H4H29H37ZM4 43C-0.418278 43 -4 39.4183 -4 35V0H4V35V43ZM37 0V35C37 39.4183 33.4183 43 29 43V35V0H37Z" } ), /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeWidth: "4", stroke: "white", d: "M12 6L12 29" }), /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeWidth: "4", stroke: "white", d: "M21 6V29" }) ] } ) ] }) ] }) ] }, index)) }), /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "promptAddButton", onClick: () => setShowInput(!showInput), children: "+" }), showInput && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "input-group1", children: [ /* @__PURE__ */ jsxRuntimeExports.jsx( "input", { value: newName, onChange: (e) => setNewName(e.target.value), required: "", type: "text", name: "text", autoComplete: "off", className: "input" } ), /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "user-label", children: "Prompt" }), /* @__PURE__ */ jsxRuntimeExports.jsx( "input", { value: newPrompt, onChange: (e) => setNewPrompt(e.target.value), required: "", type: "text", name: "text", autoComplete: "off", className: "input" } ), /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "user-label", children: "Content" }), /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: addPrompt, children: "Add Prompt" }) ] }) ] }); } function TabManager({ tabs, setTabs, searchResults, setSearchResults, onActiveTabChange }) { const [newTabName, setNewTabName] = require$$0.useState(""); const [activeTabId, setActiveTabId] = require$$0.useState(() => { const savedActiveTabId = localStorage.getItem("activeTabId"); return savedActiveTabId ? JSON.parse(savedActiveTabId) : 1; }); const [draggingTabId, setDraggingTabId] = require$$0.useState(null); const [, setPosition] = require$$0.useState({ x: 0, y: 0 }); const [dragging, setDragging] = require$$0.useState(false); const [startPos] = require$$0.useState({ x: 0, y: 0 }); require$$0.useEffect(() => { localStorage.setItem("tabs", JSON.stringify(tabs)); localStorage.setItem("activeTabId", JSON.stringify(activeTabId)); }, [tabs, activeTabId]); require$$0.useEffect(() => { const handleMouseMove = (e) => { if (!dragging) return; const dx = e.clientX - startPos.x; const dy = e.clientY - startPos.y; setPosition({ x: dx, y: dy }); }; const handleMouseUp = () => { if (dragging) { setDragging(false); } }; if (dragging) { document.addEventListener("mousemove", handleMouseMove); document.addEventListener("mouseup", handleMouseUp); } return () => { document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); }; }, [dragging, startPos]); const addTab = () => { const numericIds = tabs.map((tab) => Number(tab.id)).filter((id) => !isNaN(id)); const maxId = numericIds.length > 0 ? Math.max(...numericIds) : 0; const newTabId = maxId + 1; const newTab = { id: newTabId, name: newTabName || `Tab ${tabs.length + 1}`, prompts: [] }; setTabs((prevTabs) => [...prevTabs, newTab]); setNewTabName(""); setActiveTabId(newTabId); onActiveTabChange(newTabId); setShowAddTab(false); setNewTabName(""); }; const deleteTab = (tabId) => { const tabToDelete = tabs.find((tab) => tab.id === tabId); if (tabToDelete && !tabToDelete.isFixed) { const updatedTabs = tabs.filter((tab) => tab.id !== tabId); setTabs(updatedTabs); if (activeTabId === tabId) { setActiveTabId(updatedTabs.length > 0 ? updatedTabs[0].id : null); onActiveTabChange(updatedTabs.length > 0 ? updatedTabs[0].id : null); } localStorage.setItem("tabs", JSON.stringify(updatedTabs)); if (activeTabId === tabId) { localStorage.setItem("activeTabId", JSON.stringify(updatedTabs.length > 0 ? updatedTabs[0].id : null)); } localStorage.removeItem(`promptsHistory_${tabId}`); } }; const [, setButtonPosition] = require$$0.useState({ top: 0, left: 0 }); require$$0.useEffect(() => { const updateButtonPosition = () => { const promptElement = document.querySelector(".sc-b22b5055-22.ktRRzG"); if (promptElement) { const rect = promptElement.getBoundingClientRect(); setButtonPosition({ top: rect.top + window.scrollY - 10, left: rect.right + 10 }); } }; const observer = new MutationObserver(() => { updateButtonPosition(); }); const config = { childList: true, subtree: true }; const targetNode = document.body; observer.observe(targetNode, config); updateButtonPosition(); return () => observer.disconnect(); }, []); const handleTabChange = (id) => { setActiveTabId(id); onActiveTabChange(id); }; const handleDragStart = (id) => () => { setDraggingTabId(id); }; const handleDragOver = (e) => { e.preventDefault(); }; const handleDrop = (targetId) => (e) => { e.preventDefault(); const draggedTabIndex = tabs.findIndex((tab) => tab.id === draggingTabId); const targetTabIndex = tabs.findIndex((tab) => tab.id === targetId); if (draggedTabIndex !== -1 && targetTabIndex !== -1) { const newTabs = Array.from(tabs); const [removed] = newTabs.splice(draggedTabIndex, 1); newTabs.splice(targetTabIndex, 0, removed); setTabs(newTabs); } setDraggingTabId(null); }; const [showAddTab, setShowAddTab] = require$$0.useState(false); require$$0.useEffect(() => { if (showAddTab) { const inputElement = document.querySelector(".input1"); inputElement && inputElement.focus(); } }, [showAddTab]); const [searchTerm, setSearchTerm] = require$$0.useState(""); const [expandedResults, setExpandedResults] = require$$0.useState(/* @__PURE__ */ new Map()); require$$0.useEffect(() => { if (searchTerm.trim() === "") { setSearchResults([]); return; } const results = /* @__PURE__ */ new Map(); tabs.forEach((tab) => { tab.prompts.forEach((prompt) => { if (prompt.name.includes(searchTerm) || prompt.prompt.includes(searchTerm)) { const key = `${prompt.name}:${prompt.prompt}`; if (!results.has(key)) { results.set(key, prompt); } } }); }); setSearchResults(Array.from(results.values())); }, [searchTerm, tabs, setSearchResults]); const toggleExpandResult = (key) => { setExpandedResults((prev) => { const newExpanded = new Map(prev); newExpanded.set(key, !newExpanded.get(key)); return newExpanded; }); }; function truncateText(text, maxLength) { if (text.length <= maxLength) { return text; } return `${text.substring(0, maxLength)}...`; } const addToTextarea = (promptText) => { const textarea = document.querySelector("textarea.sc-a2d0901c-45.kyIdtk"); if (textarea) { const existingContent = textarea.value; textarea.value = existingContent + promptText; } }; const replaceTextArea = (promptText) => { const textarea = document.querySelector("textarea.sc-a2d0901c-45.kyIdtk"); if (textarea) { textarea.value; textarea.value = promptText; } }; const handlePromptsUpdate = (updatedPrompts) => { const updatedTabs = tabs.map((tab) => { if (tab.id === activeTabId) { return { ...tab, prompts: updatedPrompts }; } return tab; }); console.log("修改"); setTabs(updatedTabs); localStorage.setItem("tabs", JSON.stringify(updatedTabs)); }; const activeTab = tabs.find((tab) => tab.id === activeTabId); return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "tab-manager-container", children: [ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "search-results", children: searchResults.map((result, index) => { const key = `${result.name}:${index}`; const isExpanded = expandedResults.get(key); return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "search-result-item", children: [ /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { children: result.name }), /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: isExpanded ? result.prompt : truncateText(result.prompt, 100) }), /* @__PURE__ */ jsxRuntimeExports.jsx( "button", { className: "more-button", onClick: () => toggleExpandResult(key), children: isExpanded ? "less" : "more" } ), /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "enter-button", onClick: () => addToTextarea(result.prompt), children: "+" }), /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "enter-button", onClick: () => replaceTextArea(result.prompt), children: "use" }) ] }, key); }) }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "search-container", children: /* @__PURE__ */ jsxRuntimeExports.jsx( "input", { type: "text", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), placeholder: "Search..." } ) }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "tabs-bar", children: [ tabs.map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsxs( "div", { className: `tab ${tab.id === activeTabId ? "active" : ""}`, draggable: !tab.isFixed, onDragStart: tab.isFixed ? null : handleDragStart(tab.id), onDragOver: handleDragOver, onDrop: handleDrop(tab.id), onClick: () => handleTabChange(tab.id), children: [ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: tab.name }), !tab.isFixed && /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "bin-button", onClick: () => deleteTab(tab.id), children: [ /* @__PURE__ */ jsxRuntimeExports.jsxs( "svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 39 7", className: "bin-top", children: [ /* @__PURE__ */ jsxRuntimeExports.jsx("line", { strokeWidth: "4", stroke: "white", y2: "5", x2: "39", y1: "5" }), /* @__PURE__ */ jsxRuntimeExports.jsx("line", { strokeWidth: "3", stroke: "white", y2: "1.5", x2: "26.0357", y1: "1.5", x1: "12" }) ] } ), /* @__PURE__ */ jsxRuntimeExports.jsxs( "svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 33 39", className: "bin-bottom", children: [ /* @__PURE__ */ jsxRuntimeExports.jsx("mask", { id: "path-1-inside-1_8_19", fill: "white", children: /* @__PURE__ */ jsxRuntimeExports.jsx( "path", { d: "M0 0H33V35C33 37.2091 31.2091 39 29 39H4C1.79086 39 0 37.2091 0 35V0Z" } ) }), /* @__PURE__ */ jsxRuntimeExports.jsx( "path", { mask: "url(#path-1-inside-1_8_19)", fill: "white", d: "M0 0H33H0ZM37 35C37 39.4183 33.4183 43 29 43H4C-0.418278 43 -4 39.4183 -4 35H4H29H37ZM4 43C-0.418278 43 -4 39.4183 -4 35V0H4V35V43ZM37 0V35C37 39.4183 33.4183 43 29 43V35V0H37Z" } ), /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeWidth: "4", stroke: "white", d: "M12 6L12 29" }), /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeWidth: "4", stroke: "white", d: "M21 6V29" }) ] } ), /* @__PURE__ */ jsxRuntimeExports.jsx( "svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 89 80", className: "garbage", children: /* @__PURE__ */ jsxRuntimeExports.jsx( "path", { fill: "white", d: "M20.5 10.5L...L35.5 79.5L28 67L16 63L12 51.5L0 48L16 25L22.5 17L20.5 10.5Z" } ) } ) ] }) ] }, tab.id )), /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: () => { setShowAddTab(true); }, className: "add-tab-button", children: "+" }), showAddTab && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `input-group ${showAddTab ? "show" : ""}`, children: [ /* @__PURE__ */ jsxRuntimeExports.jsx( "input", { value: newTabName, onChange: (e) => setNewTabName(e.target.value), required: "", type: "text", name: "text", autoComplete: "off", className: "input1" } ), /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "user-label", children: "Tab" }), /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: addTab, className: "button", children: "Add Tab" }) ] }) ] }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "tab-content", children: activeTab ? /* @__PURE__ */ jsxRuntimeExports.jsx( PromptHistory, { activeTab, setTabs, onPromptsUpdate: handlePromptsUpdate }, activeTab.id ) : null }) ] }); } function TextAreaItemsEditor() { const [items, setItems] = require$$0.useState([]); const [isEditorVisible, setIsEditorVisible] = require$$0.useState(false); const [draggedItemIndex, setDraggedItemIndex] = require$$0.useState(null); const [dragging, setDragging] = require$$0.useState(false); const handleDragStart = (e, index) => { setDraggedItemIndex(index); setDragging(true); e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", ""); e.currentTarget.classList.add("dragging"); }; const handleDragOver = (e, index) => { e.preventDefault(); e.dataTransfer.dropEffect = "move"; }; const handleDragEnd = (e) => { setDragging(false); e.currentTarget.classList.remove("dragging"); }; const handleDrop = (e, targetIndex) => { e.preventDefault(); if (draggedItemIndex === null || draggedItemIndex === targetIndex) return; const newItems = [...items]; const [item] = newItems.splice(draggedItemIndex, 1); const newIndex = draggedItemIndex < targetIndex ? targetIndex - 1 : targetIndex; newItems.splice(newIndex, 0, item); setItems(newItems); updateTextArea(newItems); setDraggedItemIndex(null); }; require$$0.useEffect(() => { const observer = new MutationObserver((mutations, obs) => { const textArea = document.querySelector("textarea.sc-a2d0901c-45.kyIdtk"); if (textArea) { setItems(splitContent(textArea.value)); const handleInput = () => { setItems(splitContent(textArea.value)); }; textArea.addEventListener("input", handleInput); obs.disconnect(); return () => { textArea.removeEventListener("input", handleInput); }; } }); observer.observe(document.body, { childList: true, subtree: true }); const splitContent = (content) => { const pattern = /{(.*?)}|([^,]+)/g; let match; let initialItems = []; while ((match = pattern.exec(content)) !== null) { initialItems.push(match[1] ? `{${match[1]}}` : match[0].trim()); } return initialItems; }; return () => observer.disconnect(); }, []); const updateTextArea = (newItems) => { const textArea = document.querySelector("textarea.sc-a2d0901c-45.kyIdtk"); if (textArea) { textArea.value = newItems.join(", "); } }; const handleItemUpdate = (index, newItem) => { const newItems = [...items]; newItems[index] = newItem; setItems(newItems); updateTextArea(newItems); }; const handleItemDelete = (index) => { const newItems = items.filter((_, i) => i !== index); setItems(newItems); updateTextArea(newItems); }; const handleAddBraces = (index, openingBrace, closingBrace) => { const newItems = [...items]; newItems[index] = openingBrace + newItems[index] + closingBrace; setItems(newItems); updateTextArea(newItems); }; const handleRemoveBraces = (index) => { let newItem = items[index]; if (newItem.startsWith("{") && newItem.endsWith("}")) { newItem = newItem.slice(1, -1); } else if (newItem.startsWith("[") && newItem.endsWith("]")) { newItem = newItem.slice(1, -1); } const newItems = [...items]; newItems[index] = newItem; setItems(newItems); updateTextArea(newItems); }; return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [ /* @__PURE__ */ jsxRuntimeExports.jsx( "button", { className: "toggle-editor-btn", onClick: () => setIsEditorVisible(!isEditorVisible), children: isEditorVisible ? "<" : ">" } ), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `tags-container ${isEditorVisible ? "visible" : "hidden"}`, children: items.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs( "div", { className: "tag-item-container", draggable: "true", onDragStart: (e) => handleDragStart(e, index), onDragOver: (e) => handleDragOver(e), onDragEnd: handleDragEnd, onDrop: (e) => handleDrop(e, index), children: [ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "tag-buttons", children: [ /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "edit-tag", onClick: () => handleAddBraces(index, "{", "}"), children: "丄" }), /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "edit-tag", onClick: () => handleAddBraces(index, "[", "]"), children: "丅" }), /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "edit-tag", onClick: () => handleRemoveBraces(index), children: "一" }) ] }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "tag-item", children: [ /* @__PURE__ */ jsxRuntimeExports.jsx( "span", { contentEditable: true, className: "tag-content", onBlur: (e) => handleItemUpdate(index, e.target.textContent), dangerouslySetInnerHTML: { __html: item } } ), /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "delete-tag", onClick: () => handleItemDelete(index), children: "x" }) ] }) ] }, index )) }) ] }); } function SideDrawer({ triggerSelector }) { const [isVisible, setIsVisible] = require$$0.useState(true); const triggerRef = require$$0.useRef(); const [buttonPosition, setButtonPosition] = require$$0.useState({ top: 0, left: 0 }); const [tabs, setTabs] = require$$0.useState(() => { const savedTabs = localStorage.getItem("tabs"); const parsedTabs = savedTabs ? JSON.parse(savedTabs) : null; console.log(savedTabs); const defaultTabs = [ { id: "favorites", name: "收藏", prompts: [], isFixed: true }, { id: "history", name: "历史", prompts: [], isFixed: true } ]; return Array.isArray(parsedTabs) && parsedTabs.length > 0 ? parsedTabs : defaultTabs; }); const [activeTabId, setActiveTabId] = require$$0.useState(null); const handleActiveTabChange = (newActiveTabId) => { setActiveTabId(newActiveTabId); }; require$$0.useEffect(() => { localStorage.setItem("tabs", JSON.stringify(tabs)); }, [tabs]); const addPromptToFavorites = () => { const textArea = document.querySelector("textarea.sc-a2d0901c-45.kyIdtk"); if (textArea) { const promptText = textArea.value; const favoritesTab = tabs.find((tab) => tab.id === "favorites"); if (favoritesTab && Array.isArray(favoritesTab.prompts)) { const isDuplicate = favoritesTab.prompts.some((prompt) => (prompt == null ? void 0 : prompt.prompt) === promptText); if (!isDuplicate) { const newName = `Prompt ${favoritesTab.prompts.length + 1}`; const newPrompt = { name: newName, prompt: promptText }; const updatedTabs = tabs.map((tab) => { if (tab.id === "favorites") { const updatedPrompts = [...tab.prompts, newPrompt]; return { ...tab, prompts: updatedPrompts }; } return tab; }); setTabs(updatedTabs); console.log(updatedTabs); localStorage.setItem("tabs", JSON.stringify(updatedTabs)); } } } }; const addPromptToActiveTab = () => { const textArea = document.querySelector("textarea.sc-a2d0901c-45.kyIdtk"); if (textArea) { const promptText = textArea.value; console.log("标记"); const activeTab = tabs.find((tab) => tab.id === activeTabId); if (activeTab && Array.isArray(activeTab.prompts)) { const isDuplicate = activeTab.prompts.some((prompt) => (prompt == null ? void 0 : prompt.prompt) === promptText); if (!isDuplicate) { const newName = `Prompt ${activeTab.prompts.length + 1}`; const newPrompt = { name: newName, prompt: promptText }; setTabs((tabs2) => tabs2.map((tab) => { if (tab.id === activeTab.id) { return { ...tab, prompts: [...tab.prompts, newPrompt] }; } return tab; })); } } } }; const [isFavorited, setIsFavorited] = require$$0.useState(false); require$$0.useEffect(() => { if (isFavorited) { addPromptToFavorites(); const timer = setTimeout(() => { setIsFavorited(false); }, 300); return () => clearTimeout(timer); } }, [isFavorited]); const handleFavoriteClick = () => { setIsFavorited(true); }; const toggleDrawer = () => { setIsVisible((prevState) => !prevState); }; const setTriggerPosition = require$$0.useCallback(() => { const triggerElement = document.querySelector(triggerSelector); if (triggerElement && triggerRef.current) { const { right, top, height } = triggerElement.getBoundingClientRect(); triggerRef.current.style.top = `${top}px`; triggerRef.current.style.height = `${height}px`; triggerRef.current.style.left = `${right + 13}px`; console.log(triggerRef.current.style.left); } const promptElement1 = document.querySelector(".sc-b22b5055-22.ktRRzG"); if (promptElement1) { const promptElementRect = promptElement1.getBoundingClientRect(); setButtonPosition({ top: promptElementRect.top + window.scrollY - 10, // 加上滚动偏移量 left: promptElementRect.right + 10 // 右侧偏移10px }); } }, [triggerSelector]); require$$0.useEffect(() => { const observer = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { if (mutation.type === "childList") { setTriggerPosition(); const promptElement = document.querySelector(".sc-b22b5055-22.ktRRzG"); if (promptElement) { const promptElementRect = promptElement.getBoundingClientRect(); setButtonPosition({ top: promptElementRect.top + window.scrollY - 10, // 加上滚动偏移量 left: promptElementRect.right + 10 // 右侧偏移10px }); } observer.disconnect(); break; } } }); observer.observe(document.body, { childList: true, subtree: true }); return () => observer.disconnect(); }, [setTriggerPosition, triggerSelector]); require$$0.useEffect(() => { setTriggerPosition(); window.addEventListener("resize", setTriggerPosition); return () => window.removeEventListener("resize", setTriggerPosition); }, [setTriggerPosition]); require$$0.useEffect(() => { const observer = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { if (mutation.type === "childList") { const triggerElement = document.querySelector(triggerSelector); if (triggerElement) { setTriggerPosition(); const targetElement = document.querySelector(".sc-b22b5055-0.kWaZHl"); if (targetElement) { targetElement.style.zIndex = "1001"; } observer.disconnect(); break; } } } }); observer.observe(document.body, { childList: true, subtree: true }); return () => observer.disconnect(); }, [setTriggerPosition, triggerSelector]); const [, setOffset] = require$$0.useState(0); require$$0.useEffect(() => { if (isVisible) { setOffset((prevOffset) => prevOffset + 10); } }, [isVisible]); const addToHistory = (promptText) => { if (typeof promptText !== "string" || !promptText.trim()) { console.warn("Invalid promptText provided to addToHistory"); return; } console.log(tabs); setTabs((tabs2) => tabs2.map((tab) => { if (tab.id === "history") { const isDuplicate = tab.prompts.some((prompt) => (prompt == null ? void 0 : prompt.prompt) === promptText); if (!isDuplicate) { return { ...tab, prompts: [...tab.prompts, { name: `Prompt ${tab.prompts.length + 1}`, prompt: promptText }] }; } else { return tab; } } return tab; })); }; const handleButtonClick = () => { const inputText = document.querySelector("textarea").value; addToHistory(inputText); }; require$$0.useEffect(() => { const observer = new MutationObserver((mutations) => { for (const mutation of mutations) { if (mutation.addedNodes.length) { const button = document.querySelector(".sc-d72450af-1.sc-2fe5a182-20.kXFbYD.kHiDKS"); if (button) { button.addEventListener("click", handleButtonClick); observer.disconnect(); break; } } } }); observer.observe(document.body, { childList: true, subtree: true }); return () => { observer.disconnect(); const button = document.querySelector(".sc-d72450af-1.sc-2fe5a182-20.kXFbYD.kHiDKS"); if (button) { button.removeEventListener("click", handleButtonClick); } }; }, []); require$$0.useEffect(() => { const observer = new MutationObserver((mutationsList, observer2) => { for (const mutation of mutationsList) { if (mutation.type === "childList") { const button = document.querySelector(".sc-d72450af-1.sc-2fe5a182-20.kXFbYD.kHiDKS"); if (button) { button.addEventListener("click", handleButtonClick); observer2.disconnect(); break; } } } }); observer.observe(document.body, { childList: true, subtree: true }); return () => observer.disconnect(); }, []); const [searchResults, setSearchResults] = require$$0.useState([]); return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "thing", children: [ /* @__PURE__ */ jsxRuntimeExports.jsxs( "button", { className: "animated-button", onClick: toggleDrawer, style: { top: "650px", left: `0px` }, children: [ /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", className: "arr-2", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx( "path", { d: "M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z" } ) }), /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text", children: "Prompt Tab" }), /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "circle" }), /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", className: "arr-1", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx( "path", { d: "M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z" } ) }) ] } ), /* @__PURE__ */ jsxRuntimeExports.jsxs( "label", { className: "container", style: { top: "645px", left: `145px` }, children: [ /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "checkbox", onClick: handleFavoriteClick, readOnly: true, checked: isFavorited }), /* @__PURE__ */ jsxRuntimeExports.jsx( "svg", { height: "24px", id: "Layer_1", version: "1.2", viewBox: "0 0 24 24", width: "24px", "xml:space": "preserve", xmlns: "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink", children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9.362,9.158c0,0-3.16,0.35-5.268,0.584c-0.19,0.023-0.358,0.15-0.421,0.343s0,0.394,0.14,0.521 c1.566,1.429,3.919,3.569,3.919,3.569c-0.002,0-0.646,3.113-1.074,5.19c-0.036,0.188,0.032,0.387,0.196,0.506 c0.163,0.119,0.373,0.121,0.538,0.028c1.844-1.048,4.606-2.624,4.606-2.624s2.763,1.576,4.604,2.625 c0.168,0.092,0.378,0.09,0.541-0.029c0.164-0.119,0.232-0.318,0.195-0.505c-0.428-2.078-1.071-5.191-1.071-5.191 s2.353-2.14,3.919-3.566c0.14-0.131,0.202-0.332,0.14-0.524s-0.23-0.319-0.42-0.341c-2.108-0.236-5.269-0.586-5.269-0.586 s-1.31-2.898-2.183-4.83c-0.082-0.173-0.254-0.294-0.456-0.294s-0.375,0.122-0.453,0.294C10.671,6.26,9.362,9.158,9.362,9.158z" }) }) }) } ) ] } ), /* @__PURE__ */ jsxRuntimeExports.jsx( "label", { className: "container1", style: { top: "650px", left: `215px` }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "container1", onClick: addPromptToActiveTab, children: "Add to Current->" }) } ), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `side-drawer ${isVisible ? "visible" : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx( TabManager, { tabs, setTabs, onActiveTabChange: handleActiveTabChange, addPromptToFavorites, searchResults, setSearchResults } ) }), /* @__PURE__ */ jsxRuntimeExports.jsx(TextAreaItemsEditor, {}) ] }); } function App() { return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "App", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SideDrawer, { triggerSelector: ".sc-5db1afd3-16.bwGvYE" }) }); } client.createRoot( (() => { const app = document.createElement("div"); document.body.append(app); return app; })() ).render( /* @__PURE__ */ jsxRuntimeExports.jsx(require$$0.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(App, {}) }) ); })(React, ReactDOM);
