From 70f670dcf7da73a80c2933947fcc56088ae33f80 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sun, 4 Aug 2024 19:25:49 +0530
Subject: [PATCH] Show send button when text in chat input else voice message
 button

Utilize chat footer space more efficiently. This is especially useful
on small screens

- Send button is anyway only enabled when there is text in chat input
- Otherwise voice message button is better to show by default
---
 .../web/app/components/chatInputArea/chatInputArea.tsx    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index 032c645e..73034abd 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -369,7 +369,7 @@ export default function ChatInputArea(props: ChatInputProps) {
                 />
                 <Button
                     variant={'ghost'}
-                    className="!bg-none p-0 m-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
+                    className="!bg-none p-0 m-2 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
                     disabled={props.sendDisabled}
                     onClick={handleFileButtonClick}>
                     <Paperclip className='w-8 h-8' />
@@ -398,7 +398,7 @@ export default function ChatInputArea(props: ChatInputProps) {
                                 <TooltipTrigger asChild>
                                     <Button
                                         variant={'ghost'}
-                                        className="!bg-none p-0 m-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
+                                        className={`${message && 'hidden'} !bg-none p-0 m-2 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500`}
                                         onClick={() => {
                                             setRecording(!recording);
                                         }}
@@ -422,7 +422,7 @@ export default function ChatInputArea(props: ChatInputProps) {
                                         <TooltipTrigger asChild>
                                             <Button
                                                 variant={'ghost'}
-                                                className="!bg-none p-0 m-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
+                                                className={`${message && 'hidden'} !bg-none p-0 m-2 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500`}
                                                 onClick={() => {
                                                     setMessage("Listening...");
                                                     setRecording(!recording);
@@ -440,7 +440,7 @@ export default function ChatInputArea(props: ChatInputProps) {
                         )
                 }
                 <Button
-                    className={`${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-1 mr-1 h-auto text-3xl transition transform hover:-translate-y-1`}
+                    className={`${!message && 'hidden'} ${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-1 m-2 h-auto text-3xl transition transform md:hover:-translate-y-1`}
                     onClick={onSendMessage}
                     disabled={props.sendDisabled}>
                     <ArrowUp className='w-6 h-6' weight='bold' />