klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 05:39:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Conversations list should resize to take max space on side panel

Browse Source
This commit is contained in:
Debanjum Singh Solanky
2024-07-14 13:49:36 +05:30
parent c2bf405489
commit e6b21144e2
2 changed files with 33 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
View File

@@ -332,35 +332,37 @@ interface SessionsAndFilesProps {
function SessionsAndFiles(props: SessionsAndFilesProps) { function SessionsAndFiles(props: SessionsAndFilesProps) {
return ( return (
<> <>
<ScrollArea className="h-[40vh]"> <div>
<ScrollAreaScrollbar orientation="vertical" className="h-full w-2.5 border-l border-l-transparent p-[1px]" /> <ScrollArea>
<div className={styles.sessionsList}> <ScrollAreaScrollbar orientation="vertical" className="h-full w-2.5 border-l border-l-transparent p-[1px]" />
{props.subsetOrganizedData != null && Object.keys(props.subsetOrganizedData).map((timeGrouping) => ( <div className={styles.sessionsList}>
<div key={timeGrouping} className={`my-4`}> {props.subsetOrganizedData != null && Object.keys(props.subsetOrganizedData).map((timeGrouping) => (
<div className={`text-muted-foreground text-sm font-bold p-[0.5rem] `}> <div key={timeGrouping} className={`my-4`}>
{timeGrouping} <div className={`text-muted-foreground text-sm font-bold p-[0.5rem] `}>
{timeGrouping}
</div>
{props.subsetOrganizedData && props.subsetOrganizedData[timeGrouping].map((chatHistory) => (
<ChatSession
created={chatHistory.created}
compressed={true}
key={chatHistory.conversation_id}
conversation_id={chatHistory.conversation_id}
slug={chatHistory.slug}
agent_avatar={chatHistory.agent_avatar}
agent_name={chatHistory.agent_name}
showSidePanel={props.setEnabled}
/>
))}
</div> </div>
{props.subsetOrganizedData && props.subsetOrganizedData[timeGrouping].map((chatHistory) => ( ))}
<ChatSession </div>
created={chatHistory.created} </ScrollArea>
compressed={true} {
key={chatHistory.conversation_id} (props.data && props.data.length > 5) && (
conversation_id={chatHistory.conversation_id} <ChatSessionsModal data={props.organizedData} showSidePanel={props.setEnabled} />
slug={chatHistory.slug} )
agent_avatar={chatHistory.agent_avatar} }
agent_name={chatHistory.agent_name} </div>
showSidePanel={props.setEnabled}
/>
))}
</div>
))}
</div>
</ScrollArea>
{
(props.data && props.data.length > 5) && (
<ChatSessionsModal data={props.organizedData} showSidePanel={props.setEnabled} />
)
}
<FilesMenu conversationId={props.conversationId} uploadedFiles={props.uploadedFiles} isMobileWidth={props.isMobileWidth} /> <FilesMenu conversationId={props.conversationId} uploadedFiles={props.uploadedFiles} isMobileWidth={props.isMobileWidth} />
{props.userProfile && {props.userProfile &&
<UserProfileComponent userProfile={props.userProfile} webSocketConnected={props.webSocketConnected} collapsed={false} /> <UserProfileComponent userProfile={props.userProfile} webSocketConnected={props.webSocketConnected} collapsed={false} />
@@ -546,7 +548,7 @@ function ChatSessionsModal({ data, showSidePanel }: ChatSessionsModalProps) {
<Dialog> <Dialog>
<DialogTrigger <DialogTrigger
className="flex text-left text-medium text-gray-500 hover:text-gray-300 cursor-pointer my-4 text-sm p-[0.5rem]"> className="flex text-left text-medium text-gray-500 hover:text-gray-300 cursor-pointer my-4 text-sm p-[0.5rem]">
<span className="mr-2">See All <ArrowRight className="h-4 w-4" /></span> <span className="mr-2">See All <ArrowRight className="inline h-4 w-4" weight="bold"/></span>
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>

5
src/interface/web/app/components/sidePanel/sidePanel.module.css
View File

@@ -11,7 +11,7 @@ div.session {
} }
div.compressed { div.compressed {
grid-template-columns: minmax(auto, 12rem) 1fr 1fr; grid-template-columns: minmax(12rem, 100%) 1fr 1fr;
} }
div.sessionHover { div.sessionHover {
@@ -85,11 +85,10 @@ div.profile {
div.panelWrapper { div.panelWrapper {
display: grid; display: grid;
padding: 0 1rem; padding: 0 1rem;
grid-template-rows: auto 1fr auto auto; grid-template-rows: 1fr auto auto;
height: 100%; height: 100%;
} }
div.modalSessionsList { div.modalSessionsList {
position: fixed; position: fixed;
top: 0; top: 0;