@xinghunm/ai-chat 1.3.0 → 1.3.2

package/dist/index.d.mts

@@ -441,6 +441,9 @@ interface AiChatLabels {
     questionnaireMultiSelectHint?: string;
     questionnaireOtherOptionLabel?: string;
     questionnaireOtherPlaceholder?: string;
+    modelLoading?: string;
+    modelLoadFailed?: string;
+    modelUnavailable?: string;
     skillLoading?: string;
     skillEmpty?: string;
     removeSkillAriaLabel?: string;
@@ -653,6 +656,9 @@ interface ChatComposerViewProps {
     skillLoadingLabel: string;
     skillEmptyLabel: string;
     removeSkillAriaLabel: string;
+    modelLoadingLabel: string;
+    modelLoadFailedLabel: string;
+    modelUnavailableLabel: string;
     onValueChange: (value: string) => void;
     onPickImages: (files: FileList | File[]) => void;
     onPasteImages: (files: File[]) => void;

package/dist/index.d.ts

@@ -441,6 +441,9 @@ interface AiChatLabels {
     questionnaireMultiSelectHint?: string;
     questionnaireOtherOptionLabel?: string;
     questionnaireOtherPlaceholder?: string;
+    modelLoading?: string;
+    modelLoadFailed?: string;
+    modelUnavailable?: string;
     skillLoading?: string;
     skillEmpty?: string;
     removeSkillAriaLabel?: string;
@@ -653,6 +656,9 @@ interface ChatComposerViewProps {
     skillLoadingLabel: string;
     skillEmptyLabel: string;
     removeSkillAriaLabel: string;
+    modelLoadingLabel: string;
+    modelLoadFailedLabel: string;
+    modelUnavailableLabel: string;
     onValueChange: (value: string) => void;
     onPickImages: (files: FileList | File[]) => void;
     onPasteImages: (files: File[]) => void;

package/dist/index.js

@@ -95,6 +95,9 @@ var DEFAULT_AI_CHAT_LABELS = {
   questionnaireMultiSelectHint: "Multiple choice",
   questionnaireOtherOptionLabel: "Other",
   questionnaireOtherPlaceholder: "Other",
+  modelLoading: "Loading models...",
+  modelLoadFailed: "Failed to load models",
+  modelUnavailable: "No model available",
   skillLoading: "Loading skills...",
   skillEmpty: "No matching skills",
   removeSkillAriaLabel: "Remove skill"
@@ -849,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,
@@ -7221,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);
@@ -7513,6 +7534,9 @@ var ChatModelControl = ({
   isModelsLoading,
   isModelsError,
   hasModels,
+  loadingLabel,
+  loadFailedLabel,
+  unavailableLabel,
   onSelectedModelChange,
   onReloadModels
 }) => {
@@ -7525,7 +7549,7 @@ var ChatModelControl = ({
         "aria-label": "Reload",
         onClick: onReloadModels,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Failed to load models" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: loadFailedLabel }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
             ReloadIcon,
             {
@@ -7547,7 +7571,7 @@ var ChatModelControl = ({
     );
   }
   if (isModelsLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModelBadge, { children: "Loading models..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModelBadge, { "data-testid": "chat-model-loading", children: loadingLabel });
   }
   if (hasModels && selectedModel) {
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -7565,9 +7589,14 @@ var ChatModelControl = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModelBadge, { children: "No model available" });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModelBadge, { "data-testid": "chat-model-unavailable", children: unavailableLabel });
 };
 var ModelBadge = import_styled11.default.span`
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
   border-radius: 999px;
   border: 1px solid var(--border-hover);
   padding: 5px 12px;
@@ -7575,6 +7604,9 @@ var ModelBadge = import_styled11.default.span`
   font-size: 12px;
   color: var(--text-secondary);
   line-height: 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
 `;
 var ModelReloadButton = import_styled11.default.button`
   display: inline-flex;
@@ -7979,6 +8011,9 @@ var ChatComposerView = ({
   skillLoadingLabel,
   skillEmptyLabel,
   removeSkillAriaLabel,
+  modelLoadingLabel,
+  modelLoadFailedLabel,
+  modelUnavailableLabel,
   onValueChange,
   onPickImages,
   onPasteImages,
@@ -8020,9 +8055,10 @@ var ChatComposerView = ({
   }) : [];
   const showSkillMenu = Boolean(skillQueryMatch);
   const activeSkillQueryKey = skillQueryMatch ? `${skillQueryMatch.start}:${skillQueryMatch.end}:${skillQueryMatch.query}:${selectedSkills.join("\0")}` : "";
-  const { refs, floatingStyles } = useFloating2({
+  const { refs, floatingStyles, placement } = useFloating2({
     open: showSkillMenu,
     placement: "bottom-start",
+    strategy: "fixed",
     middleware: [
       offset3(3),
       flip3({ padding: 8 }),
@@ -8137,7 +8173,7 @@ var ChatComposerView = ({
     });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Container2, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Surface, { "data-testid": "chat-composer-surface", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Surface, { ref: setSkillMenuReference, "data-testid": "chat-composer-surface", children: [
       enableImageAttachments ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "input",
         {
@@ -8171,7 +8207,7 @@ var ChatComposerView = ({
           }
         )
       ] }, skill)) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(InputArea, { ref: setSkillMenuReference, "data-testid": "chat-composer-input-area", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(InputArea, { "data-testid": "chat-composer-input-area", children: [
         isComposerExpanded || isComposerExpandable ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           ComposerExpandButton,
           {
@@ -8238,6 +8274,9 @@ var ChatComposerView = ({
               isModelsLoading,
               isModelsError,
               hasModels,
+              loadingLabel: modelLoadingLabel,
+              loadFailedLabel: modelLoadFailedLabel,
+              unavailableLabel: modelUnavailableLabel,
               onSelectedModelChange,
               onReloadModels
             }
@@ -8261,6 +8300,8 @@ var ChatComposerView = ({
         ref: setSkillMenuFloating,
         style: floatingStyles,
         "data-testid": "chat-composer-skill-menu",
+        "data-placement": placement,
+        "data-floating-strategy": "fixed",
         role: "listbox",
         children: isSkillsLoading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SkillMenuState, { "data-testid": "chat-composer-skill-loading", children: skillLoadingLabel }) : filteredSkills.length ? filteredSkills.map((skill, index3) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           SkillMenuItem,
@@ -8322,6 +8363,9 @@ var ChatComposer = () => {
       skillLoadingLabel: labels.skillLoading,
       skillEmptyLabel: labels.skillEmpty,
       removeSkillAriaLabel: labels.removeSkillAriaLabel,
+      modelLoadingLabel: labels.modelLoading,
+      modelLoadFailedLabel: labels.modelLoadFailed,
+      modelUnavailableLabel: labels.modelUnavailable,
       onValueChange: actions.setValue,
       onPickImages: actions.pickImages,
       onPasteImages: actions.pasteImages,

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
@@ -48,6 +48,9 @@ var DEFAULT_AI_CHAT_LABELS = {
   questionnaireMultiSelectHint: "Multiple choice",
   questionnaireOtherOptionLabel: "Other",
   questionnaireOtherPlaceholder: "Other",
+  modelLoading: "Loading models...",
+  modelLoadFailed: "Failed to load models",
+  modelUnavailable: "No model available",
   skillLoading: "Loading skills...",
   skillEmpty: "No matching skills",
   removeSkillAriaLabel: "Remove skill"
@@ -802,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,
@@ -842,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
@@ -863,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";
@@ -872,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;
@@ -1007,7 +1025,7 @@ var useChatMessageReveal = (message) => {
     },
     [isAssistantStreaming, message.role]
   );
-  useEffect(() => {
+  useEffect2(() => {
     if (previousMessageIdRef.current === message.id) {
       return;
     }
@@ -1025,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) {
@@ -1061,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) {
@@ -1075,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) {
@@ -1112,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) => {
@@ -1391,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;
     }
@@ -1408,7 +1426,7 @@ var useTimelineBlockAnchors = ({
       timelineTextStreamLength
     });
   }, [currentTimelineBlockKeys, isAssistantStreaming, messageRenderOrder, timelineTextStreamLength]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (messageRenderOrder !== "timeline") {
       return;
     }
@@ -1633,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";
@@ -2026,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;
     }
@@ -2554,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;
@@ -2574,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();
@@ -2582,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();
@@ -2668,7 +2686,7 @@ var useUserMessageCollapse = ({
     },
     [syncCollapseState]
   );
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!bodyStackElement) {
       return;
     }
@@ -2688,7 +2706,7 @@ var useUserMessageCollapse = ({
     settledContent,
     syncCollapseState
   ]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!bodyStackElement || !enabled || typeof ResizeObserver === "undefined") {
       return;
     }
@@ -3625,7 +3643,7 @@ var ChatThreadView = ({
       setPendingNewMessageCount(0);
     }
   }, []);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const nextHistoryMessageId = latestHistoryMessage?.id;
     if (lastHistoryMessageIdRef.current === nextHistoryMessageId) {
       return;
@@ -3649,7 +3667,7 @@ var ChatThreadView = ({
       });
     }
   }, [latestHistoryMessage, markThreadPinned, scrollToBottom]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const nextStreamingMessageId = streamingMessage?.id;
     if (lastStreamingMessageIdRef.current === nextStreamingMessageId) {
       return;
@@ -3664,7 +3682,7 @@ var ChatThreadView = ({
       });
     }
   }, [streamingMessage]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (reservedSpaceFrameRef.current !== null) {
       window.cancelAnimationFrame(reservedSpaceFrameRef.current);
       reservedSpaceFrameRef.current = null;
@@ -3694,7 +3712,7 @@ var ChatThreadView = ({
       }
     };
   }, [latestTurn, latestUserMessageId, error2, measureLatestTurnMinHeight, scrollToBottom]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!latestTurn)
       return;
     const handleResize = () => {
@@ -3720,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;
@@ -3733,7 +3751,7 @@ var ChatThreadView = ({
       observer.disconnect();
     };
   }, [latestTurn, scrollToBottom]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const latestTurnElement = latestTurnRef.current;
     if (!latestTurnElement || typeof MutationObserver === "undefined") {
       return;
@@ -4027,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
@@ -4189,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;
@@ -4676,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
 };
@@ -5885,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;
@@ -6627,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) : "";
@@ -6646,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);
     },
@@ -6822,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);
@@ -6861,7 +6879,7 @@ var useChatComposer = () => {
       }
     }
   }, [skillsLoader]);
-  useEffect7(() => {
+  useEffect8(() => {
     void fetchSkills();
   }, [fetchSkills]);
   const hasModels = availableModels.length > 0;
@@ -6875,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(
@@ -7178,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);
@@ -7470,6 +7491,9 @@ var ChatModelControl = ({
   isModelsLoading,
   isModelsError,
   hasModels,
+  loadingLabel,
+  loadFailedLabel,
+  unavailableLabel,
   onSelectedModelChange,
   onReloadModels
 }) => {
@@ -7482,7 +7506,7 @@ var ChatModelControl = ({
         "aria-label": "Reload",
         onClick: onReloadModels,
         children: [
-          /* @__PURE__ */ jsx13("span", { children: "Failed to load models" }),
+          /* @__PURE__ */ jsx13("span", { children: loadFailedLabel }),
           /* @__PURE__ */ jsxs10(
             ReloadIcon,
             {
@@ -7504,7 +7528,7 @@ var ChatModelControl = ({
     );
   }
   if (isModelsLoading) {
-    return /* @__PURE__ */ jsx13(ModelBadge, { children: "Loading models..." });
+    return /* @__PURE__ */ jsx13(ModelBadge, { "data-testid": "chat-model-loading", children: loadingLabel });
   }
   if (hasModels && selectedModel) {
     return /* @__PURE__ */ jsx13(
@@ -7522,9 +7546,14 @@ var ChatModelControl = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx13(ModelBadge, { children: "No model available" });
+  return /* @__PURE__ */ jsx13(ModelBadge, { "data-testid": "chat-model-unavailable", children: unavailableLabel });
 };
 var ModelBadge = styled11.span`
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
   border-radius: 999px;
   border: 1px solid var(--border-hover);
   padding: 5px 12px;
@@ -7532,6 +7561,9 @@ var ModelBadge = styled11.span`
   font-size: 12px;
   color: var(--text-secondary);
   line-height: 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
 `;
 var ModelReloadButton = styled11.button`
   display: inline-flex;
@@ -7936,6 +7968,9 @@ var ChatComposerView = ({
   skillLoadingLabel,
   skillEmptyLabel,
   removeSkillAriaLabel,
+  modelLoadingLabel,
+  modelLoadFailedLabel,
+  modelUnavailableLabel,
   onValueChange,
   onPickImages,
   onPasteImages,
@@ -7977,9 +8012,10 @@ var ChatComposerView = ({
   }) : [];
   const showSkillMenu = Boolean(skillQueryMatch);
   const activeSkillQueryKey = skillQueryMatch ? `${skillQueryMatch.start}:${skillQueryMatch.end}:${skillQueryMatch.query}:${selectedSkills.join("\0")}` : "";
-  const { refs, floatingStyles } = useFloating2({
+  const { refs, floatingStyles, placement } = useFloating2({
     open: showSkillMenu,
     placement: "bottom-start",
+    strategy: "fixed",
     middleware: [
       offset3(3),
       flip3({ padding: 8 }),
@@ -8008,7 +8044,7 @@ var ChatComposerView = ({
     [refs]
   );
   const activeSkillIndex = activeSkillNavigation.queryKey === activeSkillQueryKey ? activeSkillNavigation.index : 0;
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     const element = inputRef.current;
     if (!element) {
       return;
@@ -8094,7 +8130,7 @@ var ChatComposerView = ({
     });
   };
   return /* @__PURE__ */ jsxs11(Container2, { children: [
-    /* @__PURE__ */ jsxs11(Surface, { "data-testid": "chat-composer-surface", children: [
+    /* @__PURE__ */ jsxs11(Surface, { ref: setSkillMenuReference, "data-testid": "chat-composer-surface", children: [
       enableImageAttachments ? /* @__PURE__ */ jsx16(
         "input",
         {
@@ -8128,7 +8164,7 @@ var ChatComposerView = ({
           }
         )
       ] }, skill)) }) : null,
-      /* @__PURE__ */ jsxs11(InputArea, { ref: setSkillMenuReference, "data-testid": "chat-composer-input-area", children: [
+      /* @__PURE__ */ jsxs11(InputArea, { "data-testid": "chat-composer-input-area", children: [
         isComposerExpanded || isComposerExpandable ? /* @__PURE__ */ jsx16(
           ComposerExpandButton,
           {
@@ -8195,6 +8231,9 @@ var ChatComposerView = ({
               isModelsLoading,
               isModelsError,
               hasModels,
+              loadingLabel: modelLoadingLabel,
+              loadFailedLabel: modelLoadFailedLabel,
+              unavailableLabel: modelUnavailableLabel,
               onSelectedModelChange,
               onReloadModels
             }
@@ -8218,6 +8257,8 @@ var ChatComposerView = ({
         ref: setSkillMenuFloating,
         style: floatingStyles,
         "data-testid": "chat-composer-skill-menu",
+        "data-placement": placement,
+        "data-floating-strategy": "fixed",
         role: "listbox",
         children: isSkillsLoading ? /* @__PURE__ */ jsx16(SkillMenuState, { "data-testid": "chat-composer-skill-loading", children: skillLoadingLabel }) : filteredSkills.length ? filteredSkills.map((skill, index3) => /* @__PURE__ */ jsx16(
           SkillMenuItem,
@@ -8241,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);
@@ -8279,6 +8320,9 @@ var ChatComposer = () => {
       skillLoadingLabel: labels.skillLoading,
       skillEmptyLabel: labels.skillEmpty,
       removeSkillAriaLabel: labels.removeSkillAriaLabel,
+      modelLoadingLabel: labels.modelLoading,
+      modelLoadFailedLabel: labels.modelLoadFailed,
+      modelUnavailableLabel: labels.modelUnavailable,
       onValueChange: actions.setValue,
       onPickImages: actions.pickImages,
       onPasteImages: actions.pasteImages,
@@ -8753,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.0",
+  "version": "1.3.2",
   "description": "AI chat React component library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",