From 1be0f74cfa54c5d4e08b448e743001d4968c89cc Mon Sep 17 00:00:00 2001
From: Pham Ngoc Duong <pnd280@gmail.com>
Date: Sun, 5 Jan 2025 08:49:52 +0700
Subject: [PATCH] feat: actively invalidate cdn cache

---
 src/app.config.ts                             |  4 +-
 .../language-models.ts                        |  6 +++
 src/entrypoints/background/listeners.ts       |  8 ++++
 src/entrypoints/content-scripts/index.ts      |  4 ++
 .../cs-ui-plugins-loader/setup-root.tsx       | 12 +++++
 .../content-scripts/loaders/index.ts          |  2 +-
 .../content-scripts/loading-indicator.ts      | 45 +++++++++++++++++++
 src/services/cplx-api/cplx-api.ts             | 28 ++++++++++--
 src/services/cs-loader-registry.ts            |  1 +
 .../extension-local-storage.types.ts          |  1 +
 .../storage-defaults.ts                       |  1 +
 11 files changed, 105 insertions(+), 7 deletions(-)
 create mode 100644 src/entrypoints/content-scripts/loading-indicator.ts

diff --git a/src/app.config.ts b/src/app.config.ts
index f85204d4..1c66b295 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -9,7 +9,7 @@ const EnvVarsSchema = z.object({
     .enum(["chrome", "firefox"])
     .optional()
     .default("chrome"),
-  VITE_CPLX_API_URL: z.string(),
+  VITE_CPLX_CDN_URL: z.string(),
   DEV: z.string().or(z.boolean()).optional(),
 });
 
@@ -19,7 +19,7 @@ const APP_CONFIG = {
   VERSION: packageJson.version,
   BROWSER: parsedEnv.VITE_TARGET_BROWSER,
   IS_DEV: Boolean(parsedEnv.DEV) || parsedEnv.NODE_ENV === "development",
-  CPLX_API_URL: parsedEnv.VITE_CPLX_API_URL,
+  CPLX_CDN_URL: parsedEnv.VITE_CPLX_CDN_URL,
   "perplexity-ai": {
     globalMatches: ["https://www.perplexity.ai/*", "https://perplexity.ai/*"],
     globalExcludeMatches: [
diff --git a/src/data/plugins/query-box/language-model-selector/language-models.ts b/src/data/plugins/query-box/language-model-selector/language-models.ts
index 46f99929..0e04a903 100644
--- a/src/data/plugins/query-box/language-model-selector/language-models.ts
+++ b/src/data/plugins/query-box/language-model-selector/language-models.ts
@@ -21,6 +21,12 @@ export const localLanguageModels = [
     code: "claude35haiku",
     provider: "Anthropic",
   },
+  {
+    label: "O1",
+    shortLabel: "O1",
+    code: "o1",
+    provider: "OpenAI",
+  },
   {
     label: "GPT-4 Omni",
     shortLabel: "GPT-4o",
diff --git a/src/entrypoints/background/listeners.ts b/src/entrypoints/background/listeners.ts
index 7eb6d3dc..11c836d7 100644
--- a/src/entrypoints/background/listeners.ts
+++ b/src/entrypoints/background/listeners.ts
@@ -20,6 +20,14 @@ export function setupBackgroundListeners() {
     else chrome.runtime.openOptionsPage();
   });
 
+  chrome.runtime.onInstalled.addListener(({ reason }) => {
+    if (reason !== chrome.runtime.OnInstalledReason.UPDATE) return;
+
+    ExtensionLocalStorageService.set((draft) => {
+      draft.cdnLastUpdated = Date.now();
+    });
+  });
+
   chrome.runtime.onInstalled.addListener(({ reason, previousVersion }) => {
     if (reason === chrome.runtime.OnInstalledReason.INSTALL) {
       chrome.tabs.create({
diff --git a/src/entrypoints/content-scripts/index.ts b/src/entrypoints/content-scripts/index.ts
index d6f6e665..6a55d92c 100644
--- a/src/entrypoints/content-scripts/index.ts
+++ b/src/entrypoints/content-scripts/index.ts
@@ -1,9 +1,13 @@
 import "@/utils/jquery.extensions";
 
+import { showInitializingIndicator } from "@/entrypoints/content-scripts/loading-indicator";
 import { CsLoaderRegistry } from "@/services/cs-loader-registry";
 import { contentScriptGuard } from "@/utils/content-scripts-guard";
+
 import "@/entrypoints/content-scripts/loaders";
 
+$(showInitializingIndicator);
+
 contentScriptGuard();
 
 CsLoaderRegistry.executeAll();
diff --git a/src/entrypoints/content-scripts/loaders/cs-ui-plugins-loader/setup-root.tsx b/src/entrypoints/content-scripts/loaders/cs-ui-plugins-loader/setup-root.tsx
index f000906c..6879994e 100644
--- a/src/entrypoints/content-scripts/loaders/cs-ui-plugins-loader/setup-root.tsx
+++ b/src/entrypoints/content-scripts/loaders/cs-ui-plugins-loader/setup-root.tsx
@@ -25,6 +25,18 @@ CsLoaderRegistry.register({
     const root = createRoot($root[0]);
     const router = createRouter();
 
+    setTimeout(() => {
+      $("#cplx-initializing-indicator div")
+        .removeClass("tw-animate-in tw-fade-in")
+        .addClass("tw-animate-out tw-fade-out tw-duration-1000");
+
+      $("#cplx-initializing-indicator-style").remove();
+
+      setTimeout(() => {
+        $("#cplx-initializing-indicator").remove();
+      }, 200);
+    }, 500);
+
     root.render(
       <QueryClientProvider client={queryClient}>
         <I18nextProvider i18n={i18n}>
diff --git a/src/entrypoints/content-scripts/loaders/index.ts b/src/entrypoints/content-scripts/loaders/index.ts
index 97b6e11b..87276415 100644
--- a/src/entrypoints/content-scripts/loaders/index.ts
+++ b/src/entrypoints/content-scripts/loaders/index.ts
@@ -42,7 +42,7 @@ import "@/features/plugins/hide-get-mobile-app-cta-btn/hide-get-mobile-app-cta-b
 import "@/features/plugins/zen-mode/zen-mode";
 import "@/features/plugins/block-analytic-events/network-intercept-middlewares";
 
-// Global Store
+// Global Stores
 import "@/data/color-scheme-store";
 
 // Loaders
diff --git a/src/entrypoints/content-scripts/loading-indicator.ts b/src/entrypoints/content-scripts/loading-indicator.ts
new file mode 100644
index 00000000..5e8173f4
--- /dev/null
+++ b/src/entrypoints/content-scripts/loading-indicator.ts
@@ -0,0 +1,45 @@
+import csUiRootCss from "@/assets/cs.css?inline";
+import { getCookie } from "@/utils/utils";
+
+export function showInitializingIndicator() {
+  const rawColorScheme = getCookie("colorScheme");
+  const colorScheme =
+    rawColorScheme === "light" || rawColorScheme === "dark"
+      ? rawColorScheme
+      : null;
+
+  if (colorScheme === null) {
+    const preferredColorScheme = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    ).matches
+      ? "dark"
+      : "light";
+
+    $("html").attr("data-color-scheme", preferredColorScheme);
+  } else {
+    $("html").attr("data-color-scheme", colorScheme);
+  }
+
+  const $tempStyle = $("<style>")
+    .attr("id", "cplx-initializing-indicator-style")
+    .text(csUiRootCss);
+
+  const $indicator = $("<div>")
+    .attr("id", "cplx-initializing-indicator")
+    .addClass("tw-fixed tw-left-1/2 tw-top-8 -tw-translate-x-1/2")
+    .append(
+      $("<div>")
+        .addClass(
+          "tw-rounded-md tw-border tw-border-border/50 tw-bg-secondary tw-p-2 tw-shadow-md tw-animate-in tw-fade-in tw-text-muted-foreground tw-text-sm tw-px-4 tw-flex tw-items-center tw-gap-2",
+        )
+        .append(
+          $(
+            `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>`,
+          ).addClass("tw-animate-spin"),
+        )
+        .append("Initializing..."),
+    );
+
+  $tempStyle.appendTo(document.head);
+  $indicator.appendTo(document.body);
+}
diff --git a/src/services/cplx-api/cplx-api.ts b/src/services/cplx-api/cplx-api.ts
index bec7d012..93236ce8 100644
--- a/src/services/cplx-api/cplx-api.ts
+++ b/src/services/cplx-api/cplx-api.ts
@@ -15,6 +15,7 @@ import {
   CplxFeatureFlagsSchema,
 } from "@/services/cplx-api/feature-flags/cplx-feature-flags.types";
 import { cplxApiQueries } from "@/services/cplx-api/query-keys";
+import { ExtensionLocalStorageService } from "@/services/extension-local-storage/extension-local-storage";
 import { queryClient } from "@/utils/ts-query-client";
 import { fetchResource, jsonUtils } from "@/utils/utils";
 
@@ -22,7 +23,9 @@ export class CplxApiService {
   static async fetchVersions(): Promise<CplxVersions> {
     const parsedData = CplxVersionsApiResponseSchema.parse(
       JSON.parse(
-        await fetchResource(`${APP_CONFIG.CPLX_API_URL}/versions.json`),
+        await fetchResource(
+          `${APP_CONFIG.CPLX_CDN_URL}/versions.json?t=${getTParam()}`,
+        ),
       ),
     );
 
@@ -53,7 +56,7 @@ export class CplxApiService {
     return CplxFeatureFlagsSchema.parse(
       JSON.parse(
         await fetchResource(
-          `${APP_CONFIG.CPLX_API_URL}/feature-flags/${versionUrl}.json`,
+          `${APP_CONFIG.CPLX_CDN_URL}/feature-flags/${versionUrl}.json?t=${getTParam()}`,
         ),
       ),
     );
@@ -116,7 +119,7 @@ export class CplxApiService {
       .parse(
         jsonUtils.safeParse(
           await fetchResource(
-            `${APP_CONFIG.CPLX_API_URL}/language-models.json`,
+            `${APP_CONFIG.CPLX_CDN_URL}/language-models.json?t=${getTParam()}`,
           ),
         ),
       );
@@ -137,7 +140,7 @@ export class CplxApiService {
         : versions?.latest);
 
     const resp = await fetch(
-      `${APP_CONFIG.CPLX_API_URL}/changelogs/${versionUrl}.md`,
+      `${APP_CONFIG.CPLX_CDN_URL}/changelogs/${versionUrl}.md?t=${getTParam()}`,
     );
 
     if (resp.status === 404) {
@@ -147,3 +150,20 @@ export class CplxApiService {
     return resp.text();
   }
 }
+
+function getTParam() {
+  const extensionLocalStorage = ExtensionLocalStorageService.getCachedSync();
+  const cdnLastUpdated = extensionLocalStorage.cdnLastUpdated;
+
+  const nowInMilliseconds = Date.now();
+  const oneHourInMilliseconds = 1000 * 60 * 60;
+
+  if (nowInMilliseconds - cdnLastUpdated > oneHourInMilliseconds) {
+    ExtensionLocalStorageService.set((draft) => {
+      draft.cdnLastUpdated = nowInMilliseconds;
+    });
+    return nowInMilliseconds;
+  }
+
+  return cdnLastUpdated;
+}
diff --git a/src/services/cs-loader-registry.ts b/src/services/cs-loader-registry.ts
index f64e06c3..313c137a 100644
--- a/src/services/cs-loader-registry.ts
+++ b/src/services/cs-loader-registry.ts
@@ -49,6 +49,7 @@ export const LOADER_IDS = [
 
   "store:colorScheme",
 
+  "csui:initializing-indicator",
   "csui:root",
 ] as const;
 
diff --git a/src/services/extension-local-storage/extension-local-storage.types.ts b/src/services/extension-local-storage/extension-local-storage.types.ts
index 244751c4..6da98da7 100644
--- a/src/services/extension-local-storage/extension-local-storage.types.ts
+++ b/src/services/extension-local-storage/extension-local-storage.types.ts
@@ -15,6 +15,7 @@ export const ExtensionLocalStorageSchema = z.object({
   preloadTheme: z.boolean(),
   energySavingMode: z.boolean(),
   extensionIconAction: z.enum(EXTENSION_ICON_ACTIONS),
+  cdnLastUpdated: z.number(),
 });
 
 export type ExtensionLocalStorage = z.infer<typeof ExtensionLocalStorageSchema>;
diff --git a/src/services/extension-local-storage/storage-defaults.ts b/src/services/extension-local-storage/storage-defaults.ts
index 50960b06..3d8f7d17 100644
--- a/src/services/extension-local-storage/storage-defaults.ts
+++ b/src/services/extension-local-storage/storage-defaults.ts
@@ -116,4 +116,5 @@ export const DEFAULT_STORAGE: ExtensionLocalStorage = {
   theme: "complexity",
   energySavingMode: false,
   extensionIconAction: "perplexity",
+  cdnLastUpdated: 0,
 } as const;