sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-27 17:35:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve responsive spacing of chat page footer buttons

Browse source 
- Remove x axis footer padding on small screens to preserve space,
  keep equal spacing between footer items
- Add 1rem margin to buttons to not have overlap in boundary
- Add 1rem y-axis padding to chat footer to not have focus boundary
  leave the footer boundary on smaller screens
This commit is contained in:
Debanjum Singh Solanky 2024-08-04 14:48:44 +05:30
parent 4f2fcc82f0
commit 60af173c4a
4 changed files with 10 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/interface/web/app/chat/chat.module.css
View file

@ -18,8 +18,6 @@ div.inputBox {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
margin-bottom: 20px; margin-bottom: 20px;
gap: 12px; gap: 12px;
padding-left: 20px;
padding-right: 20px;
align-content: center; align-content: center;
} }

2
src/interface/web/app/chat/page.tsx
View file

@ -86,7 +86,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
incomingMessages={props.streamedMessages} incomingMessages={props.streamedMessages}
/> />
</div> </div>
<div className={`${styles.inputBox} shadow-md bg-background align-middle items-center justify-center px-3 dark:bg-neutral-700 dark:border-0 dark:shadow-sm rounded-t-2xl rounded-b-none md:rounded-xl`}> <div className={`${styles.inputBox} p-1 md:px-2 shadow-md bg-background align-middle items-center justify-center dark:bg-neutral-700 dark:border-0 dark:shadow-sm rounded-t-2xl rounded-b-none md:rounded-xl`}>
<ChatInputArea <ChatInputArea
agentColor={agentMetadata?.color} agentColor={agentMetadata?.color}
isLoggedIn={props.isLoggedIn} isLoggedIn={props.isLoggedIn}

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

@ -7,7 +7,6 @@ import { Progress } from "@/components/ui/progress"
import 'katex/dist/katex.min.css'; import 'katex/dist/katex.min.css';
import { import {
ArrowCircleUp,
ArrowRight, ArrowRight,
ArrowUp, ArrowUp,
Browser, Browser,
@ -370,10 +369,10 @@ export default function ChatInputArea(props: ChatInputProps) {
/> />
<Button <Button
variant={'ghost'} variant={'ghost'}
className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500" className="!bg-none p-0 m-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
disabled={props.sendDisabled} disabled={props.sendDisabled}
onClick={handleFileButtonClick}> onClick={handleFileButtonClick}>
<Paperclip className='w-6 h-6 md:w-8 md:h-8' /> <Paperclip className='w-8 h-8' />
</Button> </Button>
<div className="grid w-full gap-1.5 relative"> <div className="grid w-full gap-1.5 relative">
<Textarea <Textarea
@ -399,13 +398,13 @@ export default function ChatInputArea(props: ChatInputProps) {
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button <Button
variant={'ghost'} variant={'ghost'}
className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500" className="!bg-none p-0 m-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
onClick={() => { onClick={() => {
setRecording(!recording); setRecording(!recording);
}} }}
disabled={props.sendDisabled} disabled={props.sendDisabled}
> >
<Stop weight='fill' className='w-6 h-6 md:w-8 md:h-8' /> <Stop weight='fill' className='w-8 h-8' />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
@ -423,14 +422,14 @@ export default function ChatInputArea(props: ChatInputProps) {
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button <Button
variant={'ghost'} variant={'ghost'}
className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500" className="!bg-none p-0 m-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
onClick={() => { onClick={() => {
setMessage("Listening..."); setMessage("Listening...");
setRecording(!recording); setRecording(!recording);
}} }}
disabled={props.sendDisabled} disabled={props.sendDisabled}
> >
<Microphone weight='fill' className='w-6 h-6 md:w-8 md:h-8' /> <Microphone weight='fill' className='w-8 h-8' />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
@ -441,10 +440,10 @@ export default function ChatInputArea(props: ChatInputProps) {
) )
} }
<Button <Button
className={`${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-1 h-auto text-3xl transition transform hover:-translate-y-1`} 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`}
onClick={onSendMessage} onClick={onSendMessage}
disabled={props.sendDisabled}> disabled={props.sendDisabled}>
<ArrowUp className='w-4 h-4 md:w-6 md:h-6' weight='bold' /> <ArrowUp className='w-6 h-6' weight='bold' />
</Button> </Button>
</div > </div >
</> </>

2
src/interface/web/app/page.tsx
View file

@ -184,7 +184,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
</div> </div>
} }
</div> </div>
<div className={`ml-auto mr-auto ${props.isMobileWidth ? 'w-full' : 'w-fit'}`}> <div className={`mx-auto ${props.isMobileWidth ? 'w-full' : 'w-fit'}`}>
{ {
!props.isMobileWidth && !props.isMobileWidth &&
<div className={`w-full ${styles.inputBox} shadow-lg bg-background align-middle items-center justify-center px-3 py-1 dark:bg-neutral-700 border-stone-100 dark:border-none dark:shadow-none rounded-2xl`}> <div className={`w-full ${styles.inputBox} shadow-lg bg-background align-middle items-center justify-center px-3 py-1 dark:bg-neutral-700 border-stone-100 dark:border-none dark:shadow-none rounded-2xl`}>