From e79f1e7e05fcb08ef534edf63c4867ee38825fed Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Tue, 4 Mar 2025 13:52:33 -0700 Subject: [PATCH] use client on select assets --- .../api/buster_socket/chats/chatResponses.ts | 2 +- .../app/app/(primary_layout)/chats/page.tsx | 2 +- .../components/ui/layouts/AppPageLayout.tsx | 18 ++++++++++++--- .../ui/layouts/AppPageLayoutHeader.tsx | 18 +++++++++++---- .../useBusterChatListByFilter.tsx | 2 +- .../NewChatProvider/useChatStreamMessage.ts | 4 ++++ .../ReasoningController.tsx | 1 + .../ReasoningMessageContainer.tsx | 2 ++ .../ChatContainer/ChatContainer.tsx | 1 + .../ChatContainer/ChatContent/ChatContent.tsx | 14 +++--------- .../ChatContent/ChatInput/AIWarning.tsx | 4 ++-- .../ChatResponseMessageHidden.tsx | 2 +- .../ChatResponseReasoning.tsx | 1 - .../ChatContent/ChatUserMessage.tsx | 6 ++--- .../ChatContainer/ChatHeader/ChatHeader.tsx | 22 +++++++------------ .../ChatHeaderOptions/ChatHeaderOptions.tsx | 2 ++ .../ChatHeader/ChatHeaderTitle.tsx | 4 +++- .../ChatContext/useAutoChangeLayout.ts | 16 ++++++-------- web/src/layouts/ChatLayout/ChatLayout.tsx | 2 +- .../FileContainerHeader/CreateChatButtont.tsx | 2 +- .../DashboardContainerHeaderSegment.tsx | 11 ++++++++-- .../FileContainerHeader.tsx | 13 +++++------ .../MetricContainerHeaderSegment.tsx | 9 +++++++- .../ReasoningContainerHeaderSegment.tsx | 11 +++++++++- 24 files changed, 102 insertions(+), 67 deletions(-) diff --git a/web/src/api/buster_socket/chats/chatResponses.ts b/web/src/api/buster_socket/chats/chatResponses.ts index 8e38f5a19..cd617a3cb 100644 --- a/web/src/api/buster_socket/chats/chatResponses.ts +++ b/web/src/api/buster_socket/chats/chatResponses.ts @@ -7,7 +7,7 @@ import { } from './eventInterfaces'; export enum ChatsResponses { - '/chats/list:getThreadsList' = '/chats/list:getThreadsList', + '/chats/list:getChatsList' = '/chats/list:getChatsList', '/chats/unsubscribe:unsubscribe' = '/chats/unsubscribe:unsubscribe', '/chats/get:getChat' = '/chats/get:getChat', '/chats/post:initializeChat' = '/chats/post:initializeChat', diff --git a/web/src/app/app/(primary_layout)/chats/page.tsx b/web/src/app/app/(primary_layout)/chats/page.tsx index 33497fc61..ff2e283ee 100644 --- a/web/src/app/app/(primary_layout)/chats/page.tsx +++ b/web/src/app/app/(primary_layout)/chats/page.tsx @@ -4,7 +4,7 @@ import { ChatListHeader } from './_ChatsListContainer/ChatListHeader'; export default function ChatsPage() { return ( - }> + }> ); diff --git a/web/src/components/ui/layouts/AppPageLayout.tsx b/web/src/components/ui/layouts/AppPageLayout.tsx index 720ad3aaa..3e89c3354 100644 --- a/web/src/components/ui/layouts/AppPageLayout.tsx +++ b/web/src/components/ui/layouts/AppPageLayout.tsx @@ -16,9 +16,17 @@ export const AppPageLayout: React.FC< header?: React.ReactNode; scrollable?: boolean; className?: string; - headerVariant?: 'default' | 'list'; + headerSizeVariant?: 'default' | 'list'; + headerBorderVariant?: 'default' | 'ghost'; }> -> = ({ children, header, scrollable = false, className = '', headerVariant = 'default' }) => { +> = ({ + children, + header, + scrollable = false, + className = '', + headerSizeVariant = 'default', + headerBorderVariant = 'default' +}) => { return (
- {header && {header}} + {header && ( + + {header} + + )} {children}
); diff --git a/web/src/components/ui/layouts/AppPageLayoutHeader.tsx b/web/src/components/ui/layouts/AppPageLayoutHeader.tsx index 2adb9968b..5b58eaa18 100644 --- a/web/src/components/ui/layouts/AppPageLayoutHeader.tsx +++ b/web/src/components/ui/layouts/AppPageLayoutHeader.tsx @@ -3,13 +3,21 @@ import React from 'react'; import { cva, type VariantProps } from 'class-variance-authority'; const headerVariants = cva( - 'bg-page-background flex max-h-[38px] min-h-[38px] items-center justify-between gap-x-2.5 border-b', + 'bg-page-background flex max-h-[38px] min-h-[38px] items-center justify-between gap-x-2.5 ', { variants: { - variant: { + sizeVariant: { default: 'px-4.5', list: 'px-7.5' + }, + borderVariant: { + default: 'border-b', + ghost: 'border-b-0' } + }, + defaultVariants: { + borderVariant: 'default', + sizeVariant: 'default' } } ); @@ -20,6 +28,8 @@ export const AppPageLayoutHeader: React.FC< className?: string; } & VariantProps > -> = ({ children, className = '', variant = 'default' }) => { - return
{children}
; +> = ({ children, className = '', sizeVariant = 'default', borderVariant = 'default' }) => { + return ( +
{children}
+ ); }; diff --git a/web/src/context/Chats/ChatListProvider/useBusterChatListByFilter.tsx b/web/src/context/Chats/ChatListProvider/useBusterChatListByFilter.tsx index e120b2d30..0c1ce9e13 100644 --- a/web/src/context/Chats/ChatListProvider/useBusterChatListByFilter.tsx +++ b/web/src/context/Chats/ChatListProvider/useBusterChatListByFilter.tsx @@ -16,7 +16,7 @@ export const useBusterChatListByFilter = ( route: '/chats/list', payload: filters }, - responseEvent: '/chats/list:getThreadsList', + responseEvent: '/chats/list:getChatsList', options: queryKeys['chatsGetList'](filters) }); diff --git a/web/src/context/Chats/NewChatProvider/useChatStreamMessage.ts b/web/src/context/Chats/NewChatProvider/useChatStreamMessage.ts index e1a0ce3a6..d4f9f1ac4 100644 --- a/web/src/context/Chats/NewChatProvider/useChatStreamMessage.ts +++ b/web/src/context/Chats/NewChatProvider/useChatStreamMessage.ts @@ -136,6 +136,10 @@ export const useChatStreamMessage = () => { const _generatingResponseMessageCallback = useMemoizedFn( (_: null, d: ChatEvent_GeneratingResponseMessage) => { const { message_id, response_message, chat_id } = d; + console.log(response_message?.id); + + if (!response_message?.id) return; + const responseMessageId = response_message.id; const foundResponseMessage: undefined | ChatMessageResponseMessage = chatMessageResponseMessagesRef.current[message_id]?.[responseMessageId]; diff --git a/web/src/controllers/ReasoningController/ReasoningController.tsx b/web/src/controllers/ReasoningController/ReasoningController.tsx index f367f241b..082b870b3 100644 --- a/web/src/controllers/ReasoningController/ReasoningController.tsx +++ b/web/src/controllers/ReasoningController/ReasoningController.tsx @@ -1,4 +1,5 @@ 'use client'; + import React from 'react'; import { useChatIndividualContextSelector } from '@chatLayout/ChatContext'; import { ReasoningMessageContainer } from './ReasoningMessageContainer'; diff --git a/web/src/controllers/ReasoningController/ReasoningMessageContainer.tsx b/web/src/controllers/ReasoningController/ReasoningMessageContainer.tsx index 9a39f73ef..323aa9c1e 100644 --- a/web/src/controllers/ReasoningController/ReasoningMessageContainer.tsx +++ b/web/src/controllers/ReasoningController/ReasoningMessageContainer.tsx @@ -1,3 +1,5 @@ +'use client'; + import type { BusterChatMessageReasoning } from '@/api/asset_interfaces'; import React, { useMemo } from 'react'; import { ReasoningMessageSelector } from './ReasoningMessages'; diff --git a/web/src/layouts/ChatLayout/ChatContainer/ChatContainer.tsx b/web/src/layouts/ChatLayout/ChatContainer/ChatContainer.tsx index d5ed68f14..11be460d3 100644 --- a/web/src/layouts/ChatLayout/ChatContainer/ChatContainer.tsx +++ b/web/src/layouts/ChatLayout/ChatContainer/ChatContainer.tsx @@ -19,6 +19,7 @@ export const ChatContainer = React.memo(({}: ChatContainerProps) => { return ( } + headerBorderVariant="ghost" className="flex h-full w-full min-w-[295px] flex-col"> diff --git a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx index 2ea926152..3d285d4f2 100644 --- a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx +++ b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx @@ -1,12 +1,12 @@ +'use client'; + import React from 'react'; import { useChatIndividualContextSelector } from '../../ChatContext'; import { ChatMessageBlock } from './ChatMessageBlock'; import { ChatInput } from './ChatInput'; -import { createStyles } from 'antd-style'; export const ChatContent: React.FC<{ chatContentRef: React.RefObject }> = React.memo(({ chatContentRef }) => { - const { styles } = useStyles(); const chatMessageIds = useChatIndividualContextSelector((state) => state.chatMessageIds); // const chatMessages = useBusterChatContextSelector((state) => state.chatsMessages); @@ -17,7 +17,7 @@ export const ChatContent: React.FC<{ chatContentRef: React.RefObject
{chatMessageIds?.map((messageId) => ( -
+
@@ -33,11 +33,3 @@ export const ChatContent: React.FC<{ chatContentRef: React.RefObject ({ - messageBlock: css` - &:hover { - background-color: ${token.controlItemBgHover}; - } - ` -})); diff --git a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/AIWarning.tsx b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/AIWarning.tsx index 88cf220a0..8abf479e2 100644 --- a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/AIWarning.tsx +++ b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/AIWarning.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import { Text } from '@/components/ui'; +import { Text } from '@/components/ui/typography'; export const AIWarning = React.memo(() => { return (
- + Our AI may make mistakes. Check important info.
diff --git a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessageHidden.tsx b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessageHidden.tsx index c61014127..b21c0de59 100644 --- a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessageHidden.tsx +++ b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessageHidden.tsx @@ -3,7 +3,7 @@ import type { BusterChatMessageResponse } from '@/api/asset_interfaces'; import { createStyles } from 'antd-style'; import { ChatResponseMessageSelector } from './ChatResponseMessageSelector'; import { AnimatePresence, motion } from 'framer-motion'; -import { Text } from '@/components/ui'; +import { Text } from '@/components/ui/typography'; import { AppMaterialIcons } from '@/components/ui'; import pluralize from 'pluralize'; import { useMemoizedFn } from 'ahooks'; diff --git a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseReasoning.tsx b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseReasoning.tsx index 3dba3e49e..6963a004e 100644 --- a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseReasoning.tsx +++ b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseReasoning.tsx @@ -5,7 +5,6 @@ import { ShimmerText } from '@/components/ui/typography/ShimmerText'; import { useMemoizedFn } from 'ahooks'; import { motion } from 'framer-motion'; import { AnimatePresence } from 'framer-motion'; -import { AppMaterialIcons } from '@/components/ui'; import { Stars } from '@/components/ui/icons'; import { Text } from '@/components/ui/typography'; import { createStyles } from 'antd-style'; diff --git a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatUserMessage.tsx b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatUserMessage.tsx index add548ff4..1e7a3d876 100644 --- a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatUserMessage.tsx +++ b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatUserMessage.tsx @@ -1,7 +1,7 @@ import type { BusterChatMessageRequest } from '@/api/asset_interfaces'; import { createStyles } from 'antd-style'; import React from 'react'; -import { Text } from '@/components/ui'; +import { Text } from '@/components/ui/typography'; import { MessageContainer } from './MessageContainer'; export const ChatUserMessage: React.FC<{ requestMessage: BusterChatMessageRequest }> = React.memo( @@ -12,9 +12,7 @@ export const ChatUserMessage: React.FC<{ requestMessage: BusterChatMessageReques return ( - - {request} - + {request} ); } diff --git a/web/src/layouts/ChatLayout/ChatContainer/ChatHeader/ChatHeader.tsx b/web/src/layouts/ChatLayout/ChatContainer/ChatHeader/ChatHeader.tsx index ca992981e..3b23d74aa 100644 --- a/web/src/layouts/ChatLayout/ChatContainer/ChatHeader/ChatHeader.tsx +++ b/web/src/layouts/ChatLayout/ChatContainer/ChatHeader/ChatHeader.tsx @@ -1,9 +1,9 @@ +'use client'; + import React from 'react'; import { ChatHeaderOptions } from './ChatHeaderOptions'; import { ChatHeaderTitle } from './ChatHeaderTitle'; import { useChatIndividualContextSelector } from '../../ChatContext'; -import { cn } from '@/lib/classMerge'; -import { AppPageLayoutHeader } from '@/components/ui/layouts/AppPageLayoutHeader'; export const ChatHeader: React.FC<{ showScrollOverflow: boolean; @@ -11,19 +11,13 @@ export const ChatHeader: React.FC<{ const hasFile = useChatIndividualContextSelector((state) => state.hasFile); const chatTitle = useChatIndividualContextSelector((state) => state.chatTitle); + if (!hasFile && !chatTitle) return null; + return ( - - {hasFile && chatTitle && ( - <> - - - - )} - + <> + + + ); }); diff --git a/web/src/layouts/ChatLayout/ChatContainer/ChatHeader/ChatHeaderOptions/ChatHeaderOptions.tsx b/web/src/layouts/ChatLayout/ChatContainer/ChatHeader/ChatHeaderOptions/ChatHeaderOptions.tsx index 22a41b31a..356f4fed4 100644 --- a/web/src/layouts/ChatLayout/ChatContainer/ChatHeader/ChatHeaderOptions/ChatHeaderOptions.tsx +++ b/web/src/layouts/ChatLayout/ChatContainer/ChatHeader/ChatHeaderOptions/ChatHeaderOptions.tsx @@ -1,3 +1,5 @@ +'use client'; + import { AppMaterialIcons } from '@/components/ui'; import { Button } from 'antd'; import React from 'react'; diff --git a/web/src/layouts/ChatLayout/ChatContainer/ChatHeader/ChatHeaderTitle.tsx b/web/src/layouts/ChatLayout/ChatContainer/ChatHeader/ChatHeaderTitle.tsx index 597ac6a8d..733658400 100644 --- a/web/src/layouts/ChatLayout/ChatContainer/ChatHeader/ChatHeaderTitle.tsx +++ b/web/src/layouts/ChatLayout/ChatContainer/ChatHeader/ChatHeaderTitle.tsx @@ -1,4 +1,6 @@ -import { Text } from '@/components/ui'; +'use client'; + +import { Text } from '@/components/ui/typography'; import React from 'react'; import { AnimatePresence, motion } from 'framer-motion'; import { useChatIndividualContextSelector } from '../../ChatContext'; diff --git a/web/src/layouts/ChatLayout/ChatContext/useAutoChangeLayout.ts b/web/src/layouts/ChatLayout/ChatContext/useAutoChangeLayout.ts index 10dbe2eca..5fd6c68c5 100644 --- a/web/src/layouts/ChatLayout/ChatContext/useAutoChangeLayout.ts +++ b/web/src/layouts/ChatLayout/ChatContext/useAutoChangeLayout.ts @@ -1,30 +1,28 @@ +'use client'; + import { useMessageIndividual } from '@/context/Chats'; import type { SelectedFile } from '../interfaces'; -import { usePrevious } from 'ahooks'; -import { useEffect } from 'react'; +import { useEffect, useRef } from 'react'; export const useAutoChangeLayout = ({ lastMessageId, - onSetSelectedFile }: { lastMessageId: string; onSetSelectedFile: (file: SelectedFile) => void; }) => { + const hasSeeningReasoningPage = useRef(false); //used when there is a delay in page load const message = useMessageIndividual(lastMessageId); const reasoningMessagesLength = message?.reasoning?.length; - const previousReasoningMessagesLength = usePrevious(reasoningMessagesLength); const isCompletedStream = message?.isCompletedStream; const isLoading = !isCompletedStream; const hasReasoning = !!reasoningMessagesLength; - const previousIsEmpty = previousReasoningMessagesLength === 0; - - console.log(isLoading, previousIsEmpty, hasReasoning, message); //change the page to reasoning file if we get a reasoning message useEffect(() => { - if (isLoading && previousIsEmpty && hasReasoning) { + if (isLoading && !hasSeeningReasoningPage.current && hasReasoning) { + hasSeeningReasoningPage.current = true; onSetSelectedFile({ id: lastMessageId, type: 'reasoning' }); } - }, [isLoading, hasReasoning, previousIsEmpty]); + }, [isLoading, hasReasoning]); }; diff --git a/web/src/layouts/ChatLayout/ChatLayout.tsx b/web/src/layouts/ChatLayout/ChatLayout.tsx index 8289ebcd3..24362681b 100644 --- a/web/src/layouts/ChatLayout/ChatLayout.tsx +++ b/web/src/layouts/ChatLayout/ChatLayout.tsx @@ -47,7 +47,7 @@ export const ChatLayout: React.FC = React.memo( } - rightChildren={} + rightChildren={{children}} autoSaveId="chat-splitter" defaultLayout={defaultSplitterLayout} rightHidden={renderViewLayoutKey === 'chat'} diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/CreateChatButtont.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/CreateChatButtont.tsx index d1c47dae9..9e52fb5e1 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/CreateChatButtont.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/CreateChatButtont.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { useChatLayoutContextSelector } from '../../ChatLayoutContext'; import { useHotkeys } from 'react-hotkeys-hook'; import { useMemoizedFn } from 'ahooks'; -import { AppTooltip } from '@/components/ui'; +import { AppTooltip } from '@/components/ui/tooltip'; export const CreateChatButton = React.memo(() => { const onCollapseFileClick = useChatLayoutContextSelector((x) => x.onCollapseFileClick); diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderSegment.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderSegment.tsx index 28cb0f2b1..3a27c4e9e 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderSegment.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderSegment.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type { FileContainerSegmentProps } from './interfaces'; -import type { DashboardFileView, FileView } from '../../ChatLayoutContext/useChatFileLayout'; +import type { FileView } from '../../ChatLayoutContext/useChatFileLayout'; import { AppSegmented } from '@/components/ui/segmented'; import { useChatLayoutContextSelector } from '../../ChatLayoutContext'; import { useMemoizedFn } from 'ahooks'; @@ -19,7 +19,14 @@ export const DashboardContainerHeaderSegment: React.FC; + return ( + + ); } ); diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeader.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeader.tsx index db786e60d..1a331531a 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeader.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeader.tsx @@ -1,6 +1,8 @@ +'use client'; + import React from 'react'; import { CollapseFileButton } from './CollapseFileButton'; -import { FileType } from '@/api/asset_interfaces'; +import type { FileType } from '@/api/asset_interfaces'; import { FileContainerSegmentProps, FileContainerButtonsProps } from './interfaces'; import { DashboardContainerHeaderButtons } from './DashboardContainerHeaderButtons'; import { DashboardContainerHeaderSegment } from './DashboardContainerHeaderSegment'; @@ -8,7 +10,6 @@ import { MetricContainerHeaderSegment } from './MetricContainerHeaderSegment'; import { MetricContainerHeaderButtons } from './MetricContainerHeaderButtons'; import { useChatLayoutContextSelector } from '../../ChatLayoutContext'; import { ReasoningContainerHeaderSegment } from './ReasoningContainerHeaderSegment'; -import { cn } from '@/lib/utils'; export const FileContainerHeader: React.FC = React.memo(() => { const selectedFileType = useChatLayoutContextSelector((x) => x.selectedFileType); @@ -37,11 +38,7 @@ export const FileContainerHeader: React.FC = React.memo(() => { ); return ( -
+ <>
{ {selectedFileView && }
-
+ ); }); diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderSegment.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderSegment.tsx index 7ee764daf..ee62e27f8 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderSegment.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderSegment.tsx @@ -20,7 +20,14 @@ export const MetricContainerHeaderSegment: React.FC = onSetFileView({ fileView: fileView.value }); }); - return ; + return ( + + ); } ); diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/ReasoningContainerHeaderSegment.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/ReasoningContainerHeaderSegment.tsx index 07869a0c4..ce96437b5 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/ReasoningContainerHeaderSegment.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/ReasoningContainerHeaderSegment.tsx @@ -1,3 +1,5 @@ +'use client'; + import React from 'react'; import { FileContainerSegmentProps } from './interfaces'; import { AppSegmented } from '@/components/ui/segmented'; @@ -18,7 +20,14 @@ export const ReasoningContainerHeaderSegment: React.FC; + return ( + + ); } );