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

Improve share chat UI for alignment

Browse Source
This commit is contained in:
sabaimran
2024-12-20 12:28:31 -08:00
parent 7770caa793
commit ba792c02ba
3 changed files with 4 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/interface/web/app/components/allConversations/allConversations.tsx
View File

@@ -791,7 +791,7 @@ function ChatSessionsModal({ data, sideBarOpen }: ChatSessionsModalProps) {
> >
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<ChatsCircle className="inline h-4 w-4 mr-1" /> <ChatsCircle className="inline h-4 w-4 mr-1" />
{sideBarOpen ? "Find Conversations" : ""} {sideBarOpen ? "Find Conversation" : ""}
</span> </span>
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent>

17
src/interface/web/app/share/chat/page.tsx
View File

@@ -92,7 +92,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
/> />
</div> </div>
<div <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 h-fit ${chatHistoryCustomClassName} mr-auto ml-auto`} 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-2xl md:rounded-xl h-fit ${chatHistoryCustomClassName} mr-auto ml-auto`}
> >
<ChatInputArea <ChatInputArea
isLoggedIn={props.isLoggedIn} isLoggedIn={props.isLoggedIn}
@@ -193,7 +193,7 @@ export default function SharedChat() {
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4"> <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<SidebarTrigger className="-ml-1" /> <SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mr-2 h-4" /> <Separator orientation="vertical" className="mr-2 h-4" />
{conversationId && ( {paramSlug && (
<div <div
className={`${styles.chatTitleWrapper} text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mx-2 md:mr-8 col-auto h-fit`} className={`${styles.chatTitleWrapper} text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mx-2 md:mr-8 col-auto h-fit`}
> >
@@ -217,19 +217,6 @@ export default function SharedChat() {
<title>{title}</title> <title>{title}</title>
<div className={styles.chatBox}> <div className={styles.chatBox}>
<div className={styles.chatBoxBody}> <div className={styles.chatBoxBody}>
{!isMobileWidth && title && (
<div
className={`${styles.chatTitleWrapper} text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mr-8 pt-6 col-auto h-fit`}
>
{title && (
<h2
className={`text-lg text-ellipsis whitespace-nowrap overflow-x-hidden`}
>
{title}
</h2>
)}
</div>
)}
<Suspense fallback={<Loading />}> <Suspense fallback={<Loading />}>
<ChatBodyData <ChatBodyData
conversationId={conversationId} conversationId={conversationId}

12
src/interface/web/app/share/chat/sharedChat.module.css
View File

@@ -1,5 +1,5 @@
div.main { div.main {
height: 100vh; height: 100%;
color: hsla(var(--foreground)); color: hsla(var(--foreground));
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@@ -96,11 +96,6 @@ div.agentIndicator {
div.chatBody { div.chatBody {
grid-template-columns: 0fr 1fr; grid-template-columns: 0fr 1fr;
} }
div.chatBox {
padding: 0;
height: min-content;
}
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@@ -112,11 +107,6 @@ div.agentIndicator {
width: 100%; width: 100%;
} }
div.chatBox {
padding: 0;
height: min-content;
}
div.chatLayout { div.chatLayout {
gap: 0; gap: 0;
grid-template-columns: 1fr; grid-template-columns: 1fr;