check if number for chat splitter

web/src/app/app/_components/ChatSplitter/ChatContainer.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
+import type { ChatSplitterProps } from './ChatSplitter';
 
 interface ChatContainerProps {
   chatHeaderText: string;
+  chatHeaderOptions: ChatSplitterProps['chatHeaderOptions'];
+  chatContent: ChatSplitterProps['chatContent'];
 }
 
 export const ChatContainer: React.FC<ChatContainerProps> = React.memo(({ chatHeaderText }) => {

web/src/app/app/_components/ChatSplitter/ChatSplitter.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { AppSplitter, AppSplitterRef } from '@/components/layout/AppSplitter';
 import { AppChatMessageFileType } from '@/components/messages/AppChatMessageContainer';
 import { ChatContainer } from './ChatContainer';
@@ -18,7 +18,14 @@ export interface ChatSplitterProps {
 }
 
 export const ChatSplitter: React.FC<ChatSplitterProps> = React.memo(
-  ({ chatHeaderText, defaultShowFile = false, defaultSelectedFile }) => {
+  ({
+    chatHeaderText,
+    defaultShowFile = false,
+    defaultSelectedFile,
+    chatHeaderOptions,
+    chatContent,
+    fileHeader
+  }) => {
     const appSplitterRef = useRef<AppSplitterRef>(null);
 
     const defaultLayout = useMemo(() => {
@@ -32,7 +39,13 @@ export const ChatSplitter: React.FC<ChatSplitterProps> = React.memo(
       <ChatSplitterContextProvider useChatSplitterProps={useChatSplitterProps}>
         <AppSplitter
           ref={appSplitterRef}
-          leftChildren={<ChatContainer chatHeaderText={chatHeaderText} />}
+          leftChildren={
+            <ChatContainer
+              chatHeaderText={chatHeaderText}
+              chatHeaderOptions={chatHeaderOptions}
+              chatContent={chatContent}
+            />
+          }
           rightChildren={<FileContainer selectedFile={selectedFile} />}
           autoSaveId="chat-splitter"
           defaultLayout={defaultLayout}

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

@@ -166,8 +166,13 @@ export const AppSplitter = React.memo(
             targetPercentage = targetValue;
           }
 
-          const leftPanelSize = _sizes[0];
-          const rightPanelSize = _sizes[1];
+          const bothSizesAreNumber = typeof _sizes[0] === 'number' && typeof _sizes[1] === 'number';
+          const leftPanelSize = bothSizesAreNumber
+            ? `${(Number(_sizes[0]) / (Number(_sizes[0]) + Number(_sizes[1]))) * 100}%`
+            : _sizes[0];
+          const rightPanelSize = bothSizesAreNumber
+            ? `${(Number(_sizes[1]) / (Number(_sizes[0]) + Number(_sizes[1]))) * 100}%`
+            : _sizes[1];
           const currentSize = side === 'left' ? leftPanelSize : rightPanelSize;
           const otherSize = side === 'left' ? rightPanelSize : leftPanelSize;