Component Documentation

import {
  packageDefaultComponents,
  type ChatComponents,
} from "@realtimexsco/live-chat";

function withTheme<P extends object>(
  Default: React.ComponentType<P>,
  className: string
): React.ComponentType<P> {
  return (props) => (
    <div className={className}>
      <Default {...props} />
    </div>
  );
}

const components: ChatComponents = {
  MessageItem: withTheme(packageDefaultComponents.MessageItem!, "my-message"),
  ChannelListItem: withTheme(packageDefaultComponents.ChannelListItem!, "my-row"),
};

import type { AvatarSlotProps } from "@realtimexsco/live-chat";

const MyAvatar = ({ src, name, size = "md", isOnline, showOnline }: AvatarSlotProps) => (
  <div className="relative">
    <img src={src || undefined} alt={name} className={`avatar avatar--${size}`} />
    {showOnline && isOnline && <span className="online-dot" />}
  </div>
);

import type { MessageItemSlotProps } from "@realtimexsco/live-chat";

const MyMessageItem = ({ isSender, message, createdAt }: MessageItemSlotProps) => (
  <div className={isSender ? "text-right" : "text-left"}>
    <div className={isSender ? "bubble-sent" : "bubble-received"}>{message}</div>
    <time className="text-xs opacity-60">{createdAt}</time>
  </div>
);

import type { ChannelListItemSlotProps } from "@realtimexsco/live-chat";

const MyRow = ({ channel, isActive, onSelect }: ChannelListItemSlotProps) => (
  <button
    type="button"
    className={isActive ? "row-active" : "row"}
    onClick={() => onSelect(channel)}
  >
    {channel.name}
    {channel.unreadCount ? ` (${channel.unreadCount})` : ""}
  </button>
);

import type { ChannelMessageBoxSlotProps } from "@realtimexsco/live-chat";

const MyInput = ({ onSendMessage, replyTo, onCancelReply }: ChannelMessageBoxSlotProps) => {
  const [text, setText] = useState("");
  return (
    <div>
      {replyTo && <button type="button" onClick={onCancelReply}>Cancel reply</button>}
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button
        type="button"
        onClick={() => { onSendMessage?.(text, [], replyTo); setText(""); }}
      >
        Send
      </button>
    </div>
  );
};

import { useChatStore, type MembersDrawerSlotProps } from "@realtimexsco/live-chat";

const MyMembersDrawer = ({
  isOpen,
  onOpenChange,
  conversationInfo,
}: MembersDrawerSlotProps) => {
  const manageGroupMembers = useChatStore((s) => s.manageGroupMembers);
  const participants = conversationInfo?.participants ?? [];

  if (!isOpen) return null;

  return (
    <aside className="members-drawer">
      <header>
        <h2>Members ({participants.length})</h2>
        <button type="button" onClick={() => onOpenChange(false)}>Close</button>
      </header>
      <ul>
        {participants.map((p, i) => {
          const id = typeof p === "string" ? p : p._id;
          const name = typeof p === "string" ? "User" : p.name;
          return <li key={`${id}-${i}`}>{name}</li>;
        })}
      </ul>
    </aside>
  );
};

classNames={{
  shell: "chat-container-root",
  channelListItemActive: "bg-indigo-50 dark:bg-indigo-500/10",
  messageBubbleSender: "rounded-2xl shadow-sm",
  messageBubbleReceiver: "rounded-2xl",
  drawer: "z-[60]",
}}