Skip to content

feat: Add file size in attached docs and Tooltips for downloads/collapse/title options. #829

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

Merged
Spiral-Memory merged 11 commits into from
Feb 9, 2025
Merged

feat: Add file size in attached docs and Tooltips for downloads/collapse/title options. #829

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
badf7d6
add Tooltips and size
thepiyush-303 Jan 7, 2025
14f7c9e
fix css
thepiyush-303 Jan 7, 2025
b6bfbc3
fix-tooltip
thepiyush-303 Jan 17, 2025
890a366
Merge branch 'develop' into feat/addFileSize
thepiyush-303 Feb 3, 2025
d5a0207
responsive
thepiyush-303 Feb 3, 2025
2bb8928
conflicts
thepiyush-303 Feb 3, 2025
806fc46
fix videoAttachment
thepiyush-303 Feb 3, 2025
f70ad2b
css
thepiyush-303 Feb 3, 2025
af805c9
also fix imageAttachment
thepiyush-303 Feb 3, 2025
5be3bc2
audioAttachment
thepiyush-303 Feb 3, 2025
ad98e19
fix
thepiyush-303 Feb 7, 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
173 changes: 136 additions & 37 deletions packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { css } from '@emotion/react';
import { ActionButton, Box } from '@embeddedchat/ui-elements';
import { ActionButton, Box, Tooltip } from '@embeddedchat/ui-elements';
import { Markdown } from '../Markdown';

const AttachmentMetadata = ({
Expand All @@ -16,7 +16,6 @@ const AttachmentMetadata = ({
const response = await fetch(url);
const data = await response.blob();
const downloadUrl = URL.createObjectURL(data);

const anchor = document.createElement('a');
anchor.href = downloadUrl;
anchor.download = attachment.title || 'download';
Expand All @@ -36,6 +35,10 @@ const AttachmentMetadata = ({
css`
display: flex;
flex-direction: column;
@media (max-width: 420px) {
flex-direction: column;
align-items: flex-start;
}
`,
variantStyles.attachmentMetaContainer,
]}
Expand All @@ -46,10 +49,16 @@ const AttachmentMetadata = ({
? [
css`
margin: 10px 0px;
@media (max-width: 420px) {
margin: 5px 0px;
}
`,
]
: css`
margin: -7px 0px;
@media (max-width: 420px) {
margin: -5px 0px;
}
`
}
>
Expand All @@ -64,47 +73,137 @@ const AttachmentMetadata = ({
display: flex;
flex-direction: row;
align-items: center;
@media (max-width: 420px) {
flex-direction: column;
align-items: flex-start;
}
`}
>
<p
css={
attachment.description
? [
css`
margin: 0px;
font-size: 14px;
opacity: 0.7;
`,
]
: css`
margin: 22px 0 15px 0;
font-size: 14px;
opacity: 0.7;
`
}
>
{attachment.title}
</p>
<ActionButton
ghost
icon={isExpanded ? 'chevron-down' : 'chevron-left'}
size="small"
onClick={onExpandCollapseClick}
<Box
css={css`
margin-left: 10px;
margin-top: ${attachment.description ? '3px' : '13px'};
display: flex;
flex-direction: row;
align-items: center;
@media (max-width: 420px) {
flex-direction: column;
align-items: flex-start;
}
`}
/>
<ActionButton
ghost
icon="download"
size="small"
onClick={handleDownload}
>
<Tooltip text={attachment.title} position="down">
<p
css={
attachment.description
? [
css`
margin: 3px 0 0 0;
font-size: 12px;
opacity: 0.7;
@media (max-width: 420px) {
margin: 8px 0 0 0;
}
`,
]
: css`
margin: 22px 0 15px 0;
font-size: 12px;
opacity: 0.7;
@media (max-width: 420px) {
margin: 10px 0 10px 0;
}
`
}
>
{attachment.title.length > 22
? `${attachment.title.substring(0, 22)}...`
: attachment.title}
</p>
</Tooltip>
<Box
css={
attachment.description
? [
css`
font-size: 12px;
opacity: 0.7;
margin-left: 3px;
margin-top: 2px;
@media (max-width: 420px) {
display: none;
}
`,
]
: css`
font-size: 12px;
opacity: 0.7;
margin-left: 3px;
margin-top: 7px;
@media (max-width: 420px) {
margin-left: 0;
margin-top: 5px;
}
`
}
>
(
{attachment.image_size
? (attachment.image_size / 1024).toFixed(2)
: 0}{' '}
kB)
</Box>
</Box>
<Box
css={css`
margin-left: 10px;
margin-top: 5px;
display: flex;
flex-direction: row;
align-items: center;
@media (max-width: 420px) {
flex-direction: row;
align-items: flex-start;
}
`}
/>
>
<Box
css={css`
margin-left: 10px;
margin-top: ${attachment.description ? '3px' : '10px'};
@media (max-width: 420px) {
margin-left: 0;
margin-top: 5px;
}
`}
>
<Tooltip text={isExpanded ? 'Collapse' : 'Expand'} position="top">
<ActionButton
ghost
icon={isExpanded ? 'chevron-down' : 'chevron-left'}
size="small"
onClick={() => {
onExpandCollapseClick();
}}
/>
</Tooltip>
</Box>
<Box
css={css`
margin-left: 10px;
margin-top: 5px;
@media (max-width: 420px) {
margin-left: 0;
margin-top: 5px;
}
`}
>
<Tooltip text="Download" position="top">
<ActionButton
ghost
icon="download"
size="small"
onClick={handleDownload}
/>
</Tooltip>
</Box>
</Box>
</Box>
</Box>
);
Expand Down
24 changes: 16 additions & 8 deletions packages/react/src/views/AttachmentHandler/AudioAttachment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,14 +67,22 @@ const AudioAttachment = ({
) : (
''
)}
<AttachmentMetadata
attachment={attachment}
url={host + (attachment.title_url || attachment.audio_url)}
variantStyles={variantStyles}
msg={msg}
onExpandCollapseClick={toggleExpanded}
isExpanded={isExpanded}
/>
<Box
css={css`
@media (max-width: 450px) {
margin-top: 0.4rem;
}
`}
>
<AttachmentMetadata
attachment={attachment}
url={host + (attachment.title_url || attachment.audio_url)}
variantStyles={variantStyles}
msg={msg}
onExpandCollapseClick={toggleExpanded}
isExpanded={isExpanded}
/>
</Box>
{isExpanded && (
<audio
src={host + attachment.audio_url}
Expand Down
25 changes: 17 additions & 8 deletions packages/react/src/views/AttachmentHandler/ImageAttachment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,14 +76,23 @@ const ImageAttachment = ({
) : (
''
)}
<AttachmentMetadata
attachment={attachment}
url={host + (attachment.title_link || attachment.image_url)}
variantStyles={variantStyles}
msg={msg}
onExpandCollapseClick={toggleExpanded}
isExpanded={isExpanded}
/>
<Box
css={css`
align-items: center;
@media (max-width: 450px) {
margin-top: 0.4rem;
}
`}
>
<AttachmentMetadata
attachment={attachment}
url={host + (attachment.title_link || attachment.image_url)}
variantStyles={variantStyles}
msg={msg}
onExpandCollapseClick={toggleExpanded}
isExpanded={isExpanded}
/>
</Box>
{isExpanded && (
<Box onClick={() => setShowGallery(true)}>
<img
Expand Down
50 changes: 40 additions & 10 deletions packages/react/src/views/AttachmentHandler/VideoAttachment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@ const VideoAttachment = ({
line-height: 0;
border-radius: inherit;
padding: 0.5rem;
@media (max-width: 450px) {
padding: 0.3rem;
}
`,
(type ? variantStyles.pinnedContainer : '') ||
css`
Expand All @@ -62,6 +65,9 @@ const VideoAttachment = ({
display: flex;
gap: 0.3rem;
align-items: center;
@media (max-width: 450px) {
align-items: flex-start;
}
`,
variantStyles.textUserInfo,
]}
Expand All @@ -71,20 +77,36 @@ const VideoAttachment = ({
alt="avatar"
size="1.2em"
/>
<Box>@{authorName}</Box>
<Box
css={css`
@media (max-width: 450px) {
margin-top: 0.5rem;
}
`}
>
@{authorName}
</Box>
</Box>
</>
) : (
''
)}
<AttachmentMetadata
attachment={attachment}
url={host + (attachment.title_url || attachment.video_url)}
variantStyles={variantStyles}
msg={msg}
onExpandCollapseClick={toggleExpanded}
isExpanded={isExpanded}
/>
<Box
css={css`
@media (max-width: 450px) {
margin-top: 0.4rem;
}
`}
>
<AttachmentMetadata
attachment={attachment}
url={host + (attachment.title_url || attachment.video_url)}
variantStyles={variantStyles}
msg={msg}
onExpandCollapseClick={toggleExpanded}
isExpanded={isExpanded}
/>
</Box>
{isExpanded && (
<video
controls
Expand All @@ -110,6 +132,9 @@ const VideoAttachment = ({
line-height: 0;
border-radius: inherit;
padding: 0.5rem;
@media (max-width: 450px) {
padding: 0.3rem;
}
`,
(nestedAttachment.type
? variantStyles.pinnedContainer
Expand All @@ -129,6 +154,10 @@ const VideoAttachment = ({
display: flex;
gap: 0.3rem;
align-items: center;
@media (max-width: 450px) {
flex-direction: column;
align-items: flex-start;
}
`,
variantStyles.textUserInfo,
]}
Expand All @@ -153,11 +182,12 @@ const VideoAttachment = ({
variantStyles={variantStyles}
/>
<video
width={300}
width="100%"
controls
style={{
borderBottomLeftRadius: 'inherit',
borderBottomRightRadius: 'inherit',
maxWidth: '300px',
}}
>
<source
Expand Down
Loading