Differential D7850 Diff 26955 web/chat/chat-message-list.react.js

Changeset View

Standalone View

web/chat/chat-message-list.react.js

Show All 23 Lines
import { type ThreadInfo } from 'lib/types/thread-types.js';		import { type ThreadInfo } from 'lib/types/thread-types.js';
import {		import {
type DispatchActionPromise,		type DispatchActionPromise,
useServerCall,		useServerCall,
useDispatchActionPromise,		useDispatchActionPromise,
} from 'lib/utils/action-utils.js';		} from 'lib/utils/action-utils.js';

import css from './chat-message-list.css';		import css from './chat-message-list.css';
		import { useEditModalContext } from './edit-message-provider.js';
import { MessageListContext } from './message-list-types.js';		import { MessageListContext } from './message-list-types.js';
import Message from './message.react.js';		import Message from './message.react.js';
import RelationshipPrompt from './relationship-prompt/relationship-prompt.js';		import RelationshipPrompt from './relationship-prompt/relationship-prompt.js';
import { useTooltipContext } from './tooltip-provider.js';		import { useTooltipContext } from './tooltip-provider.js';
import { type InputState, InputStateContext } from '../input/input-state.js';		import { type InputState, InputStateContext } from '../input/input-state.js';
import LoadingIndicator from '../loading-indicator.react.js';		import LoadingIndicator from '../loading-indicator.react.js';
import { useTextMessageRulesFunc } from '../markdown/rules.react.js';		import { useTextMessageRulesFunc } from '../markdown/rules.react.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';
Show All 17 Lines	+fetchMessagesBeforeCursor: (
beforeMessageID: string,		beforeMessageID: string,
) => Promise<FetchMessageInfosPayload>,		) => Promise<FetchMessageInfosPayload>,
+fetchMostRecentMessages: (		+fetchMostRecentMessages: (
threadID: string,		threadID: string,
) => Promise<FetchMessageInfosPayload>,		) => Promise<FetchMessageInfosPayload>,
+inputState: ?InputState,		+inputState: ?InputState,
+clearTooltip: () => mixed,		+clearTooltip: () => mixed,
+oldestMessageServerID: ?string,		+oldestMessageServerID: ?string,
		+isEditState: boolean,
};		};
type Snapshot = {		type Snapshot = {
+scrollTop: number,		+scrollTop: number,
+scrollHeight: number,		+scrollHeight: number,
};		};
class ChatMessageList extends React.PureComponent<Props> {		class ChatMessageList extends React.PureComponent<Props> {
container: ?HTMLDivElement;		container: ?HTMLDivElement;
messageContainer: ?HTMLDivElement;		messageContainer: ?HTMLDivElement;
▲ Show 20 Lines • Show All 42 Lines • ▼ Show 20 Lines	componentDidUpdate(prevProps: Props, prevState, snapshot: ?Snapshot) {
// before the new message, or if the new message was composed locally		// before the new message, or if the new message was composed locally
const hasNewMessage = ChatMessageList.hasNewMessage(this.props, prevProps);		const hasNewMessage = ChatMessageList.hasNewMessage(this.props, prevProps);
if (		if (
this.props.activeChatThreadID !== prevProps.activeChatThreadID \|\|		this.props.activeChatThreadID !== prevProps.activeChatThreadID \|\|
(hasNewMessage &&		(hasNewMessage &&
messageListData &&		messageListData &&
messageListData[0].itemType === 'message' &&		messageListData[0].itemType === 'message' &&
messageListData[0].messageInfo.localID) \|\|		messageListData[0].messageInfo.localID) \|\|
(hasNewMessage && snapshot && Math.abs(snapshot.scrollTop) <= 1)		(hasNewMessage &&
		snapshot &&
		Math.abs(snapshot.scrollTop) <= 1 &&
		!this.props.isEditState)
) {		) {
this.scrollToBottom();		this.scrollToBottom();
} else if (hasNewMessage && messageContainer && snapshot) {		} else if (hasNewMessage && messageContainer && snapshot) {
const { scrollTop, scrollHeight } = messageContainer;		const { scrollTop, scrollHeight } = messageContainer;
if (		if (
scrollHeight > snapshot.scrollHeight &&		scrollHeight > snapshot.scrollHeight &&
scrollTop === snapshot.scrollTop		scrollTop === snapshot.scrollTop
) {		) {
▲ Show 20 Lines • Show All 171 Lines • ▼ Show 20 Lines	const messageListContext = React.useMemo(() => {
if (!getTextMessageMarkdownRules) {		if (!getTextMessageMarkdownRules) {
return undefined;		return undefined;
}		}
return { getTextMessageMarkdownRules };		return { getTextMessageMarkdownRules };
}, [getTextMessageMarkdownRules]);		}, [getTextMessageMarkdownRules]);

const oldestMessageServerID = useOldestMessageServerID(threadInfo.id);		const oldestMessageServerID = useOldestMessageServerID(threadInfo.id);

		const { editState } = useEditModalContext();
		const isEditState = editState !== null;

return (		return (
<MessageListContext.Provider value={messageListContext}>		<MessageListContext.Provider value={messageListContext}>
<ChatMessageList		<ChatMessageList
activeChatThreadID={threadInfo.id}		activeChatThreadID={threadInfo.id}
threadInfo={threadInfo}		threadInfo={threadInfo}
messageListData={messageListData}		messageListData={messageListData}
startReached={startReached}		startReached={startReached}
inputState={inputState}		inputState={inputState}
dispatchActionPromise={dispatchActionPromise}		dispatchActionPromise={dispatchActionPromise}
fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}		fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}
fetchMostRecentMessages={callFetchMostRecentMessages}		fetchMostRecentMessages={callFetchMostRecentMessages}
clearTooltip={clearTooltip}		clearTooltip={clearTooltip}
oldestMessageServerID={oldestMessageServerID}		oldestMessageServerID={oldestMessageServerID}
		isEditState={isEditState}
/>		/>
</MessageListContext.Provider>		</MessageListContext.Provider>
);		);
});		});

export default ConnectedChatMessageList;		export default ConnectedChatMessageList;