As an EmbedChat developer

I need to: add divider for messages date wise

So That: Message list looks more cleaner and date wise message can be readable

Acceptance Criteria

• Add a divider for messages date wise. (Messages belonging to same date should have one divider)
• Remove date for individual messages.
• Show time for each message.

As an EmbedChat developer

I need to: setup linting

So That: my code is clean and readable

Acceptance Criteria

• make use of industry-standard linting (airbnb)

As an EmbedChat developer

I need to: Different options available while sending a message.
This will consist of following options:

1. Bold
2. Italic
3. Strike
4. Code
5. Multiline

So That: I can send in specified way as mention above

Acceptance Criteria

• Able to make message bold
• Able to italic text
• Able to strike text
• Able to include code
• Able to new line

Description: Users don't join the channel when they get authenticated using Google SSO.

Steps to reproduce:

1. Login into EmbeddedChat using Google SSO
2. Notice that you are able to message
3. Message in the channel
4. Go to the RC server and see that the user isn't a member of that channel

Expected behavior:

User should automatically become a member of the channel when he/she messages into the channel

Actual behavior:

It isn't the case, but user can still message

Description:

Steps to reproduce:

1. Send a long link in the chat

Expected behavior:

The chat window should maintain its constant width

Actual behavior:

On sending longer links, the chat window gets enlarged

As an EmbedChat developer
I Need to: use Rocket.Chat Node.Js SDK
So That: real-time chat functionality can be achieved with my component and the RC server

Acceptance Criteria

• Install Node.js SDK
• Initialize an RC Instance and connect to RC Server.
• Create websockets on RC server.

As an EmbedChat developer

I need to: Create a Demo webpage

So That: Potential developers or companies can try out EmbeddedChat.

Acceptance Criteria

• Create a gh-pages branch
• Deploy the web app on root
• Automate the process for every push
• add a /demo to showcase the tech.co site

As an EmbedChat Developer
I need to: Show emojis within the message box as they are typed
So That: Users get instant feedback on selecting emojis

Acceptance Criteria

• Render emojis within the message box.

Description: In the current approach for EmbeddedChat we are going with the legacy Markdown Component of RC which is made with markedjs and dompurify, but RC has moved into its own custom parser which causes markdown to conflict.

Steps to reproduce:

1. Send # h1
2. It should be a heading
3. It shows as a heading in the EmbeddedChat but in RC -> # h1

Expected behavior:

Markdown should work universally.

Actual behavior:

It doesn't.

Description:

The alignment of emoji and text is a little bit off

Steps to reproduce:

1. write a message with emoji

Expected behavior:

Actual behavior:

Description:

• Remove the /me endpoint hit
• Logout the user when cookies are invalid and the user performs an action

RC authToken doesn't have an expiry, so without checking for the cookies validation in each refresh we need to check if the token is valid when something errors out (like sending a message).

Expected behavior:

/me API call decreases the performance of the app and is not needed

Actual behavior:

A way to validate requests without worrying about the client side fiddle.

As an EmbedChat developer

I need to: Create functionality to react to any message

So That: UX of users increases significantly

Acceptance Criteria

• API integration to send reactions
• List all reactions and count of reactions under the message
• Clicking on the reaction again should un-react the message

Description:

When we clone the project and followed the steps in the README file. It is throwing errors that some packages are not found in the registry.

Steps to reproduce:

1. git clone the EmbeddedChat project.
2. npm i (at root) or (any command regarding node js)

Expected behavior:

Completed Installation of the node_modules.

Actual behavior:

Tech-debt:

We are currently using JoyPixels emoji set which is also used in RocketChat.

But,

We are using v2 of emoji-picker-react, which is no longer maintained. It warns us showing that legacy contextAPI is not recommended to use in React.StrictMode environment.

Possible Approaches:

• We can upgrade to v3 which uses the latest React but it doesn't serve us with joypixel emojis (this would mean the user will choose a native emoji but when it will be rendered it will come out to be different - JOYPIXELS)
• or, We can stick with the current approach

As an EmbedChat developer

I need to: Create functionality to send and receive attachments

So That: Users can send and receive attachments

Acceptance Criteria

• API integration to send an attachment
• Parse different types of attachments while receiving them in the <Message> component

As an EmbedChat developer

I need to: Add the avatar of the sender next to the message in the EmbedChat

So That: Users can easily identify who sent the message and improve the overall chat experience.

Acceptance Criteria

• The avatar of the sender is displayed next to the message in the chat
• The avatar is pulled from the user's profile, if available
• The implementation does not impact the performance of the chat

Expected behavior

Actual behavior

Description:

A long message (typically a link or a code line) greater than the Embedded Chat width overflows out of the container instead of getting line wraps.

Steps to reproduce:

1. In the Embedded Chat, Send a long message with a link or an inline code (something like this) greater than the total width of the chat window.
   E.g.
   Send this message,

[ #17 ](https://github.com/RocketChat/Apps.Github22/issues/17) *Pull Request Review : Merge And  Comment on Pull Requests* : https://github.com/RocketChat/Apps.Github22/issues/17

2. See the error

Expected behavior:

The messages should have line breaks and fit into the Chat window width.

Actual behavior:

(Message sent from the embedded chat was ffffffffvnnnnnnnnnnkkkkkkkkpllllllllllllpppppppppppppppppllllllllllllppppppppppppppnllnlj)

Additional Details

The Embedded Chat component

<RCComponent
              moreOpts={true}
              isClosable={true}
              setClosableState={setOpen}
              width={"auto"}
              height={isSmallScreen ? "30vh" : "55vh"}
              GOOGLE_CLIENT_ID={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}
              host={process.env.NEXT_PUBLIC_RC_URL}
              roomId={
                process.env.NEXT_PUBLIC_RC_ROOM_ID
                  ? process.env.NEXT_PUBLIC_RC_ROOM_ID
                  : "GENERAL"
              }
              channelName="General"
              anonymousMode={true}
              isFullScreenFromStart={false}
            />

Thank you!

Description: handling of username fails sometimes

Steps to reproduce:

1. Issue that occurred at the demo page

Expected behavior:

Usernames should have been handled gracefully.

Actual behavior:

It broke

Description: Full screen should not mean 100vh height but it should mean that the chat takes the total height of the window.

Steps to reproduce:

1. set isFullScreenFromStart = true
2. Observe it doesn't take complete height

Expected behavior:

Should take the complete height of the window - full screen

Actual behavior:

Doesn't do so

As an EmbedChat developer

I need to: Create the functionality to view and write in threads

So That: Users can use the thread functionality of RC and messages don't get cluttered in EmbeddedChat

Acceptance Criteria

• UI for threads
• List all thread messages of a thread
• Writing a message inside that thread should trigger sendMessage to that specific thread

Description:

When i try to install the package from npm it says not found.
Then if i try to install and use it manually, error pops up and doesn't work

Steps to reproduce:

1. install from npm i @rocket.chat/embeddedchat
2. We can see the npm errors
3. Install directly from github still throws error

Expected behavior:

It should get install normally without a hassle

Actual behavior:

As it is not registered with npm cannot download it, neither the manual install works

As an EmbedChat developer

I need to: Make use of google sso
So That: I can sign in or sign-up for EmbeddedChat
Acceptance Criteria

• Create users if they do not exist
• Change the username using RC token
• fetch content upon sign-in/sign-up
• show toast when login fails
• Read-only for users which are not logged in (use anonymous mode)
• logout functionality (user friendly logout message)

As an EmbedChat developer

I need to: Add an option for the users to see all the members of that channel

So That: People know who all are there on the channel

Acceptance Criteria

• Create an option in more options called "members" to check out all members of the channel

As an EmbedChat developer

I need to: Add an option to delete a message if the message belongs to that user.

So That: EmbedChat Users can delete their own messages.

Acceptance Criteria

• Implement the Delete functionality and the messages should be updated in realtime.

As an EmbedChat developer

I need to: Document the differences between EmbeddedChat and iFrame

So That: The scope and features for both are distinct and clear

Acceptance Criteria

• Difference in features (one channel vs multichannel)
• UI improvements (UI breaks happening in iframe)
• Usecases!

As an EmbedChat developer

I need to: Create functionalities for pinning and starring messages

So That: Users can pin and star messages and view them in EmbeddedChat UI as well as re-visit them on RC

Acceptance Criteria

• API integration for pinning messages
• API integration for starring messages
• UI to show both of them
• Handle pinning functionality of messages for admins only (as per RC)

As an EmbedChat developer

I need to: write a pipeline to include semantic release

So That: I get automated release tags on merge

Acceptance Criteria

• TODO 1
• TODO 2
• TODO 3

Description: Fuselage's toast bar cannot be used to stick within the context of a component as it behaves like a portal.

Figure out a way to:

• Show toast bar according to user preference

As an EmbedChat developer
I Need to: Make the EmbedChat component Responsive
So That: It fits best on screens of all sizes and gives users usage options based on screen size

Acceptance Criteria

• Emoji picker responsiveness.
• Defaults
  • width = 100%
  • height = 1/4 of the screen size
• Full-screen button on top right to expand the component to occupy the entire screen.
  • Show/hide features based on current size of the component.

Description:

Shared images in embedded chat can't be opened. The uploaded files point to localhost.

Steps to reproduce:

1. Upload a screenshot in the chat
2. Click on the link

Expected behavior:

The image opens in a new tab

Actual behavior:

I am getting the below response from api/vi/login endpoint after user login with google oauth popup, the
{"status":"error","message":"Service not configured"}

I have configured the Rocket chat server and google console.
Am I missing anything here?

Thanks

Description:

When any user of a room pins a message, it is not displayed. Instead an icon is shown for indicating a pinned message.

Steps to reproduce:

1. Pin any message
2. The pinned message should be displayed in a suitable format.
3. Pinned message should consist of who has pinned the message and which message has been pinned

Expected behavior:

Message should get pinned and displayed in Embedded chat

Actual behavior:

An icon is displayed instead.

CSS properties get inherited in when EmbeddedChat in embedded

As an EmbedChat developer

I need to: be able to load my component from within an iframe

So That:

• it doesn't inherit parent css
• fullscreen works
• toast remains within the iframe container

Acceptance Criteria

• Create a GitHub repo and embed the component
• Host it using GitHub pages
• Take the URL and make the /demo page with EmbeddedChat as an iframe

As an EmbedChat developer

I need to: Publish the package in npm registry and jsDelivr

So That:Any developer can use EC in their apps

Acceptance Criteria

• Publish the package to both jsDelivr and npm

Description:

Messages does not display after we click back oprion from starred or pinned messages.

Steps to reproduce:

1. Click on pinned/starred messages at the chat header
2. Once the pinned/starred messages come, click on Go Back
3. All the messages should come successfully on clicking back

Expected behavior:

All the messages should display on clicking Go back.

Actual behavior:

Empty chat body

Description:

#51 solves it partially by adding a me call to the API when there is no user info stored in our localstorage but if the user changed its cookies into a new user's cookies he will still get his user profile image as the previous one and also the app would show indeterministic UI.

Steps to reproduce:

Note: During development only!

1. Login into EmbeddedChat
2. Login into some other account in RC
3. Come back to see in EC that you have the same profile image as before but you message with the user you logged in with in RC.

Expected behavior:

User details should get updated

Actual behavior:

They don't.

Extra

You can take help of this PR to get everything working if user's info is missing and add into it a functionality to check if the user has been changed midway! This could be possible if we add a check to user_id cookie to a stored version at localstorage or if you have an amazing way, please feel free to post it here!

Description:

Steps to reproduce:

Expected behavior:

Actual behavior:

As an EmbedChat developer

I need to: Create a headerColor prop

So That: Use headerColor to set header text color, header background color, and description color.

Acceptance Criteria

• create a headerColor prop
• using headerColor determine the background, text, description colors

As an EmbedChat developer

I need to: Add an option to edit a message if the message belongs to that user.

So That: EmbeddedChat Users can edit their own messages.

Acceptance Criteria

• Implement the Editing Message functionality and the messages should be updated in realtime.

Description:

Whenever a user leave or join a channel or removed by someone from the channel, then the message is not displaying properly.

Steps to reproduce:

1. Join/Leave the channel through the RC server.
2. Login in embedded chat through any account.
3. See the joining/leaving message.

Expected behavior:

The message should be something like this:

• In case of joining - @username joined the channel
• In case of leaving - @username left the channel
• In case of removing by admin/owner - @adminUsername removed @username

Actual behavior:

Only the username is printing on the screen with no clear message either the user has joined the channel or left the channel.

I had some Readme changes in mind, please feel free to add them and modify the README into a cool one if you are willing to.

• Addition of a link to the Wiki/FAQs page for videos,
• Link to Roots of EmbeddedChat wiki with a link to this that will help people get a better sense of understanding of its internals.
• A cool screenshot maybe! You can refer this
• Add headerColor, toastBarPosition to the props list and update its description, refer this

Feel free to add more to this list if you think something else needs to be changed. This will be a significant contribution!

Originally posted by @sidmohanty11 in #65 (review)

Excited to see this! We've embedded RocketChat in our own product using the iframe integration. Guess we could give the component a go if commands from the iframe integration are supported? Especially login-with-token and go

https://developer.rocket.chat/rocket.chat/iframe-integration/iframe-integration-sending-commands

As an EmbedChat developer

I need to: Research upon TOTP

So That: EmbeddedChat works with TOTP enabled as well as disabled.

Acceptance Criteria

• Add TOTP capabilities!

As an EmbedChat developer

I need to: Allow users to be able:

• Click the report button next to a chat.
• Add a description, stating the report reason
• Click a button to confirm.

So That: Users can report messages from the Embeded Chat window, instead of having to do it from the main Rocket.Chat host.

Acceptance Criteria

• Add a report button, when A user hovers over the chat message.
• Upon cliking the report button, a small pop-up would appear asking why they would like to report it. This contains: A report description, cancel, and send Report.
• Make an API call to send the user's report message to server.

Proposed changes

As an EmbedChat developer

I need to: Add a feature to show the username of the user that are typing.

So That: Embedded Chat users can see which user's are typing.

Acceptance Criteria

• Show the username's of user's that are typing like Rocket Chat shows.

As a user of Embeded Chat user,
I want to be able to add a profile picture to my account so that it displays next to my username in the chat,
while still maintaining the lightweight nature of the application.

Acceptance Criteria

• The profile picture should be displayed next to the username in their chats, or attached files.
• Only load the required number of profile pictures, since the user will only be looking at 20-30 chat messages at a time.

Description:

The image is not visible on the chat screen, it is visible as a link instead of an image.
The image uploaded from the Embedded chat is coming as a file.

Steps to reproduce:

1. Click on + icon to add image
2. Hit enter to send the image
3. The image would come as a file in the application
4. That image would also come as a file in the rocket chat server

Expected behaviour:

Actual behaviour:

Description: The current Rocket.Chat Nodejs SDK has js-sha256 as its dependency which is showing the warning message.

Rocket.Chat Nodejs SDK v1.0.0-alpha.42

LINKED ISSUE IN RC Node.js SDK: issue

Steps to reproduce:

1. npm run build and you will see it in the terminal

Expected behavior:

Not to show any warning message.

Actual behavior:

Shows a warning message.