From d313dc67546932e949baec2291e55f7839d50566 Mon Sep 17 00:00:00 2001
From: Ilango <rajagopalilango@gmail.com>
Date: Mon, 19 Feb 2024 19:20:07 +0530
Subject: [PATCH] Show transcribed audio inputs as message along with audio
 clip in internal chat

---
 packages/server/src/index.ts                      |  5 ++++-
 .../src/ui-component/dialog/ViewMessagesDialog.js |  4 ++--
 packages/ui/src/views/chatmessage/ChatMessage.js  | 15 +++++++++++++--
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/server/src/index.ts b/packages/server/src/index.ts
index 22185170..38edfd8f 100644
--- a/packages/server/src/index.ts
+++ b/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
diff --git a/packages/ui/src/ui-component/dialog/ViewMessagesDialog.js b/packages/ui/src/ui-component/dialog/ViewMessagesDialog.js
index a28f2c68..7456aa81 100644
--- a/packages/ui/src/ui-component/dialog/ViewMessagesDialog.js
+++ b/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) => {
diff --git a/packages/ui/src/views/chatmessage/ChatMessage.js b/packages/ui/src/views/chatmessage/ChatMessage.js
index 73d1c4a6..75a466d3 100644
--- a/packages/ui/src/views/chatmessage/ChatMessage.js
+++ b/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) => {