pass down file type to container

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

@@ -27,19 +27,17 @@ export const ChatLayout: React.FC<ChatSplitterProps> = React.memo(
     }, [selectedLayout]);
 
     const useChatSplitterProps = useChatLayout({ selectedFile });
-    const { onSetSelectedFile, hasFile, selectedFileId } = useChatSplitterProps;
+    const { onSetSelectedFile, hasFile } = useChatSplitterProps;
 
     useUpdateEffect(() => {
       if (appSplitterRef.current) {
+        const { animateWidth, isSideClosed } = appSplitterRef.current;
         if (selectedLayout === 'chat') {
-          appSplitterRef.current?.animateWidth('100%', 'left');
+          animateWidth('100%', 'left');
         } else if (selectedLayout === 'file') {
-          appSplitterRef.current?.animateWidth('100%', 'right');
-        } else if (
-          selectedLayout === 'both' &&
-          (appSplitterRef.current.isRightClosed || appSplitterRef.current.isLeftClosed)
-        ) {
-          appSplitterRef.current?.animateWidth('320px', 'left');
+          animateWidth('100%', 'right');
+        } else if (selectedLayout === 'both' && (isSideClosed('right') || isSideClosed('left'))) {
+          animateWidth('320px', 'left');
         }
       }
 
@@ -55,11 +53,10 @@ export const ChatLayout: React.FC<ChatSplitterProps> = React.memo(
         <AppSplitter
           ref={appSplitterRef}
           leftChildren={isPureFile ? null : <ChatContainer />}
-          rightChildren={!selectedFileId ? null : <FileContainer />}
+          rightChildren={<FileContainer />}
           autoSaveId="chat-splitter"
           defaultLayout={defaultSplitterLayout}
           preserveSide="left"
-          rightHidden={!hasFile}
           leftPanelMaxSize={hasFile ? 625 : undefined}
           leftPanelMinSize={hasFile ? 250 : undefined}
           rightPanelMinSize={450}

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

@@ -11,18 +11,15 @@ interface UseChatSplitterProps {
 }
 
 export const useChatLayout = ({ selectedFile: selectedFileProp }: UseChatSplitterProps) => {
-  const [selectedFileId, setSelectedFileId] = useState<string | undefined>(selectedFileProp?.id);
-
+  const selectedFileId = selectedFileProp?.id;
+  const selectedFileType = selectedFileProp?.type;
   const hasFile = !!selectedFileId;
 
   const selectedFileTitle: string = useMemo(() => {
-    console.log('selectedFileId', selectedFileId);
     if (!selectedFileId) return '';
     return 'test';
   }, [selectedFileId]);
 
-  const selectedFileType = selectedFileProp?.type;
-
   const onSetSelectedFile = (file: SelectedFile) => {
     // setSelectedFileId(file.id);
   };

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

@@ -1,11 +1,36 @@
 import React from 'react';
-import type { ChatSplitterProps } from '../ChatLayout';
-import { SelectedFile } from '../interfaces';
+import { useChatSplitterContextSelector } from '../ChatLayoutContext';
+import { AnimatePresence, motion } from 'framer-motion';
 
 interface FileContainerProps {}
 
+const animation = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+  transition: { duration: 0.15 }
+};
+
 export const FileContainer: React.FC<FileContainerProps> = React.memo(({}) => {
-  return <div className="h-full w-full bg-green-500">FileContainer</div>;
+  const selectedFileId = useChatSplitterContextSelector((state) => state.selectedFileId);
+  const selectedFileType = useChatSplitterContextSelector((state) => state.selectedFileType);
+
+  const hasFile = !!selectedFileId;
+
+  return (
+    <div className="h-full w-full bg-blue-300">
+      <AnimatePresence mode="wait" initial={false}>
+        {hasFile ? (
+          <motion.div key={'file-container'} {...animation} className={`h-full w-full`}>
+            <div
+              className={`h-[300px] w-[200px] ${selectedFileType === 'metric' ? 'bg-green-500' : 'bg-red-500'}`}>
+              {selectedFileType}
+            </div>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </div>
+  );
 });
 
 FileContainer.displayName = 'FileContainer';

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

@@ -25,8 +25,7 @@ import { createStyles } from 'antd-style';
 export interface AppSplitterRef {
   setSplitSizes: (newSizes: (number | string)[]) => void;
   animateWidth: (width: string, side: 'left' | 'right', duration?: number) => Promise<void>;
-  isLeftClosed: boolean;
-  isRightClosed: boolean;
+  isSideClosed: (side: 'left' | 'right') => boolean;
 }
 
 export const AppSplitter = React.memo(
@@ -100,13 +99,12 @@ export const AppSplitter = React.memo(
         };
       }, [rightHidden]);
 
-      const isLeftClosed = useMemo(() => {
-        return _sizes[0] === '0px' || _sizes[0] === '0%' || _sizes[0] === 0;
-      }, [_sizes]);
-
-      const isRightClosed = useMemo(() => {
+      const isSideClosed = useMemoizedFn((side: 'left' | 'right') => {
+        if (side === 'left') {
+          return _sizes[0] === '0px' || _sizes[0] === '0%' || _sizes[0] === 0;
+        }
         return _sizes[1] === '0px' || _sizes[1] === '0%' || _sizes[1] === 0;
-      }, [_sizes]);
+      });
 
       const sashRender = useMemoizedFn((_: number, active: boolean) => (
         <AppSplitterSash
@@ -230,10 +228,9 @@ export const AppSplitter = React.memo(
         return () => ({
           setSplitSizes,
           animateWidth,
-          isLeftClosed,
-          isRightClosed
+          isSideClosed
         });
-      }, [setSplitSizes, animateWidth, isLeftClosed, isRightClosed]);
+      }, [setSplitSizes, animateWidth, isSideClosed]);
 
       // Add useImperativeHandle to expose the function
       useImperativeHandle(ref, imperativeHandleMethods);