feat: Component UI and lastUpdated timestamp (#21)

<img width="1904" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/5669963/0565c7e2-a481-4246-8329-343a6c079fce">

app/api/upload/route.ts

@@ -29,6 +29,7 @@ export async function POST(req: Request): Promise<Response> {
       id: id ?? nanoid(),
       user,
       messages: initMessages ?? [],
+      updatedAt: Date.now(),
     };
 
     await createKVChat(payload);

app/chat/layout.tsx

@@ -1,4 +1,4 @@
-import { auth } from '@/auth';
+import { auth, authEmail } from '@/auth';
 import ChatSidebarList from '@/components/chat-sidebar/ChatListSidebar';
 import Loading from '@/components/ui/Loading';
 import { Suspense } from 'react';
@@ -8,8 +8,7 @@ interface ChatLayoutProps {
 }
 
 export default async function Layout({ children }: ChatLayoutProps) {
-  const session = await auth();
-  const email = session?.user?.email;
+  const { email, isAdmin } = await authEmail();
   return (
     <div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
       <div

auth.ts

@@ -58,3 +58,9 @@ export const {
     signIn: '/sign-in', // overrides the next-auth default signin page https://authjs.dev/guides/basics/pages
   },
 });
+
+export async function authEmail() {
+  const session = await auth();
+  const email = session?.user?.email;
+  return { email, isAdmin: !!email?.endsWith('landing.ai') };
+}

components/Header.tsx

@@ -4,8 +4,14 @@ import Link from 'next/link';
 import { auth } from '@/auth';
 import { Button } from '@/components/ui/Button';
 import { UserMenu } from '@/components/UserMenu';
-import { IconSeparator } from './ui/Icons';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/Tooltip';
+import { IconPlus, IconSeparator } from '@/components/ui/Icons';
 import { LoginMenu } from './LoginMenu';
+import { redirect } from 'next/navigation';
 
 export async function Header() {
   const session = await auth();
@@ -14,6 +20,16 @@ export async function Header() {
       {/* <Button variant="link" asChild className="mr-2">
 				<Link href="/project">Projects</Link>
 			</Button> */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="link" asChild className="mr-2">
+            <Link href="/chat">
+              <IconPlus />
+            </Link>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>New chat</TooltipContent>
+      </Tooltip>
       {/* <Button variant="link" asChild className="mr-2">
         <Link href="/chat">Chat</Link>
       </Button> */}

components/chat-sidebar/ChatAdminToggle.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { chatViewMode } from '@/state';
+import { useAtom } from 'jotai';
+import React from 'react';
+
+export interface ChatAdminToggleProps {}
+
+const ChatAdminToggle: React.FC<ChatAdminToggleProps> = () => {
+  const modeAtom = useAtom(chatViewMode);
+  return null;
+};
+
+export default ChatAdminToggle;

components/chat-sidebar/ChatCard.tsx

@@ -2,12 +2,13 @@
 
 import { PropsWithChildren } from 'react';
 import Link from 'next/link';
-import { useParams } from 'next/navigation';
+import { useParams, usePathname, useRouter } from 'next/navigation';
 import { cn } from '@/lib/utils';
 import { ChatEntity } from '@/lib/types';
 import Image from 'next/image';
 import clsx from 'clsx';
 import Img from '../ui/Img';
+// import { format } from 'date-fns';
 
 type ChatCardProps = PropsWithChildren<{
   chat: ChatEntity;
@@ -31,7 +32,8 @@ export const ChatCardLayout: React.FC<
 
 const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
   const { id: chatIdFromParam } = useParams();
-  const { id, url, messages, user } = chat;
+  const pathname = usePathname();
+  const { id, url, messages, user, updatedAt } = chat;
   const firstMessage = messages?.[0]?.content;
   const title = firstMessage
     ? firstMessage.length > 50
@@ -45,8 +47,11 @@ const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
     >
       <div className="overflow-hidden flex items-center size-full">
         <Img src={url} alt={`chat-${id}-card-image`} className="w-1/4 " />
-        <div className="flex items-start h-full">
-          <p className="text-sm w-3/4 ml-3">{title}</p>
+        <div className="flex items-start flex-col h-full ml-3 w-3/4">
+          <p className="text-sm mb-1">{title}</p>
+          <p className="text-xs text-gray-500">
+            {updatedAt ? new Date(1714027100904).toLocaleDateString() : '-'}
+          </p>
         </div>
       </div>
     </ChatCardLayout>

components/chat/ChatMessage.tsx

@@ -33,7 +33,7 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
       </div>
       <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
         {logs && message.role !== 'user' && (
-          <div className="bg-slate-100 dark:bg-slate-900 mb-4 p-4 max-h-[400px] overflow-y-scroll">
+          <div className="bg-slate-100 dark:bg-slate-900 mb-4 p-4 max-h-[400px] overflow-auto">
             <div className="text-xl font-bold">Thinking Process</div>
             <MemoizedReactMarkdown
               className="break-words text-sm"

components/chat/ChatPanel.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { type UseChatHelpers } from 'ai/react';
-
-import { Button } from '@/components/ui/Button';
-import { PromptForm } from '@/components/chat/PromptForm';
-import { IconRefresh, IconStop } from '@/components/ui/Icons';
-import { MessageBase } from '../../lib/types';
-
-export interface ChatPanelProps
-  extends Pick<
-    UseChatHelpers,
-    'append' | 'isLoading' | 'reload' | 'stop' | 'input' | 'setInput'
-  > {
-  id?: string;
-  title?: string;
-  messages: MessageBase[];
-  url?: string;
-}
-
-export function ChatPanel({
-  id,
-  title,
-  isLoading,
-  stop,
-  append,
-  reload,
-  input,
-  setInput,
-  messages,
-  url,
-}: ChatPanelProps) {
-  return (
-    <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]">
-      <div className="mx-auto sm:max-w-3xl sm:px-4">
-        <div className="px-4 py-2 space-y-4 border-t shadow-lg bg-background sm:rounded-t-xl sm:border md:py-4">
-          <PromptForm
-            url={url}
-            onSubmit={async value => {
-              await append({
-                id,
-                content: value,
-                role: 'user',
-              });
-            }}
-            input={input}
-            setInput={setInput}
-            isLoading={isLoading}
-            messages={messages}
-            reload={reload}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

components/chat/Composer.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+import * as React from 'react';
+import { type UseChatHelpers } from 'ai/react';
+import Textarea from 'react-textarea-autosize';
+
+import { Button } from '@/components/ui/Button';
+import { MessageBase } from '../../lib/types';
+import { useEnterSubmit } from '@/lib/hooks/useEnterSubmit';
+import Img from '../ui/Img';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/Tooltip';
+import {
+  IconArrowDown,
+  IconArrowElbow,
+  IconRefresh,
+  IconStop,
+} from '@/components/ui/Icons';
+import { cn } from '@/lib/utils';
+
+export interface ComposerProps
+  extends Pick<
+    UseChatHelpers,
+    'append' | 'isLoading' | 'reload' | 'stop' | 'input' | 'setInput'
+  > {
+  id?: string;
+  title?: string;
+  messages: MessageBase[];
+  url?: string;
+  isAtBottom: boolean;
+  scrollToBottom: () => void;
+}
+
+export function Composer({
+  id,
+  title,
+  isLoading,
+  stop,
+  append,
+  reload,
+  input,
+  setInput,
+  messages,
+  isAtBottom,
+  scrollToBottom,
+  url,
+}: ComposerProps) {
+  const { formRef, onKeyDown } = useEnterSubmit();
+  const inputRef = React.useRef<HTMLTextAreaElement>(null);
+  React.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  return (
+    <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]">
+      <div className="mx-auto sm:max-w-3xl sm:px-4 h-full">
+        <div className="px-4 py-2 space-y-4 border-t shadow-lg bg-background sm:rounded-t-xl sm:border md:py-4 h-full">
+          <form
+            onSubmit={async e => {
+              e.preventDefault();
+              if (!input?.trim()) {
+                return;
+              }
+              setInput('');
+              await append({
+                id,
+                content: input,
+                role: 'user',
+              });
+              scrollToBottom();
+            }}
+            ref={formRef}
+            className="h-full"
+          >
+            <div className="relative flex px-8 pl-2 overflow-hidden size-full bg-background sm:rounded-md sm:border sm:px-12 sm:pl-2 items-start">
+              {url && (
+                <div className="w-1/5 p-2 h-full flex items-center justify-center relative">
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Img
+                        src={url}
+                        className="cursor-zoom-in"
+                        alt="preview-image"
+                      />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <Img
+                        src={url}
+                        className="m-2"
+                        quality={100}
+                        alt="zoomed-in-image"
+                      />
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+              )}
+              <Textarea
+                ref={inputRef}
+                tabIndex={0}
+                onKeyDown={onKeyDown}
+                rows={1}
+                value={input}
+                disabled={isLoading}
+                onChange={e => setInput(e.target.value)}
+                placeholder={
+                  isLoading
+                    ? 'Vision Agent is thinking...'
+                    : 'Ask questions about the images.'
+                }
+                spellCheck={false}
+                className="min-h-[60px] w-4/5 resize-none bg-transparent px-4 py-[1.3em] focus-within:outline-none sm:text-sm"
+              />
+              {/* Scroll to bottom Icon */}
+              <div
+                className={cn(
+                  'absolute top-3 right-4 transition-opacity duration-300',
+                  isAtBottom ? 'opacity-0' : 'opacity-100',
+                )}
+              >
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      className="bg-background"
+                      onClick={() => scrollToBottom()}
+                    >
+                      <IconArrowDown />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Scroll to bottom</TooltipContent>
+                </Tooltip>
+              </div>
+              {/* Stop / Regenerate Icon */}
+              <div className="absolute bottom-14 right-4">
+                {isLoading ? (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        className="bg-background"
+                        onClick={() => stop()}
+                      >
+                        <IconStop />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Stop generating</TooltipContent>
+                  </Tooltip>
+                ) : (
+                  messages?.length >= 2 && (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          className="bg-background"
+                          onClick={() => reload()}
+                        >
+                          <IconRefresh />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>Regenerate response</TooltipContent>
+                    </Tooltip>
+                  )
+                )}
+              </div>
+              {/* Submit Icon */}
+              <div className="absolute bottom-3 right-4">
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="submit"
+                      size="icon"
+                      disabled={isLoading || input === ''}
+                    >
+                      <IconArrowElbow />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Send message</TooltipContent>
+                </Tooltip>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

components/chat/PromptForm.tsx

@@ -1,124 +0,0 @@
-import * as React from 'react';
-import Textarea from 'react-textarea-autosize';
-import { UseChatHelpers } from 'ai/react';
-import { useEnterSubmit } from '@/lib/hooks/useEnterSubmit';
-import { Button, buttonVariants } from '@/components/ui/Button';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/Tooltip';
-import {
-  IconArrowElbow,
-  IconPlus,
-  IconRefresh,
-  IconStop,
-} from '@/components/ui/Icons';
-import { useRouter } from 'next/navigation';
-import Img from '../ui/Img';
-import { MessageBase } from '@/lib/types';
-
-export interface PromptProps
-  extends Pick<UseChatHelpers, 'input' | 'setInput' | 'reload'> {
-  onSubmit: (value: string) => void;
-  isLoading: boolean;
-  url?: string;
-  messages: MessageBase[];
-}
-
-export function PromptForm({
-  onSubmit,
-  input,
-  setInput,
-  isLoading,
-  url,
-  messages,
-  reload,
-}: PromptProps) {
-  const { formRef, onKeyDown } = useEnterSubmit();
-  const inputRef = React.useRef<HTMLTextAreaElement>(null);
-  const router = useRouter();
-  React.useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, []);
-
-  return (
-    <form
-      onSubmit={async e => {
-        e.preventDefault();
-        if (!input?.trim()) {
-          return;
-        }
-        setInput('');
-        await onSubmit(input);
-      }}
-      ref={formRef}
-    >
-      <div className="relative flex w-full px-8 pl-2 overflow-hidden max-h-60 grow bg-background sm:rounded-md sm:border sm:px-12 sm:pl-2">
-        {url && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Img
-                alt="prompt-image"
-                src={url}
-                className="w-1/5 my-4 mx-2 cursor-zoom-in"
-              />
-            </TooltipTrigger>
-            <TooltipContent>
-              <Img alt="prompt-hovered-image" src={url} className="m-2" />
-            </TooltipContent>
-          </Tooltip>
-        )}
-        <Textarea
-          ref={inputRef}
-          tabIndex={0}
-          onKeyDown={onKeyDown}
-          rows={1}
-          value={input}
-          onChange={e => setInput(e.target.value)}
-          placeholder="Ask questions about the images."
-          spellCheck={false}
-          className="min-h-[60px] w-4/5 resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
-        />
-        <div className="absolute left-1/2 -translate-x-1/2 bottom-0 h-12 z-40">
-          {isLoading ? (
-            <Button
-              variant="outline"
-              onClick={() => stop()}
-              className="bg-background"
-            >
-              <IconStop className="mr-2" />
-              Stop generating
-            </Button>
-          ) : (
-            messages?.length >= 2 && (
-              <div className="flex space-x-2">
-                <Button variant="outline" onClick={() => reload()}>
-                  <IconRefresh className="mr-2" />
-                  Regenerate response
-                </Button>
-              </div>
-            )
-          )}
-        </div>
-        <div className="absolute top-1/2 -translate-y-1/2 right-4">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                type="submit"
-                size="icon"
-                disabled={isLoading || input === ''}
-              >
-                <IconArrowElbow />
-                <span className="sr-only">Send message</span>
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Send message</TooltipContent>
-          </Tooltip>
-        </div>
-      </div>
-    </form>
-  );
-}

components/chat/index.tsx

@@ -2,12 +2,11 @@
 
 import { cn } from '@/lib/utils';
 import { ChatList } from '@/components/chat/ChatList';
-import { ChatPanel } from '@/components/chat/ChatPanel';
+import { Composer } from '@/components/chat/Composer';
 import { ChatEntity } from '@/lib/types';
 import Image from 'next/image';
 import useVisionAgent from '@/lib/hooks/useVisionAgent';
 import { useScrollAnchor } from '@/lib/hooks/useScrollAnchor';
-import { ButtonScrollToBottom } from '../ui/ButtonScrollToBottom';
 
 export interface ChatProps extends React.ComponentProps<'div'> {
   chat: ChatEntity;
@@ -29,7 +28,7 @@ export function Chat({ chat }: ChatProps) {
           <div className="h-px w-full" ref={visibilityRef} />
         </div>
       </div>
-      <ChatPanel
+      <Composer
         id={id}
         url={url}
         isLoading={isLoading}
@@ -39,8 +38,6 @@ export function Chat({ chat }: ChatProps) {
         messages={messages}
         input={input}
         setInput={setInput}
-      />
-      <ButtonScrollToBottom
         isAtBottom={isAtBottom}
         scrollToBottom={scrollToBottom}
       />

components/project/Chat.tsx

@@ -4,7 +4,7 @@ import { MediaDetails } from '@/lib/fetch';
 import useChatWithMedia from '@/lib/hooks/useChatWithMedia';
 import React from 'react';
 import { ChatList } from '../chat/ChatList';
-import { ChatPanel } from '../chat/ChatPanel';
+// import { ChatPanel } from '../chat/ChatPanel';
 
 export interface ChatProps {
   mediaList: MediaDetails[];
@@ -16,7 +16,7 @@ const Chat: React.FC<ChatProps> = ({ mediaList }) => {
   return (
     <>
       <ChatList messages={messages} />
-      <ChatPanel
+      {/* <ChatPanel
         isLoading={isLoading}
         stop={stop}
         append={append}
@@ -24,7 +24,7 @@ const Chat: React.FC<ChatProps> = ({ mediaList }) => {
         messages={messages}
         input={input}
         setInput={setInput}
-      />
+      /> */}
     </>
   );
 };

components/ui/ButtonScrollToBottom.tsx

@@ -1,36 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { cn } from '@/lib/utils';
-import { Button, type ButtonProps } from '@/components/ui/Button';
-import { IconArrowDown } from '@/components/ui/Icons';
-
-interface ButtonScrollToBottomProps extends ButtonProps {
-  isAtBottom: boolean;
-  scrollToBottom: () => void;
-}
-
-export function ButtonScrollToBottom({
-  className,
-  isAtBottom,
-  scrollToBottom,
-  ...props
-}: ButtonScrollToBottomProps) {
-  return (
-    <Button
-      variant="outline"
-      size="icon"
-      className={cn(
-        'fixed bottom-16 right-4 z-10 bg-background transition-opacity duration-300',
-        isAtBottom ? 'opacity-0' : 'opacity-100',
-        className,
-      )}
-      onClick={() => scrollToBottom()}
-      {...props}
-    >
-      <IconArrowDown />
-      <span className="sr-only">Scroll to bottom</span>
-    </Button>
-  );
-}

lib/kv/chat.ts

@@ -3,22 +3,13 @@
 import { revalidatePath } from 'next/cache';
 import { kv } from '@vercel/kv';
 
-import { auth } from '@/auth';
+import { auth, authEmail } from '@/auth';
 import { ChatEntity, MessageBase } from '@/lib/types';
 import { notFound, redirect } from 'next/navigation';
 import { nanoid } from '../utils';
 
-async function authCheck() {
-  const session = await auth();
-  const email = session?.user?.email;
-  // if (!email) {
-  //   redirect('/');
-  // }
-  return { email, isAdmin: !!email?.endsWith('landing.ai') };
-}
-
 export async function getKVChats() {
-  const { email } = await authCheck();
+  const { email } = await authEmail();
 
   try {
     const pipeline = kv.pipeline();
@@ -30,16 +21,41 @@ export async function getKVChats() {
       pipeline.hgetall(chat);
     }
 
-    const results = await pipeline.exec();
+    const results = (await pipeline.exec()) as ChatEntity[];
+
+    return results.sort((r1, r2) => r2.updatedAt - r1.updatedAt);
+  } catch (error) {
+    return [];
+  }
+}
+
+export async function adminGetAllKVChats() {
+  const { isAdmin } = await authEmail();
+
+  if (!isAdmin) {
+    notFound();
+  }
+
+  try {
+    const pipeline = kv.pipeline();
+    const chats: string[] = await kv.zrange(`user:chat:all`, 0, -1, {
+      rev: true,
+    });
+
+    for (const chat of chats) {
+      pipeline.hgetall(chat);
+    }
+
+    const results = (await pipeline.exec()) as ChatEntity[];
 
-    return results as ChatEntity[];
+    return results.sort((r1, r2) => r2.updatedAt - r1.updatedAt);
   } catch (error) {
     return [];
   }
 }
 
 export async function getKVChat(id: string) {
-  // const { email, isAdmin } = await authCheck();
+  // const { email, isAdmin } = await authEmail();
   const chat = await kv.hgetall<ChatEntity>(`chat:${id}`);
 
   if (!chat) {
@@ -50,8 +66,8 @@ export async function getKVChat(id: string) {
 }
 
 export async function createKVChat(chat: ChatEntity) {
-  // const { email, isAdmin } = await authCheck();
-  const { email } = await authCheck();
+  // const { email, isAdmin } = await authEmail();
+  const { email } = await authEmail();
 
   await kv.hmset(`chat:${chat.id}`, chat);
   if (email) {
@@ -76,6 +92,7 @@ export async function saveKVChatMessage(id: string, message: MessageBase) {
   await kv.hmset(`chat:${id}`, {
     ...chat,
     messages: [...messages, message],
+    updatedAt: Date.now(),
   });
   revalidatePath('/chat', 'layout');
 }

lib/types.ts

@@ -3,8 +3,8 @@ import { type Message } from 'ai';
 export type ServerActionResult<Result> = Promise<
   | Result
   | {
-    error: string;
-  }
+      error: string;
+    }
 >;
 
 /**
@@ -34,6 +34,7 @@ export type ChatEntity = {
   id: string;
   user: string; // email
   messages: MessageBase[];
+  updatedAt: number;
 };
 
 export interface SignedPayload {
@@ -41,4 +42,4 @@ export interface SignedPayload {
   publicUrl: string;
   signedUrl: string;
   fields: Record<string, string>;
-}
+}

lib/utils.ts

@@ -1,3 +1,4 @@
+import { auth } from '@/auth';
 import { clsx, type ClassValue } from 'clsx';
 import { customAlphabet } from 'nanoid';
 import { twMerge } from 'tailwind-merge';

state/index.ts

@@ -4,3 +4,5 @@ import { DatasetImageEntity } from '../lib/types';
 // list of image urls or base64 strings
 export const datasetAtom = atom<DatasetImageEntity[]>([]);
 // export const selectedImagesAtom = atom<number[]>([]);
+
+export const chatViewMode = atom<'chat' | 'chat-all'>('chat');