mirror of
https://github.com/suitenumerique/meet.git
synced 2026-08-15 13:13:56 +00:00
lebaudantoine
64b4200fc3
- Dissociate the chat observer (which persists messages in a store) from chat rendering. - Do not keep the chat mounted in the DOM anymore. - Recompute the minimal amount of data when a participant renames. - Memoize most of the layout. - Drop the manual textarea row-size computation: recent React Aria already handles it. Known regressions still to solve: focus behavior on the input, scroll behavior on message updates, and edge cases around list sizing. Not sure yet whether there is a better way to memoize the virtualized list; open to feedback.
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { styled } from '@/styled-system/jsx'
|
|
import { ChatRow, chatStore } from '@/stores/chat'
|
|
import React, { useMemo } from 'react'
|
|
import { useSnapshot } from 'valtio'
|
|
import { Text } from '@/primitives'
|
|
|
|
const StyledContainer = styled('span', {
|
|
base: {
|
|
display: 'flex',
|
|
gap: '0.5rem',
|
|
paddingTop: '0.75rem',
|
|
},
|
|
})
|
|
|
|
type ChatMessageMetadataProps = Pick<ChatRow, 'identity' | 'timestamp'>
|
|
|
|
export const ChatMessageMetadata = React.memo(
|
|
({ identity, timestamp }: ChatMessageMetadataProps) => {
|
|
const time = new Date(timestamp)
|
|
const locale = navigator ? navigator.language : 'en-US'
|
|
|
|
const { names } = useSnapshot(chatStore)
|
|
|
|
const currentDisplayName = useMemo(() => {
|
|
if (identity) return names[identity] ?? identity
|
|
}, [names, identity])
|
|
|
|
return (
|
|
<StyledContainer>
|
|
<Text bold={true} variant="sm">
|
|
{currentDisplayName}
|
|
</Text>
|
|
<Text variant="smNote" wrap="no">
|
|
{time.toLocaleTimeString(locale, { timeStyle: 'short' })}
|
|
</Text>
|
|
</StyledContainer>
|
|
)
|
|
}
|
|
)
|
|
|
|
ChatMessageMetadata.displayName = 'ChatMessageMetadata'
|