show message create date (#1978)

Show message created_date in /messages and MessageTree component only. ![image](https://user-images.githubusercontent.com/33456881/222977517-a0faf3e1-4ce6-45bc-a8d3-3d045388210d.png) ![image](https://user-images.githubusercontent.com/33456881/222977531-bd4aef42-7628-4474-8c26-b3d9672ecbbd.png)
LAION-AI · Mar 6, 2023 · 8710011 · 8710011
1 parent e3f9bd0
commit 8710011
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 38 deletions.
diff --git a/website/src/components/Messages/MessageConversation.tsx b/website/src/components/Messages/MessageConversation.tsx
@@ -7,9 +7,15 @@ export interface MessageConversationProps {
   messages: Message[];
   enableLink?: boolean;
   highlightLastMessage?: boolean;
+  showCreatedDate?: boolean;
 }
 
-export function MessageConversation({ messages, enableLink, highlightLastMessage }: MessageConversationProps) {
+export function MessageConversation({
+  messages,
+  enableLink,
+  highlightLastMessage,
+  showCreatedDate,
+}: MessageConversationProps) {
   const { t } = useTranslation("message");
   return (
     <Stack spacing="4">
@@ -22,6 +28,7 @@ export function MessageConversation({ messages, enableLink, highlightLastMessage
             message={message}
             key={message.id + message.frontend_message_id}
             highlight={highlightLastMessage && idx === messages.length - 1}
+            showCreatedDate={showCreatedDate}
           />
         ))
       )}

diff --git a/website/src/components/Messages/MessageInlineEmojiRow.tsx b/website/src/components/Messages/MessageInlineEmojiRow.tsx
@@ -3,11 +3,7 @@ import { ReactNode } from "react";
 
 export const MessageInlineEmojiRow = ({ children }: { children: ReactNode }) => {
   return (
-    <HStack
-      justifyContent="end"
-      style={{ position: "relative", right: "-0.3em", bottom: "-0em", marginLeft: "1em" }}
-      onClick={(e) => e.stopPropagation()}
-    >
+    <HStack justifyContent="end" style={{ position: "relative" }} onClick={(e) => e.stopPropagation()}>
       {children}
     </HStack>
   );

diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx
@@ -9,6 +9,7 @@ import {
   MenuList,
   Portal,
   SimpleGrid,
+  Text,
   Tooltip,
   useColorModeValue,
   useDisclosure,
@@ -36,6 +37,7 @@ import { LabelMessagePopup } from "src/components/Messages/LabelPopup";
 import { MessageEmojiButton } from "src/components/Messages/MessageEmojiButton";
 import { ReportPopup } from "src/components/Messages/ReportPopup";
 import { useHasAnyRole } from "src/hooks/auth/useHasAnyRole";
+import { useCurrentLocale } from "src/hooks/locale/useCurrentLocale";
 import { useDeleteMessage } from "src/hooks/message/useDeleteMessage";
 import { post, put } from "src/lib/api";
 import { ROUTES } from "src/lib/routes";
@@ -52,11 +54,12 @@ interface MessageTableEntryProps {
   enabled?: boolean;
   highlight?: boolean;
   showAuthorBadge?: boolean;
+  showCreatedDate?: boolean;
 }
 
 // eslint-disable-next-line react/display-name
 export const MessageTableEntry = forwardRef<HTMLDivElement, MessageTableEntryProps>(
-  ({ message, enabled, highlight, showAuthorBadge }, ref) => {
+  ({ message, enabled, highlight, showAuthorBadge, showCreatedDate }, ref) => {
     const [emojiState, setEmojis] = useState<MessageEmojis>({ emojis: {}, user_emojis: [] });
     useEffect(() => {
       const emojis = { ...message.emojis };
@@ -107,35 +110,43 @@ export const MessageTableEntry = forwardRef<HTMLDivElement, MessageTableEntryPro
         overflowX="auto"
         onClick={handleOnClick}
       >
-        <MessageInlineEmojiRow>
-          <Badge variant="subtle" colorScheme="gray" fontSize="xx-small">
-            {message.lang}
-          </Badge>
-          {Object.entries(emojiState.emojis)
-            .filter(([emoji]) => isKnownEmoji(emoji))
-            .sort(([emoji]) => -emoji)
-            .map(([emoji, count]) => {
-              return (
-                <MessageEmojiButton
-                  key={emoji}
-                  emoji={{ name: emoji, count }}
-                  checked={emojiState.user_emojis.includes(emoji)}
-                  userReacted={emojiState.user_emojis.length > 0}
-                  userIsAuthor={!!message.user_is_author}
-                  onClick={() => react(emoji, !emojiState.user_emojis.includes(emoji))}
-                />
-              );
-            })}
-          <MessageActions
-            react={react}
-            userEmoji={emojiState.user_emojis}
-            onLabel={showLabelPopup}
-            onReport={showReportPopup}
-            message={message}
-          />
-          <LabelMessagePopup message={message} show={labelPopupOpen} onClose={closeLabelPopup} />
-          <ReportPopup messageId={message.id} show={reportPopupOpen} onClose={closeReportPopup} />
-        </MessageInlineEmojiRow>
+        <Flex justifyContent="space-between" mt="2" alignItems="center">
+          {showCreatedDate ? (
+            <MessageCreateDate date={message.created_date}></MessageCreateDate>
+          ) : (
+            // empty span is required to make emoji displayed at the end of row
+            <span></span>
+          )}
+          <MessageInlineEmojiRow>
+            <Badge variant="subtle" colorScheme="gray" fontSize="xx-small">
+              {message.lang}
+            </Badge>
+            {Object.entries(emojiState.emojis)
+              .filter(([emoji]) => isKnownEmoji(emoji))
+              .sort(([emoji]) => -emoji)
+              .map(([emoji, count]) => {
+                return (
+                  <MessageEmojiButton
+                    key={emoji}
+                    emoji={{ name: emoji, count }}
+                    checked={emojiState.user_emojis.includes(emoji)}
+                    userReacted={emojiState.user_emojis.length > 0}
+                    userIsAuthor={!!message.user_is_author}
+                    onClick={() => react(emoji, !emojiState.user_emojis.includes(emoji))}
+                  />
+                );
+              })}
+            <MessageActions
+              react={react}
+              userEmoji={emojiState.user_emojis}
+              onLabel={showLabelPopup}
+              onReport={showReportPopup}
+              message={message}
+            />
+            <LabelMessagePopup message={message} show={labelPopupOpen} onClose={closeLabelPopup} />
+            <ReportPopup messageId={message.id} show={reportPopupOpen} onClose={closeReportPopup} />
+          </MessageInlineEmojiRow>
+        </Flex>
         <Flex
           position="absolute"
           gap="2"
@@ -167,6 +178,24 @@ export const MessageTableEntry = forwardRef<HTMLDivElement, MessageTableEntryPro
   }
 );
 
+const me = { base: 3, md: 6 };
+
+const MessageCreateDate = ({ date }: { date: string }) => {
+  const locale = useCurrentLocale();
+  const createdDateColor = useColorModeValue("blackAlpha.600", "gray.400");
+  return (
+    <Text as="span" fontSize="small" color={createdDateColor} fontWeight="medium" me={me}>
+      {new Intl.DateTimeFormat(locale, {
+        hour: "2-digit",
+        minute: "2-digit",
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+      }).format(new Date(date))}
+    </Text>
+  );
+};
+
 const EmojiMenuItem = ({
   emoji,
   checked,

diff --git a/website/src/components/Messages/MessageTree.tsx b/website/src/components/Messages/MessageTree.tsx
@@ -41,6 +41,7 @@ export const MessageTree = memo(({ tree, messageId, scrollToHighlighted }: Messa
                   showAuthorBadge
                   highlight={child.id === messageId}
                   message={child}
+                  showCreatedDate
                 ></MessageTableEntry>
               </Box>
               {depth < maxDepth && renderChildren(child.children, depth + 1)}
@@ -86,6 +87,7 @@ export const MessageTree = memo(({ tree, messageId, scrollToHighlighted }: Messa
           showAuthorBadge
           message={tree}
           highlight={tree.id === messageId}
+          showCreatedDate
         />
       </Box>
       {renderChildren(tree.children)}

diff --git a/website/src/components/UserMessageConversation.tsx b/website/src/components/UserMessageConversation.tsx
@@ -40,7 +40,7 @@ const UserMessageConversation = () => {
           {t("next")}
         </Button>
       </Flex>
-      <MessageConversation enableLink messages={userMessages} />
+      <MessageConversation enableLink messages={userMessages} showCreatedDate />
     </div>
   );
 };

diff --git a/website/src/pages/messages/index.tsx b/website/src/pages/messages/index.tsx
@@ -41,7 +41,11 @@ const MessagesDashboard = () => {
             borderRadius="xl"
             className="p-6 shadow-sm"
           >
-            {messages ? <MessageConversation enableLink messages={messages} /> : <CircularProgress isIndeterminate />}
+            {messages ? (
+              <MessageConversation enableLink messages={messages} showCreatedDate />
+            ) : (
+              <CircularProgress isIndeterminate />
+            )}
           </Box>
         </Box>
         <Box>