From 8457f7127ebb6b5971531915bb732b15fc03d431 Mon Sep 17 00:00:00 2001
From: dreamer6680 <1468683855@qq.com>
Date: Tue, 8 Apr 2025 11:07:04 +0800
Subject: [PATCH 1/2] Update VoiceInput.tsx

---
 .../ChatBox/Input/VoiceInput.tsx              | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/VoiceInput.tsx b/projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/VoiceInput.tsx
index d02885dc3219..b43ba5b65396 100644
--- a/projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/VoiceInput.tsx
+++ b/projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/VoiceInput.tsx
@@ -37,7 +37,6 @@ const PCVoiceInput = ({
   canvasRef: React.RefObject<HTMLCanvasElement>;
 }) => {
   const { t } = useTranslation();
-
   return (
     <HStack h={'100%'} px={4}>
       <Box fontSize="sm" color="myGray.500" flex={'1 0 0'}>
@@ -96,7 +95,8 @@ const MobileVoiceInput = ({
   const startYRef = useRef(0);
 
   const [isCancel, setIsCancel] = useState(false);
-
+  const canvasPosition = canvasRef.current?.getBoundingClientRect();
+  const maskBottom = canvasPosition ? `${window.innerHeight - canvasPosition.top}px` : '50px';
   const handleTouchStart = useCallback(
     (e: React.TouchEvent<HTMLDivElement>) => {
       isPressing.current = true;
@@ -184,26 +184,26 @@ const MobileVoiceInput = ({
           flex="0 0 80%"
           visibility={isSpeaking ? 'visible' : 'hidden'}
         />
-      </Flex>
 
-      {/* Mask */}
-      {isSpeaking && (
-        <Flex
-          justifyContent="center"
-          alignItems="center"
-          height="100%"
-          position="fixed"
-          left={0}
-          right={0}
-          bottom={'50px'}
-          h={'200px'}
-          bg="linear-gradient(to top, white, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0))"
-        >
-          <Box fontSize="sm" color="myGray.500" position="absolute" bottom={'10px'}>
-            {isCancel ? t('chat:release_cancel') : t('chat:release_send')}
-          </Box>
-        </Flex>
-      )}
+        {/* Mask */}
+        {isSpeaking && (
+          <Flex
+            justifyContent="center"
+            alignItems="center"
+            height="100%"
+            position="fixed"
+            left={0}
+            right={0}
+            bottom={maskBottom}
+            h={'200px'}
+            bg="linear-gradient(to top, white, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0))"
+          >
+            <Box fontSize="sm" color="myGray.500" position="absolute" bottom={'10px'}>
+              {isCancel ? t('chat:release_cancel') : t('chat:release_send')}
+            </Box>
+          </Flex>
+        )}
+      </Flex>
     </Flex>
   );
 };

From 296889e3f6cd0bef55808384bfa6558ebfe9134a Mon Sep 17 00:00:00 2001
From: dreamer6680 <1468683855@qq.com>
Date: Tue, 8 Apr 2025 11:10:11 +0800
Subject: [PATCH 2/2] Update VoiceInput.tsx

---
 .../ChatBox/Input/VoiceInput.tsx              | 39 ++++++++++---------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/VoiceInput.tsx b/projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/VoiceInput.tsx
index b43ba5b65396..c5c9e909caef 100644
--- a/projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/VoiceInput.tsx
+++ b/projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/VoiceInput.tsx
@@ -37,6 +37,7 @@ const PCVoiceInput = ({
   canvasRef: React.RefObject<HTMLCanvasElement>;
 }) => {
   const { t } = useTranslation();
+
   return (
     <HStack h={'100%'} px={4}>
       <Box fontSize="sm" color="myGray.500" flex={'1 0 0'}>
@@ -184,26 +185,26 @@ const MobileVoiceInput = ({
           flex="0 0 80%"
           visibility={isSpeaking ? 'visible' : 'hidden'}
         />
-
-        {/* Mask */}
-        {isSpeaking && (
-          <Flex
-            justifyContent="center"
-            alignItems="center"
-            height="100%"
-            position="fixed"
-            left={0}
-            right={0}
-            bottom={maskBottom}
-            h={'200px'}
-            bg="linear-gradient(to top, white, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0))"
-          >
-            <Box fontSize="sm" color="myGray.500" position="absolute" bottom={'10px'}>
-              {isCancel ? t('chat:release_cancel') : t('chat:release_send')}
-            </Box>
-          </Flex>
-        )}
       </Flex>
+
+      {/* Mask */}
+      {isSpeaking && (
+        <Flex
+          justifyContent="center"
+          alignItems="center"
+          height="100%"
+          position="fixed"
+          left={0}
+          right={0}
+          bottom={maskBottom}
+          h={'200px'}
+          bg="linear-gradient(to top, white, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0))"
+        >
+          <Box fontSize="sm" color="myGray.500" position="absolute" bottom={'10px'}>
+            {isCancel ? t('chat:release_cancel') : t('chat:release_send')}
+          </Box>
+        </Flex>
+      )}
     </Flex>
   );
 };