@lobehub/lobehub 2.0.0-next.256 → 2.0.0-next.257

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 2.0.0-next.257](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.256...v2.0.0-next.257)
+
+<sup>Released on **2026-01-10**</sup>
+
+#### 💄 Styles
+
+- **misc**: Remember page agent panel width.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Remember page agent panel width, closes [#11389](https://github.com/lobehub/lobe-chat/issues/11389) ([801b624](https://github.com/lobehub/lobe-chat/commit/801b624))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.256](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.255...v2.0.0-next.256)
 
 <sup>Released on **2026-01-10**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Remember page agent panel width."
+      ]
+    },
+    "date": "2026-01-10",
+    "version": "2.0.0-next.257"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.256",
+  "version": "2.0.0-next.257",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/features/PageEditor/Copilot/index.tsx

@@ -5,6 +5,8 @@ import { memo } from 'react';
 import RightPanel from '@/features/RightPanel';
 import { useAgentStore } from '@/store/agent';
 import { builtinAgentSelectors } from '@/store/agent/selectors';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
 
 import Conversation from './Conversation';
 
@@ -13,9 +15,22 @@ import Conversation from './Conversation';
  */
 const Copilot = memo(() => {
   const pageAgentId = useAgentStore(builtinAgentSelectors.pageAgentId);
+  const [width, updateSystemStatus] = useGlobalStore((s) => [
+    systemStatusSelectors.pageAgentPanelWidth(s),
+    s.updateSystemStatus,
+  ]);
 
+  console.log('defaultWidth:', width);
   return (
-    <RightPanel>
+    <RightPanel
+      defaultWidth={width}
+      onSizeChange={(size) => {
+        if (size?.width) {
+          const w = typeof size.width === 'string' ? Number.parseInt(size.width) : size.width;
+          if (!!w) updateSystemStatus({ pageAgentPanelWidth: w });
+        }
+      }}
+    >
       <Conversation agentId={pageAgentId} />
     </RightPanel>
   );

package/src/features/RightPanel/index.tsx

@@ -6,15 +6,21 @@ import Loading from '@/components/Loading/BrandTextLoading';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 
+export interface Size {
+  height?: string | number;
+  width?: string | number;
+}
+
 interface RightPanelProps extends Omit<
   DraggablePanelProps,
   'placement' | 'size' | 'onSizeChange' | 'onExpandChange'
 > {
   defaultWidth?: number | string;
+  onSizeChange?: (size?: Size) => void;
 }
 
 const RightPanel = memo<RightPanelProps>(
-  ({ maxWidth = 600, minWidth = 300, children, defaultWidth = 360, ...rest }) => {
+  ({ maxWidth = 600, minWidth = 300, children, defaultWidth = 360, onSizeChange, ...rest }) => {
     const [showRightPanel, toggleRightPanel] = useGlobalStore((s) => [
       systemStatusSelectors.showRightPanel(s),
       s.toggleRightPanel,
@@ -31,7 +37,10 @@ const RightPanel = memo<RightPanelProps>(
         minWidth={minWidth}
         onExpandChange={(expand) => toggleRightPanel(expand)}
         onSizeChange={(_, size) => {
-          if (size?.width) setWidth(size.width);
+          if (size?.width) {
+            setWidth(size.width);
+          }
+          if (size) onSizeChange?.(size);
         }}
         placement="right"
         size={{

package/src/store/chat/slices/portal/initialState.ts

@@ -16,7 +16,7 @@ export enum PortalViewType {
   MessageDetail = 'messageDetail',
   Notebook = 'notebook',
   Thread = 'thread',
-  ToolUI = 'toolUI'
+  ToolUI = 'toolUI',
 }
 
 export interface PortalFile {
@@ -27,21 +27,21 @@ export interface PortalFile {
 
 export type PortalViewData =
   | { type: PortalViewType.Home }
-  | { artifact: PortalArtifact, type: PortalViewType.Artifact; }
-  | { documentId: string, type: PortalViewType.Document; }
+  | { artifact: PortalArtifact; type: PortalViewType.Artifact }
+  | { documentId: string; type: PortalViewType.Document }
   | { type: PortalViewType.Notebook }
-  | { file: PortalFile, type: PortalViewType.FilePreview; }
-  | { messageId: string, type: PortalViewType.MessageDetail; }
-  | { identifier: string, messageId: string; type: PortalViewType.ToolUI; }
-  | { startMessageId?: string, threadId?: string; type: PortalViewType.Thread; }
-  | { agentId: string, type: PortalViewType.GroupThread; };
+  | { file: PortalFile; type: PortalViewType.FilePreview }
+  | { messageId: string; type: PortalViewType.MessageDetail }
+  | { identifier: string; messageId: string; type: PortalViewType.ToolUI }
+  | { startMessageId?: string; threadId?: string; type: PortalViewType.Thread }
+  | { agentId: string; type: PortalViewType.GroupThread };
 
 // ============== Portal State ==============
 
 export interface ChatPortalState {
   // Legacy fields (kept for backward compatibility during migration)
-// TODO: Remove after Phase 3 migration complete
-/** @deprecated Use portalStack instead */
+  // TODO: Remove after Phase 3 migration complete
+  /** @deprecated Use portalStack instead */
   portalArtifact?: PortalArtifact;
   portalArtifactDisplayMode: ArtifactDisplayMode;
   /** @deprecated Use portalStack instead */

package/src/store/chat/slices/portal/selectors.ts

@@ -109,7 +109,7 @@ const messageDetailId = (s: ChatStoreState): string | undefined => {
 // Tool UI / Plugin selectors
 const currentToolUI = (
   s: ChatStoreState,
-): { identifier: string, messageId: string; } | undefined => {
+): { identifier: string; messageId: string } | undefined => {
   const view = getViewData(s, PortalViewType.ToolUI);
   if (view) {
     return { identifier: view.identifier, messageId: view.messageId };

package/src/store/document/slices/editor/index.ts

@@ -6,5 +6,5 @@ export {
   type EditorState,
   initialEditorState,
 } from './initialState';
-export { type DocumentDispatch,documentReducer } from './reducer';
+export { type DocumentDispatch, documentReducer } from './reducer';
 export { editorSelectors } from './selectors';

package/src/store/global/initialState.ts

@@ -122,6 +122,7 @@ export interface SystemStatus {
    */
   modelSwitchPanelWidth?: number;
   noWideScreen?: boolean;
+  pageAgentPanelWidth?: number;
   /**
    * number of pages (documents) to display per page
    */
@@ -198,6 +199,7 @@ export const INITIAL_STATUS = {
   modelSwitchPanelGroupMode: 'byProvider',
   modelSwitchPanelWidth: 430,
   noWideScreen: true,
+  pageAgentPanelWidth: 360,
   pagePageSize: 20,
   portalWidth: 400,
   resourceManagerColumnWidths: {

package/src/store/global/selectors/systemStatus.ts

@@ -27,6 +27,7 @@ const language = (s: GlobalState) => s.status.language || 'auto';
 const modelSwitchPanelGroupMode = (s: GlobalState) =>
   s.status.modelSwitchPanelGroupMode || 'byProvider';
 const modelSwitchPanelWidth = (s: GlobalState) => s.status.modelSwitchPanelWidth || 430;
+const pageAgentPanelWidth = (s: GlobalState) => s.status.pageAgentPanelWidth || 360;
 
 const showChatHeader = (s: GlobalState) => !s.status.zenMode;
 const inZenMode = (s: GlobalState) => s.status.zenMode;
@@ -76,6 +77,7 @@ export const systemStatusSelectors = {
   mobileShowTopic,
   modelSwitchPanelGroupMode,
   modelSwitchPanelWidth,
+  pageAgentPanelWidth,
   pagePageSize,
   portalWidth,
   sessionGroupKeys,