anln_2.4 #44
|
|
@ -21,7 +21,10 @@ export default function MessageDetail({}) {
|
|||
// const [hasMore, setHasMore] = useState(true);
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const [oldMessages, setOldMessages] = useState([]);
|
||||
const [oldMessages, setOldMessages] = useState({
|
||||
list: [],
|
||||
isGetHistory: false,
|
||||
});
|
||||
const [messages, setMessages] = useState([]);
|
||||
const [handledmessages, setHandledmessages] = useState([]);
|
||||
const [sessionId, setSessionId] = useState();
|
||||
|
|
@ -60,9 +63,10 @@ export default function MessageDetail({}) {
|
|||
}, []);
|
||||
useEffect(() => {
|
||||
const intervalId = setInterval(() => {
|
||||
// debugger;
|
||||
// console.log("oldMessages[0]", oldMessages[0]);
|
||||
if (oldMessages[0]) {
|
||||
updateMessages(oldMessages[0]?.id, 0, oldMessages);
|
||||
if (oldMessages.list[0]) {
|
||||
updateMessages(oldMessages.list[0]?.id, 0, oldMessages.list);
|
||||
// toScrollBottom.current = 1;
|
||||
}
|
||||
}, 3000); // 间隔时间为3秒
|
||||
|
|
@ -71,13 +75,14 @@ export default function MessageDetail({}) {
|
|||
return () => {
|
||||
clearInterval(intervalId);
|
||||
};
|
||||
}, [oldMessages]);
|
||||
}, [oldMessages.list]);
|
||||
useEffect(() => {
|
||||
if (toScrollBottom.current) {
|
||||
// debugger;
|
||||
if (toScrollBottom.current && !oldMessages.isGetHistory) {
|
||||
scrollBox.current?.scrollTo(0, scrollBox.current.scrollHeight + 50);
|
||||
toScrollBottom.current = 0;
|
||||
}
|
||||
}, [messages]);
|
||||
}, [oldMessages.list, oldMessages.isGetHistory]);
|
||||
useEffect(() => {
|
||||
if (sessionId && userInfo.mid) {
|
||||
loadEarlierHistory().then((res) => {
|
||||
|
|
@ -190,7 +195,10 @@ export default function MessageDetail({}) {
|
|||
}
|
||||
setOffset(data.data.offset);
|
||||
setMore(data.data.more);
|
||||
let mathNewMessages = handleData([...oldMessages, ...data.data.list]);
|
||||
let mathNewMessages = handleData(
|
||||
[...oldMessages.list, ...data.data.list],
|
||||
oldMessages.list.length > 0
|
||||
);
|
||||
// setMessages((prev) => [...prev, ...temMessages]);
|
||||
setLoading(false);
|
||||
return mathNewMessages;
|
||||
|
|
@ -209,7 +217,6 @@ export default function MessageDetail({}) {
|
|||
// });
|
||||
return;
|
||||
}
|
||||
|
||||
//查询历史记录的时候后移一位，防止记录重复
|
||||
setOffset((prev) => prev + 1);
|
||||
//请求接口发送私信
|
||||
|
|
@ -266,7 +273,7 @@ export default function MessageDetail({}) {
|
|||
}
|
||||
}
|
||||
|
||||
const handleData = (list) => {
|
||||
const handleData = (list, isGetHistory) => {
|
||||
// console.log("list", list);
|
||||
const account = get("account");
|
||||
const temMessages = list.map((item) => {
|
||||
|
|
@ -277,6 +284,7 @@ export default function MessageDetail({}) {
|
|||
// createdAt: new Date(item.ct * 1000).toISOString(),
|
||||
createdAt: item.ct,
|
||||
text: item.message,
|
||||
m_type: item.m_type,
|
||||
user: {
|
||||
_id: account?.mid,
|
||||
name: account?.name,
|
||||
|
|
@ -289,10 +297,13 @@ export default function MessageDetail({}) {
|
|||
_id: item.id,
|
||||
createdAt: item.ct,
|
||||
text: item.message,
|
||||
m_type: item.m_type,
|
||||
user: {
|
||||
_id: 0,
|
||||
name: "客服",
|
||||
avatar: process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/images/icon.png",
|
||||
avatar:
|
||||
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
|
||||
"/images/icon_border.png",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -300,7 +311,16 @@ export default function MessageDetail({}) {
|
|||
// console.log("handledmessages......", handledmessages);
|
||||
// console.log("[...messages, ...temMessages]", temMessages);
|
||||
setHandledmessages(temMessages);
|
||||
setOldMessages(list);
|
||||
setOldMessages((old) => {
|
||||
// debugger;
|
||||
if (old.list.length === list.length) {
|
||||
return old;
|
||||
} else {
|
||||
// debugger;
|
||||
return { list, isGetHistory: !!isGetHistory };
|
||||
}
|
||||
});
|
||||
|
||||
let newMessages = temMessages.reverse();
|
||||
let mathNewMessages = newMessages.reduce(
|
||||
(accumulator, currentValue, index, sourceArray) => {
|
||||
|
|
@ -403,6 +423,40 @@ export default function MessageDetail({}) {
|
|||
console.error(error);
|
||||
}
|
||||
};
|
||||
const getAutoMessage = useCallback(
|
||||
(data) => {
|
||||
if (data.m_type === 1) {
|
||||
const test = data.text.split("|");
|
||||
const btns = test[1].split(",");
|
||||
return (
|
||||
<div>
|
||||
<p>{test[0]}</p>
|
||||
<div className="my-2">
|
||||
<p>触发按钮：</p>
|
||||
<ul className="grid grid-cols-2 gap-2 mt-2">
|
||||
{btns.map((item) => {
|
||||
return (
|
||||
<li
|
||||
onClick={() => {
|
||||
onSend(item, oldMessages[0]?.id || -1, oldMessages);
|
||||
}}
|
||||
className="bg-[#3333331A] rounded text-center px-4 py-1"
|
||||
>
|
||||
{item}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return data?.text;
|
||||
}
|
||||
// data.m_type===1?it?.text.split("|")it?.text
|
||||
},
|
||||
[sessionId, oldMessages.list]
|
||||
);
|
||||
return (
|
||||
<div className="bg-[#13121F] h-screen overflow-y-auto" ref={scrollBox}>
|
||||
<div className="p-4 fixed top-0 z-10 w-full bg-deepBg">
|
||||
|
|
@ -441,43 +495,49 @@ export default function MessageDetail({}) {
|
|||
<p className="my-2 text-center">
|
||||
{formatDeadline(item[0].createdAt)}
|
||||
</p>
|
||||
<ul className="px-4 overflow-y-auto scrollbarBox_hidden">
|
||||
<ul className="px-2 overflow-y-auto scrollbarBox_hidden">
|
||||
{item.map((it) => (
|
||||
<li key={it?._id} className="py-3 rounded-lg ">
|
||||
<div className="flex w-full">
|
||||
{it?.predicate == 1 ? (
|
||||
<div className="flex justify-start w-full">
|
||||
<div className="flex justify-start items-start w-full">
|
||||
<Avatar
|
||||
className="mr-2 w-[32px] h-[32px]"
|
||||
style={{ "--border-radius": "50px" }}
|
||||
className="mr-2 w-[44px] h-[44px]"
|
||||
style={{
|
||||
"--border-radius": "50px",
|
||||
"--size": "44px",
|
||||
}}
|
||||
width={32}
|
||||
height={32}
|
||||
src={it?.user.avatar}
|
||||
/>
|
||||
<div
|
||||
className="rounded-lg py-2 px-3 bg-blue-500 break-words"
|
||||
className="rounded-lg py-2 px-3 text-base bg-white text-black break-words"
|
||||
style={{
|
||||
borderTopLeftRadius: 0,
|
||||
maxWidth: "calc(100% - 32px - 0.75rem)",
|
||||
maxWidth: "calc(100% - 44px - 0.75rem)",
|
||||
}}
|
||||
>
|
||||
{it?.text}
|
||||
{getAutoMessage(it)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex justify-end w-full">
|
||||
<div className="flex justify-end items-start w-full">
|
||||
<div
|
||||
className="max-w-full rounded-lg py-2 px-3 bg-blue-500 break-words"
|
||||
className="max-w-full rounded-lg py-2 px-3 text-base bg-blue-500 break-words"
|
||||
style={{
|
||||
borderTopRightRadius: 0,
|
||||
maxWidth: "calc(100% - 32px - 0.75rem)",
|
||||
maxWidth: "calc(100% - 44px - 0.75rem)",
|
||||
}}
|
||||
>
|
||||
{it?.text}
|
||||
</div>
|
||||
<Avatar
|
||||
className="ml-2 w-[32px] h-[32px]"
|
||||
style={{ "--border-radius": "50px" }}
|
||||
className="ml-2 w-[44px] h-[44px]"
|
||||
style={{
|
||||
"--border-radius": "50px",
|
||||
"--size": "44px",
|
||||
}}
|
||||
width={32}
|
||||
height={32}
|
||||
src={it?.user?.avatar}
|
||||
|
|
@ -496,7 +556,7 @@ export default function MessageDetail({}) {
|
|||
</div>
|
||||
{!searchParams.get("mid") && (
|
||||
<div className="w-full h-16 fixed bottom-0 grid grid-cols-[1fr_68px] bg-black items-center p-2 border-t-2 border-[#ffffff2a]">
|
||||
<div className="rounded bg-[#222036] px-4 py-2 mr-2">
|
||||
<div className="rounded-[10px] bg-[#222036] px-4 py-2 mr-2">
|
||||
<Input
|
||||
placeholder="输入新消息"
|
||||
className=""
|
||||
|
|
@ -508,10 +568,26 @@ export default function MessageDetail({}) {
|
|||
<Button
|
||||
size="middle"
|
||||
block
|
||||
onClick={() =>
|
||||
onSend(newMessage, oldMessages[0]?.id || -1, oldMessages)
|
||||
}
|
||||
style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
|
||||
onClick={() => {
|
||||
if (newMessage.includes("|")) {
|
||||
Toast.show({
|
||||
icon: "fail",
|
||||
content: "消息不能包含｜",
|
||||
position: "top",
|
||||
});
|
||||
return;
|
||||
}
|
||||
onSend(
|
||||
newMessage,
|
||||
oldMessages.list[0]?.id || -1,
|
||||
oldMessages.list
|
||||
);
|
||||
}}
|
||||
style={{
|
||||
"--background-color": "#FF669E",
|
||||
"--border-radius": "10px",
|
||||
color: "#FFFFFF",
|
||||
}}
|
||||
>
|
||||
发送
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -250,7 +250,9 @@ const MessageList = ({ mid, changeNoticeCount, refInstance, noticeCount }) => {
|
|||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-[#FFFFFFB2]">
|
||||
{data?.recent_contact_cs_msg || "暂无新消息"}
|
||||
{(data?.recent_contact_cs_msg?.includes("|")
|
||||
? data?.recent_contact_cs_msg?.split("|")[0]
|
||||
: data?.recent_contact_cs_msg) || "暂无新消息"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue