@hirohsu/user-web-feedback 2.6.0

package/dist/static/modules/timer-controller.js

@@ -0,0 +1,243 @@
+/**
+ * timer-controller.js
+ * 計時器管理模組
+ * 包含對話超時、關閉倒數、自動回覆等計時器功能
+ */
+
+import {
+  getDialogTimeoutSeconds,
+  getAutoReplyTimerSeconds,
+  getAutoReplyTimerRemaining,
+  setAutoReplyTimerRemaining,
+  isAutoReplyTimerPaused,
+  setAutoReplyTimerPaused,
+  isAutoReplyPausedByFocus,
+  setAutoReplyPausedByFocus,
+  getDialogTimeoutInterval,
+  setDialogTimeoutInterval,
+  getCloseCountdownInterval,
+  setCloseCountdownInterval,
+  getAutoReplyTimerInterval,
+  setAutoReplyTimerInterval,
+  getAutoReplyCountdownInterval,
+  setAutoReplyCountdownInterval,
+  getAutoReplyWarningTimeout,
+  setAutoReplyWarningTimeout,
+  getAutoReplyConfirmationTimeout,
+  setAutoReplyConfirmationTimeout,
+} from "./state-manager.js";
+
+// 使用動態導入打破循環依賴
+let triggerAutoAIReplyFn = null;
+async function loadTriggerAutoAIReply() {
+  if (!triggerAutoAIReplyFn) {
+    const module = await import("./feedback-handler.js");
+    triggerAutoAIReplyFn = module.triggerAutoAIReply;
+  }
+  return triggerAutoAIReplyFn;
+}
+
+/**
+ * 停止所有計時器
+ */
+export function stopAllTimers() {
+  const dialogTimeout = getDialogTimeoutInterval();
+  if (dialogTimeout) {
+    clearInterval(dialogTimeout);
+    setDialogTimeoutInterval(null);
+  }
+
+  const closeCountdown = getCloseCountdownInterval();
+  if (closeCountdown) {
+    clearInterval(closeCountdown);
+    setCloseCountdownInterval(null);
+  }
+  const countdownEl = document.getElementById("close-cd");
+  if (countdownEl) {
+    countdownEl.style.display = "none";
+  }
+
+  const autoReplyTimer = getAutoReplyTimerInterval();
+  if (autoReplyTimer) {
+    clearInterval(autoReplyTimer);
+    setAutoReplyTimerInterval(null);
+  }
+
+  // 隱藏自動回覆計時器
+  const autoReplyTimerEl = document.getElementById("auto-reply-timer");
+  if (autoReplyTimerEl) {
+    autoReplyTimerEl.classList.remove("active", "paused");
+    autoReplyTimerEl.style.display = "none";
+  }
+
+  const confirmationTimeout = getAutoReplyConfirmationTimeout();
+  if (confirmationTimeout) {
+    clearInterval(confirmationTimeout);
+    setAutoReplyConfirmationTimeout(null);
+  }
+}
+
+/**
+ * 開始關閉頁面倒數計時（提交成功後 3 秒關閉）
+ */
+export function startCloseCountdown() {
+  const countdownEl = document.getElementById("close-cd");
+  if (!countdownEl) {
+    console.warn("關閉倒數計時器元素 (close-cd) 未找到");
+    return;
+  }
+
+  const existingInterval = getCloseCountdownInterval();
+  if (existingInterval) {
+    clearInterval(existingInterval);
+  }
+
+  // 固定 3 秒倒數
+  let remaining = 3;
+  countdownEl.style.display = "inline-flex";
+  countdownEl.textContent = remaining;
+
+  console.log(`開始關閉頁面倒數計時: ${remaining} 秒`);
+
+  const intervalId = setInterval(() => {
+    remaining--;
+    countdownEl.textContent = remaining;
+
+    if (remaining <= 0) {
+      clearInterval(intervalId);
+      setCloseCountdownInterval(null);
+      console.log("倒數結束，關閉頁面");
+      window.close();
+    }
+  }, 1000);
+
+  setCloseCountdownInterval(intervalId);
+}
+
+/**
+ * 取得計時器元素（使用連接狀態區塊內的計時器）
+ */
+function getTimerElements() {
+  // 使用連接狀態區塊內的計時器
+  let timerEl = document.getElementById("auto-reply-timer");
+  let secondsEl = document.getElementById("auto-reply-seconds");
+
+  return { timerEl, secondsEl };
+}
+
+/**
+ * 開始自動回應倒數計時（300 秒）
+ */
+export function startAutoReplyTimer() {
+  const { timerEl, secondsEl } = getTimerElements();
+
+  if (!timerEl || !secondsEl) {
+    console.warn("自動回應計時器元素未找到");
+    return;
+  }
+
+  setAutoReplyTimerRemaining(getAutoReplyTimerSeconds());
+  timerEl.style.display = "inline-flex";
+  timerEl.classList.add("active");
+  timerEl.classList.remove("paused");
+
+  const existingInterval = getAutoReplyTimerInterval();
+  if (existingInterval) {
+    clearInterval(existingInterval);
+  }
+
+  const updateCountdown = async () => {
+    const { secondsEl: currentSecondsEl } = getTimerElements();
+    if (!currentSecondsEl) return;
+
+    if (isAutoReplyTimerPaused()) {
+      currentSecondsEl.textContent = getAutoReplyTimerRemaining();
+      return;
+    }
+
+    const remaining = getAutoReplyTimerRemaining();
+    if (remaining > 0) {
+      currentSecondsEl.textContent = remaining;
+      setAutoReplyTimerRemaining(remaining - 1);
+    } else {
+      const interval = getAutoReplyTimerInterval();
+      if (interval) {
+        clearInterval(interval);
+        setAutoReplyTimerInterval(null);
+      }
+      console.log("自動回應時間已到，啟動 AI 回應");
+      // 動態載入並執行
+      const triggerFn = await loadTriggerAutoAIReply();
+      if (triggerFn) triggerFn();
+    }
+  };
+
+  secondsEl.textContent = getAutoReplyTimerRemaining();
+  if (!isAutoReplyTimerPaused()) {
+    setAutoReplyTimerRemaining(getAutoReplyTimerRemaining() - 1);
+  }
+
+  const intervalId = setInterval(updateCountdown, 1000);
+  setAutoReplyTimerInterval(intervalId);
+}
+
+/**
+ * 暫停自動回覆計時器
+ * @param {boolean} byFocus - 是否由焦點事件引起的暫停
+ */
+export function pauseAutoReplyTimer(byFocus = false) {
+  setAutoReplyTimerPaused(true);
+  if (byFocus) setAutoReplyPausedByFocus(true);
+
+  const { timerEl } = getTimerElements();
+  if (timerEl) timerEl.classList.add("paused");
+}
+
+/**
+ * 恢復自動回覆計時器
+ */
+export function resumeAutoReplyTimer() {
+  setAutoReplyTimerPaused(false);
+  setAutoReplyPausedByFocus(false);
+
+  const { timerEl } = getTimerElements();
+  if (timerEl) timerEl.classList.remove("paused");
+}
+
+/**
+ * 停止自動回覆倒數計時
+ */
+export function stopAutoReplyCountdown() {
+  const interval = getAutoReplyCountdownInterval();
+  if (interval) {
+    clearInterval(interval);
+    setAutoReplyCountdownInterval(null);
+  }
+}
+
+/**
+ * 顯示自動回覆警告（已棄用，改用底部計時器）
+ * @deprecated
+ */
+export function showAutoReplyWarning(seconds) {
+  // 不再使用警告彈窗，計時器會常駐在底部
+}
+
+/**
+ * 隱藏自動回覆警告（已棄用）
+ * @deprecated
+ */
+export function hideAutoReplyWarning() {
+  // 不再使用警告彈窗
+}
+
+export default {
+  stopAllTimers,
+  startCloseCountdown,
+  startAutoReplyTimer,
+  pauseAutoReplyTimer,
+  resumeAutoReplyTimer,
+  stopAutoReplyCountdown,
+  showAutoReplyWarning,
+  hideAutoReplyWarning,
+};

package/dist/static/modules/ui-helpers.js

@@ -0,0 +1,246 @@
+/**
+ * ui-helpers.js
+ * UI 輔助函數模組
+ * 包含 Toast、Modal、Loading、HTML 轉義等工具函數
+ */
+
+/**
+ * HTML 轉義
+ * @param {string} text - 要轉義的文字
+ * @returns {string} - 轉義後的文字
+ */
+export function escapeHtml(text) {
+  if (!text) return "";
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+/**
+ * 正則表達式轉義
+ * @param {string} str - 要轉義的字串
+ * @returns {string} - 轉義後的字串
+ */
+export function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+/**
+ * 顯示 Toast 通知
+ * @param {string} type - 類型: success, error, info
+ * @param {string} title - 標題
+ * @param {string} message - 訊息
+ */
+export function showToast(type, title, message) {
+  const container = document.getElementById("toastContainer");
+  if (!container) return;
+
+  const toast = document.createElement("div");
+  toast.className = `toast ${type}`;
+  toast.innerHTML = `
+    <div class="toast-icon">${getToastIcon(type)}</div>
+    <div class="toast-content">
+      <div class="toast-title">${escapeHtml(title)}</div>
+      <div class="toast-message">${escapeHtml(message)}</div>
+    </div>
+  `;
+
+  container.appendChild(toast);
+
+  setTimeout(() => {
+    toast.style.opacity = "0";
+    setTimeout(() => toast.remove(), 300);
+  }, 3000);
+}
+
+/**
+ * 取得 Toast 圖標
+ * @param {string} type - 類型
+ * @returns {string} - 圖標
+ */
+function getToastIcon(type) {
+  const icons = {
+    success: "✅",
+    error: "❌",
+    info: "ℹ️",
+  };
+  return icons[type] || "📢";
+}
+
+/**
+ * 格式化 API 錯誤為字串
+ * @param {Object|string} data - 錯誤資料
+ * @returns {string} - 格式化後的錯誤訊息
+ */
+export function formatApiError(data) {
+  if (!data) return "未知錯誤";
+  if (typeof data === "string") return data;
+
+  try {
+    const parts = [];
+    if (data.error) parts.push(data.error);
+    if (data.details) {
+      parts.push(
+        typeof data.details === "string"
+          ? data.details
+          : JSON.stringify(data.details)
+      );
+    }
+    if (data.stack) parts.push(data.stack);
+    return parts.join("\n") || JSON.stringify(data);
+  } catch (e) {
+    return String(data);
+  }
+}
+
+/**
+ * 顯示提醒彈窗
+ * @param {string} title - 標題
+ * @param {string} message - 訊息
+ * @param {Function} onConfirm - 確認回調
+ * @param {Function} onCancel - 取消回調
+ */
+export function showAlertModal(
+  title,
+  message,
+  onConfirm = null,
+  onCancel = null
+) {
+  const modal = document.getElementById("alertModal");
+  if (!modal) return;
+
+  const titleEl = document.getElementById("alertModalTitle");
+  const bodyEl = document.getElementById("alertModalBody");
+  const confirmBtn = document.getElementById("alertModalConfirm");
+  const cancelBtn = document.getElementById("alertModalCancel");
+
+  if (titleEl) titleEl.textContent = title;
+  if (bodyEl) bodyEl.textContent = message;
+
+  // 設置確認按鈕
+  if (confirmBtn) {
+    confirmBtn.onclick = () => {
+      hideAlertModal();
+      if (onConfirm) onConfirm();
+    };
+  }
+
+  // 設置取消按鈕
+  if (cancelBtn) {
+    if (onCancel) {
+      cancelBtn.style.display = "block";
+      cancelBtn.onclick = () => {
+        hideAlertModal();
+        onCancel();
+      };
+    } else {
+      cancelBtn.style.display = "none";
+    }
+  }
+
+  modal.classList.add("show");
+}
+
+/**
+ * 隱藏提醒彈窗
+ */
+export function hideAlertModal() {
+  const modal = document.getElementById("alertModal");
+  if (modal) {
+    modal.classList.remove("show");
+  }
+}
+
+/**
+ * 顯示載入遮罩
+ * @param {string} text - 載入文字
+ */
+export function showLoadingOverlay(text = "處理中...") {
+  const overlay = document.getElementById("loadingOverlay");
+  const loadingText = document.getElementById("loadingText");
+
+  if (loadingText) loadingText.textContent = text;
+  if (overlay) overlay.style.display = "flex";
+}
+
+/**
+ * 隱藏載入遮罩
+ */
+export function hideLoadingOverlay() {
+  const overlay = document.getElementById("loadingOverlay");
+  if (overlay) overlay.style.display = "none";
+}
+
+/**
+ * 顯示專案資訊
+ * @param {string} projectName - 專案名稱
+ * @param {string} projectPath - 專案路徑
+ */
+export function displayProjectInfo(projectName, projectPath) {
+  const projectInfoEl = document.getElementById("projectInfo");
+  if (!projectInfoEl) return;
+
+  if (projectName || projectPath) {
+    const name = projectName || "未命名專案";
+    const path = projectPath ? ` (${projectPath})` : "";
+    projectInfoEl.innerHTML = `<span class="icon">📁</span> ${name}${path}`;
+    projectInfoEl.title = projectPath || projectName || "";
+  } else {
+    projectInfoEl.innerHTML = "";
+  }
+}
+
+/**
+ * 顯示 AI 訊息
+ * @param {string} message - 訊息內容 (Markdown)
+ */
+export function displayAIMessage(message) {
+  const displayEl = document.getElementById("aiMessageDisplay");
+  if (!displayEl) return;
+
+  const htmlContent = marked.parse(message);
+  displayEl.innerHTML = `<div class="ai-message-content">${htmlContent}</div>`;
+}
+
+/**
+ * 更新字元計數
+ */
+export function updateCharCount() {
+  const textEl = document.getElementById("feedbackText");
+  const countEl = document.getElementById("charCount");
+
+  if (textEl && countEl) {
+    countEl.textContent = `${textEl.value.length} 字元`;
+  }
+}
+
+/**
+ * 截斷過長的文字
+ * @param {string|Object} text - 要截斷的文字
+ * @param {number} maxLength - 最大長度
+ * @returns {string} - 截斷後的文字
+ */
+export function truncateResult(text, maxLength = 500) {
+  if (typeof text !== "string") {
+    text = JSON.stringify(text, null, 2);
+  }
+  if (text.length > maxLength) {
+    return text.substring(0, maxLength) + "\n... (已截斷)";
+  }
+  return text;
+}
+
+export default {
+  escapeHtml,
+  escapeRegex,
+  showToast,
+  formatApiError,
+  showAlertModal,
+  hideAlertModal,
+  showLoadingOverlay,
+  hideLoadingOverlay,
+  displayProjectInfo,
+  displayAIMessage,
+  updateCharCount,
+  truncateResult,
+};