Merge pull request #76 from Dhravya/kartik

Merge Kartik's Code

8 files changed, 125 insertions, 19 deletions

diff --git a/apps/web/app/(dash)/chat/chatWindow.tsx b/apps/web/app/(dash)/chat/chatWindow.tsx
index 23f49554..32fd1fce 100644
--- a/apps/web/app/(dash)/chat/chatWindow.tsx
+++ b/apps/web/app/(dash)/chat/chatWindow.tsx
@@ -291,7 +291,6 @@ function ChatWindow({
                       </Markdown>
                     </div>
                   </div>
-
                   {/* Justification */}
                   {chat.answer.justification &&
                     chat.answer.justification.length && (
diff --git a/apps/web/app/(dash)/chat/page.tsx b/apps/web/app/(dash)/chat/page.tsx
index 73519851..12b1bd2a 100644
--- a/apps/web/app/(dash)/chat/page.tsx
+++ b/apps/web/app/(dash)/chat/page.tsx
@@ -1,5 +1,9 @@
 import ChatWindow from "./chatWindow";
-import { chatSearchParamsCache } from "../../../lib/searchParams";
+import { chatSearchParamsCache } from "../../helpers/lib/searchParams";
+import { ChevronDownIcon, ClipboardIcon, SpeakerWaveIcon } from '@heroicons/react/24/outline'
+import Image from "next/image";
+import { ArrowRightIcon } from "@repo/ui/icons";
+import QueryInput from "@repo/ui/components/QueryInput";
 // @ts-expect-error
 await import("katex/dist/katex.min.css");
 
@@ -12,7 +16,93 @@ function Page({
 
   console.log(spaces);
 
-  return <ChatWindow q={q} spaces={[]} />;
+  return (
+    <div className="max-w-3xl z-10 mx-auto relative h-full overflow-y-auto no-scrollbar">
+      {/* <ChatWindow q={q} spaces={[]} /> */}
+
+      <div className="w-full pt-24 space-y-40">
+        {/* single q&A */}
+        {Array.from({ length: 1 }).map((_, i) => (
+
+          <div key={i} className="space-y-16">
+
+            {/* header */}
+            <div>
+              {/* query */}
+              <h1 className="text-white text-xl">Why is Retrieval-Augmented Generation important?</h1>
+            </div>
+
+            {/* response */}
+            <div className="space-y-10">
+
+              {/* related memories */}
+              <div className="space-y-4">
+                {/* section header */}
+                <div className="flex items-center gap-3">
+                  <h1>Related memories</h1>
+                  <button>
+                    <ChevronDownIcon className="size-4 stroke-2" />
+                  </button>
+                </div>
+
+                {/* section content */}
+                {/* collection of memories */}
+                <div className="flex items-center no-scrollbar overflow-auto gap-4">
+                  {/* related memory */}
+                  {Array.from({ length: 3 }).map((_, i) => (
+                    <div key={i} className="w-[350px] shrink-0 p-4 gap-2 rounded-2xl flex flex-col bg-secondary">
+
+                      <h3 className="text-[13px]">Webpage</h3>
+                      <p className="line-clamp-2 text-white">What is RAG? - Retrieval-Augmented Generation Explained - AWS</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* summary */}
+              <div className="space-y-4">
+                {/* section header */}
+                <div className="flex items-center gap-3">
+                  <h1>Summary</h1>
+                  <button>
+                    <ChevronDownIcon className="size-4 stroke-2" />
+                  </button>
+                </div>
+
+                {/* section content */}
+                <div>
+                  <p className="text-white text-base">
+                    Retrieval-Augmented Generation is crucial because it combines the strengths of retrieval-based methods, ensuring relevance and accuracy, with generation-based models, enabling creativity and flexibility. By integrating retrieval mechanisms, it addresses data sparsity issues, improves content relevance, offers fine-tuned control over output, handles ambiguity, and allows for continual learning, making it highly adaptable and effective across various natural language processing tasks and domains.
+                  </p>
+
+                  {/* response actions */}
+                  <div className="mt-3 relative -left-2 flex items-center gap-1">
+                    {/* speak response */}
+                    <button className="group h-8 w-8 flex justify-center items-center active:scale-75 duration-200">
+                      <SpeakerWaveIcon className="size-[18px] group-hover:text-primary" />
+                    </button>
+                    {/* copy response */}
+                    <button className="group h-8 w-8 flex justify-center items-center active:scale-75 duration-200">
+                      <ClipboardIcon className="size-[18px] group-hover:text-primary" />
+                    </button>
+                  </div>
+                </div>
+
+              </div>
+
+            </div>
+
+          </div>
+        ))}
+
+      </div>
+
+      <div className="fixed bottom-4 max-w-3xl w-full">
+        <QueryInput />
+      </div>
+
+    </div>
+  );
 }
 
 export default Page;
diff --git a/apps/web/app/(dash)/dynamicisland.tsx b/apps/web/app/(dash)/dynamicisland.tsx
index 6fa56fae..98fafc7a 100644
--- a/apps/web/app/(dash)/dynamicisland.tsx
+++ b/apps/web/app/(dash)/dynamicisland.tsx
@@ -39,7 +39,7 @@ export function DynamicIsland() {
   });
 
   return (
-    <div className="fixed z-40 left-1/2 -translate-x-1/2 top-12">
+    <div className="">
       <AnimatePresence mode="wait">
         <motion.div
           initial={{
diff --git a/apps/web/app/(dash)/header.tsx b/apps/web/app/(dash)/header.tsx
index 026cb080..040097fa 100644
--- a/apps/web/app/(dash)/header.tsx
+++ b/apps/web/app/(dash)/header.tsx
@@ -2,29 +2,40 @@ import React from "react";
 import Image from "next/image";
 import Link from "next/link";
 import Logo from "../../public/logo.svg";
-import { ChatIcon } from "@repo/ui/icons";
+import { AddIcon, ChatIcon } from "@repo/ui/icons";
 
 import DynamicIsland from "./dynamicisland";
 
 function Header() {
   return (
-    <div>
-      <div className="fixed left-0 w-full flex items-center justify-between z-10">
-        <Link className="px-5" href="/home">
+    <div className="p-4 relative z-30 h-16 flex items-center">
+
+      <div className="w-full flex items-center justify-between">
+        <Link className="" href="/home">
           <Image
             src={Logo}
             alt="SuperMemory logo"
-            className="hover:brightness-75 brightness-50 duration-200"
+            className="hover:brightness-125 duration-200"
           />
         </Link>
 
-        <DynamicIsland />
+        <div className="fixed z-30 left-1/2 -translate-x-1/2 top-5">
+          {/* <DynamicIsland /> */}
+          <button className="bg-secondary p-2 text-[#989EA4] rounded-full flex items-center justify-between gap-2 px-4 h-10 pr-5">
+            <Image 
+              src={AddIcon}
+              alt="add icon"
+            />
+            Add content
+          </button>
+        </div>
 
-        <button className="flex shrink-0 duration-200 items-center gap-2 px-5 py-1.5 rounded-xl hover:bg-secondary">
-          <Image src={ChatIcon} alt="Chat icon" />
+        <button className="flex duration-200 items-center text-[#7D8994] hover:bg-[#1F2429] text-[13px] gap-2 px-3 py-2 rounded-xl">
+          <Image src={ChatIcon} alt="Chat icon" className="w-5" />
           Start new chat
         </button>
       </div>
+
     </div>
   );
 }
diff --git a/apps/web/app/(dash)/home/page.tsx b/apps/web/app/(dash)/home/page.tsx
index 6fe26513..bdf6a61e 100644
--- a/apps/web/app/(dash)/home/page.tsx
+++ b/apps/web/app/(dash)/home/page.tsx
@@ -32,7 +32,7 @@ function Page({
       {/* all content goes here */}
       {/* <div className="">hi {firstTime ? 'first time' : ''}</div> */}
 
-      <div className="w-full h-96">
+      <div className="w-full pb-20">
         <QueryInput
           handleSubmit={(q, spaces) => {
             const newQ =
diff --git a/apps/web/app/(dash)/home/queryinput.tsx b/apps/web/app/(dash)/home/queryinput.tsx
index ce45e36b..4fadfb6f 100644
--- a/apps/web/app/(dash)/home/queryinput.tsx
+++ b/apps/web/app/(dash)/home/queryinput.tsx
@@ -69,7 +69,7 @@ function QueryInput({
             name="q"
             cols={30}
             rows={mini ? 2 : 4}
-            className="bg-transparent pt-2.5 text-base text-[#989EA4] focus:text-foreground duration-200 tracking-[3%] outline-none resize-none w-full p-4"
+            className="bg-transparent pt-2.5 text-base placeholder:text-[#5D6165] text-[#9DA0A4] focus:text-white duration-200 tracking-[3%] outline-none resize-none w-full p-4"
             placeholder="Ask your second brain..."
             onKeyDown={(e) => {
               if (e.key === "Enter") {
@@ -85,6 +85,7 @@ function QueryInput({
 
           <button
             type="submit"
+            onClick={e => e.preventDefault()}
             disabled={disabled}
             className="h-12 w-12 rounded-[14px] bg-[#21303D] all-center shrink-0 hover:brightness-125 duration-200 outline-none focus:outline focus:outline-primary active:scale-90"
           >
diff --git a/apps/web/app/(dash)/layout.tsx b/apps/web/app/(dash)/layout.tsx
index 3ec8926e..4e1f6989 100644
--- a/apps/web/app/(dash)/layout.tsx
+++ b/apps/web/app/(dash)/layout.tsx
@@ -12,12 +12,17 @@ async function Layout({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <main className="h-screen flex flex-col p-4 relative ">
-      <Header />
+    <main className="h-screen flex flex-col">
+
+      <div className="fixed top-0 left-0 w-full">
+        <Header />
+      </div>
 
       <Menu />
 
-      {children}
+      <div className="w-full h-full">
+        {children}
+      </div>
 
       <Toaster />
     </main>
diff --git a/apps/web/app/(dash)/menu.tsx b/apps/web/app/(dash)/menu.tsx
index 5f26f545..035e8e3f 100644
--- a/apps/web/app/(dash)/menu.tsx
+++ b/apps/web/app/(dash)/menu.tsx
@@ -23,14 +23,14 @@ function Menu() {
   ];
 
   return (
-    <div className="fixed h-screen pb-[25vh] w-full p-4 flex items-end justify-end lg:justify-start lg:items-center top-0 left-0 pointer-events-none">
+    <div className="fixed h-screen pb-20 w-full p-4 flex items-end justify-end lg:justify-start lg:items-center top-0 left-0 pointer-events-none">
       <div className="">
         <div className="pointer-events-auto group flex w-14 text-foreground-menu text-[15px] font-medium flex-col items-start gap-6 overflow-hidden rounded-[28px] bg-secondary px-3 py-4 duration-200 hover:w-40">
           {menuItems.map((item) => (
             <Link
               href={item.url}
               key={item.url}
-              className="flex w-full cursor-pointer items-center gap-3 px-1 duration-200 hover:scale-105 hover:brightness-150 active:scale-90 justify-end md:justify-start"
+              className="flex w-full text-[#777E87] brightness-75 hover:brightness-125 cursor-pointer items-center gap-3 px-1 duration-200 hover:scale-105 active:scale-90 justify-end md:justify-start"
             >
               <p className="md:hidden opacity-0 duration-200 group-hover:opacity-100">
                 {item.text}