feat(core): add local ai onboarding dialog (#6600)

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

@@ -30,6 +30,7 @@ export const NotificationCard = ({ notification }: NotificationCardProps) => {
     footer,
     alignMessage = 'title',
     onDismiss,
+    rootAttrs,
   } = notification;
 
   const onActionClicked = useCallback(() => {
@@ -49,7 +50,8 @@ export const NotificationCard = ({ notification }: NotificationCardProps) => {
         [styles.iconColor]: getIconColor(style, theme, iconColor),
       })}
       data-with-icon={icon ? '' : undefined}
-      className={styles.card}
+      {...rootAttrs}
+      className={clsx(styles.card, rootAttrs?.className)}
     >
       {thumb}
       <div className={styles.cardInner}>

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 
 import type { ButtonProps } from '../button';
 
@@ -23,6 +23,8 @@ export interface Notification {
     autoClose?: boolean;
   };
 
+  rootAttrs?: HTMLAttributes<HTMLDivElement>;
+
   // custom slots
   thumb?: ReactNode;
   title?: ReactNode;