mirror of
https://github.com/suitenumerique/meet.git
synced 2026-08-02 15:09:29 +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.
34 lines
836 B
TypeScript
34 lines
836 B
TypeScript
import { ChatRow } from '@/stores/chat'
|
|
import React, { useMemo } from 'react'
|
|
import { formatChatMessageLinks } from '@livekit/components-react'
|
|
import { css } from '@/styled-system/css'
|
|
import { Text } from '@/primitives'
|
|
|
|
type ChatMessageBodyProps = Pick<ChatRow, 'message'>
|
|
|
|
export const ChatMessageBody = React.memo(
|
|
({ message }: ChatMessageBodyProps) => {
|
|
const formattedMessage = useMemo(() => {
|
|
return formatChatMessageLinks(message)
|
|
}, [message])
|
|
|
|
return (
|
|
<Text
|
|
variant="sm"
|
|
margin={false}
|
|
className={css({
|
|
whiteSpace: 'pre-wrap',
|
|
'& .lk-chat-link': {
|
|
color: 'blue',
|
|
textDecoration: 'underline',
|
|
},
|
|
})}
|
|
>
|
|
{formattedMessage}
|
|
</Text>
|
|
)
|
|
}
|
|
)
|
|
|
|
ChatMessageBody.displayName = 'ChatMessageBody'
|