chore: listening css

ChatGPTNextWeb · Oct 14, 2024 · 7475519 · 7475519
1 parent b91c224
commit 7475519
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git 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
@@ -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>