56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import { ChatMessageUser } from "@app/chat/components/messages/user";
|
|
import { useDecryptMessage } from "@app/chat/hooks/useDecryptMessage";
|
|
import { MentionNote } from "@app/space/components/notes/mentions/note";
|
|
import { ImagePreview } from "@app/space/components/notes/preview/image";
|
|
import { VideoPreview } from "@app/space/components/notes/preview/video";
|
|
import { noteParser } from "@utils/parser";
|
|
import { memo } from "react";
|
|
|
|
export const ChatMessageItem = memo(function ChatMessageItem({
|
|
data,
|
|
userPubkey,
|
|
userPrivkey,
|
|
}: {
|
|
data: any;
|
|
userPubkey: string;
|
|
userPrivkey: string;
|
|
}) {
|
|
const decryptedContent = useDecryptMessage(data, userPubkey, userPrivkey);
|
|
// if we have decrypted content, use it instead of the encrypted content
|
|
if (decryptedContent) {
|
|
data["content"] = decryptedContent;
|
|
}
|
|
// parse the note content
|
|
const content = noteParser(data);
|
|
|
|
return (
|
|
<div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20">
|
|
<div className="flex flex-col">
|
|
<ChatMessageUser pubkey={data.sender_pubkey} time={data.created_at} />
|
|
<div className="-mt-[20px] pl-[49px]">
|
|
<div className="whitespace-pre-line break-words text-base text-zinc-100 leading-tight">
|
|
{content.parsed || ""}
|
|
</div>
|
|
{Array.isArray(content.images) && content.images.length ? (
|
|
<ImagePreview urls={content.images} />
|
|
) : (
|
|
<></>
|
|
)}
|
|
{Array.isArray(content.videos) && content.videos.length ? (
|
|
<VideoPreview urls={content.videos} />
|
|
) : (
|
|
<></>
|
|
)}
|
|
{Array.isArray(content.notes) && content.notes.length ? (
|
|
content.notes.map((note: string) => (
|
|
<MentionNote key={note} id={note} />
|
|
))
|
|
) : (
|
|
<></>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|