From 8911e7954f72f2fc48406e48554e87e1748b7587 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Fri, 8 Aug 2025 17:58:46 -0600 Subject: [PATCH] Additional render updates --- .../(chat_experience)/chats/[chatId]/layout.tsx | 6 ++++++ .../src/components/ui/layouts/AppPageLayout.tsx | 3 +++ .../ChatLayout/ChatContainer/ChatContainer.tsx | 3 +++ .../ChatContainer/ChatContent/ChatContent.tsx | 9 ++++++--- .../ChatContainer/ChatContent/ChatMessageBlock.tsx | 14 +++++++++++--- .../layouts/ChatLayout/ChatLayout/ChatLayout.tsx | 7 ++----- 6 files changed, 31 insertions(+), 11 deletions(-) diff --git a/apps/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/layout.tsx b/apps/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/layout.tsx index d2cbdac7f..e77535f8d 100644 --- a/apps/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/layout.tsx +++ b/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, diff --git a/apps/web/src/components/ui/layouts/AppPageLayout.tsx b/apps/web/src/components/ui/layouts/AppPageLayout.tsx index 3153a1bf0..e403f1972 100644 --- a/apps/web/src/components/ui/layouts/AppPageLayout.tsx +++ b/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 (
{ return ( { header={} headerBorderVariant="ghost" scrollable + id={CHAT_CONTAINER_ID} className="chat-container-content flex h-full w-full min-w-[295px] flex-col"> diff --git a/apps/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx b/apps/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx index 0a68175ee..748874e8a 100644 --- a/apps/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx +++ b/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 ( <>
diff --git a/apps/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatMessageBlock.tsx b/apps/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatMessageBlock.tsx index 3549b9900..15efeb3e9 100644 --- a/apps/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatMessageBlock.tsx +++ b/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 ( diff --git a/apps/web/src/layouts/ChatLayout/ChatLayout/ChatLayout.tsx b/apps/web/src/layouts/ChatLayout/ChatLayout/ChatLayout.tsx index 9c0d2e323..d9b0553d6 100644 --- a/apps/web/src/layouts/ChatLayout/ChatLayout/ChatLayout.tsx +++ b/apps/web/src/layouts/ChatLayout/ChatLayout/ChatLayout.tsx @@ -51,11 +51,8 @@ export const ChatLayout: React.FC = ({ children }) => { mounted && , [mounted])} - rightChildren={useMemo( - () => mounted && {children}, - [children, mounted] - )} + leftChildren={mounted && } + rightChildren={mounted && {children}} autoSaveId={autoSaveId} defaultLayout={defaultSplitterLayout} allowResize={selectedLayout === 'both'}