@droppii-org/chat-sdk
Version:
Droppii React Chat SDK
71 lines (70 loc) • 6.53 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import dayjs from "dayjs";
import clsx from "clsx";
import { Avatar } from "antd";
import { MessageType, } from "@openim/wasm-client-sdk";
import TextMessageItem from "./TextMessage";
import ImageMessageItem from "./ImageMessage";
import FileMessageItem from "./FileMessage";
import VideoMessageItem from "./VideoMessage";
import { getVisibleNeighbor, visibleTypeMessage, } from "../../../hooks/message/useMessage";
import { MSG_ITEM_CONTENT_PREFIX, MSG_ITEM_PREFIX } from "../../../constants";
import { formatTimestamp } from "../../../utils/common";
import useAuthStore from "../../../store/auth";
import useConversationStore from "../../../store/conversation";
import { useMemo } from "react";
import UrlTextMessageItem from "./UrlTextMessage";
const MessageItem = ({ message, allMessages }) => {
var _a, _b, _c, _d;
const userID = useAuthStore((state) => state.userID);
const isCrm = useAuthStore((state) => state.isCrm);
const conversationData = useConversationStore((state) => state.conversationData);
const showSenderInfo = useMemo(() => {
var _a, _b, _c;
try {
const isChatSupport = (_c = (_b = (_a = JSON.parse((conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex) || "{}")) === null || _a === void 0 ? void 0 : _a.sessionInfo) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.botId;
return isChatSupport && isCrm;
}
catch (_d) {
console.log("Failed to parse conversationData.ex");
}
}, [conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex, isCrm]);
const isVisibleGroup = visibleTypeMessage.includes(message === null || message === void 0 ? void 0 : message.contentType);
const renderMessageByType = (message) => {
switch (message === null || message === void 0 ? void 0 : message.contentType) {
case MessageType.TextMessage:
return _jsx(TextMessageItem, { message: message });
case MessageType.PictureMessage:
return _jsx(ImageMessageItem, { message: message });
case MessageType.FileMessage:
return _jsx(FileMessageItem, { message: message });
case MessageType.VideoMessage:
return _jsx(VideoMessageItem, { message: message });
case MessageType.UrlTextMessage:
return _jsx(UrlTextMessageItem, { message: message });
default:
return _jsx(TextMessageItem, { message: message });
}
};
if (!isVisibleGroup)
return null;
const isMine = (message === null || message === void 0 ? void 0 : message.sendID) === userID;
const previousMessage = getVisibleNeighbor(allMessages, message, "prev");
const nextMessage = getVisibleNeighbor(allMessages, message, "next");
const prevSameUser = (previousMessage === null || previousMessage === void 0 ? void 0 : previousMessage.sendID) === (message === null || message === void 0 ? void 0 : message.sendID);
const nextSameUser = (nextMessage === null || nextMessage === void 0 ? void 0 : nextMessage.sendID) === (message === null || message === void 0 ? void 0 : message.sendID);
const prevTimeBreak = !previousMessage ||
!dayjs(message.sendTime).isSame(previousMessage.sendTime, "days");
const showTimeBreak = prevTimeBreak;
const showSenderAvatar = !nextSameUser;
const showSenderName = !prevSameUser && !isMine;
if (!isCrm && MessageType.CustomMessage === (message === null || message === void 0 ? void 0 : message.contentType)) {
return null;
}
return (_jsxs("div", { className: "flex flex-col gap-2 py-1 px-3 sm:px-4 min-w-0", id: `${MSG_ITEM_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, children: [showTimeBreak && (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-xs text-gray-600 text-center bg-neutral-100 px-2 py-1 rounded-full", children: formatTimestamp(message.sendTime, {
dateMonthFormat: "DD MMMM",
}) }) })), _jsx("div", { className: clsx("flex min-w-0", isMine ? "justify-end" : "justify-start"), children: _jsxs("div", { className: clsx("flex flex-1 items-end gap-2 min-w-0", isMine ? "justify-end" : "justify-start"), children: [!isMine && showSenderInfo && (_jsx("div", { className: "flex items-center justify-center w-[32px] h-[32px]", children: showSenderAvatar && (_jsx(Avatar, { src: message === null || message === void 0 ? void 0 : message.senderFaceUrl, children: ((_b = (_a = message === null || message === void 0 ? void 0 : message.senderNickname) === null || _a === void 0 ? void 0 : _a.charAt) === null || _b === void 0 ? void 0 : _b.call(_a, 0)) || "A" })) })), _jsxs("div", { className: clsx("flex flex-col flex-[0.8] min-w-0", isMine ? "items-end" : "items-start"), children: [showSenderName && showSenderInfo && (_jsx("span", { className: "text-xs text-gray-500 mb-1 px-3", children: message === null || message === void 0 ? void 0 : message.senderNickname })), _jsxs("div", { className: clsx("px-3 py-2 rounded-2xl max-w-full min-w-0 break-words flex flex-col flex-1 text-gray-900 gap-1", isMine ? "bg-blue-100" : "bg-white"), style: { wordBreak: "break-word", overflowWrap: "anywhere" }, id: `${MSG_ITEM_CONTENT_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, children: [(message === null || message === void 0 ? void 0 : message.contentType) === MessageType.MergeMessage ? (_jsxs("div", { children: [(_d = (_c = message === null || message === void 0 ? void 0 : message.mergeElem) === null || _c === void 0 ? void 0 : _c.multiMessage) === null || _d === void 0 ? void 0 : _d.map((item) => {
return renderMessageByType(item);
}), (message === null || message === void 0 ? void 0 : message.textElem) && _jsx(TextMessageItem, { message: message })] })) : (renderMessageByType(message)), _jsx("span", { className: clsx("text-xs text-gray-500 text-right"), children: dayjs(message === null || message === void 0 ? void 0 : message.sendTime).format("HH:mm") })] })] })] }) }, message === null || message === void 0 ? void 0 : message.clientMsgID)] }, message === null || message === void 0 ? void 0 : message.clientMsgID));
};
export default MessageItem;