From 7475519473e68fff15fbd7dd77e2728cee6cba8d Mon Sep 17 00:00:00 2001
From: DDMeaqua <lzlloveyou@vip.qq.com>
Date: Mon, 14 Oct 2024 14:11:23 +0800
Subject: [PATCH] chore: listening css

---
 app/components/chat.module.scss | 8 ++++++++
 app/components/chat.tsx         | 6 +++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss
index 73542fc67f1..b5fd4dffd18 100644
--- a/app/components/chat.module.scss
+++ b/app/components/chat.module.scss
@@ -75,6 +75,14 @@
       pointer-events: none;
     }
 
+    &.listening {
+      width: var(--full-width);
+      .text {
+        opacity: 1;
+        transform: translate(0);
+      }
+    }
+
     &:hover {
       --delay: 0.5s;
       width: var(--full-width);
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 3ce9c993ecf..c9e302e2584 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -370,6 +370,7 @@ export function ChatAction(props: {
   text: string;
   icon: JSX.Element;
   onClick: () => void;
+  isListening: boolean;
 }) {
   const iconRef = useRef<HTMLDivElement>(null);
   const textRef = useRef<HTMLDivElement>(null);
@@ -391,7 +392,9 @@ export function ChatAction(props: {
 
   return (
     <div
-      className={`${styles["chat-input-action"]} clickable`}
+      className={`${styles["chat-input-action"]} clickable ${
+        props.isListening ? styles["listening"] : ""
+      }`}
       onClick={() => {
         props.onClick();
         setTimeout(updateWidth, 1);
@@ -838,6 +841,7 @@ export function ChatActions(props: {
           }
           text={isListening ? Locale.Chat.StopSpeak : Locale.Chat.StartSpeak}
           icon={isListening ? <VoiceOpenIcon /> : <VoiceCloseIcon />}
+          isListening={isListening}
         />
       )}
     </div>