copilotkit__copilotkit/examples/copilot-fully-custom/components/chat/UserMessage.tsx

import { Markdown, UserMessageProps } from "@copilotkit/react-ui";
import { Avatar, Format, AvatarSize} from "@leafygreen-ui/avatar";
import Card from "@leafygreen-ui/card";

export const CustomUserMessage = (props: UserMessageProps) => {
  const wrapperStyles = "flex items-end gap-2 justify-end mt-4 w-full";
  const messageStyles = "bg-emerald-500 flex items-end justify-end text-white"
  const avatarStyles = "text-sm bg-emerald-500"
 
  return (
    <div className={wrapperStyles}>
      <Card className={messageStyles}><Markdown content={props.message?.content || ""} /></Card>
      <Avatar format={Format.Icon} glyph="Person" size={AvatarSize.XLarge} className={avatarStyles} />
    </div>
  );
};