oofdefault-darkmode

5 files changed, 355 insertions, 16 deletions

diff --git a/apps/web/app/(dash)/chat/CodeBlock.tsx b/apps/web/app/(dash)/chat/CodeBlock.tsx
new file mode 100644
index 00000000..0bb6a19d
--- /dev/null
+++ b/apps/web/app/(dash)/chat/CodeBlock.tsx
@@ -0,0 +1,90 @@
+import React, { useRef, useState } from "react";
+
+const CodeBlock = ({
+  lang,
+  codeChildren,
+}: {
+  lang: string;
+  codeChildren: React.ReactNode & React.ReactNode[];
+}) => {
+  const codeRef = useRef<HTMLElement>(null);
+
+  return (
+    <div className="bg-black rounded-md">
+      <CodeBar lang={lang} codeRef={codeRef} />
+      <div className="p-4 overflow-y-auto">
+        <code ref={codeRef} className={`!whitespace-pre hljs language-${lang}`}>
+          {codeChildren}
+        </code>
+      </div>
+    </div>
+  );
+};
+
+const CodeBar = React.memo(
+  ({
+    lang,
+    codeRef,
+  }: {
+    lang: string;
+    codeRef: React.RefObject<HTMLElement>;
+  }) => {
+    const [isCopied, setIsCopied] = useState<boolean>(false);
+    return (
+      <div className="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans">
+        <span className="">{lang}</span>
+        <button
+          className="flex ml-auto gap-2"
+          aria-label="copy codeblock"
+          onClick={async () => {
+            const codeString = codeRef.current?.textContent;
+            if (codeString)
+              navigator.clipboard.writeText(codeString).then(() => {
+                setIsCopied(true);
+                setTimeout(() => setIsCopied(false), 3000);
+              });
+          }}
+        >
+          {isCopied ? (
+            <>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="size-4"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75"
+                />
+              </svg>
+              Copied!
+            </>
+          ) : (
+            <>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="size-4"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+                />
+              </svg>
+              Copy code
+            </>
+          )}
+        </button>
+      </div>
+    );
+  },
+);
+export default CodeBlock;
diff --git a/apps/web/app/(dash)/chat/actions.ts b/apps/web/app/(dash)/chat/actions.ts
index 908fe79e..e69de29b 100644
--- a/apps/web/app/(dash)/chat/actions.ts
+++ b/apps/web/app/(dash)/chat/actions.ts
@@ -1 +0,0 @@
-"use server";
diff --git a/apps/web/app/(dash)/chat/chatWindow.tsx b/apps/web/app/(dash)/chat/chatWindow.tsx
index 43c337ee..77c1f32b 100644
--- a/apps/web/app/(dash)/chat/chatWindow.tsx
+++ b/apps/web/app/(dash)/chat/chatWindow.tsx
@@ -6,29 +6,147 @@ import QueryInput from "../home/queryinput";
 import { cn } from "@repo/ui/lib/utils";
 import { motion } from "framer-motion";
 import { useRouter } from "next/navigation";
+import { ChatHistory } from "@repo/shared-types";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@repo/ui/shadcn/accordion";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import rehypeHighlight from "rehype-highlight";
+import { code, p } from "./markdownRenderHelpers";
+import { codeLanguageSubset } from "@/lib/constants";
+import { z } from "zod";
+import { toast } from "sonner";
+import Link from "next/link";
+import { sources } from "next/dist/compiled/webpack/webpack";
 
-function ChatWindow({ q }: { q: string }) {
+function ChatWindow({
+  q,
+  spaces,
+}: {
+  q: string;
+  spaces: { id: string; name: string }[];
+}) {
   const [layout, setLayout] = useState<"chat" | "initial">("initial");
+  const [chatHistory, setChatHistory] = useState<ChatHistory[]>([
+    {
+      question: q,
+      answer: {
+        parts: [
+          // {
+          //   text: `It seems like there might be a typo in your question. Could you please clarify or provide more context? If you meant "interesting," please let me know what specific information or topic you find interesting, and I can help you with that.`,
+          // },
+        ],
+        sources: [],
+      },
+    },
+  ]);
 
   const router = useRouter();
 
+  const getAnswer = async (query: string, spaces: string[]) => {
+    const sourcesFetch = await fetch(
+      `/api/chat?q=${query}&spaces=${spaces}&sourcesOnly=true`,
+      {
+        method: "POST",
+        body: JSON.stringify({ chatHistory }),
+      },
+    );
+
+    // TODO: handle this properly
+    const sources = await sourcesFetch.json();
+
+    const sourcesZod = z.object({
+      ids: z.array(z.string()),
+      metadata: z.array(z.any()),
+    });
+
+    const sourcesParsed = sourcesZod.safeParse(sources);
+
+    if (!sourcesParsed.success) {
+      console.log(sources);
+      console.error(sourcesParsed.error);
+      toast.error("Something went wrong while getting the sources");
+      return;
+    }
+
+    setChatHistory((prevChatHistory) => {
+      const newChatHistory = [...prevChatHistory];
+      const lastAnswer = newChatHistory[newChatHistory.length - 1];
+      if (!lastAnswer) return prevChatHistory;
+      const filteredSourceUrls = new Set(
+        sourcesParsed.data.metadata.map((source) => source.url),
+      );
+      const uniqueSources = sourcesParsed.data.metadata.filter((source) => {
+        if (filteredSourceUrls.has(source.url)) {
+          filteredSourceUrls.delete(source.url);
+          return true;
+        }
+        return false;
+      });
+      lastAnswer.answer.sources = uniqueSources.map((source) => ({
+        title: source.title ?? "Untitled",
+        type: source.type ?? "page",
+        source: source.url ?? "https://supermemory.ai",
+        content: source.content ?? "No content available",
+        numChunks: sourcesParsed.data.metadata.filter(
+          (f) => f.url === source.url,
+        ).length,
+      }));
+      return newChatHistory;
+    });
+
+    const resp = await fetch(`/api/chat?q=${query}&spaces=${spaces}`, {
+      method: "POST",
+      body: JSON.stringify({ chatHistory }),
+    });
+
+    const reader = resp.body?.getReader();
+    let done = false;
+    let result = "";
+    while (!done && reader) {
+      const { value, done: d } = await reader.read();
+      done = d;
+
+      setChatHistory((prevChatHistory) => {
+        const newChatHistory = [...prevChatHistory];
+        const lastAnswer = newChatHistory[newChatHistory.length - 1];
+        if (!lastAnswer) return prevChatHistory;
+        lastAnswer.answer.parts.push({ text: new TextDecoder().decode(value) });
+        return newChatHistory;
+      });
+    }
+
+    console.log(result);
+  };
+
   useEffect(() => {
-    if (q !== "") {
+    if (q.trim().length > 0) {
+      getAnswer(
+        q,
+        spaces.map((s) => s.id),
+      );
       setTimeout(() => {
         setLayout("chat");
       }, 300);
     } else {
       router.push("/home");
     }
-  }, [q]);
+  }, []);
+
   return (
-    <div>
+    <div className="h-full">
       <AnimatePresence mode="popLayout">
         {layout === "initial" ? (
           <motion.div
             exit={{ opacity: 0 }}
             key="initial"
-            className="max-w-3xl flex mx-auto w-full flex-col"
+            className="max-w-3xl h-full justify-center items-center flex mx-auto w-full flex-col"
           >
             <div className="w-full h-96">
               <QueryInput initialQuery={q} initialSpaces={[]} disabled />
@@ -36,16 +154,121 @@ function ChatWindow({ q }: { q: string }) {
           </motion.div>
         ) : (
           <div
-            className="max-w-3xl flex mx-auto w-full flex-col mt-8"
+            className="max-w-3xl flex mx-auto w-full flex-col mt-24"
             key="chat"
           >
-            <h2
-              className={cn(
-                "transition-all transform translate-y-0 opacity-100 duration-500 ease-in-out font-semibold text-2xl",
-              )}
-            >
-              {q}
-            </h2>
+            {chatHistory.map((chat, idx) => (
+              <div
+                key={idx}
+                className={`mt-8 ${idx != chatHistory.length - 1 ? "pb-2 border-b" : ""}`}
+              >
+                <h2
+                  className={cn(
+                    "text-white transition-all transform translate-y-0 opacity-100 duration-500 ease-in-out font-semibold text-2xl",
+                  )}
+                >
+                  {chat.question}
+                </h2>
+
+                <div className="flex flex-col gap-2 mt-2">
+                  <div
+                    className={`${chat.answer.sources.length > 0 || chat.answer.parts.length === 0 ? "flex" : "hidden"}`}
+                  >
+                    <Accordion
+                      defaultValue={
+                        idx === chatHistory.length - 1 ? "memories" : ""
+                      }
+                      type="single"
+                      collapsible
+                    >
+                      <AccordionItem value="memories">
+                        <AccordionTrigger className="text-foreground-menu">
+                          Related Memories
+                        </AccordionTrigger>
+                        {/* TODO: fade out content on the right side, the fade goes away when the user scrolls */}
+                        <AccordionContent
+                          className="relative flex gap-2 max-w-3xl overflow-auto no-scrollbar"
+                          defaultChecked
+                        >
+                          {/* Loading state */}
+                          {chat.answer.sources.length > 0 ||
+                            (chat.answer.parts.length === 0 && (
+                              <>
+                                {[1, 2, 3, 4].map((_, idx) => (
+                                  <div
+                                    key={`loadingState-${idx}`}
+                                    className="rounded-xl bg-secondary p-4 flex flex-col gap-2 min-w-72 animate-pulse"
+                                  >
+                                    <div className="bg-slate-700 h-2 rounded-full w-1/2"></div>
+                                    <div className="bg-slate-700 h-2 rounded-full w-full"></div>
+                                  </div>
+                                ))}
+                              </>
+                            ))}
+                          {chat.answer.sources.map((source, idx) => (
+                            <Link
+                              href={source.source}
+                              key={idx}
+                              className="rounded-xl bg-secondary p-4 flex flex-col gap-2 min-w-72"
+                            >
+                              <div className="flex justify-between text-foreground-menu text-sm">
+                                <span>{source.type}</span>
+
+                                {source.numChunks > 1 && (
+                                  <span>{source.numChunks} chunks</span>
+                                )}
+                              </div>
+                              <div className="text-base">{source.title}</div>
+                              <div className="text-xs">
+                                {source.content.length > 100
+                                  ? source.content.slice(0, 100) + "..."
+                                  : source.content}
+                              </div>
+                            </Link>
+                          ))}
+                        </AccordionContent>
+                      </AccordionItem>
+                    </Accordion>
+                  </div>
+
+                  {/* Summary */}
+                  <div>
+                    <div className="text-foreground-menu py-2">Summary</div>
+                    <div className="text-base">
+                      {chat.answer.parts.length === 0 && (
+                        <div className="animate-pulse flex space-x-4">
+                          <div className="flex-1 space-y-3 py-1">
+                            <div className="h-2 bg-slate-700 rounded"></div>
+                            <div className="h-2 bg-slate-700 rounded"></div>
+                          </div>
+                        </div>
+                      )}
+                      <Markdown
+                        remarkPlugins={[remarkGfm, [remarkMath]]}
+                        rehypePlugins={[
+                          rehypeKatex,
+                          [
+                            rehypeHighlight,
+                            {
+                              detect: true,
+                              ignoreMissing: true,
+                              subset: codeLanguageSubset,
+                            },
+                          ],
+                        ]}
+                        components={{
+                          code: code as any,
+                          p: p as any,
+                        }}
+                        className="flex flex-col gap-2"
+                      >
+                        {chat.answer.parts.map((part) => part.text).join("")}
+                      </Markdown>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
           </div>
         )}
       </AnimatePresence>
diff --git a/apps/web/app/(dash)/chat/markdownRenderHelpers.tsx b/apps/web/app/(dash)/chat/markdownRenderHelpers.tsx
new file mode 100644
index 00000000..747d4fca
--- /dev/null
+++ b/apps/web/app/(dash)/chat/markdownRenderHelpers.tsx
@@ -0,0 +1,25 @@
+import { DetailedHTMLProps, HTMLAttributes, memo } from "react";
+import { ExtraProps } from "react-markdown";
+import CodeBlock from "./CodeBlock";
+
+export const code = memo((props: JSX.IntrinsicElements["code"]) => {
+  const { className, children } = props;
+  const match = /language-(\w+)/.exec(className || "");
+  const lang = match && match[1];
+
+  return <CodeBlock lang={lang || "text"} codeChildren={children as any} />;
+});
+
+export const p = memo(
+  (
+    props?: Omit<
+      DetailedHTMLProps<
+        HTMLAttributes<HTMLParagraphElement>,
+        HTMLParagraphElement
+      >,
+      "ref"
+    >,
+  ) => {
+    return <p className="whitespace-pre-wrap">{props?.children}</p>;
+  },
+);
diff --git a/apps/web/app/(dash)/chat/page.tsx b/apps/web/app/(dash)/chat/page.tsx
index 9e28fda7..73519851 100644
--- a/apps/web/app/(dash)/chat/page.tsx
+++ b/apps/web/app/(dash)/chat/page.tsx
@@ -1,5 +1,7 @@
 import ChatWindow from "./chatWindow";
-import { chatSearchParamsCache } from "../../helpers/lib/searchParams";
+import { chatSearchParamsCache } from "../../../lib/searchParams";
+// @ts-expect-error
+await import("katex/dist/katex.min.css");
 
 function Page({
   searchParams,
@@ -10,7 +12,7 @@ function Page({
 
   console.log(spaces);
 
-  return <ChatWindow q={q} />;
+  return <ChatWindow q={q} spaces={[]} />;
 }
 
 export default Page;