refactor(app): tighten feature boundaries

src/app/_components/index.ts

@@ -3,3 +3,4 @@
  */
 
 export * from "./back-button";
+export * from "./user-message-avatar";

src/app/_components/user-message-avatar.module.css

@@ -0,0 +1,19 @@
+.avatar {
+  flex: 0 0 auto;
+  width: 43px;
+  height: 43px;
+  border-radius: 9999px;
+  overflow: hidden;
+  border: 2px solid var(--color-avatar-border, #fbf3f5);
+  box-shadow: var(--shadow-input-box, 0 1px 2px rgba(0, 0, 0, 0.1));
+  background: var(--color-avatar-border, #fbf3f5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

src/app/_components/user-message-avatar.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import Image from "next/image";
+
+import styles from "./user-message-avatar.module.css";
+
+export interface UserMessageAvatarProps {
+  avatarUrl?: string | null;
+  className?: string;
+  size?: number;
+}
+
+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={avatarClassName}
+        style={avatarStyle}
+        aria-label="User avatar"
+      >
+        <Image src={avatarUrl} alt="" width={size} height={size} />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={avatarClassName}
+      style={avatarStyle}
+      aria-label="Guest avatar"
+    >
+      <Image
+        src="/images/chat/pic-chat-guest.png"
+        alt="Guest"
+        width={size}
+        height={size}
+      />
+    </div>
+  );
+}