Additional render updates

apps/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/layout.tsx

@@ -7,6 +7,12 @@ export default function ChatLayout({ children }: { children: React.ReactNode })
 export async function generateMetadata({ params }: { params: Promise<{ chatId: string }> }) {
   const { chatId } = await params;
 
+  if (!chatId) {
+    return {
+      title: 'Buster'
+    };
+  }
+
   try {
     const response = await getTitle_server({
       assetId: chatId,

apps/web/src/components/ui/layouts/AppPageLayout.tsx

@@ -22,10 +22,12 @@ export const AppPageLayout: React.FC<
     headerClassName?: string;
     mainClassName?: string;
     contentContainerId?: string;
+    id?: string;
   }>
 > = ({
   children,
   header,
+  id,
   secondaryHeader,
   scrollable = false,
   className = '',
@@ -37,6 +39,7 @@ export const AppPageLayout: React.FC<
 }) => {
   return (
     <div
+      id={id}
       className={cn(
         'app-page-layout flex h-full w-full flex-col overflow-hidden',
         scrollable && 'overflow-y-auto',

apps/web/src/layouts/ChatLayout/ChatContainer/ChatContainer.tsx

@@ -3,6 +3,8 @@ import { AppPageLayout } from '@/components/ui/layouts';
 import { ChatContent } from './ChatContent';
 import { ChatHeader } from './ChatHeader';
 
+export const CHAT_CONTAINER_ID = 'chat-container-content';
+
 export const ChatContainer = React.memo(() => {
   return (
     <AppPageLayout
@@ -10,6 +12,7 @@ export const ChatContainer = React.memo(() => {
       header={<ChatHeader />}
       headerBorderVariant="ghost"
       scrollable
+      id={CHAT_CONTAINER_ID}
       className="chat-container-content flex h-full w-full min-w-[295px] flex-col">
       <ChatContent />
     </AppPageLayout>

apps/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx

@@ -8,6 +8,7 @@ import { useChatIndividualContextSelector } from '../../ChatContext';
 import { ChatInput } from './ChatInput';
 import { ChatMessageBlock } from './ChatMessageBlock';
 import { ChatScrollToBottom } from './ChatScrollToBottom';
+import { CHAT_CONTAINER_ID } from '../ChatContainer';
 
 const autoClass = 'mx-auto max-w-[600px] w-full';
 
@@ -22,14 +23,16 @@ export const ChatContent: React.FC = React.memo(() => {
   });
 
   useMount(() => {
-    const container = document.querySelector(
-      '.chat-container-content .scroll-area-viewport'
-    ) as HTMLElement;
+    const container = document
+      .getElementById(CHAT_CONTAINER_ID)
+      ?.querySelector('.scroll-area-viewport') as HTMLElement;
     if (!container) return;
     containerRef.current = container;
     enableAutoScroll();
   });
 
+  console.log('hit chat content');
+
   return (
     <>
       <div className="mb-48 flex h-full w-full flex-col">

apps/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatMessageBlock.tsx

@@ -4,6 +4,12 @@ import React from 'react';
 import { useGetChatMessage } from '@/api/buster_rest/chats';
 import { ChatResponseMessages } from './ChatResponseMessages';
 import { ChatUserMessage } from './ChatUserMessage';
+import type { BusterChatMessage } from '@/api/asset_interfaces/chat';
+
+// Stable selector functions to prevent unnecessary re-renders
+const selectMessageExists = (message: BusterChatMessage | undefined) => !!message?.id;
+const selectRequestMessage = (message: BusterChatMessage | undefined) => message?.request_message;
+const selectIsCompleted = (message: BusterChatMessage | undefined) => message?.is_completed;
 
 export const ChatMessageBlock: React.FC<{
   messageId: string;
@@ -11,15 +17,17 @@ export const ChatMessageBlock: React.FC<{
   messageIndex: number;
 }> = React.memo(({ messageId, chatId, messageIndex }) => {
   const { data: messageExists } = useGetChatMessage(messageId, {
-    select: (message) => !!message?.id
+    select: selectMessageExists
   });
   const { data: requestMessage } = useGetChatMessage(messageId, {
-    select: (message) => message?.request_message
+    select: selectRequestMessage
   });
   const { data: isStreamFinished = true } = useGetChatMessage(messageId, {
-    select: (x) => x?.is_completed
+    select: selectIsCompleted
   });
 
+  console.log('chat message block', messageId, messageIndex);
+
   if (!messageExists) return null;
 
   return (

apps/web/src/layouts/ChatLayout/ChatLayout/ChatLayout.tsx

@@ -51,11 +51,8 @@ export const ChatLayout: React.FC<ChatSplitterProps> = ({ children }) => {
       <ChatContextProvider>
         <AppSplitter
           ref={appSplitterRef}
-          leftChildren={useMemo(() => mounted && <ChatContainer />, [mounted])}
-          rightChildren={useMemo(
-            () => mounted && <FileContainer>{children}</FileContainer>,
-            [children, mounted]
-          )}
+          leftChildren={mounted && <ChatContainer />}
+          rightChildren={mounted && <FileContainer>{children}</FileContainer>}
           autoSaveId={autoSaveId}
           defaultLayout={defaultSplitterLayout}
           allowResize={selectedLayout === 'both'}