diff --git a/web/src/components/ui/layouts/PreventNavigation.tsx b/web/src/components/ui/layouts/PreventNavigation.tsx index 76ee6963b..cc52b29b1 100644 --- a/web/src/components/ui/layouts/PreventNavigation.tsx +++ b/web/src/components/ui/layouts/PreventNavigation.tsx @@ -187,7 +187,7 @@ export const PreventNavigation: React.FC = React.memo( window.history.pushState(null, document.title, window.location.href); }); - if (!isDirty) return
; + if (!isDirty) return null; return ( -
); diff --git a/web/src/components/ui/typography/Paragraph.tsx b/web/src/components/ui/typography/Paragraph.tsx index d3f998a63..d0de48091 100644 --- a/web/src/components/ui/typography/Paragraph.tsx +++ b/web/src/components/ui/typography/Paragraph.tsx @@ -27,6 +27,7 @@ type ParagraphProps = { style?: React.CSSProperties; onClick?: React.MouseEventHandler; children: React.ReactNode; + onCopy?: React.ClipboardEventHandler; } & VariantProps & VariantProps; @@ -37,7 +38,8 @@ export const Paragraph: React.FC = ({ children, className, style, - lineHeight = 'base' + lineHeight = 'base', + onCopy }) => { return (

= ({ className )} style={style} + onCopy={onCopy} onClick={onClick}> {children}

diff --git a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatUserMessage.tsx b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatUserMessage.tsx index 4a9663d52..4d24f0844 100644 --- a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatUserMessage.tsx +++ b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatUserMessage.tsx @@ -6,7 +6,7 @@ import { Paragraph } from '@/components/ui/typography'; import { MessageContainer } from './MessageContainer'; import { Tooltip } from '@/components/ui/tooltip'; import { cn } from '@/lib/classMerge'; -import { PenWriting, Copy, Check } from '@/components/ui/icons'; +import { PenWriting, Copy } from '@/components/ui/icons'; import { Button } from '@/components/ui/buttons'; import { useBusterNotifications } from '@/context/BusterNotifications'; import { useMemoizedFn } from '@/hooks'; @@ -19,6 +19,7 @@ export const ChatUserMessage: React.FC<{ isCompletedStream: boolean; requestMessage: NonNullable; }> = React.memo(({ messageId, chatId, isCompletedStream, requestMessage }) => { + const { openSuccessMessage } = useBusterNotifications(); const [isTooltipOpen, setIsTooltipOpen] = useState(false); const [isEditing, setIsEditing] = useState(false); @@ -29,6 +30,18 @@ export const ChatUserMessage: React.FC<{ setIsTooltipOpen(false); }); + const handleCopy = useMemoizedFn((e?: React.ClipboardEvent) => { + // Prevent default copy behavior + //I do not know why this is needed, but it is... + if (e) { + e.preventDefault(); + e.clipboardData.setData('text/plain', request); + } else { + navigator.clipboard.writeText(request); + } + openSuccessMessage('Copied to clipboard'); + }); + return ( ) : ( <> - {request} +
+ + {request} + +
{isCompletedStream && ( )} @@ -65,14 +83,10 @@ const RequestMessageTooltip: React.FC<{ isTooltipOpen: boolean; requestMessage: NonNullable; setIsEditing: (isEditing: boolean) => void; -}> = React.memo(({ isTooltipOpen, requestMessage, setIsEditing }) => { + onCopy: () => void; +}> = React.memo(({ isTooltipOpen, requestMessage, setIsEditing, onCopy }) => { const { openSuccessMessage } = useBusterNotifications(); - const onCopy = useMemoizedFn(() => { - navigator.clipboard.writeText(requestMessage.request); - openSuccessMessage('Copied to clipboard'); - }); - const onEdit = useMemoizedFn(() => { setIsEditing(true); }); @@ -80,7 +94,7 @@ const RequestMessageTooltip: React.FC<{ return (
{ + console.log('MOUNTED?'); + }); + useEffect(() => { + console.log({ + isCompletedStream, + hasReasoning, + chatId, + previousLastMessageId: previousLastMessageId.current, + lastMessageId, + previousIsCompletedStream + }); //this will trigger when the chat is streaming and is has not completed yet (new chat) if ( !isCompletedStream && @@ -53,12 +66,18 @@ export const useAutoChangeLayout = ({ chatId ) { previousLastMessageId.current = lastMessageId; - onSetSelectedFile({ id: lastMessageId, type: 'reasoning', versionNumber: undefined }); + // onSetSelectedFile({ id: lastMessageId, type: 'reasoning', versionNumber: undefined }); + onChangePage({ + route: BusterRoutes.APP_CHAT_ID_REASONING_ID, + chatId, + messageId: lastMessageId + }); + console.log('FLIP TO REASONING!', lastMessageId); } //this will when the chat is completed and it WAS streaming else if (isCompletedStream && previousIsCompletedStream === false) { - // + console.log('SELECT STREAMING FILE'); const chatMessage = getChatMessageMemoized(lastMessageId); const lastFileId = findLast(chatMessage?.response_message_ids, (id) => { const responseMessage = chatMessage?.response_messages[id]; @@ -68,7 +87,6 @@ export const useAutoChangeLayout = ({ | BusterChatResponseMessage_file | undefined; - //this will trigger when the chat was streaming (new chat) if (lastFileId && lastFile) { const { link, isSelected, selectedVersionNumber } = getFileLinkMeta({ fileId: lastFileId, @@ -78,17 +96,17 @@ export const useAutoChangeLayout = ({ useVersionHistoryMode: !chatId }); - if ( - !isSelected && - selectedVersionNumber !== lastFile.version_number && - selectedFileId !== lastFileId - ) { - onSetSelectedFile({ - id: lastFileId, - type: lastFile.file_type, - versionNumber: selectedVersionNumber - }); - } + // if ( + // !isSelected && + // selectedVersionNumber !== lastFile.version_number && + // selectedFileId !== lastFileId + // ) { + // onSetSelectedFile({ + // id: lastFileId, + // type: lastFile.file_type, + // versionNumber: selectedVersionNumber + // }); + // } if (link) { onChangePage(link); @@ -98,6 +116,7 @@ export const useAutoChangeLayout = ({ } //this will trigger on a page refresh and the chat is completed else if (isCompletedStream && chatId) { + console.log('SELECT INITIAL CHAT FILE - PAGE LOAD'); const isChatOnlyMode = !metricId && !dashboardId && !messageId; if (isChatOnlyMode) { return; @@ -117,5 +136,5 @@ export const useAutoChangeLayout = ({ onChangePage(href); } } - }, [isCompletedStream, hasReasoning, lastMessageId]); + }, [isCompletedStream, hasReasoning, chatId, lastMessageId]); };