Intercom user id (#675)

src/components/App/hooks/intercom.tsx

@@ -1,19 +1,41 @@
-import { Intercom } from "@intercom/messenger-js-sdk";
+import { Intercom, update } from "@intercom/messenger-js-sdk";
+import { useEffect, useMemo, useRef } from "react";
+import { useLocation } from "wouter";
 import { useCloudStore } from "~/stores/cloud";
 
 export function useIntercom() {
+	const [location] = useLocation();
+	const initialize = useRef(true);
+
 	const authState = useCloudStore((s) => s.authState);
 	const profile = useCloudStore((s) => s.profile);
+	const userId = useCloudStore((s) => s.userId);
 
 	const isReady = authState !== "unknown" && authState !== "loading";
 
-	if (isReady && !import.meta.env.DEV) {
-		Intercom({
-			app_id: import.meta.env.VITE_INTERCOM_APP_ID,
-			user_id: profile.username || undefined,
+	const metadata = useMemo(
+		() => ({
+			user_id: userId || undefined,
 			name: profile.name || undefined,
 			avatar: profile.picture || undefined,
 			user_hash: profile.user_hmac || undefined,
-		});
-	}
+		}),
+		[profile, userId],
+	);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: Track location change
+	useEffect(() => {
+		if (!isReady) return;
+
+		if (initialize.current) {
+			Intercom({
+				app_id: import.meta.env.VITE_INTERCOM_APP_ID,
+				...metadata,
+			});
+
+			initialize.current = false;
+		} else {
+			update(metadata);
+		}
+	}, [isReady, location, metadata]);
 }

src/screens/surrealist/cloud-panel/api/auth.tsx

@@ -204,7 +204,8 @@ export async function refreshAccess() {
  */
 export async function acquireSession(accessToken: string) {
 	try {
-		const { setSessionToken, setAuthProvider, setSessionExpired } = useCloudStore.getState();
+		const { setSessionToken, setAuthProvider, setUserId, setSessionExpired } =
+			useCloudStore.getState();
 		const referralCode = sessionStorage.getItem(REFERRER_KEY);
 
 		adapter.log("Cloud", "Acquiring cloud session");
@@ -222,6 +223,8 @@ export async function acquireSession(accessToken: string) {
 
 		setSessionToken(result.token);
 		setAuthProvider(result.provider);
+		setUserId(result.id);
+
 		await updateCloudInformation();
 
 		adapter.log("Cloud", `Session acquired`);

src/screens/surrealist/views/query/ResultPane/index.tsx

@@ -190,6 +190,7 @@ export function ResultPane({ activeTab, selection, editor, corners }: ResultPane
 							variant="light"
 							size="xs"
 							radius="sm"
+							color="slate"
 							leftSection={<Icon path={iconUpload} />}
 							disabled={!canExport}
 						>

src/stores/cloud.tsx

@@ -32,6 +32,7 @@ export type CloudStore = {
 	authState: AuthState;
 	sessionToken: string;
 	authProvider: string;
+	userId: string;
 	isSupported: boolean;
 	profile: CloudProfile;
 	instanceVersions: string[];
@@ -48,6 +49,7 @@ export type CloudStore = {
 
 	setLoading: () => void;
 	setSessionToken: (token: string) => void;
+	setUserId: (id: string) => void;
 	setAuthProvider: (provider: string) => void;
 	setAccountProfile: (profile: CloudProfile) => void;
 	setIsSupported: (supported: boolean) => void;
@@ -67,6 +69,7 @@ export const useCloudStore = create<CloudStore>()(
 	immer((set) => ({
 		authState: "unknown",
 		sessionToken: "",
+		userId: "",
 		authProvider: "",
 		isSupported: true,
 		profile: EMPTY_PROFILE,
@@ -89,6 +92,11 @@ export const useCloudStore = create<CloudStore>()(
 				sessionToken: token,
 			}),
 
+		setUserId: (id) =>
+			set({
+				userId: id,
+			}),
+
 		setAuthProvider: (provider) =>
 			set({
 				authProvider: provider,

src/types.tsx

@@ -489,6 +489,7 @@ export interface Driver {
 }
 
 export interface CloudSignin {
+	id: string;
 	token: string;
 	provider: string;
 	terms_accepted_at?: string;