From 905e70e3c5a25b457f5b4bb669301c54ac6e5b3e Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Wed, 5 Mar 2025 17:05:34 -0700
Subject: [PATCH] chat layout update

---
 .../ChatContainer/ChatContent/ChatContent.tsx      |  5 ++---
 .../ChatContent/ChatInput/ChatInput.tsx            |  2 +-
 .../layouts/ChatLayout/ChatContext/ChatContext.tsx | 13 ++++++-------
 .../ChatLayout/{ => ChatLayout}/ChatLayout.tsx     | 14 +++++++-------
 web/src/layouts/ChatLayout/ChatLayout/index.ts     |  1 +
 5 files changed, 17 insertions(+), 18 deletions(-)
 rename web/src/layouts/ChatLayout/{ => ChatLayout}/ChatLayout.tsx (83%)
 create mode 100644 web/src/layouts/ChatLayout/ChatLayout/index.ts

diff --git a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx
index 3d285d4f2..e94582b4a 100644
--- a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx
+++ b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx
@@ -5,12 +5,11 @@ import { useChatIndividualContextSelector } from '../../ChatContext';
 import { ChatMessageBlock } from './ChatMessageBlock';
 import { ChatInput } from './ChatInput';
 
+const autoClass = 'mx-auto max-w-[600px] w-full';
+
 export const ChatContent: React.FC<{ chatContentRef: React.RefObject<HTMLDivElement> }> =
   React.memo(({ chatContentRef }) => {
     const chatMessageIds = useChatIndividualContextSelector((state) => state.chatMessageIds);
-    // const chatMessages = useBusterChatContextSelector((state) => state.chatsMessages);
-
-    const autoClass = 'mx-auto max-w-[600px] w-full';
 
     return (
       <div className="flex h-full w-full flex-col overflow-hidden">
diff --git a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/ChatInput.tsx b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/ChatInput.tsx
index 4925190f1..1391c4c6f 100644
--- a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/ChatInput.tsx
+++ b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/ChatInput.tsx
@@ -11,7 +11,7 @@ const autoResizeConfig = { minRows: 3, maxRows: 16 };
 
 export const ChatInput: React.FC<{}> = React.memo(({}) => {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
-  const loading = useChatIndividualContextSelector((x) => x.isLoading);
+  const loading = useChatIndividualContextSelector((x) => x.isStreamingMessage);
   const [inputValue, setInputValue] = useState('');
 
   const disableSubmit = useMemo(() => {
diff --git a/web/src/layouts/ChatLayout/ChatContext/ChatContext.tsx b/web/src/layouts/ChatLayout/ChatContext/ChatContext.tsx
index 1cd5bb249..2f1a16330 100644
--- a/web/src/layouts/ChatLayout/ChatContext/ChatContext.tsx
+++ b/web/src/layouts/ChatLayout/ChatContext/ChatContext.tsx
@@ -6,8 +6,8 @@ import {
 } from '@fluentui/react-context-selector';
 import type { SelectedFile } from '../interfaces';
 import { useAutoChangeLayout } from './useAutoChangeLayout';
-import { useMessageIndividual } from '@/context/Chats';
 import { useGetChat } from '@/api/buster_rest/chats';
+import { useMessageIndividual } from '@/context/Chats';
 
 export const useChatIndividualContext = ({
   chatId,
@@ -23,7 +23,6 @@ export const useChatIndividualContext = ({
 
   //CHAT
   const { data: chat } = useGetChat({ id: chatId || '' });
-
   const hasChat = !!chatId && !!chat;
   const chatTitle = chat?.title;
   const chatMessageIds = chat?.message_ids ?? [];
@@ -33,7 +32,7 @@ export const useChatIndividualContext = ({
 
   //MESSAGES
   const currentMessageId = chatMessageIds[chatMessageIds.length - 1];
-  const isLoading = useMessageIndividual(currentMessageId, (x) => !x?.isCompletedStream);
+  const isStreamingMessage = useMessageIndividual(currentMessageId, (x) => !x?.isCompletedStream);
 
   useAutoChangeLayout({
     lastMessageId: currentMessageId,
@@ -50,23 +49,23 @@ export const useChatIndividualContext = ({
       selectedFileType,
       chatMessageIds,
       chatId,
-      isLoading
+      isStreamingMessage
     }),
     [
       hasChat,
       hasFile,
+      isStreamingMessage,
       selectedFileId,
       currentMessageId,
       chatTitle,
       selectedFileType,
       chatMessageIds,
-      chatId,
-      isLoading
+      chatId
     ]
   );
 };
 
-export const IndividualChatContext = createContext<ReturnType<typeof useChatIndividualContext>>(
+const IndividualChatContext = createContext<ReturnType<typeof useChatIndividualContext>>(
   {} as ReturnType<typeof useChatIndividualContext>
 );
 
diff --git a/web/src/layouts/ChatLayout/ChatLayout.tsx b/web/src/layouts/ChatLayout/ChatLayout/ChatLayout.tsx
similarity index 83%
rename from web/src/layouts/ChatLayout/ChatLayout.tsx
rename to web/src/layouts/ChatLayout/ChatLayout/ChatLayout.tsx
index 880bced05..d079bd25d 100644
--- a/web/src/layouts/ChatLayout/ChatLayout.tsx
+++ b/web/src/layouts/ChatLayout/ChatLayout/ChatLayout.tsx
@@ -2,13 +2,13 @@
 
 import React, { useRef } from 'react';
 import { AppSplitter, AppSplitterRef } from '@/components/ui/layouts/AppSplitter';
-import { ChatContainer } from './ChatContainer';
-import { FileContainer } from './FileContainer';
-import { ChatLayoutContextProvider } from './ChatLayoutContext';
-import { useChatLayout } from './ChatLayoutContext';
-import { useDefaultSplitterLayout, useSelectedFileByParams } from './hooks';
-import { ChatContextProvider, useChatIndividualContext } from './ChatContext/ChatContext';
-import { DEFAULT_CHAT_OPTION_SIDEBAR_SIZE } from './ChatLayoutContext/config';
+import { ChatContainer } from '../ChatContainer';
+import { FileContainer } from '../FileContainer';
+import { ChatLayoutContextProvider } from '../ChatLayoutContext';
+import { useChatLayout } from '../ChatLayoutContext';
+import { useDefaultSplitterLayout, useSelectedFileByParams } from '../hooks';
+import { ChatContextProvider, useChatIndividualContext } from '../ChatContext/ChatContext';
+import { DEFAULT_CHAT_OPTION_SIDEBAR_SIZE } from '../ChatLayoutContext/config';
 
 export interface ChatSplitterProps {
   showChatCollapse?: boolean;
diff --git a/web/src/layouts/ChatLayout/ChatLayout/index.ts b/web/src/layouts/ChatLayout/ChatLayout/index.ts
new file mode 100644
index 000000000..46066188d
--- /dev/null
+++ b/web/src/layouts/ChatLayout/ChatLayout/index.ts
@@ -0,0 +1 @@
+export * from './ChatLayout';