Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-10 23:59:45 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(ThinkingEffect): Enhance thinking effect (#8147)

Browse Source 
refactor(ThinkingEffect): simplify opacity calculation and enhance background styling
This commit is contained in:
Teo 2025-07-14 20:47:34 +08:00 committed by GitHub
parent 3d3182095d
commit 094eb5c17e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/renderer/src/components/ThinkingEffect.tsx
View File

@ -50,24 +50,14 @@ const ThinkingEffect: React.FC<Props> = ({ isThinking, thinkingTimeText, content
if (index < messages.length - 5) return null if (index < messages.length - 5) return null
const opacity = (() => {
const distanceFromLast = messages.length - 1 - index
if (distanceFromLast === 0) return 1
if (distanceFromLast === 1) return 0.6
if (distanceFromLast === 2) return 0.4
return 0
})()
return ( return (
<ContentLineMotion <ContentLineMotion
key={`${index}-${message}`} key={index}
initial={{ initial={{
opacity: 1,
y: index === messages.length - 1 ? containerHeight : finalY + lineHeight, y: index === messages.length - 1 ? containerHeight : finalY + lineHeight,
height: lineHeight height: lineHeight
}} }}
animate={{ animate={{
opacity,
y: finalY y: finalY
}} }}
transition={{ transition={{
@ -148,6 +138,14 @@ const TextContainer = styled.div`
const Content = styled(motion.div)` const Content = styled(motion.div)`
width: 100%; width: 100%;
height: 100%; height: 100%;
mask: linear-gradient(
to bottom,
rgb(0 0 0 / 0%) 0%,
rgb(0 0 0 / 0%) 35%,
rgb(0 0 0 / 25%) 40%,
rgb(0 0 0 / 100%) 90%,
rgb(0 0 0 / 100%) 100%
);
` `
const ContentLineMotion = styled(motion.div)` const ContentLineMotion = styled(motion.div)`