mirror of
https://github.com/suitenumerique/meet.git
synced 2026-08-08 01:43:17 +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.
35 lines
870 B
TypeScript
35 lines
870 B
TypeScript
import type { ChatRow } from '@/stores/chat'
|
|
import { styled } from '@/styled-system/jsx'
|
|
import { ChatMessageMetadata } from './ChatMessageMedata'
|
|
import { ChatMessageBody } from './ChatMessageBody'
|
|
|
|
const StyledContainer = styled('li', {
|
|
base: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '0.25rem',
|
|
},
|
|
})
|
|
|
|
type ChatMessageProps = {
|
|
item: ChatRow
|
|
}
|
|
|
|
export const ChatMessage = ({ item }: ChatMessageProps) => {
|
|
const time = new Date(item.timestamp)
|
|
const locale = navigator ? navigator.language : 'en-US'
|
|
return (
|
|
<StyledContainer
|
|
title={time.toLocaleTimeString(locale, { timeStyle: 'full' })}
|
|
>
|
|
{!item.hideMetadata && (
|
|
<ChatMessageMetadata
|
|
timestamp={item.timestamp}
|
|
identity={item.identity}
|
|
/>
|
|
)}
|
|
<ChatMessageBody message={item.message} />
|
|
</StyledContainer>
|
|
)
|
|
}
|