diff --git a/web/components/chat/ChatContainer/ChatContainer.module.scss b/web/components/chat/ChatContainer/ChatContainer.module.scss index 7c224c14b..fc9575ce5 100644 --- a/web/components/chat/ChatContainer/ChatContainer.module.scss +++ b/web/components/chat/ChatContainer/ChatContainer.module.scss @@ -16,6 +16,7 @@ color: var(--text-color-secondary); & .toBottomWrap { & .toBottomBtn { + z-index: 9999; border: none; background-color: gray; } diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx index e11a17dde..5e05d939e 100644 --- a/web/components/chat/ChatContainer/ChatContainer.tsx +++ b/web/components/chat/ChatContainer/ChatContainer.tsx @@ -44,12 +44,12 @@ function shouldCollapseMessages(messages: ChatMessage[], index: number): boolean return false; } - if (!lastMessage.timestamp || !message.timestamp) { + if (!lastMessage?.timestamp || !message.timestamp) { return false; } const maxTimestampDelta = 1000 * 60 * 2; // 2 minutes - const lastTimestamp = new Date(lastMessage.timestamp).getTime(); + const lastTimestamp = new Date(lastMessage?.timestamp).getTime(); const thisTimestamp = new Date(message.timestamp).getTime(); if (thisTimestamp - lastTimestamp > maxTimestampDelta) { return false; @@ -185,6 +185,7 @@ export const ChatContainer: FC = ({ itemContent={(index, message) => getViewForMessage(index, message)} followOutput="auto" alignToBottom + atBottomThreshold={70} atBottomStateChange={bottom => setAtBottom(bottom)} /> {!atBottom && }