feat(navbar): Update title and time
This commit is contained in:
parent
8f3de05a38
commit
1c487d4224
|
@ -8,7 +8,7 @@ import EmptyChat from './EmptyChat';
|
||||||
|
|
||||||
export type Message = {
|
export type Message = {
|
||||||
id: string;
|
id: string;
|
||||||
createdAt?: Date;
|
createdAt: Date;
|
||||||
content: string;
|
content: string;
|
||||||
role: 'user' | 'assistant';
|
role: 'user' | 'assistant';
|
||||||
sources?: Document[];
|
sources?: Document[];
|
||||||
|
@ -65,6 +65,7 @@ const ChatWindow = () => {
|
||||||
content: message,
|
content: message,
|
||||||
id: Math.random().toString(36).substring(7),
|
id: Math.random().toString(36).substring(7),
|
||||||
role: 'user',
|
role: 'user',
|
||||||
|
createdAt: new Date(),
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
@ -81,6 +82,7 @@ const ChatWindow = () => {
|
||||||
id: data.messageId,
|
id: data.messageId,
|
||||||
role: 'assistant',
|
role: 'assistant',
|
||||||
sources: sources,
|
sources: sources,
|
||||||
|
createdAt: new Date(),
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
added = true;
|
added = true;
|
||||||
|
@ -97,6 +99,7 @@ const ChatWindow = () => {
|
||||||
id: data.messageId,
|
id: data.messageId,
|
||||||
role: 'assistant',
|
role: 'assistant',
|
||||||
sources: sources,
|
sources: sources,
|
||||||
|
createdAt: new Date(),
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
added = true;
|
added = true;
|
||||||
|
@ -151,7 +154,7 @@ const ChatWindow = () => {
|
||||||
<div>
|
<div>
|
||||||
{messages.length > 0 ? (
|
{messages.length > 0 ? (
|
||||||
<>
|
<>
|
||||||
<Navbar />
|
<Navbar messages={messages} />
|
||||||
<Chat
|
<Chat
|
||||||
loading={loading}
|
loading={loading}
|
||||||
messages={messages}
|
messages={messages}
|
||||||
|
|
|
@ -1,6 +1,42 @@
|
||||||
import { Clock, Edit, Share, Trash } from 'lucide-react';
|
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 (
|
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]">
|
<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
|
<Edit
|
||||||
|
@ -9,9 +45,9 @@ const Navbar = () => {
|
||||||
/>
|
/>
|
||||||
<div className="hidden lg:flex flex-row items-center space-x-2">
|
<div className="hidden lg:flex flex-row items-center space-x-2">
|
||||||
<Clock size={17} />
|
<Clock size={17} />
|
||||||
<p className="text-xs">15 minutes ago</p>
|
<p className="text-xs">{timeAgo} ago</p>
|
||||||
</div>
|
</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">
|
<div className="flex flex-row items-center space-x-4">
|
||||||
<Share
|
<Share
|
||||||
size={17}
|
size={17}
|
||||||
|
|
|
@ -2,3 +2,20 @@ import clsx, { ClassValue } from 'clsx';
|
||||||
import { twMerge } from 'tailwind-merge';
|
import { twMerge } from 'tailwind-merge';
|
||||||
|
|
||||||
export const cn = (...classes: ClassValue[]) => twMerge(clsx(...classes));
|
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' : ''}`;
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in New Issue