feat(core): improve mixpanel (#7652)

move @affine/core/utils/mixpanel -> @affine/core/mixpanel

now you can debug mixpanel on browser devtool

![CleanShot 2024-07-30 at 17.32.48@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/g3jz87HxbjOJpXV3FPT7/083c1286-39fd-4569-b4d2-e6e84cf2e797.png)

packages/frontend/core/src/components/affine/ai-onboarding/edgeless.dialog.tsx

@@ -1,7 +1,7 @@
 import { Button, FlexWrapper, notify } from '@affine/component';
 import { openSettingModalAtom } from '@affine/core/atoms';
+import { mixpanel } from '@affine/core/mixpanel';
 import { SubscriptionService } from '@affine/core/modules/cloud';
-import { mixpanel } from '@affine/core/utils';
 import { useI18n } from '@affine/i18n';
 import { AiIcon } from '@blocksuite/icons/rc';
 import {

packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx

@@ -1,8 +1,8 @@
 import { Button, IconButton, Modal } from '@affine/component';
 import { openSettingModalAtom } from '@affine/core/atoms';
 import { useBlurRoot } from '@affine/core/hooks/use-blur-root';
+import { mixpanel } from '@affine/core/mixpanel';
 import { AuthService, SubscriptionService } from '@affine/core/modules/cloud';
-import { mixpanel } from '@affine/core/utils';
 import { Trans, useI18n } from '@affine/i18n';
 import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useServices } from '@toeverything/infra';
@@ -117,7 +117,7 @@ export const AIOnboardingGeneral = () => {
       scrollAnchor: 'aiPricingPlan',
     });
     mixpanel.track('PlansViewed', {
-      page: 'whiteboard-editor',
+      page: 'whiteboard editor',
       segment: 'ai onboarding',
       module: 'general',
     });

packages/frontend/core/src/components/affine/auth/oauth.tsx

@@ -1,6 +1,7 @@
 import { notify, Skeleton } from '@affine/component';
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { mixpanel } from '@affine/core/mixpanel';
 import { OAuthProviderType } from '@affine/graphql';
 import { GithubIcon, GoogleDuotoneIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
@@ -8,7 +9,6 @@ import type { ReactElement } from 'react';
 import { useState } from 'react';
 
 import { AuthService, ServerConfigService } from '../../../modules/cloud';
-import { mixpanel } from '../../../utils';
 
 const OAuthProviderMap: Record<
   OAuthProviderType,

packages/frontend/core/src/components/affine/auth/sign-in.tsx

@@ -3,6 +3,7 @@ import { AuthInput, ModalHeader } from '@affine/component/auth-components';
 import { Button } from '@affine/component/ui/button';
 import { authAtom } from '@affine/core/atoms';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { mixpanel } from '@affine/core/mixpanel';
 import { Trans, useI18n } from '@affine/i18n';
 import { ArrowDownBigIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
@@ -12,7 +13,6 @@ import { useCallback, useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { AuthService } from '../../../modules/cloud';
-import { mixpanel } from '../../../utils';
 import { emailRegex } from '../../../utils/email-regex';
 import type { AuthPanelProps } from './index';
 import { OAuth } from './oauth';
@@ -74,7 +74,7 @@ export const SignIn: FC<AuthPanelProps> = ({
           if (hasPassword) {
             setAuthState('signInWithPassword');
           } else {
-            mixpanel.track_forms('SignIn', 'Email', {
+            mixpanel.track('SignIn', {
               email,
             });
             await authService.sendEmailMagicLink(
@@ -92,7 +92,7 @@ export const SignIn: FC<AuthPanelProps> = ({
             challenge,
             searchParams.get('redirect_uri')
           );
-          mixpanel.track_forms('SignUp', 'Email', {
+          mixpanel.track('SignUp', {
             email,
           });
           setAuthState('afterSignUpSendEmail');

packages/frontend/core/src/components/affine/auth/user-plan-button.tsx

@@ -1,5 +1,5 @@
 import { Tooltip } from '@affine/component/ui/tooltip';
-import { mixpanel } from '@affine/core/utils';
+import { mixpanel } from '@affine/core/mixpanel';
 import { SubscriptionPlan } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useServices } from '@toeverything/infra';

packages/frontend/core/src/components/affine/create-workspace-modal/index.tsx

@@ -3,6 +3,7 @@ import type { ConfirmModalProps } from '@affine/component/ui/modal';
 import { ConfirmModal, Modal } from '@affine/component/ui/modal';
 import { authAtom } from '@affine/core/atoms';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { mixpanel } from '@affine/core/mixpanel';
 import { DebugLogger } from '@affine/debug';
 import { apis } from '@affine/electron-api';
 import { WorkspaceFlavour } from '@affine/env/workspace';
@@ -20,7 +21,6 @@ import { useCallback, useLayoutEffect, useState } from 'react';
 import { buildShowcaseWorkspace } from '../../../bootstrap/first-app-data';
 import { AuthService } from '../../../modules/cloud';
 import { _addLocalWorkspace } from '../../../modules/workspace-engine';
-import { mixpanel } from '../../../utils';
 import { CloudSvg } from '../share-page-modal/cloud-svg';
 import * as styles from './index.css';
 
@@ -221,7 +221,7 @@ export const CreateWorkspaceModal = ({
 
   const onConfirmName = useAsyncCallback(
     async (name: string, workspaceFlavour: WorkspaceFlavour) => {
-      mixpanel.track_forms('CreateWorkspaceModel', 'CreateWorkspace', {
+      mixpanel.track('CreateWorkspace', {
         workspaceFlavour,
       });
       if (loading) return;

packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx

@@ -4,6 +4,7 @@ import { Button, IconButton } from '@affine/component/ui/button';
 import { Modal, useConfirmModal } from '@affine/component/ui/modal';
 import { openSettingModalAtom } from '@affine/core/atoms';
 import { useDocCollectionPageTitle } from '@affine/core/hooks/use-block-suite-workspace-page-title';
+import { mixpanel } from '@affine/core/mixpanel';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { WorkspaceQuotaService } from '@affine/core/modules/quota';
 import { i18nTime, Trans, useI18n } from '@affine/i18n';
@@ -32,7 +33,6 @@ import {
 import { encodeStateAsUpdate } from 'yjs';
 
 import { pageHistoryModalAtom } from '../../../atoms/page-history';
-import { mixpanel } from '../../../utils';
 import { BlockSuiteEditor } from '../../blocksuite/block-suite-editor';
 import { StyledEditorModeSwitch } from '../../blocksuite/block-suite-mode-switch/style';
 import {

packages/frontend/core/src/components/affine/quota-reached-modal/cloud-quota-modal.tsx

@@ -1,9 +1,9 @@
 import { ConfirmModal } from '@affine/component/ui/modal';
 import { openQuotaModalAtom, openSettingModalAtom } from '@affine/core/atoms';
+import { mixpanel } from '@affine/core/mixpanel';
 import { UserQuotaService } from '@affine/core/modules/cloud';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { WorkspaceQuotaService } from '@affine/core/modules/quota';
-import { mixpanel } from '@affine/core/utils';
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import bytes from 'bytes';

packages/frontend/core/src/components/affine/setting-modal/account-setting/ai-usage-panel.tsx

@@ -1,12 +1,12 @@
 import { Button, ErrorMessage, Skeleton } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { openSettingModalAtom } from '@affine/core/atoms';
+import { mixpanel } from '@affine/core/mixpanel';
 import {
   ServerConfigService,
   SubscriptionService,
   UserCopilotQuotaService,
 } from '@affine/core/modules/cloud';
-import { mixpanel } from '@affine/core/utils';
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 import { cssVar } from '@toeverything/theme';

packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx

@@ -6,6 +6,7 @@ import {
 import { Avatar } from '@affine/component/ui/avatar';
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { mixpanel } from '@affine/core/mixpanel';
 import { useI18n } from '@affine/i18n';
 import { ArrowRightSmallIcon, CameraIcon } from '@blocksuite/icons/rc';
 import {
@@ -24,7 +25,6 @@ import {
   openSignOutModalAtom,
 } from '../../../../atoms';
 import { AuthService, ServerConfigService } from '../../../../modules/cloud';
-import { mixpanel } from '../../../../utils';
 import { Upload } from '../../../pure/file-upload';
 import { AIUsagePanel } from './ai-usage-panel';
 import { StorageProgress } from './storage-progress';
@@ -38,7 +38,7 @@ export const UserAvatar = () => {
   const handleUpdateUserAvatar = useAsyncCallback(
     async (file: File) => {
       try {
-        mixpanel.track_forms('UpdateProfile', 'UploadAvatar', {
+        mixpanel.track('UploadAvatar', {
           userId: account.id,
         });
         await session.uploadAvatar(file);
@@ -104,7 +104,7 @@ export const AvatarAndName = () => {
     }
 
     try {
-      mixpanel.track_forms('UpdateProfile', 'UpdateUsername', {
+      mixpanel.track('UpdateUsername', {
         userId: account.id,
       });
       await session.updateLabel(input);

packages/frontend/core/src/components/affine/setting-modal/general-setting/about/index.tsx

@@ -5,13 +5,14 @@ import {
   SettingWrapper,
 } from '@affine/component/setting-components';
 import { useAppUpdater } from '@affine/core/hooks/use-app-updater';
+import { mixpanel } from '@affine/core/mixpanel';
 import { useI18n } from '@affine/i18n';
 import { ArrowRightSmallIcon, OpenInNewIcon } from '@blocksuite/icons/rc';
 import { useCallback } from 'react';
 
 import { useAppSettingHelper } from '../../../../../hooks/affine/use-app-setting-helper';
 import { appIconMap, appNames } from '../../../../../pages/open-app';
-import { mixpanel, popupWindow } from '../../../../../utils';
+import { popupWindow } from '../../../../../utils';
 import { relatedLinks } from './config';
 import * as styles from './style.css';
 import { UpdateCheckSection } from './update-check-section';

packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx

@@ -9,6 +9,7 @@ import { Button, IconButton } from '@affine/component/ui/button';
 import { Loading } from '@affine/component/ui/loading';
 import { getUpgradeQuestionnaireLink } from '@affine/core/hooks/affine/use-subscription-notify';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { mixpanel } from '@affine/core/mixpanel';
 import type { InvoicesQuery } from '@affine/graphql';
 import {
   createCustomerPortalMutation,
@@ -32,7 +33,7 @@ import {
 import { useMutation } from '../../../../../hooks/use-mutation';
 import { useQuery } from '../../../../../hooks/use-query';
 import { AuthService, SubscriptionService } from '../../../../../modules/cloud';
-import { mixpanel, mixpanelTrack, popupWindow } from '../../../../../utils';
+import { popupWindow } from '../../../../../utils';
 import { SWRErrorBoundary } from '../../../../pure/swr-error-bundary';
 import { CancelAction, ResumeAction } from '../plans/actions';
 import { AICancel, AIResume, AISubscribe } from '../plans/ai/actions';
@@ -479,7 +480,7 @@ const ResumeSubscription = () => {
     const type = subscription.pro$.value?.plan;
     const category = subscription.pro$.value?.recurring;
     if (type && category) {
-      mixpanelTrack('PlanChangeStarted', {
+      mixpanel.track('PlanChangeStarted', {
         segment: 'settings panel',
         module: 'pricing plan list',
         control: 'paying',

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/actions.tsx

@@ -1,7 +1,7 @@
 import { getDowngradeQuestionnaireLink } from '@affine/core/hooks/affine/use-subscription-notify';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import type { MixpanelEvents } from '@affine/core/mixpanel';
-import { mixpanelTrack } from '@affine/core/utils';
+import { mixpanel } from '@affine/core/mixpanel';
+import type { MixpanelEvents } from '@affine/core/mixpanel/events';
 import { SubscriptionPlan } from '@affine/graphql';
 import { useLiveData, useService } from '@toeverything/infra';
 import { nanoid } from 'nanoid';
@@ -36,7 +36,7 @@ export const CancelAction = ({
 
   useEffect(() => {
     if (!open || !proSubscription) return;
-    mixpanelTrack('PlanChangeStarted', {
+    mixpanel.track('PlanChangeStarted', {
       segment: 'settings panel',
       module,
       control: 'cancel',
@@ -58,7 +58,7 @@ export const CancelAction = ({
       onOpenChange(false);
       const proSubscription = subscription.pro$.value;
       if (proSubscription) {
-        mixpanelTrack('PlanChangeSucceeded', {
+        mixpanel.track('PlanChangeSucceeded', {
           control: 'cancel',
           type: proSubscription.plan,
           category: proSubscription.recurring,
@@ -128,7 +128,7 @@ export const ResumeAction = ({
       onOpenChange(false);
       const proSubscription = subscription.pro$.value;
       if (proSubscription) {
-        mixpanelTrack('PlanChangeSucceeded', {
+        mixpanel.track('PlanChangeSucceeded', {
           control: 'paying',
           type: proSubscription.plan,
           category: proSubscription.recurring,

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/cancel.tsx

@@ -2,9 +2,9 @@ import { Button, type ButtonProps, useConfirmModal } from '@affine/component';
 import { useDowngradeNotify } from '@affine/core/components/affine/subscription-landing/notify';
 import { getDowngradeQuestionnaireLink } from '@affine/core/hooks/affine/use-subscription-notify';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import type { MixpanelEvents } from '@affine/core/mixpanel';
+import { mixpanel } from '@affine/core/mixpanel';
+import type { MixpanelEvents } from '@affine/core/mixpanel/events';
 import { AuthService, SubscriptionService } from '@affine/core/modules/cloud';
-import { mixpanel, mixpanelTrack } from '@affine/core/utils';
 import { SubscriptionPlan } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { useService } from '@toeverything/infra';
@@ -27,7 +27,7 @@ export const AICancel = ({ module, ...btnProps }: AICancelProps) => {
   const cancel = useAsyncCallback(async () => {
     const aiSubscription = subscription.ai$.value;
     if (aiSubscription) {
-      mixpanelTrack('PlanChangeStarted', {
+      mixpanel.track('PlanChangeStarted', {
         module,
         segment: 'settings panel',
         control: 'cancel',

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/resume.tsx

@@ -5,9 +5,9 @@ import {
   useConfirmModal,
 } from '@affine/component';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import type { MixpanelEvents } from '@affine/core/mixpanel';
+import { mixpanel } from '@affine/core/mixpanel';
+import type { MixpanelEvents } from '@affine/core/mixpanel/events';
 import { SubscriptionService } from '@affine/core/modules/cloud';
-import { mixpanelTrack } from '@affine/core/utils';
 import { SubscriptionPlan } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { SingleSelectSelectSolidIcon } from '@blocksuite/icons/rc';
@@ -32,7 +32,7 @@ export const AIResume = ({ module, ...btnProps }: AIResumeProps) => {
   const resume = useAsyncCallback(async () => {
     const aiSubscription = subscription.ai$.value;
     if (aiSubscription) {
-      mixpanelTrack('PlanChangeStarted', {
+      mixpanel.track('PlanChangeStarted', {
         module,
         segment: 'settings panel',
         control: 'paying',
@@ -59,7 +59,7 @@ export const AIResume = ({ module, ...btnProps }: AIResumeProps) => {
           SubscriptionPlan.AI
         );
         if (aiSubscription) {
-          mixpanelTrack('PlanChangeSucceeded', {
+          mixpanel.track('PlanChangeSucceeded', {
             category: aiSubscription.recurring,
             control: 'paying',
             type: aiSubscription.plan,

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/subscribe.tsx

@@ -1,8 +1,9 @@
 import { Button, type ButtonProps, Skeleton } from '@affine/component';
 import { generateSubscriptionCallbackLink } from '@affine/core/hooks/affine/use-subscription-notify';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { mixpanel } from '@affine/core/mixpanel';
 import { AuthService, SubscriptionService } from '@affine/core/modules/cloud';
-import { mixpanel, popupWindow } from '@affine/core/utils';
+import { popupWindow } from '@affine/core/utils';
 import { SubscriptionPlan, SubscriptionRecurring } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx

@@ -2,8 +2,9 @@ import { Button } from '@affine/component/ui/button';
 import { Tooltip } from '@affine/component/ui/tooltip';
 import { generateSubscriptionCallbackLink } from '@affine/core/hooks/affine/use-subscription-notify';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { mixpanel } from '@affine/core/mixpanel';
 import { AuthService, SubscriptionService } from '@affine/core/modules/cloud';
-import { mixpanelTrack, popupWindow } from '@affine/core/utils';
+import { popupWindow } from '@affine/core/utils';
 import type { SubscriptionRecurring } from '@affine/graphql';
 import { SubscriptionPlan, SubscriptionStatus } from '@affine/graphql';
 import { Trans, useI18n } from '@affine/i18n';
@@ -16,7 +17,6 @@ import type { HTMLAttributes, PropsWithChildren } from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { authAtom } from '../../../../../atoms/index';
-import { mixpanel } from '../../../../../utils';
 import { CancelAction, ResumeAction } from './actions';
 import type { DynamicPrice, FixedPrice } from './cloud-plans';
 import { ConfirmLoadingModal } from './modals';
@@ -337,7 +337,7 @@ const ChangeRecurring = ({
   const subscription = useService(SubscriptionService).subscription;
 
   const onStartChange = useCallback(() => {
-    mixpanelTrack('PlanChangeStarted', {
+    mixpanel.track('PlanChangeStarted', {
       segment: 'settings panel',
       module: 'pricing plan list',
       control: 'paying',
@@ -422,7 +422,7 @@ const ResumeButton = () => {
     setOpen(true);
     const pro = subscription.pro$.value;
     if (pro) {
-      mixpanelTrack('PlanChangeStarted', {
+      mixpanel.track('PlanChangeStarted', {
         segment: 'settings panel',
         module: 'pricing plan list',
         control: 'paying',

packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx

@@ -6,6 +6,7 @@ import { Avatar } from '@affine/component/ui/avatar';
 import { Tooltip } from '@affine/component/ui/tooltip';
 import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { useWorkspaceInfo } from '@affine/core/hooks/use-workspace-info';
+import { mixpanel } from '@affine/core/mixpanel';
 import { AuthService } from '@affine/core/modules/cloud';
 import { UserFeatureService } from '@affine/core/modules/cloud/services/user-feature';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
@@ -24,7 +25,6 @@ import { useAtom } from 'jotai/react';
 import { Suspense, useCallback, useEffect, useMemo } from 'react';
 
 import { authAtom } from '../../../../atoms';
-import { mixpanel } from '../../../../utils';
 import { UserPlanButton } from '../../auth/user-plan-button';
 import { useGeneralSettingList } from '../general-setting';
 import type { ActiveTab, WorkspaceSubTab } from '../types';

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/members.tsx

@@ -21,9 +21,9 @@ import { useMemberCount } from '@affine/core/hooks/affine/use-member-count';
 import type { Member } from '@affine/core/hooks/affine/use-members';
 import { useMembers } from '@affine/core/hooks/affine/use-members';
 import { useRevokeMemberPermission } from '@affine/core/hooks/affine/use-revoke-member-permission';
+import { mixpanel } from '@affine/core/mixpanel';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { WorkspaceQuotaService } from '@affine/core/modules/quota';
-import { mixpanel } from '@affine/core/utils';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { Permission } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';

packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx

@@ -4,9 +4,9 @@ import { Button } from '@affine/component/ui/button';
 import { Menu, MenuItem, MenuTrigger } from '@affine/component/ui/menu';
 import { useSharingUrl } from '@affine/core/hooks/affine/use-share-url';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { mixpanel } from '@affine/core/mixpanel';
 import { ServerConfigService } from '@affine/core/modules/cloud';
 import { ShareService } from '@affine/core/modules/share-doc';
-import { mixpanel } from '@affine/core/utils';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { PublicPageMode } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';

packages/frontend/core/src/components/app-sidebar/app-download-button/index.tsx

@@ -1,8 +1,8 @@
+import { mixpanel } from '@affine/core/mixpanel';
 import { CloseIcon, DownloadIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import { useCallback, useState } from 'react';
 
-import { mixpanel } from '../../../utils';
 import * as styles from './index.css';
 
 // Although it is called an input, it is actually a button.

packages/frontend/core/src/components/blocksuite/block-suite-editor/ai/setup-provider.tsx

@@ -2,7 +2,7 @@ import { notify } from '@affine/component';
 import { authAtom, openSettingModalAtom } from '@affine/core/atoms';
 import { AIProvider } from '@affine/core/blocksuite/presets/ai';
 import { toggleGeneralAIOnboarding } from '@affine/core/components/affine/ai-onboarding/apis';
-import { mixpanel } from '@affine/core/utils';
+import { mixpanel } from '@affine/core/mixpanel';
 import {
   getBaseUrl,
   type getCopilotHistoriesQuery,

packages/frontend/core/src/components/blocksuite/block-suite-editor/ai/tracker.ts

@@ -1,5 +1,5 @@
 import { AIProvider } from '@affine/core/blocksuite/presets/ai';
-import { mixpanel } from '@affine/core/utils';
+import { mixpanel } from '@affine/core/mixpanel';
 import type { EditorHost } from '@blocksuite/block-std';
 import type { BlockModel } from '@blocksuite/store';
 import { lowerCase, omit } from 'lodash-es';

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/linked-widget.ts

@@ -1,5 +1,5 @@
+import { mixpanel } from '@affine/core/mixpanel';
 import { WorkspacePropertiesAdapter } from '@affine/core/modules/properties';
-import { mixpanel } from '@affine/core/utils';
 import { I18n, i18nTime } from '@affine/i18n';
 import type { EditorHost } from '@blocksuite/block-std';
 import type { AffineInlineEditor } from '@blocksuite/blocks';

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/root-block.ts

@@ -2,7 +2,7 @@ import {
   AIEdgelessRootBlockSpec,
   AIPageRootBlockSpec,
 } from '@affine/core/blocksuite/presets/ai';
-import { mixpanel } from '@affine/core/utils';
+import { mixpanel } from '@affine/core/mixpanel';
 import type {
   EdgelessRootBlockSpecType,
   PageRootBlockSpecType,
@@ -42,7 +42,7 @@ function withAffineRootService(Service: typeof RootService) {
         eventName: T,
         props: TelemetryEventMap[T]
       ) => {
-        mixpanel.track(eventName, props);
+        mixpanel.track(eventName as string, props as Record<string, unknown>);
       },
     };
   };

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx

@@ -7,6 +7,7 @@ import {
   toReactNode,
   type useConfirmModal,
 } from '@affine/component';
+import { mixpanel } from '@affine/core/mixpanel';
 import { DocsSearchService } from '@affine/core/modules/docs-search';
 import { resolveLinkToDoc } from '@affine/core/modules/navigation';
 import type { PeekViewService } from '@affine/core/modules/peek-view';
@@ -18,7 +19,6 @@ import {
   QuickSearchService,
   RecentDocsQuickSearchSession,
 } from '@affine/core/modules/quicksearch';
-import { mixpanel } from '@affine/core/utils';
 import { DebugLogger } from '@affine/debug';
 import type { BlockSpec, WidgetComponent } from '@blocksuite/block-std';
 import {

packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx

@@ -18,8 +18,8 @@ import { useEnableCloud } from '@affine/core/hooks/affine/use-enable-cloud';
 import { useExportPage } from '@affine/core/hooks/affine/use-export-page';
 import { useTrashModalHelper } from '@affine/core/hooks/affine/use-trash-modal-helper';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { mixpanel } from '@affine/core/mixpanel';
 import { useDetailPageHeaderResponsive } from '@affine/core/pages/workspace/detail-page/use-header-responsive';
-import { mixpanel } from '@affine/core/utils';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useI18n } from '@affine/i18n';
 import {

packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx

@@ -1,5 +1,6 @@
 import { Tooltip } from '@affine/component/ui/tooltip';
 import { useBlockSuiteDocMeta } from '@affine/core/hooks/use-block-suite-page-meta';
+import { mixpanel } from '@affine/core/mixpanel';
 import { useI18n } from '@affine/i18n';
 import {
   type DocMode,
@@ -11,7 +12,7 @@ import type { CSSProperties } from 'react';
 import { useCallback, useEffect } from 'react';
 
 import type { DocCollection } from '../../../shared';
-import { mixpanel, toast } from '../../../utils';
+import { toast } from '../../../utils';
 import { StyledEditorModeSwitch, StyledKeyboardItem } from './style';
 import { EdgelessSwitchItem, PageSwitchItem } from './switch-items';
 

packages/frontend/core/src/components/page-list/components/new-page-button.tsx

@@ -1,6 +1,6 @@
 import { DropdownButton, Menu } from '@affine/component';
 import { BlockCard } from '@affine/component/card/block-card';
-import { mixpanel } from '@affine/core/utils';
+import { mixpanel } from '@affine/core/mixpanel';
 import { useI18n } from '@affine/i18n';
 import { EdgelessIcon, ImportIcon, PageIcon } from '@blocksuite/icons/rc';
 import type { PropsWithChildren } from 'react';

packages/frontend/core/src/components/page-list/docs/page-list-header.tsx

@@ -7,9 +7,9 @@ import {
 } from '@affine/component';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
+import { mixpanel } from '@affine/core/mixpanel';
 import type { Tag } from '@affine/core/modules/tag';
 import { TagService } from '@affine/core/modules/tag';
-import { mixpanel } from '@affine/core/utils';
 import type { Collection } from '@affine/env/filter';
 import { useI18n } from '@affine/i18n';
 import {

packages/frontend/core/src/components/page-list/operation-cell.tsx

@@ -10,10 +10,10 @@ import {
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { useBlockSuiteMetaHelper } from '@affine/core/hooks/affine/use-block-suite-meta-helper';
 import { useTrashModalHelper } from '@affine/core/hooks/affine/use-trash-modal-helper';
+import { mixpanel } from '@affine/core/mixpanel';
 import { FavoriteService } from '@affine/core/modules/favorite';
 import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/properties';
 import { WorkbenchService } from '@affine/core/modules/workbench';
-import { mixpanel } from '@affine/core/utils';
 import type { Collection, DeleteCollectionInfo } from '@affine/env/filter';
 import { useI18n } from '@affine/i18n';
 import {

packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx

@@ -1,6 +1,7 @@
 import { Loading } from '@affine/component';
 import { Divider } from '@affine/component/ui/divider';
 import { MenuItem } from '@affine/component/ui/menu';
+import { mixpanel } from '@affine/core/mixpanel';
 import { AuthService } from '@affine/core/modules/cloud';
 import { useI18n } from '@affine/i18n';
 import { Logo1Icon } from '@blocksuite/icons/rc';
@@ -13,7 +14,6 @@ import { useSetAtom } from 'jotai';
 import { Suspense, useCallback } from 'react';
 
 import { authAtom, openCreateWorkspaceModalAtom } from '../../../../atoms';
-import { mixpanel } from '../../../../utils';
 import { AddWorkspace } from './add-workspace';
 import * as styles from './index.css';
 import { UserAccountItem } from './user-account';

packages/frontend/core/src/components/root-app-sidebar/import-page.tsx

@@ -1,6 +1,6 @@
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { mixpanel } from '@affine/core/mixpanel';
 import { TelemetryWorkspaceContextService } from '@affine/core/modules/telemetry/services/telemetry';
-import { mixpanel } from '@affine/core/utils';
 import { useI18n } from '@affine/i18n';
 import { ImportIcon } from '@blocksuite/icons/rc';
 import { useService } from '@toeverything/infra';

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -1,6 +1,7 @@
 import { openSettingModalAtom } from '@affine/core/atoms';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
+import { mixpanel } from '@affine/core/mixpanel';
 import {
   ExplorerCollections,
   ExplorerFavorites,
@@ -12,7 +13,6 @@ import { ExplorerTags } from '@affine/core/modules/explorer/views/sections/tags'
 import { CMDKQuickSearchService } from '@affine/core/modules/quicksearch/services/cmdk';
 import { TelemetryWorkspaceContextService } from '@affine/core/modules/telemetry/services/telemetry';
 import { pathGenerator } from '@affine/core/shared';
-import { mixpanel } from '@affine/core/utils';
 import { apis, events } from '@affine/electron-api';
 import { useI18n } from '@affine/i18n';
 import { FolderIcon, SettingsIcon } from '@blocksuite/icons/rc';

packages/frontend/core/src/components/root-app-sidebar/user-info.tsx

@@ -14,7 +14,7 @@ import {
   openSettingModalAtom,
   openSignOutModalAtom,
 } from '@affine/core/atoms';
-import { mixpanel } from '@affine/core/utils';
+import { mixpanel } from '@affine/core/mixpanel';
 import { useI18n } from '@affine/i18n';
 import { AccountIcon, SignOutIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';

packages/frontend/core/src/components/workspace-selector/index.tsx

@@ -1,10 +1,10 @@
 import { Menu } from '@affine/component';
+import { mixpanel } from '@affine/core/mixpanel';
 import { useService, WorkspacesService } from '@toeverything/infra';
 import { useAtom } from 'jotai';
 import { useCallback, useEffect } from 'react';
 
 import { openWorkspaceListModalAtom } from '../../atoms';
-import { mixpanel } from '../../utils';
 import { UserWithWorkspaceList } from '../pure/workspace-slider-bar/user-with-workspace-list';
 import { WorkspaceCard } from '../pure/workspace-slider-bar/workspace-card';
 

packages/frontend/core/src/components/workspace-upgrade/upgrade.tsx

@@ -2,12 +2,12 @@ import { Button } from '@affine/component/ui/button';
 import { AffineShapeIcon } from '@affine/core/components/page-list'; // TODO(@eyhn): import from page-list temporarily, need to defined common svg icon/images management.
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
+import { mixpanel } from '@affine/core/mixpanel';
 import { WorkspaceSubPath } from '@affine/core/shared';
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import { useState } from 'react';
 
-import { mixpanel } from '../../utils';
 import * as styles from './upgrade.css';
 import { ArrowCircleIcon, HeartBreakIcon } from './upgrade-icon';