diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx index ba90dd14..fd8edaf2 100644 --- a/src/components/dms/MessageItem.tsx +++ b/src/components/dms/MessageItem.tsx @@ -32,6 +32,11 @@ export let MessageItem = ({ next.sender?.did === currentAccount?.did const isLastInGroup = useMemo(() => { + // TODO this means it's a placeholder. Let's figure out the right way to do this though! + if (item.id.length > 13) { + return false + } + // if the next message is from a different sender, then it's the last in the group if (isFromSelf ? !isNextFromSelf : isNextFromSelf) { return true diff --git a/src/screens/Messages/Conversation/MessageInput.tsx b/src/screens/Messages/Conversation/MessageInput.tsx index e94a295e..d9360753 100644 --- a/src/screens/Messages/Conversation/MessageInput.tsx +++ b/src/screens/Messages/Conversation/MessageInput.tsx @@ -18,10 +18,10 @@ import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/ico export function MessageInput({ onSendMessage, - onFocus, + scrollToEnd, }: { onSendMessage: (message: string) => void - onFocus?: () => void + scrollToEnd: () => void }) { const {_} = useLingui() const t = useTheme() @@ -54,8 +54,10 @@ export function MessageInput({ setMaxHeight(max) setIsInputScrollable(availableSpace < 30) + + scrollToEnd() }, - [topInset], + [scrollToEnd, topInset], ) return ( @@ -82,7 +84,7 @@ export function MessageInput({ keyboardAppearance={t.name === 'light' ? 'light' : 'dark'} scrollEnabled={isInputScrollable} blurOnSubmit={false} - onFocus={onFocus} + onFocus={scrollToEnd} onContentSizeChange={onInputLayout} ref={inputRef} /> diff --git a/src/screens/Messages/Conversation/MessageInput.web.tsx b/src/screens/Messages/Conversation/MessageInput.web.tsx index fd13dd85..a2f255bd 100644 --- a/src/screens/Messages/Conversation/MessageInput.web.tsx +++ b/src/screens/Messages/Conversation/MessageInput.web.tsx @@ -11,7 +11,7 @@ export function MessageInput({ onSendMessage, }: { onSendMessage: (message: string) => void - onFocus: () => void + scrollToEnd: () => void }) { const {_} = useLingui() const t = useTheme() diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx index bc64d2b1..7a14979e 100644 --- a/src/screens/Messages/Conversation/MessagesList.tsx +++ b/src/screens/Messages/Conversation/MessagesList.tsx @@ -168,9 +168,11 @@ export function MessagesList() { [contentHeight.value, hasInitiallyScrolled, isAtBottom], ) - const onInputFocus = React.useCallback(() => { - flatListRef.current?.scrollToEnd({animated: true}) - }, [flatListRef]) + const scrollToEnd = React.useCallback(() => { + requestAnimationFrame(() => + flatListRef.current?.scrollToEnd({animated: true}), + ) + }, []) const {bottom: bottomInset} = useSafeAreaInsets() const {gtMobile} = useBreakpoints() @@ -200,6 +202,7 @@ export function MessagesList() { maintainVisibleContentPosition={{ minIndexForVisible: 1, }} + contentContainerStyle={{paddingHorizontal: 10}} removeClippedSubviews={false} onContentSizeChange={onContentSizeChange} onStartReached={onStartReached} @@ -215,10 +218,7 @@ export function MessagesList() { /> - + ) } diff --git a/src/state/messages/convo.ts b/src/state/messages/convo.ts index a65e0c48..a68eddb7 100644 --- a/src/state/messages/convo.ts +++ b/src/state/messages/convo.ts @@ -786,7 +786,7 @@ export class Convo { (ChatBskyConvoDefs.isMessageView(item.message) || ChatBskyConvoDefs.isDeletedMessageView(item.message)) ) { - const next = items[i - 1] + const next = items[i + 1] if ( isConvoItemMessage(next) &&