fix(core): adjust ai onboarding copywriting and local onboarding actions (#6834)

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

@@ -60,7 +60,7 @@ export const title = style({
   color: cssVar('textPrimaryColor'),
 });
 export const description = style({
-  fontSize: cssVar('fontBase'),
+  fontSize: cssVar('fontSm'),
   lineHeight: '24px',
   minHeight: 48,
   fontWeight: 400,
@@ -94,7 +94,7 @@ export const privacyLink = style({
 
 export const footer = style({
   width: '100%',
-  padding: '20px 28px',
+  padding: '20px 28px 20px 24px',
   gap: 12,
   display: 'flex',
   justifyContent: 'space-between',

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

@@ -215,6 +215,7 @@ export const AIOnboardingGeneral = ({
             activeIndex={index}
             itemRenderer={descriptionRenderer}
             transitionDuration={500}
+            preload={5}
           />
         </main>
 

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

@@ -1,5 +1,5 @@
 import { cssVar } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 export const card = style({
   borderRadius: 12,
@@ -34,7 +34,15 @@ export const footerActions = style({
   marginTop: 8,
 });
 
+globalStyle(`${footerActions} > *, ${footerActions}`, {
+  color: `${cssVar('textSecondaryColor')} !important`,
+});
+globalStyle(`${footerActions} > *:last-child`, {
+  color: `${cssVar('textPrimaryColor')} !important`,
+});
+
 export const actionButton = style({
   fontSize: cssVar('fontSm'),
   padding: '0 2px',
+  color: 'inherit !important',
 });

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

@@ -1,4 +1,9 @@
 import { Button, notify } from '@affine/component';
+import {
+  RouteLogic,
+  useNavigateHelper,
+} from '@affine/core/hooks/use-navigate-helper';
+import { AuthService } from '@affine/core/modules/cloud';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { AiIcon } from '@blocksuite/icons';
@@ -27,20 +32,30 @@ const LocalOnboardingAnimation = () => {
 
 const FooterActions = ({ onDismiss }: { onDismiss: () => void }) => {
   const t = useAFFiNEI18N();
+  const authService = useService(AuthService);
+  const loginStatus = useLiveData(authService.session.status$);
+  const loggedIn = loginStatus === 'authenticated';
+  const { jumpToSignIn } = useNavigateHelper();
+
   return (
     <div className={styles.footerActions}>
-      <Button onClick={onDismiss} type="plain" className={styles.actionButton}>
-        <span style={{ color: cssVar('textSecondaryColor') }}>
-          {t['com.affine.ai-onboarding.local.action-dismiss']()}
-        </span>
-      </Button>
       <a href="https://ai.affine.pro" target="_blank" rel="noreferrer">
         <Button className={styles.actionButton} type="plain">
-          <span style={{ color: cssVar('textPrimaryColor') }}>
-            {t['com.affine.ai-onboarding.local.action-learn-more']()}
-          </span>
+          {t['com.affine.ai-onboarding.local.action-learn-more']()}
         </Button>
       </a>
+      {loggedIn ? null : (
+        <Button
+          className={styles.actionButton}
+          type="plain"
+          onClick={() => {
+            onDismiss();
+            jumpToSignIn('/', RouteLogic.REPLACE, {}, { initCloud: 'true' });
+          }}
+        >
+          {t['com.affine.ai-onboarding.local.action-get-started']()}
+        </Button>
+      )}
     </div>
   );
 };

packages/frontend/core/src/hooks/use-navigate-helper.ts

@@ -139,13 +139,22 @@ export function useNavigateHelper() {
     (
       redirectUri?: string,
       logic: RouteLogic = RouteLogic.PUSH,
-      otherOptions?: Omit<NavigateOptions, 'replace'>
+      otherOptions?: Omit<NavigateOptions, 'replace'>,
+      params?: Record<string, string>
     ) => {
+      const searchParams = new URLSearchParams();
+
+      if (redirectUri) {
+        searchParams.set('redirect_uri', encodeURIComponent(redirectUri));
+      }
+
+      if (params) {
+        for (const key in params) searchParams.set(key, params[key]);
+      }
+
       return navigate(
         '/signIn' +
-          (redirectUri
-            ? `?redirect_uri=${encodeURIComponent(redirectUri)}`
-            : ''),
+          (searchParams.toString() ? '?' + searchParams.toString() : ''),
         {
           replace: logic === RouteLogic.REPLACE,
           ...otherOptions,

packages/frontend/i18n/src/resources/en.json

@@ -373,22 +373,22 @@
   "com.affine.ai-onboarding.edgeless.title": "Right-clicking to select content AI",
   "com.affine.ai-onboarding.general.1.description": "Lets you think bigger, create faster, work smarter and save time for every project.",
   "com.affine.ai-onboarding.general.1.title": "Meet AFFiNE AI",
-  "com.affine.ai-onboarding.general.2.description": "Get instant insights to all your questions.",
+  "com.affine.ai-onboarding.general.2.description": "Answer questions, draft docs, visualize ideas - AFFiNE AI can save you time at every possible step. Powered by GPT’s most powerful model.",
   "com.affine.ai-onboarding.general.2.title": "Chat with AFFiNE AI",
-  "com.affine.ai-onboarding.general.3.description": "Perfect tone, spelling, and summaries in seconds.",
+  "com.affine.ai-onboarding.general.3.description": "Get insightful answer to any question, instantly.",
   "com.affine.ai-onboarding.general.3.title": "Edit Inline with AFFiNE AI",
-  "com.affine.ai-onboarding.general.4.description": "From concept to completion, turn ideas into reality.",
-  "com.affine.ai-onboarding.general.4.title": "Make it Real with AFFiNE AI",
+  "com.affine.ai-onboarding.general.4.description": "Expand thinking. Untangle complexity. Breakdown and visualise your content with crafted mindmap and presentable slides with one click.",
+  "com.affine.ai-onboarding.general.4.title": "Make mind-map and Presents with AI",
   "com.affine.ai-onboarding.general.5.description": "Go to <a>{{link}}</a> for learn more details about AFFiNE AI.",
   "com.affine.ai-onboarding.general.5.title": "AFFiNE AI is ready",
   "com.affine.ai-onboarding.general.get-started": "Get Started",
   "com.affine.ai-onboarding.general.next": "Next",
   "com.affine.ai-onboarding.general.prev": "Back",
-  "com.affine.ai-onboarding.general.privacy": "By continuing, you are agreeing to the <a>AFFiNE AI Terms</a>.",
+  "com.affine.ai-onboarding.general.privacy": "By continuing, you are agreeing to our <a>AI Terms</a>.",
   "com.affine.ai-onboarding.general.purchase": "Get Unlimited Usage",
   "com.affine.ai-onboarding.general.skip": "Remind me Later",
   "com.affine.ai-onboarding.general.try-for-free": "Try for Free",
-  "com.affine.ai-onboarding.local.action-dismiss": "Dismiss",
+  "com.affine.ai-onboarding.local.action-get-started": "Get Started",
   "com.affine.ai-onboarding.local.action-learn-more": "Learn More",
   "com.affine.ai-onboarding.local.message": "Lets you think bigger, create faster, work smarter and save time for every project.",
   "com.affine.ai-onboarding.local.title": "Meet AFFiNE AI",