useMessages.ts 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545
  1. "use client";
  2. import { useCallback, useEffect, useMemo, useState } from "react";
  3. import {
  4. fetchConversationDetail,
  5. updateConversationContact,
  6. UpdateConversationContactPayload,
  7. UpdateConversationContactResult,
  8. } from "../../agent/services/conversationApi";
  9. import {
  10. fetchMessages,
  11. markMessagesRead,
  12. sendMessage,
  13. } from "../../agent/services/messageApi";
  14. import {
  15. ConversationDetail,
  16. ConversationSummary,
  17. MessageItem,
  18. MessagesReadPayload,
  19. ChatWebSocketPayload,
  20. VisitorStatusUpdatePayload,
  21. } from "../../agent/types";
  22. import { useWebSocket } from "./useWebSocket";
  23. import { WSMessage } from "@/lib/websocket";
  24. import { buildMessagePreview } from "@/utils/format";
  25. import { playNotificationSound } from "@/utils/sound";
  26. interface UseMessagesOptions {
  27. conversationId: number | null;
  28. agentId: number | null;
  29. updateConversation: (
  30. conversationId: number,
  31. updater: (conversation: ConversationSummary) => ConversationSummary,
  32. options?: { skipResort?: boolean }
  33. ) => void;
  34. refreshConversations?: () => void;
  35. hasConversation?: (conversationId: number) => boolean;
  36. soundEnabled?: boolean;
  37. /** 内部对话(知识库测试)时强制包含 AI 消息 */
  38. forceIncludeAIMessages?: boolean;
  39. }
  40. export function useMessages({
  41. conversationId,
  42. agentId,
  43. updateConversation,
  44. refreshConversations,
  45. hasConversation,
  46. soundEnabled = false,
  47. forceIncludeAIMessages = false,
  48. }: UseMessagesOptions) {
  49. const [messages, setMessages] = useState<MessageItem[]>([]);
  50. const [loadingMessages, setLoadingMessages] = useState(false);
  51. const [sending, setSending] = useState(false);
  52. const [conversationDetail, setConversationDetail] =
  53. useState<ConversationDetail | null>(null);
  54. const [includeAIMessages, setIncludeAIMessages] = useState(forceIncludeAIMessages);
  55. /** 内部对话(知识库测试)下发消息后等待 AI 回复时显示「正在思考」(与访客小窗逻辑一致) */
  56. const [aiThinking, setAiThinking] = useState(false);
  57. const refreshConversationDetail = useCallback(
  58. async (id: number) => {
  59. const detail = await fetchConversationDetail(id, agentId ?? undefined);
  60. setConversationDetail(detail);
  61. // 同时更新对话列表中的 last_seen_at(用于判断在线状态)
  62. if (detail) {
  63. updateConversation(id, (conv) => ({
  64. ...conv,
  65. last_seen_at: detail.last_seen_at ?? conv.last_seen_at ?? null,
  66. }));
  67. }
  68. },
  69. [updateConversation]
  70. );
  71. const updateContactInfo = useCallback(
  72. async (
  73. payload: UpdateConversationContactPayload
  74. ): Promise<UpdateConversationContactResult> => {
  75. if (!conversationId) {
  76. throw new Error("未选中会话,无法更新访客信息");
  77. }
  78. const result = await updateConversationContact(conversationId, payload);
  79. setConversationDetail((prev) =>
  80. prev
  81. ? {
  82. ...prev,
  83. email: result.email,
  84. phone: result.phone,
  85. notes: result.notes,
  86. }
  87. : prev
  88. );
  89. if (!conversationDetail) {
  90. refreshConversationDetail(conversationId);
  91. }
  92. return result;
  93. },
  94. [conversationDetail, conversationId, refreshConversationDetail]
  95. );
  96. const handleMarkMessagesRead = useCallback(
  97. async (id: number, readerIsAgent: boolean) => {
  98. const result = await markMessagesRead(id, readerIsAgent);
  99. if (!result || result.message_ids.length === 0) {
  100. return;
  101. }
  102. const messageIdSet = new Set(result.message_ids);
  103. setMessages((prev) =>
  104. prev.map((msg) =>
  105. messageIdSet.has(msg.id)
  106. ? {
  107. ...msg,
  108. is_read: true,
  109. read_at: result.read_at ?? msg.read_at ?? null,
  110. }
  111. : msg
  112. )
  113. );
  114. if (readerIsAgent) {
  115. updateConversation(id, (conversation) => ({
  116. ...conversation,
  117. unread_count: result.unread_count,
  118. last_message:
  119. conversation.last_message &&
  120. messageIdSet.has(conversation.last_message.id)
  121. ? {
  122. ...conversation.last_message,
  123. is_read: true,
  124. read_at:
  125. result.read_at ?? conversation.last_message.read_at ?? null,
  126. }
  127. : conversation.last_message,
  128. }));
  129. setConversationDetail((prev) =>
  130. prev ? { ...prev, unread_count: result.unread_count } : prev
  131. );
  132. } else {
  133. updateConversation(
  134. id,
  135. (conversation) => ({
  136. ...conversation,
  137. last_message:
  138. conversation.last_message &&
  139. messageIdSet.has(conversation.last_message.id)
  140. ? {
  141. ...conversation.last_message,
  142. is_read: true,
  143. read_at:
  144. result.read_at ??
  145. conversation.last_message.read_at ??
  146. null,
  147. }
  148. : conversation.last_message,
  149. }),
  150. { skipResort: true }
  151. );
  152. setConversationDetail((prev) =>
  153. prev ? { ...prev, last_seen_at: result.read_at ?? prev.last_seen_at ?? null } : prev
  154. );
  155. }
  156. },
  157. [updateConversation]
  158. );
  159. const effectiveIncludeAIMessages = forceIncludeAIMessages || includeAIMessages;
  160. const loadMessages = useCallback(
  161. async (id: number, includeAI?: boolean) => {
  162. const include = includeAI ?? effectiveIncludeAIMessages;
  163. setLoadingMessages(true);
  164. try {
  165. const data = await fetchMessages(id, include);
  166. setMessages(data);
  167. } catch (error) {
  168. console.error("拉取消息失败:", error);
  169. } finally {
  170. setLoadingMessages(false);
  171. }
  172. },
  173. [effectiveIncludeAIMessages]
  174. );
  175. useEffect(() => {
  176. if (!conversationId || !agentId) {
  177. setMessages([]);
  178. setConversationDetail(null);
  179. return;
  180. }
  181. loadMessages(conversationId, effectiveIncludeAIMessages);
  182. refreshConversationDetail(conversationId);
  183. }, [conversationId, agentId, effectiveIncludeAIMessages, loadMessages, refreshConversationDetail]);
  184. const handleSendMessage = useCallback(
  185. async (content: string, fileInfo?: { file_url: string; file_type: string; file_name: string; file_size: number; mime_type: string }) => {
  186. if (!conversationId || !agentId || sending) {
  187. return;
  188. }
  189. // 验证:必须有内容或文件
  190. if (!content.trim() && !fileInfo) {
  191. return;
  192. }
  193. setSending(true);
  194. if (forceIncludeAIMessages) {
  195. setAiThinking(true);
  196. }
  197. try {
  198. await sendMessage({
  199. conversationId,
  200. content: content.trim(),
  201. senderId: agentId,
  202. fileUrl: fileInfo?.file_url,
  203. fileType: fileInfo?.file_type as "image" | "document" | undefined,
  204. fileName: fileInfo?.file_name,
  205. fileSize: fileInfo?.file_size,
  206. mimeType: fileInfo?.mime_type,
  207. });
  208. } catch (error) {
  209. console.error(error);
  210. if (forceIncludeAIMessages) {
  211. setAiThinking(false);
  212. }
  213. throw error;
  214. } finally {
  215. setSending(false);
  216. }
  217. },
  218. [agentId, conversationId, sending, forceIncludeAIMessages]
  219. );
  220. const handleNewMessage = useCallback(
  221. (message: MessageItem) => {
  222. // 如果是访客发送的消息(不是客服自己发送的),播放提示音
  223. if (!message.sender_is_agent && soundEnabled) {
  224. playNotificationSound(soundEnabled);
  225. }
  226. // 检查对话是否存在
  227. const conversationExists = hasConversation
  228. ? hasConversation(message.conversation_id)
  229. : true; // 如果没有提供检查方法,假设对话存在
  230. // 先更新对话列表(无论是否是当前对话,都需要更新未读数、最后消息等)
  231. // 这样即使客服没有选中这个对话,也能看到新消息的提示
  232. updateConversation(message.conversation_id, (conversation) => {
  233. const preview = buildMessagePreview(message.content);
  234. const isSystemMessage =
  235. (message.message_type ?? "user_message") === "system_message";
  236. const isVisitorMessage = !message.sender_is_agent && !isSystemMessage;
  237. const isCurrentConversation = message.conversation_id === conversationId;
  238. const nextUnread = isVisitorMessage
  239. ? isCurrentConversation
  240. ? 0
  241. : (conversation.unread_count ?? 0) + 1
  242. : conversation.unread_count ?? 0;
  243. return {
  244. ...conversation,
  245. updated_at: message.created_at,
  246. unread_count: nextUnread,
  247. last_message: {
  248. id: message.id,
  249. content: preview,
  250. sender_is_agent: message.sender_is_agent,
  251. message_type: message.message_type ?? "user_message",
  252. is_read: Boolean(message.is_read),
  253. read_at: message.read_at ?? null,
  254. created_at: message.created_at,
  255. },
  256. };
  257. });
  258. // 如果对话不存在(新对话),延迟刷新对话列表以添加新对话
  259. // 使用 setTimeout 延迟刷新,避免频繁刷新,并且给 updateConversation 时间完成
  260. if (!conversationExists && refreshConversations) {
  261. setTimeout(() => {
  262. refreshConversations();
  263. }, 500);
  264. }
  265. // 只处理当前对话的消息(添加到消息列表)
  266. if (message.conversation_id !== conversationId) {
  267. return;
  268. }
  269. // 根据 includeAIMessages 状态过滤 AI 消息
  270. // 如果隐藏 AI 消息(includeAIMessages === false)且消息的 chat_mode === "ai",则不添加到消息列表
  271. const messageChatMode = message.chat_mode || "human"; // 兼容历史数据,默认为 human
  272. const shouldHideAIMessage = !effectiveIncludeAIMessages && messageChatMode === "ai";
  273. setMessages((prev) => {
  274. const exists = prev.some((item) => item.id === message.id);
  275. if (exists) {
  276. // 消息已存在,需要根据 effectiveIncludeAIMessages 决定是否保留
  277. if (shouldHideAIMessage) {
  278. // 如果应该隐藏 AI 消息,则从列表中移除
  279. return prev.filter((msg) => msg.id !== message.id);
  280. }
  281. // 消息已存在,更新消息内容(包括已读状态)
  282. return prev.map((msg) =>
  283. msg.id === message.id
  284. ? {
  285. ...msg,
  286. ...message,
  287. // 如果消息已被标记为已读,保持已读状态;否则保持原状态
  288. // 这样可以避免丢失已读状态
  289. is_read: message.is_read ?? msg.is_read ?? false,
  290. read_at: message.read_at ?? msg.read_at ?? null,
  291. }
  292. : msg
  293. );
  294. }
  295. // 新消息:如果要隐藏 AI 消息且这是 AI 消息,则不添加
  296. if (shouldHideAIMessage) {
  297. return prev;
  298. }
  299. // 新消息:添加到列表末尾
  300. return [...prev, message];
  301. });
  302. // 内部对话(知识库测试):收到 AI 回复时关闭「正在思考」(与访客小窗一致:收到对方回复即关闭)
  303. if (forceIncludeAIMessages && message.conversation_id === conversationId) {
  304. const msgChatMode = message.chat_mode || "human";
  305. if (msgChatMode === "ai") {
  306. setAiThinking(false);
  307. }
  308. }
  309. // 注意:不再自动标记访客消息为已读,而是通过滚动检测来处理
  310. // 不再调用 refreshConversationDetail,避免不必要的重新加载和状态丢失
  311. },
  312. [conversationId, updateConversation, refreshConversations, hasConversation, effectiveIncludeAIMessages, soundEnabled, forceIncludeAIMessages]
  313. );
  314. const handleMessagesReadBroadcast = useCallback(
  315. (payload: MessagesReadPayload, eventConversationId?: number) => {
  316. const messageIds: number[] = Array.isArray(payload?.message_ids)
  317. ? payload.message_ids
  318. : [];
  319. if (!Array.isArray(messageIds) || messageIds.length === 0) {
  320. return;
  321. }
  322. const readAt: string | undefined = payload?.read_at;
  323. const readerIsAgent: boolean = Boolean(payload?.reader_is_agent);
  324. const conversation_id: number | undefined =
  325. payload?.conversation_id ?? eventConversationId;
  326. if (!conversation_id) {
  327. return;
  328. }
  329. // 对于客服端:只有当 reader_is_agent === false 时(访客读取了客服的消息),
  330. // 才更新客服消息(sender_is_agent === true)的已读状态
  331. if (readerIsAgent) {
  332. return;
  333. }
  334. const idSet = new Set(messageIds);
  335. // 更新消息列表中的已读状态(只更新当前对话中的消息,且只更新客服自己的消息)
  336. if (conversation_id === conversationId) {
  337. setMessages((prev) => {
  338. // 检查是否有需要更新的消息
  339. const hasUpdates = prev.some(
  340. (msg) => idSet.has(msg.id) && msg.sender_is_agent && !msg.is_read
  341. );
  342. if (!hasUpdates) {
  343. // 没有需要更新的消息,直接返回原列表
  344. return prev;
  345. }
  346. // 更新消息列表
  347. return prev.map((msg) =>
  348. // 只更新客服自己的消息(sender_is_agent === true)的已读状态
  349. idSet.has(msg.id) && msg.sender_is_agent
  350. ? {
  351. ...msg,
  352. is_read: true,
  353. read_at: readAt ?? msg.read_at ?? null,
  354. }
  355. : msg
  356. );
  357. });
  358. }
  359. const unreadCount =
  360. typeof payload?.unread_count === "number"
  361. ? payload.unread_count
  362. : undefined;
  363. updateConversation(conversation_id, (conversation) => {
  364. const lastMessage =
  365. conversation.last_message &&
  366. idSet.has(conversation.last_message.id)
  367. ? {
  368. ...conversation.last_message,
  369. is_read: true,
  370. read_at:
  371. readAt ?? conversation.last_message.read_at ?? null,
  372. }
  373. : conversation.last_message;
  374. return {
  375. ...conversation,
  376. last_message: lastMessage,
  377. unread_count:
  378. readerIsAgent && unreadCount !== undefined
  379. ? unreadCount
  380. : conversation.unread_count,
  381. };
  382. });
  383. if (conversation_id === conversationId) {
  384. setConversationDetail((prev) => {
  385. if (!prev) {
  386. return prev;
  387. }
  388. if (readerIsAgent && unreadCount !== undefined) {
  389. return { ...prev, unread_count: unreadCount };
  390. }
  391. if (!readerIsAgent) {
  392. return {
  393. ...prev,
  394. last_seen_at: readAt ?? prev.last_seen_at ?? null,
  395. };
  396. }
  397. return prev;
  398. });
  399. }
  400. },
  401. [conversationId, updateConversation]
  402. );
  403. const onWebSocketMessage = useCallback(
  404. (event: WSMessage<ChatWebSocketPayload>) => {
  405. if (!event) {
  406. return;
  407. }
  408. if (event.type === "new_message" && event.data) {
  409. const data = event.data as MessageItem;
  410. if (typeof data.conversation_id === "number") {
  411. handleNewMessage(data);
  412. }
  413. } else if (event.type === "messages_read") {
  414. handleMessagesReadBroadcast(
  415. event.data as MessagesReadPayload,
  416. event.conversation_id
  417. );
  418. } else if (event.type === "visitor_status_update") {
  419. // 处理访客状态更新事件
  420. const payload = event.data as VisitorStatusUpdatePayload;
  421. if (payload?.conversation_id) {
  422. if (payload.is_online === true) {
  423. // 在线:更新为当前时间(实时更新在线状态)
  424. updateConversation(payload.conversation_id, (conv) => ({
  425. ...conv,
  426. last_seen_at: new Date().toISOString(),
  427. }));
  428. // 如果当前正在查看这个对话,也更新对话详情
  429. if (payload.conversation_id === conversationId) {
  430. setConversationDetail((prev) =>
  431. prev
  432. ? {
  433. ...prev,
  434. last_seen_at: new Date().toISOString(),
  435. }
  436. : prev
  437. );
  438. }
  439. } else {
  440. // 离线:刷新对话详情以获取最新的 last_seen_at(后端会在离线时更新 last_seen_at)
  441. // refreshConversationDetail 会自动更新对话列表的 last_seen_at
  442. refreshConversationDetail(payload.conversation_id);
  443. }
  444. }
  445. }
  446. },
  447. [
  448. conversationId,
  449. handleMessagesReadBroadcast,
  450. handleNewMessage,
  451. refreshConversationDetail,
  452. updateConversation,
  453. ]
  454. );
  455. useWebSocket<ChatWebSocketPayload>({
  456. conversationId,
  457. enabled: Boolean(conversationId),
  458. isVisitor: false, // 客服端设置为 false
  459. agentId: agentId ?? undefined, // 传递客服ID,用于创建系统消息
  460. onMessage: onWebSocketMessage,
  461. onError: (error) => {
  462. // 静默处理错误,避免影响用户体验
  463. },
  464. onClose: () => {
  465. // 静默处理关闭,避免影响用户体验
  466. },
  467. });
  468. // 切换 AI 消息显示/隐藏
  469. const toggleAIMessages = useCallback(async () => {
  470. const newValue = !includeAIMessages;
  471. setIncludeAIMessages(newValue);
  472. // 如果当前有选中的对话,重新加载消息(从服务器获取完整消息列表,确保过滤正确)
  473. if (conversationId) {
  474. await loadMessages(conversationId, newValue);
  475. }
  476. }, [includeAIMessages, conversationId, loadMessages]);
  477. const controls = useMemo(
  478. () => ({
  479. messages,
  480. loadingMessages,
  481. sending,
  482. conversationDetail,
  483. refreshConversationDetail,
  484. refreshMessages: loadMessages,
  485. sendMessage: handleSendMessage,
  486. markMessagesAsRead: handleMarkMessagesRead,
  487. updateContactInfo,
  488. includeAIMessages: effectiveIncludeAIMessages,
  489. toggleAIMessages,
  490. forceIncludeAIMessages,
  491. aiThinking,
  492. }),
  493. [
  494. conversationDetail,
  495. handleMarkMessagesRead,
  496. handleSendMessage,
  497. loadMessages,
  498. loadingMessages,
  499. messages,
  500. refreshConversationDetail,
  501. sending,
  502. updateContactInfo,
  503. effectiveIncludeAIMessages,
  504. toggleAIMessages,
  505. forceIncludeAIMessages,
  506. aiThinking,
  507. ]
  508. );
  509. return controls;
  510. }