💄 style: remember page agent panel width (#11389)

remember editor width

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>
   );

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={{

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: {

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,