klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-07 13:23:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve structure of chat footer on mobile to put agents above input

Browse Source
This commit is contained in:
Debanjum Singh Solanky
2024-08-03 11:31:57 +05:30
parent 529ffdb7e3
commit cf8745ef78
1 changed files with 28 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/interface/web/app/page.tsx
View File

@@ -242,34 +242,36 @@ function ChatBodyData(props: ChatBodyDataProps) {
</div> </div>
{ {
props.isMobileWidth && props.isMobileWidth &&
<div className={`${styles.inputBox} shadow-md dark:bg-neutral-700 bg-background dark: align-middle items-center justify-center py-3 px-1`}> <>
<ChatInputArea <div className={`${styles.inputBox} w-full shadow-md dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 px-1`}>
isLoggedIn={props.isLoggedIn} <div className="flex gap-2 items-center justify-left pt-2 pb-4 px-10">
sendMessage={(message) => setMessage(message)} {agentIcons.map((icon, index) => (
sendDisabled={processingMessage} <Card
chatOptionsData={props.chatOptionsData} key={`${index}-${agents[index].slug}`}
conversationId={null} className={
isMobileWidth={props.isMobileWidth} `${selectedAgent === agents[index].slug ? convertColorToBorderClass(agents[index].color) : 'border-muted text-muted-foreground'} hover:cursor-pointer`
setUploadedFiles={props.setUploadedFiles} /> }>
<div className="flex gap-2 items-center justify-left pt-4"> <CardTitle
{agentIcons.map((icon, index) => ( className='text-center text-xs font-medium flex justify-center items-center px-1.5 py-2'
<Card onClick={() => setSelectedAgent(agents[index].slug)}>
key={`${index}-${agents[index].slug}`} {icon} {agents[index].name}
className={ </CardTitle>
`${selectedAgent === agents[index].slug ? convertColorToBorderClass(agents[index].color) : 'border-muted text-muted-foreground'} hover:cursor-pointer` </Card>
}> ))}
<CardTitle <Card className='border-none shadow-none flex justify-center items-center hover:cursor-pointer' onClick={() => window.location.href = "/agents"}>
className='text-center text-xs font-medium flex justify-center items-center px-1.5 py-2' <CardTitle className={`text-center ${props.isMobileWidth ? 'text-xs' : 'text-md'} font-normal flex justify-center items-center px-1.5 py-2`}>See All →</CardTitle>
onClick={() => setSelectedAgent(agents[index].slug)}>
{icon} {agents[index].name}
</CardTitle>
</Card> </Card>
))} </div>
<Card className='border-none shadow-none flex justify-center items-center hover:cursor-pointer' onClick={() => window.location.href = "/agents"}> <ChatInputArea
<CardTitle className={`text-center ${props.isMobileWidth ? 'text-xs' : 'text-md'} font-normal flex justify-center items-center px-1.5 py-2`}>See All →</CardTitle> isLoggedIn={props.isLoggedIn}
</Card> sendMessage={(message) => setMessage(message)}
sendDisabled={processingMessage}
chatOptionsData={props.chatOptionsData}
conversationId={null}
isMobileWidth={props.isMobileWidth}
setUploadedFiles={props.setUploadedFiles} />
</div> </div>
</div> </>
} }
</div> </div>
); );