@hirohsu/user-web-feedback 2.6.0

package/dist/static/modules/prompt-manager.js

@@ -0,0 +1,364 @@
+/**
+ * prompt-manager.js
+ * 提示詞管理模組
+ * 包含提示詞 CRUD、渲染、搜尋等功能
+ */
+
+import {
+  getPrompts,
+  setPrompts,
+  findPromptById,
+  isEditingPrompt,
+  getEditingPromptId,
+  setIsEditingPrompt,
+  setEditingPromptId,
+} from "./state-manager.js";
+
+import {
+  showToast,
+  formatApiError,
+  escapeHtml,
+  updateCharCount,
+} from "./ui-helpers.js";
+import { emitUserActivity } from "./socket-manager.js";
+
+/**
+ * 載入提示詞列表
+ */
+export async function loadPrompts() {
+  try {
+    const response = await fetch("/api/prompts");
+    const data = await response.json();
+
+    if (data.success) {
+      setPrompts(data.prompts);
+      renderPrompts();
+    }
+  } catch (error) {
+    console.error("載入提示詞失敗:", error);
+  }
+}
+
+/**
+ * 自動載入釘選提示詞
+ */
+export async function autoLoadPinnedPrompts() {
+  try {
+    const response = await fetch("/api/prompts/pinned");
+    const data = await response.json();
+
+    if (data.success && data.prompts.length > 0) {
+      const content = data.prompts.map((p) => p.content).join("\n\n");
+      document.getElementById("feedbackText").value = content;
+      updateCharCount();
+
+      showToast(
+        "info",
+        "提示詞已載入",
+        `已自動載入 ${data.prompts.length} 個釘選提示詞`
+      );
+    }
+  } catch (error) {
+    console.error("自動載入釘選提示詞失敗:", error);
+  }
+}
+
+/**
+ * 獲取釘選提示詞內容
+ * @returns {Promise<string>} - 釘選提示詞內容
+ */
+export async function getPinnedPromptsContent() {
+  try {
+    const response = await fetch("/api/prompts/pinned");
+    const data = await response.json();
+
+    if (data.success && data.prompts.length > 0) {
+      return data.prompts.map((p) => p.content).join("\n\n");
+    }
+    return "";
+  } catch (error) {
+    console.error("獲取釘選提示詞失敗:", error);
+    return "";
+  }
+}
+
+/**
+ * 渲染提示詞列表
+ * @param {string} searchTerm - 搜尋關鍵字
+ */
+export function renderPrompts(searchTerm = "") {
+  const listEl = document.getElementById("promptList");
+  if (!listEl) return;
+
+  const prompts = getPrompts();
+  let filteredPrompts = prompts;
+
+  if (searchTerm) {
+    filteredPrompts = prompts.filter(
+      (p) =>
+        p.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        p.content.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        (p.category &&
+          p.category.toLowerCase().includes(searchTerm.toLowerCase()))
+    );
+  }
+
+  if (filteredPrompts.length === 0) {
+    listEl.innerHTML = `
+      <div class="placeholder">
+        <span class="icon">📋</span>
+        <p>${searchTerm ? "找不到符合的提示詞" : "尚無提示詞"}</p>
+        <button id="addPromptBtn" class="btn btn-secondary btn-sm" onclick="openPromptModal()">新增提示詞</button>
+      </div>
+    `;
+    return;
+  }
+
+  listEl.innerHTML = filteredPrompts
+    .map(
+      (prompt) => `
+        <div class="prompt-item ${
+          prompt.isPinned ? "pinned" : ""
+        }" onclick="usePrompt(${prompt.id})">
+          <div class="prompt-item-header">
+            <div class="prompt-item-title">${escapeHtml(prompt.title)}</div>
+            <div class="prompt-item-actions">
+              <button class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); togglePinPrompt(${
+                prompt.id
+              })" title="${prompt.isPinned ? "取消釘選" : "釘選"}">
+                <span class="icon">${prompt.isPinned ? "📍" : "📌"}</span>
+              </button>
+              <button class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); editPrompt(${
+                prompt.id
+              })" title="編輯">
+                <span class="icon">✏️</span>
+              </button>
+              <button class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); deletePrompt(${
+                prompt.id
+              })" title="刪除">
+                <span class="icon">🗑️</span>
+              </button>
+            </div>
+          </div>
+          <div class="prompt-item-content">${escapeHtml(prompt.content)}</div>
+          ${
+            prompt.category
+              ? `
+            <div class="prompt-item-footer">
+              <span class="prompt-item-category">${escapeHtml(
+                prompt.category
+              )}</span>
+            </div>
+          `
+              : ""
+          }
+        </div>
+      `
+    )
+    .join("");
+}
+
+/**
+ * 過濾提示詞
+ */
+export function filterPrompts() {
+  const searchTerm = document.getElementById("promptSearch").value;
+  renderPrompts(searchTerm);
+}
+
+/**
+ * 使用提示詞
+ * @param {number} id - 提示詞 ID
+ */
+export function usePrompt(id) {
+  const prompt = findPromptById(id);
+  if (!prompt) return;
+
+  const feedbackText = document.getElementById("feedbackText");
+  const currentText = feedbackText.value;
+
+  if (currentText.trim()) {
+    feedbackText.value = currentText + "\n\n" + prompt.content;
+  } else {
+    feedbackText.value = prompt.content;
+  }
+
+  updateCharCount();
+  emitUserActivity();
+
+  showToast("success", "提示詞已使用", `已插入「${prompt.title}」`);
+}
+
+/**
+ * 切換提示詞釘選狀態
+ * @param {number} id - 提示詞 ID
+ */
+export async function togglePinPrompt(id) {
+  try {
+    const response = await fetch(`/api/prompts/${id}/pin`, {
+      method: "PUT",
+    });
+
+    const data = await response.json();
+
+    if (data.success) {
+      await loadPrompts();
+      showToast(
+        "success",
+        "成功",
+        data.prompt.isPinned ? "已釘選提示詞" : "已取消釘選"
+      );
+    } else {
+      showToast("error", "錯誤", formatApiError(data));
+    }
+  } catch (error) {
+    console.error("切換釘選狀態失敗:", error);
+    showToast("error", "錯誤", "操作失敗");
+  }
+}
+
+/**
+ * 編輯提示詞
+ * @param {number} id - 提示詞 ID
+ */
+export function editPrompt(id) {
+  const prompt = findPromptById(id);
+  if (!prompt) return;
+
+  setIsEditingPrompt(true);
+  setEditingPromptId(id);
+
+  document.getElementById("promptModalTitle").textContent = "編輯提示詞";
+  document.getElementById("promptId").value = id;
+  document.getElementById("promptTitle").value = prompt.title;
+  document.getElementById("promptContent").value = prompt.content;
+  document.getElementById("promptCategory").value = prompt.category || "";
+  document.getElementById("promptIsPinned").checked = prompt.isPinned;
+
+  openPromptModal();
+}
+
+/**
+ * 刪除提示詞
+ * @param {number} id - 提示詞 ID
+ */
+export async function deletePrompt(id) {
+  if (!confirm("確定要刪除此提示詞嗎？")) return;
+
+  try {
+    const response = await fetch(`/api/prompts/${id}`, {
+      method: "DELETE",
+    });
+
+    const data = await response.json();
+
+    if (data.success) {
+      await loadPrompts();
+      showToast("success", "成功", "提示詞已刪除");
+    } else {
+      showToast("error", "錯誤", formatApiError(data));
+    }
+  } catch (error) {
+    console.error("刪除提示詞失敗:", error);
+    showToast("error", "錯誤", "刪除失敗");
+  }
+}
+
+/**
+ * 開啟提示詞彈窗
+ */
+export function openPromptModal() {
+  if (!isEditingPrompt()) {
+    document.getElementById("promptModalTitle").textContent = "新增提示詞";
+    document.getElementById("promptForm").reset();
+    document.getElementById("promptId").value = "";
+  }
+
+  document.getElementById("promptModal").classList.add("show");
+}
+
+/**
+ * 關閉提示詞彈窗
+ */
+export function closePromptModal() {
+  document.getElementById("promptModal").classList.remove("show");
+  setIsEditingPrompt(false);
+  setEditingPromptId(null);
+}
+
+/**
+ * 儲存提示詞
+ */
+export async function savePrompt() {
+  const title = document.getElementById("promptTitle").value.trim();
+  const content = document.getElementById("promptContent").value.trim();
+  const category = document.getElementById("promptCategory").value.trim();
+  const isPinned = document.getElementById("promptIsPinned").checked;
+
+  if (!title || !content) {
+    showToast("error", "錯誤", "標題和內容為必填欄位");
+    return;
+  }
+
+  const promptData = {
+    title,
+    content,
+    category: category || undefined,
+    isPinned,
+  };
+
+  try {
+    let response;
+    const editing = isEditingPrompt();
+    const editingId = getEditingPromptId();
+
+    if (editing && editingId) {
+      response = await fetch(`/api/prompts/${editingId}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(promptData),
+      });
+    } else {
+      response = await fetch("/api/prompts", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(promptData),
+      });
+    }
+
+    const data = await response.json();
+
+    if (data.success) {
+      await loadPrompts();
+      closePromptModal();
+      showToast("success", "成功", editing ? "提示詞已更新" : "提示詞已創建");
+    } else {
+      showToast("error", "錯誤", formatApiError(data));
+    }
+  } catch (error) {
+    console.error("保存提示詞失敗:", error);
+    showToast("error", "錯誤", "保存失敗");
+  }
+}
+
+// 暴露到 window 供 HTML onclick 使用
+window.usePrompt = usePrompt;
+window.togglePinPrompt = togglePinPrompt;
+window.editPrompt = editPrompt;
+window.deletePrompt = deletePrompt;
+window.openPromptModal = openPromptModal;
+
+export default {
+  loadPrompts,
+  autoLoadPinnedPrompts,
+  getPinnedPromptsContent,
+  renderPrompts,
+  filterPrompts,
+  usePrompt,
+  togglePinPrompt,
+  editPrompt,
+  deletePrompt,
+  openPromptModal,
+  closePromptModal,
+  savePrompt,
+};

package/dist/static/modules/settings-manager.js

@@ -0,0 +1,299 @@
+/**
+ * settings-manager.js
+ * AI 設定與使用者偏好管理模組
+ */
+
+import {
+  getAISettings,
+  setAISettings,
+  setPreferences,
+  setAutoReplyTimerSeconds,
+  setMaxToolRounds,
+  setDebugMode,
+} from "./state-manager.js";
+
+import {
+  showToast,
+  showLoadingOverlay,
+  hideLoadingOverlay,
+} from "./ui-helpers.js";
+
+/**
+ * 載入 AI 設定
+ */
+export async function loadAISettings() {
+  try {
+    const response = await fetch("/api/ai-settings");
+    const data = await response.json();
+
+    if (data.success) {
+      setAISettings(data.settings);
+
+      // 讀取自動回覆計時器秒數設定
+      if (data.settings.autoReplyTimerSeconds !== undefined) {
+        setAutoReplyTimerSeconds(data.settings.autoReplyTimerSeconds);
+        console.log(
+          `從 AI 設定讀取自動回覆時間: ${data.settings.autoReplyTimerSeconds}s`
+        );
+      }
+
+      // 讀取 AI 交談次數上限
+      if (data.settings.maxToolRounds !== undefined) {
+        setMaxToolRounds(data.settings.maxToolRounds);
+        console.log(
+          `從 AI 設定讀取 AI 交談次數: ${data.settings.maxToolRounds}`
+        );
+      }
+
+      // 讀取 Debug 模式
+      if (data.settings.debugMode !== undefined) {
+        setDebugMode(data.settings.debugMode);
+        console.log(`從 AI 設定讀取 Debug 模式: ${data.settings.debugMode}`);
+      }
+    }
+  } catch (error) {
+    console.error("載入 AI 設定失敗:", error);
+  }
+}
+
+/**
+ * 載入使用者偏好
+ */
+export async function loadPreferences() {
+  try {
+    const response = await fetch("/api/preferences");
+    const data = await response.json();
+
+    if (data.success) {
+      setPreferences(data.preferences);
+    }
+  } catch (error) {
+    console.error("載入使用者偏好失敗:", error);
+  }
+}
+
+/**
+ * 開啟 AI 設定彈窗
+ */
+export function openAISettingsModal() {
+  const aiSettings = getAISettings();
+  if (aiSettings) {
+    document.getElementById("apiUrl").value = aiSettings.apiUrl || "";
+    document.getElementById("model").value = aiSettings.model || "";
+    // API Key 欄位預設為空，不從資料庫讀取
+    document.getElementById("apiKey").value = "";
+    document.getElementById("apiKey").placeholder = "留空則保留原有 API Key";
+    document.getElementById("systemPrompt").value =
+      aiSettings.systemPrompt || "";
+    document.getElementById("mcpToolsPrompt").value =
+      aiSettings.mcpToolsPrompt || "";
+    document.getElementById("temperature").value =
+      aiSettings.temperature || 0.7;
+    document.getElementById("maxTokens").value = aiSettings.maxTokens || 1000;
+    document.getElementById("autoReplyTimerSeconds").value =
+      aiSettings.autoReplyTimerSeconds || 300;
+    document.getElementById("maxToolRounds").value =
+      aiSettings.maxToolRounds || 5;
+    document.getElementById("debugMode").checked =
+      aiSettings.debugMode || false;
+  }
+
+  document.getElementById("aiSettingsModal").classList.add("show");
+}
+
+/**
+ * 關閉 AI 設定彈窗
+ */
+export function closeAISettingsModal() {
+  document.getElementById("aiSettingsModal").classList.remove("show");
+}
+
+/**
+ * 儲存 AI 設定
+ */
+export async function saveAISettings() {
+  const apiUrl = document.getElementById("apiUrl").value.trim();
+  const model = document.getElementById("model").value.trim();
+  const apiKey = document.getElementById("apiKey").value.trim();
+  const systemPrompt = document.getElementById("systemPrompt").value.trim();
+  const mcpToolsPrompt = document.getElementById("mcpToolsPrompt").value.trim();
+  const temperature = parseFloat(document.getElementById("temperature").value);
+  const maxTokens = parseInt(document.getElementById("maxTokens").value);
+  const autoReplyTimerSeconds = parseInt(
+    document.getElementById("autoReplyTimerSeconds").value
+  );
+  const maxToolRoundsValue = parseInt(
+    document.getElementById("maxToolRounds").value
+  );
+  const debugModeValue = document.getElementById("debugMode").checked;
+
+  const settingsData = {
+    apiUrl: apiUrl || undefined,
+    model: model || undefined,
+    systemPrompt: systemPrompt || undefined,
+    mcpToolsPrompt: mcpToolsPrompt || undefined,
+    temperature,
+    maxTokens,
+    autoReplyTimerSeconds,
+    maxToolRounds: maxToolRoundsValue,
+    debugMode: debugModeValue,
+  };
+
+  // 只有當 API Key 不是遮罩格式且不為空時才更新
+  if (apiKey && !apiKey.startsWith("***")) {
+    settingsData.apiKey = apiKey;
+  }
+
+  try {
+    const response = await fetch("/api/ai-settings", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(settingsData),
+    });
+
+    let data;
+    try {
+      data = await response.json();
+    } catch (e) {
+      // 不是 JSON 回應，讀取純文字
+      const text = await response.text();
+      console.error("非 JSON 回應:", text);
+      showToast("error", "錯誤", `儲存失敗：${text}`);
+      return;
+    }
+
+    if (data && data.success) {
+      setAISettings(data.settings);
+
+      // 更新自動回覆計時器秒數
+      if (data.settings.autoReplyTimerSeconds !== undefined) {
+        setAutoReplyTimerSeconds(data.settings.autoReplyTimerSeconds);
+        console.log(
+          `自動回覆時間已更新為: ${data.settings.autoReplyTimerSeconds}s`
+        );
+      }
+
+      // 更新 AI 交談次數上限
+      if (data.settings.maxToolRounds !== undefined) {
+        setMaxToolRounds(data.settings.maxToolRounds);
+        console.log(`AI 交談次數已更新為: ${data.settings.maxToolRounds}`);
+      }
+
+      // 更新 Debug 模式
+      if (data.settings.debugMode !== undefined) {
+        setDebugMode(data.settings.debugMode);
+        console.log(`Debug 模式已更新為: ${data.settings.debugMode}`);
+      }
+
+      closeAISettingsModal();
+      showToast("success", "成功", "AI 設定已儲存");
+    } else {
+      // 儘可能顯示詳細錯誤資訊
+      const detailParts = [];
+      if (data.error) detailParts.push(data.error);
+      if (data.details)
+        detailParts.push(
+          typeof data.details === "string"
+            ? data.details
+            : JSON.stringify(data.details)
+        );
+      if (data.stack) detailParts.push(data.stack);
+      const message = detailParts.join(" \n ");
+      console.error("儲存 AI 設定失敗:", data);
+      showToast("error", "錯誤", message || "儲存 AI 設定失敗");
+    }
+  } catch (error) {
+    console.error("儲存 AI 設定失敗:", error);
+    // 如果有 response 物件，可嘗試讀取更多內容
+    if (error && error.response) {
+      try {
+        const text = await error.response.text();
+        showToast("error", "錯誤", `儲存失敗：${text}`);
+        return;
+      } catch (e) {
+        // ignore
+      }
+    }
+
+    showToast(
+      "error",
+      "錯誤",
+      error instanceof Error ? error.message : "儲存失敗"
+    );
+  }
+}
+
+/**
+ * 測試 API Key
+ */
+export async function testAPIKey() {
+  const apiKeyInput = document.getElementById("apiKey").value.trim();
+  const model = document.getElementById("model").value.trim();
+
+  if (!model) {
+    showToast("error", "錯誤", "請輸入模型名稱");
+    return;
+  }
+
+  showLoadingOverlay("正在測試 API Key...");
+
+  try {
+    const requestBody = { model };
+
+    // 判斷是否使用新輸入的 API Key：
+    // 1. API Key 不為空
+    // 2. API Key 不是遮罩格式（不以 *** 開頭）
+    // 如果是遮罩格式或為空，後端會自動使用資料庫中解密的 API Key
+    if (apiKeyInput && !apiKeyInput.startsWith("***")) {
+      requestBody.apiKey = apiKeyInput;
+      console.log("使用新輸入的 API Key 進行測試");
+    } else {
+      console.log("使用資料庫中儲存的 API Key 進行測試");
+    }
+
+    const response = await fetch("/api/ai-settings/validate", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(requestBody),
+    });
+
+    const data = await response.json();
+
+    if (data.valid) {
+      showToast("success", "測試成功", "API Key 有效");
+    } else {
+      showToast("error", "測試失敗", data.error || "API Key 無效");
+    }
+  } catch (error) {
+    console.error("測試 API Key 失敗:", error);
+    showToast("error", "錯誤", "測試失敗");
+  } finally {
+    hideLoadingOverlay();
+  }
+}
+
+/**
+ * 切換 API Key 可見性
+ */
+export function toggleAPIKeyVisibility() {
+  const apiKeyInput = document.getElementById("apiKey");
+  const toggleBtn = document.getElementById("toggleApiKey");
+
+  if (apiKeyInput.type === "password") {
+    apiKeyInput.type = "text";
+    toggleBtn.innerHTML = '<span class="icon">🙈</span>';
+  } else {
+    apiKeyInput.type = "password";
+    toggleBtn.innerHTML = '<span class="icon">👁️</span>';
+  }
+}
+
+export default {
+  loadAISettings,
+  loadPreferences,
+  openAISettingsModal,
+  closeAISettingsModal,
+  saveAISettings,
+  testAPIKey,
+  toggleAPIKeyVisibility,
+};