Adding Quote feature in EmbeddedChat

[KOMALDEWNANI]

As an EmbeddedChat developer

I need to:
Add a Quote Functionality
So That:
users would be able to easily reference and respond to specific messages by simply selecting the quote option and selecting the message they want to reference. This would make conversations more organized and efficient, as users would no longer need to manually copy and paste previous messages in order to reference them.
Acceptance Criteria

• Design the user interface for the quote feature, including how users will select messages to quote and how the quoted messages will be displayed.
• Develop the code for the quote feature, integrating it into the existing chat system.

[KOMALDEWNANI]

Hey @sidmohanty11, I would like to work on this issue. Please assign it to me. Thanks!

[YashTote]

@sidmohanty11 Is this issue assigned to someone? I would like to work on this and submit the PR ASAP.

[sidmohanty11]

Hey, @YashTote thanks a lot for showing interest in this feature. We are currently in the mid of a major refactoring spree and any feature addition is actually put on hold for a bit. But still, if you want to contribute feel free to take a pull from the develop branch, get in touch with @abhinavkrin regarding the development steps on https://open.rocket.chat and create a PR to that branch. Thanks!

[umangutkarsh]

Hey @sidmohanty11 . Is this feature required?

[umangutkarsh]

Hey @sidmohanty11 . Is this feature required?

If required, I'm working on this one.

[sidmohanty11]

Hey @umangutkarsh sorry for the late response! Go ahead!

[umangutkarsh]

Hey @sidmohanty11 . No worries. I am currently working on this.

This is the solution I've come up with and the approach I'm following:

1. Create a quote UI button to add messages to be quoted above the text-area of ChatInput component
2. When clicking the button, adding the messsage to an array.
3. The state of this array and the methods to make changes to it's state (i.e., addQuoteMessage(), removeQuoteMessage, clearQuoteMessage) will be managed by a context API from which the methods and states can be used anywhere in any component.
4. Context API is used to avoid having to pass the data as a prop at every level of the component tree.
5. The UI of the current QuotedMessage will be rendered by a QuoteAttachment component, this component will have an attachment prop, and an onCancel prop to remove the message from the array of quotedMessages.
6. When the message is sent, then if there are quotedMessages in the array, will be sent as an attachment with the current sent message.

The code is almost ready, just the rendering of the quotedMessages as an attachment is left.

Please review this if I should work further on this.

[umangutkarsh]

Hi @sidmohanty11 . Please let me know whenever you are available.
Thanks

[umangutkarsh]

Hey @sidmohanty11 . No worries. I am currently working on this.

This is the solution I've come up with and the approach I'm following:

1. Create a quote UI button to add messages to be quoted above the text-area of ChatInput component
2. When clicking the button, adding the messsage to an array.
3. The state of this array and the methods to make changes to it's state (i.e., addQuoteMessage(), removeQuoteMessage, clearQuoteMessage) will be managed by a context API from which the methods and states can be used anywhere in any component.
4. Context API is used to avoid having to pass the data as a prop at every level of the component tree.
5. The UI of the current QuotedMessage will be rendered by a QuoteAttachment component, this component will have an attachment prop, and an onCancel prop to remove the message from the array of quotedMessages.
6. When the message is sent, then if there are quotedMessages in the array, will be sent as an attachment with the current sent message.

The code is almost ready, just the rendering of the quotedMessages as an attachment is left.

Please review this if I should work further on this.

Hi @sidmohanty11 @abhinavkrin . I've almost integrated the 'Quote-Message feature' for embeddedChat, except for some issues which I'm currently facing. Anything else should I consider? Please let me know
Thanks.

quote.webm

[umangutkarsh]

Hey @sidmohanty11 . No worries. I am currently working on this.
This is the solution I've come up with and the approach I'm following:

1. Create a quote UI button to add messages to be quoted above the text-area of ChatInput component
2. When clicking the button, adding the messsage to an array.
3. The state of this array and the methods to make changes to it's state (i.e., addQuoteMessage(), removeQuoteMessage, clearQuoteMessage) will be managed by a context API from which the methods and states can be used anywhere in any component.
4. Context API is used to avoid having to pass the data as a prop at every level of the component tree.
5. The UI of the current QuotedMessage will be rendered by a QuoteAttachment component, this component will have an attachment prop, and an onCancel prop to remove the message from the array of quotedMessages.
6. When the message is sent, then if there are quotedMessages in the array, will be sent as an attachment with the current sent message.

The code is almost ready, just the rendering of the quotedMessages as an attachment is left.
Please review this if I should work further on this.

Hi @sidmohanty11 @abhinavkrin . I've almost integrated the 'Quote-Message feature' for embeddedChat, except for some issues which I'm currently facing. Anything else should I consider? Please let me know Thanks.

quote.webm

Hi @abhinavkrin @sidmohanty11 . Should I create a draft PR for this? So that it is easy to review the approach I have followed?
Please let me know. I have spent quite some time to integrate this, except for a few issues which are left to be resolved.

Thanks.

[abhinavkrin]

Sure @umangutkarsh you can create a draft pr.