Make most major changes for an updated chat UI (#843)

- Updated references panel - Use subtle coloring for chat cards - Chat streaming with train of thought - Side panel with limited sessions, expandable - Manage conversation file filters easily from the side panel - Updated nav menu, easily go to agents/automations/profile - Upload data from the chat UI (on click attachment icon) - Slash command pop-up menu, scrollable and selectable - Dark mode-enabled - Mostly mobile friendly
khoj-ai · Jul 14, 2024 · 06dce47 · 06dce47
1 parent 02658ad
commit 06dce47
Show file tree

Hide file tree

Showing 46 changed files with 5,642 additions and 944 deletions.
diff --git a/src/interface/web/app/agents/page.tsx b/src/interface/web/app/agents/page.tsx
@@ -96,7 +96,7 @@ function AgentModal(props: AgentModalProps) {
                                 props.setShowModal(false);
                                 }}>
                                 <Image
-                                        src="Close.svg"
+                                        src="close.svg"
                                         alt="Close"
                                         width={24}
                                         height={24} />

diff --git a/src/interface/web/app/chat/chat.module.css b/src/interface/web/app/chat/chat.module.css
@@ -1,6 +1,6 @@
 div.main {
     height: 100vh;
-    color: black;
+    color: hsla(var(--foreground));
 }
 
 .suggestions {
@@ -11,26 +11,29 @@ div.main {
 }
 
 div.inputBox {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    padding: 1rem;
-    border-radius: 1rem;
-    background-color: #f5f5f5;
-    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--border-color);
+    border-radius: 16px;
+    box-shadow: 0 4px 10px var(--box-shadow-color);
+    margin-bottom: 20px;
+    gap: 12px;
+    padding-left: 20px;
+    padding-right: 20px;
+    align-content: center;
 }
 
 input.inputBox {
     border: none;
-    outline: none;
-    background-color: transparent;
 }
 
 input.inputBox:focus {
-    border: none;
     outline: none;
     background-color: transparent;
 }
 
+div.inputBox:focus {
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+}
+
 div.chatBodyFull {
     display: grid;
     grid-template-columns: 1fr;
@@ -54,7 +57,7 @@ div.chatBody {
 }
 
 .inputBox {
-    color: black;
+    color: hsla(var(--foreground));
 }
 
 div.chatLayout {
@@ -65,16 +68,33 @@ div.chatLayout {
 
 div.chatBox {
     display: grid;
-    gap: 1rem;
     height: 100%;
-    padding: 1rem;
 }
 
 div.titleBar {
     display: grid;
     grid-template-columns: 1fr auto;
 }
 
+div.chatBoxBody {
+    display: grid;
+    height: 100%;
+    width: 70%;
+    margin: auto;
+}
+
+div.agentIndicator a {
+    display: flex;
+    text-align: center;
+    align-content: center;
+    align-items: center;
+}
+
+div.agentIndicator {
+    padding: 10px;
+}
+
+
 @media (max-width: 768px) {
     div.chatBody {
         grid-template-columns: 0fr 1fr;
@@ -84,3 +104,23 @@ div.titleBar {
         padding: 0;
     }
 }
+
+@media screen and (max-width: 768px) {
+    div.inputBox {
+        margin-bottom: 0px;
+    }
+
+    div.chatBoxBody {
+        width: 100%;
+    }
+
+    div.chatBox {
+        padding: 0;
+    }
+
+    div.chatLayout {
+        gap: 0;
+        grid-template-columns: 1fr;
+    }
+
+}
diff --git a/src/interface/web/app/chat/layout.tsx b/src/interface/web/app/chat/layout.tsx
@@ -16,6 +16,15 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <meta httpEquiv="Content-Security-Policy"
+        content="default-src 'self' https://assets.khoj.dev;
+                       script-src 'self' https://assets.khoj.dev 'unsafe-inline' 'unsafe-eval';
+                       connect-src 'self' https://ipapi.co/json ws://localhost:42110;
+                       style-src 'self' https://assets.khoj.dev 'unsafe-inline' https://fonts.googleapis.com;
+                       img-src 'self' data: https://*.khoj.dev https://*.googleusercontent.com https://*.google.com/ https://*.gstatic.com;
+                       font-src 'self' https://assets.khoj.dev https://fonts.gstatic.com;
+                       child-src 'none';
+                       object-src 'none';"></meta>
       <body className={inter.className}>
         {children}
       </body>