feat(navbar): Update title and time

ui/components/ChatWindow.tsx

@@ -8,7 +8,7 @@ import EmptyChat from './EmptyChat';
 
 export type Message = {
   id: string;
-  createdAt?: Date;
+  createdAt: Date;
   content: string;
   role: 'user' | 'assistant';
   sources?: Document[];
@@ -65,6 +65,7 @@ const ChatWindow = () => {
         content: message,
         id: Math.random().toString(36).substring(7),
         role: 'user',
+        createdAt: new Date(),
       },
     ]);
 
@@ -81,6 +82,7 @@ const ChatWindow = () => {
               id: data.messageId,
               role: 'assistant',
               sources: sources,
+              createdAt: new Date(),
             },
           ]);
           added = true;
@@ -97,6 +99,7 @@ const ChatWindow = () => {
               id: data.messageId,
               role: 'assistant',
               sources: sources,
+              createdAt: new Date(),
             },
           ]);
           added = true;
@@ -151,7 +154,7 @@ const ChatWindow = () => {
     <div>
       {messages.length > 0 ? (
         <>
-          <Navbar />
+          <Navbar messages={messages} />
           <Chat
             loading={loading}
             messages={messages}

ui/components/Navbar.tsx

@@ -1,6 +1,42 @@
 import { Clock, Edit, Share, Trash } from 'lucide-react';
+import { Message } from './ChatWindow';
+import { useEffect, useState } from 'react';
+import { formatTimeDifference } from '@/lib/utils';
+
+const Navbar = ({ messages }: { messages: Message[] }) => {
+  const [title, setTitle] = useState<string>('');
+  const [timeAgo, setTimeAgo] = useState<string>('');
+
+  useEffect(() => {
+    if (messages.length > 0) {
+      const newTitle =
+        messages[0].content.length > 20
+          ? `${messages[0].content.substring(0, 20)}...`
+          : messages[0].content;
+      setTitle(newTitle);
+      const newTimeAgo = formatTimeDifference(
+        new Date(),
+        messages[0].createdAt,
+      );
+      setTimeAgo(newTimeAgo);
+    }
+  }, [messages]);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (messages.length > 0) {
+        const newTimeAgo = formatTimeDifference(
+          new Date(),
+          messages[0].createdAt,
+        );
+        setTimeAgo(newTimeAgo);
+      }
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-const Navbar = () => {
   return (
     <div className="fixed z-40 top-0 left-0 right-0 px-4 lg:pl-32 lg:pr-4 lg:px-8 flex flex-row items-center justify-between w-full py-4 text-sm text-white/70 border-b bg-[#0A0A0A] border-[#1C1C1C]">
       <Edit
@@ -9,9 +45,9 @@ const Navbar = () => {
       />
       <div className="hidden lg:flex flex-row items-center space-x-2">
         <Clock size={17} />
-        <p className="text-xs">15 minutes ago</p>
+        <p className="text-xs">{timeAgo} ago</p>
       </div>
-      <p className="hidden lg:flex">Blog on AI</p>
+      <p className="hidden lg:flex">{title}</p>
       <div className="flex flex-row items-center space-x-4">
         <Share
           size={17}

ui/lib/utils.ts

@@ -2,3 +2,20 @@ import clsx, { ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export const cn = (...classes: ClassValue[]) => twMerge(clsx(...classes));
+
+export const formatTimeDifference = (date1: Date, date2: Date): string => {
+  const diffInSeconds = Math.floor(
+    Math.abs(date2.getTime() - date1.getTime()) / 1000,
+  );
+
+  if (diffInSeconds < 60)
+    return `${diffInSeconds} second${diffInSeconds !== 1 ? 's' : ''}`;
+  else if (diffInSeconds < 3600)
+    return `${Math.floor(diffInSeconds / 60)} minute${Math.floor(diffInSeconds / 60) !== 1 ? 's' : ''}`;
+  else if (diffInSeconds < 86400)
+    return `${Math.floor(diffInSeconds / 3600)} hour${Math.floor(diffInSeconds / 3600) !== 1 ? 's' : ''}`;
+  else if (diffInSeconds < 31536000)
+    return `${Math.floor(diffInSeconds / 86400)} day${Math.floor(diffInSeconds / 86400) !== 1 ? 's' : ''}`;
+  else
+    return `${Math.floor(diffInSeconds / 31536000)} year${Math.floor(diffInSeconds / 31536000) !== 1 ? 's' : ''}`;
+};