feat: Chat layout pt.1 (#61)

<img width="1156" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/5669963/31574a2f-c287-4bd2-95e0-71f8af855b18">

app/chat/page.tsx

@@ -22,7 +22,7 @@ import Loading from '@/components/ui/Loading';
 // const EXAMPLE_URL = 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg';
 const EXAMPLE_URL =
   'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/flower.png';
-const EXAMPLE_HEADER = 'Counting and find';
+const EXAMPLE_HEADER = 'Count and find';
 const EXAMPLE_SUBHEADER =
   'number of flowers, area of largest and smallest flower';
 const EXAMPLE_PROMPT =
@@ -101,6 +101,7 @@ export default function Page() {
               const resp = await dbPostCreateChat({
                 mediaUrl: example.url,
                 initMessages: example.initMessages,
+                title: example.heading,
               });
               setUploading(false);
               if (resp) {

components/chat/ChatClient.tsx

@@ -25,7 +25,7 @@ export function Chat({ chat, session, isAdminView }: ChatProps) {
   return (
     <>
       <div className="h-full overflow-auto relative" ref={scrollRef}>
-        <div className="pb-[200px] pt-4 md:pt-10" ref={messagesRef}>
+        <div className="pb-[200px] pt-6" ref={messagesRef}>
           <ChatList
             messages={messages}
             session={session}

components/chat/ChatList.tsx

@@ -15,10 +15,10 @@ export interface ChatList {
 
 export function ChatList({ messages, session, isLoading }: ChatList) {
   return (
-    <div className="relative mx-auto max-w-5xl px-8 pr-12">
+    <div className="relative mx-auto max-w-5xl px-8 pt-6 border rounded-lg">
       {!session && (
         <>
-          <div className="group relative mb-4 flex items-center">
+          <div className="group relative mb-6 flex items-center">
             <div className="bg-background flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow">
               <IconExclamationTriangle />
             </div>
@@ -52,15 +52,11 @@ export function ChatList({ messages, session, isLoading }: ChatList) {
       {messages
         // .filter(message => message.role !== 'system')
         .map((message, index) => (
-          <div key={index}>
-            <ChatMessage
-              message={message}
-              isLoading={isLoading && index === messages.length - 1}
-            />
-            {index < messages.length - 1 && (
-              <Separator className="my-4 md:my-8" />
-            )}
-          </div>
+          <ChatMessage
+            key={index}
+            message={message}
+            isLoading={isLoading && index === messages.length - 1}
+          />
         ))}
     </div>
   );

components/chat/ChatMessage.tsx

@@ -9,7 +9,7 @@ import { useMemo, useState } from 'react';
 import { cn } from '@/lib/utils';
 import { CodeBlock } from '@/components/ui/CodeBlock';
 import { MemoizedReactMarkdown } from '@/components/chat/MemoizedReactMarkdown';
-import { IconOpenAI, IconUser } from '@/components/ui/Icons';
+import { IconLandingAI, IconUser } from '@/components/ui/Icons';
 import { MessageBase } from '../../lib/types';
 import {
   Tooltip,
@@ -86,7 +86,7 @@ const Markdown: React.FC<{
               );
             }
             return (
-              <p className="my-2 last:mb-0 whitespace-pre-line">{children}</p>
+              <p className="mb-2 last:mb-0 whitespace-pre-line">{children}</p>
             );
           },
           img(props) {
@@ -96,28 +96,14 @@ const Markdown: React.FC<{
               );
             }
             return (
-              <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>
+              <Img
+                src={props.src ?? '/landing.png'}
+                alt={props.alt ?? 'answer-image'}
+                quality={100}
+                sizes="(min-width: 66em) 15vw,
+                        (min-width: 44em) 20vw,
+                        100vw"
+              />
             );
           },
           code({ node, inline, className, children, ...props }) {
@@ -157,20 +143,24 @@ const Markdown: React.FC<{
   );
 };
 
-export function ChatMessage({
-  message,
-  isLoading,
-  ...props
-}: ChatMessageProps) {
+export function ChatMessage({ message, isLoading }: ChatMessageProps) {
   const { logs, content } = useMemo(() => {
     return getCleanedUpMessages({
       content: message.content,
       role: message.role,
     });
   }, [message.content, message.role]);
+  console.log('[Ming] logs:', logs);
+  console.log('[Ming] content:', content);
+  console.log('[Ming] raw:', message.content);
   const [details, setDetails] = useState<string>('');
   return (
-    <div className={cn('group relative mb-4 flex items-start')} {...props}>
+    <div
+      className={cn(
+        'group relative mb-6 flex rounded-md bg-muted px-4 py-6 w-3/5',
+        message.role === 'user' ? 'ml-auto mr-0 w-3/5' : 'w-4/5',
+      )}
+    >
       <div
         className={cn(
           'flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow',
@@ -179,11 +169,10 @@ export function ChatMessage({
             : 'bg-primary text-primary-foreground',
         )}
       >
-        {message.role === 'user' ? <IconUser /> : <IconOpenAI />}
+        {message.role === 'user' ? <IconUser /> : <IconLandingAI />}
       </div>
       <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
         {logs && <Markdown content={logs} setDetails={setDetails} />}
-        {/* <ChatMessageActions message={message} /> */}
         {isLoading && <Loading />}
       </div>
       <Dialog open={!!details} onOpenChange={open => !open && setDetails('')}>

components/ui/Icons.tsx

@@ -88,18 +88,60 @@ function IconNextChat({
   );
 }
 
-function IconOpenAI({ className, ...props }: React.ComponentProps<'svg'>) {
+function IconLandingAI({ className, ...props }: React.ComponentProps<'svg'>) {
   return (
     <svg
-      fill="currentColor"
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
-      role="img"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={cn('size-4', className)}
-      {...props}
     >
-      <title>OpenAI icon</title>
-      <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+      <rect width="24" height="24" rx="4" fill="white" />
+      <path
+        d="M5 13.469V17.0762L7.84434 18.6274V15.0202L5 13.469Z"
+        fill="black"
+      />
+      <path
+        d="M5 9.2356V12.8428L7.84434 14.3921V10.7868L5 9.2356Z"
+        fill="black"
+      />
+      <path
+        d="M5 5.00391V8.60921L7.84434 10.1604V6.55509L5 5.00391Z"
+        fill="black"
+      />
+      <path
+        d="M15.1556 15.0202V18.6274L18 17.0762V13.469L15.1556 15.0202Z"
+        fill="black"
+      />
+      <path
+        d="M8.38708 10.7868V14.3921L11.2314 12.8428V9.2356L8.38708 10.7868Z"
+        fill="black"
+      />
+      <path
+        d="M8.38708 6.55509V10.1604L11.2314 8.60921V5.00391L8.38708 6.55509Z"
+        fill="black"
+      />
+      <path
+        d="M10.9421 4.54541L8.11669 3L5.29315 4.54541L8.11669 6.08889L10.9421 4.54541Z"
+        fill="black"
+      />
+      <path
+        d="M8.38708 15.3054V18.9127L11.2314 20.4619V16.8566L8.38708 15.3054Z"
+        fill="black"
+      />
+      <path
+        d="M11.7742 16.8566V20.4619L14.6186 18.9127V15.3054L11.7742 16.8566Z"
+        fill="black"
+      />
+      <path
+        d="M8.67645 14.8506L11.5 16.396L14.3235 14.8506L11.5 13.3071L8.67645 14.8506Z"
+        fill="black"
+      />
+      <path
+        d="M17.7144 13.0108L14.889 11.4673L12.0654 13.0108L14.889 14.5542L17.7144 13.0108Z"
+        fill="black"
+      />
     </svg>
   );
 }
@@ -576,7 +618,7 @@ function IconExclamationTriangle({
 export {
   IconEdit,
   IconNextChat,
-  IconOpenAI,
+  IconLandingAI,
   IconVercel,
   IconGitHub,
   IconSeparator,

lib/hooks/useScrollAnchor.tsx

@@ -5,7 +5,7 @@ export const useScrollAnchor = () => {
   const scrollRef = useRef<HTMLDivElement>(null);
   const visibilityRef = useRef<HTMLDivElement>(null);
 
-  const [isAtBottom, setIsAtBottom] = useState(true);
+  // const [isAtBottom, setIsAtBottom] = useState(true);
   const [isVisible, setIsVisible] = useState(false);
 
   const scrollToBottom = useCallback(() => {
@@ -17,39 +17,47 @@ export const useScrollAnchor = () => {
     }
   }, []);
 
-  useEffect(() => {
-    if (messagesRef.current) {
-      if (isAtBottom && !isVisible) {
-        messagesRef.current.scrollIntoView({
-          block: 'end',
-        });
-      }
-    }
-  }, [isAtBottom, isVisible]);
+  // useEffect(() => {
+  //   if (messagesRef.current) {
+  //     if (isAtBottom && !isVisible) {
+  //       messagesRef.current.scrollIntoView({
+  //         block: 'end',
+  //       });
+  //     }
+  //   }
+  // }, [isAtBottom, isVisible]);
 
-  useEffect(() => {
-    const { current } = scrollRef;
+  /**
+   * Seem to be broken, no time to fix
+   */
+  // 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;
+  //   if (current) {
+  //     const handleScroll = (event: Event) => {
+  //       const target = event.target as HTMLDivElement;
+  //       const offset = 100;
+  //       console.log(
+  //         '[Ming] ~ handleScroll ~ target.scrollTop + target.clientHeight:',
+  //         target.scrollTop + target.clientHeight - target.scrollHeight,
+  //       );
+  //       const isAtBottom =
+  //         target.scrollTop + target.clientHeight >=
+  //         target.scrollHeight - offset;
 
-        setIsAtBottom(isAtBottom);
-      };
+  //       setIsAtBottom(isAtBottom);
+  //     };
 
-      current.addEventListener('scroll', handleScroll, {
-        passive: true,
-      });
+  //     current.addEventListener('scroll', handleScroll, {
+  //       passive: true,
+  //     });
+  //     console.log('[Ming] ~ useEffect ~ current:', current);
 
-      return () => {
-        current.removeEventListener('scroll', handleScroll);
-      };
-    }
-  }, []);
+  //     return () => {
+  //       current.removeEventListener('scroll', handleScroll);
+  //     };
+  //   }
+  // }, []);
 
   useEffect(() => {
     if (visibilityRef.current) {
@@ -81,7 +89,6 @@ export const useScrollAnchor = () => {
     scrollRef,
     visibilityRef,
     scrollToBottom,
-    isAtBottom,
-    isVisible,
+    isAtBottom: isVisible,
   };
 };