Improve share chat UI for alignment

khoj-ai · Dec 20, 2024 · ba792c0 · ba792c0
1 parent 7770caa
commit ba792c0
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 27 deletions.
diff --git a/src/interface/web/app/components/allConversations/allConversations.tsx b/src/interface/web/app/components/allConversations/allConversations.tsx
@@ -791,7 +791,7 @@ function ChatSessionsModal({ data, sideBarOpen }: ChatSessionsModalProps) {
             >
                 <span className="flex items-center gap-1">
                     <ChatsCircle className="inline h-4 w-4 mr-1" />
-                    {sideBarOpen ? "Find Conversations" : ""}
+                    {sideBarOpen ? "Find Conversation" : ""}
                 </span>
             </DialogTrigger>
             <DialogContent>

diff --git a/src/interface/web/app/share/chat/page.tsx b/src/interface/web/app/share/chat/page.tsx
@@ -92,7 +92,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
                 />
             </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
                     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">
                     <SidebarTrigger className="-ml-1" />
                     <Separator orientation="vertical" className="mr-2 h-4" />
-                    {conversationId && (
+                    {paramSlug && (
                         <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`}
                         >
@@ -217,19 +217,6 @@ export default function SharedChat() {
                     <title>{title}</title>
                     <div className={styles.chatBox}>
                         <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 />}>
                                 <ChatBodyData
                                     conversationId={conversationId}

diff --git a/src/interface/web/app/share/chat/sharedChat.module.css b/src/interface/web/app/share/chat/sharedChat.module.css
@@ -1,5 +1,5 @@
 div.main {
-    height: 100vh;
+    height: 100%;
     color: hsla(var(--foreground));
     margin-left: auto;
     margin-right: auto;
@@ -96,11 +96,6 @@ div.agentIndicator {
     div.chatBody {
         grid-template-columns: 0fr 1fr;
     }
-
-    div.chatBox {
-        padding: 0;
-        height: min-content;
-    }
 }
 
 @media screen and (max-width: 768px) {
@@ -112,11 +107,6 @@ div.agentIndicator {
         width: 100%;
     }
 
-    div.chatBox {
-        padding: 0;
-        height: min-content;
-    }
-
     div.chatLayout {
         gap: 0;
         grid-template-columns: 1fr;