feat: Minor updates and introducing shadcn (#54)

<img width="1482" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/5669963/a8bbca87-34ba-4c9e-b5ab-149625a349f4">

app/chat/[id]/page.tsx

@@ -2,6 +2,7 @@ import { Chat } from '@/components/chat';
 import { auth } from '@/auth';
 import { dbGetChat } from '@/lib/db/functions';
 import { redirect } from 'next/navigation';
+import { revalidatePath } from 'next/cache';
 
 interface PageProps {
   params: {
@@ -12,7 +13,9 @@ interface PageProps {
 export default async function Page({ params }: PageProps) {
   const { id: chatId } = params;
   const chat = await dbGetChat(chatId);
+
   if (!chat) {
+    revalidatePath('/');
     redirect('/');
   }
   const session = await auth();

app/globals.css

@@ -6,65 +6,46 @@
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-
     --card: 0 0% 100%;
     --card-foreground: 240 10% 3.9%;
-
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
     --primary: 240 5.9% 10%;
     --primary-foreground: 0 0% 98%;
-
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
-
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
     --accent: 240 4.8% 95.9%;
-    --accent-foreground: ;
-
+    --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-
-    --ring: 240 5% 64.9%;
-
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
     --radius: 0.5rem;
   }
 
   .dark {
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
-
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
     --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
-
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
     --primary: 0 0% 98%;
     --primary-foreground: 240 5.9% 10%;
-
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
-
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
     --accent: 240 3.7% 15.9%;
-    --accent-foreground: ;
-
+    --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
-
-    --ring: 240 3.7% 15.9%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
   }
 }
 

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

components/chat-sidebar/ChatCard.tsx

@@ -36,7 +36,6 @@ export const ChatCardLayout: React.FC<
 
 const ChatCard: React.FC<ChatCardProps> = ({ chat, isAdminView }) => {
   const { id: chatIdFromParam } = useParams();
-  const router = useRouter();
   const { id, mediaUrl, messages, userId, updatedAt } = chat;
   if (!id) {
     return null;

components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

lib/db/functions.ts

@@ -4,7 +4,6 @@ import { sessionUser } from '@/auth';
 import prisma from './prisma';
 import { ChatWithMessages, MessageRaw } from './types';
 import { revalidatePath } from 'next/cache';
-import { redirect } from 'next/navigation';
 
 /**
  * Finds or creates a user in the database based on the provided email and name.
@@ -47,7 +46,6 @@ export async function dbGetAllChat(): Promise<ChatWithMessages[]> {
     where: { userId },
     include: {
       messages: true,
-      user: true,
     },
   });
 }

package.json

@@ -36,6 +36,7 @@
     "geist": "^1.2.1",
     "immer": "^10.0.3",
     "jotai": "^2.7.0",
+    "lucide-react": "^0.379.0",
     "nanoid": "^5.0.4",
     "next": "14.1.1",
     "next-auth": "5.0.0-beta.16",
@@ -75,7 +76,7 @@
     "eslint-plugin-tailwindcss": "^3.14.0",
     "postcss": "^8.4.33",
     "prettier": "^3.2.4",
-    "tailwind-merge": "^2.2.0",
+    "tailwind-merge": "^2.2.2",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.3.3"

pnpm-lock.yaml

@@ -74,6 +74,9 @@ importers:
       jotai:
         specifier: ^2.7.0
         version: 2.8.0(@types/react@18.2.79)(react@18.2.0)
+      lucide-react:
+        specifier: ^0.379.0
+        version: 0.379.0(react@18.2.0)
       nanoid:
         specifier: ^5.0.4
         version: 5.0.7
@@ -187,7 +190,7 @@ importers:
         specifier: ^3.2.4
         version: 3.2.5
       tailwind-merge:
-        specifier: ^2.2.0
+        specifier: ^2.2.2
         version: 2.2.2
       tailwindcss:
         specifier: ^3.4.1
@@ -2562,6 +2565,11 @@ packages:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
+  lucide-react@0.379.0:
+    resolution: {integrity: sha512-KcdeVPqmhRldldAAgptb8FjIunM2x2Zy26ZBh1RsEUcdLIvsEmbcw7KpzFYUy5BbpGeWhPu9Z9J5YXfStiXwhg==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0
+
   magic-string@0.30.10:
     resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
 
@@ -6777,6 +6785,10 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
+  lucide-react@0.379.0(react@18.2.0):
+    dependencies:
+      react: 18.2.0
+
   magic-string@0.30.10:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15