✨ OpenWebUI提示词助手(兼容v0.5.20)

为OpenWebUI的高级系统提示词加入类似nextchat的面具功能
Wrap lines
// ==UserScript==
// @name         ✨ OpenWebUI提示词助手(兼容v0.5.20)
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  为OpenWebUI的高级系统提示词加入类似nextchat的面具功能
// @author       tutrabbit
// @match        https://127.0.0.1:8080/*
// @grant        GM_setValue
// @grant        GM_getValue
// @icon         https://s2.loli.net/2024/12/05/lrYpNuECMKzHwOb.png
// @supportURL   https://github.com/susmouse/open-webui-prompt-helper
// @license      CC-BY-NC-4.0
// ==/UserScript==

(function () {
  "use strict";

  // 默认提示词配置
  const defaultPrompts = [
    {
      name: "通用助手",
      prompt:
        "我希望你作为一个专业的助手，帮助我解决各种问题。请用简洁、清晰的语言回答我的问题。",
    },
    {
      name: "外卖好评助手",
      prompt:
        "请你帮我写一则外卖好评，要求语言自然、真诚，突出商家的特色和优点，字数在50-100字之间。",
    },
  ];

  // 初始化提示词
  function initPrompts() {
    const savedPrompts = GM_getValue("prompts");
    if (!savedPrompts) {
      GM_setValue("prompts", defaultPrompts);
    }
    return GM_getValue("prompts");
  }

  // 创建按钮样式
  const style = document.createElement("style");
  style.textContent = `
        .prompt-helper-btn {
            color: #000;
            margin: 3px;
            padding: 3px 6px;
            border: 1px solid #ccc;
            border-radius: 3px;
            background-color: #f8f9fa;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            font-size: 12px;
        }
        .prompt-helper-btn:hover {
            background-color: #e9ecef;
        }
        .prompt-name {
            color: #000;
            margin-right: 3px;
            cursor: pointer;
        }
        .delete-btn {
            cursor: pointer;
            color: #dc3545;
            padding: 0 3px;
            border-left: 1px solid #ccc;
        }
        .prompt-helper-container {
            margin: 6px 0;
            display: flex;
            flex-wrap: wrap;
            gap: 3px;
        }
        @media (max-width: 768px) {
            .prompt-helper-btn {
                padding: 2px 4px;
                font-size: 10px;
            }
            .prompt-helper-container {
                margin: 4px 0;
            }
        }
    `;
  document.head.appendChild(style);

  // 创建按钮容器
  function createButtonContainer(textarea) {
    const container = document.createElement("div");
    container.className = "prompt-helper-container";
    return container;
  }

  // 创建单个按钮
  function createButton(prompt, container, textarea) {
    const btn = document.createElement("div");
    btn.className = "prompt-helper-btn";

    const nameSpan = document.createElement("span");
    nameSpan.className = "prompt-name";
    nameSpan.textContent = prompt.name;
    nameSpan.onclick = () => {
      textarea.value = prompt.prompt;
      textarea.style.height = "auto";
      textarea.style.height = textarea.scrollHeight + "px";

      // 模拟用户输入，实现对提示词的保存
      const event = new Event("input", { bubbles: true });
      textarea.dispatchEvent(event);
    };

    const deleteSpan = document.createElement("span");
    deleteSpan.className = "delete-btn";
    deleteSpan.textContent = "-";
    deleteSpan.onclick = () => {
      const prompts = GM_getValue("prompts");
      const newPrompts = prompts.filter((p) => p.name !== prompt.name);
      GM_setValue("prompts", newPrompts);
      refreshButtons(container, textarea);
    };

    btn.appendChild(nameSpan);
    btn.appendChild(deleteSpan);
    return btn;
  }

  // 创建添加按钮
  function createAddButton(container, textarea) {
    const btn = document.createElement("button");
    btn.className = "prompt-helper-btn";
    btn.textContent = "+";
    btn.onclick = () => {
      const name = prompt("请输入提示词名称：");
      if (!name) return;
      const promptText = prompt("请输入提示词内容：");
      if (!promptText) return;

      const prompts = GM_getValue("prompts");
      prompts.push({ name, prompt: promptText });
      GM_setValue("prompts", prompts);
      refreshButtons(container, textarea);
    };
    return btn;
  }

  // 刷新按钮
  function refreshButtons(container, textarea) {
    container.innerHTML = "";
    const prompts = GM_getValue("prompts");
    prompts.forEach((prompt) => {
      container.appendChild(createButton(prompt, container, textarea));
    });
    container.appendChild(createAddButton(container, textarea));
  }

  // 主函数
  function init() {
    // 使用更通用的选择器来定位文本框，忽略动态ID部分
    const textarea = document.querySelector(
      "div.pt-8 div.dark\\:text-gray-200.text-sm.font-primary.py-0\\.5.px-0\\.5 > div:nth-child(3) > div:nth-child(2) > div > textarea"
    );

    if (!textarea) {
      //   console.log("没有找到文本框");
      setTimeout(init, 500);
      return;
    }

    // 检查是否已经初始化
    if (textarea.getAttribute("data-prompt-helper-initialized")) {
      return;
    }

    console.log("找到文本框:", textarea);

    // 标记该textarea已经初始化
    textarea.setAttribute("data-prompt-helper-initialized", "true");

    initPrompts();
    const container = createButtonContainer(textarea);
    // 将按钮容器插入到文本框之前
    textarea.parentElement.insertBefore(container, textarea);
    refreshButtons(container, textarea);
  }

  // 创建MutationObserver来监听DOM变化
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === "childList" || mutation.type === "subtree") {
        init();
      }
    });
  });

  // 监听整个文档的变化
  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });

  // 启动脚本
  init();
})();
欢迎访问Greasy Fork镜像
