@droppii-org/chat-sdk
Version:
Droppii React Chat SDK
93 lines (92 loc) • 5.92 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Dropdown, Empty, Spin } from "antd";
import { useTranslation } from "react-i18next";
import useConversationStore from "../../store/conversation";
import { useSearchMessage } from "../../hooks/search/useSearchMessage";
import { useCallback, useEffect, useState } from "react";
import dayjs from "dayjs";
import InfiniteScroll from "react-infinite-scroll-component";
import { MessageType, SessionType } from "@openim/wasm-client-sdk";
import { Icon } from "../icon";
import { DChatSDK } from "../../constants/sdk";
import { useChatContext } from "../../context/ChatContext";
import { message as antdMessage } from "antd";
const LinkPreview = ({ url }) => {
const [title, setTitle] = useState("");
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
if (!url)
return;
setIsLoading(true);
fetch(`https://api.microlink.io?url=${encodeURIComponent(url)}`)
.then((res) => res.json())
.then((res) => {
var _a;
if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.title) {
setTitle(res.data.title);
}
})
.catch(() => {
setTitle("");
})
.finally(() => {
setIsLoading(false);
});
}, [url]);
return (_jsxs("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "flex flex-col truncate text-blue-600 cursor-pointer", title: title || url, children: [isLoading && (_jsx("span", { className: "font-medium truncate text-gray-900", children: url })), !isLoading &&
(title ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-medium truncate text-gray-900", children: title }), _jsx("span", { className: "text-sm text-gray-500 truncate", children: url })] })) : (_jsx("span", { className: "font-medium truncate text-gray-900", children: url })))] }));
};
const LinkCollection = ({ onClose }) => {
const { t } = useTranslation();
const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
const { user } = useChatContext();
const onPressItem = async (message) => {
const { data } = await DChatSDK.getOneConversation({
sourceID: message.sessionType === SessionType.Group
? message.groupID
: (user === null || user === void 0 ? void 0 : user.userID) !== message.sendID
? message.sendID
: message.recvID,
sessionType: message.sessionType,
});
if (!data) {
return antdMessage.error(t("err_get_conversation"));
}
useConversationStore
.getState()
.setConversationData(data, message.clientMsgID);
useConversationStore
.getState()
.setSelectedConversationId(data.conversationID);
onClose();
};
const { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useSearchMessage({
payload: {
recvID: selectedSourceId,
contentType: MessageType.UrlTextMessage,
},
});
const renderItem = useCallback((date, items) => {
return (_jsxs("div", { className: "px-3", children: [_jsx("span", { className: "text-sm font-medium text-gray-500 px-3", children: dayjs(date).format("DD MMMM, YYYY") }), _jsx("div", { className: "flex flex-col gap-1 mt-2", children: items.map((item) => {
var _a, _b, _c;
const urls = ((_b = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}")) === null || _b === void 0 ? void 0 : _b.urls) || [];
const menuItems = [
{
key: "open",
label: "Xem tin nhắn",
onClick: () => onPressItem(item.chatLog),
},
];
return (_jsx("div", { children: urls.map((url, index) => {
var _a;
return (_jsxs("div", { className: "bg-gray-100 flex gap-2 items-center p-2 mb-1", children: [_jsx("div", { className: "flex items-center justify-center shrink-0", children: _jsx(Icon, { icon: "link-b", size: 16 }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx(LinkPreview, { url: url }) }), _jsx(Dropdown, { menu: { items: menuItems }, trigger: ["click"], placement: "bottomRight", children: _jsx("div", { className: "flex items-center justify-center shrink-0 cursor-pointer p-1 hover:bg-gray-200 rounded ml-2", onClick: (e) => e.stopPropagation(), children: _jsx(Icon, { icon: "more-horizontal-b", size: 16 }) }) })] }, `${(_a = item.chatLog) === null || _a === void 0 ? void 0 : _a.clientMsgID}-${index}`));
}) }, (_c = item.chatLog) === null || _c === void 0 ? void 0 : _c.clientMsgID));
}) })] }, date));
}, []);
if (dataFlatten.length === 0 && !isLoading)
return _jsx(Empty, { description: t("no_media_files") });
if (isLoading)
return (_jsx("div", { className: "flex items-center justify-center", children: _jsx(Spin, {}) }));
return (_jsx("div", { id: "scrollableFileDiv", className: "h-full overflow-auto", children: _jsx(InfiniteScroll, { dataLength: Object.keys(groupedData).length, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableFileDiv", children: Object.entries(groupedData).map(([date, items]) => renderItem(date, items)) }) }));
};
export default LinkCollection;