diff --git a/src/renderer/src/pages/home/Messages/MessageAnchorLine.tsx b/src/renderer/src/pages/home/Messages/MessageAnchorLine.tsx index 85ae773f..7cc592a1 100644 --- a/src/renderer/src/pages/home/Messages/MessageAnchorLine.tsx +++ b/src/renderer/src/pages/home/Messages/MessageAnchorLine.tsx @@ -1,3 +1,4 @@ +import { DownOutlined } from '@ant-design/icons' import { APP_NAME, AppLogo, isLocalAi } from '@renderer/config/env' import { getModelLogo } from '@renderer/config/models' import { useTheme } from '@renderer/context/ThemeProvider' @@ -129,6 +130,13 @@ const MessageAnchorLine: FC = ({ messages }) => { [setSelectedMessage] ) + const scrollToBottom = useCallback(() => { + const messagesContainer = document.getElementById('messages') + if (messagesContainer) { + messagesContainer.scrollTo({ top: messagesContainer.scrollHeight, behavior: 'smooth' }) + } + }, []) + if (messages.length === 0) return null const handleMouseMove = (e: React.MouseEvent) => { @@ -159,6 +167,28 @@ const MessageAnchorLine: FC = ({ messages }) => { onMouseLeave={handleMouseLeave} $height={containerHeight}> + { + if (el) messageItemsRef.current.set('bottom-anchor', el) + else messageItemsRef.current.delete('bottom-anchor') + }} + style={{ + opacity: mouseY ? 0.5 + calculateValueByDistance('bottom-anchor', 1) : 0.6 + }} + onClick={scrollToBottom}> + + } + size={10 + calculateValueByDistance('bottom-anchor', 20)} + style={{ + backgroundColor: theme === 'dark' ? 'var(--color-background-soft)' : 'var(--color-primary-light)', + border: `1px solid ${theme === 'dark' ? 'var(--color-border-soft)' : 'var(--color-primary-soft)'}`, + opacity: 0.9 + }} + /> + {messages.map((message, index) => { const opacity = 0.5 + calculateValueByDistance(message.id, 1) const scale = 1 + calculateValueByDistance(message.id, 1)