Skip to content
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

feat: Add timeStamps in attached text #875

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
+91 −21
Open

feat: Add timeStamps in attached text #875

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 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
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
76 changes: 61 additions & 15 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,17 @@ const TextAttachment = ({ attachment, type, variantStyles = {} }) => {

const { theme } = useTheme();

const formattedTimestamp = useMemo(() => {
let timestamp;
if (typeof attachment.ts === 'object') {
timestamp = attachment.ts.$date;
} else if (typeof attachment.ts === 'string') {
timestamp = new Date(attachment.ts).getTime();
}
const formattedTime = format(new Date(timestamp), 'h:mm a');
return formattedTime;
}, [attachment.ts]);

return (
<Box
css={[
Expand Down Expand Up @@ -54,6 +66,23 @@ const TextAttachment = ({ attachment, type, variantStyles = {} }) => {
size="1.2em"
/>
<Box>@{attachment?.author_name}</Box>
<Box
is="span"
css={css`
color: ${theme.colors.accentForeground};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: 0rem;
font-size: 0.7rem;
font-weight: 400;
line-height: 1rem;
flex-shrink: 0;
margin-left: 0.25rem;
`}
>
{formattedTimestamp}
</Box>
</>
)}
</Box>
Expand All @@ -63,19 +92,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 +104,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 @@ -125,6 +141,23 @@ const TextAttachment = ({ attachment, type, variantStyles = {} }) => {
size="1.2em"
/>
<Box>@{nestedAttachment?.author_name}</Box>
<Box
is="span"
css={css`
color: ${theme.colors.accentForeground};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: 0rem;
font-size: 0.7rem;
font-weight: 400;
line-height: 1rem;
flex-shrink: 0;
margin-left: 0.25rem;
`}
>
{formattedTimestamp}
</Box>
</>
)}
</Box>
Expand All @@ -150,6 +183,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 @@ -255,16 +256,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
19 changes: 18 additions & 1 deletion 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 @@ -51,7 +52,23 @@ const QuoteMessage = ({ className = '', style = {}, message }) => {
size="1.5em"
/>
<Box>{message?.u.username}</Box>
<Box>{format(new Date(message.ts), 'h:mm a')}</Box>
<Box
is="span"
css={css`
color: ${theme.colors.accentForeground};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: 0rem;
font-size: 0.7rem;
font-weight: 400;
line-height: 1rem;
flex-shrink: 0;
margin-left: 0.25rem;
`}
>
{format(new Date(message.ts), 'h:mm a')}
</Box>
</Box>
<Box css={styles.message}>
{message.file ? (
Expand Down
Loading