feat: project analysis (#27)

<img width="1904" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/5669963/b8e9e7bb-7248-4c8f-8648-8087c7d99b7c">

app/chat/[id]/page.tsx

@@ -1,6 +1,5 @@
-import ChatDataLoad from '@/components/chat/ChatDataLoad';
-import { Suspense } from 'react';
-import Loading from '@/components/ui/Loading';
+import { getKVChat } from '@/lib/kv/chat';
+import { Chat } from '@/components/chat';
 
 interface PageProps {
   params: {
@@ -10,10 +9,6 @@ interface PageProps {
 
 export default async function Page({ params }: PageProps) {
   const { id: chatId } = params;
-
-  return (
-    <Suspense fallback={<Loading />}>
-      <ChatDataLoad chatId={chatId} />
-    </Suspense>
-  );
+  const chat = await getKVChat(chatId);
+  return <Chat chat={chat} />;
 }

app/project/[projectId]/page.tsx

@@ -1,8 +1,6 @@
 import MediaGrid from '@/components/project/MediaGrid';
 import { fetchProjectMedia } from '@/lib/fetch';
-import { Suspense } from 'react';
-import Loading from '../../../components/ui/Loading';
-import Chat from '@/components/project/Chat';
+import ProjectChat from '@/components/project/ProjectChat';
 
 interface PageProps {
   params: {
@@ -16,13 +14,13 @@ export default async function Page({ params }: PageProps) {
   const mediaList = await fetchProjectMedia({ projectId: Number(projectId) });
 
   return (
-    <div className="pb-[150px] pt-4 md:pt-10 h-full">
+    <div className="pt-4 md:pt-10 h-full">
       <div className="flex h-full">
         <div className="w-1/2 relative border-r border-gray-300 overflow-auto">
           <MediaGrid mediaList={mediaList} />
         </div>
         <div className="w-1/2 relative overflow-auto">
-          <Chat mediaList={mediaList} />
+          <ProjectChat mediaList={mediaList} />
         </div>
       </div>
     </div>

components/Header.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Link from 'next/link';
 
-import { auth } from '@/auth';
+import { auth, authEmail } from '@/auth';
 import { Button } from '@/components/ui/Button';
 import { UserMenu } from '@/components/UserMenu';
 import {
@@ -15,12 +15,10 @@ import { redirect } from 'next/navigation';
 
 export async function Header() {
   const session = await auth();
+  const { isAdmin } = await authEmail();
   return (
     <header className="sticky top-0 z-50 flex items-center justify-end w-full h-16 px-8 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
-      {/* <Button variant="link" asChild className="mr-2">
-				<Link href="/project">Projects</Link>
-			</Button> */}
-      <Tooltip>
+      {/* <Tooltip>
         <TooltipTrigger asChild>
           <Button variant="link" asChild className="mr-2">
             <Link href="/chat">
@@ -29,10 +27,15 @@ export async function Header() {
           </Button>
         </TooltipTrigger>
         <TooltipContent>New chat</TooltipContent>
-      </Tooltip>
-      {/* <Button variant="link" asChild className="mr-2">
+      </Tooltip> */}
+      {isAdmin && (
+        <Button variant="link" asChild className="mr-2">
+          <Link href="/project">Projects (Internal)</Link>
+        </Button>
+      )}
+      <Button variant="link" asChild className="mr-2">
         <Link href="/chat">Chat</Link>
-      </Button> */}
+      </Button>
       <IconSeparator className="size-6 text-muted-foreground/50" />
       <div className="flex items-center">
         {session?.user ? <UserMenu user={session!.user} /> : <LoginMenu />}

components/chat-sidebar/ChatAdminToggle.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { chatViewMode } from '@/state';
+import { chatViewMode } from '@/state/chat';
 import { useAtom } from 'jotai';
 import React from 'react';
 

components/chat-sidebar/ChatCard.tsx

@@ -8,6 +8,7 @@ import { ChatEntity } from '@/lib/types';
 import Image from 'next/image';
 import clsx from 'clsx';
 import Img from '../ui/Img';
+import { format } from 'date-fns';
 // import { format } from 'date-fns';
 
 type ChatCardProps = PropsWithChildren<{
@@ -50,7 +51,7 @@ const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
         <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() : '-'}
+            {updatedAt ? format(Number(updatedAt), 'yyyy-MM-dd') : '-'}
           </p>
         </div>
       </div>

components/chat/ChatDataLoad.tsx

@@ -1,11 +0,0 @@
-import { getKVChat } from '@/lib/kv/chat';
-import { Chat } from '.';
-
-export interface ChatDataLoadProps {
-  chatId: string;
-}
-
-export default async function ChatDataLoad({ chatId }: ChatDataLoadProps) {
-  const chat = await getKVChat(chatId);
-  return <Chat chat={chat} />;
-}

components/chat/ChatList.tsx

@@ -10,7 +10,7 @@ export interface ChatList {
 
 export function ChatList({ messages }: ChatList) {
   return (
-    <div className="relative mx-auto max-w-5xl px-8 pr-12 pb-[100px]">
+    <div className="relative mx-auto max-w-5xl px-8 pr-12">
       {messages
         // .filter(message => message.role !== 'system')
         .map((message, index) => (

components/chat/ChatMessage.tsx

@@ -11,6 +11,11 @@ import { IconOpenAI, IconUser } from '@/components/ui/Icons';
 import { ChatMessageActions } from '@/components/chat/ChatMessageActions';
 import { MessageBase } from '../../lib/types';
 import { useCleanedUpMessages } from '@/lib/hooks/useCleanedUpMessages';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/Tooltip';
 import Img from '../ui/Img';
 
 export interface ChatMessageProps {
@@ -77,14 +82,28 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
             },
             img(props) {
               return (
-                <Img
-                  src={props.src ?? '/landing.png'}
-                  alt={props.alt ?? 'answer-image'}
-                  quality={100}
-                  sizes="(min-width: 66em) 40vw,
-                      (min-width: 44em) 66vw,
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Img
+                      src={props.src ?? '/landing.png'}
+                      alt={props.alt ?? 'answer-image'}
+                      quality={100}
+                      className="cursor-zoom-in"
+                      sizes="(min-width: 66em) 25vw,
+                      (min-width: 44em) 40vw,
                       100vw"
-                />
+                    />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <Img
+                      className="m-2"
+                      src={props.src ?? '/landing.png'}
+                      alt={props.alt ?? 'answer-image'}
+                      quality={100}
+                      width={500}
+                    />
+                  </TooltipContent>
+                </Tooltip>
               );
             },
             code({ node, inline, className, children, ...props }) {
@@ -120,7 +139,7 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
         >
           {content}
         </MemoizedReactMarkdown>
-        <ChatMessageActions message={message} />
+        {/* <ChatMessageActions message={message} /> */}
       </div>
     </div>
   );

components/chat/Composer.tsx

@@ -57,138 +57,139 @@ export function Composer({
   }, []);
 
   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;
+    // <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}
+                      width={500}
+                      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 question about the image.'
               }
-              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>
+              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',
               )}
-              <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={() => scrollToBottom()}
+                      onClick={() => stop()}
                     >
-                      <IconArrowDown />
+                      <IconStop />
                     </Button>
                   </TooltipTrigger>
-                  <TooltipContent>Scroll to bottom</TooltipContent>
+                  <TooltipContent>Stop generating</TooltipContent>
                 </Tooltip>
-              </div>
-              {/* Stop / Regenerate Icon */}
-              <div className="absolute bottom-14 right-4">
-                {isLoading ? (
+              ) : (
+                messages?.length >= 2 && (
                   <Tooltip>
                     <TooltipTrigger asChild>
                       <Button
                         variant="outline"
                         size="icon"
                         className="bg-background"
-                        onClick={() => stop()}
+                        onClick={() => reload()}
                       >
-                        <IconStop />
+                        <IconRefresh />
                       </Button>
                     </TooltipTrigger>
-                    <TooltipContent>Stop generating</TooltipContent>
+                    <TooltipContent>Regenerate response</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>
+            {/* 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>
-          </form>
-        </div>
+          </div>
+        </form>
       </div>
     </div>
+    // </div>
   );
 }

components/chat/ImageList.tsx

@@ -1,76 +0,0 @@
-import React, { useCallback } from 'react';
-import useImageUpload from '../../lib/hooks/useImageUpload';
-import { useAtom, useAtomValue } from 'jotai';
-import { datasetAtom } from '../../state';
-import Image from 'next/image';
-import { produce } from 'immer';
-
-export interface ImageListProps {}
-
-const ImageList: React.FC<ImageListProps> = () => {
-  const { getRootProps, getInputProps, isDragActive } = useImageUpload({
-    noClick: true,
-  });
-
-  const [dataset, setDataset] = useAtom(datasetAtom);
-  return (
-    <div className="relative size-full px-12 max-w-3xl mx-auto">
-      {/* {dataset.length < 10 ? (
-				<div className="col-span-full px-8 py-4 rounded-xl bg-blue-100 text-blue-400 mb-8">
-					You can upload up to 10 images max by dragging image.
-				</div>
-			) : (
-				<div className="col-span-full px-8 py-4 rounded-xl bg-red-100 text-red-400 mb-8">
-					You have reached the maximum limit of 10 images.
-				</div>
-			)} */}
-      <div
-        {...getRootProps()}
-        className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4"
-      >
-        {dataset.map(entity => {
-          const { url: imageSrc, name, selected } = entity;
-          return (
-            <div
-              key={name}
-              onClick={() =>
-                setDataset(prev =>
-                  produce(prev, draft => {
-                    const index = draft.findIndex(d => d.name === name);
-                    draft[index].selected = !selected;
-                  }),
-                )
-              }
-              className={`relative rounded-xl overflow-hidden shadow-md cursor-pointer transition-transform hover:scale-105 box-content ${selected ? 'border-4 border-blue-500' : ''}`}
-            >
-              <Image
-                src={imageSrc}
-                draggable={false}
-                alt="dataset images"
-                width={500}
-                height={500}
-                objectFit="cover"
-                className="rounded-xl"
-              />
-              <div className="absolute bottom-0 left-0 bg-gray-800/50 text-white px-3 py-1 rounded-tr-lg">
-                <p className="text-xs font-bold">{name}</p>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      {isDragActive && (
-        <div
-          {...getRootProps()}
-          className="dropzone border-2 border-dashed border-gray-400 size-full absolute top-0 left-0 flex items-center justify-center rounded-lg cursor-pointer bg-gray-500/50"
-        >
-          <input {...getInputProps()} />
-          <p className="text-white">Drop the files here ...</p>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ImageList;

components/chat/index.tsx

@@ -1,10 +1,8 @@
 'use client';
 
-import { cn } from '@/lib/utils';
 import { ChatList } from '@/components/chat/ChatList';
 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';
 
@@ -22,25 +20,27 @@ export function Chat({ chat }: ChatProps) {
 
   return (
     <>
-      <div className="h-full overflow-auto" ref={scrollRef}>
+      <div className="h-full overflow-auto relative" ref={scrollRef}>
         <div className="pb-[200px] pt-4 md:pt-10" ref={messagesRef}>
           <ChatList messages={messages} />
           <div className="h-px w-full" ref={visibilityRef} />
         </div>
       </div>
-      <Composer
-        id={id}
-        url={url}
-        isLoading={isLoading}
-        stop={stop}
-        append={append}
-        reload={reload}
-        messages={messages}
-        input={input}
-        setInput={setInput}
-        isAtBottom={isAtBottom}
-        scrollToBottom={scrollToBottom}
-      />
+      <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}
+        />
+      </div>
     </>
   );
 }

components/project-sidebar/ProjectCard.tsx

@@ -26,14 +26,14 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ projectInfo }) => {
   return (
     <Link
       className={cn(
-        'p-4 m-2 bg-white l:h-[250px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
+        'p-4 m-2 bg-background l:h-[250px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
         Number(projectIdFromParam) === id && 'border-gray-500',
       )}
       href={`/project/${id}`}
     >
       <div className="overflow-hidden">
         <p className="text-xs text-gray-500">{orgName}</p>
-        <p className="text-sm font-medium text-black mb-1">{name}</p>
+        <p className="text-sm font-medium text-gray mb-1">{name}</p>
         <p className="text-xs text-gray-500">{formattedDate}</p>
       </div>
     </Link>

components/project/Chat.tsx

@@ -1,32 +0,0 @@
-'use client';
-
-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';
-
-export interface ChatProps {
-  mediaList: MediaDetails[];
-}
-
-const Chat: React.FC<ChatProps> = ({ mediaList }) => {
-  const { messages, append, reload, stop, isLoading, input, setInput } =
-    useChatWithMedia(mediaList);
-  return (
-    <>
-      <ChatList messages={messages} />
-      {/* <ChatPanel
-        isLoading={isLoading}
-        stop={stop}
-        append={append}
-        reload={reload}
-        messages={messages}
-        input={input}
-        setInput={setInput}
-      /> */}
-    </>
-  );
-};
-
-export default Chat;

components/project/MediaTile.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import Image from 'next/image';
 import {
@@ -6,6 +8,9 @@ import {
   TooltipTrigger,
 } from '@/components/ui/Tooltip';
 import { MediaDetails } from '@/lib/fetch';
+import { useAtom } from 'jotai';
+import { selectedMediaIdAtom } from '@/state/media';
+import { cn } from '@/lib/utils';
 
 export interface MediaTileProps {
   media: MediaDetails;
@@ -19,6 +24,8 @@ export default function MediaTile({ media }: MediaTileProps) {
     name,
     properties: { width, height },
   } = media;
+  const [selectedMediaId, setSelectedMediaId] = useAtom(selectedMediaIdAtom);
+  const selected = selectedMediaId === id;
   // const imageSrc = thumbnails.length ? thumbnails[thumbnails.length - 1] : url;
   const imageSrc = url;
   return (
@@ -30,7 +37,11 @@ export default function MediaTile({ media }: MediaTileProps) {
           alt="dataset images"
           width={width}
           height={height}
-          className="w-full h-auto relative rounded-xl overflow-hidden shadow-md cursor-pointer transition-transform hover:scale-105 box-content"
+          onClick={() => setSelectedMediaId(id)}
+          className={cn(
+            'w-full h-auto relative rounded-xl overflow-hidden shadow-md cursor-pointer transition-transform hover:scale-105 box-content',
+            selected && 'border-2 border-primary',
+          )}
         />
       </TooltipTrigger>
       <TooltipContent>

components/project/ProjectChat.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { MediaDetails } from '@/lib/fetch';
+import React from 'react';
+import { ChatList } from '../chat/ChatList';
+import useVisionAgent from '@/lib/hooks/useVisionAgent';
+import { nanoid } from '@/lib/utils';
+import { useScrollAnchor } from '@/lib/hooks/useScrollAnchor';
+import { Composer } from '../chat/Composer';
+import { useAtomValue } from 'jotai';
+import { selectedMediaIdAtom } from '@/state/media';
+
+export interface ChatProps {
+  mediaList: MediaDetails[];
+}
+
+const ProjectChat: React.FC<ChatProps> = ({ mediaList }) => {
+  const selectedMediaId = useAtomValue(selectedMediaIdAtom);
+  // fallback to the first media
+  const selectedMedia =
+    mediaList.find(media => media.id === selectedMediaId) ?? mediaList[0];
+  const { messages, append, reload, stop, isLoading, input, setInput } =
+    useVisionAgent({
+      url: selectedMedia.url,
+      messages: [],
+      user: 'does-not-matter@landing.ai',
+      updatedAt: Date.now(),
+    });
+
+  const { messagesRef, scrollRef, visibilityRef, isAtBottom, scrollToBottom } =
+    useScrollAnchor();
+
+  return (
+    <>
+      <div className="h-full overflow-auto" ref={scrollRef}>
+        <div className="pb-[200px] pt-4 md:pt-10" ref={messagesRef}>
+          <ChatList messages={messages} />
+          <div className="h-px w-full" ref={visibilityRef} />
+        </div>
+      </div>
+      <div className="absolute inset-x-0 bottom-0 w-full h-[178px]">
+        <Composer
+          url={selectedMedia.url}
+          isLoading={isLoading}
+          stop={stop}
+          append={append}
+          reload={reload}
+          messages={messages}
+          input={input}
+          setInput={setInput}
+          isAtBottom={isAtBottom}
+          scrollToBottom={scrollToBottom}
+        />
+      </div>
+    </>
+  );
+};
+
+export default ProjectChat;

components/ui/Img.tsx

@@ -29,10 +29,11 @@ const Img = React.forwardRef<
       className={cn('rounded-md', className)}
       onLoad={e => {
         const img = e.target as HTMLImageElement;
+        const aspectRatio = img.naturalWidth / img.naturalHeight;
         startTransition(() => {
           setDimensions({
-            width: img.naturalWidth,
-            height: img.naturalHeight,
+            width: width ?? img.naturalWidth,
+            height: width ? Number(width) / aspectRatio : img.naturalHeight,
           });
         });
         return onLoad?.(e);

lib/fetch/index.ts

@@ -51,7 +51,8 @@ const clefApiBuilder = <Params extends object | void, Resp>(
       method: options?.method ?? 'GET',
       headers: {
         sessionuser: JSON.stringify(sessionUser), // faked production user
-        apikey: 'land_sk_DKeoYtaZZrYqJ9TMMiXe4BIQgJcZ0s3XAoB0JT3jv73FFqnr6k', // dev key
+        // apikey: 'land_sk_DKeoYtaZZrYqJ9TMMiXe4BIQgJcZ0s3XAoB0JT3jv73FFqnr6k', // dev key
+        apikey: 'land_sk_Z0AWhSGURwC8UVTjyZDH7VMsYod6jfTK79fC2RTGD85NkV6hwO', // prod key
         'X-ROUTE': 'mingruizhang-landing',
       },
     };
@@ -95,7 +96,7 @@ export type ProjectBaseInfo = {
  * @author https://github.com/landing-ai/landing-platform/blob/mingrui-04-08-meaningful-project/packages/server-clef/src/main_app/controllers/admin/get_admin_meaningful_project_controller.ts
  */
 export const fetchRecentProjectList = clefApiBuilder<void, ProjectBaseInfo[]>(
-  'api/admin/projects/recent',
+  'api/admin/vision-agent/projects/recent',
 );
 
 export type MediaDetails = {
@@ -120,4 +121,4 @@ export type MediaDetails = {
 export const fetchProjectMedia = clefApiBuilder<
   { projectId: number },
   MediaDetails[]
->('api/admin/project/media');
+>('api/admin/vision-agent/project/media');

lib/hooks/useVisionAgent.tsx

@@ -3,7 +3,7 @@ import { toast } from 'react-hot-toast';
 import { useEffect, useState } from 'react';
 import { ChatEntity, MessageBase, SignedPayload } from '../types';
 import { saveKVChatMessage } from '../kv/chat';
-import { fetcher } from '../utils';
+import { fetcher, nanoid } from '../utils';
 import { getCleanedUpMessages } from './useCleanedUpMessages';
 import { CLEANED_SEPARATOR } from '../constants';
 
@@ -58,7 +58,6 @@ const useVisionAgent = (chat: ChatEntity) => {
     setMessages,
     error,
   } = useChat({
-    sendExtraMessageFields: true,
     api: '/api/vision-agent',
     onResponse(response) {
       if (response.status !== 200) {
@@ -70,7 +69,7 @@ const useVisionAgent = (chat: ChatEntity) => {
       if (images?.length) {
         const publicUrls = await Promise.all(
           images.map((image, index) =>
-            uploadBase64(image, message.id, id, index),
+            uploadBase64(image, message.id, id ?? 'no-id', index),
           ),
         );
         const newContent = publicUrls.reduce((accum, url, index) => {
@@ -83,13 +82,25 @@ const useVisionAgent = (chat: ChatEntity) => {
           ...message,
           content: logs + CLEANED_SEPARATOR + newContent,
         };
-        setMessages([...messages, newMessage]);
-        saveKVChatMessage(id, newMessage);
+        /**
+         * A workaround to fix the issue of the message not being appended to the chat
+         * https://github.com/vercel/ai/issues/550#issuecomment-1712693371
+         */
+        setMessages([
+          ...messages,
+          { id: nanoid(), role: 'user', content: input, createdAt: new Date() },
+          newMessage,
+        ]);
+        if (id) {
+          saveKVChatMessage(id, newMessage);
+        }
       } else {
-        saveKVChatMessage(id, {
-          ...message,
-          content: logs + CLEANED_SEPARATOR + content,
-        });
+        if (id) {
+          saveKVChatMessage(id, {
+            ...message,
+            content: logs + CLEANED_SEPARATOR + content,
+          });
+        }
       }
     },
     initialMessages: initialMessages,
@@ -99,35 +110,6 @@ const useVisionAgent = (chat: ChatEntity) => {
     },
   });
 
-  const [loadingDots, setLoadingDots] = useState('');
-
-  useEffect(() => {
-    let loadingInterval: NodeJS.Timeout;
-
-    if (isLoading) {
-      loadingInterval = setInterval(() => {
-        setLoadingDots(prevMessage => {
-          switch (prevMessage) {
-            case '':
-              return '.';
-            case '.':
-              return '..';
-            case '..':
-              return '...';
-            case '...':
-              return '';
-            default:
-              return '';
-          }
-        });
-      }, 500);
-    }
-
-    return () => {
-      clearInterval(loadingInterval);
-    };
-  }, [isLoading]);
-
   useEffect(() => {
     if (
       !isLoading &&
@@ -140,19 +122,21 @@ const useVisionAgent = (chat: ChatEntity) => {
 
   const assistantLoadingMessage = {
     id: 'loading',
-    content: loadingDots,
+    content: '...',
     role: 'assistant',
   };
 
   const messageWithLoading =
     isLoading &&
-      messages.length &&
-      messages[messages.length - 1].role !== 'assistant'
+    messages.length &&
+    messages[messages.length - 1].role !== 'assistant'
       ? [...messages, assistantLoadingMessage]
       : messages;
 
   const append: UseChatHelpers['append'] = async message => {
-    await saveKVChatMessage(id, message as MessageBase);
+    if (id) {
+      await saveKVChatMessage(id, message as MessageBase);
+    }
     return appendRaw(message);
   };
 

lib/types.ts

@@ -31,7 +31,7 @@ export type MessageBase = {
 
 export type ChatEntity = {
   url: string;
-  id: string;
+  id?: string; // a chat without id is not to be saved
   user: string; // email
   messages: MessageBase[];
   updatedAt: number;

state/{index.ts → chat.ts}

@@ -1,8 +1,3 @@
 import { atom } from 'jotai';
-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');

state/media.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const selectedMediaIdAtom = atom<number | null>(null);