Feature/UI improvements (#16)

nphivu414 · web-flow · commit a9e8faa2c7ff · 2024-04-13T15:36:33.000+07:00
- Update homepage UI
- Improve ChatPanel performance
diff --git a/app/page.tsx b/app/page.tsx
@@ -6,6 +6,7 @@ import { siteConfig } from "@/config/site";
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/Button";
 import { MainLayout } from "@/components/ui/common/MainLayout";
+import { Heading1 } from "@/components/ui/typography";
 import { DescriptionHeadingText } from "@/components/modules/home/DescriptionHeadingText";
 import { FeatureItems } from "@/components/modules/home/FeatureItems";
 import { HeroBannerImage } from "@/components/modules/home/HeroBannerImage";
@@ -21,27 +22,30 @@ export default async function Home() {
   return (
     <MainLayout>
       <div className="px-4 pt-16">
-        <section className="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-20">
-          <div className="container flex max-w-5xl flex-col items-center gap-6 text-center">
-            <h1 className="font-heading bg-gradient-to-r from-gray-900 to-gray-500 bg-clip-text text-3xl font-bold leading-[1.1] tracking-tighter text-transparent dark:from-white dark:to-gray-500 sm:text-5xl md:text-6xl">
-              {siteConfig.name}
-            </h1>
-            <DescriptionHeadingText />
-            <div className="flex items-center space-x-4">
-              <Link
-                href="https://www.youtube.com/watch?v=GWalKzuC0Rg"
-                target="_blank"
-                className={cn(
-                  buttonVariants({
-                    variant: "outline",
-                  })
-                )}
-              >
-                <Play className="mr-2" size={16} /> Demo
-              </Link>
-              <Link href="/apps/chat" className={cn(buttonVariants())}>
-                Get Started
-              </Link>
+        <section className="space-y-6 pb-8 md:pb-12">
+          <div className="relative flex h-80 w-full  items-center justify-center bg-white bg-dot-black/[0.2] dark:bg-black dark:bg-dot-white/[0.2]">
+            <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
+            <div className="container flex max-w-5xl flex-col items-center gap-6 text-center">
+              <Heading1 className="font-heading bg-gradient-to-r from-gray-900 to-gray-500 bg-clip-text text-3xl font-bold leading-[1.1] tracking-tighter text-transparent dark:from-white dark:to-gray-500 sm:!text-5xl md:!text-7xl">
+                {siteConfig.name}
+              </Heading1>
+              <DescriptionHeadingText />
+              <div className="flex items-center space-x-4">
+                <Link
+                  href="https://www.youtube.com/watch?v=GWalKzuC0Rg"
+                  target="_blank"
+                  className={cn(
+                    buttonVariants({
+                      variant: "outline",
+                    })
+                  )}
+                >
+                  <Play className="mr-2" size={16} /> Demo
+                </Link>
+                <Link href="/apps/chat" className={cn(buttonVariants())}>
+                  Get Started
+                </Link>
+              </div>
             </div>
           </div>
         </section>
diff --git a/components/modules/apps/chat/ChatPanel.tsx b/components/modules/apps/chat/ChatPanel.tsx
@@ -4,8 +4,8 @@ import React from "react";
 import { useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Message, useChat } from "ai/react";
-import { SendHorizonal, Settings } from "lucide-react";
-import { FormProvider, useForm } from "react-hook-form";
+import { SendHorizonal } from "lucide-react";
+import { useForm } from "react-hook-form";
 import { v4 as uuidv4 } from "uuid";
 
 import { Chat, Message as SupabaseMessage } from "@/lib/db";
@@ -14,14 +14,14 @@ import { Button } from "@/components/ui/Button";
 import { ChatInput, ChatList } from "@/components/ui/chat";
 import { ChatScrollAnchor } from "@/components/ui/common/ChatScrollAnchor";
 import { Separator } from "@/components/ui/Separator";
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/Sheet";
+import { Sheet } from "@/components/ui/Sheet";
 import { toast } from "@/components/ui/use-toast";
 
 import { revalidateChatLayout } from "./action";
-import { ChatHistoryDrawer } from "./ChatHistoryDrawer";
-import { ControlSidebar } from "./control-side-bar";
+import { ControlSidebarSheet } from "./control-side-bar/ControlSidebarSheet";
 import { defaultSystemPrompt } from "./control-side-bar/data/models";
 import { Header } from "./Header";
+import { MobileDrawerControl } from "./MobileDrawerControls";
 import { ChatParamSchema } from "./schema";
 import { ChatParams } from "./types";
 import { buildChatRequestParams } from "./utils";
@@ -36,7 +36,7 @@ const defaultValues: ChatParams = {
   presencePenalty: [0],
 };
 
-type ChatPanelProps = {
+export type ChatPanelProps = {
   chatId: Chat["id"];
   initialMessages: Message[];
   chats: Chat[] | null;
@@ -165,20 +165,9 @@ export const ChatPanel = ({
     setInput("");
   };
 
-  const closeSidebarSheet = () => {
+  const closeSidebarSheet = React.useCallback(() => {
     setSidebarSheetOpen(false);
-  };
-
-  const renderControlSidebar = () => {
-    return (
-      <ControlSidebar
-        setMessages={setMessages}
-        messages={messages}
-        closeSidebarSheet={closeSidebarSheet}
-        isNewChat={isNewChat}
-      />
-    );
-  };
+  }, []);
 
   return (
     <Sheet open={sidebarSheetOpen} onOpenChange={setSidebarSheetOpen}>
@@ -210,16 +199,7 @@ export const ChatPanel = ({
                     onKeyDown={onKeyDown}
                     onChange={handleOnChange}
                   />
-                  <div className="absolute bottom-0 left-0 flex w-1/2 px-2 pb-2 lg:hidden">
-                    <ChatHistoryDrawer data={chats} />
-                  </div>
-                  <div className="absolute bottom-0 left-12 flex w-1/2 justify-start px-2 pb-2 lg:hidden">
-                    <SheetTrigger asChild>
-                      <Button size="sm" variant="ghost">
-                        <Settings />
-                      </Button>
-                    </SheetTrigger>
-                  </div>
+                  <MobileDrawerControl chats={chats} />
                   <div className="absolute bottom-0 right-0 flex w-1/2 justify-end px-2 pb-2">
                     <Button size="sm" type="submit" disabled={isLoading}>
                       Send
@@ -230,14 +210,13 @@ export const ChatPanel = ({
               </div>
             </div>
           </div>
-          <FormProvider {...formReturn}>
-            <SheetContent className="w-[400px] overflow-y-auto sm:w-[540px]">
-              <div className="pt-4">{renderControlSidebar()}</div>
-            </SheetContent>
-            <div className="size-0 overflow-x-hidden transition-[width] lg:h-auto lg:max-h-[calc(100vh_-_65px)] lg:w-[450px] lg:border-x">
-              {renderControlSidebar()}
-            </div>
-          </FormProvider>
+          <ControlSidebarSheet
+            closeSidebarSheet={closeSidebarSheet}
+            formReturn={formReturn}
+            isNewChat={isNewChat}
+            messages={messages}
+            setMessages={setMessages}
+          />
         </div>
       </div>
     </Sheet>
diff --git a/components/modules/apps/chat/MobileDrawerControls.tsx b/components/modules/apps/chat/MobileDrawerControls.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { Settings } from "lucide-react";
+
+import { Chat } from "@/lib/db";
+import { Button } from "@/components/ui/Button";
+import { SheetTrigger } from "@/components/ui/Sheet";
+
+import { ChatHistoryDrawer } from "./ChatHistoryDrawer";
+
+type MobileDrawerControlProps = {
+  chats: Chat[] | null;
+};
+
+export const MobileDrawerControl = React.memo(function MobileDrawerControl({
+  chats,
+}: MobileDrawerControlProps) {
+  return (
+    <>
+      <div className="absolute bottom-0 left-0 flex w-1/2 px-2 pb-2 lg:hidden">
+        <ChatHistoryDrawer data={chats} />
+      </div>
+      <div className="absolute bottom-0 left-12 flex w-1/2 justify-start px-2 pb-2 lg:hidden">
+        <SheetTrigger asChild>
+          <Button size="sm" variant="ghost">
+            <Settings />
+          </Button>
+        </SheetTrigger>
+      </div>
+    </>
+  );
+});
diff --git a/components/modules/apps/chat/control-side-bar/ControlSidebarSheet.tsx b/components/modules/apps/chat/control-side-bar/ControlSidebarSheet.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { Message, UseChatHelpers } from "ai/react";
+import { FormProvider, FormProviderProps } from "react-hook-form";
+
+import { SheetContent } from "@/components/ui/Sheet";
+
+import { ChatPanelProps } from "../ChatPanel";
+import { ChatParams } from "../types";
+import { ControlSidebar } from "./ControlSidebar";
+
+type ControlSidebarSheetProps = {
+  setMessages: UseChatHelpers["setMessages"];
+  messages: Message[];
+  closeSidebarSheet: () => void;
+  isNewChat: ChatPanelProps["isNewChat"];
+  formReturn: Omit<FormProviderProps<ChatParams>, "children">;
+};
+
+export const ControlSidebarSheet = React.memo(function ControlSidebarSheet({
+  setMessages,
+  messages,
+  closeSidebarSheet,
+  isNewChat,
+  formReturn,
+}: ControlSidebarSheetProps) {
+  const renderControlSidebar = () => {
+    return (
+      <ControlSidebar
+        setMessages={setMessages}
+        messages={messages}
+        closeSidebarSheet={closeSidebarSheet}
+        isNewChat={isNewChat}
+      />
+    );
+  };
+
+  return (
+    <FormProvider {...formReturn}>
+      <SheetContent className="w-[400px] overflow-y-auto sm:w-[540px]">
+        <div className="pt-4">{renderControlSidebar()}</div>
+      </SheetContent>
+      <div className="size-0 overflow-x-hidden transition-[width] lg:h-auto lg:max-h-[calc(100vh_-_65px)] lg:w-[450px] lg:border-x">
+        {renderControlSidebar()}
+      </div>
+    </FormProvider>
+  );
+});
diff --git a/components/modules/home/DescriptionHeadingText.tsx b/components/modules/home/DescriptionHeadingText.tsx
@@ -5,7 +5,7 @@ import { motion } from "framer-motion";
 
 export function DescriptionHeadingText() {
   const text =
-    "A feature-rich, highly customizable AI Chatbot Template, empowered by Next.js.";
+    "A feature-rich, highly customizable AI Chatbot Template, powered by Next.js and Supabase.";
   const [displayedText, setDisplayedText] = React.useState("");
   const [i, setI] = React.useState(0);
 
@@ -34,7 +34,7 @@ export function DescriptionHeadingText() {
       >
         {displayedText
           ? displayedText
-          : "A feature-rich, highly customizable AI Chatbot Template, empowered by Next.js."}
+          : "A feature-rich, highly customizable AI Chatbot Template, empowered by Next.js x Supabase."}
       </motion.span>
       <motion.span
         className="ml-1 inline-flex h-[22px] w-[2px] animate-blink rounded-full bg-current align-sub opacity-75 delay-1000"
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "geist": "^1.3.0",
     "lodash": "^4.17.21",
     "lucide-react": "0.331.0",
+    "mini-svg-data-uri": "^1.4.4",
     "next": "14.1.4",
     "next-axiom": "^1.1.1",
     "next-themes": "^0.3.0",
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,4 +1,12 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 /** @type {import('tailwindcss').Config} */
+
+const svgToDataUri = require("mini-svg-data-uri");
+
+const {
+  default: flattenColorPalette,
+} = require("tailwindcss/lib/util/flattenColorPalette");
+
 module.exports = {
   darkMode: ["class"],
   content: [
@@ -85,5 +93,46 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [
+    require("tailwindcss-animate"),
+    addVariablesForColors,
+    function ({ matchUtilities, theme }) {
+      matchUtilities(
+        {
+          "bg-grid": (value) => ({
+            backgroundImage: `url("${svgToDataUri(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
+            )}")`,
+          }),
+          "bg-grid-small": (value) => ({
+            backgroundImage: `url("${svgToDataUri(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
+            )}")`,
+          }),
+          "bg-dot": (value) => ({
+            backgroundImage: `url("${svgToDataUri(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`
+            )}")`,
+          }),
+          "bg-dot-thick": (value) => ({
+            backgroundImage: `url("${svgToDataUri(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="2.5"></circle></svg>`
+            )}")`,
+          }),
+        },
+        { values: flattenColorPalette(theme("backgroundColor")), type: "color" }
+      );
+    },
+  ],
 };
+
+function addVariablesForColors({ addBase, theme }) {
+  let allColors = flattenColorPalette(theme("colors"));
+  let newVars = Object.fromEntries(
+    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
+  );
+
+  addBase({
+    ":root": newVars,
+  });
+}
diff --git a/yarn.lock b/yarn.lock
@@ -4424,6 +4424,11 @@ mime-types@^2.1.12:
   dependencies:
     mime-db "1.52.0"
 
+mini-svg-data-uri@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
 minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
