feat: actively invalidate cdn cache

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: [

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",

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({

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();

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}>

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

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);
+}

src/services/cplx-api/cplx-api.ts

@@ -15,14 +15,17 @@ 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";
 
 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;
+}

src/services/cs-loader-registry.ts

@@ -49,6 +49,7 @@ export const LOADER_IDS = [
 
   "store:colorScheme",
 
+  "csui:initializing-indicator",
   "csui:root",
 ] as const;
 

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>;

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;