xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-10-01 15:46:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

chore: listening css

Browse Source
This commit is contained in:
DDMeaqua 2024-10-14 14:11:23 +08:00
parent b91c224d75
commit 7475519473
2 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/chat.module.scss
View File

@ -75,6 +75,14 @@
pointer-events: none; pointer-events: none;
} }
&.listening {
width: var(--full-width);
.text {
opacity: 1;
transform: translate(0);
}
}
&:hover { &:hover {
--delay: 0.5s; --delay: 0.5s;
width: var(--full-width); width: var(--full-width);

6
app/components/chat.tsx
View File

@ -370,6 +370,7 @@ export function ChatAction(props: {
text: string; text: string;
icon: JSX.Element; icon: JSX.Element;
onClick: () => void; onClick: () => void;
isListening: boolean;
}) { }) {
const iconRef = useRef<HTMLDivElement>(null); const iconRef = useRef<HTMLDivElement>(null);
const textRef = useRef<HTMLDivElement>(null); const textRef = useRef<HTMLDivElement>(null);
@ -391,7 +392,9 @@ export function ChatAction(props: {
return ( return (
<div <div
className={`${styles["chat-input-action"]} clickable`} className={`${styles["chat-input-action"]} clickable ${
props.isListening ? styles["listening"] : ""
}`}
onClick={() => { onClick={() => {
props.onClick(); props.onClick();
setTimeout(updateWidth, 1); setTimeout(updateWidth, 1);
@ -838,6 +841,7 @@ export function ChatActions(props: {
} }
text={isListening ? Locale.Chat.StopSpeak : Locale.Chat.StartSpeak} text={isListening ? Locale.Chat.StopSpeak : Locale.Chat.StartSpeak}
icon={isListening ? <VoiceOpenIcon /> : <VoiceCloseIcon />} icon={isListening ? <VoiceOpenIcon /> : <VoiceCloseIcon />}
isListening={isListening}
/> />
)} )}
</div> </div>