sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-23 23:48:56 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 18

Show send button when text in chat input else voice message button

Browse source 
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
This commit is contained in:
Debanjum Singh Solanky 2024-08-04 19:25:49 +05:30
parent c627527a6f
commit 70f670dcf7
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/interface/web/app/components/chatInputArea/chatInputArea.tsx
View file

@ -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' />