Chat getting started react guide #2521
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Hey @m-hulbert, do you have any ideas as to why the react code blocks don't correctly render? I get the following error You're currently viewing the JavaScript docs. There either isn't a JavaScript code sample for this example, or this feature isn't supported in JavaScript. Switch language to view this example in a different language, or check which SDKs support this feature. |
splindsay-92
force-pushed
the
chat/getting-started-react-guide
branch
4 times, most recently
from
bac7e74 to
0298e90
Compare
m-hulbert
force-pushed
the
edu-1851-chat-start-js
branch
2 times, most recently
from
fdc86af to
e414332
Compare
splindsay-92
force-pushed
the
chat/getting-started-react-guide
branch
from
d662769 to
427678e
Compare
There was a problem hiding this comment.
This was really great, @splindsay-92 ! Especially as it builds up the UI.
I've made some suggestions and fixes and then there's a couple of other things to discuss:
- Minor, but we should be consistent with styling on hook names. At the moment we sometimes code style them, and sometimes don't.
- I think we should have a quick sync on when / when not to include the entire code, as there's a few places where it isn't obvious what to add and what to replace.
- Edit and history currently don't work when following it verbatim so let's catch up on those quickly too.
| * Setting up typing indicators to see which clients are typing | ||
| * Displaying online status of clients in the room | ||
| * Subscribing to and sending reactions | ||
| * Retrieving historical messages to provide context for new joiners |
There was a problem hiding this comment.
Can we reorder these where history has moved and add a point for closing?
There was a problem hiding this comment.
RE: closing - do you think it's worth still having a step and mentioning how React handles it when unmounting?
There was a problem hiding this comment.
Will move the points around :) As for closing, are we talking about the Realtime pubsub component or the chat component? Chat components will release channels, but they do not close any realtime connections. Should we have a specific section on detaching too?
| * You can also send a reaction to the room via the Ably CLI by running the following command: | ||
|
|
||
| ```[sh] | ||
| ably rooms reactions send my-first-room 👍 |
There was a problem hiding this comment.
This no longer works without providing a messageId in addition to the emoji which seems wrong to me.
There was a problem hiding this comment.
Thats strange, this isn't a chat change though, I will have to take a look at the CLI and fix it up :)
There was a problem hiding this comment.
I've checked this over, it seems to work find for me 🤷 Happy to take a look with you whenever you're free though!
splindsay-92
force-pushed
the
chat/getting-started-react-guide
branch
2 times, most recently
from
e539b09 to
4df3782
Compare
| import { | ||
| AllFeaturesEnabled, | ||
| MessageEvent, | ||
| Message, |
There was a problem hiding this comment.
This may be me, but I run npm run dev. Load it in my browser and get the error:
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@ably_chat.js?v=605f498d' does not provide an export named 'Message'
This error also happens for React and MessageEvent. Once these are commented out from the import, all works fine.
There was a problem hiding this comment.
Could you confirm what version of the chat-sdk you are using? It should be 0.6.0, and these imports are all exported there
Ignore the styling complaint. 👀 |
splindsay-92
force-pushed
the
chat/getting-started-react-guide
branch
from
4df3782 to
0b5e042
Compare
splindsay-92
force-pushed
the
chat/getting-started-react-guide
branch
from
ac99b6a to
067fe3c
Compare
The guide includes instructions on installation, authentication, and room creation, along with practical examples for messaging and typing indicators.
- Trimmed down the installation section. - Moved all imports to a dedicated section at the start of the guide for reuse. - Lots more test changes and corrections.
splindsay-92
force-pushed
the
chat/getting-started-react-guide
branch
from
067fe3c to
4bfa827
Compare
Description
CHA-898
Adding a getting started guide for Chat with React and Vite
Issues still to investigate
Checklist