Refactor MessageComponent to improve usage stats handling and readabi…#549
Refactor MessageComponent to improve usage stats handling and readabi…#549felix-schultz merged 1 commit intoalphafrom
Conversation
There was a problem hiding this comment.
Code Review
This pull request refactors the usage statistics logic in the MessageComponent to ensure a consistent array structure for the UsageStats component. The reviewer suggested memoizing the usageStats array to maintain a stable reference across renders, preventing potential performance issues in child components.
| }, [message.ratingSettings]); | ||
|
|
||
| const hasUsageStats = !isUser && Boolean(message.usage_stats?.length); | ||
| const usageStats = !isUser ? (message.usage_stats ?? []) : []; |
There was a problem hiding this comment.
To avoid creating a new empty array on each render when message.usage_stats is not present, which can cause unnecessary re-renders or re-calculations in child components, consider memoizing the usageStats array using useMemo. This will ensure a stable array reference across renders.
| const usageStats = !isUser ? (message.usage_stats ?? []) : []; | |
| const usageStats = useMemo(() => !isUser ? (message.usage_stats ?? []) : [], [isUser, message.usage_stats]); |
Up to standards ✅🟢 Issues
|
This pull request makes a small update to the
MessageComponentin the chat UI to improve how usage statistics are handled and displayed for messages. The main change is to ensure that usage statistics are only passed to theUsageStatscomponent when appropriate, which also simplifies the logic for determining when these stats should be shown.Improvements to usage statistics handling:
usageStatsso that it is always an array (empty for user messages), and updatedhasUsageStatsto check its length, ensuring consistent and correct rendering of usage statistics. (packages/ui/components/interfaces/chat-default/message.tsx, packages/ui/components/interfaces/chat-default/message.tsxL668-R669)UsageStatscomponent to use the newusageStatsvariable instead of accessingmessage.usage_statsdirectly, further improving clarity and reliability. (packages/ui/components/interfaces/chat-default/message.tsx, packages/ui/components/interfaces/chat-default/message.tsxL750-R751)