@xinghunm/ai-chat 1.3.3 → 1.4.1

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";
 
@@ -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",
@@ -53,7 +54,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
@@ -63,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
 }) => {
@@ -73,14 +76,27 @@ var createDraftChatSession = ({
     title: "New Chat",
     createdAt: iso,
     updatedAt: iso,
-    model,
-    mode
+    model
   };
 };
 
 // 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,19 +199,27 @@ var createChatStore = (initialState) => createStore((set, get) => ({
   isStreamingBySession: {},
   isStoppingBySession: {},
   errorBySession: {},
+  sessionMessageLoadStatusBySession: {},
+  sessionMessageLoadErrorBySession: {},
+  historyMessagePaginationBySession: {},
   // ---- Session management ------------------------------------------------
   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 };
     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,20 +229,30 @@ 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: () => {
-    const state = get();
     const session = createDraftChatSession({
       model: "",
-      mode: state.preferredMode,
       nowIso: () => (/* @__PURE__ */ new Date()).toISOString()
     });
     get().createSession(session);
@@ -266,6 +300,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,18 +329,66 @@ var createChatStore = (initialState) => createStore((set, get) => ({
       isStreamingBySession: nextIsStreamingBySession,
       isStoppingBySession: nextIsStoppingBySession,
       errorBySession: nextErrorBySession,
+      sessionMessageLoadStatusBySession: nextSessionMessageLoadStatusBySession,
+      sessionMessageLoadErrorBySession: nextSessionMessageLoadErrorBySession,
+      historyMessagePaginationBySession: nextHistoryMessagePaginationBySession,
       activeSessionId: nextActiveSessionId
     });
   },
   setPreferredMode: (mode) => {
     set({ preferredMode: mode });
   },
-  setSessionMode: (sessionId, mode) => {
+  hydrateHistorySessions: (sessions) => {
     const state = get();
-    const nextSessions = state.sessions.map(
-      (s) => s.sessionId === sessionId ? { ...s, mode } : s
+    const localSessions = state.sessions.filter(
+      (session) => isDraftChatSessionId(session.sessionId)
     );
-    set({ sessions: nextSessions });
+    const localSessionIds = new Set(localSessions.map((session) => session.sessionId));
+    const nextSessions = [
+      ...localSessions,
+      ...sessions.filter((session) => !localSessionIds.has(session.sessionId))
+    ];
+    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) => {
@@ -313,6 +416,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 +949,10 @@ var AiChatProvider = (props) => {
     handleQuestionnaireSubmit,
     handleConfirmationSubmit,
     messageRenderOrder,
+    historySessionList,
+    onLoadMoreSessions,
+    onSelectHistorySession,
+    onLoadMoreHistoryMessages,
     enableImageAttachments = true,
     children
   } = props;
@@ -836,7 +1029,11 @@ var AiChatProvider = (props) => {
       handleConfirmationSubmit,
       messageRenderOrder,
       transformStreamPacket: defaultTransformStreamPacket,
-      enableImageAttachments
+      enableImageAttachments,
+      historySessionList,
+      onLoadMoreSessions,
+      onSelectHistorySession,
+      onLoadMoreHistoryMessages
     }),
     [
       axiosInstance,
@@ -846,8 +1043,12 @@ var AiChatProvider = (props) => {
       enableImageAttachments,
       handleConfirmationSubmit,
       handleQuestionnaireSubmit,
+      historySessionList,
       labels,
       messageRenderOrder,
+      onLoadMoreSessions,
+      onLoadMoreHistoryMessages,
+      onSelectHistorySession,
       renderMessageBlock,
       sendRef,
       retryRef,
@@ -2879,9 +3080,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";
@@ -2939,7 +3139,7 @@ var ChatMessageItemView = ({
           ExecutionConfirmationCard,
           {
             proposal: block.proposal,
-            interactive: isPlanMode,
+            interactive: canSubmitConfirmation,
             onConfirm: canSubmitConfirmation ? () => onConfirmationSubmit({
               proposalId: block.proposal.proposalId,
               content: createExecutionConfirmationContent(block.proposal),
@@ -3163,15 +3363,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`
@@ -3503,6 +3699,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,
@@ -3572,13 +3769,17 @@ var groupConversationTurns = (historyMessages, streamingMessage) => {
   ];
 };
 var ChatThreadView = ({
-  activeSessionMode = DEFAULT_CHAT_AGENT_MODE,
+  activeMode = DEFAULT_CHAT_AGENT_MODE,
   historyMessages,
   streamingMessage,
   error: error2,
+  isLoadingPreviousMessages = false,
+  previousMessagesError,
   retryButtonLabel,
   scrollToLatestLabel,
+  sessionHistoryLoadingLabel,
   onRetry,
+  onLoadPreviousMessages,
   onConfirmationSubmit,
   onQuestionnaireSubmit,
   renderMessageBlock
@@ -3593,6 +3794,7 @@ var ChatThreadView = ({
   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);
@@ -3639,17 +3841,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) {
@@ -3777,6 +4007,8 @@ var ChatThreadView = ({
   }, [latestTurn, scrollToBottom]);
   return /* @__PURE__ */ jsxs7(ThreadViewport, { children: [
     /* @__PURE__ */ jsxs7(Container, { ref: containerRef, "data-testid": "chat-thread", onScroll: handleContainerScroll, children: [
+      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(
@@ -3793,7 +4025,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
@@ -3802,7 +4034,7 @@ var ChatThreadView = ({
               ) : null,
               turn.responseMessages.map((message) => /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
                 message,
-                mode: activeSessionMode,
+                mode: activeMode,
                 onConfirmationSubmit,
                 onQuestionnaireSubmit,
                 renderMessageBlock
@@ -3833,14 +4065,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 preferredMode = useChatStore((s) => s.preferredMode);
   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 {
@@ -3849,6 +4092,7 @@ var ChatThread = () => {
     renderMessageBlock,
     handleQuestionnaireSubmit: customQuestionnaireSubmit,
     handleConfirmationSubmit: customConfirmationSubmit,
+    onLoadMoreHistoryMessages,
     labels
   } = useChatContext();
   const handleRetry = useCallback3(() => {
@@ -3863,7 +4107,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) {
@@ -3890,7 +4134,7 @@ var ChatThread = () => {
         );
       }
     },
-    [activeSessionId, activeSessionMode, updateQA, sendRef, customQuestionnaireSubmit]
+    [activeSessionId, customQuestionnaireSubmit, preferredMode, sendRef, updateQA]
   );
   const handleConfirmation = useCallback3(
     async (submission) => {
@@ -3898,7 +4142,7 @@ var ChatThread = () => {
       if (customConfirmationSubmit) {
         const handled = await customConfirmationSubmit(submission, {
           sessionId: sourceSessionId ?? void 0,
-          mode: activeSessionMode
+          mode: preferredMode
         });
         if (handled !== false) {
           return;
@@ -3909,21 +4153,61 @@ 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) {
+      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, {});
   }
   return /* @__PURE__ */ jsx10(
     ChatThreadView,
     {
-      activeSessionMode,
+      activeMode: preferredMode,
       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
@@ -3937,6 +4221,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;
@@ -3944,7 +4240,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 {
@@ -3963,10 +4259,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;
@@ -6620,7 +6929,6 @@ var resolveSelectedChatModel = ({
 var resolveSendSession = ({
   activeSessionId,
   selectedModel,
-  selectedMode,
   nowIso: nowIso2,
   createSessionId
 }) => {
@@ -6632,7 +6940,6 @@ var resolveSendSession = ({
   }
   const session = createDraftChatSession({
     model: selectedModel,
-    mode: selectedMode ?? DEFAULT_CHAT_AGENT_MODE,
     nowIso: nowIso2,
     createSessionId
   });
@@ -6790,9 +7097,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
@@ -6813,7 +7117,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);
@@ -6894,12 +7197,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([]);
@@ -7107,7 +7406,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;
       }
@@ -7115,7 +7414,6 @@ var useChatComposer = () => {
       const { localSessionId, sessionId, session } = resolveSendSession({
         activeSessionId: currentActiveSessionId,
         selectedModel: resolvedModel,
-        selectedMode: currentMode,
         nowIso,
         createSessionId: createDraftChatSessionId
       });
@@ -7263,8 +7561,6 @@ var useChatComposer = () => {
       setSelectedMode: (mode) => {
         setSelectedModeLocal(mode);
         setPreferredMode(mode);
-        if (activeSessionId)
-          setSessionMode(activeSessionId, mode);
         if (activeSessionId) {
           const previousRequest = lastRequestBySessionRef.current.get(activeSessionId);
           if (previousRequest) {
@@ -7754,7 +8050,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"};
@@ -7765,7 +8061,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"};
     }
@@ -7833,7 +8129,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;
@@ -8068,6 +8364,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();
@@ -8345,7 +8645,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;
@@ -8606,36 +8906,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 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,
-        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;
@@ -8649,51 +8941,178 @@ 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 = ({
+  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";
+import { jsx as jsx18, jsxs as jsxs12 } 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 modeLabels = {
-    ask: labels.modeLabelAsk,
-    plan: labels.modeLabelPlan,
-    agent: labels.modeLabelAgent
+  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 persistedLocalSessions = localSessions.filter(
+      (session) => !isDraftChatSessionId(session.sessionId)
+    );
+    const localSessionIds = new Set(persistedLocalSessions.map((session) => session.sessionId));
+    return [
+      ...persistedLocalSessions,
+      ...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;
+      });
+    }
   };
-  return /* @__PURE__ */ jsxs13(Container3, { children: [
-    /* @__PURE__ */ jsxs13(Toolbar, { children: [
-      /* @__PURE__ */ jsx18(Title3, { children: "Sessions" }),
+  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)
+      );
+    }
+  };
+  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__ */ 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__ */ jsxs12(List2, { "data-testid": "chat-session-list", onScroll: handleSessionListScroll, children: [
+      sessions.map((session) => /* @__PURE__ */ jsx18(
+        ChatSessionItem,
+        {
+          session,
+          isActive: activeSessionId === session.sessionId,
+          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`
@@ -8716,13 +9135,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;
@@ -8731,9 +9169,14 @@ 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";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
 var NewTalkIcon = () => /* @__PURE__ */ jsx19(
   "svg",
   {
@@ -8744,7 +9187,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)",
@@ -8753,7 +9196,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" })
           ] }),
@@ -8792,12 +9235,12 @@ var AiChatWorkspaceContent = ({
     })
   );
   const shouldShowComposerOnly = showComposerOnlyBeforeFirstMessage && !showConversationList && !isConversationStarted;
-  useEffect10(() => {
+  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, {})
@@ -8931,12 +9374,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;