Skip to content

Optimize the voice input component, adjust the display logic of the input box, fix the style of the voice input mask layer, update the transparency of the canvas background, and enhance the user interaction experience. #4435

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Merged
merged 1 commit into from
Apr 2, 2025
Merged

Optimize the voice input component, adjust the display logic of the input box, fix the style of the voice input mask layer, update the transparency of the canvas background, and enhance the user interaction experience. #4435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/ChatInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,11 +368,14 @@ const ChatInput = ({
</Box>

{/* voice input and loading container */}
<VoiceInput
ref={VoiceInputRef}
onSendMessage={onSendMessage}
resetInputVal={resetInputVal}
/>
{!inputValue && (
<VoiceInput
ref={VoiceInputRef}
onSendMessage={onSendMessage}
resetInputVal={resetInputVal}
/>
)}

{RenderTextarea}
</Box>
<ComplianceTip type={'chat'} />
Expand Down
64 changes: 32 additions & 32 deletions projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/VoiceInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,15 +152,14 @@ const MobileVoiceInput = ({
right={2}
top={'50%'}
transform={'translateY(-50%)'}
zIndex={4}
zIndex={5}
name={'core/chat/backText'}
h={'22px'}
w={'22px'}
onClick={onCloseSpeak}
/>
</MyTooltip>
)}

<Flex
alignItems={'center'}
justifyContent={'center'}
Expand All @@ -173,44 +172,46 @@ const MobileVoiceInput = ({
onTouchCancel={() => {
stopSpeak(true);
}}
zIndex={4}
userSelect={'none'}
>
{!isSpeaking && <Box>{t('chat:press_to_speak')}</Box>}
<Box visibility={isSpeaking ? 'hidden' : 'visible'}>{t('chat:press_to_speak')}</Box>
<Box
position="absolute"
h={'100%'}
w={'100%'}
as="canvas"
ref={canvasRef}
flex="0 0 80%"
visibility={isSpeaking ? 'visible' : 'hidden'}
/>
</Flex>

{/* Mask */}
{/* {isSpeaking && (
<Flex
justifyContent="center"
alignItems="center"
height="100%"
{/* 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))"
userSelect={'none'}
>
<Box
fontSize="sm"
fontWeight="medium"
color="gray.700"
position="absolute"
left={0}
right={0}
top={0}
bottom={0}
background="linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0.5) 100%)"
zIndex={4}
bottom={'10px'}
>
<Box
fontSize="sm"
fontWeight="medium"
color="gray.700"
position="relative"
zIndex={5}
bg="transparent"
>
{isCancel ? t('chat:release_cancel') : t('chat:release_send')}
</Box>
</Flex>
)} */}
</Flex>
{isCancel ? t('chat:release_cancel') : t('chat:release_send')}
</Box>
</Flex>
)}
</Flex>
);
};
Expand Down Expand Up @@ -239,10 +240,9 @@ const VoiceInput = forwardRef<VoiceInputComponentRef, VoiceInputProps>(

const [mobilePreSpeak, setMobilePreSpeak] = useState(false);

const finishSpeak = useCallback(() => {
const CloseSpeak = useCallback(() => {
setMobilePreSpeak(false);
stopSpeak(true);
}, [stopSpeak]);
}, []);

// Canvas render
useEffect(() => {
Expand Down Expand Up @@ -362,7 +362,7 @@ const VoiceInput = forwardRef<VoiceInputComponentRef, VoiceInputProps>(
alignItems={'center'}
bg={'white'}
color={'primary.500'}
zIndex={5}
zIndex={6}
>
<Spinner size={'sm'} mr={4} />
{t('common:core.chat.Converting to text')}
Expand Down
30 changes: 15 additions & 15 deletions projects/app/src/web/common/hooks/useSpeech.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export const useSpeech = (props?: OutLinkChatAuthProps & { appId?: string }) =>
canvasCtx.clearRect(0, 0, width, height);

// Set white background
canvasCtx.fillStyle = '#FFFFFF';
canvasCtx.fillStyle = 'rgba(255, 255, 255, 0)';
canvasCtx.fillRect(0, 0, width, height);

const centerY = height / 2;
Expand Down Expand Up @@ -201,20 +201,20 @@ export const useSpeech = (props?: OutLinkChatAuthProps & { appId?: string }) =>
console.log('请求转化');
setIsTransCription(true);
await delay(1000);
// try {
// const result = await POST<string>('/v1/audio/transcriptions', formData, {
// timeout: 60000,
// headers: {
// 'Content-Type': 'multipart/form-data; charset=utf-8'
// }
// });
// onFinish(result);
// } catch (error) {
// toast({
// status: 'warning',
// title: getErrText(error, t('common:common.speech.error tip'))
// });
// }
try {
const result = await POST<string>('/v1/audio/transcriptions', formData, {
timeout: 60000,
headers: {
'Content-Type': 'multipart/form-data; charset=utf-8'
}
});
onFinish(result);
} catch (error) {
toast({
status: 'warning',
title: getErrText(error, t('common:common.speech.error tip'))
});
}
setIsTransCription(false);
}
};
Expand Down
Loading