fix(core): ai related copywritting fix (#6766)

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

@@ -19,3 +19,15 @@ export const thumbContent = style({
   width: 'calc(100% + 4px)',
   height: 'calc(100% + 4px)',
 });
+
+export const actionButton = style({
+  fontWeight: 500,
+  fontSize: cssVar('fontSm'),
+  lineHeight: '22px',
+});
+export const getStartedButtonText = style({
+  color: cssVar('textSecondaryColor'),
+});
+export const purchaseButtonText = style({
+  color: cssVar('textPrimaryColor'),
+});

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

@@ -1,5 +1,6 @@
-import { notify } from '@affine/component';
+import { Button, FlexWrapper, notify } from '@affine/component';
 import { openSettingModalAtom } from '@affine/core/atoms';
+import { SubscriptionService } from '@affine/core/modules/cloud';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { AiIcon } from '@blocksuite/icons';
@@ -10,10 +11,10 @@ import {
   WorkspaceService,
 } from '@toeverything/infra';
 import { cssVar } from '@toeverything/theme';
-import { useAtomValue } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 import Lottie from 'lottie-react';
 import { useTheme } from 'next-themes';
-import { useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import * as styles from './edgeless.dialog.css';
 import mouseTrackDark from './lottie/edgeless/mouse-track-dark.json';
@@ -47,22 +48,34 @@ const EdgelessOnboardingAnimation = () => {
 export const AIOnboardingEdgeless = ({
   onDismiss,
 }: BaseAIOnboardingDialogProps) => {
-  const { workspaceService, docService } = useServices({
+  const { workspaceService, docService, subscriptionService } = useServices({
     WorkspaceService,
     DocService,
+    SubscriptionService,
   });
 
   const t = useAFFiNEI18N();
   const notifyId = useLiveData(edgelessNotifyId$);
   const generalAIOnboardingOpened = useLiveData(showAIOnboardingGeneral$);
+  const aiSubscription = useLiveData(subscriptionService.subscription.ai$);
   const settingModalOpen = useAtomValue(openSettingModalAtom);
   const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
   const isCloud =
     workspaceService.workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD;
 
+  const setSettingModal = useSetAtom(openSettingModalAtom);
+
   const doc = docService.doc;
   const mode = useLiveData(doc.mode$);
 
+  const goToPricingPlans = useCallback(() => {
+    setSettingModal({
+      open: true,
+      activeTab: 'plans',
+      scrollAnchor: 'aiPricingPlan',
+    });
+  }, [setSettingModal]);
+
   useEffect(() => {
     if (settingModalOpen.open) return;
     if (generalAIOnboardingOpened) return;
@@ -83,13 +96,46 @@ export const AIOnboardingEdgeless = ({
           thumb: <EdgelessOnboardingAnimation />,
           alignMessage: 'icon',
           onDismiss,
+          footer: (
+            <FlexWrapper marginTop={8} justifyContent="flex-end" gap="12px">
+              <Button
+                onClick={() => {
+                  notify.dismiss(id);
+                  onDismiss();
+                }}
+                type="plain"
+                className={styles.actionButton}
+              >
+                <span className={styles.getStartedButtonText}>
+                  {t['com.affine.ai-onboarding.edgeless.get-started']()}
+                </span>
+              </Button>
+              {aiSubscription ? null : (
+                <Button
+                  className={styles.actionButton}
+                  type="plain"
+                  onClick={() => {
+                    goToPricingPlans();
+                    notify.dismiss(id);
+                    onDismiss();
+                  }}
+                >
+                  <span className={styles.purchaseButtonText}>
+                    {t['com.affine.ai-onboarding.edgeless.purchase']()}
+                  </span>
+                </Button>
+              )}
+            </FlexWrapper>
+          ),
         },
         { duration: 1000 * 60 * 10 }
       );
       edgelessNotifyId$.next(id);
     }, 1000);
   }, [
+    aiSubscription,
     generalAIOnboardingOpened,
+    goToPricingPlans,
     isCloud,
     mode,
     notifyId,

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

@@ -229,7 +229,7 @@ export const AIOnboardingGeneral = ({
               a: (
                 <a
                   className={styles.privacyLink}
-                  href="https://ai.affine.pro"
+                  href="https://affine.pro/terms"
                 />
               ),
             }}