v4.6-3 (#463)

projects/app/src/components/ChatBox/index.tsx

@@ -62,6 +62,7 @@ import styles from './index.module.scss';
 import { postQuestionGuide } from '@/web/core/ai/api';
 import { splitGuideModule } from '@/global/core/app/modules/utils';
 import { AppTTSConfigType } from '@/types/app';
+import { useSpeech } from '@/web/common/hooks/useSpeech';
 
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 24);
 
@@ -149,6 +150,8 @@ const ChatBox = (
   const [adminMarkData, setAdminMarkData] = useState<AdminMarkType & { chatItemId: string }>();
   const [questionGuides, setQuestionGuide] = useState<string[]>([]);
 
+  const { isSpeaking, startSpeak, stopSpeak } = useSpeech();
+
   const isChatting = useMemo(
     () =>
       chatHistory[chatHistory.length - 1] &&
@@ -857,8 +860,22 @@ const ChatBox = (
               right={['12px', '14px']}
               bottom={['15px', '13px']}
               borderRadius={'md'}
-              bg={TextareaDom.current?.value ? 'myBlue.600' : ''}
+              // bg={TextareaDom.current?.value ? 'myBlue.600' : ''}
+              cursor={'pointer'}
               lineHeight={1}
+              onClick={() => {
+                if (isChatting) {
+                  return chatController.current?.abort('stop');
+                }
+                if (TextareaDom.current?.value) {
+                  return handleSubmit((data) => sendPrompt(data, TextareaDom.current?.value))();
+                }
+                // speech
+                // if (isSpeaking) {
+                //   return stopSpeak();
+                // }
+                // startSpeak();
+              }}
             >
               {isChatting ? (
                 <MyIcon
@@ -868,19 +885,14 @@ const ChatBox = (
                   cursor={'pointer'}
                   name={'stop'}
                   color={'gray.500'}
-                  onClick={() => chatController.current?.abort('stop')}
                 />
               ) : (
                 <MyTooltip label={t('core.chat.Send Message')}>
                   <MyIcon
                     name={'core/chat/sendFill'}
-                    width={'16px'}
-                    height={'16px'}
-                    cursor={'pointer'}
-                    color={TextareaDom.current?.value ? 'white' : 'myBlue.600'}
-                    onClick={() => {
-                      handleSubmit((data) => sendPrompt(data, TextareaDom.current?.value))();
-                    }}
+                    width={['16px', '22px']}
+                    height={['16px', '22px']}
+                    color={TextareaDom.current?.value ? 'myBlue.600' : 'myGray.400'}
                   />
                 </MyTooltip>
               )}