@cometchat/chat-uikit-react/dist/chunk-LDXTHTWH.js

Ready-to-use Chat UI Components for React

import './index.css';
import { useLocale } from './chunk-UVWJYQJ3.js';
import { createContext, useContext, useState, useEffect } from 'react';
import { jsxs, jsx } from 'react/jsx-runtime';

var CometChatAvatarContext = createContext(null);
function useCometChatAvatarContext() {
  const ctx = useContext(CometChatAvatarContext);
  if (!ctx) {
    throw new Error("useCometChatAvatarContext must be used within <CometChatAvatar.Root>");
  }
  return ctx;
}

// src/components/base/CometChatAvatar/CometChatAvatar.utils.ts
function getInitials(name) {
  const trimmed = name.trim();
  if (!trimmed) return "";
  const words = trimmed.split(/\s+/);
  if (words.length >= 2) {
    return `${words[0]?.charAt(0) ?? ""}${words[1]?.charAt(0) ?? ""}`.toUpperCase();
  }
  return trimmed.substring(0, 2).toUpperCase();
}
function useCometChatAvatar({ image }) {
  const [imageLoaded, setImageLoaded] = useState(false);
  const [imageError, setImageError] = useState(false);
  useEffect(() => {
    if (!image) {
      setImageLoaded(false);
      setImageError(false);
      return;
    }
    let cancelled = false;
    setImageLoaded(false);
    setImageError(false);
    const img = new Image();
    img.onload = () => {
      if (!cancelled) setImageLoaded(true);
    };
    img.onerror = () => {
      if (!cancelled) setImageError(true);
    };
    img.src = image;
    return () => {
      cancelled = true;
    };
  }, [image]);
  return { imageLoaded, imageError };
}
function CometChatAvatarRoot({
  name = "",
  image = "",
  size = "medium",
  className,
  children
}) {
  const { imageLoaded, imageError } = useCometChatAvatar({ image });
  const contextValue = { name, image, size, imageLoaded, imageError };
  return /* @__PURE__ */ jsx(CometChatAvatarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
    "div",
    {
      className: `cometchat-avatar ${className ?? ""}`,
      "data-size": size,
      role: "img",
      "aria-label": name || "Avatar",
      children
    }
  ) });
}
function CometChatAvatarImage({ className }) {
  const { image, name, imageError } = useCometChatAvatarContext();
  if (!image || imageError) return null;
  return /* @__PURE__ */ jsx(
    "img",
    {
      src: image,
      alt: name || "Avatar",
      loading: "lazy",
      decoding: "async",
      className: `cometchat-avatar__image ${className ?? ""}`
    }
  );
}
function CometChatAvatarInitials({ className }) {
  const { name, image, imageLoaded, imageError } = useCometChatAvatarContext();
  if (image && imageLoaded && !imageError) return null;
  return /* @__PURE__ */ jsx("span", { className: `cometchat-avatar__initials ${className ?? ""}`, "aria-label": name, children: getInitials(name) });
}
function CometChatAvatarStatusIndicator({
  status,
  className
}) {
  const { getLocalizedString } = useLocale();
  return /* @__PURE__ */ jsx(
    "span",
    {
      className: `cometchat-avatar__status-indicator ${className ?? ""}`,
      "data-status": status,
      role: "status",
      "aria-label": status === "online" ? getLocalizedString("accessibility_online") : getLocalizedString("accessibility_offline")
    }
  );
}
var CometChatAvatarComponent = ({ status, ...rootProps }) => {
  return /* @__PURE__ */ jsxs(CometChatAvatarRoot, { ...rootProps, children: [
    /* @__PURE__ */ jsx(CometChatAvatarImage, {}),
    /* @__PURE__ */ jsx(CometChatAvatarInitials, {}),
    status && /* @__PURE__ */ jsx(CometChatAvatarStatusIndicator, { status })
  ] });
};
CometChatAvatarComponent.displayName = "CometChatAvatar";
var CometChatAvatar = Object.assign(CometChatAvatarComponent, {
  Root: CometChatAvatarRoot,
  Image: CometChatAvatarImage,
  Initials: CometChatAvatarInitials,
  StatusIndicator: CometChatAvatarStatusIndicator
});

export { CometChatAvatar, getInitials, useCometChatAvatarContext };