Skip to content

feat: Add timeStamps in attached text #875

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
thepiyush-303 wants to merge 14 commits into from
Closed

feat: Add timeStamps in attached text #875

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
8742f99
addTime
thepiyush-303 Jan 12, 2025
cfad77b
add_css
thepiyush-303 Jan 12, 2025
54ffc08
fix
thepiyush-303 Jan 12, 2025
987a6ea
also fix for nestedAttachment
thepiyush-303 Jan 18, 2025
5117cfe
format
thepiyush-303 Jan 18, 2025
3171821
add @ back before authorName
thepiyush-303 Jan 27, 2025
8886c78
Merge branch 'develop' into feat/addTimeStamp
thepiyush-303 Feb 5, 2025
3662f9e
add weeks
thepiyush-303 Feb 6, 2025
79c39fa
fix
thepiyush-303 Feb 6, 2025
9e31f22
use switch-case
thepiyush-303 Feb 6, 2025
79539bb
responsive
thepiyush-303 Feb 6, 2025
ab82144
responsive
thepiyush-303 Feb 6, 2025
b9f5f75
responsive
thepiyush-303 Feb 6, 2025
885ed2d
Merge branch 'develop' into feat/addTimeStamp
thepiyush-303 Mar 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 128 additions & 17 deletions packages/react/src/views/AttachmentHandler/TextAttachment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React, { useContext } from 'react';
import React, { useContext, useMemo } from 'react';
import { css } from '@emotion/react';
import PropTypes from 'prop-types';
import { Box, Avatar, useTheme } from '@embeddedchat/ui-elements';
import { format } from 'date-fns';
import RCContext from '../../context/RCInstance';
import { Markdown } from '../Markdown';

Expand All @@ -15,6 +16,48 @@ const TextAttachment = ({ attachment, type, variantStyles = {} }) => {

const { theme } = useTheme();

const formattedTimestamp = useMemo(() => {
let timestamp;
let date;

if (typeof attachment.ts === 'object') {
timestamp = attachment.ts.$date;
return format(new Date(timestamp), 'h:mm a');
}
if (typeof attachment.ts === 'string') {
date = new Date(attachment.ts);
const now = new Date();

const isSameDay =
date.getDate() === now.getDate() &&
date.getMonth() === now.getMonth() &&
date.getFullYear() === now.getFullYear();

const startOfWeek = new Date(now);
startOfWeek.setDate(now.getDate() - now.getDay());
const isSameWeek = date >= startOfWeek;

const isSameMonth =
date.getMonth() === now.getMonth() &&
date.getFullYear() === now.getFullYear();

const isSameYear = date.getFullYear() === now.getFullYear();

switch (true) {
case isSameDay:
return format(date, 'h:mm a');
case isSameWeek:
return format(date, 'EEEE, h:mm a');
case isSameMonth:
return format(date, 'dd/MM/yyyy');
case isSameYear:
return format(date, 'MMMM d, yyyy');
default:
return format(date, 'MMMM d, yyyy');
}
}
}, [attachment.ts]);

return (
<Box
css={[
Expand Down Expand Up @@ -53,7 +96,41 @@ const TextAttachment = ({ attachment, type, variantStyles = {} }) => {
alt="avatar"
size="1.2em"
/>
<Box>@{attachment?.author_name}</Box>
<Box
css={css`
color: ${theme.colors.accentForeground};
font-weight: 300;
letter-spacing: 0rem;
line-height: 1.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 1;
`}
>
@{attachment?.author_name}
</Box>
<Box
is="span"
css={css`
color: ${theme.colors.accentForeground};
letter-spacing: 0rem;
font-size: 0.7rem;
font-weight: 400;
line-height: 1rem;
margin-left: 0.25rem;
text-decoration: underline;

@media (max-width: 380px) {
font-size: 0.6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: wrap;
}
`}
>
{formattedTimestamp}
</Box>
</>
)}
</Box>
Expand All @@ -63,19 +140,6 @@ const TextAttachment = ({ attachment, type, variantStyles = {} }) => {
white-space: pre-line;
`}
>
{attachment?.text ? (
attachment.text[0] === '[' ? (
attachment.text.match(/\n(.*)/)?.[1] || ''
) : (
<Markdown
body={attachment.text}
md={attachment.md}
isReaction={false}
/>
)
) : (
''
)}
{attachment?.attachments &&
attachment.attachments.map((nestedAttachment, index) => (
<Box
Expand All @@ -88,7 +152,7 @@ const TextAttachment = ({ attachment, type, variantStyles = {} }) => {
font-weight: 400;
word-break: break-word;
border-inline-start: 3px solid ${theme.colors.border};
margin-top: 0.75rem;
margin-top: 0rem;
padding: 0.5rem;
`,
(nestedAttachment?.type ? variantStyles.pinnedContainer : '') ||
Expand Down Expand Up @@ -124,7 +188,41 @@ const TextAttachment = ({ attachment, type, variantStyles = {} }) => {
alt="avatar"
size="1.2em"
/>
<Box>@{nestedAttachment?.author_name}</Box>
<Box
css={css`
color: ${theme.colors.accentForeground};
font-weight: 300;
letter-spacing: 0rem;
line-height: 1.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 1;
`}
>
@{nestedAttachment?.author_name}
</Box>
<Box
is="span"
css={css`
color: ${theme.colors.accentForeground};
letter-spacing: 0rem;
font-size: 0.7rem;
font-weight: 400;
line-height: 1rem;
margin-left: 0.25rem;
text-decoration: underline;

@media (max-width: 380px) {
font-size: 0.6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: wrap;
}
`}
>
{formattedTimestamp}
</Box>
</>
)}
</Box>
Expand All @@ -150,6 +248,19 @@ const TextAttachment = ({ attachment, type, variantStyles = {} }) => {
</Box>
</Box>
))}
{attachment?.text ? (
attachment.text[0] === '[' ? (
attachment.text.match(/\n(.*)/)?.[1] || ''
) : (
<Markdown
body={attachment.text}
md={attachment.md}
isReaction={false}
/>
)
) : (
''
)}
</Box>
</Box>
);
Expand Down
17 changes: 12 additions & 5 deletions packages/react/src/views/Message/Message.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
lighten,
darken,
} from '@embeddedchat/ui-elements';
import { css } from '@emotion/react';
import { Attachments } from '../AttachmentHandler';
import { Markdown } from '../Markdown';
import MessageHeader from './MessageHeader';
Expand Down Expand Up @@ -261,16 +262,22 @@ const Message = ({
>
{message.attachments && message.attachments.length > 0 ? (
<>
<Markdown
body={message}
md={message.md}
isReaction={false}
/>
<Attachments
attachments={message.attachments}
variantStyles={variantStyles}
msg={message}
/>
<div
css={css`
margin-top: 0.3rem;
`}
>
<Markdown
body={message}
md={message.md}
isReaction={false}
/>
</div>
</>
) : (
<Markdown body={message} md={message.md} isReaction={false} />
Expand Down
33 changes: 31 additions & 2 deletions packages/react/src/views/QuoteMessage/QuoteMessage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
useComponentOverrides,
useTheme,
} from '@embeddedchat/ui-elements';
import { css } from '@emotion/react';
import RCContext from '../../context/RCInstance';
import { useMessageStore } from '../../store';
import getQuoteMessageStyles from './QuoteMessage.styles';
Expand Down Expand Up @@ -50,8 +51,36 @@ const QuoteMessage = ({ className = '', style = {}, message }) => {
alt="avatar"
size="1.5em"
/>
<Box>{message?.u.username}</Box>
<Box>{format(new Date(message.ts), 'h:mm a')}</Box>
<Box
css={css`
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0;
`}
>
{message?.u.username}
</Box>
<Box
is="span"
css={css`
color: ${theme.colors.accentForeground};
letter-spacing: 0rem;
font-size: 0.7rem;
font-weight: 400;
line-height: 1rem;
margin-left: 0.25rem;
text-decoration: underline;

@media (max-width: 380px) {
font-size: 0.6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: wrap;
}
`}
>
{format(new Date(message.ts), 'h:mm a')}
</Box>
</Box>
<Box css={styles.message}>
{message.file ? (
Expand Down
Loading