chat interface

src/app/chat/_components/Messages.tsx

@@ -1,24 +1,35 @@
-import { type UIMessage } from 'ai'
+import { type ChatStatus, type UIMessage } from 'ai'
 import * as Card from "~/components/ui/card"
-import AnimateTextIn from '~/app/_components/Animated/AnimateIn';
 import { UserMessage } from './UserMessage';
 import { AssistantMessage } from './AssistantMessage';
 import { ScrollArea } from '~/components/ui/scroll-area';
-import { useTimeLine } from '~/app/_providers/GsapProvicer';
-import {
-  memo
-  } from 'react';
-const Messages = memo(({ messages}: { messages: UIMessage[]}) => {
+import { memo } from 'react';
+const Messages = memo(({messages,status}: { messages: UIMessage[],status:ChatStatus}) => {
   return (
     <ScrollArea data-scroller-priority='1' className="w-full h-[90%] max-w-4xl mx-auto">
       {messages.map((message, i) => (
-        <Card.AnimatedCard scrollOnly={true} tlId='chat' position={i * 0.2} key={i}>
+        <Card.AnimatedCard scrollOnly={true} key={i}>
           <Card.CardContent>
             {message.role == 'assistant' && <AssistantMessage message={message} />}
             {message.role == 'user' && <UserMessage message={message} />}
           </Card.CardContent>
         </Card.AnimatedCard>
       ))}
+      {status == 'submitted' &&
+        <Card.AnimatedCard scrollOnly={true}>
+          <Card.CardContent>
+            <AssistantMessage message={{
+              id:"",
+              role:"assistant",
+              parts:[{
+                type:'text',
+                text:'Thinking ...'
+              }]
+            }}/>
+          </Card.CardContent>
+        </Card.AnimatedCard>
+
+      }
     </ScrollArea>)
 })