Quotes + Reply to message update #2757

yougotwill · 2023-05-16T03:35:08Z

This PR updates both the logic and UI for replying to messages and rendering quotes in a conversation.

This PR replaces #2399

Closes #2343

Fixes: #2625

If the original message cannot be found then the quoted author's name along with the text "Original message not found" is shown in all cases including if there was previously an attachment.
For replying to messages and for quotes the quoted author should be on the first line, followed by a single line of quoted content (truncated with an ellipsis).
Updated linkify-it dependency to 4.0.1
Removed duplicate getMessageBySenderAndTimestamp() and replaced any calls with getMessageBySenderAndSentAt()
For backwards compatibility purposes between platforms we now send the full text body of a message as part of the quote object when sending a quote and not a limited version of it. This means we removed QUOTED_TEXT_MAX_LENGTH and sliceQuoteText().
When we load messages in the UI we now check for any quotes and do a separate database lookup for these quoted messages in bulk. These are then stored in a separate lookup map in redux. This creates a notable performance improvement for loading quotes since we are not loading quotes via individual database calls.
Extracted individual <Quote /> elements into separate components.
Converted message quote styles to Styled Components and removed sass stylesheet.
Removed reference warning component since it is no longer used
Improved labeling of an attachment's MIME type for both replying to a message and rendering a quote
Consolidated quote message and reply to message design to match mobile platforms.
Fixed rendering of of text that has been emojified
When clicking on a quote a highlight animation is shown on the original / quoted message. Originally this only worked for text based quotes. This now supports all message types.
Quoted image attachments now load correctly on first render.
Added .vscode to eslint and prettier ignore files.
Replaced hard-coded "Unknown" ui strings with window.i18n('unknown').

ts/hooks/useParamSelector.ts

ts/components/conversation/message/message-content/quote/QuoteText.tsx

ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx

ts/node/sql.ts

ts/state/selectors/conversations.ts

ts/state/ducks/conversations.ts

ts/components/conversation/message/message-content/MessageQuote.tsx

ts/components/conversation/message/message-content/quote/Quote.tsx

Bilb

lgtm

finished text reply

added localisation for attachment description

updated StyledStagedPlaceholderAttachment to be a styled functional component

…imestamp which does the same thing but is more verbose

resolved regression with quote author name

… object this should help performance when loading quotes in the UI since individual db lookups will no longer be required

forEach and async still don't play nice so used a regular for loop, added QuoteLookupType

…ate and loads correctly into the Quote

removed reference warning component since it is no longer needed

show message not found in correct context

remove border on quote if there is an attachment

converted quote primary text to styled components

added support for generic file icon with consistent design. Still need to support know file types and metdata from the generic file component

make sure to load message text is it exists for all quotes

… attachments and no text

…useQuoteAuthorName this gives proper blinded key support

…essageQuoteProps this is more performance and relies on the latest redux state

…ps selector

… map this consolidates the key lookup logic to one place for future proofing

…e it is the most likely to happen

…to be more explicit

…screens

…eectly we now look up the existing messages in memory if not found in the quote lookup map, we also allow jumping to messages quoted but not yet stored in memory

ts/components/conversation/message/message-content/MessageQuote.tsx

ts/state/ducks/conversations.ts

fixed edge case of local db search for quotes lookup

there is never an avatar so we should never render it

…es in a 1o1

yougotwill changed the title ~~WIP: Quotes update~~ Quotes + Reply to message update May 16, 2023

Bilb reviewed May 17, 2023

View reviewed changes

Bilb approved these changes May 19, 2023

View reviewed changes

yougotwill added the Ready for QA label May 19, 2023

burtonemily self-assigned this May 19, 2023

yougotwill added 25 commits June 1, 2023 14:16

chore: updated linkify-it dependency

c6976a6

feat: started updating reply to ui

0d5c725

finished text reply

feat: image reply done

a07933a

added localisation for attachment description

feat: voice message reply done

80689bb

feat: link message reply done

d7200ab

feat: staged attachments rail stying updated

ad38b15

updated StyledStagedPlaceholderAttachment to be a styled functional component

fix: replaced getMessageBySenderAndSentAt with getMessageBySenderAndT…

bd8ce82

…imestamp which does the same thing but is more verbose

fix: send full text body for quote

e78d1df

resolved regression with quote author name

feat: added quote source data to the conversation state as a separate…

a83bc64

… object this should help performance when loading quotes in the UI since individual db lookups will no longer be required

fix: resolved object is not extensible bug

331a4e1

forEach and async still don't play nice so used a regular for loop, added QuoteLookupType

feat: added propsForQuote to message model props

ab1cf7a

feat: getMessageQuoteProps now loads data from conversation.quotes st…

a962ef2

…ate and loads correctly into the Quote

feat: separated quote components

1609ebf

removed reference warning component since it is no longer needed

fix: moved QuoteIcon component into QuoteIconContainer

1d413a2

fix: community quotes now dont break the app

d7bc821

feat: converted quote author and text to styled components

3249d2f

feat: converted quote to styled components

23b6c9d

fix: fixed QuoteText type labels

bf170e6

show message not found in correct context

feat: converted quote image to styled components

f0aeb59

remove border on quote if there is an attachment

feat: pass in all props to quote component

bdbdb47

converted quote primary text to styled components

feat: converted quoteiconcontainer and to styled components

ff43660

added support for generic file icon with consistent design. Still need to support know file types and metdata from the generic file component

fix: fix rendering of of text that has been emojified

b1cc6ad

feat: use quoteicon component in quoteimage

98e4474

make sure to load message text is it exists for all quotes

feat: removed unneeded quote stylesheet and QuoteGenericFile

761a536

fix: Show correct attachment type in reply ui

6b2047b

yougotwill added 13 commits June 1, 2023 14:16

feat: remove QUOTED_TEXT_MAX_LENGTH and sliceQuoteText

5111a14

fix: make sure to show the quoted message above quotes that only have…

ca6463d

… attachments and no text

fix: use isUsAnySogsFromCache instead of getOurPubKeyStrFromCache in …

5b503d3

…useQuoteAuthorName this gives proper blinded key support

fix: removed redundant document check from getTypeLabel

feb8f46

fix: use --font-size-md for quote author size

4d874d2

fix: removed redundant empty string check on quote author

9b1be60

fix: made sure items in getMessagesBySenderAndSentAt are unique

e8b5f39

fix: replace controller lookup with redux conversation lookup in getM…

391db55

…essageQuoteProps this is more performance and relies on the latest redux state

fix: simplify checking isFromMe for communities in getMessageQuotePro…

70156c3

…ps selector

feat: created util funciton lookupQuote to read from the quote lookup…

db5f2d8

… map this consolidates the key lookup logic to one place for future proofing

fix: remove unnecessary else in onQuoteClick

3fce414

fix: moved referencedMessageNotFound to first in quoteNotFound becaus…

025b844

…e it is the most likely to happen

rename Attachment type in Quote.tsx to QuotedAttachmentThumbnailType …

bc55a2d

…to be more explicit

yougotwill force-pushed the quote_ui_update branch from cfa82cb to bc55a2d Compare June 1, 2023 04:16

yougotwill added 4 commits June 1, 2023 16:37

fix: resolves SES-583 left alignment of outgoing messages on smaller …

279642d

…screens

feat: added quotesProps to fetchmessage results types

3dc8097

fix: SES-597 quoting your own message now works correctly in communities

16b394d

fix: SES-585 when the app is not focused message quotes now load corr…

b91388a

…eectly we now look up the existing messages in memory if not found in the quote lookup map, we also allow jumping to messages quoted but not yet stored in memory

Bilb reviewed Jun 7, 2023

View reviewed changes

ts/components/conversation/message/message-content/MessageQuote.tsx Outdated Show resolved Hide resolved

ts/state/ducks/conversations.ts Outdated Show resolved Hide resolved

yougotwill added 2 commits June 7, 2023 16:34

fix: updated quotes lookup explanation comment

321ce00

fix: replaced Number() casting to toNumber

f87995a

fixed edge case of local db search for quotes lookup

Bilb approved these changes Jun 7, 2023

View reviewed changes

yougotwill added 2 commits June 9, 2023 13:54

fix: resolved incoming message alignemnt in 1o1 conversations

712259d

there is never an avatar so we should never render it

fix: account for misalignment of messages that are not last in a seri…

f5d0530

…es in a 1o1

burtonemily added qa-tested and removed Ready for QA labels Jun 14, 2023

Bilb merged commit 5369131 into oxen-io:clearnet Jun 23, 2023
6 checks passed

chenjia404 mentioned this pull request Jun 24, 2023

Quotes + Reply to message update chenjia404/session-desktop#1

Merged

yougotwill mentioned this pull request Jun 26, 2023

Message with quote is mis-rendered as plaint text message without quote body on Desktop if the expected quote body was sent from a linked iOS client of the same account and the replier is using Session mobile client #2655

Closed

yougotwill deleted the quote_ui_update branch February 27, 2024 00:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Quotes + Reply to message update #2757

Quotes + Reply to message update #2757

yougotwill commented May 16, 2023 •

edited

Loading

Bilb left a comment

Quotes + Reply to message update #2757

Quotes + Reply to message update #2757

Conversation

yougotwill commented May 16, 2023 • edited Loading

Bilb left a comment

Choose a reason for hiding this comment

yougotwill commented May 16, 2023 •

edited

Loading