wrapper.tsx (1762B)
1 import { FC, memo } from "react"; 2 import { OnlineState } from "../../app/sdk/api/otherEnums"; 3 import Avatar from "../avatar/avatar"; 4 import { Bot } from "lucide-react"; 5 6 export type MessageWrapperProps = { 7 /** 8 * The displayname to render 9 */ 10 displayname: string; 11 /** 12 * The avatar_url to render 13 */ 14 avatar_url: string; 15 /** 16 * If the sender is a bot 17 */ 18 isBot: boolean; 19 /** 20 * If the sender is online 21 */ 22 onlineState: OnlineState; 23 /** 24 * If the room is a DM 25 */ 26 dm: boolean; 27 /** 28 * If the previous event was sent by the same user 29 */ 30 hasPreviousEvent?: boolean; 31 /** 32 * Children to render 33 */ 34 children: React.ReactNode; 35 }; 36 37 38 export const MessageWrapper: FC<MessageWrapperProps> = memo(({ hasPreviousEvent, displayname, avatar_url, onlineState, isBot, dm, children }) => { 39 return ( 40 <div className={!hasPreviousEvent ? "flex flex-row gap-4 p-2 pb-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md duration-200 ease-in-out items-start" : "flex flex-row p-2 pb-1 pt-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md duration-200 ease-in-out"}> 41 {!hasPreviousEvent && <Avatar 42 displayname={displayname} 43 avatarUrl={avatar_url} 44 online={onlineState} 45 dm={dm} 46 isBot={isBot} 47 />} 48 <div className={!hasPreviousEvent ? "flex flex-col gap-1" : "ml-12"} id="event"> 49 {!hasPreviousEvent && <h2 className="flex flex-row items-center gap-2 text-base font-medium text-red-500 whitespace-pre-wrap">{isBot ? <Bot size={16} /> : <></>}{displayname}</h2>} 50 {children} 51 </div> 52 </div> 53 ) 54 });