feat: add loading state on message (#41)

<img width="1210" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/0a9fd02e-92a8-466a-af4e-a93406c6d69a">
<img width="1212" alt="Screenshot 2024-05-10 at 23 14 28"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/e005388e-85a3-4724-9567-9c5ad6b6d552">

components/chat/ChatList.tsx

@@ -10,9 +10,10 @@ import Link from 'next/link';
 export interface ChatList {
   messages: MessageBase[];
   session: Session | null;
+  isLoading: boolean;
 }
 
-export function ChatList({ messages, session }: ChatList) {
+export function ChatList({ messages, session, isLoading }: ChatList) {
   return (
     <div className="relative mx-auto max-w-5xl px-8 pr-12">
       {!session && (
@@ -52,7 +53,10 @@ export function ChatList({ messages, session }: ChatList) {
         // .filter(message => message.role !== 'system')
         .map((message, index) => (
           <div key={index}>
-            <ChatMessage message={message} />
+            <ChatMessage
+              message={message}
+              isLoading={isLoading && index === messages.length - 1}
+            />
             {index < messages.length - 1 && (
               <Separator className="my-4 md:my-8" />
             )}

components/chat/ChatMessage.tsx

@@ -17,12 +17,18 @@ import {
 } from '@/components/ui/Tooltip';
 import Img from '../ui/Img';
 import { getCleanedUpMessages } from '@/lib/messageUtils';
+import Loading from '../ui/Loading';
 
 export interface ChatMessageProps {
   message: MessageBase;
+  isLoading: boolean;
 }
 
-export function ChatMessage({ message, ...props }: ChatMessageProps) {
+export function ChatMessage({
+  message,
+  isLoading,
+  ...props
+}: ChatMessageProps) {
   const { logs, content } = useMemo(() => {
     return getCleanedUpMessages({
       content: message.content,
@@ -150,6 +156,7 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
           {content}
         </MemoizedReactMarkdown>
         {/* <ChatMessageActions message={message} /> */}
+        {isLoading && <Loading />}
       </div>
     </div>
   );

components/chat/index.tsx

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

components/project/ProjectChat.tsx

@@ -34,7 +34,7 @@ const ProjectChat: React.FC<ChatProps> = ({ mediaList }) => {
     <>
       <div className="h-full overflow-auto" ref={scrollRef}>
         <div className="pb-[200px] pt-4 md:pt-10" ref={messagesRef}>
-          <ChatList messages={messages} session={null} />
+          <ChatList messages={messages} session={null} isLoading={isLoading} />
           <div className="h-px w-full" ref={visibilityRef} />
         </div>
       </div>