useMessages.ts 19 KB

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