useMessages.ts 20 KB

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