diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx index 6d9572763..6cf5b8378 100644 --- a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx +++ b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx @@ -1,5 +1,5 @@ /* eslint-disable react/no-danger */ -import { FC, useEffect, useState } from 'react'; +import { FC, ReactNode, useEffect, useState } from 'react'; import he from 'he'; import cn from 'classnames'; import { Tooltip } from 'antd'; @@ -11,6 +11,7 @@ import { formatTimestamp } from './messageFmt'; import { ChatMessage } from '../../../interfaces/chat-message.model'; import { ChatUserBadge } from '../ChatUserBadge/ChatUserBadge'; import { accessTokenAtom } from '../../stores/ClientConfigStore'; +import { User } from '../../../interfaces/user.model'; // Lazy loaded components @@ -32,6 +33,22 @@ export type ChatUserMessageProps = { isAuthorAuthenticated: boolean; }; +export type UserTooltipProps = { + user: User; + children: ReactNode; +}; + +const UserTooltip: FC = ({ children, user }) => { + const { displayName, createdAt } = user; + const content = `${displayName} first joined ${formatTimestamp(createdAt)}`; + + return ( + + {children} + + ); +}; + export const ChatUserMessage: FC = ({ message, highlightString, @@ -78,12 +95,12 @@ export const ChatUserMessage: FC = ({ style={{ borderColor: color }} > {!sameUserAsLast && ( - +
{displayName} {badgeNodes}
-
+ )} diff --git a/web/components/chat/ChatUserMessage/messageFmt.ts b/web/components/chat/ChatUserMessage/messageFmt.ts index 13e2b445c..81fb53184 100644 --- a/web/components/chat/ChatUserMessage/messageFmt.ts +++ b/web/components/chat/ChatUserMessage/messageFmt.ts @@ -43,7 +43,7 @@ export function formatTimestamp(sentAt: Date) { const localeDate = now.toLocaleDateString('en-US', { dateStyle: 'medium', }); - return `at ${localeDate} at ${now.toLocaleTimeString()}`; + return `${localeDate} at ${now.toLocaleTimeString()}`; } return `${now.toLocaleTimeString()}`;