ui update: /chat

apps/web/app/(dash)/chat/chatWindow.tsx

@@ -201,6 +201,7 @@ function ChatWindow({
                       </Markdown>
                     </div>
                   </div>
+                  
                 </div>
               </div>
             ))}

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;

package.json

@@ -47,6 +47,7 @@
     "@aws-sdk/s3-request-presigner": "^3.577.0",
     "@cloudflare/puppeteer": "^0.0.8",
     "@headlessui/react": "^2.0.4",
+    "@heroicons/react": "^2.1.3",
     "@hono/swagger-ui": "^0.2.2",
     "@hookform/resolvers": "^3.4.2",
     "@iarna/toml": "^2.2.5",

packages/tailwind-config/globals.css

@@ -207,3 +207,18 @@ body {
 .hljs-title {
   color: #f22c3d;
 }
+
+/* no scrollbar visibility */
+.no-scrollbar::-webkit-scrollbar {
+  width: 0px;
+}
+
+::-moz-selection { /* Code for Firefox */
+  color: #369DFD;
+  background: #21303D;
+}
+
+::selection {
+  color: #369DFD;
+  background: #21303D;
+}