Chrome extension: Force update (#8575)

* Chrome extension: Force update

* Rework wording

* fix font size

extension/app/background.ts

@@ -1,3 +1,6 @@
+import type { PendingUpdate } from "@extension/lib/storage";
+import { savePendingUpdate } from "@extension/lib/storage";
+
 import {
   AUTH0_AUDIENCE,
   AUTH0_CLIENT_DOMAIN,
@@ -14,6 +17,17 @@ import { generatePKCE } from "./src/lib/utils";
 
 const log = console.error;
 
+/**
+ * Listener for force update mechanism.
+ */
+chrome.runtime.onUpdateAvailable.addListener(async (details) => {
+  const pendingUpdate: PendingUpdate = {
+    version: details.version,
+    detectedAt: Date.now(),
+  };
+  await savePendingUpdate(pendingUpdate);
+});
+
 /**
  * Listener to open/close the side panel when the user clicks on the extension icon.
  */

extension/app/src/components/auth/ProtectedRoute.tsx

@@ -1,9 +1,15 @@
-import { Spinner } from "@dust-tt/sparkle";
+import {
+  Button,
+  LogoHorizontalColorLogo,
+  Page,
+  Spinner,
+} from "@dust-tt/sparkle";
 import type { LightWorkspaceType } from "@dust-tt/types";
 import { useAuth } from "@extension/components/auth/AuthProvider";
 import type { StoredUser } from "@extension/lib/storage";
+import { getPendingUpdate } from "@extension/lib/storage";
 import type { ReactNode } from "react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 type ProtectedRouteProps = {
@@ -27,6 +33,7 @@ export const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
   } = useAuth();
 
   const navigate = useNavigate();
+  const [isLatestVersion, setIsLatestVersion] = useState(true);
 
   useEffect(() => {
     if (!isAuthenticated || !isUserSetup || !user || !workspace) {
@@ -35,6 +42,26 @@ export const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
     }
   }, [navigate, isLoading, isAuthenticated, isUserSetup, user, workspace]);
 
+  const checkIsLatestVersion = async () => {
+    const pendingUpdate = await getPendingUpdate();
+    if (!pendingUpdate) {
+      return null;
+    }
+    if (pendingUpdate.version > chrome.runtime.getManifest().version) {
+      setIsLatestVersion(false);
+    }
+  };
+
+  useEffect(() => {
+    void checkIsLatestVersion();
+
+    chrome.storage.local.onChanged.addListener((changes) => {
+      if (changes.pendingUpdate) {
+        void checkIsLatestVersion();
+      }
+    });
+  }, []);
+
   if (isLoading || !isAuthenticated || !isUserSetup || !user || !workspace) {
     return (
       <div className="flex h-screen flex-col gap-2 p-4">
@@ -45,6 +72,26 @@ export const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
     );
   }
 
+  if (!isLatestVersion) {
+    return (
+      <div className="flex h-screen flex-col gap-2 p-4">
+        <div className="flex h-full w-full flex-col items-center justify-center gap-4 text-center">
+          <div className="flex flex-col items-center text-center space-y-4">
+            <LogoHorizontalColorLogo className="h-6 w-24" />
+            <Page.Header title="Update required" />
+          </div>
+          <Page.SectionHeader title="Panel closes after update. Click Dust icon in toolbar to return." />
+          <Button
+            label="Update now"
+            onClick={async () => {
+              chrome.runtime.reload();
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="flex h-screen flex-col gap-2 p-4">
       {typeof children === "function"

extension/app/src/components/conversation/AgentMessage.tsx

@@ -8,7 +8,6 @@ import type {
   AgentMessagePublicType,
   AgentMessageSuccessEvent,
   GenerationTokensEvent,
-  HeartbeatEvent,
   LightWorkspaceType,
   RetrievalActionPublicType,
   RetrievalDocumentPublicType,

extension/app/src/css/custom.css

@@ -1,4 +1,8 @@
+html {
+  font-size: 14px;
+}
+
 body {
   font-family: darkmode-off-cc, sans-serif;
-  font-size: 14px;
+  font-size: 100%;
 }

extension/app/src/lib/storage.ts

@@ -105,6 +105,25 @@ export const getStoredUser = async (): Promise<StoredUser | null> => {
   return result.user ?? null;
 };
 
+/**
+ * Store version for force update.
+ */
+
+export type PendingUpdate = {
+  version: string;
+  detectedAt: number;
+};
+export const savePendingUpdate = async (
+  pendingUpdate: PendingUpdate
+): Promise<PendingUpdate> => {
+  await chrome.storage.local.set({ pendingUpdate });
+  return pendingUpdate;
+};
+export const getPendingUpdate = async (): Promise<PendingUpdate | null> => {
+  const result = await chrome.storage.local.get(["pendingUpdate"]);
+  return result.pendingUpdate ?? null;
+};
+
 /**
  * Clear all stored data.
  */