From 517c2f2916994511abe09d14a88286eccb26a6f1 Mon Sep 17 00:00:00 2001
From: Ilango <rajagopalilango@gmail.com>
Date: Tue, 30 Jan 2024 15:30:07 +0530
Subject: [PATCH] Fix error message when audio recording is not available

---
 .../ui/src/views/chatmessage/ChatMessage.css  |  2 +-
 .../ui/src/views/chatmessage/ChatMessage.js   | 71 ++++++++++---------
 .../src/views/chatmessage/audio-recording.css |  2 +-
 3 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/packages/ui/src/views/chatmessage/ChatMessage.css b/packages/ui/src/views/chatmessage/ChatMessage.css
index 6742fbac..b7217909 100644
--- a/packages/ui/src/views/chatmessage/ChatMessage.css
+++ b/packages/ui/src/views/chatmessage/ChatMessage.css
@@ -151,7 +151,7 @@
 .cloud-dialog {
     width: 100%;
     height: auto;
-    max-height: calc(100% - 72px);
+    max-height: calc(100% - 54px);
     overflow-y: scroll;
     display: flex;
     justify-content: center;
diff --git a/packages/ui/src/views/chatmessage/ChatMessage.js b/packages/ui/src/views/chatmessage/ChatMessage.js
index bea1acd1..fdfcb90f 100644
--- a/packages/ui/src/views/chatmessage/ChatMessage.js
+++ b/packages/ui/src/views/chatmessage/ChatMessage.js
@@ -287,7 +287,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
     }
 
     const onRecordingCancelled = () => {
-        cancelAudioRecording()
+        if (!recordingNotSupported) cancelAudioRecording()
         setIsRecording(false)
         setRecordingNotSupported(false)
     }
@@ -855,8 +855,8 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                 )}
                 {isRecording ? (
                     <>
-                        {recordingNotSupported && (
-                            <div className='overlay hide'>
+                        {recordingNotSupported ? (
+                            <div className='overlay'>
                                 <div className='browser-not-supporting-audio-recording-box'>
                                     <Typography variant='body1'>
                                         To record audio, use modern browsers like Chrome or Firefox that support audio recording.
@@ -872,35 +872,42 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                                     </Button>
                                 </div>
                             </div>
+                        ) : (
+                            <Box
+                                sx={{
+                                    width: '100%',
+                                    height: '54px',
+                                    px: 2,
+                                    border: '1px solid',
+                                    borderRadius: 3,
+                                    backgroundColor: customization.isDarkMode ? '#32353b' : '#fafafa',
+                                    borderColor: 'rgba(0, 0, 0, 0.23)',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between'
+                                }}
+                            >
+                                <div className='recording-elapsed-time'>
+                                    <span className='red-recording-dot'>
+                                        <IconCircleDot />
+                                    </span>
+                                    <Typography id='elapsed-time'>00:00</Typography>
+                                    {isLoadingRecording && <Typography ml={1.5}>Sending...</Typography>}
+                                </div>
+                                <div className='recording-control-buttons-container'>
+                                    <IconButton onClick={onRecordingCancelled} size='small'>
+                                        <IconX
+                                            color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'}
+                                        />
+                                    </IconButton>
+                                    <IconButton onClick={onRecordingStopped} size='small'>
+                                        <IconSend
+                                            color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'}
+                                        />
+                                    </IconButton>
+                                </div>
+                            </Box>
                         )}
-                        <Box
-                            sx={{
-                                width: '100%',
-                                height: '54px',
-                                px: 2,
-                                borderRadius: 1.5,
-                                backgroundColor: '#32353b',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'space-between'
-                            }}
-                        >
-                            <div className='recording-elapsed-time'>
-                                <span className='red-recording-dot'>
-                                    <IconCircleDot />
-                                </span>
-                                <Typography id='elapsed-time'>00:00</Typography>
-                                {isLoadingRecording && <Typography ml={1.5}>Sending...</Typography>}
-                            </div>
-                            <div className='recording-control-buttons-container'>
-                                <IconButton onClick={onRecordingCancelled} size='small'>
-                                    <IconX color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'} />
-                                </IconButton>
-                                <IconButton onClick={onRecordingStopped} size='small'>
-                                    <IconSend color={loading || !chatflowid ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'} />
-                                </IconButton>
-                            </div>
-                        </Box>
                     </>
                 ) : (
                     <form style={{ width: '100%' }} onSubmit={handleSubmit}>
@@ -936,7 +943,7 @@ export const ChatMessage = ({ open, chatflowid, isDialog }) => {
                             }
                             endAdornment={
                                 <>
-                                    {isChatFlowAvailableForUploads && (
+                                    {isChatFlowAvailableForSpeech && (
                                         <InputAdornment position='end'>
                                             <IconButton
                                                 onClick={() => onMicrophonePressed()}
diff --git a/packages/ui/src/views/chatmessage/audio-recording.css b/packages/ui/src/views/chatmessage/audio-recording.css
index 4b8e5566..c5d9fac9 100644
--- a/packages/ui/src/views/chatmessage/audio-recording.css
+++ b/packages/ui/src/views/chatmessage/audio-recording.css
@@ -115,6 +115,7 @@
     }
     .overlay {
         width: 100%;
+        height: '54px';
         /*targeting Chrome & Safari*/
         display: -webkit-flex;
         /*targeting IE10*/
@@ -123,7 +124,6 @@
         justify-content: center;
         /*horizontal centering*/
         align-items: center;
-        margin-bottom: 12px;
     }
     .overlay.hide {
         display: none;