feat(core): ai onboarding for edgeless mode (#6556)

packages/frontend/component/src/ui/notification/notification-card.tsx

@@ -15,20 +15,19 @@ import {
 
 export interface NotificationCardProps extends HTMLAttributes<HTMLDivElement> {
   notification: Notification;
-  onDismiss?: () => void;
 }
 
-export const NotificationCard = ({
-  notification,
-  onDismiss,
-}: NotificationCardProps) => {
+export const NotificationCard = ({ notification }: NotificationCardProps) => {
   const {
     theme = 'info',
     style = 'normal',
     icon = <InformationFillDuotoneIcon />,
+    thumb,
     action,
     title,
     footer,
+    alignMessage = 'title',
+    onDismiss,
   } = notification;
 
   const onActionClicked = useCallback(() => {
@@ -49,33 +48,41 @@ export const NotificationCard = ({
       data-with-icon={icon ? '' : undefined}
       className={styles.card}
     >
-      <header className={styles.header}>
-        {icon ? (
-          <div className={clsx(styles.icon, styles.headAlignWrapper)}>
-            {icon}
-          </div>
-        ) : null}
-        <div className={styles.title}>{title}</div>
+      {thumb}
+      <div className={styles.cardInner}>
+        <header className={styles.header}>
+          {icon ? (
+            <div className={clsx(styles.icon, styles.headAlignWrapper)}>
+              {icon}
+            </div>
+          ) : null}
+          <div className={styles.title}>{title}</div>
 
-        {action ? (
-          <div className={clsx(styles.headAlignWrapper, styles.action)}>
-            <Button
-              className={styles.actionButton}
-              onClick={onActionClicked}
-              {...action.buttonProps}
-            >
-              {action.label}
-            </Button>
+          {action ? (
+            <div className={clsx(styles.headAlignWrapper, styles.action)}>
+              <Button
+                className={styles.actionButton}
+                onClick={onActionClicked}
+                {...action.buttonProps}
+              >
+                {action.label}
+              </Button>
+            </div>
+          ) : null}
+          <div
+            data-float={!!thumb}
+            className={clsx(styles.headAlignWrapper, styles.closeButton)}
+          >
+            <IconButton onClick={onDismiss}>
+              <CloseIcon className={styles.closeIcon} width={16} height={16} />
+            </IconButton>
           </div>
-        ) : null}
-        <div className={styles.headAlignWrapper}>
-          <IconButton onClick={onDismiss}>
-            <CloseIcon className={styles.closeIcon} width={16} height={16} />
-          </IconButton>
-        </div>
-      </header>
-      <main className={styles.main}>{notification.message}</main>
-      <footer>{footer}</footer>
+        </header>
+        <main data-align={alignMessage} className={styles.main}>
+          {notification.message}
+        </main>
+        <footer>{footer}</footer>
+      </div>
     </div>
   );
 };

packages/frontend/component/src/ui/notification/notification-center.tsx

@@ -46,12 +46,11 @@ export function NotificationCenter({ width = 380 }: NotificationCenterProps) {
  */
 export function notify(notification: Notification, options?: ExternalToast) {
   return toast.custom(id => {
-    return (
-      <NotificationCard
-        notification={notification}
-        onDismiss={() => toast.dismiss(id)}
-      />
-    );
+    const onDismiss = () => {
+      notification.onDismiss?.();
+      toast.dismiss(id);
+    };
+    return <NotificationCard notification={{ ...notification, onDismiss }} />;
   }, options);
 }
 

packages/frontend/component/src/ui/notification/styles.css.ts

@@ -10,12 +10,14 @@ export const card = style({
   borderRadius: 8,
   borderWidth: 1,
   borderStyle: 'solid',
-  padding: 16,
   boxShadow: cssVar('shadow1'),
   backgroundColor: cardColor,
   borderColor: cardBorderColor,
   color: cardForeground,
 });
+export const cardInner = style({
+  padding: 16,
+});
 
 export const header = style({
   display: 'flex',
@@ -68,17 +70,26 @@ export const actionButton = style({
     boxShadow: 'none !important',
   },
 });
+export const closeButton = style({
+  selectors: {
+    '&[data-float="true"]': {
+      position: 'absolute',
+      top: 16,
+      right: 16,
+    },
+  },
+});
 export const closeIcon = style({
   color: `${cardForeground} !important`,
 });
 
 export const main = style({
   marginTop: 5,
-  fontSize: 14,
+  fontSize: cssVar('fontSm'),
   lineHeight: '22px',
 
   selectors: {
-    '[data-with-icon] &': {
+    '[data-with-icon] &[data-align="title"]': {
       paddingLeft: 34,
     },
   },

packages/frontend/component/src/ui/notification/types.ts

@@ -12,6 +12,7 @@ export interface Notification {
   borderColor?: string;
   background?: string;
   foreground?: string;
+  alignMessage?: 'title' | 'icon';
   action?: {
     label: string;
     onClick: (() => void) | (() => Promise<void>);
@@ -23,10 +24,14 @@ export interface Notification {
   };
 
   // custom slots
+  thumb?: ReactNode;
   title?: ReactNode;
   message?: ReactNode;
   icon?: ReactNode;
   footer?: ReactNode;
+
+  // events
+  onDismiss?: () => void;
 }
 
 export interface NotificationCenterProps {