github/OpenHands
1
0
Fork 0
mirror of https://github.com/OpenHands/OpenHands.git synced 2025-12-26 05:48:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): Memoize messages (#6006)

Browse Source
This commit is contained in:
sp.wack 2025-01-03 20:12:28 +04:00 committed by GitHub
parent fa44bdb390
commit 4c59cff2a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 34 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/.eslintrc
View File

@ -73,6 +73,7 @@
}
}
],
"react/prop-types": "off",
"react/no-array-index-key": "off",
"react-hooks/exhaustive-deps": "off",
"import/no-extraneous-dependencies": "off",

61
frontend/src/components/features/chat/messages.tsx
View File

@ -1,3 +1,4 @@
import React from "react";
import { ChatMessage } from "#/components/features/chat/chat-message";
import { ConfirmationButtons } from "#/components/shared/buttons/confirmation-buttons";
import { ImageCarousel } from "../images/image-carousel";
@ -8,32 +9,36 @@ interface MessagesProps {
isAwaitingUserConfirmation: boolean;
}
export function Messages({
messages,
isAwaitingUserConfirmation,
}: MessagesProps) {
return messages.map((message, index) => {
if (message.type === "error" || message.type === "action") {
return (
<ExpandableMessage
key={index}
type={message.type}
id={message.translationID}
message={message.content}
success={message.success}
/>
);
}
export const Messages: React.FC<MessagesProps> = React.memo(
({ messages, isAwaitingUserConfirmation }) =>
messages.map((message, index) => {
if (message.type === "error" || message.type === "action") {
return (
<ExpandableMessage
key={index}
type={message.type}
id={message.translationID}
message={message.content}
success={message.success}
/>
);
}
return (
<ChatMessage key={index} type={message.sender} message={message.content}>
{message.imageUrls && message.imageUrls.length > 0 && (
<ImageCarousel size="small" images={message.imageUrls} />
)}
{messages.length - 1 === index &&
message.sender === "assistant" &&
isAwaitingUserConfirmation && <ConfirmationButtons />}
</ChatMessage>
);
});
}
return (
<ChatMessage
key={index}
type={message.sender}
message={message.content}
>
{message.imageUrls && message.imageUrls.length > 0 && (
<ImageCarousel size="small" images={message.imageUrls} />
)}
{messages.length - 1 === index &&
message.sender === "assistant" &&
isAwaitingUserConfirmation && <ConfirmationButtons />}
</ChatMessage>
);
}),
);
Messages.displayName = "Messages";