whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: Support bottom anchor in message anchor line

Browse Source
This commit is contained in:
PilgrimLyieu 2025-03-27 11:23:26 +08:00 committed by 亢奋猫
parent 56e9a7371a
commit 7284679907
1 changed files with 30 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/renderer/src/pages/home/Messages/MessageAnchorLine.tsx
View File

@ -1,3 +1,4 @@
import { DownOutlined } from '@ant-design/icons'
import { APP_NAME, AppLogo, isLocalAi } from '@renderer/config/env' import { APP_NAME, AppLogo, isLocalAi } from '@renderer/config/env'
import { getModelLogo } from '@renderer/config/models' import { getModelLogo } from '@renderer/config/models'
import { useTheme } from '@renderer/context/ThemeProvider' import { useTheme } from '@renderer/context/ThemeProvider'
@ -129,6 +130,13 @@ const MessageAnchorLine: FC<MessageLineProps> = ({ messages }) => {
[setSelectedMessage] [setSelectedMessage]
) )
const scrollToBottom = useCallback(() => {
const messagesContainer = document.getElementById('messages')
if (messagesContainer) {
messagesContainer.scrollTo({ top: messagesContainer.scrollHeight, behavior: 'smooth' })
}
}, [])
if (messages.length === 0) return null if (messages.length === 0) return null
const handleMouseMove = (e: React.MouseEvent) => { const handleMouseMove = (e: React.MouseEvent) => {
@ -159,6 +167,28 @@ const MessageAnchorLine: FC<MessageLineProps> = ({ messages }) => {
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
$height={containerHeight}> $height={containerHeight}>
<MessagesList ref={messagesListRef} style={{ transform: `translateY(${listOffsetY}px)` }}> <MessagesList ref={messagesListRef} style={{ transform: `translateY(${listOffsetY}px)` }}>
<MessageItem
key="bottom-anchor"
ref={(el) => {
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}>
<MessageItemContainer
style={{ transform: `scale(${1 + calculateValueByDistance('bottom-anchor', 1)})` }}></MessageItemContainer>
<Avatar
icon={<DownOutlined style={{ color: theme === 'dark' ? 'var(--color-text)' : 'var(--color-primary)' }} />}
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
}}
/>
</MessageItem>
{messages.map((message, index) => { {messages.map((message, index) => {
const opacity = 0.5 + calculateValueByDistance(message.id, 1) const opacity = 0.5 + calculateValueByDistance(message.id, 1)
const scale = 1 + calculateValueByDistance(message.id, 1) const scale = 1 + calculateValueByDistance(message.id, 1)