Show transcribed audio inputs as message along with audio clip in internal chat

packages/server/src/index.ts

@@ -1811,7 +1811,7 @@ export class App {
                     }
 
                     // Run Speech to Text conversion
-                    if (upload.mime === 'audio/webm' && incomingInput.uploads?.length === 1) {
+                    if (upload.mime === 'audio/webm') {
                         let speechToTextConfig: ICommonObject = {}
                         if (chatflow.speechToText) {
                             const speechToTextProviders = JSON.parse(chatflow.speechToText)
@@ -2111,6 +2111,9 @@ export class App {
             })
 
             // Prepare response
+            // return the question in the response
+            // this is used when input text is empty but question is in audio format
+            result.question = incomingInput.question
             result.chatId = chatId
             result.chatMessageId = chatMessage.id
             if (sessionId) result.sessionId = sessionId

packages/ui/src/ui-component/dialog/ViewMessagesDialog.js

@@ -688,9 +688,9 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
                                                                         style={{
                                                                             display: 'flex',
                                                                             flexWrap: 'wrap',
-                                                                            flexDirection: 'row',
+                                                                            flexDirection: 'column',
                                                                             width: '100%',
-                                                                            gap: '4px'
+                                                                            gap: '8px'
                                                                         }}
                                                                     >
                                                                         {message.fileUploads.map((item, index) => {

packages/ui/src/views/chatmessage/ChatMessage.js

@@ -391,6 +391,17 @@ export const ChatMessage = ({ open, chatflowid, isDialog, previews, setPreviews
 
                 if (!chatId) setChatId(data.chatId)
 
+                if (input === '' && data.question) {
+                    // the response contains the question even if it was in an audio format
+                    // so if input is empty but the response contains the question, update the user message to show the question
+                    setMessages((prevMessages) => {
+                        let allMessages = [...cloneDeep(prevMessages)]
+                        if (allMessages[allMessages.length - 2].type === 'apiMessage') return allMessages
+                        allMessages[allMessages.length - 2].message = data.question
+                        return allMessages
+                    })
+                }
+
                 if (!isChatFlowAvailableToStream) {
                     let text = ''
                     if (data.text) text = data.text
@@ -669,9 +680,9 @@ export const ChatMessage = ({ open, chatflowid, isDialog, previews, setPreviews
                                                 style={{
                                                     display: 'flex',
                                                     flexWrap: 'wrap',
-                                                    flexDirection: 'row',
+                                                    flexDirection: 'column',
                                                     width: '100%',
-                                                    gap: '4px'
+                                                    gap: '8px'
                                                 }}
                                             >
                                                 {message.fileUploads.map((item, index) => {