feat(subscription): support Stripe payment element

src/app/sidebar/components/user-header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Image from "next/image";
+import { UserMessageAvatar } from "@/app/chat/components/user-message-avatar";
 
 import styles from "./user-header.module.css";
 
@@ -49,31 +49,11 @@ export function UserHeader({
 
   return (
     <div className={styles.row}>
-      <div className={styles.avatar} aria-hidden="true">
-        {avatarUrl ? (
-          <Image
-            src={avatarUrl}
-            alt=""
-            width={56}
-            height={56}
-            className={styles.avatarImg}
-          />
-        ) : (
-          <svg
-            width="28"
-            height="28"
-            viewBox="0 0 24 24"
-            fill="none"
-            className={styles.avatarIcon}
-          >
-            <circle cx="12" cy="8" r="4" fill="currentColor" />
-            <path
-              d="M4 20c0-4.418 3.582-7 8-7s8 2.582 8 7"
-              fill="currentColor"
-            />
-          </svg>
-        )}
-      </div>
+      <UserMessageAvatar
+        avatarUrl={avatarUrl}
+        className={styles.avatar}
+        size={56}
+      />
 
       <div className={styles.text}>
         <p className={styles.name}>{name}</p>