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;
});