Push route state on generation finish (#492)

components/custom/chat.tsx

@@ -3,6 +3,7 @@
 import { Attachment, Message } from 'ai';
 import { useChat } from 'ai/react';
 import { AnimatePresence } from 'framer-motion';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import useSWR, { useSWRConfig } from 'swr';
 import { useWindowSize } from 'usehooks-ts';
@@ -27,6 +28,7 @@ export function Chat({
   initialMessages: Array<Message>;
   selectedModelId: string;
 }) {
+  const router = useRouter();
   const { mutate } = useSWRConfig();
 
   const {
@@ -44,6 +46,7 @@ export function Chat({
     initialMessages,
     onFinish: () => {
       mutate('/api/history');
+      router.push(`/chat/${id}`);
     },
   });
 

components/custom/message.tsx

@@ -2,7 +2,6 @@
 
 import { Message } from 'ai';
 import cx from 'classnames';
-import { motion } from 'framer-motion';
 import { Sparkles } from 'lucide-react';
 import { Dispatch, SetStateAction } from 'react';
 
@@ -31,10 +30,8 @@ export const PreviewMessage = ({
   isLoading: boolean;
 }) => {
   return (
-    <motion.div
+    <div
       className="w-full mx-auto max-w-3xl px-4 group/message "
-      initial={{ y: 5, opacity: 0 }}
-      animate={{ y: 0, opacity: 1 }}
       data-role={message.role}
     >
       <div
@@ -145,6 +142,6 @@ export const PreviewMessage = ({
           />
         </div>
       </div>
-    </motion.div>
+    </div>
   );
 };