From 2fe395b5eadfb783f47228ed7d91e5fcaeaab35f Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Fri, 24 Jan 2025 13:05:09 -0700
Subject: [PATCH] check if number for chat splitter

---
 .../ChatSplitter/ChatContainer.tsx            |  3 +++
 .../_components/ChatSplitter/ChatSplitter.tsx | 19 ++++++++++++++++---
 .../layout/AppSplitter/AppSplitter.tsx        |  9 +++++++--
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/web/src/app/app/_components/ChatSplitter/ChatContainer.tsx b/web/src/app/app/_components/ChatSplitter/ChatContainer.tsx
index b6ccfb4a8..4ad2797f4 100644
--- a/web/src/app/app/_components/ChatSplitter/ChatContainer.tsx
+++ b/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 }) => {
diff --git a/web/src/app/app/_components/ChatSplitter/ChatSplitter.tsx b/web/src/app/app/_components/ChatSplitter/ChatSplitter.tsx
index 919979279..8d0928bf0 100644
--- a/web/src/app/app/_components/ChatSplitter/ChatSplitter.tsx
+++ b/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}
diff --git a/web/src/components/layout/AppSplitter/AppSplitter.tsx b/web/src/components/layout/AppSplitter/AppSplitter.tsx
index 7f00a65d9..cfc0ba63f 100644
--- a/web/src/components/layout/AppSplitter/AppSplitter.tsx
+++ b/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;