From 39ba65431d51964355d4075ad9cdbb50deeb8d5f Mon Sep 17 00:00:00 2001
From: Kartik <hellokartikk@gmail.com>
Date: Sun, 16 Jun 2024 13:14:28 +0530
Subject: improve: /home page

---
 apps/web/app/(dash)/dynamicisland.tsx   |  2 +-
 apps/web/app/(dash)/header.tsx          | 27 +++++++++++++++++++--------
 apps/web/app/(dash)/home/page.tsx       |  2 +-
 apps/web/app/(dash)/home/queryinput.tsx |  3 ++-
 apps/web/app/(dash)/layout.tsx          | 11 ++++++++---
 apps/web/app/(dash)/menu.tsx            |  4 ++--
 6 files changed, 33 insertions(+), 16 deletions(-)

(limited to 'apps/web/app')

diff --git a/apps/web/app/(dash)/dynamicisland.tsx b/apps/web/app/(dash)/dynamicisland.tsx
index 31f76fda..c08f883a 100644
--- a/apps/web/app/(dash)/dynamicisland.tsx
+++ b/apps/web/app/(dash)/dynamicisland.tsx
@@ -38,7 +38,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..4af5c569 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-10 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 b4bafb38..c539673d 100644
--- a/apps/web/app/(dash)/home/page.tsx
+++ b/apps/web/app/(dash)/home/page.tsx
@@ -25,7 +25,7 @@ async 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 initialSpaces={spaces.data} />
       </div>
     </div>
diff --git a/apps/web/app/(dash)/home/queryinput.tsx b/apps/web/app/(dash)/home/queryinput.tsx
index d0c27b8d..fbd537e3 100644
--- a/apps/web/app/(dash)/home/queryinput.tsx
+++ b/apps/web/app/(dash)/home/queryinput.tsx
@@ -63,7 +63,7 @@ function QueryInput({
             name="q"
             cols={30}
             rows={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") {
@@ -78,6 +78,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 b879a2f5..4c787c9c 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}
-- 
cgit v1.2.3


From 4cd16ecb06379f7610fe1fba335211ade1a1743e Mon Sep 17 00:00:00 2001
From: Kartik <hellokartikk@gmail.com>
Date: Sun, 16 Jun 2024 21:30:02 +0530
Subject: ui update: /chat

---
 apps/web/app/(dash)/chat/chatWindow.tsx |  1 +
 apps/web/app/(dash)/chat/page.tsx       | 81 ++++++++++++++++++++++++++++++++-
 2 files changed, 81 insertions(+), 1 deletion(-)

(limited to 'apps/web/app')

diff --git a/apps/web/app/(dash)/chat/chatWindow.tsx b/apps/web/app/(dash)/chat/chatWindow.tsx
index b631c835..bb6a0be1 100644
--- a/apps/web/app/(dash)/chat/chatWindow.tsx
+++ b/apps/web/app/(dash)/chat/chatWindow.tsx
@@ -201,6 +201,7 @@ function ChatWindow({
                       </Markdown>
                     </div>
                   </div>
+                  
                 </div>
               </div>
             ))}
diff --git a/apps/web/app/(dash)/chat/page.tsx b/apps/web/app/(dash)/chat/page.tsx
index fd4de826..f98c761f 100644
--- a/apps/web/app/(dash)/chat/page.tsx
+++ b/apps/web/app/(dash)/chat/page.tsx
@@ -1,5 +1,6 @@
 import ChatWindow from "./chatWindow";
 import { chatSearchParamsCache } from "../../helpers/lib/searchParams";
+import { ChevronDownIcon, ClipboardIcon, SpeakerWaveIcon } from '@heroicons/react/24/outline'
 // @ts-expect-error
 await import("katex/dist/katex.min.css");
 
@@ -12,7 +13,85 @@ function Page({
 
   console.log(spaces);
 
-  return <ChatWindow q={q} spaces={[]} />;
+  return (
+    <div>
+      {/* <ChatWindow q={q} spaces={[]} /> */}
+
+      <div className="max-w-3xl mx-auto pt-24">
+        {/* single q&A */}
+        <div 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>
+  );
 }
 
 export default Page;
-- 
cgit v1.2.3


From 62c4d88320fbcdf15c1e410874467d73af49632b Mon Sep 17 00:00:00 2001
From: Kartik <hellokartikk@gmail.com>
Date: Mon, 17 Jun 2024 00:07:40 +0530
Subject: add: animated query input

---
 apps/web/app/(dash)/chat/page.tsx | 123 +++++++++++++++++++++-----------------
 apps/web/app/(dash)/header.tsx    |   2 +-
 2 files changed, 68 insertions(+), 57 deletions(-)

(limited to 'apps/web/app')

diff --git a/apps/web/app/(dash)/chat/page.tsx b/apps/web/app/(dash)/chat/page.tsx
index f98c761f..12b1bd2a 100644
--- a/apps/web/app/(dash)/chat/page.tsx
+++ b/apps/web/app/(dash)/chat/page.tsx
@@ -1,6 +1,9 @@
 import ChatWindow from "./chatWindow";
 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");
 
@@ -14,80 +17,88 @@ function Page({
   console.log(spaces);
 
   return (
-    <div>
+    <div className="max-w-3xl z-10 mx-auto relative h-full overflow-y-auto no-scrollbar">
       {/* <ChatWindow q={q} spaces={[]} /> */}
 
-      <div className="max-w-3xl mx-auto pt-24">
+      <div className="w-full pt-24 space-y-40">
         {/* single q&A */}
-        <div className="space-y-16">
+        {Array.from({ length: 1 }).map((_, i) => (
 
-          {/* header */}
-          <div>
-            {/* query */}
-            <h1 className="text-white text-xl">Why is Retrieval-Augmented Generation important?</h1>
-          </div>
+          <div key={i} className="space-y-16">
 
-          {/* 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>
+            {/* header */}
+            <div>
+              {/* query */}
+              <h1 className="text-white text-xl">Why is Retrieval-Augmented Generation important?</h1>
+            </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">
+            {/* response */}
+            <div className="space-y-10">
 
-                    <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>
+              {/* 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>
 
-            {/* 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>
+                {/* 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>
 
-              {/* 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" />
+              {/* 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>
+      <div className="fixed bottom-4 max-w-3xl w-full">
+        <QueryInput />
       </div>
 
     </div>
diff --git a/apps/web/app/(dash)/header.tsx b/apps/web/app/(dash)/header.tsx
index 4af5c569..040097fa 100644
--- a/apps/web/app/(dash)/header.tsx
+++ b/apps/web/app/(dash)/header.tsx
@@ -8,7 +8,7 @@ import DynamicIsland from "./dynamicisland";
 
 function Header() {
   return (
-    <div className="p-4 relative z-10 h-16 flex items-center">
+    <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">
-- 
cgit v1.2.3