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

---
 apps/web/app/(dash)/chat/page.tsx     | 127 ++++++++++++++------------
 apps/web/app/(dash)/header.tsx        |   2 +-
 packages/ui/components/QueryInput.tsx |  60 ++++++++++++
 3 files changed, 130 insertions(+), 59 deletions(-)
 create mode 100644 packages/ui/components/QueryInput.tsx

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>
-
-              {/* 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>
+            {/* header */}
+            <div>
+              {/* query */}
+              <h1 className="text-white text-xl">Why is Retrieval-Augmented Generation important?</h1>
             </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>
+            {/* response */}
+            <div className="space-y-10">
 
-              {/* 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>
+              {/* 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>
 
-                {/* 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>
+                {/* 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>
+
+      <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">
diff --git a/packages/ui/components/QueryInput.tsx b/packages/ui/components/QueryInput.tsx
new file mode 100644
index 00000000..7188d667
--- /dev/null
+++ b/packages/ui/components/QueryInput.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import Divider from '../shadcn/divider'
+import { ArrowRightIcon } from '../icons'
+import Image from 'next/image'
+
+function QueryInput() {
+    return (
+        <div>
+            <div className="bg-secondary rounded-[20px] h-[68 px]">
+                {/* input and action button */}
+                <form className="flex gap-4 p-2.5">
+                    <textarea
+                        name="q"
+                        cols={30}
+                        rows={4}
+                        className="bg-transparent h-12 focus:h-[128px] no-scrollbar pt-3 px-2 text-base placeholder:text-[#5D6165] text-[#9DA0A4] focus:text-white duration-200 tracking-[3%] outline-none resize-none w-full"
+                        placeholder="Ask your second brain..."
+                    // onKeyDown={(e) => {
+                    //   if (e.key === "Enter") {
+                    //     e.preventDefault();
+                    //     if (!e.shiftKey) push(parseQ());
+                    //   }
+                    // }}
+                    // onChange={(e) => setQ(e.target.value)}
+                    // value={q}
+                    // disabled={disabled}
+                    />
+
+                    <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"
+                    >
+                        <Image src={ArrowRightIcon} alt="Right arrow icon" />
+                    </button>
+                </form>
+
+                {/* <Divider /> */}
+            </div>
+            {/* selected sources */}
+            {/* <div className="flex items-center gap-6 p-2 h-auto bg-secondary"> */}
+            {/* <MultipleSelector
+            key={options.length}
+            disabled={disabled}
+            defaultOptions={options}
+            onChange={(e) => setSelectedSpaces(e.map((x) => parseInt(x.value)))}
+            placeholder="Focus on specific spaces..."
+            emptyIndicator={
+              <p className="text-center text-lg leading-10 text-gray-600 dark:text-gray-400">
+                no results found.
+              </p>
+            }
+          /> */}
+            {/* </div> */}
+        </div>
+    )
+}
+
+export default QueryInput
\ No newline at end of file