@xinghunm/ai-chat 1.3.2 → 1.4.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/ai-chat/index.tsx
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect11 } from "react";
 import styled17 from "@emotion/styled";
 import { ConfigProvider } from "@xinghunm/compass-ui";
 
@@ -53,7 +53,10 @@ var DEFAULT_AI_CHAT_LABELS = {
   modelUnavailable: "No model available",
   skillLoading: "Loading skills...",
   skillEmpty: "No matching skills",
-  removeSkillAriaLabel: "Remove skill"
+  removeSkillAriaLabel: "Remove skill",
+  sessionHistoryLoading: "Loading conversations...",
+  sessionHistoryLoadFailed: "Failed to load conversations",
+  sessionHistoryEmpty: "No conversations yet"
 };
 
 // src/lib/chat-session.ts
@@ -81,6 +84,20 @@ var createDraftChatSession = ({
 // src/store/chat-store.ts
 var DEFAULT_CHAT_SESSION_TITLE = "New Chat";
 var IMAGE_MESSAGE_SESSION_TITLE = "Image message";
+var createHistoryMessagePaginationState = (page) => ({
+  previousCursor: page?.previousCursor ?? null,
+  hasMorePrevious: page?.hasMorePrevious ?? Boolean(page && page.previousCursor !== null),
+  isLoadingPrevious: false,
+  error: null
+});
+var normalizeHistoryMessages = (sessionId, messages) => messages.map((message) => ({ ...message, sessionId }));
+var mergeOlderHistoryMessages = (sessionId, olderMessages, currentMessages) => {
+  const currentMessageIds = new Set(currentMessages.map((message) => message.id));
+  const uniqueOlderMessages = normalizeHistoryMessages(sessionId, olderMessages).filter(
+    (message) => !currentMessageIds.has(message.id)
+  );
+  return [...uniqueOlderMessages, ...currentMessages];
+};
 var resolveSessionTitleFromMessage = (message) => {
   const trimmedContent = message.content.trim();
   if (trimmedContent) {
@@ -183,6 +200,9 @@ var createChatStore = (initialState) => createStore((set, get) => ({
   isStreamingBySession: {},
   isStoppingBySession: {},
   errorBySession: {},
+  sessionMessageLoadStatusBySession: {},
+  sessionMessageLoadErrorBySession: {},
+  historyMessagePaginationBySession: {},
   // ---- Session management ------------------------------------------------
   createSession: (session) => {
     const state = get();
@@ -196,6 +216,15 @@ var createChatStore = (initialState) => createStore((set, get) => ({
     const nextErrorBySession = { ...state.errorBySession };
     const nextIsStreamingBySession = { ...state.isStreamingBySession };
     const nextIsStoppingBySession = { ...state.isStoppingBySession };
+    const nextSessionMessageLoadStatusBySession = {
+      ...state.sessionMessageLoadStatusBySession
+    };
+    const nextSessionMessageLoadErrorBySession = {
+      ...state.sessionMessageLoadErrorBySession
+    };
+    const nextHistoryMessagePaginationBySession = {
+      ...state.historyMessagePaginationBySession
+    };
     const sid = session.sessionId;
     if (nextMessagesBySession[sid] === void 0)
       nextMessagesBySession[sid] = [];
@@ -205,13 +234,25 @@ var createChatStore = (initialState) => createStore((set, get) => ({
       nextIsStreamingBySession[sid] = false;
     if (nextIsStoppingBySession[sid] === void 0)
       nextIsStoppingBySession[sid] = false;
+    if (nextSessionMessageLoadStatusBySession[sid] === void 0) {
+      nextSessionMessageLoadStatusBySession[sid] = "loaded";
+    }
+    if (nextSessionMessageLoadErrorBySession[sid] === void 0) {
+      nextSessionMessageLoadErrorBySession[sid] = null;
+    }
+    if (nextHistoryMessagePaginationBySession[sid] === void 0) {
+      nextHistoryMessagePaginationBySession[sid] = createHistoryMessagePaginationState();
+    }
     set({
       sessions: nextSessions,
       activeSessionId: sid,
       messagesBySession: nextMessagesBySession,
       errorBySession: nextErrorBySession,
       isStreamingBySession: nextIsStreamingBySession,
-      isStoppingBySession: nextIsStoppingBySession
+      isStoppingBySession: nextIsStoppingBySession,
+      sessionMessageLoadStatusBySession: nextSessionMessageLoadStatusBySession,
+      sessionMessageLoadErrorBySession: nextSessionMessageLoadErrorBySession,
+      historyMessagePaginationBySession: nextHistoryMessagePaginationBySession
     });
   },
   startNewChat: () => {
@@ -266,6 +307,27 @@ var createChatStore = (initialState) => createStore((set, get) => ({
       nextErrorBySession[nextSessionId] = nextErrorBySession[previousSessionId] ?? null;
       delete nextErrorBySession[previousSessionId];
     }
+    const nextSessionMessageLoadStatusBySession = {
+      ...state.sessionMessageLoadStatusBySession
+    };
+    if (previousSessionId in nextSessionMessageLoadStatusBySession) {
+      nextSessionMessageLoadStatusBySession[nextSessionId] = nextSessionMessageLoadStatusBySession[previousSessionId] ?? "idle";
+      delete nextSessionMessageLoadStatusBySession[previousSessionId];
+    }
+    const nextSessionMessageLoadErrorBySession = {
+      ...state.sessionMessageLoadErrorBySession
+    };
+    if (previousSessionId in nextSessionMessageLoadErrorBySession) {
+      nextSessionMessageLoadErrorBySession[nextSessionId] = nextSessionMessageLoadErrorBySession[previousSessionId] ?? null;
+      delete nextSessionMessageLoadErrorBySession[previousSessionId];
+    }
+    const nextHistoryMessagePaginationBySession = {
+      ...state.historyMessagePaginationBySession
+    };
+    if (previousSessionId in nextHistoryMessagePaginationBySession) {
+      nextHistoryMessagePaginationBySession[nextSessionId] = nextHistoryMessagePaginationBySession[previousSessionId] ?? createHistoryMessagePaginationState();
+      delete nextHistoryMessagePaginationBySession[previousSessionId];
+    }
     const nextActiveSessionId = state.activeSessionId === previousSessionId ? nextSessionId : state.activeSessionId;
     set({
       sessions: nextSessions,
@@ -274,6 +336,9 @@ var createChatStore = (initialState) => createStore((set, get) => ({
       isStreamingBySession: nextIsStreamingBySession,
       isStoppingBySession: nextIsStoppingBySession,
       errorBySession: nextErrorBySession,
+      sessionMessageLoadStatusBySession: nextSessionMessageLoadStatusBySession,
+      sessionMessageLoadErrorBySession: nextSessionMessageLoadErrorBySession,
+      historyMessagePaginationBySession: nextHistoryMessagePaginationBySession,
       activeSessionId: nextActiveSessionId
     });
   },
@@ -287,6 +352,61 @@ var createChatStore = (initialState) => createStore((set, get) => ({
     );
     set({ sessions: nextSessions });
   },
+  hydrateHistorySessions: (sessions) => {
+    const state = get();
+    const localSessions = state.sessions.filter(
+      (session) => isDraftChatSessionId(session.sessionId)
+    );
+    const localSessionIds = new Set(localSessions.map((session) => session.sessionId));
+    const nextSessions = [
+      ...localSessions,
+      ...sessions.filter((session) => !localSessionIds.has(session.sessionId)).map((session) => ({
+        ...session,
+        mode: session.mode ?? DEFAULT_CHAT_AGENT_MODE
+      }))
+    ];
+    const nextMessagesBySession = { ...state.messagesBySession };
+    const nextErrorBySession = { ...state.errorBySession };
+    const nextIsStreamingBySession = { ...state.isStreamingBySession };
+    const nextIsStoppingBySession = { ...state.isStoppingBySession };
+    const nextSessionMessageLoadStatusBySession = {
+      ...state.sessionMessageLoadStatusBySession
+    };
+    const nextSessionMessageLoadErrorBySession = {
+      ...state.sessionMessageLoadErrorBySession
+    };
+    const nextHistoryMessagePaginationBySession = {
+      ...state.historyMessagePaginationBySession
+    };
+    nextSessions.forEach((session) => {
+      const sid = session.sessionId;
+      if (nextErrorBySession[sid] === void 0)
+        nextErrorBySession[sid] = null;
+      if (nextIsStreamingBySession[sid] === void 0)
+        nextIsStreamingBySession[sid] = false;
+      if (nextIsStoppingBySession[sid] === void 0)
+        nextIsStoppingBySession[sid] = false;
+      if (nextSessionMessageLoadStatusBySession[sid] === void 0) {
+        nextSessionMessageLoadStatusBySession[sid] = "idle";
+      }
+      if (nextSessionMessageLoadErrorBySession[sid] === void 0) {
+        nextSessionMessageLoadErrorBySession[sid] = null;
+      }
+      if (nextHistoryMessagePaginationBySession[sid] === void 0) {
+        nextHistoryMessagePaginationBySession[sid] = createHistoryMessagePaginationState();
+      }
+    });
+    set({
+      sessions: nextSessions,
+      messagesBySession: nextMessagesBySession,
+      errorBySession: nextErrorBySession,
+      isStreamingBySession: nextIsStreamingBySession,
+      isStoppingBySession: nextIsStoppingBySession,
+      sessionMessageLoadStatusBySession: nextSessionMessageLoadStatusBySession,
+      sessionMessageLoadErrorBySession: nextSessionMessageLoadErrorBySession,
+      historyMessagePaginationBySession: nextHistoryMessagePaginationBySession
+    });
+  },
   // ---- Message operations ------------------------------------------------
   appendMessage: (sessionId, message) => {
     const state = get();
@@ -313,6 +433,92 @@ var createChatStore = (initialState) => createStore((set, get) => ({
       isStreamingBySession: nextIsStreamingBySession
     });
   },
+  hydrateHistorySessionMessages: (sessionId, messages) => {
+    const state = get();
+    set({
+      messagesBySession: {
+        ...state.messagesBySession,
+        [sessionId]: normalizeHistoryMessages(sessionId, messages)
+      },
+      sessionMessageLoadStatusBySession: {
+        ...state.sessionMessageLoadStatusBySession,
+        [sessionId]: "loaded"
+      },
+      sessionMessageLoadErrorBySession: {
+        ...state.sessionMessageLoadErrorBySession,
+        [sessionId]: null
+      },
+      historyMessagePaginationBySession: {
+        ...state.historyMessagePaginationBySession,
+        [sessionId]: createHistoryMessagePaginationState()
+      }
+    });
+  },
+  hydrateHistorySessionMessagesPage: (sessionId, page) => {
+    const state = get();
+    set({
+      messagesBySession: {
+        ...state.messagesBySession,
+        [sessionId]: normalizeHistoryMessages(sessionId, page.messages)
+      },
+      sessionMessageLoadStatusBySession: {
+        ...state.sessionMessageLoadStatusBySession,
+        [sessionId]: "loaded"
+      },
+      sessionMessageLoadErrorBySession: {
+        ...state.sessionMessageLoadErrorBySession,
+        [sessionId]: null
+      },
+      historyMessagePaginationBySession: {
+        ...state.historyMessagePaginationBySession,
+        [sessionId]: createHistoryMessagePaginationState(page)
+      }
+    });
+  },
+  prependHistorySessionMessagesPage: (sessionId, page) => {
+    const state = get();
+    set({
+      messagesBySession: {
+        ...state.messagesBySession,
+        [sessionId]: mergeOlderHistoryMessages(
+          sessionId,
+          page.messages,
+          state.messagesBySession[sessionId] ?? []
+        )
+      },
+      historyMessagePaginationBySession: {
+        ...state.historyMessagePaginationBySession,
+        [sessionId]: createHistoryMessagePaginationState(page)
+      }
+    });
+  },
+  setHistorySessionPreviousMessagesLoadStatus: (sessionId, isLoading, error2 = null) => {
+    const state = get();
+    const current = state.historyMessagePaginationBySession[sessionId] ?? createHistoryMessagePaginationState();
+    set({
+      historyMessagePaginationBySession: {
+        ...state.historyMessagePaginationBySession,
+        [sessionId]: {
+          ...current,
+          isLoadingPrevious: isLoading,
+          error: error2
+        }
+      }
+    });
+  },
+  setHistorySessionMessageLoadStatus: (sessionId, status, error2 = null) => {
+    const state = get();
+    set({
+      sessionMessageLoadStatusBySession: {
+        ...state.sessionMessageLoadStatusBySession,
+        [sessionId]: status
+      },
+      sessionMessageLoadErrorBySession: {
+        ...state.sessionMessageLoadErrorBySession,
+        [sessionId]: error2
+      }
+    });
+  },
   startStreamingMessage: (sessionId, message) => {
     const state = get();
     set({
@@ -760,6 +966,10 @@ var AiChatProvider = (props) => {
     handleQuestionnaireSubmit,
     handleConfirmationSubmit,
     messageRenderOrder,
+    historySessionList,
+    onLoadMoreSessions,
+    onSelectHistorySession,
+    onLoadMoreHistoryMessages,
     enableImageAttachments = true,
     children
   } = props;
@@ -836,7 +1046,11 @@ var AiChatProvider = (props) => {
       handleConfirmationSubmit,
       messageRenderOrder,
       transformStreamPacket: defaultTransformStreamPacket,
-      enableImageAttachments
+      enableImageAttachments,
+      historySessionList,
+      onLoadMoreSessions,
+      onSelectHistorySession,
+      onLoadMoreHistoryMessages
     }),
     [
       axiosInstance,
@@ -846,8 +1060,12 @@ var AiChatProvider = (props) => {
       enableImageAttachments,
       handleConfirmationSubmit,
       handleQuestionnaireSubmit,
+      historySessionList,
       labels,
       messageRenderOrder,
+      onLoadMoreSessions,
+      onLoadMoreHistoryMessages,
+      onSelectHistorySession,
       renderMessageBlock,
       sendRef,
       retryRef,
@@ -1291,6 +1509,14 @@ var createTimelineAnchorState = ({
   timelineBlockAnchors: {},
   visibleTimelineBlockKeys: {}
 });
+var createInitialTimelineAnchorState = ({
+  messageId
+}) => ({
+  messageId,
+  previousBlockKeys: [],
+  timelineBlockAnchors: {},
+  visibleTimelineBlockKeys: {}
+});
 var timelineAnchorReducer = (state, action) => {
   switch (action.type) {
     case "reset-message":
@@ -1380,7 +1606,7 @@ var useTimelineBlockAnchors = ({
       messageId: message.id,
       currentBlockKeys: currentTimelineBlockKeys
     },
-    createTimelineAnchorState
+    createInitialTimelineAnchorState
   );
   const effectiveTimelineBlockAnchors = useMemo3(() => {
     if (messageRenderOrder !== "timeline" || !isAssistantStreaming) {
@@ -3155,15 +3381,11 @@ var Bubble = styled7.article`
 
   &[data-role='user'] {
     width: auto;
-    max-width: min(760px, 100%);
+    max-width: 100%;
     margin-left: auto;
-    padding: 14px 16px;
-    border-radius: 22px;
-    background: linear-gradient(180deg, rgba(59, 59, 63, 0.9) 0%, rgba(42, 43, 46, 0.92) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.07);
-    box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.03),
-      0 12px 30px rgba(0, 0, 0, 0.18);
+    padding: 8px 12px;
+    background: #282825;
+    border-radius: 16px;
   }
 `;
 var Header2 = styled7.div`
@@ -3495,6 +3717,7 @@ var HeroSubtitle = styled8.p`
 // src/components/chat-thread/index.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
 var CHAT_THREAD_PINNED_THRESHOLD_PX = 32;
+var CHAT_THREAD_LOAD_PREVIOUS_THRESHOLD_PX = 80;
 var isThreadPinnedToBottom = (container) => container.scrollHeight - container.clientHeight - container.scrollTop <= CHAT_THREAD_PINNED_THRESHOLD_PX;
 var renderChatMessage = ({
   message,
@@ -3568,9 +3791,13 @@ var ChatThreadView = ({
   historyMessages,
   streamingMessage,
   error: error2,
+  isLoadingPreviousMessages = false,
+  previousMessagesError,
   retryButtonLabel,
   scrollToLatestLabel,
+  sessionHistoryLoadingLabel,
   onRetry,
+  onLoadPreviousMessages,
   onConfirmationSubmit,
   onQuestionnaireSubmit,
   renderMessageBlock
@@ -3581,11 +3808,11 @@ var ChatThreadView = ({
     [historyMessages, streamingMessage]
   );
   const latestTurn = conversationTurns[conversationTurns.length - 1];
-  const previousTurns = conversationTurns.slice(0, -1);
   const latestUserMessageId = latestTurn?.userMessage?.id;
   const latestHistoryMessage = historyMessages[historyMessages.length - 1];
   const latestTurnRef = useRef5(null);
   const reservedSpaceFrameRef = useRef5(null);
+  const isLoadingPreviousRef = useRef5(false);
   const isPinnedRef = useRef5(true);
   const lastHistoryMessageIdRef = useRef5(latestHistoryMessage?.id);
   const lastStreamingMessageIdRef = useRef5(streamingMessage?.id);
@@ -3632,17 +3859,45 @@ var ChatThreadView = ({
     },
     [markThreadPinned, scrollToBottom]
   );
+  const handleLoadPreviousMessages = useCallback3(async () => {
+    const container = containerRef.current;
+    if (!container || !onLoadPreviousMessages || isLoadingPreviousMessages) {
+      return;
+    }
+    if (isLoadingPreviousRef.current) {
+      return;
+    }
+    isLoadingPreviousRef.current = true;
+    const previousScrollHeight = container.scrollHeight;
+    const previousScrollTop = container.scrollTop;
+    try {
+      await onLoadPreviousMessages();
+    } catch {
+      return;
+    } finally {
+      isLoadingPreviousRef.current = false;
+    }
+    window.requestAnimationFrame(() => {
+      const nextContainer = containerRef.current;
+      if (!nextContainer)
+        return;
+      nextContainer.scrollTop = nextContainer.scrollHeight - previousScrollHeight + previousScrollTop;
+    });
+  }, [isLoadingPreviousMessages, onLoadPreviousMessages]);
   const handleContainerScroll = useCallback3(() => {
     const container = containerRef.current;
     if (!container)
       return;
+    if (onLoadPreviousMessages && container.scrollTop <= CHAT_THREAD_LOAD_PREVIOUS_THRESHOLD_PX) {
+      void handleLoadPreviousMessages();
+    }
     const nextPinned = isThreadPinnedToBottom(container);
     isPinnedRef.current = nextPinned;
     setIsDetached(!nextPinned);
     if (nextPinned) {
       setPendingNewMessageCount(0);
     }
-  }, []);
+  }, [handleLoadPreviousMessages, onLoadPreviousMessages]);
   useLayoutEffect3(() => {
     const nextHistoryMessageId = latestHistoryMessage?.id;
     if (lastHistoryMessageIdRef.current === nextHistoryMessageId) {
@@ -3770,54 +4025,44 @@ var ChatThreadView = ({
   }, [latestTurn, scrollToBottom]);
   return /* @__PURE__ */ jsxs7(ThreadViewport, { children: [
     /* @__PURE__ */ jsxs7(Container, { ref: containerRef, "data-testid": "chat-thread", onScroll: handleContainerScroll, children: [
-      previousTurns.map((turn) => /* @__PURE__ */ jsxs7(ConversationTurn, { "data-testid": "chat-thread-turn", children: [
-        turn.userMessage ? /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
-          message: turn.userMessage,
-          mode: activeSessionMode,
-          onConfirmationSubmit,
-          onQuestionnaireSubmit,
-          renderMessageBlock
-        }) }) : null,
-        turn.responseMessages.map((message) => /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
-          message,
-          mode: activeSessionMode,
-          onConfirmationSubmit,
-          onQuestionnaireSubmit,
-          renderMessageBlock
-        }) }, message.id))
-      ] }, turn.id)),
-      latestTurn ? /* @__PURE__ */ jsxs7(
-        ConversationTurn,
-        {
-          ref: latestTurnRef,
-          "data-testid": "chat-thread-latest-turn",
-          style: latestTurnMinHeight > 0 ? { minHeight: `${latestTurnMinHeight}px` } : void 0,
-          children: [
-            latestTurn.userMessage ? /* @__PURE__ */ jsx10(
-              MessageSlot,
-              {
-                "data-testid": "chat-latest-user-anchor",
-                style: { scrollMarginTop: `${CHAT_THREAD_SCROLL_TOP_GAP}px` },
-                children: renderChatMessage({
-                  message: latestTurn.userMessage,
-                  mode: activeSessionMode,
-                  onConfirmationSubmit,
-                  onQuestionnaireSubmit,
-                  renderMessageBlock
-                })
-              }
-            ) : null,
-            latestTurn.responseMessages.map((message) => /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
-              message,
-              mode: activeSessionMode,
-              onConfirmationSubmit,
-              onQuestionnaireSubmit,
-              renderMessageBlock
-            }) }, message.id)),
-            error2 ? renderErrorState({ error: error2, onRetry, retryButtonLabel }) : null
-          ]
-        }
-      ) : null,
+      isLoadingPreviousMessages ? /* @__PURE__ */ jsx10(PreviousMessagesStateRow, { "data-testid": "chat-thread-loading-previous", children: sessionHistoryLoadingLabel }) : null,
+      previousMessagesError ? /* @__PURE__ */ jsx10(PreviousMessagesStateRow, { "data-testid": "chat-thread-load-previous-error", children: previousMessagesError }) : null,
+      conversationTurns.map((turn, turnIndex) => {
+        const isLatestTurn = turnIndex === conversationTurns.length - 1;
+        return /* @__PURE__ */ jsxs7(
+          ConversationTurn,
+          {
+            ref: isLatestTurn ? latestTurnRef : null,
+            "data-testid": isLatestTurn ? "chat-thread-latest-turn" : "chat-thread-turn",
+            style: isLatestTurn && latestTurnMinHeight > 0 ? { minHeight: `${latestTurnMinHeight}px` } : void 0,
+            children: [
+              turn.userMessage ? /* @__PURE__ */ jsx10(
+                MessageSlot,
+                {
+                  "data-testid": isLatestTurn ? "chat-latest-user-anchor" : void 0,
+                  style: isLatestTurn ? { scrollMarginTop: `${CHAT_THREAD_SCROLL_TOP_GAP}px` } : void 0,
+                  children: renderChatMessage({
+                    message: turn.userMessage,
+                    mode: activeSessionMode,
+                    onConfirmationSubmit,
+                    onQuestionnaireSubmit,
+                    renderMessageBlock
+                  })
+                }
+              ) : null,
+              turn.responseMessages.map((message) => /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
+                message,
+                mode: activeSessionMode,
+                onConfirmationSubmit,
+                onQuestionnaireSubmit,
+                renderMessageBlock
+              }) }, message.id)),
+              isLatestTurn && error2 ? renderErrorState({ error: error2, onRetry, retryButtonLabel }) : null
+            ]
+          },
+          turn.id
+        );
+      }),
       !latestTurn && error2 ? renderErrorState({ error: error2, onRetry, retryButtonLabel }) : null
     ] }),
     isDetached ? /* @__PURE__ */ jsx10(ScrollToLatestOverlay, { children: /* @__PURE__ */ jsxs7(
@@ -3838,14 +4083,25 @@ var EMPTY_MESSAGES = [];
 var ChatThread = () => {
   const activeSessionId = useChatStore((s) => s.activeSessionId);
   const hasSessions = useChatStore((s) => s.sessions.length > 0);
-  const activeSessionMode = useChatStore(
-    (s) => s.sessions.find((x) => x.sessionId === s.activeSessionId)?.mode ?? DEFAULT_CHAT_AGENT_MODE
+  const activeSession = useChatStore(
+    (s) => s.sessions.find((session) => session.sessionId === s.activeSessionId)
   );
+  const activeSessionMode = activeSession?.mode ?? DEFAULT_CHAT_AGENT_MODE;
   const messages = useChatStore(
     (s) => s.messagesBySession[s.activeSessionId ?? ""] ?? EMPTY_MESSAGES
   );
+  const sessionMessageLoadStatus = useChatStore(
+    (s) => s.sessionMessageLoadStatusBySession[s.activeSessionId ?? ""]
+  );
   const streamingMessage = useChatStore((s) => s.streamingMessageBySession[s.activeSessionId ?? ""]);
   const error2 = useChatStore((s) => s.errorBySession[s.activeSessionId ?? ""]);
+  const historyMessagePagination = useChatStore(
+    (s) => s.historyMessagePaginationBySession[s.activeSessionId ?? ""]
+  );
+  const prependHistorySessionMessagesPage = useChatStore((s) => s.prependHistorySessionMessagesPage);
+  const setHistorySessionPreviousMessagesLoadStatus = useChatStore(
+    (s) => s.setHistorySessionPreviousMessagesLoadStatus
+  );
   const updateQA = useChatStore((s) => s.updateQuestionnaireAnswers);
   const clearSessionError = useChatStore((s) => s.clearSessionError);
   const {
@@ -3854,6 +4110,7 @@ var ChatThread = () => {
     renderMessageBlock,
     handleQuestionnaireSubmit: customQuestionnaireSubmit,
     handleConfirmationSubmit: customConfirmationSubmit,
+    onLoadMoreHistoryMessages,
     labels
   } = useChatContext();
   const handleRetry = useCallback3(() => {
@@ -3916,6 +4173,42 @@ var ChatThread = () => {
     },
     [activeSessionId, activeSessionMode, sendRef, customConfirmationSubmit]
   );
+  const handleLoadPreviousMessages = useCallback3(async () => {
+    if (!activeSession || !onLoadMoreHistoryMessages || !historyMessagePagination?.hasMorePrevious || !historyMessagePagination.previousCursor || historyMessagePagination.isLoadingPrevious) {
+      return;
+    }
+    setHistorySessionPreviousMessagesLoadStatus(activeSession.sessionId, true);
+    try {
+      const page = await onLoadMoreHistoryMessages({
+        session: activeSession,
+        cursor: historyMessagePagination.previousCursor
+      });
+      if (page) {
+        prependHistorySessionMessagesPage(activeSession.sessionId, page);
+        return;
+      }
+      setHistorySessionPreviousMessagesLoadStatus(activeSession.sessionId, false);
+    } catch (error3) {
+      setHistorySessionPreviousMessagesLoadStatus(
+        activeSession.sessionId,
+        false,
+        error3 instanceof Error ? error3.message : String(error3)
+      );
+      throw error3;
+    }
+  }, [
+    activeSession,
+    historyMessagePagination,
+    onLoadMoreHistoryMessages,
+    prependHistorySessionMessagesPage,
+    setHistorySessionPreviousMessagesLoadStatus
+  ]);
+  const canLoadPreviousMessages = Boolean(
+    activeSession && onLoadMoreHistoryMessages && historyMessagePagination?.hasMorePrevious && historyMessagePagination.previousCursor && !historyMessagePagination.isLoadingPrevious
+  );
+  if (hasSessions && sessionMessageLoadStatus === "loading" && messages.length === 0 && !streamingMessage) {
+    return /* @__PURE__ */ jsx10(ThreadStateViewport, { "data-testid": "chat-thread-loading-state", children: /* @__PURE__ */ jsx10(ThreadStateText, { children: labels.sessionHistoryLoading }) });
+  }
   if (!hasSessions || messages.length === 0 && !streamingMessage) {
     return /* @__PURE__ */ jsx10(ChatThreadEmptyState, {});
   }
@@ -3926,9 +4219,13 @@ var ChatThread = () => {
       historyMessages: messages,
       streamingMessage,
       error: error2,
+      isLoadingPreviousMessages: historyMessagePagination?.isLoadingPrevious,
+      previousMessagesError: historyMessagePagination?.error,
       retryButtonLabel: labels.retryButton,
       scrollToLatestLabel: labels.scrollToLatest,
+      sessionHistoryLoadingLabel: labels.sessionHistoryLoading,
       onRetry: handleRetry,
+      onLoadPreviousMessages: canLoadPreviousMessages ? handleLoadPreviousMessages : void 0,
       onConfirmationSubmit: handleConfirmation,
       onQuestionnaireSubmit: handleQuestionnaireSubmit,
       renderMessageBlock
@@ -3942,6 +4239,18 @@ var ThreadViewport = styled9.div`
   flex: 1;
   min-height: 0;
 `;
+var ThreadStateViewport = styled9.div`
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+`;
+var ThreadStateText = styled9.div`
+  color: var(--text-secondary, rgba(255, 255, 255, 0.64));
+  font-size: 14px;
+`;
 var Container = styled9.div`
   display: flex;
   flex: 1;
@@ -3949,7 +4258,7 @@ var Container = styled9.div`
   gap: 18px;
   min-height: 0;
   overflow: auto;
-  padding: 24px 24px 88px;
+  padding: 24px 16px 88px;
   overscroll-behavior: contain;
 
   &::-webkit-scrollbar {
@@ -3968,10 +4277,23 @@ var Container = styled9.div`
 var MessageSlot = styled9.div`
   display: flex;
 `;
+var PreviousMessagesStateRow = styled9.div`
+  width: 100%;
+  max-width: var(--chat-content-max-width, 48rem);
+  margin-right: auto;
+  margin-left: auto;
+  color: var(--text-secondary, rgba(255, 255, 255, 0.64));
+  font-size: 13px;
+  text-align: center;
+`;
 var ConversationTurn = styled9.div`
   display: flex;
   flex-direction: column;
   gap: 18px;
+  width: 100%;
+  max-width: var(--chat-content-max-width, 48rem);
+  margin-right: auto;
+  margin-left: auto;
 `;
 var ErrorText = styled9.div`
   color: #ff7b72;
@@ -7759,7 +8081,7 @@ var PrimaryButton = styled13(Button)`
     min-width: 24px;
     width: 24px;
     height: 24px;
-    background: ${({ $canSend }) => $canSend ? "#fcfbf8" : "rgba(255, 255, 255, 0.3)"};
+    background: ${({ $canSend }) => $canSend ? "#fcfbf8" : "rgba(252,251,248,0.3);"};
     color: ${({ $canSend }) => $canSend ? "#5b5448" : "rgba(255, 255, 255, 0.72)"};
     border-radius: 12px;
     border: 1px solid ${({ $canSend }) => $canSend ? "rgba(198, 188, 170, 0.38)" : "transparent"};
@@ -7770,7 +8092,7 @@ var PrimaryButton = styled13(Button)`
     }
 
     &:hover:not(:disabled) {
-      background: ${({ $canSend }) => $canSend ? "#f7f4ec" : "rgba(255, 255, 255, 0.3)"};
+      background: ${({ $canSend }) => $canSend ? "#f7f4ec" : "rgba(252,251,248,0.3);"};
       color: ${({ $canSend }) => $canSend ? "#4f493f" : "rgba(255, 255, 255, 0.72)"};
       border-color: ${({ $canSend }) => $canSend ? "rgba(198, 188, 170, 0.46)" : "transparent"};
     }
@@ -7838,7 +8160,7 @@ var StopSpinner = styled13.span`
 import { jsx as jsx16, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
 var CHAT_COMPOSER_LINE_HEIGHT_PX = 20;
 var CHAT_COMPOSER_MAX_ROWS = 7;
-var CHAT_COMPOSER_PADDING_TOP_PX = 8;
+var CHAT_COMPOSER_PADDING_TOP_PX = 12;
 var CHAT_COMPOSER_PADDING_BOTTOM_PX = 12;
 var CHAT_COMPOSER_PADDING_BLOCK_PX = CHAT_COMPOSER_PADDING_TOP_PX + CHAT_COMPOSER_PADDING_BOTTOM_PX;
 var CHAT_COMPOSER_MIN_ROWS = 4;
@@ -8073,6 +8395,10 @@ var ChatComposerView = ({
     setActiveSkillNavigation({ queryKey: "", index: 0 });
   };
   const handleKeyDown = (event) => {
+    const isImeComposing = event.nativeEvent.isComposing || event.keyCode === 229;
+    if (event.key === "Enter" && isImeComposing) {
+      return;
+    }
     if (skillQueryMatch) {
       if (event.key === "ArrowDown" && filteredSkills.length > 0) {
         event.preventDefault();
@@ -8350,7 +8676,7 @@ var Surface = styled14.div`
     'input'
     'footer';
   width: 100%;
-  max-width: 760px;
+  max-width: var(--chat-content-max-width, 48rem);
   margin: 0 auto;
   background: var(--border-color);
   border-radius: 20px;
@@ -8611,6 +8937,7 @@ var SkillButton = styled14.button`
 `;
 
 // src/components/chat-conversation-list/index.tsx
+import { useEffect as useEffect10, useMemo as useMemo7, useRef as useRef12 } from "react";
 import styled16 from "@emotion/styled";
 
 // src/components/chat-conversation-list/components/chat-session-item.tsx
@@ -8624,6 +8951,7 @@ var ChatSessionItem = memo2(
       {
         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 }),
@@ -8671,14 +8999,130 @@ var ModeBadge = styled15.span`
   background: rgba(255, 255, 255, 0.04);
 `;
 
+// src/components/chat-conversation-list/lib/history-session-selection.ts
+var shouldLoadHistorySessionMessages = ({
+  sessionId,
+  messagesBySession,
+  loadStatusBySession,
+  isStreamingBySession
+}) => {
+  if (isStreamingBySession[sessionId])
+    return false;
+  if (loadStatusBySession[sessionId] === "loading")
+    return false;
+  if (loadStatusBySession[sessionId] === "error")
+    return true;
+  if (loadStatusBySession[sessionId] === "loaded")
+    return false;
+  return messagesBySession[sessionId] === void 0;
+};
+
 // src/components/chat-conversation-list/index.tsx
 import { jsx as jsx18, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
+var SCROLL_LOAD_MORE_THRESHOLD_PX = 80;
+var shouldLoadMoreSessions = ({
+  scrollTop,
+  clientHeight,
+  scrollHeight,
+  threshold = SCROLL_LOAD_MORE_THRESHOLD_PX
+}) => scrollHeight - scrollTop - clientHeight <= threshold;
+var isHistorySessionMessagesPage = (value) => typeof value === "object" && value !== null && Array.isArray(value.messages);
 var ChatConversationList = () => {
-  const { labels } = useChatContext();
-  const sessions = useChatStore((s) => s.sessions);
+  const { labels, historySessionList, onLoadMoreSessions, onSelectHistorySession, 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 hydrateHistorySessions = useChatStore((s) => s.hydrateHistorySessions);
+  const hydrateHistorySessionMessages = useChatStore((s) => s.hydrateHistorySessionMessages);
+  const hydrateHistorySessionMessagesPage = useChatStore((s) => s.hydrateHistorySessionMessagesPage);
+  const setHistorySessionMessageLoadStatus = useChatStore(
+    (s) => s.setHistorySessionMessageLoadStatus
+  );
+  const isLoadingMoreRef = useRef12(false);
+  const hasSeenLoadingMoreRef = useRef12(false);
+  useEffect10(() => {
+    if (!historySessionList)
+      return;
+    hydrateHistorySessions(historySessionList.sessions);
+  }, [historySessionList, hydrateHistorySessions]);
+  useEffect10(() => {
+    if (historySessionList?.isLoading) {
+      hasSeenLoadingMoreRef.current = true;
+      return;
+    }
+    if (hasSeenLoadingMoreRef.current) {
+      hasSeenLoadingMoreRef.current = false;
+      isLoadingMoreRef.current = false;
+    }
+  }, [historySessionList?.isLoading]);
+  useEffect10(() => {
+    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 handleSessionListScroll = (event) => {
+    if (!historySessionList?.hasMore || historySessionList.isLoading || !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;
+      });
+    }
+  };
+  const handleSelectSession = async (sessionId) => {
+    setActiveSession(sessionId);
+    const session = sessions.find((item) => item.sessionId === sessionId);
+    if (!session || !onSelectHistorySession) {
+      return;
+    }
+    const state = store.getState();
+    const shouldLoad = shouldLoadHistorySessionMessages({
+      sessionId,
+      messagesBySession: state.messagesBySession,
+      loadStatusBySession: state.sessionMessageLoadStatusBySession,
+      isStreamingBySession: state.isStreamingBySession
+    });
+    if (!shouldLoad) {
+      return;
+    }
+    setHistorySessionMessageLoadStatus(sessionId, "loading");
+    try {
+      const result = await onSelectHistorySession(session);
+      if (Array.isArray(result)) {
+        hydrateHistorySessionMessages(sessionId, result);
+        return;
+      }
+      if (isHistorySessionMessagesPage(result)) {
+        hydrateHistorySessionMessagesPage(sessionId, result);
+        return;
+      }
+      setHistorySessionMessageLoadStatus(sessionId, "loaded");
+    } catch (error2) {
+      setHistorySessionMessageLoadStatus(
+        sessionId,
+        "error",
+        error2 instanceof Error ? error2.message : String(error2)
+      );
+    }
+  };
   const modeLabels = {
     ask: labels.modeLabelAsk,
     plan: labels.modeLabelPlan,
@@ -8689,16 +9133,21 @@ var ChatConversationList = () => {
       /* @__PURE__ */ jsx18(Title3, { children: "Sessions" }),
       /* @__PURE__ */ jsx18(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: startNewChat, children: labels.newChat })
     ] }),
-    /* @__PURE__ */ jsx18(List2, { "data-testid": "chat-session-list", children: sessions.map((session) => /* @__PURE__ */ jsx18(
-      ChatSessionItem,
-      {
-        session,
-        isActive: activeSessionId === session.sessionId,
-        modeLabel: modeLabels[session.mode ?? DEFAULT_CHAT_AGENT_MODE] ?? "",
-        onClick: setActiveSession
-      },
-      session.sessionId
-    )) })
+    /* @__PURE__ */ jsxs13(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
+      )),
+      historySessionList?.isLoading ? /* @__PURE__ */ jsx18(StateRow, { "data-testid": "chat-session-history-loading", children: labels.sessionHistoryLoading }) : null,
+      historySessionList?.error ? /* @__PURE__ */ jsx18(StateRow, { "data-testid": "chat-session-history-error", children: historySessionList.error || labels.sessionHistoryLoadFailed }) : null,
+      historySessionList && !historySessionList.isLoading && !historySessionList.error && sessions.length === 0 ? /* @__PURE__ */ jsx18(StateRow, { "data-testid": "chat-session-history-empty", children: labels.sessionHistoryEmpty }) : null
+    ] })
   ] });
 };
 var Container3 = styled16.aside`
@@ -8736,6 +9185,11 @@ var List2 = styled16.div`
   gap: 8px;
   overflow: auto;
 `;
+var StateRow = styled16.div`
+  padding: 12px;
+  font-size: 13px;
+  color: var(--text-secondary);
+`;
 
 // src/components/ai-chat/index.tsx
 import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
@@ -8797,7 +9251,7 @@ var AiChatWorkspaceContent = ({
     })
   );
   const shouldShowComposerOnly = showComposerOnlyBeforeFirstMessage && !showConversationList && !isConversationStarted;
-  useEffect10(() => {
+  useEffect11(() => {
     onConversationStartedChange?.(isConversationStarted);
   }, [isConversationStarted, onConversationStartedChange]);
   return /* @__PURE__ */ jsxs14(Root, { "data-testid": "ai-chat", children: [
@@ -8936,12 +9390,25 @@ var Root = styled17.div`
   overflow: hidden;
 `;
 var Workspace = styled17.section`
+  --chat-layout-rem: 16px;
+  --chat-content-margin: calc(var(--chat-layout-rem) * 1);
+  --chat-content-max-width: calc(var(--chat-layout-rem) * 40);
+
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 12px;
   min-height: 0;
   overflow: hidden;
+
+  @media (min-width: 640px) {
+    --chat-content-margin: calc(var(--chat-layout-rem) * 1.5);
+  }
+
+  @media (min-width: 1024px) {
+    --chat-content-margin: calc(var(--chat-layout-rem) * 4);
+    --chat-content-max-width: calc(var(--chat-layout-rem) * 48);
+  }
 `;
 var QuickActionsRow = styled17.div`
   display: flex;