feat: support internal access to all chat (#45)

<img width="1326" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/98a7d32a-c9af-49a5-a680-a44014c7e8f3">

app/all/chat/[id]/page.tsx

@@ -0,0 +1,16 @@
+import { getKVChat } from '@/lib/kv/chat';
+import { Chat } from '@/components/chat';
+import { auth } from '@/auth';
+
+interface PageProps {
+  params: {
+    id: string;
+  };
+}
+
+export default async function Page({ params }: PageProps) {
+  const { id: chatId } = params;
+  const chat = await getKVChat(chatId);
+  const session = await auth();
+  return <Chat chat={chat} session={session} isAdminView />;
+}

app/all/layout.tsx

@@ -0,0 +1,38 @@
+import { Suspense } from 'react';
+import Loading from '@/components/ui/Loading';
+import { authEmail } from '@/auth';
+import { redirect } from 'next/navigation';
+import { adminGetAllKVChats } from '@/lib/kv/chat';
+import ChatSidebarList from '@/components/chat-sidebar/ChatListSidebar';
+
+interface ChatLayoutProps {
+  children: React.ReactNode;
+}
+
+export default async function Layout({ children }: ChatLayoutProps) {
+  const { isAdmin } = await authEmail();
+
+  if (!isAdmin) {
+    redirect('/');
+  }
+
+  const chats = await adminGetAllKVChats();
+
+  return (
+    <div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
+      <div
+        data-state="open"
+        className="peer absolute inset-y-0 z-30 hidden border-r bg-muted duration-300 ease-in-out translate-x-0 lg:flex lg:w-[250px] xl:w-[300px] h-full flex-col dark:bg-zinc-950 overflow-auto py-2"
+      >
+        <Suspense fallback={<Loading />}>
+          <ChatSidebarList chats={chats} isAdminView />
+        </Suspense>
+      </div>
+      <Suspense fallback={<Loading />}>
+        <div className="group w-full overflow-auto pl-0 animate-in duration-300 ease-in-out peer-[[data-state=open]]:lg:pl-[250px] peer-[[data-state=open]]:xl:pl-[300px]">
+          {children}
+        </div>
+      </Suspense>
+    </div>
+  );
+}

app/all/page.tsx

@@ -0,0 +1,5 @@
+interface PageProps {}
+
+export default async function Page({}: PageProps) {
+  return <div></div>;
+}

app/chat/layout.tsx

@@ -1,6 +1,7 @@
-import { auth, authEmail } from '@/auth';
+import { authEmail } from '@/auth';
 import ChatSidebarList from '@/components/chat-sidebar/ChatListSidebar';
 import Loading from '@/components/ui/Loading';
+import { getKVChats } from '@/lib/kv/chat';
 import { Suspense } from 'react';
 
 interface ChatLayoutProps {
@@ -9,6 +10,7 @@ interface ChatLayoutProps {
 
 export default async function Layout({ children }: ChatLayoutProps) {
   const { email, isAdmin } = await authEmail();
+  const chats = await getKVChats();
   return (
     <div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
       <div
@@ -16,7 +18,7 @@ export default async function Layout({ children }: ChatLayoutProps) {
         className="peer absolute inset-y-0 z-30 hidden border-r bg-muted duration-300 ease-in-out -translate-x-full data-[state=open]:translate-x-0 lg:flex lg:w-[250px] h-full flex-col overflow-auto py-2"
       >
         <Suspense fallback={<Loading />}>
-          <ChatSidebarList />
+          <ChatSidebarList chats={chats} />
         </Suspense>
       </div>
       <Suspense fallback={<Loading />}>

app/chat/page.tsx

@@ -2,9 +2,8 @@
 
 import ImageSelector from '@/components/chat/ImageSelector';
 import { generateInputImageMarkdown } from '@/lib/messageUtils';
-import { ChatEntity, MessageBase } from '@/lib/types';
+import { ChatEntity } from '@/lib/types';
 import { fetcher } from '@/lib/utils';
-import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 
 import {

components/Header.tsx

@@ -38,6 +38,11 @@ export async function Header() {
         </TooltipTrigger>
         <TooltipContent>New chat</TooltipContent>
       </Tooltip> */}
+      {isAdmin && (
+        <Button variant="link" asChild className="mr-2">
+          <Link href="/all">All Chats (Internal)</Link>
+        </Button>
+      )}
       {isAdmin && (
         <Button variant="link" asChild className="mr-2">
           <Link href="/project">Projects (Internal)</Link>

components/chat-sidebar/ChatCard.tsx

@@ -14,6 +14,7 @@ import { cleanInputMessage } from '@/lib/messageUtils';
 
 type ChatCardProps = PropsWithChildren<{
   chat: ChatEntity;
+  isAdminView?: boolean;
 }>;
 
 export const ChatCardLayout: React.FC<
@@ -32,9 +33,8 @@ export const ChatCardLayout: React.FC<
   );
 };
 
-const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
+const ChatCard: React.FC<ChatCardProps> = ({ chat, isAdminView }) => {
   const { id: chatIdFromParam } = useParams();
-  const pathname = usePathname();
   const { id, url, messages, user, updatedAt } = chat;
   const firstMessage = cleanInputMessage(messages?.[0]?.content ?? '');
   const title = firstMessage
@@ -44,7 +44,7 @@ const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
     : '(No messages yet)';
   return (
     <ChatCardLayout
-      link={`/chat/${id}`}
+      link={isAdminView ? `/all/chat/${id}` : `/chat/${id}`}
       classNames={chatIdFromParam === id && 'border-gray-500'}
     >
       <div className="overflow-hidden flex items-center size-full">
@@ -54,6 +54,7 @@ const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
           <p className="text-xs text-gray-500">
             {updatedAt ? format(Number(updatedAt), 'yyyy-MM-dd') : '-'}
           </p>
+          {isAdminView && <p className="text-xs text-gray-500">{user}</p>}
         </div>
       </div>
     </ChatCardLayout>

components/chat-sidebar/ChatListSidebar.tsx

@@ -1,26 +1,33 @@
-import { getKVChats } from '@/lib/kv/chat';
 import ChatCard, { ChatCardLayout } from './ChatCard';
 import { IconPlus } from '../ui/Icons';
 import { auth } from '@/auth';
+import { ChatEntity } from '@/lib/types';
 
-export interface ChatSidebarListProps {}
+export interface ChatSidebarListProps {
+  chats: ChatEntity[];
+  isAdminView?: boolean;
+}
 
-export default async function ChatSidebarList({}: ChatSidebarListProps) {
+export default async function ChatSidebarList({
+  chats,
+  isAdminView,
+}: ChatSidebarListProps) {
   const session = await auth();
   if (!session || !session.user) {
     return null;
   }
-  const chats = await getKVChats();
   return (
     <>
-      <ChatCardLayout link="/chat">
-        <div className="overflow-hidden flex items-center size-full">
-          <IconPlus className="w-1/4 font-bold" />
-          <p className="text-sm w-3/4 ml-3 font-bold">New chat</p>
-        </div>
-      </ChatCardLayout>
+      {!isAdminView && (
+        <ChatCardLayout link="/chat">
+          <div className="overflow-hidden flex items-center size-full">
+            <IconPlus className="w-1/4 font-bold" />
+            <p className="text-sm w-3/4 ml-3 font-bold">New chat</p>
+          </div>
+        </ChatCardLayout>
+      )}
       {chats.map(chat => (
-        <ChatCard key={chat.id} chat={chat} />
+        <ChatCard key={chat.id} chat={chat} isAdminView={isAdminView} />
       ))}
     </>
   );

components/chat/index.tsx

@@ -10,10 +10,11 @@ import { useState } from 'react';
 
 export interface ChatProps extends React.ComponentProps<'div'> {
   chat: ChatEntity;
+  isAdminView?: boolean;
   session: Session | null;
 }
 
-export function Chat({ chat, session }: ChatProps) {
+export function Chat({ chat, session, isAdminView }: ChatProps) {
   const { url, id } = chat;
   const [enableSelfReflection, setEnableSelfReflection] =
     useState<boolean>(true);
@@ -35,23 +36,25 @@ export function Chat({ chat, session }: ChatProps) {
           <div className="h-px w-full" ref={visibilityRef} />
         </div>
       </div>
-      <div className="fixed inset-x-0 bottom-0 w-full animate-in duration-300 ease-in-out peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px] h-[178px]">
-        <Composer
-          id={id}
-          url={url}
-          isLoading={isLoading}
-          stop={stop}
-          append={append}
-          reload={reload}
-          messages={messages}
-          input={input}
-          setInput={setInput}
-          isAtBottom={isAtBottom}
-          scrollToBottom={scrollToBottom}
-          enableSelfReflection={enableSelfReflection}
-          setEnableSelfReflection={setEnableSelfReflection}
-        />
-      </div>
+      {!isAdminView && (
+        <div className="fixed inset-x-0 bottom-0 w-full animate-in duration-300 ease-in-out peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px] h-[178px]">
+          <Composer
+            id={id}
+            url={url}
+            isLoading={isLoading}
+            stop={stop}
+            append={append}
+            reload={reload}
+            messages={messages}
+            input={input}
+            setInput={setInput}
+            isAtBottom={isAtBottom}
+            scrollToBottom={scrollToBottom}
+            enableSelfReflection={enableSelfReflection}
+            setEnableSelfReflection={setEnableSelfReflection}
+          />
+        </div>
+      )}
     </>
   );
 }