feat: Customized Img and scroll to bottom (#18)

<img width="1904" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/5669963/2043cf31-34e8-4aae-8ddd-9f068154fb8f">

app/api/sign/route.ts

@@ -7,33 +7,33 @@ import { nanoid } from '@/lib/utils';
  * @returns
  */
 export async function POST(req: Request): Promise<Response> {
-    const session = await auth();
-    const user = session?.user?.email ?? 'anonymous';
-    // if (!email) {
-    //   return new Response('Unauthorized', {
-    //     status: 401,
-    //   });
-    // }
+  const session = await auth();
+  const user = session?.user?.email ?? 'anonymous';
+  // if (!email) {
+  //   return new Response('Unauthorized', {
+  //     status: 401,
+  //   });
+  // }
 
-    try {
-        const { fileName, fileType } = (await req.json()) as {
-            fileName: string;
-            fileType: string;
-        };
+  try {
+    const { fileName, fileType } = (await req.json()) as {
+      fileName: string;
+      fileType: string;
+    };
 
-        const id = nanoid();
+    const id = nanoid();
 
-        const signedFileName = `${user}/${id}/${fileName}`;
-        const res = await getPresignedUrl(signedFileName, fileType);
-        return Response.json({
-            id,
-            signedUrl: res.url,
-            publicUrl: `https://${process.env.AWS_BUCKET_NAME}.s3.${process.env.AWS_REGION}.amazonaws.com/${signedFileName}`,
-            fields: res.fields,
-        });
-    } catch (error) {
-        return new Response((error as Error).message, {
-            status: 400,
-        });
-    }
+    const signedFileName = `${user}/${id}/${fileName}`;
+    const res = await getPresignedUrl(signedFileName, fileType);
+    return Response.json({
+      id,
+      signedUrl: res.url,
+      publicUrl: `https://${process.env.AWS_BUCKET_NAME}.s3.${process.env.AWS_REGION}.amazonaws.com/${signedFileName}`,
+      fields: res.fields,
+    });
+  } catch (error) {
+    return new Response((error as Error).message, {
+      status: 400,
+    });
+  }
 }

app/api/vision-agent/route.ts

@@ -5,7 +5,7 @@ import { MessageBase } from '../../../lib/types';
 
 // export const runtime = 'edge';
 export const dynamic = 'force-dynamic';
-export const maxDuration = 60; // This function can run for a maximum of 5 seconds
+export const maxDuration = 300; // This function can run for a maximum of 5 minutes
 
 export async function POST(req: Request) {
   const json = await req.json();

app/globals.css

@@ -144,10 +144,6 @@ tr {
   border-top: 1px solid var(--color-border-muted);
 }
 
-tr:nth-child(2n) {
-  background-color: var(--color-canvas-subtle);
-}
-
 td,
 th {
   padding: 6px 13px;

components/chat-sidebar/ChatCard.tsx

@@ -7,6 +7,7 @@ import { cn } from '@/lib/utils';
 import { ChatEntity } from '@/lib/types';
 import Image from 'next/image';
 import clsx from 'clsx';
+import Img from '../ui/Img';
 
 type ChatCardProps = PropsWithChildren<{
   chat: ChatEntity;
@@ -43,13 +44,7 @@ const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
       classNames={chatIdFromParam === id && 'border-gray-500'}
     >
       <div className="overflow-hidden flex items-center size-full">
-        <Image
-          src={url}
-          alt={url}
-          width={50}
-          height={50}
-          className="rounded w-1/4 "
-        />
+        <Img src={url} className="w-1/4 " />
         <div className="flex items-start h-full">
           <p className="text-sm w-3/4 ml-3">{title}</p>
         </div>

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 overflow-auto">
+    <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

@@ -32,7 +32,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-auto">
+          <div className="bg-slate-100 dark:bg-slate-900 mb-4 p-4 max-h-[400px] overflow-y-scroll">
             <div className="text-xl font-bold">Thinking Process</div>
             <MemoizedReactMarkdown
               className="break-words text-sm"

components/chat/ChatPanel.tsx

@@ -3,7 +3,6 @@ import { type UseChatHelpers } from 'ai/react';
 
 import { Button } from '@/components/ui/Button';
 import { PromptForm } from '@/components/chat/PromptForm';
-import { ButtonScrollToBottom } from '@/components/chat/ButtonScrollToBottom';
 import { IconRefresh, IconStop } from '@/components/ui/Icons';
 import { MessageBase } from '../../lib/types';
 
@@ -32,29 +31,7 @@ export function ChatPanel({
 }: 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]">
-      <ButtonScrollToBottom />
       <div className="mx-auto sm:max-w-3xl sm:px-4">
-        <div className="flex items-center justify-center h-12">
-          {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="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}
@@ -68,6 +45,8 @@ export function ChatPanel({
             input={input}
             setInput={setInput}
             isLoading={isLoading}
+            messages={messages}
+            reload={reload}
           />
         </div>
       </div>

components/chat/ChatScrollAnchor.tsx

@@ -1,29 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useInView } from 'react-intersection-observer';
-
-import { useAtBottom } from '@/lib/hooks/useAtBottom';
-
-interface ChatScrollAnchorProps {
-  trackVisibility?: boolean;
-}
-
-export function ChatScrollAnchor({ trackVisibility }: ChatScrollAnchorProps) {
-  const isAtBottom = useAtBottom();
-  const { ref, entry, inView } = useInView({
-    trackVisibility,
-    delay: 100,
-    rootMargin: '0px 0px -150px 0px',
-  });
-
-  React.useEffect(() => {
-    if (isAtBottom && trackVisibility && !inView) {
-      entry?.target.scrollIntoView({
-        block: 'start',
-      });
-    }
-  }, [inView, entry, isAtBottom, trackVisibility]);
-
-  return <div ref={ref} className="h-px w-full" />;
-}

components/chat/PromptForm.tsx

@@ -2,22 +2,28 @@ import * as React from 'react';
 import Textarea from 'react-textarea-autosize';
 import { UseChatHelpers } from 'ai/react';
 import { useEnterSubmit } from '@/lib/hooks/useEnterSubmit';
-import { cn } from '@/lib/utils';
 import { Button, buttonVariants } from '@/components/ui/Button';
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/Tooltip';
-import { IconArrowElbow, IconPlus } from '@/components/ui/Icons';
+import {
+  IconArrowElbow,
+  IconPlus,
+  IconRefresh,
+  IconStop,
+} from '@/components/ui/Icons';
 import { useRouter } from 'next/navigation';
-import Image from 'next/image';
+import Img from '../ui/Img';
+import { MessageBase } from '@/lib/types';
 
 export interface PromptProps
-  extends Pick<UseChatHelpers, 'input' | 'setInput'> {
+  extends Pick<UseChatHelpers, 'input' | 'setInput' | 'reload'> {
   onSubmit: (value: string) => void;
   isLoading: boolean;
   url?: string;
+  messages: MessageBase[];
 }
 
 export function PromptForm({
@@ -26,6 +32,8 @@ export function PromptForm({
   setInput,
   isLoading,
   url,
+  messages,
+  reload,
 }: PromptProps) {
   const { formRef, onKeyDown } = useEnterSubmit();
   const inputRef = React.useRef<HTMLTextAreaElement>(null);
@@ -52,15 +60,11 @@ export function PromptForm({
         {url && (
           <Tooltip>
             <TooltipTrigger asChild>
-              <Image
-                src={url}
-                width={250}
-                height={250}
-                alt="chosen image"
-                className="w-1/5 my-4 mx-2 rounded-md"
-              />
+              <Img src={url} className="w-1/5 my-4 mx-2 cursor-zoom-in" />
             </TooltipTrigger>
-            <TooltipContent>New Chat</TooltipContent>
+            <TooltipContent>
+              <Img src={url} className="m-2" />
+            </TooltipContent>
           </Tooltip>
         )}
         <Textarea
@@ -74,7 +78,28 @@ export function PromptForm({
           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 right-0 top-4 sm:right-4">
+        <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

components/chat/index.tsx

@@ -3,10 +3,11 @@
 import { cn } from '@/lib/utils';
 import { ChatList } from '@/components/chat/ChatList';
 import { ChatPanel } from '@/components/chat/ChatPanel';
-import { ChatScrollAnchor } from '@/components/chat/ChatScrollAnchor';
 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;
@@ -17,12 +18,16 @@ export function Chat({ chat }: ChatProps) {
   const { messages, append, reload, stop, isLoading, input, setInput } =
     useVisionAgent(chat);
 
+  const { messagesRef, scrollRef, visibilityRef, isAtBottom, scrollToBottom } =
+    useScrollAnchor();
+  console.log('[Ming] ~ Chat ~ isAtBottom:', isAtBottom);
+
   return (
     <>
-      <div className={cn('pb-[250px] pt-4 md:pt-10 h-full')}>
-        <div className="size-full overflow-auto">
+      <div className="h-full overflow-auto" ref={scrollRef}>
+        <div className="pb-[200px] pt-4 md:pt-10" ref={messagesRef}>
           <ChatList messages={messages} />
-          <ChatScrollAnchor trackVisibility={isLoading} />
+          <div className="h-px w-full" ref={visibilityRef} />
         </div>
       </div>
       <ChatPanel
@@ -36,6 +41,10 @@ export function Chat({ chat }: ChatProps) {
         input={input}
         setInput={setInput}
       />
+      <ButtonScrollToBottom
+        isAtBottom={isAtBottom}
+        scrollToBottom={scrollToBottom}
+      />
     </>
   );
 }

components/project/Chat.tsx

@@ -4,7 +4,6 @@ import { MediaDetails } from '@/lib/fetch';
 import useChatWithMedia from '@/lib/hooks/useChatWithMedia';
 import React from 'react';
 import { ChatList } from '../chat/ChatList';
-import { ChatScrollAnchor } from '../chat/ChatScrollAnchor';
 import { ChatPanel } from '../chat/ChatPanel';
 
 export interface ChatProps {
@@ -17,7 +16,6 @@ const Chat: React.FC<ChatProps> = ({ mediaList }) => {
   return (
     <>
       <ChatList messages={messages} />
-      <ChatScrollAnchor trackVisibility={isLoading} />
       <ChatPanel
         isLoading={isLoading}
         stop={stop}

components/{chat → ui}/ButtonScrollToBottom.tsx

@@ -1,30 +1,32 @@
 'use client';
 
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '@/lib/utils';
-import { useAtBottom } from '@/lib/hooks/useAtBottom';
 import { Button, type ButtonProps } from '@/components/ui/Button';
 import { IconArrowDown } from '@/components/ui/Icons';
 
-export function ButtonScrollToBottom({ className, ...props }: ButtonProps) {
-  const isAtBottom = useAtBottom();
+interface ButtonScrollToBottomProps extends ButtonProps {
+  isAtBottom: boolean;
+  scrollToBottom: () => void;
+}
 
+export function ButtonScrollToBottom({
+  className,
+  isAtBottom,
+  scrollToBottom,
+  ...props
+}: ButtonScrollToBottomProps) {
   return (
     <Button
       variant="outline"
       size="icon"
       className={cn(
-        'absolute right-4 top-1 z-10 bg-background transition-opacity duration-300 sm:right-8 md:top-2',
+        'fixed bottom-16 right-4 z-10 bg-background transition-opacity duration-300',
         isAtBottom ? 'opacity-0' : 'opacity-100',
         className,
       )}
-      onClick={() =>
-        window.scrollTo({
-          top: document.body.offsetHeight,
-          behavior: 'smooth',
-        })
-      }
+      onClick={() => scrollToBottom()}
       {...props}
     >
       <IconArrowDown />

components/ui/ImageLoader.tsx

@@ -1,11 +0,0 @@
-// import Image from 'next/image';
-// import React from 'react';
-
-// type ImageLoaderProps = typeof Image;
-
-// const ImageLoader: React.FC<ImageLoaderProps> = props => {
-//   const { alt, width, height } = props;
-//   return <Image alt={alt} />;
-// };
-
-// export default ImageLoader;

components/ui/Img.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { cn } from '@/lib/utils';
+
+const placeholder =
+  'data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/4QDWRXhpZgAATU0AKgAAAAgABwEGAAMAAAABAAIAAAESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAITAAMAAAABAAEAAIdpAAQAAAABAAAAcgAAAAAAAABIAAAAAQAAAEgAAAABAAeQAAAHAAAABDAyMjGRAQAHAAAABAECAwCgAAAHAAAABDAxMDCgAQADAAAAAQABAACgAgAEAAAAAQAAADKgAwAEAAAAAQAAADKkBgADAAAAAQAAAAAAAAAAAAD/wAARCAAyADIDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9sAQwABAQEBAQECAQECAwICAgMEAwMDAwQGBAQEBAQGBwYGBgYGBgcHBwcHBwcHCAgICAgICQkJCQkLCwsLCwsLCwsL/9sAQwECAgIDAwMFAwMFCwgGCAsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsL/90ABAAE/9oADAMBAAIRAxEAPwD+nbSfDst/NnB5Ne5+G/htJMqsVOD610fw/wDCS3Lq7L3r6y0Lw7b20SgqMiluB4hpvwti2Asn51fufhVbsmQlfSCQQQjHFOIt24OKLAfEXiL4XtCjMiGvnrxH4SlsJG+UjFfqZf6Va3UZUgV84/ETwTGY3kRaVrbAfAp058//AK6T+zn/AM5/wr1uTw0BIwx3P+elM/4Roen+fyo5gP/Q/tp+G1vGIVJFer6n4lstGizM4XFeH/DzVUW3HPavmL9pX4sXvhmKV0Yqq5qbgfXeq/GjRLJipmH51yMn7Qvh2NtrTL+dfzYfGL9uqTw1PLGZjkE96+M7j/gotqtzf+WkrYz60rsD+1bwt8YtD12ZYYZlJPvXY+KlivdOMy8giv5q/wBjD9prxB8QNcgXezKxHOa/obsdZa48KRPMTuKiqA8dm09PNbjuaj/s9PSp5rtDM5B7nvUf2tfX9f8A69QB/9H+v3wLrW1RHuxmvJv2iPh43jLRZhEuSynpWN4X8Rm0lCs2BnivoKy1iy1W1ENyQcjFQB/J7+0x+x34yvtVmlsY3OScYBr418KfsLfES81xFmgkALDPBr+1rXPhR4d15jJJEj59qwtP+BXhiznE4t0BHsKEugH54fsJfsqS/Dqzt7m/TDgAnIr9j9Q1BNN0kW4OAq1yun2mk+G7fZAFG0dq868Y+LwyMit+FFtAEl1tfNb5x1NR/wBtr/fH+fwrxptbnLE5703+2p6QH//S/pMs+JjivYfDjv5Q5NePWn+uNev+HP8AVCkwPWdPdtvU1fnkk2n5j09aztP+7V6f7p+lLoBxeuu4jOCa8N1xmMjEnNe4a7/qzXh2t/6xqfQDlqKKKgD/2Q==';
+
+// const Props = Omit<React.ComponentPropsWithoutRef<typeof Image>, 'alt'>;
+const Img = React.forwardRef<
+  React.ElementRef<typeof Image>,
+  Omit<React.ComponentPropsWithoutRef<typeof Image>, 'alt'>
+>(({ src, onLoad, width, height, className, ...props }, ref) => {
+  const [dimensions, setDimensions] = React.useState({
+    width: width ?? 200,
+    height: height ?? 200,
+  });
+  // const [isLoading, setIsLoading] = React.useState(true);
+  const [_, startTransition] = React.useTransition();
+  return (
+    <Image
+      src={src}
+      placeholder={placeholder}
+      width={dimensions.width}
+      height={dimensions.height}
+      alt="image"
+      ref={ref}
+      className={cn('rounded-md', className)}
+      onLoad={e => {
+        const img = e.target as HTMLImageElement;
+        startTransition(() => {
+          setDimensions({
+            width: img.naturalWidth,
+            height: img.naturalHeight,
+          });
+        });
+        return onLoad?.(e);
+      }}
+      {...props}
+    />
+  );
+});
+
+Img.displayName = Image.displayName;
+
+export default Img;

lib/hooks/useAtBottom.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-
-export function useAtBottom(offset = 0) {
-  const [isAtBottom, setIsAtBottom] = React.useState(false);
-
-  React.useEffect(() => {
-    const handleScroll = () => {
-      setIsAtBottom(
-        window.innerHeight + window.scrollY >=
-          document.body.offsetHeight - offset,
-      );
-    };
-
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    handleScroll();
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [offset]);
-
-  return isAtBottom;
-}

lib/hooks/useScrollAnchor.tsx

@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export const useScrollAnchor = () => {
+  const messagesRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const visibilityRef = useRef<HTMLDivElement>(null);
+
+  const [isAtBottom, setIsAtBottom] = useState(true);
+  const [isVisible, setIsVisible] = useState(false);
+
+  const scrollToBottom = useCallback(() => {
+    if (messagesRef.current) {
+      messagesRef.current.scrollIntoView({
+        block: 'end',
+        behavior: 'smooth',
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (messagesRef.current) {
+      if (isAtBottom && !isVisible) {
+        messagesRef.current.scrollIntoView({
+          block: 'end',
+        });
+      }
+    }
+  }, [isAtBottom, isVisible]);
+
+  useEffect(() => {
+    const { current } = scrollRef;
+
+    if (current) {
+      const handleScroll = (event: Event) => {
+        const target = event.target as HTMLDivElement;
+        const offset = 25;
+        const isAtBottom =
+          target.scrollTop + target.clientHeight >=
+          target.scrollHeight - offset;
+
+        setIsAtBottom(isAtBottom);
+      };
+
+      current.addEventListener('scroll', handleScroll, {
+        passive: true,
+      });
+
+      return () => {
+        current.removeEventListener('scroll', handleScroll);
+      };
+    }
+  }, []);
+
+  useEffect(() => {
+    if (visibilityRef.current) {
+      let observer = new IntersectionObserver(
+        entries => {
+          entries.forEach(entry => {
+            if (entry.isIntersecting) {
+              setIsVisible(true);
+            } else {
+              setIsVisible(false);
+            }
+          });
+        },
+        {
+          rootMargin: '0px 0px -150px 0px',
+        },
+      );
+
+      observer.observe(visibilityRef.current);
+
+      return () => {
+        observer.disconnect();
+      };
+    }
+  });
+
+  return {
+    messagesRef,
+    scrollRef,
+    visibilityRef,
+    scrollToBottom,
+    isAtBottom,
+    isVisible,
+  };
+};