@xinghunm/ai-chat 1.3.1 → 1.3.2

package/dist/index.js

@@ -852,6 +852,21 @@ var AiChatProvider = (props) => {
     defaultAuthToken,
     defaultTransformStreamPacket
   ]);
+  const latestTransportRef = (0, import_react2.useRef)(transport);
+  (0, import_react2.useLayoutEffect)(() => {
+    latestTransportRef.current = transport;
+  }, [transport]);
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      const { isStreamingBySession } = store.getState();
+      const streamingIds = Object.entries(isStreamingBySession).filter(([, streaming]) => streaming).map(([id]) => id);
+      for (const sessionId of streamingIds) {
+        const terminateId = isDraftChatSessionId(sessionId) ? void 0 : sessionId;
+        void latestTransportRef.current.terminateStream(terminateId).catch(() => {
+        });
+      }
+    };
+  }, [store]);
   const contextValue = (0, import_react2.useMemo)(
     () => ({
       store,
@@ -7224,6 +7239,9 @@ var useChatComposer = () => {
       }
       if (isDraftChatSessionId(sessionId)) {
         finalizeStop(sessionId);
+        void transport.terminateStream(void 0).catch((err) => {
+          console.error("Failed to terminate draft chat session", err);
+        });
         return;
       }
       requestStopStreaming(sessionId);

package/dist/index.mjs

@@ -1,10 +1,10 @@
 // src/components/ai-chat/index.tsx
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect10 } from "react";
 import styled17 from "@emotion/styled";
 import { ConfigProvider } from "@xinghunm/compass-ui";
 
 // src/components/ai-chat-provider/index.tsx
-import { useRef, useMemo, useState } from "react";
+import { useRef, useMemo, useState, useEffect, useLayoutEffect } from "react";
 import axios2 from "axios";
 
 // src/context/chat-context.ts
@@ -805,6 +805,21 @@ var AiChatProvider = (props) => {
     defaultAuthToken,
     defaultTransformStreamPacket
   ]);
+  const latestTransportRef = useRef(transport);
+  useLayoutEffect(() => {
+    latestTransportRef.current = transport;
+  }, [transport]);
+  useEffect(() => {
+    return () => {
+      const { isStreamingBySession } = store.getState();
+      const streamingIds = Object.entries(isStreamingBySession).filter(([, streaming]) => streaming).map(([id]) => id);
+      for (const sessionId of streamingIds) {
+        const terminateId = isDraftChatSessionId(sessionId) ? void 0 : sessionId;
+        void latestTransportRef.current.terminateStream(terminateId).catch(() => {
+        });
+      }
+    };
+  }, [store]);
   const contextValue = useMemo(
     () => ({
       store,
@@ -845,7 +860,7 @@ var AiChatProvider = (props) => {
 };
 
 // src/components/chat-thread/index.tsx
-import { useCallback as useCallback3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef5, useState as useState4 } from "react";
+import { useCallback as useCallback3, useLayoutEffect as useLayoutEffect3, useMemo as useMemo4, useRef as useRef5, useState as useState4 } from "react";
 import styled9 from "@emotion/styled";
 
 // src/context/use-chat-context.ts
@@ -866,7 +881,7 @@ var useChatStore = (selector) => {
 var CHAT_THREAD_SCROLL_TOP_GAP = 16;
 
 // src/components/chat-thread/components/chat-message-item.tsx
-import { Fragment, memo, useCallback as useCallback2, useLayoutEffect, useState as useState3 } from "react";
+import { Fragment, memo, useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useState as useState3 } from "react";
 import styled7 from "@emotion/styled";
 import { keyframes } from "@emotion/react";
 import ReactMarkdown from "react-markdown";
@@ -875,7 +890,7 @@ import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 
 // src/components/chat-thread/hooks/use-chat-message-reveal.ts
-import { useCallback, useEffect, useMemo as useMemo2, useReducer, useRef as useRef2 } from "react";
+import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useReducer, useRef as useRef2 } from "react";
 
 // src/components/chat-thread/lib/message-reveal.ts
 var STREAM_REVEAL_TICK_MS = 36;
@@ -1010,7 +1025,7 @@ var useChatMessageReveal = (message) => {
     },
     [isAssistantStreaming, message.role]
   );
-  useEffect(() => {
+  useEffect2(() => {
     if (previousMessageIdRef.current === message.id) {
       return;
     }
@@ -1028,7 +1043,7 @@ var useChatMessageReveal = (message) => {
       targetUnitCount: targetUnits.length
     });
   }, [isAssistantStreaming, message.id, targetUnits.length]);
-  useEffect(() => {
+  useEffect2(() => {
     pendingTargetUnitCountRef.current = targetUnits.length;
     if (message.role !== "assistant" || !isAssistantStreaming) {
       if (inputBatchTimeoutRef.current !== null) {
@@ -1064,7 +1079,7 @@ var useChatMessageReveal = (message) => {
     [displayedUnitCount, targetUnits]
   );
   const contentBlocks = useMemo2(() => splitMarkdownBlocks(displayedContent), [displayedContent]);
-  useEffect(() => {
+  useEffect2(() => {
     const hasNewDisplayedBlock = message.role === "assistant" && contentBlocks.length > 1 && contentBlocks.length > lastDisplayedBlockCountRef.current;
     lastDisplayedBlockCountRef.current = contentBlocks.length;
     if (!hasNewDisplayedBlock) {
@@ -1078,7 +1093,7 @@ var useChatMessageReveal = (message) => {
       window.clearTimeout(timer);
     };
   }, [contentBlocks.length, message.role]);
-  useEffect(() => {
+  useEffect2(() => {
     const shouldAnimateReveal = message.role === "assistant" && displayedUnitCount < batchedTargetUnitCount && (isAssistantStreaming || displayedUnitCount > 0);
     if (!shouldAnimateReveal) {
       if (displayedUnitCount !== batchedTargetUnitCount) {
@@ -1115,7 +1130,7 @@ var useChatMessageReveal = (message) => {
 };
 
 // src/components/chat-thread/hooks/use-timeline-block-anchors.ts
-import { useEffect as useEffect2, useMemo as useMemo3, useReducer as useReducer2 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo3, useReducer as useReducer2 } from "react";
 
 // src/components/chat-thread/lib/chat-message-timeline.ts
 var stringifyTimelineKeyPart = (value) => {
@@ -1394,14 +1409,14 @@ var useTimelineBlockAnchors = ({
     state.timelineBlockAnchors,
     timelineTextStreamLength
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     dispatch({
       type: "reset-message",
       messageId: message.id,
       currentBlockKeys: currentTimelineBlockKeys
     });
   }, [currentTimelineBlockKeys, message.id]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (messageRenderOrder !== "timeline" || !isAssistantStreaming) {
       return;
     }
@@ -1411,7 +1426,7 @@ var useTimelineBlockAnchors = ({
       timelineTextStreamLength
     });
   }, [currentTimelineBlockKeys, isAssistantStreaming, messageRenderOrder, timelineTextStreamLength]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (messageRenderOrder !== "timeline") {
       return;
     }
@@ -1636,7 +1651,7 @@ var Value = styled3.span`
 
 // src/components/chat-thread/components/questionnaire-card.tsx
 import {
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useRef as useRef3,
   useState as useState2
 } from "react";
@@ -2029,11 +2044,11 @@ var QuestionnaireCardInner = ({
   const visibleErrorMessage = questionnaire.statusMessage ?? errorMessage;
   const isInteractionLocked = !interactive || isSubmitting || isSubmitted || hasExternalFailureStatus;
   questionnaireRef.current = questionnaire;
-  useEffect3(() => {
+  useEffect4(() => {
     setAnswers(createInitialAnswers(questionnaireRef.current));
     setOtherDrafts(createInitialOtherDrafts(questionnaireRef.current));
   }, [questionnaire.answers]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!pendingFocusQuestionId || isInteractionLocked) {
       return;
     }
@@ -2557,7 +2572,7 @@ var Detail = styled5.li`
 
 // src/components/chat-thread/components/image-viewer.tsx
 import styled6 from "@emotion/styled";
-import { useEffect as useEffect4, useRef as useRef4 } from "react";
+import { useEffect as useEffect5, useRef as useRef4 } from "react";
 import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
 var Overlay = styled6.div`
   position: fixed;
@@ -2577,7 +2592,7 @@ var Img = styled6.img`
 `;
 var ImageViewer = ({ src, alt, onClose }) => {
   const overlayRef = useRef4(null);
-  useEffect4(() => {
+  useEffect5(() => {
     const handleKey = (e) => {
       if (e.key === "Escape")
         onClose();
@@ -2585,7 +2600,7 @@ var ImageViewer = ({ src, alt, onClose }) => {
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [onClose]);
-  useEffect4(() => {
+  useEffect5(() => {
     overlayRef.current?.focus();
   }, []);
   const stopPropagation = (e) => e.stopPropagation();
@@ -2671,7 +2686,7 @@ var useUserMessageCollapse = ({
     },
     [syncCollapseState]
   );
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!bodyStackElement) {
       return;
     }
@@ -2691,7 +2706,7 @@ var useUserMessageCollapse = ({
     settledContent,
     syncCollapseState
   ]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!bodyStackElement || !enabled || typeof ResizeObserver === "undefined") {
       return;
     }
@@ -3628,7 +3643,7 @@ var ChatThreadView = ({
       setPendingNewMessageCount(0);
     }
   }, []);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const nextHistoryMessageId = latestHistoryMessage?.id;
     if (lastHistoryMessageIdRef.current === nextHistoryMessageId) {
       return;
@@ -3652,7 +3667,7 @@ var ChatThreadView = ({
       });
     }
   }, [latestHistoryMessage, markThreadPinned, scrollToBottom]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const nextStreamingMessageId = streamingMessage?.id;
     if (lastStreamingMessageIdRef.current === nextStreamingMessageId) {
       return;
@@ -3667,7 +3682,7 @@ var ChatThreadView = ({
       });
     }
   }, [streamingMessage]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (reservedSpaceFrameRef.current !== null) {
       window.cancelAnimationFrame(reservedSpaceFrameRef.current);
       reservedSpaceFrameRef.current = null;
@@ -3697,7 +3712,7 @@ var ChatThreadView = ({
       }
     };
   }, [latestTurn, latestUserMessageId, error2, measureLatestTurnMinHeight, scrollToBottom]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!latestTurn)
       return;
     const handleResize = () => {
@@ -3723,7 +3738,7 @@ var ChatThreadView = ({
       window.removeEventListener("resize", handleResize);
     };
   }, [latestTurn, latestUserMessageId, measureLatestTurnMinHeight, scrollToBottom]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const latestTurnElement = latestTurnRef.current;
     if (!latestTurnElement || typeof ResizeObserver === "undefined") {
       return;
@@ -3736,7 +3751,7 @@ var ChatThreadView = ({
       observer.disconnect();
     };
   }, [latestTurn, scrollToBottom]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const latestTurnElement = latestTurnRef.current;
     if (!latestTurnElement || typeof MutationObserver === "undefined") {
       return;
@@ -4030,7 +4045,7 @@ var ScrollToLatestBadge = styled9.span`
 `;
 
 // src/components/chat-composer/index.tsx
-import { useCallback as useCallback8, useEffect as useEffect8, useLayoutEffect as useLayoutEffect5, useRef as useRef11, useState as useState10 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect9, useLayoutEffect as useLayoutEffect6, useRef as useRef11, useState as useState10 } from "react";
 import styled14 from "@emotion/styled";
 
 // ../../node_modules/.pnpm/@floating-ui+react@0.27.16_react-dom@18.3.1_react@18.3.1/node_modules/@floating-ui/react/dist/floating-ui.react.mjs
@@ -4192,7 +4207,7 @@ function getFrameElement(win) {
 
 // ../../node_modules/.pnpm/@floating-ui+react@0.27.16_react-dom@18.3.1_react@18.3.1/node_modules/@floating-ui/react/dist/floating-ui.react.utils.mjs
 import * as React from "react";
-import { useLayoutEffect as useLayoutEffect3 } from "react";
+import { useLayoutEffect as useLayoutEffect4 } from "react";
 
 // ../../node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var min = Math.min;
@@ -4679,7 +4694,7 @@ function getDocument(node) {
 var isClient = typeof document !== "undefined";
 var noop = function noop2() {
 };
-var index = isClient ? useLayoutEffect3 : noop;
+var index = isClient ? useLayoutEffect4 : noop;
 var SafeReact = {
   ...React
 };
@@ -5888,12 +5903,12 @@ var computePosition2 = (reference, floating, options) => {
 
 // ../../node_modules/.pnpm/@floating-ui+react-dom@2.1.6_react-dom@18.3.1_react@18.3.1/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
 import * as React2 from "react";
-import { useLayoutEffect as useLayoutEffect4 } from "react";
+import { useLayoutEffect as useLayoutEffect5 } from "react";
 import * as ReactDOM from "react-dom";
 var isClient2 = typeof document !== "undefined";
 var noop3 = function noop4() {
 };
-var index2 = isClient2 ? useLayoutEffect4 : noop3;
+var index2 = isClient2 ? useLayoutEffect5 : noop3;
 function deepEqual(a, b) {
   if (a === b) {
     return true;
@@ -6630,10 +6645,10 @@ var resolveSendSession = ({
 };
 
 // src/components/chat-composer/hooks/use-chat-composer.ts
-import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef10, useState as useState8 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect8, useRef as useRef10, useState as useState8 } from "react";
 
 // src/components/chat-composer/hooks/use-composer-attachments.ts
-import { useEffect as useEffect6, useRef as useRef9, useState as useState7 } from "react";
+import { useEffect as useEffect7, useRef as useRef9, useState as useState7 } from "react";
 var SUPPORTED_IMAGE_MIME_TYPES = /* @__PURE__ */ new Set(["image/png", "image/jpeg", "image/webp"]);
 var MAX_COMPOSER_ATTACHMENTS = 10;
 var createObjectUrl = (file) => typeof URL !== "undefined" && typeof URL.createObjectURL === "function" ? URL.createObjectURL(file) : "";
@@ -6649,10 +6664,10 @@ var releaseComposerAttachments = (attachments) => {
 var useComposerAttachments = () => {
   const [attachments, setAttachments] = useState7([]);
   const attachmentsRef = useRef9([]);
-  useEffect6(() => {
+  useEffect7(() => {
     attachmentsRef.current = attachments;
   }, [attachments]);
-  useEffect6(
+  useEffect7(
     () => () => {
       releaseComposerAttachments(attachmentsRef.current);
     },
@@ -6825,10 +6840,10 @@ var useChatComposer = () => {
       setIsModelsLoading(false);
     }
   }, [modelsLoader]);
-  useEffect7(() => {
+  useEffect8(() => {
     void fetchModels();
   }, [fetchModels]);
-  useEffect7(() => {
+  useEffect8(() => {
     activeSkillsLoaderRef.current = skillsLoader;
     const cachedSkills = getCachedSkills(skillsLoader);
     setAvailableSkills(cachedSkills.skills);
@@ -6864,7 +6879,7 @@ var useChatComposer = () => {
       }
     }
   }, [skillsLoader]);
-  useEffect7(() => {
+  useEffect8(() => {
     void fetchSkills();
   }, [fetchSkills]);
   const hasModels = availableModels.length > 0;
@@ -6878,25 +6893,25 @@ var useChatComposer = () => {
   const stopRequestBySessionRef = useRef10(/* @__PURE__ */ new Map());
   const lastRequestBySessionRef = useRef10(/* @__PURE__ */ new Map());
   const previousActiveSessionIdRef = useRef10(activeSessionId);
-  useEffect7(() => {
+  useEffect8(() => {
     setSelectedModel(
       (current) => resolveSelectedChatModel({ currentModel: current, availableModels, isModelsLoading })
     );
   }, [availableModels, isModelsLoading]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (activeSession) {
       setSelectedModeLocal(activeSession.mode ?? DEFAULT_CHAT_AGENT_MODE);
       return;
     }
     setSelectedModeLocal(preferredMode ?? DEFAULT_CHAT_AGENT_MODE);
   }, [activeSession, preferredMode]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (previousActiveSessionIdRef.current !== activeSessionId) {
       setSelectedSkills([]);
       previousActiveSessionIdRef.current = activeSessionId;
     }
   }, [activeSessionId]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!attachmentNotice)
       return;
     const timeoutId = window.setTimeout(
@@ -7181,6 +7196,9 @@ var useChatComposer = () => {
       }
       if (isDraftChatSessionId(sessionId)) {
         finalizeStop(sessionId);
+        void transport.terminateStream(void 0).catch((err) => {
+          console.error("Failed to terminate draft chat session", err);
+        });
         return;
       }
       requestStopStreaming(sessionId);
@@ -8026,7 +8044,7 @@ var ChatComposerView = ({
     [refs]
   );
   const activeSkillIndex = activeSkillNavigation.queryKey === activeSkillQueryKey ? activeSkillNavigation.index : 0;
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     const element = inputRef.current;
     if (!element) {
       return;
@@ -8264,7 +8282,7 @@ var ChatComposer = () => {
   const { labels, sendRef, retryRef, stopRef, enableImageAttachments } = useChatContext();
   const { state, actions } = useChatComposer();
   const { send, retry } = actions;
-  useEffect8(() => {
+  useEffect9(() => {
     sendRef.current = send;
     retryRef.current = async (sessionId) => {
       retry(sessionId);
@@ -8779,7 +8797,7 @@ var AiChatWorkspaceContent = ({
     })
   );
   const shouldShowComposerOnly = showComposerOnlyBeforeFirstMessage && !showConversationList && !isConversationStarted;
-  useEffect9(() => {
+  useEffect10(() => {
     onConversationStartedChange?.(isConversationStarted);
   }, [isConversationStarted, onConversationStartedChange]);
   return /* @__PURE__ */ jsxs14(Root, { "data-testid": "ai-chat", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xinghunm/ai-chat",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "AI chat React component library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",