diff --git a/components/block-actions.tsx b/components/block-actions.tsx index 2eb1a24ee..7251071c1 100644 --- a/components/block-actions.tsx +++ b/components/block-actions.tsx @@ -97,12 +97,10 @@ function PureBlockActions({ } export const BlockActions = memo(PureBlockActions, (prevProps, nextProps) => { - if ( - prevProps.block.status === 'streaming' && - nextProps.block.status === 'streaming' - ) { - return true; - } + if (prevProps.block.status !== nextProps.block.status) return false; + if (prevProps.currentVersionIndex !== nextProps.currentVersionIndex) + return false; + if (prevProps.isCurrentVersion !== nextProps.isCurrentVersion) return false; - return false; + return true; }); diff --git a/components/message-actions.tsx b/components/message-actions.tsx index 42add1e47..fc29e0805 100644 --- a/components/message-actions.tsx +++ b/components/message-actions.tsx @@ -14,8 +14,10 @@ import { TooltipProvider, TooltipTrigger, } from './ui/tooltip'; +import { memo } from 'react'; +import equal from 'fast-deep-equal'; -export function MessageActions({ +export function PureMessageActions({ chatId, message, vote, @@ -164,3 +166,13 @@ export function MessageActions({ ); } + +export const MessageActions = memo( + PureMessageActions, + (prevProps, nextProps) => { + if (!equal(prevProps.vote, nextProps.vote)) return false; + if (prevProps.isLoading !== nextProps.isLoading) return false; + + return true; + }, +); diff --git a/components/message.tsx b/components/message.tsx index 6a77f6f4b..20afcb475 100644 --- a/components/message.tsx +++ b/components/message.tsx @@ -223,9 +223,16 @@ export const PreviewMessage = memo( PurePreviewMessage, (prevProps, nextProps) => { if (prevProps.isLoading !== nextProps.isLoading) return false; - if (prevProps.isLoading && nextProps.isLoading) return false; - if (prevProps.message.content && nextProps.message.content) return false; + if (prevProps.message.content !== nextProps.message.content) return false; + if ( + !equal( + prevProps.message.toolInvocations, + nextProps.message.toolInvocations, + ) + ) + return false; if (!equal(prevProps.vote, nextProps.vote)) return false; + return true; }, ); diff --git a/components/messages.tsx b/components/messages.tsx index a3562d047..43e203f82 100644 --- a/components/messages.tsx +++ b/components/messages.tsx @@ -5,6 +5,7 @@ import { Overview } from './overview'; import { UIBlock } from './block'; import { Dispatch, memo, SetStateAction } from 'react'; import { Vote } from '@/lib/db/schema'; +import equal from 'fast-deep-equal'; interface MessagesProps { chatId: string; @@ -74,15 +75,11 @@ function PureMessages({ ); } -function areEqual(prevProps: MessagesProps, nextProps: MessagesProps) { - if ( - prevProps.block.status === 'streaming' && - nextProps.block.status === 'streaming' - ) { - return true; - } +export const Messages = memo(PureMessages, (prevProps, nextProps) => { + if (prevProps.isLoading !== nextProps.isLoading) return false; + if (prevProps.isLoading && nextProps.isLoading) return false; + if (prevProps.messages.length !== nextProps.messages.length) return false; + if (!equal(prevProps.votes, nextProps.votes)) return false; - return false; -} - -export const Messages = memo(PureMessages, areEqual); + return true; +}); diff --git a/components/multimodal-input.tsx b/components/multimodal-input.tsx index f9b8942aa..b6dd7e411 100644 --- a/components/multimodal-input.tsx +++ b/components/multimodal-input.tsx @@ -247,40 +247,16 @@ function PureMultimodalInput({ /> {isLoading ? ( - + ) : ( - + )} - + ); } @@ -295,3 +271,80 @@ export const MultimodalInput = memo( return true; }, ); + +function PureAttachmentsButton({ + fileInputRef, + isLoading, +}: { + fileInputRef: React.MutableRefObject; + isLoading: boolean; +}) { + return ( + + ); +} + +const AttachmentsButton = memo(PureAttachmentsButton); + +function PureStopButton({ + stop, + setMessages, +}: { + stop: () => void; + setMessages: Dispatch>>; +}) { + return ( + + ); +} + +const StopButton = memo(PureStopButton); + +function PureSendButton({ + submitForm, + input, + uploadQueue, +}: { + submitForm: () => void; + input: string; + uploadQueue: Array; +}) { + return ( + + ); +} + +const SendButton = memo(PureSendButton, (prevProps, nextProps) => { + if (prevProps.uploadQueue.length !== nextProps.uploadQueue.length) + return false; + if (!prevProps.input !== !nextProps.input) return false; + return true; +}); diff --git a/components/toolbar.tsx b/components/toolbar.tsx index 571882443..6486c7107 100644 --- a/components/toolbar.tsx +++ b/components/toolbar.tsx @@ -469,5 +469,8 @@ const PureToolbar = ({ }; export const Toolbar = memo(PureToolbar, (prevProps, nextProps) => { - return equal(prevProps, nextProps); + if (prevProps.isLoading !== nextProps.isLoading) return false; + if (prevProps.isToolbarVisible !== nextProps.isToolbarVisible) return false; + + return true; });