@cometchat/chat-uikit-react
Version:
Ready-to-use Chat UI Components for React
1,120 lines (1,113 loc) • 53.4 kB
JavaScript
import './index.css';
import { CometChatAvatar } from './chunk-LDXTHTWH.js';
import { formatFullDateLabel, formatDateWithConfig } from './chunk-PJV2HJD5.js';
import { CometChatUIKitConstants } from './chunk-3DZVPW3I.js';
import { useCometChatFrameContext } from './chunk-UTFM6ET6.js';
import { useLocale } from './chunk-UVWJYQJ3.js';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import React3, { createContext, lazy, useRef, useState, useCallback, useEffect, useMemo, useContext, Suspense } from 'react';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
function getReceiptStatus(message) {
if (message instanceof CometChat.TextMessage || message instanceof CometChat.MediaMessage) {
const moderationStatus = message.getModerationStatus();
if (moderationStatus === CometChatUIKitConstants.moderationStatus.disapproved) {
return "error";
}
}
if (hasMessageError(message)) {
return "error";
}
if (message.getReadAt()) {
return "read";
}
if (message.getDeliveredAt()) {
return "delivered";
}
if (message.getSentAt() && message.getId()) {
return "sent";
}
return "wait";
}
function getMessageError(message) {
const ccError = message._ccError;
if (ccError) return extractErrorFields(ccError);
const direct = message.error;
if (direct) return extractErrorFields(direct);
try {
const meta = message.getMetadata?.();
if (meta?.error) return extractErrorFields(meta.error);
} catch {
}
return void 0;
}
function extractErrorFields(error) {
if (!error) return void 0;
if (typeof error === "string") return { message: error };
if (typeof error === "object") {
const obj = error;
const result = {};
if (obj.code && typeof obj.code === "string") result.code = obj.code;
if (obj.message && typeof obj.message === "string") result.message = obj.message;
if (obj.details && typeof obj.details === "string") result.details = obj.details;
if (!result.code && obj.error && typeof obj.error === "object") {
const nested = obj.error;
if (nested.code && typeof nested.code === "string") result.code = nested.code;
}
if (result.code || result.message) return result;
}
return { message: "Send failed" };
}
function hasMessageError(message) {
return Boolean(getMessageError(message));
}
function isMessageModerated(message, loggedInUserUid) {
if (!(message instanceof CometChat.TextMessage) && !(message instanceof CometChat.MediaMessage)) {
return false;
}
if (message.getModerationStatus() !== CometChatUIKitConstants.moderationStatus.disapproved) {
return false;
}
return message.getSender().getUid() === loggedInUserUid;
}
function isPermissionDeniedError(message, loggedInUserUid) {
if (!(message instanceof CometChat.MediaMessage) && !(message instanceof CometChat.TextMessage)) {
return false;
}
const ccError = message._ccError;
const directError = message.error;
const metadata = message.getMetadata();
const metadataError = metadata?.error;
let errorCode;
if (ccError?.code) {
errorCode = ccError.code;
} else if (directError?.code) {
errorCode = directError.code;
} else if (metadataError) {
errorCode = metadataError.code ?? metadataError.code;
}
if (errorCode !== "ERR_PERMISSION_DENIED" && errorCode !== "ERR_FILE_TYPE_NOT_ALLOWED") {
return false;
}
const senderUid = message.getSender()?.getUid?.();
return !senderUid || senderUid === loggedInUserUid;
}
function isMessagePendingModeration(message) {
if (!(message instanceof CometChat.TextMessage) && !(message instanceof CometChat.MediaMessage)) {
return false;
}
return message.getModerationStatus() === CometChatUIKitConstants.moderationStatus.pending;
}
var CometChatDateContext = createContext(null);
function useCometChatDateContext() {
const ctx = useContext(CometChatDateContext);
if (!ctx) {
throw new Error("useCometChatDateContext must be used within <CometChatDate.Root>");
}
return ctx;
}
var DEFAULT_FORMAT_CONFIG = {
today: "Today",
yesterday: "Yesterday",
lastWeek: "dddd",
otherDays: "DD MMM, YYYY"
};
function useCometChatDate(options) {
const { timestamp, formatConfig, formatter, timezone, locale } = options;
return useMemo(() => {
const date = new Date(timestamp * 1e3);
const isoDate = date.toISOString();
const fullDateLabel = formatFullDateLabel(date, { timezone, locale });
if (formatter) {
return { formattedDate: formatter(timestamp), isoDate, fullDateLabel };
}
const config = { ...DEFAULT_FORMAT_CONFIG, ...formatConfig };
const formattedDate = formatDateWithConfig(timestamp, config, { timezone, locale });
return { formattedDate, isoDate, fullDateLabel };
}, [timestamp, formatConfig, formatter, timezone, locale]);
}
function CometChatDateRoot({
timestamp,
formatConfig,
formatter,
variant = "caption",
className,
children
}) {
const { calendarObject, timezone, dateLocaleLanguage, getLocalizedString } = useLocale();
const baseConfig = formatConfig ?? calendarObject;
const effectiveFormatConfig = baseConfig ? {
...baseConfig,
today: baseConfig.today ?? getLocalizedString("date_today"),
yesterday: baseConfig.yesterday ?? getLocalizedString("date_yesterday")
} : {
today: getLocalizedString("date_today"),
yesterday: getLocalizedString("date_yesterday")
};
const { formattedDate, isoDate, fullDateLabel } = useCometChatDate({
timestamp,
formatConfig: effectiveFormatConfig,
...formatter != null && { formatter },
...timezone != null && { timezone },
locale: dateLocaleLanguage
});
const contextValue = { timestamp, formattedDate, isoDate, fullDateLabel, variant };
return /* @__PURE__ */ jsx(CometChatDateContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
"time",
{
className: `cometchat-date ${className ?? ""}`,
dateTime: isoDate,
"aria-label": fullDateLabel,
title: fullDateLabel,
"data-variant": variant,
children: children ?? /* @__PURE__ */ jsx("span", { className: "cometchat-date__text", children: formattedDate })
}
) });
}
function CometChatDateText({ className }) {
const { formattedDate } = useCometChatDateContext();
return /* @__PURE__ */ jsx("span", { className: `cometchat-date__text ${className ?? ""}`, children: formattedDate });
}
var CometChatDateComponent = (props) => {
return /* @__PURE__ */ jsx(CometChatDateRoot, { ...props });
};
CometChatDateComponent.displayName = "CometChatDate";
var CometChatDate = Object.assign(CometChatDateComponent, {
Root: CometChatDateRoot,
Text: CometChatDateText
});
var CometChatContextMenuContext = createContext(
null
);
function useCometChatContextMenuContext() {
const ctx = useContext(CometChatContextMenuContext);
if (!ctx) {
throw new Error(
"useCometChatContextMenuContext must be used within <CometChatContextMenu.Root>"
);
}
return ctx;
}
var CometChatContextMenuItem = ({
item,
variant = "full",
className
}) => {
const { onOptionClicked, close } = useCometChatContextMenuContext();
const handleClick = () => {
if (item.disabled) return;
if (onOptionClicked) {
onOptionClicked(item);
} else {
item.onClick();
}
close();
};
const isIcon = variant === "icon";
const baseClass = isIcon ? "cometchat-context-menu__top-menu-item" : "cometchat-context-menu__dropdown-item";
const disabledClass = !isIcon && item.disabled ? "cometchat-context-menu__dropdown-item--disabled" : "";
const classes = [baseClass, disabledClass, item.className, className].filter(Boolean).join(" ");
const iconSize = isIcon ? 16 : 24;
const iconContent = item.icon ? /* @__PURE__ */ jsx(
"span",
{
className: isIcon ? "cometchat-context-menu__top-menu-item-icon" : "cometchat-context-menu__dropdown-item-icon",
children: item.icon
}
) : item.iconURL ? /* @__PURE__ */ jsx(
"img",
{
className: isIcon ? "cometchat-context-menu__top-menu-item-icon" : "cometchat-context-menu__dropdown-item-icon",
src: item.iconURL,
alt: "",
"aria-hidden": "true",
width: iconSize,
height: iconSize,
style: { width: iconSize, height: iconSize, flexShrink: 0 }
}
) : null;
if (isIcon) {
return /* @__PURE__ */ jsx(
"button",
{
type: "button",
className: classes,
onClick: handleClick,
disabled: item.disabled,
"aria-disabled": item.disabled ?? void 0,
"aria-label": item.title,
title: item.title,
children: iconContent
}
);
}
return /* @__PURE__ */ jsxs(
"button",
{
type: "button",
role: "menuitem",
className: classes,
onClick: handleClick,
disabled: item.disabled,
"aria-disabled": item.disabled ?? void 0,
tabIndex: -1,
children: [
iconContent,
/* @__PURE__ */ jsx("span", { className: "cometchat-context-menu__dropdown-item-title", children: item.title })
]
}
);
};
var MoreIcon = () => /* @__PURE__ */ jsx(
"svg",
{
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
"aria-hidden": "true",
children: /* @__PURE__ */ jsx(
"path",
{
d: "M12 19.27a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0-5.77a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0-5.77a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z",
fill: "currentColor"
}
)
}
);
var CometChatContextMenuTrigger = ({
tooltip,
className,
children
}) => {
const { isOpen, toggle, open, triggerRef } = useCometChatContextMenuContext();
const { getLocalizedString } = useLocale();
const handleKeyDown = (e) => {
if (e.key === "ArrowDown") {
e.preventDefault();
if (!isOpen) {
open();
}
}
};
const baseClass = "cometchat-context-menu__trigger";
const classes = [baseClass, className].filter(Boolean).join(" ");
return /* @__PURE__ */ jsx(
"button",
{
ref: triggerRef,
type: "button",
className: classes,
onClick: toggle,
onKeyDown: handleKeyDown,
"aria-haspopup": "true",
"aria-expanded": isOpen,
"aria-label": tooltip ?? getLocalizedString("accessibility_more_options"),
title: tooltip,
children: children ?? /* @__PURE__ */ jsx("span", { className: "cometchat-context-menu__trigger-icon", children: /* @__PURE__ */ jsx(MoreIcon, {}) })
}
);
};
var CometChatContextMenuDropdown = ({
children,
className,
useParentContainer: useParentContainerProp,
useParentHeight: useParentHeightProp,
forceStaticPlacement: forceStaticPlacementProp
}) => {
const { getLocalizedString } = useLocale();
const {
isOpen,
close,
triggerRef,
placement,
useParentContainer: useParentContainerCtx,
useParentHeight: useParentHeightCtx,
forceStaticPlacement: forceStaticPlacementCtx,
disableBackgroundInteraction
} = useCometChatContextMenuContext();
const dropdownRef = useRef(null);
const [position, setPosition] = useState(null);
const [measured, setMeasured] = useState(false);
const IframeContext = useCometChatFrameContext();
const getCurrentDocument = useCallback(() => {
return IframeContext.iframeDocument ?? document;
}, [IframeContext.iframeDocument]);
const useParentContainer = useParentContainerProp ?? useParentContainerCtx ?? false;
const useParentHeight = useParentHeightProp ?? useParentHeightCtx ?? false;
const forceStaticPlacement = forceStaticPlacementProp ?? forceStaticPlacementCtx ?? false;
const getCurrentWindow = useCallback(() => {
return IframeContext.iframeWindow ?? window;
}, [IframeContext.iframeWindow]);
useEffect(() => {
if (!isOpen || !disableBackgroundInteraction) return;
const handleScroll = () => {
close();
};
getCurrentDocument().addEventListener("scroll", handleScroll, true);
return () => {
getCurrentDocument().removeEventListener("scroll", handleScroll, true);
};
}, [isOpen, disableBackgroundInteraction, close, getCurrentDocument]);
useEffect(() => {
if (!isOpen) {
setPosition(null);
setMeasured(false);
return;
}
const id = requestAnimationFrame(() => {
const dropdown = dropdownRef.current;
const trigger = triggerRef.current;
if (!dropdown || !trigger) return;
const triggerRect = trigger.getBoundingClientRect();
const dropdownRect = dropdown.getBoundingClientRect();
const padding = 8;
let boundaryTop = 0;
let boundaryBottom = getCurrentWindow().innerHeight;
let boundaryLeft = 0;
let boundaryRight = getCurrentWindow().innerWidth;
if (useParentContainer) {
let parent = trigger.parentElement;
while (parent) {
if (parent.classList.contains("cometchat") || parent.scrollHeight > parent.clientHeight) {
const parentRect = parent.getBoundingClientRect();
boundaryTop = parentRect.top;
boundaryBottom = parentRect.bottom;
boundaryLeft = parentRect.left;
boundaryRight = parentRect.right;
break;
}
parent = parent.parentElement;
}
}
const pos = {};
if (forceStaticPlacement) {
switch (placement) {
case "top":
pos.top = `${String(triggerRect.top - dropdownRect.height - padding)}px`;
pos.left = `${String(Math.min(triggerRect.right - dropdownRect.width, boundaryRight - dropdownRect.width - padding))}px`;
break;
case "bottom":
pos.top = `${String(triggerRect.bottom + padding)}px`;
pos.left = `${String(Math.min(triggerRect.right - dropdownRect.width, boundaryRight - dropdownRect.width - padding))}px`;
break;
case "left":
pos.top = `${String(triggerRect.top)}px`;
pos.left = `${String(triggerRect.left - dropdownRect.width - padding)}px`;
break;
case "right":
pos.top = `${String(triggerRect.top)}px`;
pos.left = `${String(triggerRect.right + padding)}px`;
break;
default:
pos.top = `${String(triggerRect.bottom + padding)}px`;
pos.left = `${String(Math.min(triggerRect.right - dropdownRect.width, boundaryRight - dropdownRect.width - padding))}px`;
}
} else {
const spaceBelow = boundaryBottom - triggerRect.bottom;
if (spaceBelow >= dropdownRect.height + padding) {
pos.top = `${String(triggerRect.bottom + padding)}px`;
} else {
pos.top = `${String(triggerRect.top - dropdownRect.height - padding)}px`;
}
const rightAlignedLeft = triggerRect.right - dropdownRect.width;
if (rightAlignedLeft >= boundaryLeft + padding) {
pos.left = `${String(rightAlignedLeft)}px`;
} else {
pos.left = `${String(boundaryLeft + padding)}px`;
}
}
if (useParentHeight && useParentContainer) {
const topVal = parseFloat(pos.top ?? "0");
if (topVal < boundaryTop) {
pos.top = `${String(boundaryTop + padding)}px`;
}
if (topVal + dropdownRect.height > boundaryBottom) {
pos.top = `${String(boundaryBottom - dropdownRect.height - padding)}px`;
}
}
setPosition(pos);
setMeasured(true);
});
return () => {
cancelAnimationFrame(id);
};
}, [
isOpen,
triggerRef,
placement,
useParentContainer,
useParentHeight,
forceStaticPlacement,
getCurrentWindow
]);
useEffect(() => {
if (!isOpen || !measured) return;
const id = requestAnimationFrame(() => {
const firstItem = dropdownRef.current?.querySelector(
'button[role="menuitem"]:not(:disabled)'
);
firstItem?.focus();
});
return () => {
cancelAnimationFrame(id);
};
}, [isOpen, measured]);
const getMenuItems = useCallback(() => {
if (!dropdownRef.current) return [];
return Array.from(
dropdownRef.current.querySelectorAll('button[role="menuitem"]:not(:disabled)')
);
}, []);
const handleKeyDown = useCallback(
(e) => {
const items = getMenuItems();
if (items.length === 0) return;
const currentIndex = items.indexOf(getCurrentDocument().activeElement);
switch (e.key) {
case "ArrowDown": {
e.preventDefault();
const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
items[next]?.focus();
break;
}
case "ArrowUp": {
e.preventDefault();
const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
items[prev]?.focus();
break;
}
case "Home": {
e.preventDefault();
items[0]?.focus();
break;
}
case "End": {
e.preventDefault();
items[items.length - 1]?.focus();
break;
}
case "Escape": {
e.preventDefault();
e.stopPropagation();
close();
triggerRef.current?.focus();
break;
}
case "Tab": {
e.preventDefault();
if (items.length === 0) break;
let nextIdx;
if (e.shiftKey) {
nextIdx = currentIndex <= 0 ? items.length - 1 : currentIndex - 1;
} else {
nextIdx = currentIndex >= items.length - 1 ? 0 : currentIndex + 1;
}
items[nextIdx]?.focus();
break;
}
}
},
[close, getMenuItems, triggerRef, getCurrentDocument]
);
const baseClass = "cometchat-context-menu__dropdown";
const hiddenClass = !isOpen ? "cometchat-context-menu__dropdown--hidden" : "";
const classes = [baseClass, hiddenClass, className].filter(Boolean).join(" ");
const inlineStyle = {
...position ?? {},
// Before measurement: render off-screen to get dimensions without flicker
visibility: isOpen && !measured ? "hidden" : void 0
};
return /* @__PURE__ */ jsxs(Fragment, { children: [
isOpen && disableBackgroundInteraction && /* @__PURE__ */ jsx("div", { className: "cometchat-context-menu__overlay", onClick: close, "aria-hidden": "true" }),
/* @__PURE__ */ jsx(
"div",
{
ref: dropdownRef,
className: classes,
role: "menu",
"aria-label": getLocalizedString("accessibility_context_menu"),
onKeyDown: isOpen ? handleKeyDown : void 0,
tabIndex: -1,
style: inlineStyle,
children: isOpen ? children : null
}
)
] });
};
var CometChatContextMenuRoot = ({
items = [],
topMenuSize = 2,
onOptionClicked,
placement = "left",
moreButtonTooltip,
closeOnOutsideClick = true,
disableBackgroundInteraction = false,
onDropdownClose,
useParentContainer = false,
useParentHeight = false,
forceStaticPlacement = false,
children,
className
}) => {
const [isOpen, setIsOpen] = useState(false);
const rootRef = useRef(null);
const triggerRef = useRef(null);
const IframeContext = useCometChatFrameContext();
const getCurrentDocument = useCallback(() => {
return IframeContext.iframeDocument ?? document;
}, [IframeContext.iframeDocument]);
const onDropdownCloseRef = useRef(onDropdownClose);
onDropdownCloseRef.current = onDropdownClose;
const open = useCallback(() => {
setIsOpen(true);
}, []);
const close = useCallback(() => {
setIsOpen(false);
onDropdownCloseRef.current?.();
}, []);
const toggle = useCallback(() => {
setIsOpen((prev) => !prev);
}, []);
useEffect(() => {
if (!isOpen || !closeOnOutsideClick) return;
const handleClick = (e) => {
if (rootRef.current && !rootRef.current.contains(e.target)) {
close();
}
};
getCurrentDocument().addEventListener("mousedown", handleClick);
return () => {
getCurrentDocument().removeEventListener("mousedown", handleClick);
};
}, [isOpen, closeOnOutsideClick, close, getCurrentDocument]);
const ctxValue = useMemo(
() => ({
isOpen,
open,
close,
toggle,
placement,
onOptionClicked,
triggerRef,
useParentContainer,
useParentHeight,
forceStaticPlacement,
disableBackgroundInteraction
}),
[
isOpen,
open,
close,
toggle,
placement,
onOptionClicked,
useParentContainer,
useParentHeight,
forceStaticPlacement,
disableBackgroundInteraction
]
);
const baseClass = "cometchat-context-menu";
const classes = [baseClass, className].filter(Boolean).join(" ");
if (children) {
return /* @__PURE__ */ jsx(CometChatContextMenuContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx("div", { ref: rootRef, className: classes, children }) });
}
const effectiveTopSize = Math.max(0, Math.min(topMenuSize, items.length));
const topItems = items.slice(0, effectiveTopSize);
const overflowItems = items.slice(effectiveTopSize);
const showTrigger = overflowItems.length > 0;
return /* @__PURE__ */ jsx(CometChatContextMenuContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx("div", { ref: rootRef, className: classes, children: /* @__PURE__ */ jsxs("div", { className: "cometchat-context-menu__top-menu", children: [
topItems.map((item) => /* @__PURE__ */ jsx(CometChatContextMenuItem, { item, variant: "icon" }, item.id)),
showTrigger && /* @__PURE__ */ jsxs("div", { className: "cometchat-context-menu__trigger-wrapper", children: [
/* @__PURE__ */ jsx(CometChatContextMenuTrigger, { tooltip: moreButtonTooltip }),
/* @__PURE__ */ jsx(CometChatContextMenuDropdown, { children: overflowItems.map((item) => /* @__PURE__ */ jsx(CometChatContextMenuItem, { item, variant: "full" }, item.id)) })
] })
] }) }) });
};
var CometChatContextMenuComponent = (props) => {
return /* @__PURE__ */ jsx(CometChatContextMenuRoot, { ...props });
};
CometChatContextMenuComponent.displayName = "CometChatContextMenu";
var CometChatContextMenu = Object.assign(CometChatContextMenuComponent, {
Root: CometChatContextMenuRoot,
Item: CometChatContextMenuItem,
Trigger: CometChatContextMenuTrigger,
Dropdown: CometChatContextMenuDropdown
});
var GlobalConfigContext = createContext({});
var GlobalConfigProvider = ({
config,
children
}) => React3.createElement(GlobalConfigContext.Provider, { value: config }, children);
GlobalConfigProvider.displayName = "GlobalConfigProvider";
function useGlobalConfig() {
return useContext(GlobalConfigContext);
}
var CometChatThreadViewContext = createContext(
null
);
function useCometChatThreadViewContext() {
const ctx = useContext(CometChatThreadViewContext);
if (!ctx) {
throw new Error("useCometChatThreadViewContext must be used within <CometChatThreadView.Root>");
}
return ctx;
}
function formatCount(count) {
return count > 999 ? "999+" : String(count);
}
var CometChatThreadViewReplyCount = ({
text,
className
}) => {
const { replyCount } = useCometChatThreadViewContext();
const { getLocalizedString } = useLocale();
const replyWord = replyCount === 1 ? getLocalizedString("thread_view_reply") : getLocalizedString("thread_view_replies");
const displayText = text ?? `${formatCount(replyCount)} ${replyWord}`;
const baseClass = "cometchat-thread-view__count";
const cls = className ? `${baseClass} ${className}` : baseClass;
return /* @__PURE__ */ jsx("span", { className: cls, children: displayText });
};
var CometChatThreadViewIcon = ({
iconURL,
className
}) => {
const baseClass = "cometchat-thread-view__icon";
const customClass = iconURL ? "cometchat-thread-view__icon--custom" : "";
const cls = [baseClass, customClass, className].filter(Boolean).join(" ");
const customStyle = iconURL ? { backgroundImage: `url(${iconURL})` } : void 0;
return /* @__PURE__ */ jsx("span", { className: cls, style: customStyle, "aria-hidden": "true" });
};
var CometChatThreadViewUnreadIndicator = ({ className }) => {
const { unreadReplyCount } = useCometChatThreadViewContext();
if (unreadReplyCount <= 0) {
return null;
}
const baseClass = "cometchat-thread-view__unread-indicator";
const cls = className ? `${baseClass} ${className}` : baseClass;
return /* @__PURE__ */ jsx("span", { className: cls, "aria-hidden": "true" });
};
function formatCount2(count) {
return count > 999 ? "999+" : String(count);
}
var CometChatThreadViewRoot = ({
replyCount,
unreadReplyCount = 0,
onClick,
alignment = "right",
className,
children
}) => {
const { getLocalizedString } = useLocale();
const ctxValue = useMemo(
() => ({ replyCount, unreadReplyCount, onClick, alignment }),
[replyCount, unreadReplyCount, onClick, alignment]
);
if (replyCount <= 0) {
return null;
}
const countDisplay = formatCount2(replyCount);
const replyWord = replyCount === 1 ? getLocalizedString("thread_view_reply") : getLocalizedString("thread_view_replies");
let label = `${countDisplay} ${replyWord}, view thread`;
if (unreadReplyCount > 0) {
label = `${label}, ${String(unreadReplyCount)} unread`;
}
const rootBase = "cometchat-thread-view";
const modifierClass = alignment === "left" ? "cometchat-thread-view--left" : "cometchat-thread-view--right";
const unreadClass = unreadReplyCount > 0 ? "cometchat-thread-view--unread" : "";
const rootClass = [rootBase, modifierClass, unreadClass, className].filter(Boolean).join(" ");
const hasChildren = React3.Children.count(children) > 0;
return /* @__PURE__ */ jsx(CometChatThreadViewContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx("button", { type: "button", className: rootClass, "aria-label": label, onClick, children: hasChildren ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(CometChatThreadViewIcon, {}),
/* @__PURE__ */ jsx(CometChatThreadViewReplyCount, {}),
unreadReplyCount > 0 && /* @__PURE__ */ jsx(CometChatThreadViewUnreadIndicator, {})
] }) }) });
};
// src/components/base/CometChatThreadView/CometChatThreadView.tsx
var CometChatThreadView = {
Root: CometChatThreadViewRoot,
ReplyCount: CometChatThreadViewReplyCount,
Icon: CometChatThreadViewIcon};
// src/assets/status_sent.svg
var status_sent_default = 'data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="State=Send">%0A<path id="Vector" d="M6.32227 10.3446L12.2389 4.4279C12.3522 4.31679 12.4842 4.26123 12.6349 4.26123C12.7858 4.26123 12.9168 4.31695 13.0279 4.4284C13.139 4.53995 13.1946 4.67234 13.1946 4.82556C13.1946 4.9789 13.139 5.11112 13.0279 5.22223L6.71127 11.5446C6.60016 11.6557 6.47049 11.7112 6.32227 11.7112C6.17416 11.7112 6.04455 11.6557 5.93344 11.5446L2.95561 8.56673C2.84449 8.45518 2.79172 8.32262 2.79727 8.16906C2.80283 8.01562 2.86138 7.88334 2.97294 7.77223C3.08438 7.66112 3.21677 7.60556 3.37011 7.60556C3.52344 7.60556 3.65566 7.66112 3.76677 7.77223L6.32227 10.3446Z" fill="%23F9F8FD"/>%0A</g>%0A</svg>%0A';
// src/assets/status_delivered.svg
var status_delivered_default = 'data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="State=Delivered">%0A<path id="Vector" d="M1.39994 8.62199C1.28883 8.51088 1.23605 8.37943 1.24161 8.22765C1.24716 8.07576 1.3055 7.94426 1.41661 7.83315C1.52772 7.72571 1.65922 7.6711 1.81111 7.66932C1.96289 7.66743 2.09433 7.72204 2.20544 7.83315L4.76111 10.3998C4.824 10.4628 4.89066 10.5295 4.96111 10.5998L5.16111 10.7998C5.27222 10.9109 5.32683 11.0405 5.32494 11.1887C5.32305 11.3369 5.26655 11.4665 5.15544 11.5777L5.14444 11.5887C5.03333 11.6961 4.90366 11.7508 4.75544 11.7527C4.60733 11.7544 4.47772 11.6998 4.36661 11.5887L1.39994 8.62199ZM7.89994 10.3943L13.8221 4.47199C13.9332 4.36088 14.0647 4.30626 14.2166 4.30815C14.3685 4.31004 14.5 4.36654 14.6111 4.47765C14.7184 4.58876 14.7731 4.72021 14.7749 4.87199C14.7768 5.02388 14.7222 5.15538 14.6111 5.26649L8.28877 11.5887C8.17766 11.6998 8.04805 11.7553 7.89994 11.7553C7.75183 11.7553 7.62222 11.6998 7.51111 11.5887L4.54444 8.62199C4.437 8.51465 4.38511 8.3841 4.38877 8.23032C4.39255 8.07665 4.44811 7.94426 4.55544 7.83315C4.66655 7.72204 4.799 7.66649 4.95277 7.66649C5.10644 7.66649 5.23883 7.72204 5.34994 7.83315L7.89994 10.3943ZM11.4611 5.27199L8.28877 8.44432C8.18144 8.55165 8.05277 8.60349 7.90277 8.59982C7.75277 8.59615 7.62222 8.5406 7.51111 8.43315C7.4 8.32204 7.34444 8.18965 7.34444 8.03599C7.34444 7.88221 7.4 7.74976 7.51111 7.63865L10.6721 4.47765C10.7796 4.37021 10.9101 4.31649 11.0638 4.31649C11.2176 4.31649 11.35 4.37021 11.4611 4.47765C11.5722 4.58876 11.6278 4.72115 11.6278 4.87482C11.6278 5.02849 11.5722 5.16088 11.4611 5.27199Z" fill="%23F9F8FD"/>%0A</g>%0A</svg>%0A';
// src/assets/status_read.svg
var status_read_default = 'data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M1.39994 8.62199C1.28883 8.51088 1.23605 8.37943 1.24161 8.22765C1.24716 8.07576 1.3055 7.94426 1.41661 7.83315C1.52772 7.72571 1.65922 7.6711 1.81111 7.66932C1.96289 7.66743 2.09433 7.72204 2.20544 7.83315L4.76111 10.3998C4.824 10.4628 4.89066 10.5295 4.96111 10.5998L5.16111 10.7998C5.27222 10.9109 5.32683 11.0405 5.32494 11.1887C5.32305 11.3369 5.26655 11.4665 5.15544 11.5777L5.14444 11.5887C5.03333 11.6961 4.90366 11.7508 4.75544 11.7527C4.60733 11.7544 4.47772 11.6998 4.36661 11.5887L1.39994 8.62199ZM7.89994 10.3943L13.8221 4.47199C13.9332 4.36088 14.0647 4.30626 14.2166 4.30815C14.3685 4.31004 14.5 4.36654 14.6111 4.47765C14.7184 4.58876 14.7731 4.72021 14.7749 4.87199C14.7768 5.02388 14.7222 5.15538 14.6111 5.26649L8.28877 11.5887C8.17766 11.6998 8.04805 11.7553 7.89994 11.7553C7.75183 11.7553 7.62222 11.6998 7.51111 11.5887L4.54444 8.62199C4.437 8.51465 4.38511 8.3841 4.38877 8.23032C4.39255 8.07665 4.44811 7.94426 4.55544 7.83315C4.66655 7.72204 4.799 7.66649 4.95277 7.66649C5.10644 7.66649 5.23883 7.72204 5.34994 7.83315L7.89994 10.3943ZM11.4611 5.27199L8.28877 8.44432C8.18144 8.55165 8.05277 8.60349 7.90277 8.59982C7.75277 8.59615 7.62222 8.5406 7.51111 8.43315C7.4 8.32204 7.34444 8.18965 7.34444 8.03599C7.34444 7.88221 7.4 7.74976 7.51111 7.63865L10.6721 4.47765C10.7796 4.37021 10.9101 4.31649 11.0638 4.31649C11.2176 4.31649 11.35 4.37021 11.4611 4.47765C11.5722 4.58876 11.6278 4.72115 11.6278 4.87482C11.6278 5.02849 11.5722 5.16088 11.4611 5.27199Z" fill="%23F9F8FD"/>%0A</svg>%0A';
// src/assets/status_error.svg
var status_error_default = 'data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g clip-path="url(%23clip0_1981_627688)">%0A<mask id="mask0_1981_627688" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">%0A<rect width="16" height="16" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_1981_627688)">%0A<path d="M1.66699 8.00008C1.66699 4.50228 4.50252 1.66675 8.00033 1.66675C11.4981 1.66675 14.3337 4.50228 14.3337 8.00008C14.3337 11.4979 11.4981 14.3334 8.00033 14.3334C4.50252 14.3334 1.66699 11.4979 1.66699 8.00008Z" fill="white"/>%0A<path d="M8.00033 11.1539C8.15288 11.1539 8.28077 11.1023 8.38399 10.9991C8.48721 10.8959 8.53883 10.768 8.53883 10.6154C8.53883 10.4629 8.48721 10.335 8.38399 10.2317C8.28077 10.1286 8.15288 10.0771 8.00033 10.0771C7.84777 10.0771 7.71988 10.1286 7.61666 10.2317C7.51344 10.335 7.46183 10.4629 7.46183 10.6154C7.46183 10.768 7.51344 10.8959 7.61666 10.9991C7.71988 11.1023 7.84777 11.1539 8.00033 11.1539ZM8.00049 8.71808C8.14227 8.71808 8.26099 8.67014 8.35666 8.57425C8.45244 8.47847 8.50033 8.35975 8.50033 8.21808V5.21808C8.50033 5.07642 8.45238 4.95764 8.35649 4.86175C8.2606 4.76597 8.14183 4.71808 8.00016 4.71808C7.85838 4.71808 7.73966 4.76597 7.64399 4.86175C7.54821 4.95764 7.50033 5.07642 7.50033 5.21808V8.21808C7.50033 8.35975 7.54827 8.47847 7.64416 8.57425C7.74005 8.67014 7.85883 8.71808 8.00049 8.71808ZM8.00149 14.3334C7.12549 14.3334 6.3021 14.1672 5.53133 13.8347C4.76055 13.5023 4.0901 13.0511 3.51999 12.4812C2.94988 11.9114 2.49849 11.2412 2.16583 10.4707C1.83327 9.7003 1.66699 8.87714 1.66699 8.00125C1.66699 7.12525 1.83321 6.30186 2.16566 5.53108C2.4981 4.7603 2.94927 4.08986 3.51916 3.51975C4.08905 2.94964 4.75921 2.49825 5.52966 2.16558C6.3001 1.83303 7.12327 1.66675 7.99916 1.66675C8.87516 1.66675 9.69855 1.83297 10.4693 2.16541C11.2401 2.49786 11.9105 2.94903 12.4807 3.51891C13.0508 4.0888 13.5022 4.75897 13.8348 5.52941C14.1674 6.29986 14.3337 7.12303 14.3337 7.99891C14.3337 8.87492 14.1674 9.6983 13.835 10.4691C13.5025 11.2399 13.0514 11.9103 12.4815 12.4804C11.9116 13.0505 11.2414 13.5019 10.471 13.8346C9.70055 14.1671 8.87738 14.3334 8.00149 14.3334Z" fill="%23F44649"/>%0A</g>%0A</g>%0A<defs>%0A<clipPath id="clip0_1981_627688">%0A<rect width="16" height="16" fill="white"/>%0A</clipPath>%0A</defs>%0A</svg>%0A';
// src/assets/status_sending.svg
var status_sending_default = 'data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="State=Sending">%0A<path id="Vector" d="M8.5665 7.78867V5.08034C8.5665 4.93467 8.51545 4.81073 8.41334 4.7085C8.31123 4.60639 8.18728 4.55534 8.0415 4.55534C7.8915 4.55534 7.76556 4.60639 7.66367 4.7085C7.56189 4.81073 7.511 4.93467 7.511 5.08034V7.997C7.511 8.06734 7.5235 8.13312 7.5485 8.19434C7.5735 8.25556 7.60928 8.31295 7.65584 8.3665L9.97684 10.7477C10.0792 10.8621 10.2072 10.9174 10.361 10.9137C10.5147 10.91 10.6452 10.8544 10.7527 10.747C10.8563 10.6433 10.9082 10.5165 10.9082 10.3665C10.9082 10.2165 10.8566 10.0881 10.7533 9.98117L8.5665 7.78867ZM8.0005 14.5553C7.10106 14.5553 6.25234 14.3826 5.45434 14.0372C4.65623 13.6916 3.96106 13.2222 3.36884 12.6288C2.7765 12.0354 2.30767 11.3403 1.96234 10.5435C1.617 9.74673 1.44434 8.89906 1.44434 8.0005C1.44434 7.10106 1.61706 6.25234 1.9625 5.45434C2.30806 4.65623 2.7775 3.96106 3.37084 3.36884C3.96428 2.7765 4.65939 2.30767 5.45617 1.96234C6.25295 1.617 7.10061 1.44434 7.99917 1.44434C8.89861 1.44434 9.74734 1.61706 10.5453 1.9625C11.3434 2.30806 12.0386 2.7775 12.6308 3.37084C13.2232 3.96428 13.692 4.65939 14.0373 5.45617C14.3827 6.25295 14.5553 7.10062 14.5553 7.99917C14.5553 8.89862 14.3826 9.74734 14.0372 10.5453C13.6916 11.3434 13.2222 12.0386 12.6288 12.6308C12.0354 13.2232 11.3403 13.692 10.5435 14.0373C9.74673 14.3827 8.89906 14.5553 8.0005 14.5553ZM7.997 13.4998C9.50811 13.4998 10.8031 12.9614 11.8818 11.8845C12.9605 10.8077 13.4998 9.51378 13.4998 8.00267C13.4998 6.49156 12.9606 5.19661 11.882 4.11784C10.8034 3.03917 9.50939 2.49984 7.99984 2.49984C6.48684 2.49984 5.19195 3.03911 4.11517 4.11767C3.03828 5.19623 2.49984 6.49028 2.49984 7.99984C2.49984 9.51284 3.03828 10.8077 4.11517 11.8845C5.19195 12.9614 6.48589 13.4998 7.997 13.4998Z" fill="%23F9F8FD"/>%0A</g>%0A</svg>%0A';
var EDITABLE_MESSAGE_TYPES = /* @__PURE__ */ new Set([
CometChat.MESSAGE_TYPE.TEXT,
CometChat.MESSAGE_TYPE.IMAGE,
CometChat.MESSAGE_TYPE.VIDEO,
CometChat.MESSAGE_TYPE.AUDIO,
CometChat.MESSAGE_TYPE.FILE
]);
var LazyCometChatReactionsRoot = lazy(
() => import('./CometChatReactionsRoot-4NBOXP4P.js').then((m) => ({
default: m.CometChatReactionsRoot
}))
);
function getBubbleTypeClass(type, category) {
const key = `${type}_${category}`;
const map = {
text_message: "cometchat-message-bubble__text-message",
image_message: "cometchat-message-bubble__image-message",
video_message: "cometchat-message-bubble__video-message",
audio_message: "cometchat-message-bubble__audio-message",
file_message: "cometchat-message-bubble__file-message",
groupMember_action: "cometchat-message-bubble__group-message",
// AI agent reply (category 'agentic', type 'assistant') — gets its own
// background class so it doesn't blend into the conversation background.
assistant_agentic: "cometchat-message-bubble__assistant-message",
// Extension plugins — custom message types that need bubble backgrounds
extension_sticker_custom: "cometchat-message-bubble__image-message",
extension_poll_custom: "cometchat-message-bubble__text-message",
extension_document_custom: "cometchat-message-bubble__text-message",
extension_whiteboard_custom: "cometchat-message-bubble__text-message"
};
if (map[key]) return map[key];
if (category === CometChat.MessageCategory.CARD) {
return "cometchat-message-bubble__card-message";
}
return "";
}
var CometChatMessageBubble = ({
message,
alignment,
contentView,
group,
options = [],
hideAvatar = false,
hideSenderName = false,
hideTimestamp = false,
hideThreadView = false,
showError = false,
disableInteraction = false,
hideReceipts: hideReceiptsProp,
forceShowAvatar = false,
messageSentAtDateTimeFormat,
quickOptionsCount,
leadingView,
headerView,
statusInfoView,
footerView,
threadView,
bottomView,
replyView,
onAvatarClick,
onThreadRepliesClick,
onOptionClick,
onReactionChipClick,
onReactorClick,
isSelected = false,
ariaPosinset,
ariaSetsize,
className,
setRef,
includeBottomViewHeight = false,
toggleOptionsVisibility
}) => {
const globalConfig = useGlobalConfig();
const { getLocalizedString } = useLocale();
const effectiveHideReceipts = hideReceiptsProp ?? globalConfig.hideReceipts ?? false;
const [isHovering, setIsHovering] = useState(false);
const hoverTimeoutRef = useRef(null);
const bodyRef = useRef(null);
const bottomViewRef = useRef(null);
const [isOptionsLocked, setIsOptionsLocked] = useState(false);
const IframeContext = useCometChatFrameContext();
const getCurrentDocument = useCallback(() => {
return IframeContext.iframeDocument ?? document;
}, [IframeContext.iframeDocument]);
const handleDropdownClose = useCallback(() => {
setIsHovering(false);
}, []);
useEffect(() => {
if (!isOptionsLocked) return;
const handleOutsideClick = (e) => {
const optionsEl = getCurrentDocument().querySelector(
'[class*="message-bubble__options--visible"]'
);
if (optionsEl && !optionsEl.contains(e.target)) {
setIsOptionsLocked(false);
setIsHovering(false);
}
};
const timeoutId = setTimeout(() => {
getCurrentDocument().addEventListener("mousedown", handleOutsideClick);
}, 0);
return () => {
clearTimeout(timeoutId);
getCurrentDocument().removeEventListener("mousedown", handleOutsideClick);
};
}, [isOptionsLocked, getCurrentDocument]);
const isOutgoing = alignment === "right";
const isIncoming = alignment === "left";
const isAction = alignment === "center";
const sender = message.getSender();
const messageType = message.getType();
const messageCategory = message.getCategory();
const isEdited = Boolean(message.getEditedAt()) && messageCategory === CometChat.MessageCategory.MESSAGE && EDITABLE_MESSAGE_TYPES.has(messageType);
const replyCount = message.getReplyCount();
const sentAt = message.getSentAt();
const receiptState = showError ? "error" : getReceiptStatus(message);
const shouldShowAvatar = isIncoming && group != null && !hideAvatar || isIncoming && forceShowAvatar;
const shouldShowSenderName = isIncoming && group != null && !hideSenderName;
const shouldShowReceipts = isOutgoing && !effectiveHideReceipts && !isAction;
const handleThreadClick = useCallback(() => {
if (onThreadRepliesClick) {
onThreadRepliesClick(message);
}
}, [message, onThreadRepliesClick]);
const effectiveFooterContent = useMemo(() => {
if (footerView === null) return null;
if (footerView !== void 0) return footerView(message);
const reactions = message.getReactions();
const loggedInUid = message.getSender().getUid();
const isBlocked = isMessageModerated(message, loggedInUid) || isPermissionDeniedError(message, loggedInUid);
if (!isBlocked && reactions.length > 0) {
const msgId = message.getId();
const reactionClickHandler = onReactionChipClick ? (emoji) => {
onReactionChipClick(msgId, emoji);
} : void 0;
return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
LazyCometChatReactionsRoot,
{
message,
alignment,
...reactionClickHandler && { onReactionClick: reactionClickHandler },
...onReactorClick && { onReactorClick }
}
) });
}
return null;
}, [footerView, message, alignment, onReactionChipClick, onReactorClick]);
const effectiveBottomContent = useMemo(() => {
if (bottomView === null) return null;
if (bottomView !== void 0) return bottomView(message);
return null;
}, [bottomView, message]);
useEffect(() => {
const bodyEl = bodyRef.current;
const bottomEl = bottomViewRef.current;
if (!bodyEl || !bottomEl) return;
const sync = () => {
const w = String(Math.max(bodyEl.offsetWidth, 240));
bottomEl.style.maxWidth = `${w}px`;
};
sync();
const ro = new ResizeObserver(sync);
ro.observe(bodyEl);
return () => {
ro.disconnect();
};
}, [effectiveBottomContent]);
const effectiveReplyContent = useMemo(() => {
if (replyView === null) return null;
if (replyView !== void 0) return replyView;
return null;
}, [replyView]);
const effectiveThreadContent = useMemo(() => {
if (threadView === null) return null;
if (threadView !== void 0) return threadView(message);
if (!hideThreadView && replyCount > 0 && !isAction) {
return /* @__PURE__ */ jsxs(CometChatThreadView.Root, { replyCount, onClick: handleThreadClick, children: [
/* @__PURE__ */ jsx(CometChatThreadView.Icon, {}),
/* @__PURE__ */ jsx(CometChatThreadView.ReplyCount, {})
] });
}
return null;
}, [threadView, message, hideThreadView, replyCount, isAction, handleThreadClick]);
const handleMouseEnter = useCallback(() => {
if (disableInteraction) return;
if (hoverTimeoutRef.current) {
clearTimeout(hoverTimeoutRef.current);
hoverTimeoutRef.current = null;
}
setIsHovering(true);
}, [disableInteraction]);
const handleMouseLeave = useCallback(() => {
hoverTimeoutRef.current = setTimeout(() => {
setIsHovering(false);
}, 150);
}, []);
const optionsVisible = toggleOptionsVisibility ?? isHovering;
const contextMenuItems = useMemo(() => {
return options.map((opt) => {
const item = {
id: opt.id,
title: opt.title,
onClick: () => {
opt.onClick(message);
onOptionClick?.(opt, message);
}
};
if (opt.iconURL) {
item.iconURL = opt.iconURL;
}
return item;
});
}, [options, message, onOptionClick]);
const handleAvatarClick = useCallback(() => {
if (onAvatarClick) {
onAvatarClick(sender);
}
}, [sender, onAvatarClick]);
const handleAvatarKeyDown = useCallback(
(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleAvatarClick();
}
},
[handleAvatarClick]
);
const ariaLabel = useMemo(() => {
const parts = [];
parts.push(sender.getName());
parts.push(`${messageType} message`);
return parts.join(", ");
}, [sender, messageType]);
const bubbleTypeClass = getBubbleTypeClass(messageType, messageCategory);
const wrapperClasses = [
"cometchat-message-bubble__wrapper",
isOutgoing ? "cometchat-message-bubble__wrapper--outgoing" : "",
isSelected ? "cometchat-message-bubble__wrapper--selected" : "",
receiptState === "error" && effectiveBottomContent ? "cometchat-message-bubble__wrapper--moderation-disapproved" : "",
// Plain global class names for external CSS targeting
"cometchat-message-bubble__wrapper",
className
].filter(Boolean).join(" ");
const bubbleClasses = [
"cometchat-message-bubble",
isIncoming ? "cometchat-message-bubble-incoming" : "",
isOutgoing ? "cometchat-message-bubble-outgoing" : "",
isAction ? "cometchat-message-bubble-action" : "",
// Plain global class names (non-hashed) so external CSS (e.g. AI chat overrides) can target them
isIncoming ? "cometchat-message-bubble-incoming" : "",
isOutgoing ? "cometchat-message-bubble-outgoing" : ""
].filter(Boolean).join(" ");
const bodyClasses = ["cometchat-message-bubble__body", bubbleTypeClass].filter(Boolean).join(" ");
const receiptIcon = useMemo(() => {
switch (receiptState) {
case "read":
return status_read_default;
case "delivered":
return status_delivered_default;
case "error":
return status_error_default;
case "wait":
return status_sending_default;
default:
return status_sent_default;
}
}, [receiptState]);
const receiptLabel = useMemo(() => {
switch (receiptState) {
case "read":
return getLocalizedString("message_bubble_read");
case "delivered":
return getLocalizedString("message_bubble_delivered");
case "error":
return getLocalizedString("message_bubble_error");
case "wait":
return getLocalizedString("message_bubble_sending");
default:
return getLocalizedString("message_bubble_sent");
}
}, [receiptState, getLocalizedString]);
return /* @__PURE__ */ jsxs(
"div",
{
ref: setRef,
className: wrapperClasses,
role: "article",
"aria-label": ariaLabel,
"aria-selected": isSelected || void 0,
"aria-posinset": ariaPosinset,
"aria-setsize": ariaSetsize,
children: [
leadingView !== null && (shouldShowAvatar || leadingView) && /* @__PURE__ */ jsx("div", { className: "cometchat-message-bubble__leading-view", children: leadingView ? leadingView(message) : /* @__PURE__ */ jsx(
"div",
{
onClick: handleAvatarClick,
onKeyDown: handleAvatarKeyDown,
role: "button",
tabIndex: 0,
"aria-label": getLocalizedString("accessibility_avatar_for").replace(
"{name}",
sender.getName()
),
children: /* @__PURE__ */ jsxs(CometChatAvatar.Root, { image: sender.getAvatar(), name: sender.getName(), size: "small", children: [
/* @__PURE__ */ jsx(CometChatAvatar.Image, {}),
/* @__PURE__ */ jsx(CometChatAvatar.Initials, {})
] })
}
) }),
/* @__PURE__ */ jsxs("div", { className: bubbleClasses, children: [
headerView !== null && (shouldShowSenderName || headerView) && /* @__PURE__ */ jsx("div", { className: "cometchat-message-bubble__header-view", children: headerView ? headerView(message) : /* @__PURE__ */ jsx("span", { className: "cometchat-message-bubble__sender-name", children: sender.getName() }) }),
/* @__PURE__ */ jsxs("div", { className: "cometchat-message-bubble__body-container", onMouseLeave: handleMouseLeave, children: [
contextMenuItems.length > 0 && !disableInteraction && !isAction && /* @__PURE__ */ jsx(
"div",
{
className: [
"cometchat-message-bubble__options",
optionsVisible ? "cometchat-message-bubble__options--visible" : ""
].filter(Boolean).join(" "),
style: includeBottomViewHeight ? { height: "stretch" } : bodyRef.current ? { height: `${String(bodyRef.current.clientHeight)}px` } : void 0,
role: "toolbar",
children: /* @__PURE__ */ jsx(
CometChatContextMenu,
{
items: contextMenuItems,
topMenuSize: quickOptionsCount ?? 2,
placement: isOutgoing ? "left" : "right",
disableBackgroundInteraction: true,
useParentContainer: true,
onDropdownClose: handleDropdownClose
},
isHovering ? "hovered" : "not-hovered"
)
}
),
/* @__PURE__ */ jsxs(
"div",
{
className: [
"cometchat-message-bubble__body-wrapper",
"cometchat-message-bubble__body-wrapper"
].join(" "),
children: [
/* @__PURE__ */ jsxs(
"div",
{
ref: bodyRef,
className: bodyClasses,
onMouseEnter: handleMouseEnter,
role: disableInteraction ? void 0 : "presentation",
children: [
effectiveReplyContent && /* @__PURE__ */ jsx("div", { className: "cometchat-message-bubble__body-reply-view", children: effectiveReplyContent }),
/* @__PURE__ */ jsx(
"div",
{
className: [
"cometchat-message-bubble__body-content-view",
"cometchat-message-bubble__body-content-view"
].join(" "),
children: contentView
}
),
statusInfoView !== null && !isAction && messageType !== "meeting" && /* @__PURE__ */ jsx(
"div",
{
className: [
"cometchat-message-bubble__body-status-info-view",
"cometchat-message-bubble__body-status-info-view"
].join(" "),
role: "status",
"aria-live": "polite",
children: