@droppii-org/chat-sdk
Version:
Droppii React Chat SDK
82 lines (81 loc) • 6.48 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Avatar, Input, message } from "antd";
import { useGetUserSideInfo } from "../../hooks/session/useGetUserSideInfo";
import useConversationStore from "../../store/conversation";
import { Icon } from "../icon";
import { useCreateNote } from "../../hooks/session/useCreateNote";
import { useUpdateNote } from "../../hooks/session/useUpdateNote";
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { useBoolean } from "ahooks";
const { TextArea } = Input;
const UserSection = () => {
var _a, _b, _c, _d, _e, _f, _g;
const { t } = useTranslation();
const conversationData = useConversationStore((state) => state.conversationData);
const exConversationInfo = JSON.parse((conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex) || "{}");
const timerRef = useRef(null);
const conversationId = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "";
const userId = ((_b = (_a = exConversationInfo === null || exConversationInfo === void 0 ? void 0 : exConversationInfo.sessionInfo) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.ownerId) || "";
const { data } = useGetUserSideInfo(conversationId, userId);
const { mutate: createNote } = useCreateNote();
const { mutate: updateNote } = useUpdateNote();
const initialNote = (_d = (_c = data === null || data === void 0 ? void 0 : data.note) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : "";
const [noteValue, setNoteValue] = useState(initialNote);
const [isOpen, { toggle }] = useBoolean(true);
const scheduleSave = (value) => {
if (timerRef.current) {
window.clearTimeout(timerRef.current);
}
timerRef.current = window.setTimeout(() => {
var _a, _b, _c;
const prev = (_b = (_a = data === null || data === void 0 ? void 0 : data.note) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : "";
if (value === prev)
return;
if (!prev) {
createNote({
conversationId,
content: value,
targetId: userId,
}, {
onSuccess: () => {
message.success(t("note_created"));
},
onError: () => {
message.error(t("create_note_failed"));
},
});
}
else {
updateNote({
noteId: ((_c = data === null || data === void 0 ? void 0 : data.note) === null || _c === void 0 ? void 0 : _c.id) || "",
content: value,
}, {
onSuccess: () => {
message.success(t("note_updated"));
},
onError: () => {
message.error(t("update_note_failed"));
},
});
}
}, 1000);
};
useEffect(() => {
var _a, _b;
setNoteValue((_b = (_a = data === null || data === void 0 ? void 0 : data.note) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : "");
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [(_e = data === null || data === void 0 ? void 0 : data.note) === null || _e === void 0 ? void 0 : _e.content, conversationId, userId]);
return (_jsxs("div", { className: "flex flex-col gap-3 border-b px-4 py-3", children: [_jsxs("div", { role: "button", onClick: toggle, className: "flex items-center gap-3 bg-white flex-wrap", children: [_jsx(Avatar, { src: data === null || data === void 0 ? void 0 : data.avatar, className: "min-w-6 min-h-6", children: ((_g = (_f = data === null || data === void 0 ? void 0 : data.fullName) === null || _f === void 0 ? void 0 : _f.charAt) === null || _g === void 0 ? void 0 : _g.call(_f, 0)) || "A" }), _jsx("div", { className: "flex flex-col overflow-hidden flex-1", children: _jsxs("p", { className: "text-sm truncate", children: [(data === null || data === void 0 ? void 0 : data.fullName) || "", "(", data === null || data === void 0 ? void 0 : data.username, ")"] }) }), _jsx(Icon, { icon: isOpen ? "angle-up-o" : "angle-down-o", size: 18 })] }), isOpen && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex justify-between items-center gap-2", children: [_jsxs("p", { className: "text-sm flex items-center gap-3 flex-1 min-w-0", children: [" ", _jsx("span", { className: "font-light w-16 text-gray-400 flex-shrink-0", children: "User ID" }), _jsx("span", { className: "truncate", children: (data === null || data === void 0 ? void 0 : data.id) || "" }), " "] }), _jsx(Icon, { icon: "copy-o", size: 16, onClick: () => {
navigator.clipboard.writeText((data === null || data === void 0 ? void 0 : data.id) || "");
message.success(t("copied_to_clipboard"));
} })] }), _jsxs("div", { className: "flex justify-between items-center gap-2", children: [_jsxs("p", { className: "text-sm truncate flex gap-3", children: [_jsx("span", { className: "font-light text-gray-400 w-16", children: "Username" }), (data === null || data === void 0 ? void 0 : data.username) || ""] }), _jsx(Icon, { icon: "copy-o", size: 16, onClick: () => {
navigator.clipboard.writeText((data === null || data === void 0 ? void 0 : data.id) || "");
message.success(t("copied_to_clipboard"));
} })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("p", { className: "text-sm flex gap-3", children: _jsx("span", { className: "font-light text-gray-400 w-16", children: "Note" }) }), _jsx(TextArea, { value: noteValue, placeholder: t("add_note"), className: "border-none py-0", autoSize: { minRows: 1, maxRows: 6 }, onChange: (e) => {
const v = e.target.value;
setNoteValue(v);
scheduleSave(v);
} })] })] }))] }));
};
export default UserSection;