feat: ai elements (#1143)

components/messages.tsx

@@ -8,6 +8,7 @@ import { motion } from 'framer-motion';
 import { useMessages } from '@/hooks/use-messages';
 import type { ChatMessage } from '@/lib/types';
 import { useDataStream } from './data-stream-provider';
+import { Conversation, ConversationContent, ConversationScrollButton } from './elements/conversation';
 
 interface MessagesProps {
   chatId: string;
@@ -43,42 +44,44 @@ function PureMessages({
   useDataStream();
 
   return (
-    <div
-      ref={messagesContainerRef}
-      className="flex flex-col min-w-0 gap-6 flex-1 overflow-y-scroll pt-4 relative"
-    >
-      {messages.length === 0 && <Greeting />}
+    <div ref={messagesContainerRef} className="flex-1 overflow-y-auto">
+      <Conversation className="flex flex-col min-w-0 gap-6 pt-4 pb-32">
+        <ConversationContent className="flex flex-col gap-6">
+          {messages.length === 0 && <Greeting />}
 
-      {messages.map((message, index) => (
-        <PreviewMessage
-          key={message.id}
-          chatId={chatId}
-          message={message}
-          isLoading={status === 'streaming' && messages.length - 1 === index}
-          vote={
-            votes
-              ? votes.find((vote) => vote.messageId === message.id)
-              : undefined
-          }
-          setMessages={setMessages}
-          regenerate={regenerate}
-          isReadonly={isReadonly}
-          requiresScrollPadding={
-            hasSentMessage && index === messages.length - 1
-          }
-        />
-      ))}
+          {messages.map((message, index) => (
+            <PreviewMessage
+              key={message.id}
+              chatId={chatId}
+              message={message}
+              isLoading={status === 'streaming' && messages.length - 1 === index}
+              vote={
+                votes
+                  ? votes.find((vote) => vote.messageId === message.id)
+                  : undefined
+              }
+              setMessages={setMessages}
+              regenerate={regenerate}
+              isReadonly={isReadonly}
+              requiresScrollPadding={
+                hasSentMessage && index === messages.length - 1
+              }
+            />
+          ))}
 
-      {status === 'submitted' &&
-        messages.length > 0 &&
-        messages[messages.length - 1].role === 'user' && <ThinkingMessage />}
+          {status === 'submitted' &&
+            messages.length > 0 &&
+            messages[messages.length - 1].role === 'user' && <ThinkingMessage />}
 
-      <motion.div
-        ref={messagesEndRef}
-        className="shrink-0 min-w-[24px] min-h-[24px]"
-        onViewportLeave={onViewportLeave}
-        onViewportEnter={onViewportEnter}
-      />
+          <motion.div
+            ref={messagesEndRef}
+            className="shrink-0 min-w-[24px] min-h-[24px]"
+            onViewportLeave={onViewportLeave}
+            onViewportEnter={onViewportEnter}
+          />
+        </ConversationContent>
+        <ConversationScrollButton />
+      </Conversation>
     </div>
   );
 }