cx-chat 0.0.1

package/src/hooks/useStickyHeader.ts

@@ -0,0 +1,42 @@
+import type React from 'react'
+import { useEffect, useRef } from 'react';
+import { useOutletContext } from 'react-router-dom';
+
+export interface MainLayoutContext {
+    setHeaderTitle: (title: React.ReactNode | null) => void;
+}
+
+export const useStickyHeader = (title: string) => {
+    const context = useOutletContext<MainLayoutContext>();
+    // Safeguard: if hook is used outside of MainLayout context
+    const setHeaderTitle = context?.setHeaderTitle || (() => { });
+
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const element = ref.current;
+        if (!element) return;
+
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                // If element is NOT interacting (scrolled out of view), show title in header
+                if (!entry.isIntersecting && entry.boundingClientRect.top < 0) {
+                    // Only trigger if it went off the TOP, not bottom
+                    setHeaderTitle(title);
+                } else {
+                    setHeaderTitle(null);
+                }
+            },
+            { threshold: 0 }
+        );
+
+        observer.observe(element);
+
+        return () => {
+            observer.disconnect();
+            setHeaderTitle(null);
+        };
+    }, [title, setHeaderTitle]);
+
+    return ref;
+};

package/src/hooks/useThreadActions.ts

@@ -0,0 +1,105 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+
+import {
+    cancelTopChatAPI,
+    deleteChatSessionAPI,
+    topChatAPI,
+    updateChatTitleAPI,
+} from '@/api/chat'
+
+/** 全局订阅：正在执行删除 API 的会话 id（无则 null） */
+export const CHAT_DELETING_SESSION_QUERY_KEY = ['chat', 'deletingSessionId'] as const
+
+export function useDeletingChatSessionId(): string | null {
+  const { data } = useQuery({
+    queryKey: CHAT_DELETING_SESSION_QUERY_KEY,
+    queryFn: () => null as string | null,
+    staleTime: Infinity,
+    gcTime: Infinity,
+    initialData: null,
+  })
+  return typeof data === 'string' && data.length > 0 ? data : null
+}
+
+type UseThreadActionsOptions = {
+  onDeleteSuccess?: (threadId: string) => void
+  onUpdateSuccess?: () => void
+}
+
+export const useThreadActions = (options?: UseThreadActionsOptions) => {
+  const queryClient = useQueryClient()
+
+  const updateTitleMutation = useMutation({
+    mutationFn: async (payload: { sessionId: string; title: string }) => {
+      await updateChatTitleAPI({
+        sessionId: payload.sessionId,
+        title: payload.title,
+      })
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['threads'] })
+      options?.onUpdateSuccess?.()
+    },
+  })
+
+  const pinMutation = useMutation({
+    mutationFn: async (payload: {
+      sessionId: string
+      /** 当前是否已置顶：已置顶则取消置顶，否则置顶 */
+      isPinned: boolean
+    }) => {
+      const { sessionId } = payload
+      if (payload.isPinned) {
+        await cancelTopChatAPI({ sessionId })
+      } else {
+        await topChatAPI({ sessionId })
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['threads'] })
+      options?.onUpdateSuccess?.()
+    },
+  })
+
+  const deleteThreadMutation = useMutation({
+    mutationFn: async (threadId: string) => {
+      await deleteChatSessionAPI({ sessionId: threadId })
+      return threadId
+    },
+    onMutate: (threadId) => {
+      queryClient.setQueryData(CHAT_DELETING_SESSION_QUERY_KEY, threadId)
+    },
+    onSettled: () => {
+      queryClient.setQueryData(CHAT_DELETING_SESSION_QUERY_KEY, null)
+    },
+    onSuccess: (threadId) => {
+      queryClient.invalidateQueries({ queryKey: ['threads'] })
+      options?.onDeleteSuccess?.(threadId)
+    },
+  })
+
+  const renameThread = (threadId: string, title: string) => {
+    return updateTitleMutation.mutate({
+      sessionId: threadId,
+      title: title.trim(),
+    })
+  }
+
+  /** @param isPinned 当前会话是否已置顶（与列表 top_status===1 一致） */
+  const togglePinThread = (threadId: string, isPinned: boolean) => {
+    return pinMutation.mutate({ sessionId: threadId, isPinned })
+  }
+
+  const deleteThread = (threadId: string) => {
+    return deleteThreadMutation.mutate(threadId)
+  }
+
+  return {
+    renameThread,
+    togglePinThread,
+    deleteThread,
+    isUpdatingThread:
+      updateTitleMutation.isPending || pinMutation.isPending,
+    isDeletingThread: deleteThreadMutation.isPending,
+  }
+}

package/src/hooks/useUserPreferences.ts

@@ -0,0 +1,101 @@
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { setUserCurrentThemeAPI, setUserCurrentLanguageAPI } from '@api/system/user';
+import { getStore, removeStore, setStore } from '@/utils/storage'
+type UserPreferenceSource = {
+    theme?: string;
+    language?: string;
+};
+
+export const useUserPreferences = () => {
+    const { i18n } = useTranslation();
+    const [isLoading, setIsLoading] = useState(true);
+
+    // Load preferences from provided user info (no extra API needed)
+    const loadPreferences = useCallback(async (userInfo?: UserPreferenceSource) => {
+        try {
+            // Apply theme: storage 优先，其次用户信息（当前主题保存仅本地）
+            // const localTheme = localStorage.getItem('theme');
+            const localTheme = getStore('theme');
+            const preferredTheme =
+                localTheme === 'dark' || localTheme === 'light'
+                    ? localTheme
+                    : userInfo?.theme;
+
+            if (preferredTheme === 'dark') {
+                document.documentElement.classList.add('dark');
+                // localStorage.setItem('theme', 'dark');
+                setStore('theme', 'dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+                if (preferredTheme === 'light') {
+                    // localStorage.setItem('theme', 'light');
+                    setStore('theme', 'light');
+                }
+            }
+
+            // Apply language
+            const langCode = userInfo?.language;
+            if (langCode) {
+                i18n.changeLanguage(langCode);
+                // localStorage.setItem('i18nextLng', langCode);
+                setStore('i18nextLng', langCode);
+            }
+
+            setIsLoading(false);
+        } catch (error) {
+            console.error('Failed to load user preferences:', error);
+            // Fallback to storage
+            // const localTheme = localStorage.getItem('theme');
+            const localTheme = getStore('theme');
+            if (localTheme === 'dark') {
+                document.documentElement.classList.add('dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+            }
+            setIsLoading(false);
+        }
+    }, [i18n]);
+
+    // 保存主题到服务端（同时落 localStorage，保证刷新后主题一致）
+    const saveTheme = useCallback(async (theme: 'light' | 'dark') => {
+        try {
+            await setUserCurrentThemeAPI({
+                theme,
+                mode: theme,
+            } as any);
+            setStore('theme', theme);
+            // localStorage.setItem('theme', theme);
+        } catch (error) {
+            console.error('Failed to save theme:', error);
+            // Still save to localStorage as fallback
+            setStore('theme', theme);
+            // localStorage.setItem('theme', theme);
+        }
+    }, []);
+
+    // 保存语言到服务端（同时落 localStorage，保证刷新后语言一致）
+    const saveLanguage = useCallback(async (langCode: string) => {
+        try {
+            await setUserCurrentLanguageAPI({
+                language: langCode,
+                lang: langCode,
+                code: langCode,
+            } as any);
+            setStore('i18nextLng', langCode);
+            // localStorage.setItem('i18nextLng', langCode);
+        } catch (error) {
+            console.error('Failed to save language:', error);
+            // Still save to localStorage as fallback
+            setStore('i18nextLng', langCode);
+            // localStorage.setItem('i18nextLng', langCode);
+        }
+    }, []);
+
+    return {
+        isLoading,
+        loadPreferences,
+        saveTheme,
+        saveLanguage,
+    };
+};

package/src/http/axios.js

@@ -0,0 +1,372 @@
+import { showGlobalToast } from '@/utils/toastBridge';
+import { mockManager } from '@api/_mock';
+import { handleMockRequest } from '@api/_mock/handler';
+import aesUtil from '@utils/aesUtil';
+import { getStore, removeStore } from '@utils/storage';
+import axios from 'axios';
+import i18n from '../i18n';
+import { clearObfuscationKey, getObfuscationKey } from './obfuscationKey';
+
+export const API_BASE_URL = `${import.meta.env.VITE_PUBLIC_PATH}${import.meta.env.VITE_API_BASE_URL}`;
+
+export const globeEncryption = Boolean(import.meta.env.VITE_APP_ENCRYPTION) || true;
+
+/**
+ * 获取系统语言请求头值：根据当前国际化语言映射到后端约定的枚举。
+ * - 中文：zh_CN
+ * - 英文：en_US
+ */
+export function getSystemLanguageHeaderValue() {
+  const lng = i18n.language || 'zh';
+  // i18next 常见语言形态：en / en-US / zh / zh-CN
+  if (lng.startsWith('en')) return 'en_US';
+  return 'zh_CN';
+}
+
+const request = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+let isRedirectingToLogin = false;
+
+/** 已是登录页则不再 location 跳转，避免无意义刷新（兼容 BrowserRouter / HashRouter） */
+function isCurrentLoginPage() {
+  const path = window.location.pathname || '';
+  if (/^\/login\/?$/i.test(path)) return true;
+
+  const hash = window.location.hash || '';
+  return /^#\/login(\/|$|\?)/i.test(hash);
+}
+
+function getLoginHref() {
+  return `${window.location.origin}${window.location.pathname}#/login`;
+}
+
+let requestI = aesUtil.genKey(48);
+
+export const ifNeedEncrypt = (config) => {
+  requestI = aesUtil.genKey(48);
+  if (config.noEncryption) {
+    return false;
+  }
+  return globeEncryption;
+};
+
+request.interceptors.request.use(
+  async (config) => {
+    if (mockManager.isEnabled()) {
+      console.log('[Mock] Axios request intercepted:', config.url);
+
+      const mockResponse = await handleMockRequest(config);
+      if (mockResponse) {
+        return Promise.reject({
+          isMock: true,
+          response: mockResponse,
+        });
+      }
+      return config;
+    }
+
+    if (ifNeedEncrypt(config)) {
+      let data = config.data;
+      if (config.method != 'get' && config.method != 'delete') {
+        try {
+          const encryptSuffix = aesUtil.genKey(16);
+          data = {
+            data: aesUtil.encrypt(data, encryptSuffix),
+            i: requestI,
+          };
+        } catch (e) {
+          console.log(e);
+        }
+        config.data = data;
+      }
+    }
+
+    config.headers['System-Language'] = getSystemLanguageHeaderValue();
+
+    const token = getStore('token');
+    if (token) {
+      config.headers['token-agent'] = `${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+request.interceptors.response.use(
+  (response) => {
+    if (response.config.isMock) {
+      return response.data;
+    }
+
+    const config = response.config;
+
+    let data = response.data;
+    // 统一尝试解密：若响应数据为加密字符串则解密，失败则继续使用原数据
+    try {
+      if (typeof response.data === 'string') {
+        const decryptSuffix = getObfuscationKey();
+        data = aesUtil.decrypt(response.data, decryptSuffix);
+        response.data = data;
+      } else if (typeof response.data.data === 'string' && !response.data.code) {
+        const decryptSuffix = getObfuscationKey();
+        data = aesUtil.decrypt(response.data.data, decryptSuffix);
+        response.data = data;
+      }
+    } catch (e) {
+      console.log(e);
+    }
+    if (data.code === undefined) {
+      data.responseHeaders = response.headers;
+      return data;
+    }
+
+    switch (data.code) {
+      case 401:
+        if (!isRedirectingToLogin) {
+          isRedirectingToLogin = true;
+          removeStore('token');
+          clearObfuscationKey();
+          window.dispatchEvent(new CustomEvent('common:unauthorized'));
+          setTimeout(() => {}, 100);
+        }
+        break;
+      case 1803:
+        if (!isRedirectingToLogin) {
+          isRedirectingToLogin = true;
+          removeStore('token');
+          clearObfuscationKey();
+          window.dispatchEvent(new CustomEvent('common:unauthorized'));
+          setTimeout(() => {
+            if (!isCurrentLoginPage()) {
+              window.location.href = getLoginHref();
+            } else {
+              isRedirectingToLogin = false;
+            }
+          }, 100);
+        }
+        break;
+      case 403:
+        if (data.message !== null) {
+          showGlobalToast(data.message, 'error');
+        } else {
+          showGlobalToast('未知错误', 'error');
+        }
+        break;
+      case 500:
+        if (data.message !== null) {
+          showGlobalToast(data.message, 'error');
+        } else {
+          showGlobalToast('未知错误', 'error');
+        }
+        break;
+      // code 200：业务成功由调用方用 i18n/固定文案提示；此处不弹 message，避免与前端成功文案重复
+      case 200:
+        return data;
+      default:
+        if (data.message && data.message != '文件不存在') {
+          showGlobalToast(String(data.message), 'error');
+        }
+        break;
+    }
+    return Promise.reject(data);
+  },
+  async (err) => {
+    if (err?.isMock && err.response) {
+      return Promise.resolve(err.response.data);
+    }
+
+    const response = err.response;
+    if (!response) {
+      if (err.message) {
+        const tempMessage = err.message.replaceAll(' ', '').toLowerCase();
+        if (tempMessage.indexOf('timeout') !== -1) {
+          showGlobalToast(i18n.t('common.request_timeout'), 'error');
+        }
+        if (tempMessage.indexOf('networkerror') !== -1) {
+          showGlobalToast(i18n.t('common.service_error'), 'error');
+        }
+        return Promise.reject(err);
+      }
+      if (err.__CANCEL__) {
+        return Promise.reject(err);
+      }
+      showGlobalToast(String(err), 'error');
+      return Promise.reject(err);
+    }
+    const url = response.config.url;
+    if (url.split('/').length > 2) {
+      showGlobalToast(i18n.t('common.service_error'), 'error');
+      return Promise.reject(err);
+    }
+    showGlobalToast(String(err), 'error');
+    return Promise.reject(err);
+  }
+);
+
+/**
+ * 成功时响应拦截器返回业务体，非 AxiosResponse
+ * @param {string} url
+ * @param {*} params
+ * @param {string} [baseURL]
+ * @returns {Promise<any>}
+ */
+export const axiosGetRequest = (url, params = {}, baseURL) => {
+  return request({
+    method: 'get',
+    url: url,
+    params: params,
+    ...(baseURL && { baseURL: baseURL }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+export const axiosPostRequest = (url, params = {}, config = {}) => {
+  const { signal, headers: extraHeaders } = config
+  return request({
+    method: 'post',
+    url: url,
+    data: params,
+    ...(signal != null ? { signal } : {}),
+    headers: {
+      'Content-Type': 'application/json',
+      ...(extraHeaders || {}),
+    },
+  });
+};
+
+/**
+ * @param {string} url
+ * @param {*} params
+ * @returns {Promise<any>}
+ */
+export const axiosPutRequest = (url, params) => {
+  return request({
+    method: 'put',
+    url: url,
+    data: params,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+/**
+ * @param {string} url
+ * @param {*} params
+ * @returns {Promise<any>}
+ */
+export const axiosPatchRequest = (url, params) => {
+  return request({
+    method: 'patch',
+    url: url,
+    data: params,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+export const axiosDeleteRequest = (url, params = {}) => {
+  return request({
+    method: 'delete',
+    url: url,
+    params: params,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+/**
+ * @param {string} url
+ * @param {*} params
+ * @returns {Promise<any>}
+ */
+export const axiosPostUploadRequest = (url, params) => {
+  return request({
+    method: 'post',
+    url: url,
+    data: params,
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+    noEncryption: true
+  });
+};
+
+/**
+ * 无需token验证的请求 避免旧token过期导致请求失败
+ * @param {string} url
+ * @param {*} params
+ * @returns {Promise<any>}
+ */
+export const getRequestWithNoToken = (url, params) => {
+  return request({
+    method: 'get',
+    url: url,
+    params: params,
+  });
+};
+
+/** 原样导出 axios 实例，供需自定义 config（如 blob、额外 headers）的场景 */
+export { request };
+
+/**
+ * POST JSON 并接收二进制（如导出文件）；成功时拦截器返回 Blob 等业务体
+ */
+export function axiosPostBlob(url, data) {
+  return request({
+    method: 'post',
+    url,
+    data,
+    responseType: 'blob',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}
+
+/**
+ * GET 请求并接收二进制（如导出文件）；成功时拦截器返回 Blob 等业务体
+ * @param {string} url
+ * @param {Record<string, any>} [params]
+ */
+export function axiosGetBlob(url, params = {}) {
+  return request({
+    method: 'get',
+    url,
+    params,
+    responseType: 'blob',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    noEncryption: true,
+  });
+}
+
+export const getDownload = (url, params) => {
+  return request({
+    method: 'get',
+    url: url,
+    params: params,
+    responseType: 'blob'
+  });
+};
+
+export const postDownload = (url, params) => {
+  return request({
+    method: 'post',
+    url: url,
+    data: params,
+    responseType: 'blob'
+  });
+};

package/src/http/mock.interceptor.ts

@@ -0,0 +1,9 @@
+/**
+ * Axios Mock 拦截器 - 用于 http/axios.js
+ * 使用通用处理器 handleMockRequest
+ */
+import type { InternalAxiosRequestConfig, AxiosResponse } from 'axios'
+import { handleMockRequest } from '../api/_mock/handler'
+
+export { handleMockRequest }
+export default handleMockRequest

package/src/http/obfuscationKey.ts

@@ -0,0 +1,41 @@
+import aesUtil from '@utils/aesUtil'
+
+/** 与普通 localStorage 键隔离，且不经过 setStore 的二次加密，避免无意义嵌套 */
+const SESSION_KEY = 'apps-agent-req-obfuscation-i'
+
+let memoryKey: string | null = null
+
+/**
+ * 请求体迷惑字段（如 body.i）：每标签页生成一次后复用，避免拦截器里直接 genKey()。
+ */
+export function getObfuscationKey(): string {
+  if (memoryKey) {
+    return memoryKey
+  }
+  try {
+    const saved = sessionStorage.getItem(SESSION_KEY)
+    if (saved) {
+      memoryKey = saved
+      return memoryKey
+    }
+  } catch {
+    // 隐私模式等
+  }
+  memoryKey = aesUtil.genKey()
+  try {
+    sessionStorage.setItem(SESSION_KEY, memoryKey)
+  } catch {
+    // 仅内存持有
+  }
+  return memoryKey
+}
+
+/** 登出或清会话时调用，下次请求会重新生成 */
+export function clearObfuscationKey(): void {
+  memoryKey = null
+  try {
+    sessionStorage.removeItem(SESSION_KEY)
+  } catch {
+    /* empty */
+  }
+}