@hirohsu/user-web-feedback 2.6.0

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

@@ -0,0 +1,170 @@
+/**
+ * socket-manager.js
+ * Socket.IO 連線和事件管理模組
+ */
+
+import {
+  setSocket,
+  setSessionId,
+  setWorkSummary,
+  setCurrentProjectName,
+  setCurrentProjectPath,
+  getSocket,
+  getSessionId,
+} from "./state-manager.js";
+
+import {
+  showToast,
+  displayProjectInfo,
+  displayAIMessage,
+} from "./ui-helpers.js";
+
+import { startCloseCountdown } from "./timer-controller.js";
+
+// 動態導入以避免循環依賴
+async function loadClearSubmissionInputs() {
+  const module = await import("./feedback-handler.js");
+  return module.clearSubmissionInputs;
+}
+
+/**
+ * 初始化 Socket.IO 連線
+ */
+export function initSocketIO() {
+  const socket = io();
+  setSocket(socket);
+
+  socket.on("connect", () => {
+    console.log("已連線到伺服器");
+    updateConnectionStatus(true);
+    // 請求會話
+    socket.emit("request_session");
+  });
+
+  socket.on("disconnect", () => {
+    console.log("與伺服器斷線");
+    updateConnectionStatus(false);
+  });
+
+  socket.on("session_assigned", (data) => {
+    console.log("收到會話分配:", data);
+    // 注意：伺服器使用蛇形命名 (session_id, work_summary 等)
+    setSessionId(data.session_id);
+    setWorkSummary(data.work_summary);
+    setCurrentProjectName(data.project_name || null);
+    setCurrentProjectPath(data.project_path || null);
+
+    displayProjectInfo(data.project_name, data.project_path);
+    displayAIMessage(data.work_summary);
+
+    // 通知伺服器 session 已就緒
+    socket.emit("session_ready", {
+      sessionId: data.session_id,
+      workSummary: data.work_summary,
+    });
+  });
+
+  socket.on("feedback_submitted", async (data) => {
+    console.log("反饋已提交:", data);
+
+    if (data.success) {
+      showToast("success", "提交成功", "您的回應已送出，頁面將在 3 秒後關閉");
+      const clearFn = await loadClearSubmissionInputs();
+      if (clearFn) clearFn();
+
+      // 啟動 3 秒關閉倒數
+      startCloseCountdown();
+    } else {
+      showToast("error", "提交失敗", data.error || "請稍後再試");
+    }
+  });
+
+  socket.on("auto_reply", (data) => {
+    console.log("收到自動回覆觸發:", data);
+    if (data.autoSubmit) {
+      console.log("準備自動提交...");
+    }
+  });
+
+  socket.on("error", (error) => {
+    console.error("Socket 錯誤:", error);
+    showToast("error", "連線錯誤", error.message || "請檢查網路連線");
+  });
+
+  socket.on("close_session", () => {
+    console.log("收到關閉會話訊號");
+    window.close();
+  });
+
+  return socket;
+}
+
+/**
+ * 更新連線狀態顯示
+ * @param {boolean} connected - 是否已連線
+ */
+export function updateConnectionStatus(connected) {
+  const containerEl = document.getElementById("connectionStatus");
+  if (!containerEl) return;
+
+  const dotEl = containerEl.querySelector(".status-dot");
+  const textEl = containerEl.querySelector(".status-text");
+
+  if (connected) {
+    containerEl.classList.remove("disconnected");
+    containerEl.classList.add("connected");
+    if (dotEl) dotEl.classList.add("online");
+    if (textEl) textEl.textContent = "已連線";
+  } else {
+    containerEl.classList.remove("connected");
+    containerEl.classList.add("disconnected");
+    if (dotEl) dotEl.classList.remove("online");
+    if (textEl) textEl.textContent = "已斷線";
+  }
+}
+
+/**
+ * 通知伺服器使用者活動
+ */
+export function emitUserActivity() {
+  const socket = getSocket();
+  const sessionId = getSessionId();
+
+  if (socket && sessionId) {
+    socket.emit("user_activity", {
+      sessionId: sessionId,
+      timestamp: Date.now(),
+    });
+  }
+}
+
+/**
+ * 發送反饋到伺服器
+ * @param {Object} feedbackData - 反饋資料
+ */
+export function emitSubmitFeedback(feedbackData) {
+  const socket = getSocket();
+  if (socket) {
+    socket.emit("submit_feedback", feedbackData);
+  }
+}
+
+/**
+ * 取消自動回覆
+ */
+export function emitCancelAutoReply() {
+  const socket = getSocket();
+  const sessionId = getSessionId();
+
+  if (socket && sessionId) {
+    socket.emit("cancel_auto_reply", { sessionId });
+  }
+}
+
+export default {
+  initSocketIO,
+  updateConnectionStatus,
+  emitUserActivity,
+  emitSubmitFeedback,
+  emitCancelAutoReply,
+};

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

@@ -0,0 +1,352 @@
+/**
+ * state-manager.js
+ * 全域狀態管理模組
+ * 集中管理 app.js 中的所有全域狀態變數
+ */
+
+const AppState = {
+  // Socket.IO 連線
+  socket: null,
+  sessionId: null,
+
+  // 專案資訊
+  currentProjectName: null,
+  currentProjectPath: null,
+
+  // AI 相關
+  workSummary: null,
+  aiSettings: null,
+  maxToolRounds: 5,
+  debugMode: false,
+
+  // 圖片
+  currentImages: [],
+
+  // 提示詞
+  prompts: [],
+  isEditingPrompt: false,
+  editingPromptId: null,
+
+  // 使用者偏好
+  preferences: {},
+
+  // 計時器狀態
+  DIALOG_TIMEOUT_SECONDS: 60,
+  AUTO_REPLY_TIMER_SECONDS: 300,
+  autoReplyTimerRemaining: 0,
+  autoReplyTimerPaused: false,
+  autoReplyPausedByFocus: false,
+  autoReplyData: null,
+
+  // 計時器 ID
+  dialogTimeoutInterval: null,
+  closeCountdownInterval: null,
+  autoReplyTimerInterval: null,
+  autoReplyCountdownInterval: null,
+  autoReplyWarningTimeout: null,
+  autoReplyConfirmationTimeout: null,
+
+  // Streaming
+  streamingAbortController: null,
+
+  // MCP Servers
+  mcpServers: [],
+  editingMcpServerId: null,
+
+  // 日誌
+  currentLogPage: 1,
+  totalLogPages: 1,
+  logSources: [],
+};
+
+// Getter 函數
+export function getSocket() {
+  return AppState.socket;
+}
+
+export function getSessionId() {
+  return AppState.sessionId;
+}
+
+export function getWorkSummary() {
+  return AppState.workSummary;
+}
+
+export function getCurrentImages() {
+  return AppState.currentImages;
+}
+
+export function getPrompts() {
+  return AppState.prompts;
+}
+
+export function getAISettings() {
+  return AppState.aiSettings;
+}
+
+export function getPreferences() {
+  return AppState.preferences;
+}
+
+export function getMaxToolRounds() {
+  return AppState.maxToolRounds;
+}
+
+export function getDebugMode() {
+  return AppState.debugMode;
+}
+
+export function getDialogTimeoutSeconds() {
+  return AppState.DIALOG_TIMEOUT_SECONDS;
+}
+
+export function getAutoReplyTimerSeconds() {
+  return AppState.AUTO_REPLY_TIMER_SECONDS;
+}
+
+export function getCurrentProjectName() {
+  return AppState.currentProjectName;
+}
+
+export function getCurrentProjectPath() {
+  return AppState.currentProjectPath;
+}
+
+export function getStreamingAbortController() {
+  return AppState.streamingAbortController;
+}
+
+export function getMcpServers() {
+  return AppState.mcpServers;
+}
+
+export function getEditingMcpServerId() {
+  return AppState.editingMcpServerId;
+}
+
+export function isEditingPrompt() {
+  return AppState.isEditingPrompt;
+}
+
+export function getEditingPromptId() {
+  return AppState.editingPromptId;
+}
+
+export function getAutoReplyTimerRemaining() {
+  return AppState.autoReplyTimerRemaining;
+}
+
+export function isAutoReplyTimerPaused() {
+  return AppState.autoReplyTimerPaused;
+}
+
+export function isAutoReplyPausedByFocus() {
+  return AppState.autoReplyPausedByFocus;
+}
+
+export function getAutoReplyData() {
+  return AppState.autoReplyData;
+}
+
+// Timer ID getters
+export function getDialogTimeoutInterval() {
+  return AppState.dialogTimeoutInterval;
+}
+
+export function getCloseCountdownInterval() {
+  return AppState.closeCountdownInterval;
+}
+
+export function getAutoReplyTimerInterval() {
+  return AppState.autoReplyTimerInterval;
+}
+
+export function getAutoReplyCountdownInterval() {
+  return AppState.autoReplyCountdownInterval;
+}
+
+export function getAutoReplyWarningTimeout() {
+  return AppState.autoReplyWarningTimeout;
+}
+
+export function getAutoReplyConfirmationTimeout() {
+  return AppState.autoReplyConfirmationTimeout;
+}
+
+// Log getters
+export function getCurrentLogPage() {
+  return AppState.currentLogPage;
+}
+
+export function getTotalLogPages() {
+  return AppState.totalLogPages;
+}
+
+export function getLogSources() {
+  return AppState.logSources;
+}
+
+// Setter 函數
+export function setSocket(socket) {
+  AppState.socket = socket;
+}
+
+export function setSessionId(id) {
+  AppState.sessionId = id;
+}
+
+export function setWorkSummary(summary) {
+  AppState.workSummary = summary;
+}
+
+export function setCurrentImages(images) {
+  AppState.currentImages = images;
+}
+
+export function addImage(image) {
+  AppState.currentImages.push(image);
+}
+
+export function removeImageAt(index) {
+  AppState.currentImages.splice(index, 1);
+}
+
+export function clearImages() {
+  AppState.currentImages = [];
+}
+
+export function setPrompts(prompts) {
+  AppState.prompts = prompts;
+}
+
+export function setAISettings(settings) {
+  AppState.aiSettings = settings;
+}
+
+export function setPreferences(prefs) {
+  AppState.preferences = prefs;
+}
+
+export function setMaxToolRounds(rounds) {
+  AppState.maxToolRounds = rounds;
+}
+
+export function setDebugMode(mode) {
+  AppState.debugMode = mode;
+}
+
+export function setDialogTimeoutSeconds(seconds) {
+  AppState.DIALOG_TIMEOUT_SECONDS = seconds;
+}
+
+export function setAutoReplyTimerSeconds(seconds) {
+  AppState.AUTO_REPLY_TIMER_SECONDS = seconds;
+}
+
+export function setCurrentProjectName(name) {
+  AppState.currentProjectName = name;
+}
+
+export function setCurrentProjectPath(path) {
+  AppState.currentProjectPath = path;
+}
+
+export function setStreamingAbortController(controller) {
+  AppState.streamingAbortController = controller;
+}
+
+export function setMcpServers(servers) {
+  AppState.mcpServers = servers;
+}
+
+export function setEditingMcpServerId(id) {
+  AppState.editingMcpServerId = id;
+}
+
+export function setIsEditingPrompt(editing) {
+  AppState.isEditingPrompt = editing;
+}
+
+export function setEditingPromptId(id) {
+  AppState.editingPromptId = id;
+}
+
+export function setAutoReplyTimerRemaining(remaining) {
+  AppState.autoReplyTimerRemaining = remaining;
+}
+
+export function setAutoReplyTimerPaused(paused) {
+  AppState.autoReplyTimerPaused = paused;
+}
+
+export function setAutoReplyPausedByFocus(paused) {
+  AppState.autoReplyPausedByFocus = paused;
+}
+
+export function setAutoReplyData(data) {
+  AppState.autoReplyData = data;
+}
+
+// Timer ID setters
+export function setDialogTimeoutInterval(id) {
+  AppState.dialogTimeoutInterval = id;
+}
+
+export function setCloseCountdownInterval(id) {
+  AppState.closeCountdownInterval = id;
+}
+
+export function setAutoReplyTimerInterval(id) {
+  AppState.autoReplyTimerInterval = id;
+}
+
+export function setAutoReplyCountdownInterval(id) {
+  AppState.autoReplyCountdownInterval = id;
+}
+
+export function setAutoReplyWarningTimeout(id) {
+  AppState.autoReplyWarningTimeout = id;
+}
+
+export function setAutoReplyConfirmationTimeout(id) {
+  AppState.autoReplyConfirmationTimeout = id;
+}
+
+// Log setters
+export function setCurrentLogPage(page) {
+  AppState.currentLogPage = page;
+}
+
+export function setTotalLogPages(pages) {
+  AppState.totalLogPages = pages;
+}
+
+export function setLogSources(sources) {
+  AppState.logSources = sources;
+}
+
+// 工具函數
+export function findPromptById(id) {
+  return AppState.prompts.find((p) => p.id === id);
+}
+
+export function findMcpServerById(id) {
+  return AppState.mcpServers.find((s) => s.id === id);
+}
+
+// 清除所有計時器 ID
+export function clearAllTimerIds() {
+  AppState.dialogTimeoutInterval = null;
+  AppState.closeCountdownInterval = null;
+  AppState.autoReplyTimerInterval = null;
+  AppState.autoReplyCountdownInterval = null;
+  AppState.autoReplyWarningTimeout = null;
+  AppState.autoReplyConfirmationTimeout = null;
+}
+
+// 匯出整個狀態（僅供調試）
+export function getFullState() {
+  return { ...AppState };
+}
+
+export default AppState;