From eda62dfe7ab0fb01a78c05cf23b3b59c58e188a5 Mon Sep 17 00:00:00 2001
From: Lucas <ljanon@gmail.com>
Date: Wed, 31 Jul 2024 15:23:04 -0300
Subject: [PATCH] Zeta AI improvements (#415)

---
 src/app/api/chat/route.ts                     |  6 +++---
 src/components/Cmdk/components/Cmdk.tsx       |  8 +++++++-
 src/components/Cmdk/components/CmdkChat.tsx   |  7 ++++---
 .../Cmdk/components/MarkdownMesage.tsx        | 20 +++++++++++++++----
 src/components/Cmdk/components/ZetaAiIcon.tsx |  8 +++++---
 .../components/Layout/components/Layout.tsx   |  7 +++++--
 .../Layout/components/NavigationLayout.tsx    | 15 +++++++++++++-
 src/lib/ai.constants.ts                       | 10 ++++++++++
 src/pages/_app.tsx                            |  2 +-
 9 files changed, 65 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/ai.constants.ts

diff --git a/src/app/api/chat/route.ts b/src/app/api/chat/route.ts
index 81b50c5f..6bdfab3c 100644
--- a/src/app/api/chat/route.ts
+++ b/src/app/api/chat/route.ts
@@ -4,6 +4,7 @@ import { Ratelimit } from "@upstash/ratelimit";
 import { kv } from "@vercel/kv";
 import { CoreMessage, embed, streamText } from "ai";
 
+import { inputSchema } from "~/lib/ai.constants";
 import { supabaseClient } from "~/lib/supabase/client";
 
 const getPrompt = (
@@ -62,8 +63,7 @@ export async function POST(req: Request) {
       });
     }
 
-    const { messages: _messages } = await req.json();
-    const messages = _messages as CoreMessage[];
+    const { messages } = inputSchema.parse(await req.json());
 
     const userPrompt = messages[messages.length - 1].content;
 
@@ -100,6 +100,6 @@ export async function POST(req: Request) {
   } catch (error) {
     console.error(error);
 
-    return new Response("Internal Server Error", { status: 500 });
+    return new Response("Zeta AI had an error processing your request, please try asking again.", { status: 500 });
   }
 }
diff --git a/src/components/Cmdk/components/Cmdk.tsx b/src/components/Cmdk/components/Cmdk.tsx
index b711700f..f1112e95 100644
--- a/src/components/Cmdk/components/Cmdk.tsx
+++ b/src/components/Cmdk/components/Cmdk.tsx
@@ -250,7 +250,13 @@ export const Cmdk: React.FC<CmdkProps> = ({ isOpen, setIsCmdkOpen }) => {
                 setIsCmdkOpen={setIsCmdkOpen}
               />
             )}
-            {activePage === "chat" && <CmdkChat initialValue={inputValue} setCmdkInputValue={setInputValue} />}
+            {activePage === "chat" && (
+              <CmdkChat
+                closeCmdk={() => setIsCmdkOpen(false)}
+                initialValue={inputValue}
+                setCmdkInputValue={setInputValue}
+              />
+            )}
           </Command.List>
         </Command>
       </DialogContent>
diff --git a/src/components/Cmdk/components/CmdkChat.tsx b/src/components/Cmdk/components/CmdkChat.tsx
index ec4d41d6..bc1ae3d7 100644
--- a/src/components/Cmdk/components/CmdkChat.tsx
+++ b/src/components/Cmdk/components/CmdkChat.tsx
@@ -25,7 +25,7 @@ const AssistantMessage: React.FC<{ children: React.ReactNode; className?: string
   );
 };
 
-export const CmdkChat: React.FC<CmdkChatProps> = ({ initialValue, setCmdkInputValue }) => {
+export const CmdkChat: React.FC<CmdkChatProps> = ({ closeCmdk, initialValue, setCmdkInputValue }) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const basePath =
     process.env.NEXT_PUBLIC_BASE_PATH && typeof window !== "undefined"
@@ -87,14 +87,14 @@ export const CmdkChat: React.FC<CmdkChatProps> = ({ initialValue, setCmdkInputVa
                     className={clsx(index === messages.length - 1 && "mb-8")}
                     messageClasses={message.content.length < 90 ? "flex items-center" : undefined}
                   >
-                    <MarkdownMessage message={message} />
+                    <MarkdownMessage closeCmdk={closeCmdk} message={message} />
                   </AssistantMessage>
                 );
               default:
                 return (
                   <div key={index} className="px-4 [overflow-anchor:none] mb-[25px]">
                     <div className="flex gap-6 [overflow-anchor:none] mb-6">
-                      <MarkdownMessage message={message} />
+                      <MarkdownMessage closeCmdk={closeCmdk} message={message} />
                     </div>
                   </div>
                 );
@@ -183,6 +183,7 @@ export const CmdkChat: React.FC<CmdkChatProps> = ({ initialValue, setCmdkInputVa
 };
 
 interface CmdkChatProps {
+  closeCmdk: () => void;
   initialValue: string;
   setCmdkInputValue: React.Dispatch<React.SetStateAction<string>>;
 }
diff --git a/src/components/Cmdk/components/MarkdownMesage.tsx b/src/components/Cmdk/components/MarkdownMesage.tsx
index a68e81db..99117bf9 100644
--- a/src/components/Cmdk/components/MarkdownMesage.tsx
+++ b/src/components/Cmdk/components/MarkdownMesage.tsx
@@ -1,16 +1,19 @@
 import { Message } from "ai";
 import clsx from "clsx";
+import Link from "next/link";
 import React from "react";
 import Markdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 
+import { basePath } from "~/lib/app.constants";
+
 import { MarkdownCodeBlock } from "./MarkdownCodeBlock";
 
 const remarkPlugins = [[remarkGfm, { singleTilde: false }]];
 const rehypePlugins = [rehypeRaw];
 
-export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({ message }) => {
+export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({ closeCmdk, message }) => {
   return (
     <Markdown
       remarkPlugins={remarkPlugins as any}
@@ -26,11 +29,19 @@ export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({ message }) =>
             {children}
           </MarkdownCodeBlock>
         ),
-        a: ({ children, ...args }) => {
+        a: ({ children, ref, ...args }) => {
+          if (typeof args.href !== "string") return null;
+          const isAbsoluteHref = args.href?.startsWith("http");
+
           return (
-            <a {...args} className={clsx("text-green-300  hover:text-green-400", args.className)}>
+            <Link
+              {...args}
+              href={isAbsoluteHref ? args.href : `${basePath}${args.href}`}
+              onClick={closeCmdk}
+              className={clsx("text-green-300  hover:text-green-400", args.className)}
+            >
               {children}
-            </a>
+            </Link>
           );
         },
         // img: (props: any) => NextImageHandler(props),
@@ -86,5 +97,6 @@ export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({ message }) =>
 };
 
 interface MarkdownMessageProps {
+  closeCmdk: () => void;
   message: Message;
 }
diff --git a/src/components/Cmdk/components/ZetaAiIcon.tsx b/src/components/Cmdk/components/ZetaAiIcon.tsx
index 2b239c3a..cc5ffcef 100644
--- a/src/components/Cmdk/components/ZetaAiIcon.tsx
+++ b/src/components/Cmdk/components/ZetaAiIcon.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 
-export const ZetaAiIcon: React.FC<ZetaAiIconProps> = ({ className }) => {
+export const ZetaAiIcon: React.FC<ZetaAiIconProps> = ({ className, width, height }) => {
   return (
     <svg
-      width="91"
-      height="24"
+      width={width || "91"}
+      height={height || "24"}
       viewBox="0 0 91 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -28,4 +28,6 @@ export const ZetaAiIcon: React.FC<ZetaAiIconProps> = ({ className }) => {
 
 interface ZetaAiIconProps {
   className?: string;
+  height?: string;
+  width?: string;
 }
diff --git a/src/components/shared/components/Layout/components/Layout.tsx b/src/components/shared/components/Layout/components/Layout.tsx
index 68f8076d..12eabff2 100644
--- a/src/components/shared/components/Layout/components/Layout.tsx
+++ b/src/components/shared/components/Layout/components/Layout.tsx
@@ -187,9 +187,10 @@ const LayoutContainer = styled.div<{ isMainPage: boolean }>`
 
 type LayoutProps = {
   className?: string;
+  setIsCmdkOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-export const Layout: React.FC<PropsWithChildren<LayoutProps>> = ({ className, children }) => {
+export const Layout: React.FC<PropsWithChildren<LayoutProps>> = ({ className, children, setIsCmdkOpen }) => {
   const { route } = useRouter();
   const isMainPage = useMemo(() => mainNavRoutes.includes(route), [route]);
 
@@ -201,7 +202,9 @@ export const Layout: React.FC<PropsWithChildren<LayoutProps>> = ({ className, ch
   return (
     <LayoutContainer className={className} isMainPage={isMainPage}>
       {!isMounted && <div className="absolute inset-0 z-[999999999] w-screen h-screen initial-overlay" />}
-      <NavigationLayout isMainPage={isMainPage}>{children}</NavigationLayout>
+      <NavigationLayout isMainPage={isMainPage} setIsCmdkOpen={setIsCmdkOpen}>
+        {children}
+      </NavigationLayout>
     </LayoutContainer>
   );
 };
diff --git a/src/components/shared/components/Layout/components/NavigationLayout.tsx b/src/components/shared/components/Layout/components/NavigationLayout.tsx
index 07cdb62e..1ed940d4 100644
--- a/src/components/shared/components/Layout/components/NavigationLayout.tsx
+++ b/src/components/shared/components/Layout/components/NavigationLayout.tsx
@@ -1,3 +1,4 @@
+import { ListItem } from "@mui/material";
 import Divider from "@mui/material/Divider";
 import List from "@mui/material/List";
 import clsx from "clsx";
@@ -5,6 +6,7 @@ import { motion } from "framer-motion";
 import Link from "next/link";
 import { PropsWithChildren, useEffect, useMemo, useState } from "react";
 
+import { ZetaAiIcon } from "~/components/Cmdk/components/ZetaAiIcon";
 import { useCurrentBreakpoint } from "~/hooks/useCurrentBreakpoint";
 import { getRevealProps } from "~/lib/helpers/animations";
 
@@ -17,6 +19,7 @@ import { NavigationItem } from "./NavigationItem";
 
 type NavigationLayoutProps = PropsWithChildren<{
   isMainPage: boolean;
+  setIsCmdkOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }>;
 
 const mainLayoutAnimationVariants = {
@@ -43,7 +46,7 @@ const leftDrawerAnimationVariants = {
   },
 };
 
-export const NavigationLayout: React.FC<NavigationLayoutProps> = ({ isMainPage, children }) => {
+export const NavigationLayout: React.FC<NavigationLayoutProps> = ({ isMainPage, children, setIsCmdkOpen }) => {
   const { upSm } = useCurrentBreakpoint();
 
   const [isLeftDrawerOpen, setIsLeftDrawerOpen] = useState(true);
@@ -132,6 +135,16 @@ export const NavigationLayout: React.FC<NavigationLayoutProps> = ({ isMainPage,
 
             <div className="pb-6">
               <List className="w-full font-medium">
+                <ListItem className={clsx("px-5 sm:px-[30px] py-3 hover:!bg-[transparent] whitespace-nowrap")}>
+                  <button
+                    onClick={() => {
+                      setIsCmdkOpen(true);
+                      if (!upSm) setIsLeftDrawerOpen(false);
+                    }}
+                  >
+                    <ZetaAiIcon width={"60"} />
+                  </button>
+                </ListItem>
                 {navBottomItems.map((item) => (
                   <NavigationItem
                     key={item.label}
diff --git a/src/lib/ai.constants.ts b/src/lib/ai.constants.ts
new file mode 100644
index 00000000..21b89a8e
--- /dev/null
+++ b/src/lib/ai.constants.ts
@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+export const inputSchema = z.object({
+  messages: z.array(
+    z.object({
+      role: z.enum(["assistant", "user", "system"]),
+      content: z.string().min(1).max(1500),
+    })
+  ),
+});
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index d9fb8bde..8165e108 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -93,7 +93,7 @@ const App = ({ Component, pageProps, ...rest }: AppProps & { emotionCache: Emoti
           <GlobalStyles />
           <HeadProgressBar />
 
-          <Layout>
+          <Layout setIsCmdkOpen={setIsCmdkOpen}>
             <Cmdk isOpen={isCmdkOpen} setIsCmdkOpen={setIsCmdkOpen} />
             <Component {...pageProps} />
           </Layout>