@xinghunm/ai-chat 1.5.0 → 1.6.0

package/dist/index.d.mts

@@ -69,6 +69,21 @@ interface ChatHistorySessionListHandlers {
     onSelectHistorySession?: (session: ChatSession) => Promise<ChatHistorySessionMessagesPage | ChatMessage[] | void> | ChatHistorySessionMessagesPage | ChatMessage[] | void;
     onLoadMoreHistoryMessages?: (args: ChatHistorySessionMessageLoadArgs) => Promise<ChatHistorySessionMessagesPage | void> | ChatHistorySessionMessagesPage | void;
 }
+/**
+ * Arguments passed to custom history session action renderers.
+ */
+interface ChatSessionItemActionRenderProps {
+    session: ChatSession;
+    isActive: boolean;
+    isStreaming: boolean;
+    selectSession: () => Promise<void>;
+    startNewChat: () => void;
+    stopSession: () => Promise<void>;
+}
+/**
+ * Optional renderer used to append custom actions to a history session item.
+ */
+type ChatSessionItemActionsRenderer = (args: ChatSessionItemActionRenderProps) => ReactNode;
 /**
  * Client-side image attachment metadata kept in chat messages.
  */
@@ -506,6 +521,13 @@ interface NewChatTriggerRenderProps {
     stopActiveSession: () => Promise<void>;
     startNewChat: () => Promise<void>;
 }
+/**
+ * State exposed to optional composer mode accessory renderers.
+ */
+interface ChatComposerModeAccessoryRenderProps {
+    selectedMode: ChatAgentMode;
+    disabled: boolean;
+}
 /**
  * Default English label values used when no labels are provided.
  */
@@ -532,6 +554,8 @@ interface AiChatProviderBaseProps {
     onSelectHistorySession?: ChatHistorySessionListHandlers['onSelectHistorySession'];
     /** Optional callback used when the active historical session needs older messages. */
     onLoadMoreHistoryMessages?: ChatHistorySessionListHandlers['onLoadMoreHistoryMessages'];
+    /** Optional renderer used to append custom actions to a history session item. */
+    renderSessionItemActions?: ChatSessionItemActionsRenderer;
     /**
      * Whether to enable image attachment uploads. Defaults to `true`.
      * Set to `false` to hide the upload button, disable paste-image handling,
@@ -591,12 +615,14 @@ type AiChatProps = Omit<AiChatProviderProps, 'children'> & {
      * a streaming message, or an error to render.
      */
     onConversationStartedChange?: (started: boolean) => void;
+    /** Optional renderer used to append extra controls next to the mode selector. */
+    renderComposerModeAccessory?: (props: ChatComposerModeAccessoryRenderProps) => ReactNode;
 };
 /**
  * Top-level AI chat component. Wraps AiChatProvider and composes the full
  * chat UI: optional conversation sidebar + thread + composer.
  */
-declare const AiChat: ({ showConversationList, showNewChatButton, renderNewChatTrigger, showComposerOnlyBeforeFirstMessage, onConversationStartedChange, ...providerProps }: AiChatProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const AiChat: ({ showConversationList, showNewChatButton, renderNewChatTrigger, showComposerOnlyBeforeFirstMessage, onConversationStartedChange, renderComposerModeAccessory, ...providerProps }: AiChatProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 /**
  * Endpoint overrides for the built-in HTTP transport adapter.
@@ -714,6 +740,7 @@ interface ChatComposerViewProps {
     modelLoadingLabel: string;
     modelLoadFailedLabel: string;
     modelUnavailableLabel: string;
+    modeAccessory?: ReactNode;
     onValueChange: (value: string) => void;
     onPickImages: (files: FileList | File[]) => void;
     onPasteImages: (files: File[]) => void;
@@ -729,7 +756,9 @@ interface ChatComposerViewProps {
     /** Called to send a new user message. */
     onSend: () => void | Promise<void>;
 }
-declare const ChatComposer: () => _emotion_react_jsx_runtime.JSX.Element;
+declare const ChatComposer: ({ renderModeAccessory, }?: {
+    renderModeAccessory?: (props: ChatComposerModeAccessoryRenderProps) => ReactNode;
+}) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const ChatConversationList: () => _emotion_react_jsx_runtime.JSX.Element;
 
@@ -811,6 +840,10 @@ interface ChatContextValue {
     retryRef: MutableRefObject<(sessionId: string) => Promise<void>>;
     /** Stable ref populated by ChatComposer on mount; allows external controls to stop streaming. */
     stopRef: MutableRefObject<(sessionId: string) => Promise<void>>;
+    /** Current stop handler exposed as a plain function for render-time consumers. */
+    stopSession?: (sessionId: string) => Promise<void>;
+    /** Internal registration hook used by ChatComposer to refresh the stop handler. */
+    registerStopSession?: (handler: (sessionId: string) => Promise<void>) => void;
     /** Optional block renderer used to extend message rendering with custom block types. */
     renderMessageBlock?: ChatMessageBlockRenderer;
     /** Optional handler used to intercept questionnaire submissions before the default send flow. */
@@ -831,6 +864,8 @@ interface ChatContextValue {
     onSelectHistorySession?: ChatHistorySessionListHandlers['onSelectHistorySession'];
     /** Host callback triggered when a historical session needs older messages. */
     onLoadMoreHistoryMessages?: ChatHistorySessionListHandlers['onLoadMoreHistoryMessages'];
+    /** Optional renderer used to append custom actions to a history session item. */
+    renderSessionItemActions?: ChatSessionItemActionsRenderer;
 }
 
 /**
@@ -847,4 +882,4 @@ declare const useChatContext: () => ChatContextValue;
  */
 declare const useChatStore: <T>(selector: (state: ChatStore) => T) => T;
 
-export { AiChat, type AiChatLabels, type AiChatProps, AiChatProvider, type AiChatProviderProps, CHAT_AGENT_MODES, CHAT_MESSAGE_RENDER_ORDERS, type ChatAgentMode, ChatComposer, type ChatComposerViewProps, type ChatConfirmationSubmitHandler, ChatConversationList, type ChatHistorySessionListHandlers, type ChatHistorySessionListState, type ChatHistorySessionMessageLoadArgs, type ChatHistorySessionMessagesPage, type ChatImageAttachment, type ChatMessage, type ChatMessageBlock, type ChatMessageBlockRenderer, type ChatMessageBlockRendererProps, type ChatMessageRenderOrder, type ChatMessageStatus, type ChatModel, type ChatParameterSummaryItem, type ChatQuestionnaireSubmitHandler, type ChatRole, type ChatSession, type ChatSessionMessageLoadStatus, type ChatStreamMessagePatch, type ChatStreamPacketTransformArgs, type ChatStreamPacketUpdate, type ChatSubmissionContext, ChatThread, type ChatToolExecutionPolicy, type ChatTransport, type ChatTransportStartStreamArgs, type CreateDefaultChatTransportOptions, DEFAULT_AI_CHAT_LABELS, DEFAULT_CHAT_AGENT_MODE, type DefaultChatTransportEndpoints, type DefaultChatTransportModelsResolver, type DefaultChatTransportRequestBodyBuilder, type DefaultChatTransportRequestBodyBuilderArgs, type ExecutionConfirmationSubmission, type ExecutionProposal, type NewChatTriggerRenderProps, type PlanQuestionOption, type PlanQuestionSubmissionDetail, type PlanQuestionnaire, type PlanQuestionnaireSubmission, type ResultSummary, type TransformChatStreamPacket, createDefaultChatTransport, useChatContext, useChatStore };
+export { AiChat, type AiChatLabels, type AiChatProps, AiChatProvider, type AiChatProviderProps, CHAT_AGENT_MODES, CHAT_MESSAGE_RENDER_ORDERS, type ChatAgentMode, ChatComposer, type ChatComposerModeAccessoryRenderProps, type ChatComposerViewProps, type ChatConfirmationSubmitHandler, ChatConversationList, type ChatHistorySessionListHandlers, type ChatHistorySessionListState, type ChatHistorySessionMessageLoadArgs, type ChatHistorySessionMessagesPage, type ChatImageAttachment, type ChatMessage, type ChatMessageBlock, type ChatMessageBlockRenderer, type ChatMessageBlockRendererProps, type ChatMessageRenderOrder, type ChatMessageStatus, type ChatModel, type ChatParameterSummaryItem, type ChatQuestionnaireSubmitHandler, type ChatRole, type ChatSession, type ChatSessionItemActionRenderProps, type ChatSessionItemActionsRenderer, type ChatSessionMessageLoadStatus, type ChatStreamMessagePatch, type ChatStreamPacketTransformArgs, type ChatStreamPacketUpdate, type ChatSubmissionContext, ChatThread, type ChatToolExecutionPolicy, type ChatTransport, type ChatTransportStartStreamArgs, type CreateDefaultChatTransportOptions, DEFAULT_AI_CHAT_LABELS, DEFAULT_CHAT_AGENT_MODE, type DefaultChatTransportEndpoints, type DefaultChatTransportModelsResolver, type DefaultChatTransportRequestBodyBuilder, type DefaultChatTransportRequestBodyBuilderArgs, type ExecutionConfirmationSubmission, type ExecutionProposal, type NewChatTriggerRenderProps, type PlanQuestionOption, type PlanQuestionSubmissionDetail, type PlanQuestionnaire, type PlanQuestionnaireSubmission, type ResultSummary, type TransformChatStreamPacket, createDefaultChatTransport, useChatContext, useChatStore };

package/dist/index.d.ts

@@ -69,6 +69,21 @@ interface ChatHistorySessionListHandlers {
     onSelectHistorySession?: (session: ChatSession) => Promise<ChatHistorySessionMessagesPage | ChatMessage[] | void> | ChatHistorySessionMessagesPage | ChatMessage[] | void;
     onLoadMoreHistoryMessages?: (args: ChatHistorySessionMessageLoadArgs) => Promise<ChatHistorySessionMessagesPage | void> | ChatHistorySessionMessagesPage | void;
 }
+/**
+ * Arguments passed to custom history session action renderers.
+ */
+interface ChatSessionItemActionRenderProps {
+    session: ChatSession;
+    isActive: boolean;
+    isStreaming: boolean;
+    selectSession: () => Promise<void>;
+    startNewChat: () => void;
+    stopSession: () => Promise<void>;
+}
+/**
+ * Optional renderer used to append custom actions to a history session item.
+ */
+type ChatSessionItemActionsRenderer = (args: ChatSessionItemActionRenderProps) => ReactNode;
 /**
  * Client-side image attachment metadata kept in chat messages.
  */
@@ -506,6 +521,13 @@ interface NewChatTriggerRenderProps {
     stopActiveSession: () => Promise<void>;
     startNewChat: () => Promise<void>;
 }
+/**
+ * State exposed to optional composer mode accessory renderers.
+ */
+interface ChatComposerModeAccessoryRenderProps {
+    selectedMode: ChatAgentMode;
+    disabled: boolean;
+}
 /**
  * Default English label values used when no labels are provided.
  */
@@ -532,6 +554,8 @@ interface AiChatProviderBaseProps {
     onSelectHistorySession?: ChatHistorySessionListHandlers['onSelectHistorySession'];
     /** Optional callback used when the active historical session needs older messages. */
     onLoadMoreHistoryMessages?: ChatHistorySessionListHandlers['onLoadMoreHistoryMessages'];
+    /** Optional renderer used to append custom actions to a history session item. */
+    renderSessionItemActions?: ChatSessionItemActionsRenderer;
     /**
      * Whether to enable image attachment uploads. Defaults to `true`.
      * Set to `false` to hide the upload button, disable paste-image handling,
@@ -591,12 +615,14 @@ type AiChatProps = Omit<AiChatProviderProps, 'children'> & {
      * a streaming message, or an error to render.
      */
     onConversationStartedChange?: (started: boolean) => void;
+    /** Optional renderer used to append extra controls next to the mode selector. */
+    renderComposerModeAccessory?: (props: ChatComposerModeAccessoryRenderProps) => ReactNode;
 };
 /**
  * Top-level AI chat component. Wraps AiChatProvider and composes the full
  * chat UI: optional conversation sidebar + thread + composer.
  */
-declare const AiChat: ({ showConversationList, showNewChatButton, renderNewChatTrigger, showComposerOnlyBeforeFirstMessage, onConversationStartedChange, ...providerProps }: AiChatProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const AiChat: ({ showConversationList, showNewChatButton, renderNewChatTrigger, showComposerOnlyBeforeFirstMessage, onConversationStartedChange, renderComposerModeAccessory, ...providerProps }: AiChatProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 /**
  * Endpoint overrides for the built-in HTTP transport adapter.
@@ -714,6 +740,7 @@ interface ChatComposerViewProps {
     modelLoadingLabel: string;
     modelLoadFailedLabel: string;
     modelUnavailableLabel: string;
+    modeAccessory?: ReactNode;
     onValueChange: (value: string) => void;
     onPickImages: (files: FileList | File[]) => void;
     onPasteImages: (files: File[]) => void;
@@ -729,7 +756,9 @@ interface ChatComposerViewProps {
     /** Called to send a new user message. */
     onSend: () => void | Promise<void>;
 }
-declare const ChatComposer: () => _emotion_react_jsx_runtime.JSX.Element;
+declare const ChatComposer: ({ renderModeAccessory, }?: {
+    renderModeAccessory?: (props: ChatComposerModeAccessoryRenderProps) => ReactNode;
+}) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const ChatConversationList: () => _emotion_react_jsx_runtime.JSX.Element;
 
@@ -811,6 +840,10 @@ interface ChatContextValue {
     retryRef: MutableRefObject<(sessionId: string) => Promise<void>>;
     /** Stable ref populated by ChatComposer on mount; allows external controls to stop streaming. */
     stopRef: MutableRefObject<(sessionId: string) => Promise<void>>;
+    /** Current stop handler exposed as a plain function for render-time consumers. */
+    stopSession?: (sessionId: string) => Promise<void>;
+    /** Internal registration hook used by ChatComposer to refresh the stop handler. */
+    registerStopSession?: (handler: (sessionId: string) => Promise<void>) => void;
     /** Optional block renderer used to extend message rendering with custom block types. */
     renderMessageBlock?: ChatMessageBlockRenderer;
     /** Optional handler used to intercept questionnaire submissions before the default send flow. */
@@ -831,6 +864,8 @@ interface ChatContextValue {
     onSelectHistorySession?: ChatHistorySessionListHandlers['onSelectHistorySession'];
     /** Host callback triggered when a historical session needs older messages. */
     onLoadMoreHistoryMessages?: ChatHistorySessionListHandlers['onLoadMoreHistoryMessages'];
+    /** Optional renderer used to append custom actions to a history session item. */
+    renderSessionItemActions?: ChatSessionItemActionsRenderer;
 }
 
 /**
@@ -847,4 +882,4 @@ declare const useChatContext: () => ChatContextValue;
  */
 declare const useChatStore: <T>(selector: (state: ChatStore) => T) => T;
 
-export { AiChat, type AiChatLabels, type AiChatProps, AiChatProvider, type AiChatProviderProps, CHAT_AGENT_MODES, CHAT_MESSAGE_RENDER_ORDERS, type ChatAgentMode, ChatComposer, type ChatComposerViewProps, type ChatConfirmationSubmitHandler, ChatConversationList, type ChatHistorySessionListHandlers, type ChatHistorySessionListState, type ChatHistorySessionMessageLoadArgs, type ChatHistorySessionMessagesPage, type ChatImageAttachment, type ChatMessage, type ChatMessageBlock, type ChatMessageBlockRenderer, type ChatMessageBlockRendererProps, type ChatMessageRenderOrder, type ChatMessageStatus, type ChatModel, type ChatParameterSummaryItem, type ChatQuestionnaireSubmitHandler, type ChatRole, type ChatSession, type ChatSessionMessageLoadStatus, type ChatStreamMessagePatch, type ChatStreamPacketTransformArgs, type ChatStreamPacketUpdate, type ChatSubmissionContext, ChatThread, type ChatToolExecutionPolicy, type ChatTransport, type ChatTransportStartStreamArgs, type CreateDefaultChatTransportOptions, DEFAULT_AI_CHAT_LABELS, DEFAULT_CHAT_AGENT_MODE, type DefaultChatTransportEndpoints, type DefaultChatTransportModelsResolver, type DefaultChatTransportRequestBodyBuilder, type DefaultChatTransportRequestBodyBuilderArgs, type ExecutionConfirmationSubmission, type ExecutionProposal, type NewChatTriggerRenderProps, type PlanQuestionOption, type PlanQuestionSubmissionDetail, type PlanQuestionnaire, type PlanQuestionnaireSubmission, type ResultSummary, type TransformChatStreamPacket, createDefaultChatTransport, useChatContext, useChatStore };
+export { AiChat, type AiChatLabels, type AiChatProps, AiChatProvider, type AiChatProviderProps, CHAT_AGENT_MODES, CHAT_MESSAGE_RENDER_ORDERS, type ChatAgentMode, ChatComposer, type ChatComposerModeAccessoryRenderProps, type ChatComposerViewProps, type ChatConfirmationSubmitHandler, ChatConversationList, type ChatHistorySessionListHandlers, type ChatHistorySessionListState, type ChatHistorySessionMessageLoadArgs, type ChatHistorySessionMessagesPage, type ChatImageAttachment, type ChatMessage, type ChatMessageBlock, type ChatMessageBlockRenderer, type ChatMessageBlockRendererProps, type ChatMessageRenderOrder, type ChatMessageStatus, type ChatModel, type ChatParameterSummaryItem, type ChatQuestionnaireSubmitHandler, type ChatRole, type ChatSession, type ChatSessionItemActionRenderProps, type ChatSessionItemActionsRenderer, type ChatSessionMessageLoadStatus, type ChatStreamMessagePatch, type ChatStreamPacketTransformArgs, type ChatStreamPacketUpdate, type ChatSubmissionContext, ChatThread, type ChatToolExecutionPolicy, type ChatTransport, type ChatTransportStartStreamArgs, type CreateDefaultChatTransportOptions, DEFAULT_AI_CHAT_LABELS, DEFAULT_CHAT_AGENT_MODE, type DefaultChatTransportEndpoints, type DefaultChatTransportModelsResolver, type DefaultChatTransportRequestBodyBuilder, type DefaultChatTransportRequestBodyBuilderArgs, type ExecutionConfirmationSubmission, type ExecutionProposal, type NewChatTriggerRenderProps, type PlanQuestionOption, type PlanQuestionSubmissionDetail, type PlanQuestionnaire, type PlanQuestionnaireSubmission, type ResultSummary, type TransformChatStreamPacket, createDefaultChatTransport, useChatContext, useChatStore };

package/dist/index.js

@@ -1125,6 +1125,7 @@ var AiChatProvider = (props) => {
     onLoadMoreSessions,
     onSelectHistorySession,
     onLoadMoreHistoryMessages,
+    renderSessionItemActions,
     enableImageAttachments = true,
     children
   } = props;
@@ -1137,6 +1138,17 @@ var AiChatProvider = (props) => {
   });
   const stopRef = (0, import_react2.useRef)(async (_sessionId) => {
   });
+  const [stopSession, setStopSession] = (0, import_react2.useState)(
+    () => async (_sessionId) => {
+    }
+  );
+  const registerStopSession = (0, import_react2.useCallback)(
+    (handler) => {
+      stopRef.current = handler;
+      setStopSession(() => handler);
+    },
+    []
+  );
   const defaultApiBaseUrl = "apiBaseUrl" in props ? props.apiBaseUrl : void 0;
   const defaultAuthToken = "authToken" in props ? props.authToken : void 0;
   const defaultTransformStreamPacket = "transformStreamPacket" in props ? props.transformStreamPacket : void 0;
@@ -1196,6 +1208,8 @@ var AiChatProvider = (props) => {
       sendRef,
       retryRef,
       stopRef,
+      stopSession,
+      registerStopSession,
       renderMessageBlock,
       handleQuestionnaireSubmit,
       handleConfirmationSubmit,
@@ -1205,7 +1219,8 @@ var AiChatProvider = (props) => {
       historySessionList,
       onLoadMoreSessions,
       onSelectHistorySession,
-      onLoadMoreHistoryMessages
+      onLoadMoreHistoryMessages,
+      renderSessionItemActions
     }),
     [
       axiosInstance,
@@ -1221,10 +1236,13 @@ var AiChatProvider = (props) => {
       onLoadMoreSessions,
       onLoadMoreHistoryMessages,
       onSelectHistorySession,
+      renderSessionItemActions,
       renderMessageBlock,
       sendRef,
       retryRef,
       stopRef,
+      stopSession,
+      registerStopSession,
       store,
       transport
     ]
@@ -8677,6 +8695,7 @@ var ChatComposerView = ({
   modelLoadingLabel,
   modelLoadFailedLabel,
   modelUnavailableLabel,
+  modeAccessory,
   onValueChange,
   onPickImages,
   onPasteImages,
@@ -8930,7 +8949,8 @@ var ChatComposerView = ({
               labels: modeLabels,
               onChange: onSelectedModeChange
             }
-          )
+          ),
+          modeAccessory
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(TrailingActions, { "data-testid": "chat-composer-trailing-actions", children: [
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -8988,8 +9008,17 @@ var ChatComposerView = ({
     ) }) : null
   ] });
 };
-var ChatComposer = () => {
-  const { labels, sendRef, retryRef, stopRef, enableImageAttachments } = useChatContext();
+var ChatComposer = ({
+  renderModeAccessory
+} = {}) => {
+  const {
+    labels,
+    sendRef,
+    retryRef,
+    registerStopSession = () => {
+    },
+    enableImageAttachments
+  } = useChatContext();
   const { state, actions } = useChatComposer();
   const { send, retry } = actions;
   (0, import_react18.useEffect)(() => {
@@ -8997,13 +9026,17 @@ var ChatComposer = () => {
     retryRef.current = async (sessionId) => {
       retry(sessionId);
     };
-    stopRef.current = actions.stopSession;
-  }, [actions.stopSession, retry, retryRef, send, sendRef, stopRef]);
+    registerStopSession(actions.stopSession);
+  }, [actions.stopSession, registerStopSession, retry, retryRef, send, sendRef]);
   const modeLabels = {
     ask: labels.modeLabelAsk,
     plan: labels.modeLabelPlan,
     agent: labels.modeLabelAgent
   };
+  const modeAccessory = renderModeAccessory?.({
+    selectedMode: state.selectedMode,
+    disabled: state.isStreaming
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     ChatComposerView,
     {
@@ -9033,6 +9066,7 @@ var ChatComposer = () => {
       modelLoadingLabel: labels.modelLoading,
       modelLoadFailedLabel: labels.modelLoadFailed,
       modelUnavailableLabel: labels.modelUnavailable,
+      modeAccessory,
       onValueChange: actions.setValue,
       onPickImages: actions.pickImages,
       onPasteImages: actions.pasteImages,
@@ -9328,19 +9362,30 @@ var import_styled16 = __toESM(require("@emotion/styled"));
 var import_react20 = require("react");
 var import_styled15 = __toESM(require("@emotion/styled"));
 var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
-var ChatSessionItem = (0, import_react20.memo)(({ session, isActive, onClick }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    SessionButton,
-    {
-      type: "button",
-      "data-active": isActive,
-      "data-testid": `chat-session-item-${session.sessionId}`,
-      onClick: () => onClick(session.sessionId),
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SessionTitle, { children: session.title })
-    }
-  );
-});
+var ChatSessionItem = (0, import_react20.memo)(
+  ({ session, isActive, onClick, actions }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(SessionRow, { "data-active": isActive, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        SessionButton,
+        {
+          type: "button",
+          "data-active": isActive,
+          "data-testid": `chat-session-item-${session.sessionId}`,
+          onClick: () => onClick(session.sessionId),
+          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SessionTitle, { children: session.title })
+        }
+      ),
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SessionActions, { "data-testid": `chat-session-item-actions-${session.sessionId}`, children: actions }) : null
+    ] });
+  }
+);
 ChatSessionItem.displayName = "ChatSessionItem";
+var SessionRow = import_styled15.default.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+`;
 var SessionTitle = import_styled15.default.span`
   display: block;
   min-width: 0;
@@ -9349,6 +9394,8 @@ var SessionTitle = import_styled15.default.span`
   white-space: nowrap;
 `;
 var SessionButton = import_styled15.default.button`
+  flex: 1;
+  min-width: 0;
   border: 1px solid transparent;
   border-radius: 12px;
   padding: 12px;
@@ -9381,6 +9428,12 @@ var SessionButton = import_styled15.default.button`
     background: rgba(255, 255, 255, 0.08);
   }
 `;
+var SessionActions = import_styled15.default.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+`;
 
 // src/components/chat-conversation-list/lib/history-session-selection.ts
 var shouldLoadHistorySessionMessages = ({
@@ -9410,12 +9463,37 @@ var shouldLoadMoreSessions = ({
   threshold = SCROLL_LOAD_MORE_THRESHOLD_PX
 }) => scrollHeight - scrollTop - clientHeight <= threshold;
 var isHistorySessionMessagesPage = (value) => typeof value === "object" && value !== null && Array.isArray(value.messages);
+var matchesHydratedHistorySessions = (renderedHistorySessionIds, historySessionIds) => {
+  if (renderedHistorySessionIds.length === historySessionIds.length) {
+    return renderedHistorySessionIds.every(
+      (sessionId, index3) => sessionId === historySessionIds[index3]
+    );
+  }
+  if (renderedHistorySessionIds.length !== historySessionIds.length + 1) {
+    return false;
+  }
+  const matchesWithoutLeadingExtra = renderedHistorySessionIds.slice(1).every((sessionId, index3) => sessionId === historySessionIds[index3]);
+  if (matchesWithoutLeadingExtra) {
+    return true;
+  }
+  return renderedHistorySessionIds.slice(0, -1).every((sessionId, index3) => sessionId === historySessionIds[index3]);
+};
 var ChatConversationList = () => {
-  const { labels, historySessionList, onLoadMoreSessions, onSelectHistorySession, store } = useChatContext();
+  const {
+    labels,
+    historySessionList,
+    onLoadMoreSessions,
+    onSelectHistorySession,
+    renderSessionItemActions,
+    stopSession = async (_sessionId) => {
+    },
+    store
+  } = useChatContext();
   const localSessions = useChatStore((s) => s.sessions);
   const activeSessionId = useChatStore((s) => s.activeSessionId);
   const startNewChat = useChatStore((s) => s.startNewChat);
   const setActiveSession = useChatStore((s) => s.setActiveSession);
+  const isStreamingBySession = useChatStore((s) => s.isStreamingBySession);
   const hydrateHistorySessions = useChatStore((s) => s.hydrateHistorySessions);
   const hydrateHistorySessionMessages = useChatStore((s) => s.hydrateHistorySessionMessages);
   const hydrateHistorySessionMessagesPage = useChatStore((s) => s.hydrateHistorySessionMessagesPage);
@@ -9424,6 +9502,7 @@ var ChatConversationList = () => {
   );
   const isLoadingMoreRef = (0, import_react21.useRef)(false);
   const hasSeenLoadingMoreRef = (0, import_react21.useRef)(false);
+  const listRef = (0, import_react21.useRef)(null);
   (0, import_react21.useEffect)(() => {
     if (!historySessionList)
       return;
@@ -9444,23 +9523,50 @@ var ChatConversationList = () => {
     hasSeenLoadingMoreRef.current = false;
   }, [historySessionList?.sessions.length, historySessionList?.hasMore]);
   const sessions = localSessions;
-  const handleSessionListScroll = (event) => {
-    if (!historySessionList?.hasMore || historySessionList.isLoading || !onLoadMoreSessions || isLoadingMoreRef.current) {
+  const hasMoreSessions = historySessionList?.hasMore ?? false;
+  const isHistorySessionListLoading = historySessionList?.isLoading ?? false;
+  const renderedHistorySessionIds = sessions.filter((session) => !isDraftChatSessionId(session.sessionId)).map((session) => session.sessionId);
+  const isHistorySessionListHydrated = !historySessionList || matchesHydratedHistorySessions(
+    renderedHistorySessionIds,
+    historySessionList.sessions.map((session) => session.sessionId)
+  );
+  const requestLoadMoreSessions = (0, import_react21.useCallback)(() => {
+    if (!hasMoreSessions || isHistorySessionListLoading || !onLoadMoreSessions || isLoadingMoreRef.current) {
       return;
     }
-    const target = event.currentTarget;
-    if (shouldLoadMoreSessions({
-      scrollTop: target.scrollTop,
-      clientHeight: target.clientHeight,
-      scrollHeight: target.scrollHeight
-    })) {
-      isLoadingMoreRef.current = true;
-      void Promise.resolve(onLoadMoreSessions()).catch(() => {
-        isLoadingMoreRef.current = false;
-        hasSeenLoadingMoreRef.current = false;
-      });
+    isLoadingMoreRef.current = true;
+    void Promise.resolve(onLoadMoreSessions()).catch(() => {
+      isLoadingMoreRef.current = false;
+      hasSeenLoadingMoreRef.current = false;
+    });
+  }, [hasMoreSessions, isHistorySessionListLoading, onLoadMoreSessions]);
+  const maybeLoadMoreSessions = (0, import_react21.useCallback)(
+    (target) => {
+      if (target.clientHeight <= 0 || target.scrollHeight <= 0) {
+        return;
+      }
+      if (shouldLoadMoreSessions({
+        scrollTop: target.scrollTop,
+        clientHeight: target.clientHeight,
+        scrollHeight: target.scrollHeight
+      })) {
+        requestLoadMoreSessions();
+      }
+    },
+    [requestLoadMoreSessions]
+  );
+  (0, import_react21.useEffect)(() => {
+    if (!listRef.current || !isHistorySessionListHydrated) {
+      return;
     }
-  };
+    maybeLoadMoreSessions(listRef.current);
+  }, [isHistorySessionListHydrated, hasMoreSessions, localSessions.length, maybeLoadMoreSessions]);
+  const handleSessionListScroll = (0, import_react21.useCallback)(
+    (event) => {
+      maybeLoadMoreSessions(event.currentTarget);
+    },
+    [maybeLoadMoreSessions]
+  );
   const handleSelectSession = async (sessionId) => {
     setActiveSession(sessionId);
     const session = sessions.find((item) => item.sessionId === sessionId);
@@ -9502,13 +9608,21 @@ var ChatConversationList = () => {
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Title3, { children: labels.sessionsTitle }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: startNewChat, children: labels.newChat })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(List2, { "data-testid": "chat-session-list", onScroll: handleSessionListScroll, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(List2, { ref: listRef, "data-testid": "chat-session-list", onScroll: handleSessionListScroll, children: [
       sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         ChatSessionItem,
         {
           session,
           isActive: activeSessionId === session.sessionId,
-          onClick: (sessionId) => void handleSelectSession(sessionId)
+          onClick: (sessionId) => void handleSelectSession(sessionId),
+          actions: isDraftChatSessionId(session.sessionId) ? void 0 : renderSessionItemActions?.({
+            session,
+            isActive: activeSessionId === session.sessionId,
+            isStreaming: isStreamingBySession[session.sessionId] ?? false,
+            selectSession: () => handleSelectSession(session.sessionId),
+            startNewChat,
+            stopSession: () => stopSession(session.sessionId)
+          })
         },
         session.sessionId
       )),
@@ -9521,6 +9635,7 @@ var ChatConversationList = () => {
 var Container3 = import_styled16.default.aside`
   width: 280px;
   min-width: 280px;
+  min-height: 0;
   border-right: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
   display: flex;
   flex-direction: column;
@@ -9566,6 +9681,8 @@ var CreateButton = import_styled16.default.button`
   }
 `;
 var List2 = import_styled16.default.div`
+  flex: 1 1 0;
+  min-height: 0;
   padding: 0 12px 16px;
   display: flex;
   flex-direction: column;
@@ -9627,7 +9744,8 @@ var AiChatWorkspaceContent = ({
   showNewChatButton,
   renderNewChatTrigger,
   showComposerOnlyBeforeFirstMessage = false,
-  onConversationStartedChange
+  onConversationStartedChange,
+  renderComposerModeAccessory
 }) => {
   const isConversationStarted = useChatStore(
     (state) => hasStartedConversation({
@@ -9646,12 +9764,13 @@ var AiChatWorkspaceContent = ({
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Workspace, { children: [
       showNewChatButton && !showConversationList && !shouldShowComposerOnly ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(QuickActions, { renderNewChatTrigger }) : null,
       shouldShowComposerOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatThread, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatComposer, {})
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatComposer, { renderModeAccessory: renderComposerModeAccessory })
     ] })
   ] });
 };
 var QuickActions = ({ renderNewChatTrigger }) => {
-  const { labels, stopRef, store } = useChatContext();
+  const { labels, stopSession = async (_sessionId) => {
+  }, store } = useChatContext();
   const startNewChat = useChatStore((state) => state.startNewChat);
   const activeSessionId = useChatStore((state) => state.activeSessionId);
   const isActiveSessionStreaming = useChatStore(
@@ -9670,14 +9789,14 @@ var QuickActions = ({ renderNewChatTrigger }) => {
     if (!currentSessionId || !isCurrentSessionStreaming) {
       return;
     }
-    await stopRef.current(currentSessionId);
+    await stopSession(currentSessionId);
   };
   const handleStartNewChat = async () => {
     const currentState = store.getState();
     const currentSessionId = currentState.activeSessionId;
     const isCurrentSessionStreaming = currentSessionId ? currentState.isStreamingBySession[currentSessionId] ?? false : false;
     if (currentSessionId && isCurrentSessionStreaming) {
-      void stopRef.current(currentSessionId);
+      void stopSession(currentSessionId);
     }
     createNewSession();
   };
@@ -9721,6 +9840,7 @@ var AiChat = ({
   renderNewChatTrigger,
   showComposerOnlyBeforeFirstMessage = false,
   onConversationStartedChange,
+  renderComposerModeAccessory,
   ...providerProps
 }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   import_compass_ui4.ConfigProvider,
@@ -9764,7 +9884,8 @@ var AiChat = ({
         showNewChatButton,
         renderNewChatTrigger,
         showComposerOnlyBeforeFirstMessage,
-        onConversationStartedChange
+        onConversationStartedChange,
+        renderComposerModeAccessory
       }
     ) })
   }

package/dist/index.mjs

@@ -4,7 +4,14 @@ import styled17 from "@emotion/styled";
 import { ConfigProvider } from "@xinghunm/compass-ui";
 
 // src/components/ai-chat-provider/index.tsx
-import { useRef, useMemo, useState, useEffect, useLayoutEffect } from "react";
+import {
+  useCallback,
+  useRef,
+  useMemo,
+  useState,
+  useEffect,
+  useLayoutEffect
+} from "react";
 import axios2 from "axios";
 
 // src/context/chat-context.ts
@@ -1078,6 +1085,7 @@ var AiChatProvider = (props) => {
     onLoadMoreSessions,
     onSelectHistorySession,
     onLoadMoreHistoryMessages,
+    renderSessionItemActions,
     enableImageAttachments = true,
     children
   } = props;
@@ -1090,6 +1098,17 @@ var AiChatProvider = (props) => {
   });
   const stopRef = useRef(async (_sessionId) => {
   });
+  const [stopSession, setStopSession] = useState(
+    () => async (_sessionId) => {
+    }
+  );
+  const registerStopSession = useCallback(
+    (handler) => {
+      stopRef.current = handler;
+      setStopSession(() => handler);
+    },
+    []
+  );
   const defaultApiBaseUrl = "apiBaseUrl" in props ? props.apiBaseUrl : void 0;
   const defaultAuthToken = "authToken" in props ? props.authToken : void 0;
   const defaultTransformStreamPacket = "transformStreamPacket" in props ? props.transformStreamPacket : void 0;
@@ -1149,6 +1168,8 @@ var AiChatProvider = (props) => {
       sendRef,
       retryRef,
       stopRef,
+      stopSession,
+      registerStopSession,
       renderMessageBlock,
       handleQuestionnaireSubmit,
       handleConfirmationSubmit,
@@ -1158,7 +1179,8 @@ var AiChatProvider = (props) => {
       historySessionList,
       onLoadMoreSessions,
       onSelectHistorySession,
-      onLoadMoreHistoryMessages
+      onLoadMoreHistoryMessages,
+      renderSessionItemActions
     }),
     [
       axiosInstance,
@@ -1174,10 +1196,13 @@ var AiChatProvider = (props) => {
       onLoadMoreSessions,
       onLoadMoreHistoryMessages,
       onSelectHistorySession,
+      renderSessionItemActions,
       renderMessageBlock,
       sendRef,
       retryRef,
       stopRef,
+      stopSession,
+      registerStopSession,
       store,
       transport
     ]
@@ -1186,7 +1211,7 @@ var AiChatProvider = (props) => {
 };
 
 // src/components/chat-thread/index.tsx
-import { useCallback as useCallback3, useLayoutEffect as useLayoutEffect3, useMemo as useMemo4, useRef as useRef5, useState as useState5 } from "react";
+import { useCallback as useCallback4, useLayoutEffect as useLayoutEffect3, useMemo as useMemo4, useRef as useRef5, useState as useState5 } from "react";
 import styled9 from "@emotion/styled";
 
 // src/context/use-chat-context.ts
@@ -1207,7 +1232,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 as useLayoutEffect2, useState as useState4 } from "react";
+import { Fragment, memo, useCallback as useCallback3, useLayoutEffect as useLayoutEffect2, useState as useState4 } from "react";
 import styled7 from "@emotion/styled";
 import { keyframes } from "@emotion/react";
 import ReactMarkdown from "react-markdown";
@@ -1216,7 +1241,7 @@ import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 
 // src/components/chat-thread/hooks/use-chat-message-reveal.ts
-import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useReducer, useRef as useRef2 } from "react";
+import { useCallback as useCallback2, 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;
@@ -1356,7 +1381,7 @@ var useChatMessageReveal = (message) => {
     createRevealState
   );
   const { batchedTargetUnitCount, displayedUnitCount, isFreshBlockActive } = state;
-  const commitBatchedTargetUnitCount = useCallback(
+  const commitBatchedTargetUnitCount = useCallback2(
     (nextTargetUnitCount) => {
       batchedTargetUnitCountRef.current = nextTargetUnitCount;
       dispatch({
@@ -3245,7 +3270,7 @@ var useUserMessageCollapse = ({
   const [isCollapsible, setIsCollapsible] = useState4(false);
   const [isExpanded, setIsExpanded] = useState4(false);
   const [bodyStackElement, setBodyStackElement] = useState4(null);
-  const syncCollapseState = useCallback2(
+  const syncCollapseState = useCallback3(
     (element) => {
       const nextCollapsible = enabled && (element?.scrollHeight ?? 0) > USER_MESSAGE_COLLAPSE_HEIGHT_PX;
       setIsCollapsible(nextCollapsible);
@@ -3255,7 +3280,7 @@ var useUserMessageCollapse = ({
     },
     [enabled]
   );
-  const bodyStackRef = useCallback2(
+  const bodyStackRef = useCallback3(
     (node) => {
       setBodyStackElement(node);
       syncCollapseState(node);
@@ -4172,7 +4197,7 @@ var ChatThreadView = ({
   const [latestTurnMinHeight, setLatestTurnMinHeight] = useState5(0);
   const [isDetached, setIsDetached] = useState5(false);
   const [pendingNewMessageCount, setPendingNewMessageCount] = useState5(0);
-  const measureLatestTurnMinHeight = useCallback3(() => {
+  const measureLatestTurnMinHeight = useCallback4(() => {
     const container = containerRef.current;
     if (!container)
       return;
@@ -4182,7 +4207,7 @@ var ChatThreadView = ({
     const nextMinHeight = Math.max(0, container.clientHeight - paddingTop - paddingBottom);
     setLatestTurnMinHeight((current) => current === nextMinHeight ? current : nextMinHeight);
   }, []);
-  const scrollToBottom = useCallback3((force = false) => {
+  const scrollToBottom = useCallback4((force = false) => {
     const container = containerRef.current;
     if (!container)
       return false;
@@ -4198,12 +4223,12 @@ var ChatThreadView = ({
     }
     return true;
   }, []);
-  const markThreadPinned = useCallback3(() => {
+  const markThreadPinned = useCallback4(() => {
     isPinnedRef.current = true;
     setIsDetached(false);
     setPendingNewMessageCount(0);
   }, []);
-  const scrollToBottomAndPin = useCallback3(
+  const scrollToBottomAndPin = useCallback4(
     (force = false) => {
       const didScroll = scrollToBottom(force);
       if (!didScroll)
@@ -4212,7 +4237,7 @@ var ChatThreadView = ({
     },
     [markThreadPinned, scrollToBottom]
   );
-  const handleLoadPreviousMessages = useCallback3(async () => {
+  const handleLoadPreviousMessages = useCallback4(async () => {
     const container = containerRef.current;
     if (!container || !onLoadPreviousMessages || isLoadingPreviousMessages) {
       return;
@@ -4237,7 +4262,7 @@ var ChatThreadView = ({
       nextContainer.scrollTop = nextContainer.scrollHeight - previousScrollHeight + previousScrollTop;
     });
   }, [isLoadingPreviousMessages, onLoadPreviousMessages]);
-  const handleContainerScroll = useCallback3(() => {
+  const handleContainerScroll = useCallback4(() => {
     const container = containerRef.current;
     if (!container)
       return;
@@ -4466,13 +4491,13 @@ var ChatThread = () => {
     onLoadMoreHistoryMessages,
     labels
   } = useChatContext();
-  const handleRetry = useCallback3(() => {
+  const handleRetry = useCallback4(() => {
     if (!activeSessionId)
       return;
     clearSessionError(activeSessionId);
     void retryRef.current(activeSessionId);
   }, [activeSessionId, clearSessionError, retryRef]);
-  const handleQuestionnaireSubmit = useCallback3(
+  const handleQuestionnaireSubmit = useCallback4(
     async (submission) => {
       const sourceSessionId = activeSessionId;
       if (customQuestionnaireSubmit) {
@@ -4507,7 +4532,7 @@ var ChatThread = () => {
     },
     [activeSessionId, customQuestionnaireSubmit, preferredMode, sendRef, updateQA]
   );
-  const handleConfirmation = useCallback3(
+  const handleConfirmation = useCallback4(
     async (submission) => {
       const sourceSessionId = activeSessionId;
       if (customConfirmationSubmit) {
@@ -4526,7 +4551,7 @@ var ChatThread = () => {
     },
     [activeSessionId, customConfirmationSubmit, preferredMode, sendRef]
   );
-  const handleLoadPreviousMessages = useCallback3(async () => {
+  const handleLoadPreviousMessages = useCallback4(async () => {
     if (!activeSession || !onLoadMoreHistoryMessages || !historyMessagePagination?.hasMorePrevious || !historyMessagePagination.previousCursor || historyMessagePagination.isLoadingPrevious) {
       return;
     }
@@ -4721,7 +4746,7 @@ var ScrollToLatestBadge = styled9.span`
 `;
 
 // src/components/chat-composer/index.tsx
-import { useCallback as useCallback8, useEffect as useEffect10, useLayoutEffect as useLayoutEffect6, useRef as useRef11, useState as useState11 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect10, useLayoutEffect as useLayoutEffect6, useRef as useRef11, useState as useState11 } 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
@@ -7319,7 +7344,7 @@ var resolveSendSession = ({
 };
 
 // src/components/chat-composer/hooks/use-chat-composer.ts
-import { useCallback as useCallback7, useEffect as useEffect9, useRef as useRef10, useState as useState9 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect9, useRef as useRef10, useState as useState9 } from "react";
 
 // src/components/chat-composer/hooks/use-composer-attachments.ts
 import { useEffect as useEffect8, useRef as useRef9, useState as useState8 } from "react";
@@ -7498,7 +7523,7 @@ var useChatComposer = () => {
   const [isSkillsLoading, setIsSkillsLoading] = useState9(
     () => Boolean(skillsLoader) && !getCachedSkills(skillsLoader).resolved
   );
-  const fetchModels = useCallback7(async () => {
+  const fetchModels = useCallback8(async () => {
     setIsModelsLoading(true);
     setIsModelsError(false);
     try {
@@ -7519,7 +7544,7 @@ var useChatComposer = () => {
     setAvailableSkills(cachedSkills.skills);
     setIsSkillsLoading(Boolean(skillsLoader) && !cachedSkills.resolved);
   }, [skillsLoader]);
-  const fetchSkills = useCallback7(async () => {
+  const fetchSkills = useCallback8(async () => {
     if (!skillsLoader) {
       setAvailableSkills([]);
       setIsSkillsLoading(false);
@@ -7594,11 +7619,11 @@ var useChatComposer = () => {
     window.clearTimeout(stopRequest.timeoutId);
     stopRequest.timeoutId = null;
   };
-  const clearStopRequest = useCallback7((sessionId) => {
+  const clearStopRequest = useCallback8((sessionId) => {
     clearStopTimeout(sessionId);
     stopRequestBySessionRef.current.delete(sessionId);
   }, []);
-  const moveSessionRuntimeState = useCallback7(
+  const moveSessionRuntimeState = useCallback8(
     (previousSessionId, nextSessionId) => {
       if (previousSessionId === nextSessionId) {
         return;
@@ -7616,7 +7641,7 @@ var useChatComposer = () => {
     },
     []
   );
-  const finalizeStop = useCallback7(
+  const finalizeStop = useCallback8(
     (sessionId) => {
       const stopRequest = stopRequestBySessionRef.current.get(sessionId);
       if (stopRequest) {
@@ -7633,7 +7658,7 @@ var useChatComposer = () => {
     },
     [clearStopRequest, finalizeStoppedStreamingMessage]
   );
-  const runStream = useCallback7(
+  const runStream = useCallback8(
     async ({
       localSessionId,
       sessionId,
@@ -7758,7 +7783,7 @@ var useChatComposer = () => {
       store
     ]
   );
-  const send = useCallback7(
+  const send = useCallback8(
     async (contentOverride, options) => {
       const content = (contentOverride ?? value).trim();
       const includeComposerAttachments = options?.includeComposerAttachments ?? true;
@@ -7838,7 +7863,7 @@ var useChatComposer = () => {
       store
     ]
   );
-  const openSkillPicker = useCallback7(() => {
+  const openSkillPicker = useCallback8(() => {
     setValue((current) => {
       const matchedSkillQuery = current.match(/(^|\s)\/([^\s/]*)$/);
       if (matchedSkillQuery && matchedSkillQuery.index !== void 0) {
@@ -7851,7 +7876,7 @@ var useChatComposer = () => {
       return /\s$/.test(current) ? `${current}/` : `${current} /`;
     });
   }, []);
-  const stopSession = useCallback7(
+  const stopSession = useCallback8(
     async (sessionId) => {
       const storeState = store.getState();
       const isSessionStreaming = storeState.isStreamingBySession[sessionId] ?? false;
@@ -8634,6 +8659,7 @@ var ChatComposerView = ({
   modelLoadingLabel,
   modelLoadFailedLabel,
   modelUnavailableLabel,
+  modeAccessory,
   onValueChange,
   onPickImages,
   onPasteImages,
@@ -8694,13 +8720,13 @@ var ChatComposerView = ({
     ],
     whileElementsMounted: autoUpdate
   });
-  const setSkillMenuReference = useCallback8(
+  const setSkillMenuReference = useCallback9(
     (element) => {
       refs.setReference(element);
     },
     [refs]
   );
-  const setSkillMenuFloating = useCallback8(
+  const setSkillMenuFloating = useCallback9(
     (element) => {
       refs.setFloating(element);
     },
@@ -8887,7 +8913,8 @@ var ChatComposerView = ({
               labels: modeLabels,
               onChange: onSelectedModeChange
             }
-          )
+          ),
+          modeAccessory
         ] }),
         /* @__PURE__ */ jsxs11(TrailingActions, { "data-testid": "chat-composer-trailing-actions", children: [
           /* @__PURE__ */ jsx16(
@@ -8945,8 +8972,17 @@ var ChatComposerView = ({
     ) }) : null
   ] });
 };
-var ChatComposer = () => {
-  const { labels, sendRef, retryRef, stopRef, enableImageAttachments } = useChatContext();
+var ChatComposer = ({
+  renderModeAccessory
+} = {}) => {
+  const {
+    labels,
+    sendRef,
+    retryRef,
+    registerStopSession = () => {
+    },
+    enableImageAttachments
+  } = useChatContext();
   const { state, actions } = useChatComposer();
   const { send, retry } = actions;
   useEffect10(() => {
@@ -8954,13 +8990,17 @@ var ChatComposer = () => {
     retryRef.current = async (sessionId) => {
       retry(sessionId);
     };
-    stopRef.current = actions.stopSession;
-  }, [actions.stopSession, retry, retryRef, send, sendRef, stopRef]);
+    registerStopSession(actions.stopSession);
+  }, [actions.stopSession, registerStopSession, retry, retryRef, send, sendRef]);
   const modeLabels = {
     ask: labels.modeLabelAsk,
     plan: labels.modeLabelPlan,
     agent: labels.modeLabelAgent
   };
+  const modeAccessory = renderModeAccessory?.({
+    selectedMode: state.selectedMode,
+    disabled: state.isStreaming
+  });
   return /* @__PURE__ */ jsx16(
     ChatComposerView,
     {
@@ -8990,6 +9030,7 @@ var ChatComposer = () => {
       modelLoadingLabel: labels.modelLoading,
       modelLoadFailedLabel: labels.modelLoadFailed,
       modelUnavailableLabel: labels.modelUnavailable,
+      modeAccessory,
       onValueChange: actions.setValue,
       onPickImages: actions.pickImages,
       onPasteImages: actions.pasteImages,
@@ -9278,26 +9319,37 @@ var SkillButton = styled14.button`
 `;
 
 // src/components/chat-conversation-list/index.tsx
-import { useEffect as useEffect11, useRef as useRef12 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect11, useRef as useRef12 } from "react";
 import styled16 from "@emotion/styled";
 
 // src/components/chat-conversation-list/components/chat-session-item.tsx
 import { memo as memo2 } from "react";
 import styled15 from "@emotion/styled";
-import { jsx as jsx17 } from "@emotion/react/jsx-runtime";
-var ChatSessionItem = memo2(({ session, isActive, onClick }) => {
-  return /* @__PURE__ */ jsx17(
-    SessionButton,
-    {
-      type: "button",
-      "data-active": isActive,
-      "data-testid": `chat-session-item-${session.sessionId}`,
-      onClick: () => onClick(session.sessionId),
-      children: /* @__PURE__ */ jsx17(SessionTitle, { children: session.title })
-    }
-  );
-});
+import { jsx as jsx17, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
+var ChatSessionItem = memo2(
+  ({ session, isActive, onClick, actions }) => {
+    return /* @__PURE__ */ jsxs12(SessionRow, { "data-active": isActive, children: [
+      /* @__PURE__ */ jsx17(
+        SessionButton,
+        {
+          type: "button",
+          "data-active": isActive,
+          "data-testid": `chat-session-item-${session.sessionId}`,
+          onClick: () => onClick(session.sessionId),
+          children: /* @__PURE__ */ jsx17(SessionTitle, { children: session.title })
+        }
+      ),
+      actions ? /* @__PURE__ */ jsx17(SessionActions, { "data-testid": `chat-session-item-actions-${session.sessionId}`, children: actions }) : null
+    ] });
+  }
+);
 ChatSessionItem.displayName = "ChatSessionItem";
+var SessionRow = styled15.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+`;
 var SessionTitle = styled15.span`
   display: block;
   min-width: 0;
@@ -9306,6 +9358,8 @@ var SessionTitle = styled15.span`
   white-space: nowrap;
 `;
 var SessionButton = styled15.button`
+  flex: 1;
+  min-width: 0;
   border: 1px solid transparent;
   border-radius: 12px;
   padding: 12px;
@@ -9338,6 +9392,12 @@ var SessionButton = styled15.button`
     background: rgba(255, 255, 255, 0.08);
   }
 `;
+var SessionActions = styled15.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+`;
 
 // src/components/chat-conversation-list/lib/history-session-selection.ts
 var shouldLoadHistorySessionMessages = ({
@@ -9358,7 +9418,7 @@ var shouldLoadHistorySessionMessages = ({
 };
 
 // src/components/chat-conversation-list/index.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
 var SCROLL_LOAD_MORE_THRESHOLD_PX = 80;
 var shouldLoadMoreSessions = ({
   scrollTop,
@@ -9367,12 +9427,37 @@ var shouldLoadMoreSessions = ({
   threshold = SCROLL_LOAD_MORE_THRESHOLD_PX
 }) => scrollHeight - scrollTop - clientHeight <= threshold;
 var isHistorySessionMessagesPage = (value) => typeof value === "object" && value !== null && Array.isArray(value.messages);
+var matchesHydratedHistorySessions = (renderedHistorySessionIds, historySessionIds) => {
+  if (renderedHistorySessionIds.length === historySessionIds.length) {
+    return renderedHistorySessionIds.every(
+      (sessionId, index3) => sessionId === historySessionIds[index3]
+    );
+  }
+  if (renderedHistorySessionIds.length !== historySessionIds.length + 1) {
+    return false;
+  }
+  const matchesWithoutLeadingExtra = renderedHistorySessionIds.slice(1).every((sessionId, index3) => sessionId === historySessionIds[index3]);
+  if (matchesWithoutLeadingExtra) {
+    return true;
+  }
+  return renderedHistorySessionIds.slice(0, -1).every((sessionId, index3) => sessionId === historySessionIds[index3]);
+};
 var ChatConversationList = () => {
-  const { labels, historySessionList, onLoadMoreSessions, onSelectHistorySession, store } = useChatContext();
+  const {
+    labels,
+    historySessionList,
+    onLoadMoreSessions,
+    onSelectHistorySession,
+    renderSessionItemActions,
+    stopSession = async (_sessionId) => {
+    },
+    store
+  } = useChatContext();
   const localSessions = useChatStore((s) => s.sessions);
   const activeSessionId = useChatStore((s) => s.activeSessionId);
   const startNewChat = useChatStore((s) => s.startNewChat);
   const setActiveSession = useChatStore((s) => s.setActiveSession);
+  const isStreamingBySession = useChatStore((s) => s.isStreamingBySession);
   const hydrateHistorySessions = useChatStore((s) => s.hydrateHistorySessions);
   const hydrateHistorySessionMessages = useChatStore((s) => s.hydrateHistorySessionMessages);
   const hydrateHistorySessionMessagesPage = useChatStore((s) => s.hydrateHistorySessionMessagesPage);
@@ -9381,6 +9466,7 @@ var ChatConversationList = () => {
   );
   const isLoadingMoreRef = useRef12(false);
   const hasSeenLoadingMoreRef = useRef12(false);
+  const listRef = useRef12(null);
   useEffect11(() => {
     if (!historySessionList)
       return;
@@ -9401,23 +9487,50 @@ var ChatConversationList = () => {
     hasSeenLoadingMoreRef.current = false;
   }, [historySessionList?.sessions.length, historySessionList?.hasMore]);
   const sessions = localSessions;
-  const handleSessionListScroll = (event) => {
-    if (!historySessionList?.hasMore || historySessionList.isLoading || !onLoadMoreSessions || isLoadingMoreRef.current) {
+  const hasMoreSessions = historySessionList?.hasMore ?? false;
+  const isHistorySessionListLoading = historySessionList?.isLoading ?? false;
+  const renderedHistorySessionIds = sessions.filter((session) => !isDraftChatSessionId(session.sessionId)).map((session) => session.sessionId);
+  const isHistorySessionListHydrated = !historySessionList || matchesHydratedHistorySessions(
+    renderedHistorySessionIds,
+    historySessionList.sessions.map((session) => session.sessionId)
+  );
+  const requestLoadMoreSessions = useCallback10(() => {
+    if (!hasMoreSessions || isHistorySessionListLoading || !onLoadMoreSessions || isLoadingMoreRef.current) {
       return;
     }
-    const target = event.currentTarget;
-    if (shouldLoadMoreSessions({
-      scrollTop: target.scrollTop,
-      clientHeight: target.clientHeight,
-      scrollHeight: target.scrollHeight
-    })) {
-      isLoadingMoreRef.current = true;
-      void Promise.resolve(onLoadMoreSessions()).catch(() => {
-        isLoadingMoreRef.current = false;
-        hasSeenLoadingMoreRef.current = false;
-      });
+    isLoadingMoreRef.current = true;
+    void Promise.resolve(onLoadMoreSessions()).catch(() => {
+      isLoadingMoreRef.current = false;
+      hasSeenLoadingMoreRef.current = false;
+    });
+  }, [hasMoreSessions, isHistorySessionListLoading, onLoadMoreSessions]);
+  const maybeLoadMoreSessions = useCallback10(
+    (target) => {
+      if (target.clientHeight <= 0 || target.scrollHeight <= 0) {
+        return;
+      }
+      if (shouldLoadMoreSessions({
+        scrollTop: target.scrollTop,
+        clientHeight: target.clientHeight,
+        scrollHeight: target.scrollHeight
+      })) {
+        requestLoadMoreSessions();
+      }
+    },
+    [requestLoadMoreSessions]
+  );
+  useEffect11(() => {
+    if (!listRef.current || !isHistorySessionListHydrated) {
+      return;
     }
-  };
+    maybeLoadMoreSessions(listRef.current);
+  }, [isHistorySessionListHydrated, hasMoreSessions, localSessions.length, maybeLoadMoreSessions]);
+  const handleSessionListScroll = useCallback10(
+    (event) => {
+      maybeLoadMoreSessions(event.currentTarget);
+    },
+    [maybeLoadMoreSessions]
+  );
   const handleSelectSession = async (sessionId) => {
     setActiveSession(sessionId);
     const session = sessions.find((item) => item.sessionId === sessionId);
@@ -9454,18 +9567,26 @@ var ChatConversationList = () => {
       );
     }
   };
-  return /* @__PURE__ */ jsxs12(Container3, { children: [
-    /* @__PURE__ */ jsxs12(Toolbar, { children: [
+  return /* @__PURE__ */ jsxs13(Container3, { children: [
+    /* @__PURE__ */ jsxs13(Toolbar, { children: [
       /* @__PURE__ */ jsx18(Title3, { children: labels.sessionsTitle }),
       /* @__PURE__ */ jsx18(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: startNewChat, children: labels.newChat })
     ] }),
-    /* @__PURE__ */ jsxs12(List2, { "data-testid": "chat-session-list", onScroll: handleSessionListScroll, children: [
+    /* @__PURE__ */ jsxs13(List2, { ref: listRef, "data-testid": "chat-session-list", onScroll: handleSessionListScroll, children: [
       sessions.map((session) => /* @__PURE__ */ jsx18(
         ChatSessionItem,
         {
           session,
           isActive: activeSessionId === session.sessionId,
-          onClick: (sessionId) => void handleSelectSession(sessionId)
+          onClick: (sessionId) => void handleSelectSession(sessionId),
+          actions: isDraftChatSessionId(session.sessionId) ? void 0 : renderSessionItemActions?.({
+            session,
+            isActive: activeSessionId === session.sessionId,
+            isStreaming: isStreamingBySession[session.sessionId] ?? false,
+            selectSession: () => handleSelectSession(session.sessionId),
+            startNewChat,
+            stopSession: () => stopSession(session.sessionId)
+          })
         },
         session.sessionId
       )),
@@ -9478,6 +9599,7 @@ var ChatConversationList = () => {
 var Container3 = styled16.aside`
   width: 280px;
   min-width: 280px;
+  min-height: 0;
   border-right: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
   display: flex;
   flex-direction: column;
@@ -9523,6 +9645,8 @@ var CreateButton = styled16.button`
   }
 `;
 var List2 = styled16.div`
+  flex: 1 1 0;
+  min-height: 0;
   padding: 0 12px 16px;
   display: flex;
   flex-direction: column;
@@ -9536,7 +9660,7 @@ var StateRow = styled16.div`
 `;
 
 // src/components/ai-chat/index.tsx
-import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
 var NewTalkIcon = () => /* @__PURE__ */ jsx19(
   "svg",
   {
@@ -9547,7 +9671,7 @@ var NewTalkIcon = () => /* @__PURE__ */ jsx19(
     fill: "none",
     style: { display: "block" },
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsxs13(
+    children: /* @__PURE__ */ jsxs14(
       "g",
       {
         transform: "translate(1.8909 2.0364)",
@@ -9556,7 +9680,7 @@ var NewTalkIcon = () => /* @__PURE__ */ jsx19(
         strokeLinejoin: "round",
         strokeWidth: "1.36533333",
         children: [
-          /* @__PURE__ */ jsxs13("g", { transform: "translate(9.8909 2.3273) rotate(-315) translate(-9.8909 -2.3273) translate(8.2909 0.7273)", children: [
+          /* @__PURE__ */ jsxs14("g", { transform: "translate(9.8909 2.3273) rotate(-315) translate(-9.8909 -2.3273) translate(8.2909 0.7273)", children: [
             /* @__PURE__ */ jsx19("path", { d: "M0 0C0 0 1.06666667 1.06666667 3.2 3.2" }),
             /* @__PURE__ */ jsx19("path", { d: "M3.2 0C3.2 0 2.13333333 1.06666667 0 3.2" })
           ] }),
@@ -9584,7 +9708,8 @@ var AiChatWorkspaceContent = ({
   showNewChatButton,
   renderNewChatTrigger,
   showComposerOnlyBeforeFirstMessage = false,
-  onConversationStartedChange
+  onConversationStartedChange,
+  renderComposerModeAccessory
 }) => {
   const isConversationStarted = useChatStore(
     (state) => hasStartedConversation({
@@ -9598,17 +9723,18 @@ var AiChatWorkspaceContent = ({
   useEffect12(() => {
     onConversationStartedChange?.(isConversationStarted);
   }, [isConversationStarted, onConversationStartedChange]);
-  return /* @__PURE__ */ jsxs13(Root, { "data-testid": "ai-chat", children: [
+  return /* @__PURE__ */ jsxs14(Root, { "data-testid": "ai-chat", children: [
     showConversationList ? /* @__PURE__ */ jsx19(ChatConversationList, {}) : null,
-    /* @__PURE__ */ jsxs13(Workspace, { children: [
+    /* @__PURE__ */ jsxs14(Workspace, { children: [
       showNewChatButton && !showConversationList && !shouldShowComposerOnly ? /* @__PURE__ */ jsx19(QuickActions, { renderNewChatTrigger }) : null,
       shouldShowComposerOnly ? null : /* @__PURE__ */ jsx19(ChatThread, {}),
-      /* @__PURE__ */ jsx19(ChatComposer, {})
+      /* @__PURE__ */ jsx19(ChatComposer, { renderModeAccessory: renderComposerModeAccessory })
     ] })
   ] });
 };
 var QuickActions = ({ renderNewChatTrigger }) => {
-  const { labels, stopRef, store } = useChatContext();
+  const { labels, stopSession = async (_sessionId) => {
+  }, store } = useChatContext();
   const startNewChat = useChatStore((state) => state.startNewChat);
   const activeSessionId = useChatStore((state) => state.activeSessionId);
   const isActiveSessionStreaming = useChatStore(
@@ -9627,14 +9753,14 @@ var QuickActions = ({ renderNewChatTrigger }) => {
     if (!currentSessionId || !isCurrentSessionStreaming) {
       return;
     }
-    await stopRef.current(currentSessionId);
+    await stopSession(currentSessionId);
   };
   const handleStartNewChat = async () => {
     const currentState = store.getState();
     const currentSessionId = currentState.activeSessionId;
     const isCurrentSessionStreaming = currentSessionId ? currentState.isStreamingBySession[currentSessionId] ?? false : false;
     if (currentSessionId && isCurrentSessionStreaming) {
-      void stopRef.current(currentSessionId);
+      void stopSession(currentSessionId);
     }
     createNewSession();
   };
@@ -9678,6 +9804,7 @@ var AiChat = ({
   renderNewChatTrigger,
   showComposerOnlyBeforeFirstMessage = false,
   onConversationStartedChange,
+  renderComposerModeAccessory,
   ...providerProps
 }) => /* @__PURE__ */ jsx19(
   ConfigProvider,
@@ -9721,7 +9848,8 @@ var AiChat = ({
         showNewChatButton,
         renderNewChatTrigger,
         showComposerOnlyBeforeFirstMessage,
-        onConversationStartedChange
+        onConversationStartedChange,
+        renderComposerModeAccessory
       }
     ) })
   }

package/package.json

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