Spectrum: Improvements to replied messages

[brianlovin]

This is a followup to #2924

• [x] When replying to long messages, we should truncate the reply in the chat input preview and in the reply bubble itself.
• [ ] Clicking on a reply should scroll the chat to that particular message. If the original message has not been loaded due to pagination, we should handle paginating until the original message loads

• [x] When pressing the "Reply" button, the quoted message should only be shown in the chat input in the selected thread, not everywhere else too
  

• [ ] Bonus: If a user highlights text of a bubble then clicks reply, it should only reply to that selected text

[dev-drprasad]

@mxstbr @brianlovin i would like to take bonus feature if it is not done yet

[brianlovin]

That'd be awesome @dev-drprasad :D

[dev-drprasad]

@brianlovin what is meaning of bubble ?

[brianlovin]

We call the individual chat messages "bubbles" :)

[dev-drprasad]

@brianlovin do we need any backend support for bonus feature or just frontend work ??

[brianlovin]

It will require backend work - I haven't thought too much about how this should work, but in theory if you're highlighting a snippet of a message we need to know what the snippet is; our current system only stores a parentId which fetches the entire parent message.

So I think we'd also need to store the snippet, and make sure we don't render it if the parent message was deleted.

[dev-drprasad]

@brianlovin looks like little bit more work. i guess i need some more to finish.

[dev-drprasad]

@brianlovin @mxstbr
what do think about design for quoting selected text ??
do we need to add one more action like quote selection in actions list beside bubble ??
or tooltip action like in image

[ryota-murakami]

like medium?😀

[brianlovin]

I think an ideal UX here could be the same as email clients: if there is highlighted text on the message when the quote reply button is clicked, it automatically uses the highlighted text as the snippet.

[dev-drprasad]

@brianlovin where is code resided to handle dispatched actions ? i mean making api calls
i worked with only saga before. so, i am little confused :(

[Jae84]

Work? Nah. ?

[brianlovin]

@dev-drprasad check src/actions for our action dispatchers, then we have src/reducers directory with the store reducers

[dev-drprasad]

window.getSelection() method will return selected text in complete document. so we cant blindly use window.getSelection() to get selected text because it can be anywhere in document

we can use window.getSelection().baseNode.parentNode.closest('div.message') to get message wrapper. but how can we decide this message wrapper related with reply action element ??

I am thinking of adding data-message-id attribute to message wrapper and use react refs to get message id. so that we can use it to check whether reply action is associated or not with message

@mxstbr @brianlovin what do you say ??

[brianlovin]

We knocked out the core experience here for replying to threads.