feat(subscription): support Stripe payment element

src/app/chat/components/user-message-avatar.tsx

@@ -6,24 +6,41 @@ import styles from "./message-avatar.module.css";
 
 export interface UserMessageAvatarProps {
   avatarUrl?: string | null;
+  className?: string;
+  size?: number;
 }
 
-export function UserMessageAvatar({ avatarUrl }: UserMessageAvatarProps) {
+export function UserMessageAvatar({
+  avatarUrl,
+  className,
+  size = 43,
+}: UserMessageAvatarProps) {
+  const avatarClassName = [styles.avatar, className].filter(Boolean).join(" ");
+  const avatarStyle = { width: size, height: size };
+
   if (avatarUrl && avatarUrl.length > 0) {
     return (
-      <div className={styles.avatar} aria-label="User avatar">
-        <Image src={avatarUrl} alt="" width={43} height={43} />
+      <div
+        className={avatarClassName}
+        style={avatarStyle}
+        aria-label="User avatar"
+      >
+        <Image src={avatarUrl} alt="" width={size} height={size} />
       </div>
     );
   }
 
   return (
-    <div className={styles.avatar} aria-label="Guest avatar">
+    <div
+      className={avatarClassName}
+      style={avatarStyle}
+      aria-label="Guest avatar"
+    >
       <Image
         src="/images/chat/pic-chat-guest.png"
         alt="Guest"
-        width={43}
-        height={43}
+        width={size}
+        height={size}
       />
     </div>
   );