From 8b21e0d50c4ee25fa4f31a13f8a01f5201abc9d8 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Fri, 24 Jan 2025 13:36:39 -0700
Subject: [PATCH] chat file headers

---
 .../ChatSplitter/ChatContainer.tsx            | 18 --------
 .../ChatContainer/ChatContainer.tsx           | 23 ++++++++++
 .../ChatContainerContentContainer.tsx         |  5 +++
 .../ChatContainerHeader.tsx                   | 34 +++++++++++++++
 .../ChatContainerHeaderOptions.tsx            | 13 ++++++
 .../ChatContainerHeaderTitle.tsx              | 16 +++++++
 .../ChatContainerHeader/index.ts              |  1 +
 .../ChatSplitter/ChatContainer/index.ts       |  1 +
 .../_components/ChatSplitter/ChatSplitter.tsx | 43 ++++++++-----------
 .../ChatSplitterContext.tsx                   |  1 -
 .../ChatSplitter/ChatSplitterContext/index.ts |  1 +
 .../ChatSplitterContext/useChatSplitter.ts    | 10 +++--
 .../{ => FileContainer}/FileContainer.tsx     |  4 +-
 .../ChatSplitter/FileContainer/index.ts       |  1 +
 web/src/app/test/splitter/page.tsx            |  7 ++-
 15 files changed, 127 insertions(+), 51 deletions(-)
 delete mode 100644 web/src/app/app/_components/ChatSplitter/ChatContainer.tsx
 create mode 100644 web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainer.tsx
 create mode 100644 web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerContentContainer.tsx
 create mode 100644 web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerHeader/ChatContainerHeader.tsx
 create mode 100644 web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerHeader/ChatContainerHeaderOptions.tsx
 create mode 100644 web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerHeader/ChatContainerHeaderTitle.tsx
 create mode 100644 web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerHeader/index.ts
 create mode 100644 web/src/app/app/_components/ChatSplitter/ChatContainer/index.ts
 rename web/src/app/app/_components/ChatSplitter/{ => FileContainer}/FileContainer.tsx (75%)
 create mode 100644 web/src/app/app/_components/ChatSplitter/FileContainer/index.ts

diff --git a/web/src/app/app/_components/ChatSplitter/ChatContainer.tsx b/web/src/app/app/_components/ChatSplitter/ChatContainer.tsx
deleted file mode 100644
index 4ad2797f4..000000000
--- a/web/src/app/app/_components/ChatSplitter/ChatContainer.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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 }) => {
-  return (
-    <div className="h-full w-full bg-red-500">
-      {/* <Button onClick={onToggleClick}>Toggle {toggleClose.toString()}</Button> */}
-    </div>
-  );
-});
-
-ChatContainer.displayName = 'ChatContainer';
diff --git a/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainer.tsx b/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainer.tsx
new file mode 100644
index 000000000..bf8f19e26
--- /dev/null
+++ b/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainer.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ChatSplitterProps } from '../ChatSplitter';
+import { ChatContainerHeader } from './ChatContainerHeader';
+import { SelectedFile } from '../interfaces';
+import { ChatContainerContentContainer } from './ChatContainerContentContainer';
+
+interface ChatContainerProps {
+  chatContent: ChatSplitterProps['chatContent'];
+  selectedFile: SelectedFile | undefined;
+}
+
+export const ChatContainer: React.FC<ChatContainerProps> = React.memo(
+  ({ chatContent, selectedFile }) => {
+    return (
+      <div className="flex h-full w-full flex-col">
+        <ChatContainerHeader selectedFile={selectedFile} />
+        <ChatContainerContentContainer />
+      </div>
+    );
+  }
+);
+
+ChatContainer.displayName = 'ChatContainer';
diff --git a/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerContentContainer.tsx b/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerContentContainer.tsx
new file mode 100644
index 000000000..fbc8fa46b
--- /dev/null
+++ b/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerContentContainer.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const ChatContainerContentContainer: React.FC = () => {
+  return <div className="h-full w-full bg-red-200">ChatContainerContentContainer</div>;
+};
diff --git a/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerHeader/ChatContainerHeader.tsx b/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerHeader/ChatContainerHeader.tsx
new file mode 100644
index 000000000..7b3488524
--- /dev/null
+++ b/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerHeader/ChatContainerHeader.tsx
@@ -0,0 +1,34 @@
+import { appContentHeaderHeight } from '@/components/layout/AppContentHeader';
+import { createStyles } from 'antd-style';
+import React from 'react';
+import { SelectedFile } from '../../interfaces';
+import { useChatSplitterContextSelector } from '../../ChatSplitterContext';
+import { Text } from '@/components/text';
+import { ChatContainerHeaderOptions } from './ChatContainerHeaderOptions';
+import { ChatContainerHeaderTitle } from './ChatContainerHeaderTitle';
+
+export const ChatContainerHeader: React.FC<{
+  selectedFile: SelectedFile | undefined;
+}> = React.memo(({ selectedFile }) => {
+  const { cx, styles } = useStyles();
+  const hasFile = useChatSplitterContextSelector((state) => state.hasFile);
+
+  return (
+    <div className={cx('flex w-full items-center justify-between space-x-2 px-4', styles.header)}>
+      {hasFile && (
+        <>
+          <ChatContainerHeaderTitle />
+          <ChatContainerHeaderOptions />
+        </>
+      )}
+    </div>
+  );
+});
+
+ChatContainerHeader.displayName = 'ChatContainerHeader';
+
+const useStyles = createStyles(({ token }) => ({
+  header: {
+    height: appContentHeaderHeight
+  }
+}));
diff --git a/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerHeader/ChatContainerHeaderOptions.tsx b/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerHeader/ChatContainerHeaderOptions.tsx
new file mode 100644
index 000000000..bd323e3be
--- /dev/null
+++ b/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerHeader/ChatContainerHeaderOptions.tsx
@@ -0,0 +1,13 @@
+import { AppMaterialIcons } from '@/components';
+import { Button } from 'antd';
+import React from 'react';
+
+export const ChatContainerHeaderOptions: React.FC<{}> = React.memo(() => {
+  return (
+    <div>
+      <Button type="text" icon={<AppMaterialIcons icon="more_horiz" />} />
+    </div>
+  );
+});
+
+ChatContainerHeaderOptions.displayName = 'ChatContainerHeaderOptions';
diff --git a/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerHeader/ChatContainerHeaderTitle.tsx b/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerHeader/ChatContainerHeaderTitle.tsx
new file mode 100644
index 000000000..9aa0a1152
--- /dev/null
+++ b/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerHeader/ChatContainerHeaderTitle.tsx
@@ -0,0 +1,16 @@
+import { Text } from '@/components/text';
+import React from 'react';
+import { useChatSplitterContextSelector } from '../../ChatSplitterContext';
+
+export const ChatContainerHeaderTitle: React.FC<{}> = React.memo(() => {
+  const hasFile = useChatSplitterContextSelector((state) => state.hasFile);
+  const selectedFileTitle = useChatSplitterContextSelector((state) => state.selectedFileTitle);
+
+  return (
+    <div className="flex items-center">
+      <Text>{selectedFileTitle}</Text>
+    </div>
+  );
+});
+
+ChatContainerHeaderTitle.displayName = 'ChatContainerHeaderTitle';
diff --git a/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerHeader/index.ts b/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerHeader/index.ts
new file mode 100644
index 000000000..105773d6c
--- /dev/null
+++ b/web/src/app/app/_components/ChatSplitter/ChatContainer/ChatContainerHeader/index.ts
@@ -0,0 +1 @@
+export * from './ChatContainerHeader';
diff --git a/web/src/app/app/_components/ChatSplitter/ChatContainer/index.ts b/web/src/app/app/_components/ChatSplitter/ChatContainer/index.ts
new file mode 100644
index 000000000..659831d1f
--- /dev/null
+++ b/web/src/app/app/_components/ChatSplitter/ChatContainer/index.ts
@@ -0,0 +1 @@
+export * from './ChatContainer';
diff --git a/web/src/app/app/_components/ChatSplitter/ChatSplitter.tsx b/web/src/app/app/_components/ChatSplitter/ChatSplitter.tsx
index 8d0928bf0..92b7dd377 100644
--- a/web/src/app/app/_components/ChatSplitter/ChatSplitter.tsx
+++ b/web/src/app/app/_components/ChatSplitter/ChatSplitter.tsx
@@ -1,51 +1,44 @@
-import React, { useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { AppSplitter, AppSplitterRef } from '@/components/layout/AppSplitter';
-import { AppChatMessageFileType } from '@/components/messages/AppChatMessageContainer';
 import { ChatContainer } from './ChatContainer';
 import { FileContainer } from './FileContainer';
-import { useUpdateEffect } from 'ahooks';
 import { ChatSplitterContextProvider } from './ChatSplitterContext';
-import { useChatSplitter } from './ChatSplitterContext/useChatSplitter';
+import { useChatSplitter } from './ChatSplitterContext';
 import { SelectedFile } from './interfaces';
 
 export interface ChatSplitterProps {
-  chatHeaderText: string;
   chatHeaderOptions?: [];
   chatContent?: React.ReactNode;
-  fileHeader?: React.ReactNode;
-  defaultShowFile?: boolean;
+  showChatCollapse?: boolean;
+  defaultShowLayout?: 'chat' | 'file' | 'both';
   defaultSelectedFile?: SelectedFile;
 }
 
 export const ChatSplitter: React.FC<ChatSplitterProps> = React.memo(
-  ({
-    chatHeaderText,
-    defaultShowFile = false,
-    defaultSelectedFile,
-    chatHeaderOptions,
-    chatContent,
-    fileHeader
-  }) => {
+  ({ defaultSelectedFile, defaultShowLayout = 'chat', chatHeaderOptions, chatContent }) => {
     const appSplitterRef = useRef<AppSplitterRef>(null);
 
     const defaultLayout = useMemo(() => {
-      return defaultShowFile ? ['20%', '80%'] : ['100%', '0%'];
-    }, [defaultShowFile]);
+      if (defaultShowLayout === 'chat') {
+        return ['100%', '0%'];
+      }
+      if (defaultShowLayout === 'file') {
+        return ['0%', '100%'];
+      }
+      return ['325px', 'auto'];
+    }, [defaultShowLayout]);
 
-    const useChatSplitterProps = useChatSplitter({ defaultSelectedFile, appSplitterRef });
+    const useChatSplitterProps = useChatSplitter({
+      defaultSelectedFile,
+      appSplitterRef
+    });
     const { selectedFile, hasFile } = useChatSplitterProps;
 
     return (
       <ChatSplitterContextProvider useChatSplitterProps={useChatSplitterProps}>
         <AppSplitter
           ref={appSplitterRef}
-          leftChildren={
-            <ChatContainer
-              chatHeaderText={chatHeaderText}
-              chatHeaderOptions={chatHeaderOptions}
-              chatContent={chatContent}
-            />
-          }
+          leftChildren={<ChatContainer selectedFile={selectedFile} chatContent={chatContent} />}
           rightChildren={<FileContainer selectedFile={selectedFile} />}
           autoSaveId="chat-splitter"
           defaultLayout={defaultLayout}
diff --git a/web/src/app/app/_components/ChatSplitter/ChatSplitterContext/ChatSplitterContext.tsx b/web/src/app/app/_components/ChatSplitter/ChatSplitterContext/ChatSplitterContext.tsx
index 8c330d2b6..61c7625fe 100644
--- a/web/src/app/app/_components/ChatSplitter/ChatSplitterContext/ChatSplitterContext.tsx
+++ b/web/src/app/app/_components/ChatSplitter/ChatSplitterContext/ChatSplitterContext.tsx
@@ -5,7 +5,6 @@ import {
   useContextSelector
 } from '@fluentui/react-context-selector';
 import { useChatSplitter } from './useChatSplitter';
-import { AppSplitterRef } from '@/components/layout/AppSplitter';
 
 const ChatSplitterContext = createContext<ReturnType<typeof useChatSplitter>>(
   {} as ReturnType<typeof useChatSplitter>
diff --git a/web/src/app/app/_components/ChatSplitter/ChatSplitterContext/index.ts b/web/src/app/app/_components/ChatSplitter/ChatSplitterContext/index.ts
index cca09d245..e9379a144 100644
--- a/web/src/app/app/_components/ChatSplitter/ChatSplitterContext/index.ts
+++ b/web/src/app/app/_components/ChatSplitter/ChatSplitterContext/index.ts
@@ -1 +1,2 @@
 export * from './ChatSplitterContext';
+export * from './useChatSplitter';
diff --git a/web/src/app/app/_components/ChatSplitter/ChatSplitterContext/useChatSplitter.ts b/web/src/app/app/_components/ChatSplitter/ChatSplitterContext/useChatSplitter.ts
index bbfb8b58c..604fa998f 100644
--- a/web/src/app/app/_components/ChatSplitter/ChatSplitterContext/useChatSplitter.ts
+++ b/web/src/app/app/_components/ChatSplitter/ChatSplitterContext/useChatSplitter.ts
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { SelectedFile } from '../interfaces';
 import { useUpdateEffect } from 'ahooks';
 import type { AppSplitterRef } from '@/components/layout/AppSplitter';
@@ -14,6 +14,11 @@ export const useChatSplitter = ({ appSplitterRef, defaultSelectedFile }: UseChat
 
   const hasFile = !!selectedFile;
 
+  const selectedFileTitle: string = useMemo(() => {
+    if (!selectedFile) return '';
+    return 'This is a test';
+  }, [selectedFile]);
+
   const onSetSelectedFile = (file: SelectedFile) => {
     setSelectedFile(file);
   };
@@ -25,13 +30,12 @@ export const useChatSplitter = ({ appSplitterRef, defaultSelectedFile }: UseChat
         appSplitterRef.current?.animateWidth('50%', 'right');
       }, 1000);
 
-      //  appSplitterRef.current.animateWidth('200px', 'left');
-
       appSplitterRef.current?.animateWidth('100px', 'right');
     }
   }, [defaultSelectedFile]);
 
   return {
+    selectedFileTitle,
     hasFile,
     selectedFile,
     onSetSelectedFile
diff --git a/web/src/app/app/_components/ChatSplitter/FileContainer.tsx b/web/src/app/app/_components/ChatSplitter/FileContainer/FileContainer.tsx
similarity index 75%
rename from web/src/app/app/_components/ChatSplitter/FileContainer.tsx
rename to web/src/app/app/_components/ChatSplitter/FileContainer/FileContainer.tsx
index 311d7b921..2e12bbf9d 100644
--- a/web/src/app/app/_components/ChatSplitter/FileContainer.tsx
+++ b/web/src/app/app/_components/ChatSplitter/FileContainer/FileContainer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import type { ChatSplitterProps } from './ChatSplitter';
-import { SelectedFile } from './interfaces';
+import type { ChatSplitterProps } from '../ChatSplitter';
+import { SelectedFile } from '../interfaces';
 
 interface FileContainerProps {
   selectedFile: SelectedFile | undefined;
diff --git a/web/src/app/app/_components/ChatSplitter/FileContainer/index.ts b/web/src/app/app/_components/ChatSplitter/FileContainer/index.ts
new file mode 100644
index 000000000..312acb49d
--- /dev/null
+++ b/web/src/app/app/_components/ChatSplitter/FileContainer/index.ts
@@ -0,0 +1 @@
+export * from './FileContainer';
diff --git a/web/src/app/test/splitter/page.tsx b/web/src/app/test/splitter/page.tsx
index 6ff766b2a..f1caa35a6 100644
--- a/web/src/app/test/splitter/page.tsx
+++ b/web/src/app/test/splitter/page.tsx
@@ -11,7 +11,10 @@ export default function Page() {
   const [toggleClose, setToggleClose] = useState(false);
   const ref = useRef<AppSplitterRef>(null);
 
-  const [defaultFile, setDefaultFile] = useState<SelectedFile | undefined>(undefined);
+  const [defaultFile, setDefaultFile] = useState<SelectedFile | undefined>({
+    id: '1',
+    type: 'metric'
+  });
 
   const onToggleClick = useMemoizedFn(() => {
     if (toggleClose) {
@@ -25,7 +28,7 @@ export default function Page() {
 
   return (
     <div className="h-screen w-screen border">
-      <ChatSplitter chatHeaderText="Chat" defaultSelectedFile={defaultFile} />
+      <ChatSplitter defaultShowLayout="both" defaultSelectedFile={defaultFile} />
 
       <Button onClick={() => setDefaultFile({ id: '1', type: 'metric' })}>Set Default File</Button>
     </div>