sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2025-02-17 08:04:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
Show stats 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) {
return (
<>
<ScrollArea className="h-[40vh]">
<ScrollAreaScrollbar orientation="vertical" className="h-full w-2.5 border-l border-l-transparent p-[1px]" />
<div className={styles.sessionsList}>
{props.subsetOrganizedData != null && Object.keys(props.subsetOrganizedData).map((timeGrouping) => (
<div key={timeGrouping} className={`my-4`}>
<div className={`text-muted-foreground text-sm font-bold p-[0.5rem] `}>
{timeGrouping}
<div>
<ScrollArea>
<ScrollAreaScrollbar orientation="vertical" className="h-full w-2.5 border-l border-l-transparent p-[1px]" />
<div className={styles.sessionsList}>
{props.subsetOrganizedData != null && Object.keys(props.subsetOrganizedData).map((timeGrouping) => (
<div key={timeGrouping} className={`my-4`}>
<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>
{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>
</ScrollArea>
{
(props.data && props.data.length > 5) && (
<ChatSessionsModal data={props.organizedData} showSidePanel={props.setEnabled} />
)
}
))}
</div>
</ScrollArea>
{
(props.data && props.data.length > 5) && (
<ChatSessionsModal data={props.organizedData} showSidePanel={props.setEnabled} />
)
}
</div>
<FilesMenu conversationId={props.conversationId} uploadedFiles={props.uploadedFiles} isMobileWidth={props.isMobileWidth} />
{props.userProfile &&
<UserProfileComponent userProfile={props.userProfile} webSocketConnected={props.webSocketConnected} collapsed={false} />
@ -546,7 +548,7 @@ function ChatSessionsModal({ data, showSidePanel }: ChatSessionsModalProps) {
<Dialog>
<DialogTrigger
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>
<DialogContent>
<DialogHeader>

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

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