rocketchat / embeddedchat Goto Github PK
View Code? Open in Web Editor NEWAn easy to use full-stack component (ReactJS) embedding Rocket.Chat into your webapp
Home Page: https://www.npmjs.com/package/@embeddedchat/react
An easy to use full-stack component (ReactJS) embedding Rocket.Chat into your webapp
Home Page: https://www.npmjs.com/package/@embeddedchat/react
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
User should automatically become a member of the channel when he/she messages into the channel
It isn't the case, but user can still message
Should take the complete height of the window - full screen
Doesn't do so
Usernames should have been handled gracefully.
It broke
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: Allow users to be able:
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
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
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
Whenever a user leave or join a channel or removed by someone from the channel, then the message is not displaying properly.
The message should be something like this:
@username joined the channel
@username left the channel
@adminUsername removed @username
Only the username is printing on the screen with no clear message either the user has joined the channel or left the channel.
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:
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)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.
Completed Installation of the node_modules.
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
Messages does not display after we click back oprion from starred or pinned messages.
Go Back
All the messages should display on clicking Go back.
Empty chat body
As an EmbedChat developer
I need to: Research upon TOTP
So That: EmbeddedChat works with TOTP enabled as well as disabled.
Acceptance Criteria
When any user of a room pins a message, it is not displayed. Instead an icon is shown for indicating a pinned message.
Message should get pinned and displayed in Embedded chat
As an EmbedChat developer
I need to: Different options available while sending a message.
This will consist of following options:
So That: I can send in specified way as mention above
Acceptance Criteria
As an EmbedChat developer
I need to: Create functionality to send and receive attachments
So That: Users can send and receive attachments
Acceptance Criteria
<Message>
componentCSS properties get inherited in when EmbeddedChat in embedded
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
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
As an EmbedChat developer
I need to: Create a Demo webpage
So That: Potential developers or companies can try out EmbeddedChat.
Acceptance Criteria
gh-pages
branch/demo
to showcase the tech.co siteAs an EmbedChat developer
I need to: setup linting
So That: my code is clean and readable
Acceptance Criteria
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
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
As an EmbedChat developer
I need to: Create functionality to react to any message
So That: UX of users increases significantly
Acceptance Criteria
#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.
Note: During development only!
User details should get updated
They don't.
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!
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
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.
something like this
) greater than the total width of the chat window.[ #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
The messages should have line breaks and fit into the Chat window width.
(Message sent from the embedded chat was ffffffffvnnnnnnnnnnkkkkkkkkpllllllllllllpppppppppppppppppllllllllllllppppppppppppppnllnlj
)
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!
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
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
As an EmbedChat developer
I need to: be able to load my component from within an iframe
So That:
Acceptance Criteria
/demo
page with EmbeddedChat as an iframeAs 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
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
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
/me
endpoint hitRC 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).
/me
API call decreases the performance of the app and is not needed
A way to validate requests without worrying about the client side fiddle.
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
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
npm run build
and you will see it in the terminalNot to show any warning message.
Shows a warning message.
# h1
# h1
Markdown should work universally.
It doesn't.
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
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.
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
npm i @rocket.chat/embeddedchat
It should get install normally without a hassle
As it is not registered with npm cannot download it, neither the manual install works
Figure out a way to:
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.
headerColor
, toastBarPosition
to the props list and update its description, refer thisFeel 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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.