feat: Author avatar (#85)


app/chat/[id]/page.tsx

@@ -2,7 +2,6 @@ import { Suspense } from 'react';
 import ChatServer from './server';
 import Loading from '@/components/ui/Loading';
 import { auth } from '@/auth';
-import { LoginPrompt } from '@/components/chat/LoginPrompt';
 
 interface PageProps {
   params: {
@@ -12,7 +11,6 @@ interface PageProps {
 
 export default async function Page({ params }: PageProps) {
   const { id: chatId } = params;
-  const session = await auth();
   return (
     <Suspense
       fallback={
@@ -21,10 +19,7 @@ export default async function Page({ params }: PageProps) {
         </div>
       }
     >
-      <div className="w-[1600px] max-w-full mx-auto flex flex-col space-y-4 items-center">
-        {!session && <LoginPrompt />}
-        <ChatServer id={chatId} />
-      </div>
+      <ChatServer chatId={chatId} />
     </Suspense>
   );
 }

app/chat/[id]/server.tsx

@@ -3,18 +3,24 @@ import { auth, sessionUser } from '@/auth';
 import { dbGetChat } from '@/lib/db/functions';
 import { redirect } from 'next/navigation';
 import { revalidatePath } from 'next/cache';
+import TopPrompt from '@/components/chat/TopPrompt';
 
 interface ChatServerProps {
-  id: string;
+  chatId: string;
 }
 
-export default async function ChatServer({ id }: ChatServerProps) {
-  const chat = await dbGetChat(id);
+export default async function ChatServer({ chatId }: ChatServerProps) {
+  const chat = await dbGetChat(chatId);
   const { id: userId } = await sessionUser();
 
   if (!chat) {
     revalidatePath('/');
     redirect('/');
   }
-  return <ChatInterface chat={chat} userId={userId} />;
+  return (
+    <div className="w-[1600px] max-w-full mx-auto flex flex-col space-y-4 items-center">
+      <TopPrompt chat={chat} userId={userId} />
+      <ChatInterface chat={chat} userId={userId} />
+    </div>
+  );
 }

app/layout.tsx

@@ -16,9 +16,9 @@ export const metadata = {
   },
   description: 'By Landing AI',
   icons: {
-    icon: '/landing.png',
-    shortcut: '/landing.png',
-    apple: '/landing.png',
+    icon: '/landing4.png',
+    shortcut: '/landing4.png',
+    apple: '/landing4.png',
   },
 };
 

auth.ts

@@ -31,13 +31,13 @@ export const {
       if (!profile) {
         return false;
       }
-      const { email, name } = profile;
+      const { email, name, picture } = profile;
 
       if (!email || !name) {
         return false;
       }
 
-      const dbUser = await dbFindOrCreateUser(email, name);
+      const dbUser = await dbFindOrCreateUser(email, name, picture);
 
       if (dbUser) {
         user.id = dbUser.id;
@@ -57,8 +57,9 @@ export const {
       // so also UI might still have session, DB might already have cleaned up
       const email = session?.user?.email;
       const name = session?.user?.name;
+      const avatar = session?.user?.image;
       if (email && name) {
-        const dbUser = await dbFindOrCreateUser(email, name);
+        const dbUser = await dbFindOrCreateUser(email, name, avatar);
         // put db user id into session
         session.user.id = dbUser.id;
       }

components/Avatar.tsx

@@ -0,0 +1,34 @@
+import Image from 'next/image';
+import React from 'react';
+
+export interface AvatarProps {
+  name?: string | null;
+  avatar?: string | null;
+}
+
+function getUserInitials(name: string) {
+  const [firstName, lastName] = name.split(' ');
+  return lastName ? `${firstName[0]}${lastName[0]}` : firstName.slice(0, 2);
+}
+
+const Avatar: React.FC<AvatarProps> = ({ name, avatar }) => {
+  return (
+    <>
+      {avatar ? (
+        <Image
+          className="size-6 transition-opacity duration-300 rounded-full select-none ring-1 ring-zinc-100/10 hover:opacity-80"
+          src={avatar ?? ''}
+          alt={name ?? 'Avatar'}
+          height={48}
+          width={48}
+        />
+      ) : (
+        <div className="flex items-center justify-center text-xs font-medium uppercase rounded-full select-none size-7 shrink-0 bg-muted/50 text-muted-foreground">
+          {name ? getUserInitials(name) : 'VA'}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Avatar;

components/UserMenu.tsx

@@ -13,6 +13,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/DropdownMenu';
 import { IconExternalLink } from '@/components/ui/Icons';
+import Avatar from './Avatar';
 
 export interface UserMenuProps {
   user: Session['user'];
@@ -29,19 +30,7 @@ export function UserMenu({ user }: UserMenuProps) {
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant="ghost">
-            {user?.image ? (
-              <Image
-                className="size-6 transition-opacity duration-300 rounded-full select-none ring-1 ring-zinc-100/10 hover:opacity-80"
-                src={user?.image ?? ''}
-                alt={user.name ?? 'Avatar'}
-                height={48}
-                width={48}
-              />
-            ) : (
-              <div className="flex items-center justify-center text-xs font-medium uppercase rounded-full select-none size-7 shrink-0 bg-muted/50 text-muted-foreground">
-                {user?.name ? getUserInitials(user?.name) : null}
-              </div>
-            )}
+            <Avatar name={user?.name} avatar={user?.image} />
             <span className="ml-2">{user?.name}</span>
           </Button>
         </DropdownMenuTrigger>

components/chat/LoginPrompt.tsx

@@ -1,25 +0,0 @@
-'use client';
-
-import { Card } from '../ui/Card';
-import { IconExclamationTriangle } from '../ui/Icons';
-import Link from 'next/link';
-
-export interface LoginPrompt {}
-
-export function LoginPrompt() {
-  return (
-    <Card className="group py-2 px-4 flex items-center">
-      <div className="bg-background flex size-8 shrink-0 select-none items-center justify-center rounded-md">
-        <IconExclamationTriangle className="font-medium" />
-      </div>
-      <div className="flex-1 px-1 ml-2 overflow-hidden">
-        <p className="leading-normal font-medium">
-          <Link href="/sign-in" className="underline">
-            Sign in
-          </Link>{' '}
-          to save and revisit your chat history!
-        </p>
-      </div>
-    </Card>
-  );
-}

components/chat/TopPrompt.tsx

@@ -0,0 +1,61 @@
+import { sessionUser } from '@/auth';
+import { Card } from '../ui/Card';
+import { IconExclamationTriangle } from '../ui/Icons';
+import Link from 'next/link';
+import { ChatWithMessages } from '@/lib/types';
+import { dbGetUser } from '@/lib/db/functions';
+import Avatar from '../Avatar';
+
+export interface TopPrompt {
+  chat: ChatWithMessages;
+  userId?: string | null;
+}
+
+export default async function TopPrompt({ chat, userId }: TopPrompt) {
+  const authorId = chat.userId;
+  console.log('[Ming] ~ TopPrompt ~ authorId:', authorId);
+  // 1. Viewer logged in, Viewer = Author
+  if (userId && authorId === userId) {
+    return null;
+  }
+  // 2. Viewer logged in, No Author
+  if (userId && !authorId) {
+    return null;
+  }
+  // 3. Author, but is not Viewer
+  if (authorId && authorId !== userId) {
+    const chatAuthor = authorId ? await dbGetUser(authorId) : null;
+    return (
+      <Card className="group py-2 px-4 flex items-center">
+        <div className="bg-background flex size-8 shrink-0 select-none items-center justify-center rounded-md">
+          <Avatar name={chatAuthor?.name} avatar={chatAuthor?.avatar} />
+        </div>
+        <div className="flex-1 px-1 ml-2 overflow-hidden">
+          <p className="leading-normal">
+            Code author:{' '}
+            <span className="font-medium">{chatAuthor?.name ?? 'Unknown'}</span>
+          </p>
+        </div>
+      </Card>
+    );
+  }
+  // 4. No author, Viewer not logged in
+  if (!userId && !authorId) {
+    return (
+      <Card className="group py-2 px-4 flex items-center">
+        <div className="bg-background flex size-8 shrink-0 select-none items-center justify-center rounded-md">
+          <IconExclamationTriangle className="font-medium" />
+        </div>
+        <div className="flex-1 px-1 ml-2 overflow-hidden">
+          <p className="leading-normal font-medium">
+            <Link href="/sign-in" className="underline">
+              Sign in
+            </Link>{' '}
+            to save and revisit your chat history!
+          </p>
+        </div>
+      </Card>
+    );
+  }
+  return null;
+}

lib/db/functions.ts

@@ -30,7 +30,11 @@ async function getUserConnect() {
  * @param name - The name of the user.
  * @returns A promise that resolves to the user object.
  */
-export async function dbFindOrCreateUser(email: string, name: string) {
+export async function dbFindOrCreateUser(
+  email: string,
+  name: string,
+  avatar?: string | null,
+) {
   // Try to find the user by email
   const user = await prisma.user.findUnique({
     where: { email: email },
@@ -44,11 +48,24 @@ export async function dbFindOrCreateUser(email: string, name: string) {
       data: {
         email: email,
         name: name,
+        avatar: avatar,
       },
     });
   }
 }
 
+/**
+ * Retrieves a user from the database based on the provided ID.
+ * @param id - The ID of the user to retrieve.
+ * @returns A Promise that resolves to the user object if found, or null if not found.
+ */
+export async function dbGetUser(id: string) {
+  // Try to find the user by email
+  return await prisma.user.findUnique({
+    where: { id },
+  });
+}
+
 /**
  * Retrieves all chat records from the database for the current user.
  * @returns A promise that resolves to an array of Chat objects.

prisma/migrations/20240606082721_add_avatar/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "user" ADD COLUMN     "avatar" TEXT;

prisma/schema.prisma

@@ -18,6 +18,7 @@ model User {
   email     String    @unique
   createdAt DateTime  @default(now()) @map("created_at")
   updatedAt DateTime  @updatedAt @map("updated_at")
+  avatar    String?
   chats     Chat[]
   message   Message[]