"use client";

import { cva, type VariantProps } from "class-variance-authority";
import { FileTextIcon } from "lucide-react";
import * as React from "react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

type MessageVariant = "sent" | "received";
type MessageType = "text" | "file" | "image";

type Sender = {
  name: string;
  avatarSrc?: string;
  status?: "online" | "offline";
};

type Reaction = {
  emoji: string;
  count: number;
};

/* -----------------------------------------------------------------------------
 * MessageContainer
 * -------------------------------------------------------------------------- */

const MessageContext = React.createContext<{
  variant: MessageVariant;
  type: MessageType;
} | null>(null);

function useMessageContext() {
  const context = React.useContext(MessageContext);
  if (!context) {
    throw new Error("useMessageContext must be used within a MessageContainer");
  }
  return context;
}

function MessageContainer({
  className,
  children,
  variant,
  type,
  ...props
}: React.ComponentProps<"div"> & {
  variant: MessageVariant;
  type: MessageType;
}) {
  return (
    <MessageContext.Provider value={{ variant, type }}>
      <div
        data-slot="message-container"
        data-variant={variant}
        data-type={type}
        className={cn(
          "group/message-container relative flex items-start gap-3",
          variant === "sent" ? "flex-row-reverse" : "flex-row",
          className
        )}
        {...props}
      >
        {children}
      </div>
    </MessageContext.Provider>
  );
}
/* -----------------------------------------------------------------------------
 * MessageBubble
 * -------------------------------------------------------------------------- */

function MessageBubble({ className, children, ...props }: React.ComponentProps<"div">) {
  const { variant, type } = useMessageContext();
  const isSent = variant === "sent";

  return (
    <div
      data-slot="message-bubble"
      data-variant={variant}
      data-type={type}
      className={cn(
        "relative isolate w-fit rounded-md px-3.5 py-2.5",
        isSent
          ? "bg-primary text-primary-foreground"
          : "bg-secondary text-secondary-foreground",
        type === "text" && "text-base",
        type === "file" && "text-sm",
        type === "image" && "p-1",
        className
      )}
      {...props}
    >
      {children}

      {/* Bubble tail */}
      <svg
        aria-hidden="true"
        data-slot="message-bubble-tail"
        width="20"
        height="24"
        viewBox="0 0 20 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className={cn(
          "absolute top-1 -z-1 h-6 w-5 group-not-has-data-[slot=message-avatar]/message-container:hidden",
          isSent ? "-right-[5px] scale-x-[-1]" : "-left-[5px]"
        )}
      >
        <path
          d="M0.132881 0.162838C6.27386 -0.781927 12.3361 2.5996 14.3044 4.76469C12.2756 9.60244 24.8006 21.3525 16.5339 21.3529C14.6224 21.3529 12.9898 26.3603 6.03767 22.601C6.01262 21.0813 6.03767 15.8209 6.03767 14.9253C6.03767 2.52522 -1.04808 0.875299 0.132881 0.162838Z"
          fill={isSent ? "var(--primary)" : "var(--secondary)"}
        />
      </svg>
    </div>
  );
}

function MessageContent({ className, ...props }: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="message-bubble-content"
      className={cn("break-words whitespace-pre-wrap", className)}
      {...props}
    />
  );
}

function MessageSenderName({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="message-sender-name"
      className={cn("text-sm font-medium text-primary", className)}
      {...props}
    />
  );
}

function MessageTimestamp({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="message-timestamp"
      className={cn("block text-sm text-muted-foreground", className)}
      {...props}
    />
  );
}

/* -----------------------------------------------------------------------------
 * MessageReaction
 * -------------------------------------------------------------------------- */

function MessageReaction({
  emoji,
  count,
  className,
  ...props
}: React.ComponentProps<"span"> & {
  emoji: string;
  count: number;
}) {
  return (
    <span
      data-slot="message-reaction"
      className={cn(
        "inline-flex items-center gap-1 rounded-full border bg-muted px-2 py-1 text-sm",
        className
      )}
      {...props}
    >
      <span className="leading-none">{emoji}</span>
      <span className="leading-none font-medium text-foreground tabular-nums">
        {count}
      </span>
    </span>
  );
}

/* -----------------------------------------------------------------------------
 * Message Attachments (Separate Components)
 * -------------------------------------------------------------------------- */

function MessageFileAttachment({
  fileName,
  fileSize,
  className,
  ...props
}: React.ComponentProps<"div"> & {
  fileName: string;
  fileSize: string;
  fileType?: string;
}) {
  return (
    <div
      data-slot="message-file"
      data-type="file"
      className={cn("flex items-start gap-4", className)}
      {...props}
    >
      <div className="grid size-11 place-content-center rounded-full border bg-muted">
        <FileTextIcon className="size-4 text-primary" />
      </div>
      <div className="min-w-0 flex-1">
        <p className="truncate text-sm font-medium">{fileName}</p>
        <p className="text-sm text-muted-foreground">{fileSize}</p>
      </div>
    </div>
  );
}

function MessageImageAttachment({
  src,
  alt,
  className,
  ...props
}: React.ComponentProps<"div"> & {
  src: string;
  alt: string;
}) {
  return (
    <div
      data-slot="message-image"
      data-type="image"
      className={cn("aspect-square size-64 overflow-hidden rounded-sm", className)}
      {...props}
    >
      <img src={src} alt={alt} className="size-full object-cover" />
    </div>
  );
}

/* -----------------------------------------------------------------------------
 * MessageAvatar
 * -------------------------------------------------------------------------- */

function MessageAvatar({
  name,
  avatar,
  status,
  size,
  className,
  ...props
}: React.ComponentProps<typeof Avatar> & {
  name: string;
  avatar?: string;
  status?: "online" | "offline";
  size?: VariantProps<typeof statusIndicatorVariants>["size"];
}) {
  const getFallbackInitials = (name: string) => {
    const parts = name.trim().split(/\s+/);
    if (parts.length >= 2) {
      return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
    }
    return name.slice(0, 2).toUpperCase();
  };

  const fallbackInitials = getFallbackInitials(name);

  return (
    <div className="relative shrink-0">
      <Avatar data-slot="message-avatar" className={cn("size-10", className)} {...props}>
        <AvatarImage src={avatar} alt={name} className="object-cover" />
        <AvatarFallback className="uppercase">{fallbackInitials}</AvatarFallback>
      </Avatar>
      {status && (
        <StatusIndicator
          status={status}
          size={size}
          className="absolute right-0 bottom-0"
        />
      )}
    </div>
  );
}

/* -----------------------------------------------------------------------------
 * StatusIndicator
 * -------------------------------------------------------------------------- */

const statusIndicatorVariants = cva("shrink-0 rounded-full ring-2 ring-background", {
  variants: {
    status: {
      online: "bg-green-500",
      offline: "bg-neutral-500",
    },
    size: {
      xs: "size-1.5",
      sm: "size-2",
      md: "size-2.5",
      lg: "size-3",
      xl: "size-3.5",
    },
  },
  defaultVariants: {
    status: "offline",
    size: "md",
  },
});

function StatusIndicator({
  status,
  size,
  className,
  ...props
}: React.ComponentProps<"span"> & VariantProps<typeof statusIndicatorVariants>) {
  return (
    <span
      data-slot="status-indicator"
      data-status={status}
      data-size={size}
      className={cn(statusIndicatorVariants({ status, size }), className)}
      aria-label={status === "online" ? "Online" : "Offline"}
      {...props}
    />
  );
}

/* -----------------------------------------------------------------------------
 * TypingIndicator
 * -------------------------------------------------------------------------- */

function TypingIndicator({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="typing-indicator"
      className={cn("flex items-center gap-1 px-2 py-1", className)}
      aria-label="Typing"
      {...props}
    >
      <span className="size-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.3s]" />
      <span className="size-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.15s]" />
      <span className="size-2 animate-bounce rounded-full bg-muted-foreground/60" />
    </div>
  );
}

/* -----------------------------------------------------------------------------
 * TypingMessage (Separate Component for Typing State)
 * -------------------------------------------------------------------------- */

function TypingMessage({
  sender,
  variant = "received",
  showSenderAvatar = true,
  className,
  ...props
}: React.ComponentProps<"div"> & {
  sender: Sender;
  variant: MessageVariant;
  showSenderAvatar?: boolean;
}) {
  const isSent = variant === "sent";

  return (
    <div
      data-slot="typing-message"
      data-variant={variant}
      className={cn(
        "group/typing-message relative flex items-start gap-3",
        isSent && "flex-row-reverse",
        className
      )}
      {...props}
    >
      {showSenderAvatar && (
        <MessageAvatar
          name={sender.name}
          avatar={sender.avatarSrc}
          status={sender.status}
        />
      )}

      <div
        className={cn(
          "relative isolate w-fit rounded-md px-3.5 py-2.5",
          isSent
            ? "items-end bg-primary text-primary-foreground"
            : "items-start bg-secondary text-secondary-foreground"
        )}
      >
        <TypingIndicator />

        {/* Bubble tail */}
        <svg
          aria-hidden="true"
          data-slot="message-bubble-tail"
          width="20"
          height="24"
          viewBox="0 0 20 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className={cn(
            "absolute bottom-1 -z-1 h-6 w-5 scale-y-[-1] group-not-has-data-[slot=message-avatar]/typing-message:hidden",
            isSent ? "-right-[5px] scale-x-[-1]" : "-left-[5px]"
          )}
        >
          <path
            d="M0.132881 0.162838C6.27386 -0.781927 12.3361 2.5996 14.3044 4.76469C12.2756 9.60244 24.8006 21.3525 16.5339 21.3529C14.6224 21.3529 12.9898 26.3603 6.03767 22.601C6.01262 21.0813 6.03767 15.8209 6.03767 14.9253C6.03767 2.52522 -1.04808 0.875299 0.132881 0.162838Z"
            fill={isSent ? "var(--primary)" : "var(--secondary)"}
          />
        </svg>
      </div>
    </div>
  );
}

/* -----------------------------------------------------------------------------
 * ChatMessage (Full Composition with Discriminated Union)
 * -------------------------------------------------------------------------- */

type BaseChatMessageProps = React.ComponentProps<"div"> & {
  variant?: "sent" | "received";
  sender: Sender;
  showSenderAvatar?: boolean;
  timestamp?: string;
  reactions?: Reaction[];
};

type TextChatMessageProps = BaseChatMessageProps & {
  type?: "text";
  content: string;
};

type ImageChatMessageProps = BaseChatMessageProps & {
  type: "image";
  src: string;
  alt: string;
};

type FileChatMessageProps = BaseChatMessageProps & {
  type: "file";
  fileName: string;
  fileSize: string;
  fileType?: string;
};

type ChatMessageProps =
  | TextChatMessageProps
  | ImageChatMessageProps
  | FileChatMessageProps;

function ChatMessage(props: ChatMessageProps) {
  const messageType = props.type ?? "text";
  const variant = props.variant ?? "received";
  const showSenderAvatar = props.showSenderAvatar ?? true;
  const isSent = variant === "sent";

  // Type-safe content rendering using discriminated union
  const renderContent = () => {
    if (messageType === "text" || messageType === undefined) {
      const { content } = props as TextChatMessageProps;
      return <MessageContent>{content}</MessageContent>;
    }
    if (messageType === "image") {
      const { src, alt } = props as ImageChatMessageProps;
      return <MessageImageAttachment src={src} alt={alt} />;
    }
    if (messageType === "file") {
      const { fileName, fileSize, fileType } = props as FileChatMessageProps;
      return (
        <MessageFileAttachment
          fileName={fileName}
          fileSize={fileSize}
          fileType={fileType}
        />
      );
    }
    return null;
  };

  return (
    <MessageContainer variant={variant} type={messageType} className={props.className}>
      {showSenderAvatar && (
        <MessageAvatar
          name={props.sender.name}
          avatar={props.sender.avatarSrc}
          status={props.sender.status}
        />
      )}

      {/* Message Content Wrapper */}
      <div
        className={cn(
          "relative isolate flex max-w-3xl min-w-0 flex-col gap-2",
          isSent ? "items-end" : "items-start"
        )}
      >
        {/* Sender Name & Timestamp Header */}
        <div className={cn("flex w-full items-center justify-between gap-2")}>
          <MessageSenderName>{isSent ? "You" : props.sender.name}</MessageSenderName>
          {props.timestamp && <MessageTimestamp>{props.timestamp}</MessageTimestamp>}
        </div>

        {/* Message Bubble - Text, Image, or Attachment */}
        <MessageBubble>{renderContent()}</MessageBubble>

        {/* Reactions */}
        {props.reactions && props.reactions.length > 0 && (
          <div
            className={cn(
              "z-10 -mt-4 flex flex-wrap gap-1 self-end pr-2",
              isSent && "justify-end"
            )}
          >
            {props.reactions.map((reaction, index) => (
              <MessageReaction
                key={index}
                emoji={reaction.emoji}
                count={reaction.count}
              />
            ))}
          </div>
        )}
      </div>
    </MessageContainer>
  );
}

export {
  type FileChatMessageProps as AttachmentChatMessageProps,
  ChatMessage,
  type ChatMessageProps,
  type ImageChatMessageProps,
  MessageAvatar,
  MessageBubble,
  MessageContainer,
  MessageContent,
  MessageFileAttachment,
  MessageImageAttachment,
  MessageReaction,
  MessageSenderName,
  MessageTimestamp,
  type Reaction,
  type Sender,
  StatusIndicator,
  statusIndicatorVariants,
  type TextChatMessageProps,
  TypingIndicator,
  TypingMessage,
};
Messaging

More Components

Placeholder title

Frequently Asked Questions

Are the React components production ready?

Does shadcncraft work for developers using shadcn/ui?

What stack is used?

Can I modify the code?

Does this replace shadcn/ui?

Join 3,000+ builders shipping with shadcncraft

Real support from the team behind shadcncraft
