close secondary when open primary

web/src/app/app/_controllers/MetricController/MetricController.tsx

@@ -5,6 +5,8 @@ import { useChatLayoutContextSelector } from '../../_layouts/ChatLayout';
 import { AppSplitter, AppSplitterRef } from '@/components';
 import { useMetricControllerLayout } from './useMetricControllerLayout';
 
+const defaultLayout = ['auto', '0px'];
+
 export const MetricController: React.FC<{
   metricId: string;
 }> = React.memo(({ metricId }) => {
@@ -14,7 +16,7 @@ export const MetricController: React.FC<{
     (x) => x.selectedFileViewSecondary
   );
 
-  const { renderSecondary, isOpenSecondary } = useMetricControllerLayout({
+  const { renderSecondary } = useMetricControllerLayout({
     selectedFileViewSecondary,
     appSplitterRef
   });
@@ -26,7 +28,7 @@ export const MetricController: React.FC<{
       rightChildren={<div className="min-w-[230px]">right swag</div>}
       rightHidden={!renderSecondary}
       autoSaveId="metric-controller"
-      defaultLayout={['auto', '0px']}
+      defaultLayout={defaultLayout}
       preserveSide={'right'}
       rightPanelMinSize={250}
       rightPanelMaxSize={360}

web/src/app/app/_controllers/MetricController/useMetricControllerLayout.ts

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import { useMemoizedFn, useUpdateLayoutEffect } from 'ahooks';
 import { type AppSplitterRef } from '@/components/layout';
 
@@ -29,7 +29,6 @@ export const useMetricControllerLayout = ({
   }, [isOpenSecondary]);
 
   return {
-    renderSecondary,
-    isOpenSecondary
+    renderSecondary
   };
 };

web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx

@@ -41,6 +41,7 @@ export const useChatLayout = ({
         animateWidth(DEFAULT_CHAT_OPTION, 'left');
         setIsPureChat(false);
         setIsPureFile(false);
+        fileLayoutContext?.closeSecondaryView();
       }
     }
   });

web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/useChatFileLayout/useChatFileLayout.ts

@@ -2,6 +2,7 @@ import { FileType } from '@/api/asset_interfaces';
 import { useMemo, useState } from 'react';
 import { FileConfig, FileView, FileViewConfig, FileViewSecondary } from './interfaces';
 import { useMemoizedFn } from 'ahooks';
+import { produce } from 'immer';
 
 export const useChatFileLayout = ({
   selectedFileId,
@@ -67,11 +68,22 @@ export const useChatFileLayout = ({
     return selectedFileViewConfig?.[selectedFileView]?.secondaryView ?? null;
   }, [selectedFileViewConfig, selectedFileId, selectedFileView]);
 
+  const closeSecondaryView = useMemoizedFn(() => {
+    if (!selectedFileId || !selectedFileViewConfig || !selectedFileView) return;
+    setFileViews(
+      produce((draft) => {
+        if (!draft[selectedFileId]?.fileViewConfig?.[selectedFileView]) return;
+        draft[selectedFileId].fileViewConfig[selectedFileView].secondaryView = null;
+      })
+    );
+  });
+
   return {
     selectedFileType,
     selectedFileView,
     selectedFileViewSecondary,
-    onSetFileView
+    onSetFileView,
+    closeSecondaryView
   };
 };
 

web/src/components/layout/AppSplitter/AppSplitter.tsx

@@ -26,6 +26,7 @@ export interface AppSplitterRef {
   setSplitSizes: (newSizes: (number | string)[]) => void;
   animateWidth: (width: string, side: 'left' | 'right', duration?: number) => Promise<void>;
   isSideClosed: (side: 'left' | 'right') => boolean;
+  sizes: (number | string)[];
 }
 
 export const AppSplitter = React.memo(
@@ -228,9 +229,10 @@ export const AppSplitter = React.memo(
         return () => ({
           setSplitSizes,
           animateWidth,
-          isSideClosed
+          isSideClosed,
+          sizes: _sizes
         });
-      }, [setSplitSizes, animateWidth, isSideClosed]);
+      }, [setSplitSizes, animateWidth, isSideClosed, _sizes]);
 
       // Add useImperativeHandle to expose the function
       useImperativeHandle(ref, imperativeHandleMethods);