52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { MessageUser } from '@components/chats/messageUser';
|
|
|
|
import { nip04 } from 'nostr-tools';
|
|
import { memo, useCallback, useEffect, useMemo, useState } from 'react';
|
|
|
|
const MessageListItem = ({
|
|
data,
|
|
activeAccountPubkey,
|
|
activeAccountPrivkey,
|
|
}: {
|
|
data: any;
|
|
activeAccountPubkey: string;
|
|
activeAccountPrivkey: string;
|
|
}) => {
|
|
const [content, setContent] = useState('');
|
|
|
|
const sender = useMemo(() => {
|
|
const pTag = data.tags.find(([k, v]) => k === 'p' && v && v !== '')[1];
|
|
if (pTag === activeAccountPubkey) {
|
|
return data.pubkey;
|
|
} else {
|
|
return pTag;
|
|
}
|
|
}, [data.pubkey, data.tags, activeAccountPubkey]);
|
|
|
|
const decryptContent = useCallback(async () => {
|
|
const result = await nip04.decrypt(activeAccountPrivkey, sender, data.content);
|
|
setContent(result);
|
|
}, [data.content, activeAccountPrivkey, sender]);
|
|
|
|
useEffect(() => {
|
|
decryptContent().catch(console.error);
|
|
}, [decryptContent]);
|
|
|
|
return (
|
|
<div className="flex h-min min-h-min w-full select-text flex-col px-5 py-2 hover:bg-black/20">
|
|
<div className="flex flex-col">
|
|
<MessageUser pubkey={data.pubkey} time={data.created_at} />
|
|
<div className="-mt-[17px] pl-[48px]">
|
|
<div className="flex flex-col gap-2">
|
|
<div className="prose prose-zinc max-w-none break-words text-sm leading-tight dark:prose-invert prose-p:m-0 prose-p:text-sm prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
|
|
{content}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(MessageListItem);
|