@xinghunm/ai-chat 1.4.0 → 1.4.2

package/dist/index.d.mts

@@ -19,7 +19,7 @@ type ChatMessageStatus = (typeof CHAT_MESSAGE_STATUSES)[number];
 declare const CHAT_AGENT_MODES: readonly ["ask", "plan", "agent"];
 type ChatAgentMode = (typeof CHAT_AGENT_MODES)[number];
 /**
- * Default agent mode used for new sessions and legacy sessions without mode metadata.
+ * Default agent mode used for new sends.
  */
 declare const DEFAULT_CHAT_AGENT_MODE: ChatAgentMode;
 /**
@@ -31,7 +31,6 @@ interface ChatSession {
     createdAt: string;
     updatedAt: string;
     model: string;
-    mode?: ChatAgentMode;
 }
 /**
  * Loading states for externally hydrated historical session messages.
@@ -453,6 +452,7 @@ interface AiChatLabels {
     stopButton?: string;
     retryButton?: string;
     scrollToLatest?: string;
+    sessionsTitle?: string;
     placeholder?: string;
     modeLabelAsk?: string;
     modeLabelPlan?: string;
@@ -505,7 +505,7 @@ interface NewChatTriggerRenderProps {
 declare const DEFAULT_AI_CHAT_LABELS: Required<AiChatLabels>;
 
 interface AiChatProviderBaseProps {
-    /** Initial agent mode for new sessions. */
+    /** Initial agent mode used by the composer for new sends. */
     defaultMode?: ChatAgentMode;
     /** Optional label overrides for UI strings. */
     labels?: AiChatLabels;
@@ -751,7 +751,6 @@ interface ChatActions {
     setActiveSession: (sessionId: string | null) => void;
     replaceSessionId: (previousSessionId: string, nextSessionId: string) => void;
     setPreferredMode: (mode: ChatAgentMode) => void;
-    setSessionMode: (sessionId: string, mode: ChatAgentMode) => void;
     hydrateHistorySessions: (sessions: ChatSession[]) => void;
     appendMessage: (sessionId: string, message: ChatMessage) => void;
     hydrateHistorySessionMessages: (sessionId: string, messages: ChatMessage[]) => void;

package/dist/index.d.ts

@@ -19,7 +19,7 @@ type ChatMessageStatus = (typeof CHAT_MESSAGE_STATUSES)[number];
 declare const CHAT_AGENT_MODES: readonly ["ask", "plan", "agent"];
 type ChatAgentMode = (typeof CHAT_AGENT_MODES)[number];
 /**
- * Default agent mode used for new sessions and legacy sessions without mode metadata.
+ * Default agent mode used for new sends.
  */
 declare const DEFAULT_CHAT_AGENT_MODE: ChatAgentMode;
 /**
@@ -31,7 +31,6 @@ interface ChatSession {
     createdAt: string;
     updatedAt: string;
     model: string;
-    mode?: ChatAgentMode;
 }
 /**
  * Loading states for externally hydrated historical session messages.
@@ -453,6 +452,7 @@ interface AiChatLabels {
     stopButton?: string;
     retryButton?: string;
     scrollToLatest?: string;
+    sessionsTitle?: string;
     placeholder?: string;
     modeLabelAsk?: string;
     modeLabelPlan?: string;
@@ -505,7 +505,7 @@ interface NewChatTriggerRenderProps {
 declare const DEFAULT_AI_CHAT_LABELS: Required<AiChatLabels>;
 
 interface AiChatProviderBaseProps {
-    /** Initial agent mode for new sessions. */
+    /** Initial agent mode used by the composer for new sends. */
     defaultMode?: ChatAgentMode;
     /** Optional label overrides for UI strings. */
     labels?: AiChatLabels;
@@ -751,7 +751,6 @@ interface ChatActions {
     setActiveSession: (sessionId: string | null) => void;
     replaceSessionId: (previousSessionId: string, nextSessionId: string) => void;
     setPreferredMode: (mode: ChatAgentMode) => void;
-    setSessionMode: (sessionId: string, mode: ChatAgentMode) => void;
     hydrateHistorySessions: (sessions: ChatSession[]) => void;
     appendMessage: (sessionId: string, message: ChatMessage) => void;
     hydrateHistorySessionMessages: (sessionId: string, messages: ChatMessage[]) => void;

package/dist/index.js

@@ -70,6 +70,7 @@ var DEFAULT_AI_CHAT_LABELS = {
   stopButton: "Stop",
   retryButton: "Retry",
   scrollToLatest: "Jump to latest",
+  sessionsTitle: "Sessions",
   placeholder: "Ask something...",
   modeLabelAsk: "Ask",
   modeLabelPlan: "Plan",
@@ -113,7 +114,6 @@ var createDraftChatSessionId = () => `${DRAFT_CHAT_SESSION_ID_PREFIX}${Date.now(
 var isDraftChatSessionId = (sessionId) => Boolean(sessionId?.startsWith(DRAFT_CHAT_SESSION_ID_PREFIX));
 var createDraftChatSession = ({
   model,
-  mode = DEFAULT_CHAT_AGENT_MODE,
   nowIso: nowIso2,
   createSessionId = createDraftChatSessionId
 }) => {
@@ -123,8 +123,7 @@ var createDraftChatSession = ({
     title: "New Chat",
     createdAt: iso,
     updatedAt: iso,
-    model,
-    mode
+    model
   };
 };
 
@@ -254,11 +253,7 @@ var createChatStore = (initialState) => (0, import_vanilla.createStore)((set, ge
   createSession: (session) => {
     const state = get();
     const exists = state.sessions.some((s) => s.sessionId === session.sessionId);
-    const nextSession = {
-      ...session,
-      mode: session.mode ?? DEFAULT_CHAT_AGENT_MODE
-    };
-    const nextSessions = exists ? state.sessions : [nextSession, ...state.sessions];
+    const nextSessions = exists ? state.sessions : [session, ...state.sessions];
     const nextMessagesBySession = { ...state.messagesBySession };
     const nextErrorBySession = { ...state.errorBySession };
     const nextIsStreamingBySession = { ...state.isStreamingBySession };
@@ -303,10 +298,8 @@ var createChatStore = (initialState) => (0, import_vanilla.createStore)((set, ge
     });
   },
   startNewChat: () => {
-    const state = get();
     const session = createDraftChatSession({
       model: "",
-      mode: state.preferredMode,
       nowIso: () => (/* @__PURE__ */ new Date()).toISOString()
     });
     get().createSession(session);
@@ -392,25 +385,26 @@ var createChatStore = (initialState) => (0, import_vanilla.createStore)((set, ge
   setPreferredMode: (mode) => {
     set({ preferredMode: mode });
   },
-  setSessionMode: (sessionId, mode) => {
-    const state = get();
-    const nextSessions = state.sessions.map(
-      (s) => s.sessionId === sessionId ? { ...s, mode } : s
-    );
-    set({ sessions: nextSessions });
-  },
   hydrateHistorySessions: (sessions) => {
     const state = get();
-    const localSessions = state.sessions.filter(
+    const draftSessions = state.sessions.filter(
       (session) => isDraftChatSessionId(session.sessionId)
     );
-    const localSessionIds = new Set(localSessions.map((session) => session.sessionId));
+    const activePersistedSession = state.sessions.find(
+      (session) => session.sessionId === state.activeSessionId && !isDraftChatSessionId(session.sessionId)
+    );
+    const hasActiveInIncoming = sessions.some(
+      (session) => session.sessionId === state.activeSessionId
+    );
+    const keepActiveSession = activePersistedSession && !hasActiveInIncoming ? [activePersistedSession] : [];
+    const excludeIds = /* @__PURE__ */ new Set([
+      ...draftSessions.map((s) => s.sessionId),
+      ...keepActiveSession.map((s) => s.sessionId)
+    ]);
     const nextSessions = [
-      ...localSessions,
-      ...sessions.filter((session) => !localSessionIds.has(session.sessionId)).map((session) => ({
-        ...session,
-        mode: session.mode ?? DEFAULT_CHAT_AGENT_MODE
-      }))
+      ...draftSessions,
+      ...sessions.filter((session) => !excludeIds.has(session.sessionId)),
+      ...keepActiveSession
     ];
     const nextMessagesBySession = { ...state.messagesBySession };
     const nextErrorBySession = { ...state.errorBySession };
@@ -3140,9 +3134,8 @@ var ChatMessageItemView = ({
   const hasMarkdownOnlyBlocks = hasStructuredBlocks && blocks.every((block) => block.type === "markdown");
   const hasTextContent = Boolean(settledContent || freshContent || displayedContent);
   const shouldRenderStructuredBlocks = hasStructuredBlocks && !(isAssistantStreaming && hasMarkdownOnlyBlocks && hasTextContent);
-  const isPlanMode = mode === "plan";
-  const canSubmitConfirmation = isPlanMode && typeof onConfirmationSubmit === "function";
-  const canSubmitQuestionnaire = isPlanMode && typeof onQuestionnaireSubmit === "function";
+  const canSubmitConfirmation = typeof onConfirmationSubmit === "function";
+  const canSubmitQuestionnaire = typeof onQuestionnaireSubmit === "function";
   const shouldShowStreamingCaret = isAssistantStreaming && (!shouldRenderStructuredBlocks || hasTextContent);
   const isUserMessage = message.role === "user";
   const messageRenderMode = isUserMessage ? "plain-text" : "markdown";
@@ -3200,7 +3193,7 @@ var ChatMessageItemView = ({
           ExecutionConfirmationCard,
           {
             proposal: block.proposal,
-            interactive: isPlanMode,
+            interactive: canSubmitConfirmation,
             onConfirm: canSubmitConfirmation ? () => onConfirmationSubmit({
               proposalId: block.proposal.proposalId,
               content: createExecutionConfirmationContent(block.proposal),
@@ -3830,7 +3823,7 @@ var groupConversationTurns = (historyMessages, streamingMessage) => {
   ];
 };
 var ChatThreadView = ({
-  activeSessionMode = DEFAULT_CHAT_AGENT_MODE,
+  activeMode = DEFAULT_CHAT_AGENT_MODE,
   historyMessages,
   streamingMessage,
   error: error2,
@@ -4086,7 +4079,7 @@ var ChatThreadView = ({
                   style: isLatestTurn ? { scrollMarginTop: `${CHAT_THREAD_SCROLL_TOP_GAP}px` } : void 0,
                   children: renderChatMessage({
                     message: turn.userMessage,
-                    mode: activeSessionMode,
+                    mode: activeMode,
                     onConfirmationSubmit,
                     onQuestionnaireSubmit,
                     renderMessageBlock
@@ -4095,7 +4088,7 @@ var ChatThreadView = ({
               ) : null,
               turn.responseMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
                 message,
-                mode: activeSessionMode,
+                mode: activeMode,
                 onConfirmationSubmit,
                 onQuestionnaireSubmit,
                 renderMessageBlock
@@ -4129,7 +4122,7 @@ var ChatThread = () => {
   const activeSession = useChatStore(
     (s) => s.sessions.find((session) => session.sessionId === s.activeSessionId)
   );
-  const activeSessionMode = activeSession?.mode ?? DEFAULT_CHAT_AGENT_MODE;
+  const preferredMode = useChatStore((s) => s.preferredMode);
   const messages = useChatStore(
     (s) => s.messagesBySession[s.activeSessionId ?? ""] ?? EMPTY_MESSAGES
   );
@@ -4168,7 +4161,7 @@ var ChatThread = () => {
       if (customQuestionnaireSubmit) {
         const handled = await customQuestionnaireSubmit(submission, {
           sessionId: sourceSessionId ?? void 0,
-          mode: activeSessionMode
+          mode: preferredMode
         });
         if (handled !== false) {
           if (sourceSessionId && submission.sourceMessageId) {
@@ -4195,7 +4188,7 @@ var ChatThread = () => {
         );
       }
     },
-    [activeSessionId, activeSessionMode, updateQA, sendRef, customQuestionnaireSubmit]
+    [activeSessionId, customQuestionnaireSubmit, preferredMode, sendRef, updateQA]
   );
   const handleConfirmation = (0, import_react11.useCallback)(
     async (submission) => {
@@ -4203,7 +4196,7 @@ var ChatThread = () => {
       if (customConfirmationSubmit) {
         const handled = await customConfirmationSubmit(submission, {
           sessionId: sourceSessionId ?? void 0,
-          mode: activeSessionMode
+          mode: preferredMode
         });
         if (handled !== false) {
           return;
@@ -4214,7 +4207,7 @@ var ChatThread = () => {
         includeComposerAttachments: false
       });
     },
-    [activeSessionId, activeSessionMode, sendRef, customConfirmationSubmit]
+    [activeSessionId, customConfirmationSubmit, preferredMode, sendRef]
   );
   const handleLoadPreviousMessages = (0, import_react11.useCallback)(async () => {
     if (!activeSession || !onLoadMoreHistoryMessages || !historyMessagePagination?.hasMorePrevious || !historyMessagePagination.previousCursor || historyMessagePagination.isLoadingPrevious) {
@@ -4258,7 +4251,7 @@ var ChatThread = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     ChatThreadView,
     {
-      activeSessionMode,
+      activeMode: preferredMode,
       historyMessages: messages,
       streamingMessage,
       error: error2,
@@ -6990,7 +6983,6 @@ var resolveSelectedChatModel = ({
 var resolveSendSession = ({
   activeSessionId,
   selectedModel,
-  selectedMode,
   nowIso: nowIso2,
   createSessionId
 }) => {
@@ -7002,7 +6994,6 @@ var resolveSendSession = ({
   }
   const session = createDraftChatSession({
     model: selectedModel,
-    mode: selectedMode ?? DEFAULT_CHAT_AGENT_MODE,
     nowIso: nowIso2,
     createSessionId
   });
@@ -7160,9 +7151,6 @@ var useChatComposer = () => {
   const skillsLoader = transport.getSkills;
   const activeSkillsLoaderRef = (0, import_react15.useRef)(skillsLoader);
   const activeSessionId = useChatStore((s) => s.activeSessionId);
-  const activeSession = useChatStore(
-    (s) => s.sessions.find((x) => x.sessionId === s.activeSessionId) ?? null
-  );
   const preferredMode = useChatStore((s) => s.preferredMode);
   const streamingSessionId = useChatStore(
     (s) => s.activeSessionId && s.isStreamingBySession[s.activeSessionId] ? s.activeSessionId : null
@@ -7183,7 +7171,6 @@ var useChatComposer = () => {
   const setSessionError = useChatStore((s) => s.setSessionError);
   const clearSessionError = useChatStore((s) => s.clearSessionError);
   const setPreferredMode = useChatStore((s) => s.setPreferredMode);
-  const setSessionMode = useChatStore((s) => s.setSessionMode);
   const [availableModels, setAvailableModels] = (0, import_react15.useState)([]);
   const [isModelsLoading, setIsModelsLoading] = (0, import_react15.useState)(true);
   const [isModelsError, setIsModelsError] = (0, import_react15.useState)(false);
@@ -7264,12 +7251,8 @@ var useChatComposer = () => {
     );
   }, [availableModels, isModelsLoading]);
   (0, import_react15.useEffect)(() => {
-    if (activeSession) {
-      setSelectedModeLocal(activeSession.mode ?? DEFAULT_CHAT_AGENT_MODE);
-      return;
-    }
     setSelectedModeLocal(preferredMode ?? DEFAULT_CHAT_AGENT_MODE);
-  }, [activeSession, preferredMode]);
+  }, [preferredMode]);
   (0, import_react15.useEffect)(() => {
     if (previousActiveSessionIdRef.current !== activeSessionId) {
       setSelectedSkills([]);
@@ -7477,7 +7460,7 @@ var useChatComposer = () => {
       const storeState = store.getState();
       const currentActiveSessionId = options?.sessionId ?? storeState.activeSessionId;
       const currentActiveSession = storeState.sessions.find((session2) => session2.sessionId === currentActiveSessionId) ?? null;
-      const currentMode = currentActiveSession?.mode ?? selectedMode;
+      const currentMode = selectedMode;
       if (!(selectedModel || currentActiveSession?.model || availableModels[0]?.id)) {
         return;
       }
@@ -7485,7 +7468,6 @@ var useChatComposer = () => {
       const { localSessionId, sessionId, session } = resolveSendSession({
         activeSessionId: currentActiveSessionId,
         selectedModel: resolvedModel,
-        selectedMode: currentMode,
         nowIso,
         createSessionId: createDraftChatSessionId
       });
@@ -7633,8 +7615,6 @@ var useChatComposer = () => {
       setSelectedMode: (mode) => {
         setSelectedModeLocal(mode);
         setPreferredMode(mode);
-        if (activeSessionId)
-          setSessionMode(activeSessionId, mode);
         if (activeSessionId) {
           const previousRequest = lastRequestBySessionRef.current.get(activeSessionId);
           if (previousRequest) {
@@ -8987,31 +8967,21 @@ var import_styled16 = __toESM(require("@emotion/styled"));
 var import_react19 = require("react");
 var import_styled15 = __toESM(require("@emotion/styled"));
 var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
-var ChatSessionItem = (0, import_react19.memo)(
-  ({ session, isActive, modeLabel, 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.jsxs)(SessionMeta, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SessionTitle, { children: session.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ModeBadge, { children: modeLabel })
-        ] })
-      }
-    );
-  }
-);
+var ChatSessionItem = (0, import_react19.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 })
+    }
+  );
+});
 ChatSessionItem.displayName = "ChatSessionItem";
-var SessionMeta = import_styled15.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-`;
 var SessionTitle = import_styled15.default.span`
+  display: block;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -9025,22 +8995,31 @@ var SessionButton = import_styled15.default.button`
   color: var(--text-primary);
   background: rgba(255, 255, 255, 0.03);
   cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    transform 160ms ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(255, 255, 255, 0.08);
+  }
+
+  &:focus-visible {
+    outline: none;
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(255, 255, 255, 0.18);
+  }
+
+  &:active {
+    transform: scale(0.995);
+  }
 
   &[data-active='true'] {
     border-color: rgba(255, 255, 255, 0.2);
     background: rgba(255, 255, 255, 0.08);
   }
 `;
-var ModeBadge = import_styled15.default.span`
-  flex-shrink: 0;
-  border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 4px 10px;
-  font-size: 11px;
-  line-height: 1;
-  color: var(--text-secondary);
-  background: rgba(255, 255, 255, 0.04);
-`;
 
 // src/components/chat-conversation-list/lib/history-session-selection.ts
 var shouldLoadHistorySessionMessages = ({
@@ -9103,16 +9082,7 @@ var ChatConversationList = () => {
     isLoadingMoreRef.current = false;
     hasSeenLoadingMoreRef.current = false;
   }, [historySessionList?.sessions.length, historySessionList?.hasMore]);
-  const sessions = (0, import_react20.useMemo)(() => {
-    if (!historySessionList) {
-      return localSessions;
-    }
-    const localSessionIds = new Set(localSessions.map((session) => session.sessionId));
-    return [
-      ...localSessions,
-      ...historySessionList.sessions.filter((session) => !localSessionIds.has(session.sessionId))
-    ];
-  }, [historySessionList, localSessions]);
+  const sessions = localSessions;
   const handleSessionListScroll = (event) => {
     if (!historySessionList?.hasMore || historySessionList.isLoading || !onLoadMoreSessions || isLoadingMoreRef.current) {
       return;
@@ -9166,14 +9136,9 @@ var ChatConversationList = () => {
       );
     }
   };
-  const modeLabels = {
-    ask: labels.modeLabelAsk,
-    plan: labels.modeLabelPlan,
-    agent: labels.modeLabelAgent
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Container3, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Toolbar, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Title3, { children: "Sessions" }),
+      /* @__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: [
@@ -9182,7 +9147,6 @@ var ChatConversationList = () => {
         {
           session,
           isActive: activeSessionId === session.sessionId,
-          modeLabel: modeLabels[session.mode ?? DEFAULT_CHAT_AGENT_MODE] ?? "",
           onClick: (sessionId) => void handleSelectSession(sessionId)
         },
         session.sessionId
@@ -9213,13 +9177,32 @@ var Title3 = import_styled16.default.h2`
   color: var(--text-secondary);
 `;
 var CreateButton = import_styled16.default.button`
-  border: none;
+  border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 12px;
   padding: 12px 14px;
-  background: var(--text-primary);
-  color: var(--bg-primary);
+  background: rgba(255, 255, 255, 0.9);
+  color: rgba(20, 20, 20, 0.92);
   text-align: left;
   cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    transform 160ms ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.96);
+    border-color: rgba(255, 255, 255, 0.28);
+  }
+
+  &:focus-visible {
+    outline: none;
+    background: rgba(255, 255, 255, 0.96);
+    border-color: rgba(255, 255, 255, 0.32);
+  }
+
+  &:active {
+    transform: scale(0.995);
+  }
 `;
 var List2 = import_styled16.default.div`
   padding: 0 12px 16px;

package/dist/index.mjs

@@ -23,6 +23,7 @@ var DEFAULT_AI_CHAT_LABELS = {
   stopButton: "Stop",
   retryButton: "Retry",
   scrollToLatest: "Jump to latest",
+  sessionsTitle: "Sessions",
   placeholder: "Ask something...",
   modeLabelAsk: "Ask",
   modeLabelPlan: "Plan",
@@ -66,7 +67,6 @@ var createDraftChatSessionId = () => `${DRAFT_CHAT_SESSION_ID_PREFIX}${Date.now(
 var isDraftChatSessionId = (sessionId) => Boolean(sessionId?.startsWith(DRAFT_CHAT_SESSION_ID_PREFIX));
 var createDraftChatSession = ({
   model,
-  mode = DEFAULT_CHAT_AGENT_MODE,
   nowIso: nowIso2,
   createSessionId = createDraftChatSessionId
 }) => {
@@ -76,8 +76,7 @@ var createDraftChatSession = ({
     title: "New Chat",
     createdAt: iso,
     updatedAt: iso,
-    model,
-    mode
+    model
   };
 };
 
@@ -207,11 +206,7 @@ var createChatStore = (initialState) => createStore((set, get) => ({
   createSession: (session) => {
     const state = get();
     const exists = state.sessions.some((s) => s.sessionId === session.sessionId);
-    const nextSession = {
-      ...session,
-      mode: session.mode ?? DEFAULT_CHAT_AGENT_MODE
-    };
-    const nextSessions = exists ? state.sessions : [nextSession, ...state.sessions];
+    const nextSessions = exists ? state.sessions : [session, ...state.sessions];
     const nextMessagesBySession = { ...state.messagesBySession };
     const nextErrorBySession = { ...state.errorBySession };
     const nextIsStreamingBySession = { ...state.isStreamingBySession };
@@ -256,10 +251,8 @@ var createChatStore = (initialState) => createStore((set, get) => ({
     });
   },
   startNewChat: () => {
-    const state = get();
     const session = createDraftChatSession({
       model: "",
-      mode: state.preferredMode,
       nowIso: () => (/* @__PURE__ */ new Date()).toISOString()
     });
     get().createSession(session);
@@ -345,25 +338,26 @@ var createChatStore = (initialState) => createStore((set, get) => ({
   setPreferredMode: (mode) => {
     set({ preferredMode: mode });
   },
-  setSessionMode: (sessionId, mode) => {
-    const state = get();
-    const nextSessions = state.sessions.map(
-      (s) => s.sessionId === sessionId ? { ...s, mode } : s
-    );
-    set({ sessions: nextSessions });
-  },
   hydrateHistorySessions: (sessions) => {
     const state = get();
-    const localSessions = state.sessions.filter(
+    const draftSessions = state.sessions.filter(
       (session) => isDraftChatSessionId(session.sessionId)
     );
-    const localSessionIds = new Set(localSessions.map((session) => session.sessionId));
+    const activePersistedSession = state.sessions.find(
+      (session) => session.sessionId === state.activeSessionId && !isDraftChatSessionId(session.sessionId)
+    );
+    const hasActiveInIncoming = sessions.some(
+      (session) => session.sessionId === state.activeSessionId
+    );
+    const keepActiveSession = activePersistedSession && !hasActiveInIncoming ? [activePersistedSession] : [];
+    const excludeIds = /* @__PURE__ */ new Set([
+      ...draftSessions.map((s) => s.sessionId),
+      ...keepActiveSession.map((s) => s.sessionId)
+    ]);
     const nextSessions = [
-      ...localSessions,
-      ...sessions.filter((session) => !localSessionIds.has(session.sessionId)).map((session) => ({
-        ...session,
-        mode: session.mode ?? DEFAULT_CHAT_AGENT_MODE
-      }))
+      ...draftSessions,
+      ...sessions.filter((session) => !excludeIds.has(session.sessionId)),
+      ...keepActiveSession
     ];
     const nextMessagesBySession = { ...state.messagesBySession };
     const nextErrorBySession = { ...state.errorBySession };
@@ -3097,9 +3091,8 @@ var ChatMessageItemView = ({
   const hasMarkdownOnlyBlocks = hasStructuredBlocks && blocks.every((block) => block.type === "markdown");
   const hasTextContent = Boolean(settledContent || freshContent || displayedContent);
   const shouldRenderStructuredBlocks = hasStructuredBlocks && !(isAssistantStreaming && hasMarkdownOnlyBlocks && hasTextContent);
-  const isPlanMode = mode === "plan";
-  const canSubmitConfirmation = isPlanMode && typeof onConfirmationSubmit === "function";
-  const canSubmitQuestionnaire = isPlanMode && typeof onQuestionnaireSubmit === "function";
+  const canSubmitConfirmation = typeof onConfirmationSubmit === "function";
+  const canSubmitQuestionnaire = typeof onQuestionnaireSubmit === "function";
   const shouldShowStreamingCaret = isAssistantStreaming && (!shouldRenderStructuredBlocks || hasTextContent);
   const isUserMessage = message.role === "user";
   const messageRenderMode = isUserMessage ? "plain-text" : "markdown";
@@ -3157,7 +3150,7 @@ var ChatMessageItemView = ({
           ExecutionConfirmationCard,
           {
             proposal: block.proposal,
-            interactive: isPlanMode,
+            interactive: canSubmitConfirmation,
             onConfirm: canSubmitConfirmation ? () => onConfirmationSubmit({
               proposalId: block.proposal.proposalId,
               content: createExecutionConfirmationContent(block.proposal),
@@ -3787,7 +3780,7 @@ var groupConversationTurns = (historyMessages, streamingMessage) => {
   ];
 };
 var ChatThreadView = ({
-  activeSessionMode = DEFAULT_CHAT_AGENT_MODE,
+  activeMode = DEFAULT_CHAT_AGENT_MODE,
   historyMessages,
   streamingMessage,
   error: error2,
@@ -4043,7 +4036,7 @@ var ChatThreadView = ({
                   style: isLatestTurn ? { scrollMarginTop: `${CHAT_THREAD_SCROLL_TOP_GAP}px` } : void 0,
                   children: renderChatMessage({
                     message: turn.userMessage,
-                    mode: activeSessionMode,
+                    mode: activeMode,
                     onConfirmationSubmit,
                     onQuestionnaireSubmit,
                     renderMessageBlock
@@ -4052,7 +4045,7 @@ var ChatThreadView = ({
               ) : null,
               turn.responseMessages.map((message) => /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
                 message,
-                mode: activeSessionMode,
+                mode: activeMode,
                 onConfirmationSubmit,
                 onQuestionnaireSubmit,
                 renderMessageBlock
@@ -4086,7 +4079,7 @@ var ChatThread = () => {
   const activeSession = useChatStore(
     (s) => s.sessions.find((session) => session.sessionId === s.activeSessionId)
   );
-  const activeSessionMode = activeSession?.mode ?? DEFAULT_CHAT_AGENT_MODE;
+  const preferredMode = useChatStore((s) => s.preferredMode);
   const messages = useChatStore(
     (s) => s.messagesBySession[s.activeSessionId ?? ""] ?? EMPTY_MESSAGES
   );
@@ -4125,7 +4118,7 @@ var ChatThread = () => {
       if (customQuestionnaireSubmit) {
         const handled = await customQuestionnaireSubmit(submission, {
           sessionId: sourceSessionId ?? void 0,
-          mode: activeSessionMode
+          mode: preferredMode
         });
         if (handled !== false) {
           if (sourceSessionId && submission.sourceMessageId) {
@@ -4152,7 +4145,7 @@ var ChatThread = () => {
         );
       }
     },
-    [activeSessionId, activeSessionMode, updateQA, sendRef, customQuestionnaireSubmit]
+    [activeSessionId, customQuestionnaireSubmit, preferredMode, sendRef, updateQA]
   );
   const handleConfirmation = useCallback3(
     async (submission) => {
@@ -4160,7 +4153,7 @@ var ChatThread = () => {
       if (customConfirmationSubmit) {
         const handled = await customConfirmationSubmit(submission, {
           sessionId: sourceSessionId ?? void 0,
-          mode: activeSessionMode
+          mode: preferredMode
         });
         if (handled !== false) {
           return;
@@ -4171,7 +4164,7 @@ var ChatThread = () => {
         includeComposerAttachments: false
       });
     },
-    [activeSessionId, activeSessionMode, sendRef, customConfirmationSubmit]
+    [activeSessionId, customConfirmationSubmit, preferredMode, sendRef]
   );
   const handleLoadPreviousMessages = useCallback3(async () => {
     if (!activeSession || !onLoadMoreHistoryMessages || !historyMessagePagination?.hasMorePrevious || !historyMessagePagination.previousCursor || historyMessagePagination.isLoadingPrevious) {
@@ -4215,7 +4208,7 @@ var ChatThread = () => {
   return /* @__PURE__ */ jsx10(
     ChatThreadView,
     {
-      activeSessionMode,
+      activeMode: preferredMode,
       historyMessages: messages,
       streamingMessage,
       error: error2,
@@ -6947,7 +6940,6 @@ var resolveSelectedChatModel = ({
 var resolveSendSession = ({
   activeSessionId,
   selectedModel,
-  selectedMode,
   nowIso: nowIso2,
   createSessionId
 }) => {
@@ -6959,7 +6951,6 @@ var resolveSendSession = ({
   }
   const session = createDraftChatSession({
     model: selectedModel,
-    mode: selectedMode ?? DEFAULT_CHAT_AGENT_MODE,
     nowIso: nowIso2,
     createSessionId
   });
@@ -7117,9 +7108,6 @@ var useChatComposer = () => {
   const skillsLoader = transport.getSkills;
   const activeSkillsLoaderRef = useRef10(skillsLoader);
   const activeSessionId = useChatStore((s) => s.activeSessionId);
-  const activeSession = useChatStore(
-    (s) => s.sessions.find((x) => x.sessionId === s.activeSessionId) ?? null
-  );
   const preferredMode = useChatStore((s) => s.preferredMode);
   const streamingSessionId = useChatStore(
     (s) => s.activeSessionId && s.isStreamingBySession[s.activeSessionId] ? s.activeSessionId : null
@@ -7140,7 +7128,6 @@ var useChatComposer = () => {
   const setSessionError = useChatStore((s) => s.setSessionError);
   const clearSessionError = useChatStore((s) => s.clearSessionError);
   const setPreferredMode = useChatStore((s) => s.setPreferredMode);
-  const setSessionMode = useChatStore((s) => s.setSessionMode);
   const [availableModels, setAvailableModels] = useState8([]);
   const [isModelsLoading, setIsModelsLoading] = useState8(true);
   const [isModelsError, setIsModelsError] = useState8(false);
@@ -7221,12 +7208,8 @@ var useChatComposer = () => {
     );
   }, [availableModels, isModelsLoading]);
   useEffect8(() => {
-    if (activeSession) {
-      setSelectedModeLocal(activeSession.mode ?? DEFAULT_CHAT_AGENT_MODE);
-      return;
-    }
     setSelectedModeLocal(preferredMode ?? DEFAULT_CHAT_AGENT_MODE);
-  }, [activeSession, preferredMode]);
+  }, [preferredMode]);
   useEffect8(() => {
     if (previousActiveSessionIdRef.current !== activeSessionId) {
       setSelectedSkills([]);
@@ -7434,7 +7417,7 @@ var useChatComposer = () => {
       const storeState = store.getState();
       const currentActiveSessionId = options?.sessionId ?? storeState.activeSessionId;
       const currentActiveSession = storeState.sessions.find((session2) => session2.sessionId === currentActiveSessionId) ?? null;
-      const currentMode = currentActiveSession?.mode ?? selectedMode;
+      const currentMode = selectedMode;
       if (!(selectedModel || currentActiveSession?.model || availableModels[0]?.id)) {
         return;
       }
@@ -7442,7 +7425,6 @@ var useChatComposer = () => {
       const { localSessionId, sessionId, session } = resolveSendSession({
         activeSessionId: currentActiveSessionId,
         selectedModel: resolvedModel,
-        selectedMode: currentMode,
         nowIso,
         createSessionId: createDraftChatSessionId
       });
@@ -7590,8 +7572,6 @@ var useChatComposer = () => {
       setSelectedMode: (mode) => {
         setSelectedModeLocal(mode);
         setPreferredMode(mode);
-        if (activeSessionId)
-          setSessionMode(activeSessionId, mode);
         if (activeSessionId) {
           const previousRequest = lastRequestBySessionRef.current.get(activeSessionId);
           if (previousRequest) {
@@ -8937,38 +8917,28 @@ var SkillButton = styled14.button`
 `;
 
 // src/components/chat-conversation-list/index.tsx
-import { useEffect as useEffect10, useMemo as useMemo7, useRef as useRef12 } from "react";
+import { useEffect as useEffect10, 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, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
-var ChatSessionItem = memo2(
-  ({ session, isActive, modeLabel, onClick }) => {
-    return /* @__PURE__ */ jsx17(
-      SessionButton,
-      {
-        type: "button",
-        "data-active": isActive,
-        "data-testid": `chat-session-item-${session.sessionId}`,
-        onClick: () => onClick(session.sessionId),
-        children: /* @__PURE__ */ jsxs12(SessionMeta, { children: [
-          /* @__PURE__ */ jsx17(SessionTitle, { children: session.title }),
-          /* @__PURE__ */ jsx17(ModeBadge, { children: modeLabel })
-        ] })
-      }
-    );
-  }
-);
+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 })
+    }
+  );
+});
 ChatSessionItem.displayName = "ChatSessionItem";
-var SessionMeta = styled15.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-`;
 var SessionTitle = styled15.span`
+  display: block;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -8982,22 +8952,31 @@ var SessionButton = styled15.button`
   color: var(--text-primary);
   background: rgba(255, 255, 255, 0.03);
   cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    transform 160ms ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(255, 255, 255, 0.08);
+  }
+
+  &:focus-visible {
+    outline: none;
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(255, 255, 255, 0.18);
+  }
+
+  &:active {
+    transform: scale(0.995);
+  }
 
   &[data-active='true'] {
     border-color: rgba(255, 255, 255, 0.2);
     background: rgba(255, 255, 255, 0.08);
   }
 `;
-var ModeBadge = styled15.span`
-  flex-shrink: 0;
-  border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 4px 10px;
-  font-size: 11px;
-  line-height: 1;
-  color: var(--text-secondary);
-  background: rgba(255, 255, 255, 0.04);
-`;
 
 // src/components/chat-conversation-list/lib/history-session-selection.ts
 var shouldLoadHistorySessionMessages = ({
@@ -9018,7 +8997,7 @@ var shouldLoadHistorySessionMessages = ({
 };
 
 // src/components/chat-conversation-list/index.tsx
-import { jsx as jsx18, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
 var SCROLL_LOAD_MORE_THRESHOLD_PX = 80;
 var shouldLoadMoreSessions = ({
   scrollTop,
@@ -9060,16 +9039,7 @@ var ChatConversationList = () => {
     isLoadingMoreRef.current = false;
     hasSeenLoadingMoreRef.current = false;
   }, [historySessionList?.sessions.length, historySessionList?.hasMore]);
-  const sessions = useMemo7(() => {
-    if (!historySessionList) {
-      return localSessions;
-    }
-    const localSessionIds = new Set(localSessions.map((session) => session.sessionId));
-    return [
-      ...localSessions,
-      ...historySessionList.sessions.filter((session) => !localSessionIds.has(session.sessionId))
-    ];
-  }, [historySessionList, localSessions]);
+  const sessions = localSessions;
   const handleSessionListScroll = (event) => {
     if (!historySessionList?.hasMore || historySessionList.isLoading || !onLoadMoreSessions || isLoadingMoreRef.current) {
       return;
@@ -9123,23 +9093,17 @@ var ChatConversationList = () => {
       );
     }
   };
-  const modeLabels = {
-    ask: labels.modeLabelAsk,
-    plan: labels.modeLabelPlan,
-    agent: labels.modeLabelAgent
-  };
-  return /* @__PURE__ */ jsxs13(Container3, { children: [
-    /* @__PURE__ */ jsxs13(Toolbar, { children: [
-      /* @__PURE__ */ jsx18(Title3, { children: "Sessions" }),
+  return /* @__PURE__ */ jsxs12(Container3, { children: [
+    /* @__PURE__ */ jsxs12(Toolbar, { children: [
+      /* @__PURE__ */ jsx18(Title3, { children: labels.sessionsTitle }),
       /* @__PURE__ */ jsx18(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: startNewChat, children: labels.newChat })
     ] }),
-    /* @__PURE__ */ jsxs13(List2, { "data-testid": "chat-session-list", onScroll: handleSessionListScroll, children: [
+    /* @__PURE__ */ jsxs12(List2, { "data-testid": "chat-session-list", onScroll: handleSessionListScroll, children: [
       sessions.map((session) => /* @__PURE__ */ jsx18(
         ChatSessionItem,
         {
           session,
           isActive: activeSessionId === session.sessionId,
-          modeLabel: modeLabels[session.mode ?? DEFAULT_CHAT_AGENT_MODE] ?? "",
           onClick: (sessionId) => void handleSelectSession(sessionId)
         },
         session.sessionId
@@ -9170,13 +9134,32 @@ var Title3 = styled16.h2`
   color: var(--text-secondary);
 `;
 var CreateButton = styled16.button`
-  border: none;
+  border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 12px;
   padding: 12px 14px;
-  background: var(--text-primary);
-  color: var(--bg-primary);
+  background: rgba(255, 255, 255, 0.9);
+  color: rgba(20, 20, 20, 0.92);
   text-align: left;
   cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    transform 160ms ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.96);
+    border-color: rgba(255, 255, 255, 0.28);
+  }
+
+  &:focus-visible {
+    outline: none;
+    background: rgba(255, 255, 255, 0.96);
+    border-color: rgba(255, 255, 255, 0.32);
+  }
+
+  &:active {
+    transform: scale(0.995);
+  }
 `;
 var List2 = styled16.div`
   padding: 0 12px 16px;
@@ -9192,7 +9175,7 @@ var StateRow = styled16.div`
 `;
 
 // src/components/ai-chat/index.tsx
-import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
 var NewTalkIcon = () => /* @__PURE__ */ jsx19(
   "svg",
   {
@@ -9203,7 +9186,7 @@ var NewTalkIcon = () => /* @__PURE__ */ jsx19(
     fill: "none",
     style: { display: "block" },
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsxs14(
+    children: /* @__PURE__ */ jsxs13(
       "g",
       {
         transform: "translate(1.8909 2.0364)",
@@ -9212,7 +9195,7 @@ var NewTalkIcon = () => /* @__PURE__ */ jsx19(
         strokeLinejoin: "round",
         strokeWidth: "1.36533333",
         children: [
-          /* @__PURE__ */ jsxs14("g", { transform: "translate(9.8909 2.3273) rotate(-315) translate(-9.8909 -2.3273) translate(8.2909 0.7273)", children: [
+          /* @__PURE__ */ jsxs13("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" })
           ] }),
@@ -9254,9 +9237,9 @@ var AiChatWorkspaceContent = ({
   useEffect11(() => {
     onConversationStartedChange?.(isConversationStarted);
   }, [isConversationStarted, onConversationStartedChange]);
-  return /* @__PURE__ */ jsxs14(Root, { "data-testid": "ai-chat", children: [
+  return /* @__PURE__ */ jsxs13(Root, { "data-testid": "ai-chat", children: [
     showConversationList ? /* @__PURE__ */ jsx19(ChatConversationList, {}) : null,
-    /* @__PURE__ */ jsxs14(Workspace, { children: [
+    /* @__PURE__ */ jsxs13(Workspace, { children: [
       showNewChatButton && !showConversationList && !shouldShowComposerOnly ? /* @__PURE__ */ jsx19(QuickActions, { renderNewChatTrigger }) : null,
       shouldShowComposerOnly ? null : /* @__PURE__ */ jsx19(ChatThread, {}),
       /* @__PURE__ */ jsx19(ChatComposer, {})

package/package.json

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