Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-06 05:09:09 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor(ThinkingEffect): improve thinking effect logic and styles

Browse Source
This commit is contained in:
Teo 2025-07-17 19:43:13 +08:00 committed by GitHub
parent e85ea1ff28
commit 7fb7061ca7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,24 +25,31 @@ const ThinkingEffect: React.FC<Props> = ({ isThinking, thinkingTimeText, content
} }
}, [content, isThinking, messages]) }, [content, isThinking, messages])
const showThinking = useMemo(() => {
return isThinking && !expanded
}, [expanded, isThinking])
const LINE_HEIGHT = 14 const LINE_HEIGHT = 14
const containerHeight = useMemo(() => { const containerHeight = useMemo(() => {
if (expanded || messages.length < 2) return 38 if (!showThinking || messages.length < 2) return 38
return Math.min(68, Math.max(messages.length + 1, 2) * LINE_HEIGHT + 10) return Math.min(68, Math.max(messages.length + 1, 2) * LINE_HEIGHT + 10)
}, [expanded, messages.length]) }, [showThinking, messages.length])
return ( return (
<ThinkingContainer style={{ height: containerHeight }} className={expanded ? 'expanded' : ''}> <ThinkingContainer style={{ height: containerHeight }} className={expanded ? 'expanded' : ''}>
<LoadingContainer> <LoadingContainer>
<motion.div variants={lightbulbVariants} animate={isThinking ? 'active' : 'idle'} initial="idle"> <motion.div variants={lightbulbVariants} animate={isThinking ? 'active' : 'idle'} initial="idle">
<Lightbulb size={expanded || !messages.length ? 20 : 30} style={{ transition: 'width,height, 150ms' }} /> <Lightbulb
size={!showThinking || messages.length < 2 ? 20 : 30}
style={{ transition: 'width,height, 150ms' }}
/>
</motion.div> </motion.div>
</LoadingContainer> </LoadingContainer>
<TextContainer> <TextContainer>
<Title className={expanded || !messages.length ? 'expanded' : ''}>{thinkingTimeText}</Title> <Title className={!showThinking || !messages.length ? 'showThinking' : ''}>{thinkingTimeText}</Title>
{!expanded && ( {showThinking && (
<Content> <Content>
<Messages <Messages
style={{ style={{
@ -68,15 +75,15 @@ const ThinkingEffect: React.FC<Props> = ({ isThinking, thinkingTimeText, content
)} )}
</TextContainer> </TextContainer>
<ArrowContainer className={expanded ? 'expanded' : ''}> <ArrowContainer className={expanded ? 'expanded' : ''}>
<ChevronRight size={20} color="var(--color-text-3)" strokeWidth={1.2} /> <ChevronRight size={20} color="var(--color-text-3)" strokeWidth={1} />
</ArrowContainer> </ArrowContainer>
</ThinkingContainer> </ThinkingContainer>
) )
} }
const ThinkingContainer = styled(motion.div)` const ThinkingContainer = styled.div`
width: 100%; width: 100%;
border-radius: 12px; border-radius: 10px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
display: flex; display: flex;
@ -86,7 +93,7 @@ const ThinkingContainer = styled(motion.div)`
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
&.expanded { &.expanded {
border-radius: 12px 12px 0 0; border-radius: 10px 10px 0 0;
} }
` `
@ -99,7 +106,7 @@ const Title = styled.div`
padding: 6px 0; padding: 6px 0;
z-index: 99; z-index: 99;
transition: padding-top 150ms; transition: padding-top 150ms;
&.expanded { &.showThinking {
padding-top: 12px; padding-top: 12px;
} }
` `