@droppii-org/chat-sdk
Version:
Droppii React Chat SDK
128 lines (127 loc) • 6.81 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Avatar, Button, message } from "antd";
import { Icon } from "../icon";
import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
import useConversationStore from "../../store/conversation";
import MediaCollection from "../mediaCollection";
import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { SessionStatus, SessionTag } from "../../types/chat";
import SelectSession from "./SelectSession";
import { useUpdateSession } from "../../hooks/session/useUpdateSession";
import useAuthStore from "../../store/auth";
import SearchDrawer from "../searchConversation/SearchDrawer";
const MessageHeader = ({ onClose, currentSession }) => {
var _a;
const { t } = useTranslation();
const isCx = useAuthStore((state) => state.isCx);
const conversationData = useConversationStore((state) => state.conversationData);
const { mutate: updateSession } = useUpdateSession();
const { avatar, displayName } = useConversationDisplayData(conversationData);
const [currentSessionStatus, setCurrentSessionStatus] = useState(SessionStatus.UNASSIGNED);
const [currentSessionTag, setCurrentSessionTag] = useState(SessionTag.NONE);
const statusOptions = useMemo(() => {
return [
{
label: t("unassigned"),
value: SessionStatus.UNASSIGNED,
tintColorClassname: "!text-amber-500",
tintColorClassnameBg: "!bg-amber-500",
bgTintColorClassname: "!bg-amber-100",
},
{
label: t("waiting_process"),
value: SessionStatus.WAITING_PROCESS,
tintColorClassname: "!text-orange-500",
tintColorClassnameBg: "!bg-orange-500",
bgTintColorClassname: "!bg-orange-100",
},
{
label: t("in_process"),
value: SessionStatus.IN_PROCESS,
tintColorClassname: "!text-blue-500",
tintColorClassnameBg: "!bg-blue-500",
bgTintColorClassname: "!bg-blue-100",
},
{
label: t("completed"),
value: SessionStatus.COMPLETED,
tintColorClassname: "!text-green-500",
tintColorClassnameBg: "!bg-green-500",
bgTintColorClassname: "!bg-green-100",
},
];
}, [t]);
const tagOptions = useMemo(() => {
return [
{
label: t("select_tag"),
value: SessionTag.NONE,
tintColorClassname: "!text-gray-500",
tintColorClassnameBg: "!bg-gray-500",
bgTintColorClassname: "!bg-gray-100",
},
{
label: t("awaiting_reply"),
value: SessionTag.AWAITING_REPLY,
tintColorClassname: "!text-purple-500",
tintColorClassnameBg: "!bg-purple-500",
bgTintColorClassname: "!bg-purple-100",
},
{
label: t("slow_processing"),
value: SessionTag.SLOW_PROCESSING,
tintColorClassname: "!text-red-500",
tintColorClassnameBg: "!bg-red-500",
bgTintColorClassname: "!bg-red-100",
},
{
label: t("temporarily_paused"),
value: SessionTag.TEMPORARILY_PAUSED,
tintColorClassname: "!text-gray-500",
tintColorClassnameBg: "!bg-gray-500",
bgTintColorClassname: "!bg-gray-100",
},
];
}, [t]);
const handleUpdateSession = (value, type, isSameValue) => {
let newValue = value;
if (type === "tag" &&
value === SessionTag.TEMPORARILY_PAUSED &&
isSameValue) {
newValue = SessionTag.NONE;
}
if (currentSession) {
if (!isSameValue ||
(type === "tag" && value === SessionTag.TEMPORARILY_PAUSED)) {
updateSession({
sessionId: currentSession.id,
[type]: newValue,
}, {
onError(error) {
var _a, _b;
message.error(((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) ||
t(`update_session_${type}_failed`));
},
onSuccess() {
if (type === "status") {
setCurrentSessionStatus(newValue);
}
else {
setCurrentSessionTag(newValue);
}
},
});
}
}
};
useEffect(() => {
if (currentSession) {
setCurrentSessionTag(currentSession.tag);
setCurrentSessionStatus(currentSession.status);
}
}, [currentSession]);
return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3 bg-white flex-wrap", children: [_jsx(Avatar, { src: avatar, size: "large", className: "min-w-10 min-h-10", children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }), _jsxs("div", { className: "flex flex-col overflow-hidden flex-1", children: [_jsx("p", { className: "text-base truncate", children: displayName || "" }), _jsx("p", { className: "text-xs text-gray-500 truncate", children: "2 thành viên" })] }), _jsxs("div", { className: "flex items-center gap-2 justify-end overflow-hidden", children: [isCx && (_jsx(SelectSession, { placeholder: t("select_tag"), options: tagOptions, value: currentSessionTag, onChange: (value) => handleUpdateSession(value, "tag", value === currentSessionTag), excludeOptions: [SessionTag.SLOW_PROCESSING, SessionTag.NONE] })), isCx && (_jsx(SelectSession, { placeholder: t("select_status"), options: statusOptions, value: currentSessionStatus, onChange: (value) => handleUpdateSession(value, "status", value === currentSessionStatus) })), _jsx(SearchDrawer, {}), _jsx(MediaCollection, {}), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "align-justify-o", size: 22 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] })] }));
};
export default MessageHeader;