diff --git a/packages/frontend/core/src/components/affine/ai-onboarding/apis.ts b/packages/frontend/core/src/components/affine/ai-onboarding/apis.ts new file mode 100644 index 0000000000000..2150df330ab83 --- /dev/null +++ b/packages/frontend/core/src/components/affine/ai-onboarding/apis.ts @@ -0,0 +1,38 @@ +import { AIOnboardingType } from './type'; + +function createStorageEvent(key: string, newValue: string) { + const event = new StorageEvent('storage', { + key, + newValue, + oldValue: localStorage.getItem(key), + storageArea: localStorage, + }); + window.dispatchEvent(event); +} + +const setItem = function (key: string, value: string) { + const oldValue = localStorage.getItem(key); + localStorage.setItem.call(localStorage, key, value); + if (oldValue !== value) createStorageEvent(key, value); +}; + +/** + * Show/Hide AI onboarding manually + */ +export const toggleGeneralAIOnboarding = (show = true) => { + setItem(AIOnboardingType.GENERAL, show ? 'false' : 'true'); +}; + +/** + * Show/Hide local AI toast manually + */ +export const toggleLocalAIOnboarding = (show = true) => { + setItem(AIOnboardingType.LOCAL, show ? 'false' : 'true'); +}; + +/** + * Show/Hide edgeless AI toast manually + */ +export const toggleEdgelessAIOnboarding = (show = true) => { + setItem(AIOnboardingType.EDGELESS, show ? 'false' : 'true'); +}; diff --git a/packages/frontend/core/src/components/affine/ai-onboarding/edgeless.dialog.tsx b/packages/frontend/core/src/components/affine/ai-onboarding/edgeless.dialog.tsx index e4c6096f32645..c2495154dba03 100644 --- a/packages/frontend/core/src/components/affine/ai-onboarding/edgeless.dialog.tsx +++ b/packages/frontend/core/src/components/affine/ai-onboarding/edgeless.dialog.tsx @@ -2,7 +2,6 @@ import { Button, FlexWrapper, notify } from '@affine/component'; import { openSettingModalAtom } from '@affine/core/atoms'; import { SubscriptionService } from '@affine/core/modules/cloud'; import { mixpanel } from '@affine/core/utils'; -import { WorkspaceFlavour } from '@affine/env/workspace'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { AiIcon } from '@blocksuite/icons'; import { @@ -17,6 +16,7 @@ import Lottie from 'lottie-react'; import { useTheme } from 'next-themes'; import { useCallback, useEffect, useMemo, useRef } from 'react'; +import { toggleEdgelessAIOnboarding } from './apis'; import * as styles from './edgeless.dialog.css'; import mouseTrackDark from './lottie/edgeless/mouse-track-dark.json'; import mouseTrackLight from './lottie/edgeless/mouse-track-light.json'; @@ -25,7 +25,6 @@ import { localNotifyId$, showAIOnboardingGeneral$, } from './state'; -import type { BaseAIOnboardingDialogProps } from './type'; const EdgelessOnboardingAnimation = () => { const { resolvedTheme } = useTheme(); @@ -46,10 +45,8 @@ const EdgelessOnboardingAnimation = () => { ); }; -export const AIOnboardingEdgeless = ({ - onDismiss, -}: BaseAIOnboardingDialogProps) => { - const { workspaceService, docService, subscriptionService } = useServices({ +export const AIOnboardingEdgeless = () => { + const { docService, subscriptionService } = useServices({ WorkspaceService, DocService, SubscriptionService, @@ -61,8 +58,6 @@ export const AIOnboardingEdgeless = ({ const aiSubscription = useLiveData(subscriptionService.subscription.ai$); const settingModalOpen = useAtomValue(openSettingModalAtom); const timeoutRef = useRef>(); - const isCloud = - workspaceService.workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD; const setSettingModal = useSetAtom(openSettingModalAtom); @@ -87,7 +82,6 @@ export const AIOnboardingEdgeless = ({ if (generalAIOnboardingOpened) return; if (notifyId) return; if (mode !== 'edgeless') return; - if (!isCloud) return; clearTimeout(timeoutRef.current); timeoutRef.current = setTimeout(() => { // try to close local onboarding @@ -101,13 +95,13 @@ export const AIOnboardingEdgeless = ({ iconColor: cssVar('processingColor'), thumb: , alignMessage: 'icon', - onDismiss, + onDismiss: () => toggleEdgelessAIOnboarding(false), footer: (