From 094eb5c17e6cecc9348d0e77d19415f46d90965f Mon Sep 17 00:00:00 2001
From: Teo <cheesen.xu@gmail.com>
Date: Mon, 14 Jul 2025 20:47:34 +0800
Subject: [PATCH] refactor(ThinkingEffect):  Enhance thinking effect (#8147)

refactor(ThinkingEffect): simplify opacity calculation and enhance background styling
---
 .../src/components/ThinkingEffect.tsx         | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/renderer/src/components/ThinkingEffect.tsx b/src/renderer/src/components/ThinkingEffect.tsx
index 8e55bf7eaf..b122e4401a 100644
--- a/src/renderer/src/components/ThinkingEffect.tsx
+++ b/src/renderer/src/components/ThinkingEffect.tsx
@@ -50,24 +50,14 @@ const ThinkingEffect: React.FC<Props> = ({ isThinking, thinkingTimeText, content
 
                 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 (
                   <ContentLineMotion
-                    key={`${index}-${message}`}
+                    key={index}
                     initial={{
-                      opacity: 1,
                       y: index === messages.length - 1 ? containerHeight : finalY + lineHeight,
                       height: lineHeight
                     }}
                     animate={{
-                      opacity,
                       y: finalY
                     }}
                     transition={{
@@ -148,6 +138,14 @@ const TextContainer = styled.div`
 const Content = styled(motion.div)`
   width: 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)`