diff --git a/src/element/chat-message.tsx b/src/element/chat-message.tsx
index 0320f87..934b229 100644
--- a/src/element/chat-message.tsx
+++ b/src/element/chat-message.tsx
@@ -101,7 +101,15 @@ export function ChatMessage({
ref={ref}
onClick={() => setShowZapDialog(true)}
>
-
+
+ )
+ }
+ pubkey={ev.pubkey}
+ profile={profile}
+ />
{(hasReactions || hasZaps) && (
diff --git a/src/element/profile.tsx b/src/element/profile.tsx
index 08d1ef7..bdedd95 100644
--- a/src/element/profile.tsx
+++ b/src/element/profile.tsx
@@ -1,4 +1,5 @@
import "./profile.css";
+import type { ReactNode } from "react";
import { Link } from "react-router-dom";
import { useUserProfile } from "@snort/system-react";
import { UserMetadata } from "@snort/system";
@@ -28,17 +29,20 @@ export function getName(pk: string, user?: UserMetadata) {
export function Profile({
pubkey,
+ icon,
avatarClassname,
options,
profile,
}: {
pubkey: string;
+ icon?: ReactNode;
avatarClassname?: string;
options?: ProfileOptions;
- profile?: UserMetadata
+ profile?: UserMetadata;
}) {
const { inView, ref } = useInView();
- const pLoaded = useUserProfile(System, inView && !profile ? pubkey : undefined) || profile;
+ const pLoaded =
+ useUserProfile(System, inView && !profile ? pubkey : undefined) || profile;
const showAvatar = options?.showAvatar ?? true;
const showName = options?.showName ?? true;
@@ -54,6 +58,7 @@ export function Profile({
src={pLoaded?.picture ?? ""}
/>
))}
+ {icon}
{showName && (
{options?.overrideName ?? pubkey === "anon"
@@ -65,9 +70,15 @@ export function Profile({
);
return pubkey === "anon" ? (
- {content}
+
+ {content}
+
) : (
-
+
{content}
);