Chat/add images and examples for UI component docs #2729

splindsay-92 · 2025-07-22T09:14:57Z

Description

Added examples for App, Chat window and Sidebar components.
Updated docs to correct the style imports.
Added UI screens for the chat components section.

Checklist

Commits have been rebased.
Linting has been run against the changed file(s).
The PR adheres to the writing style guide and contribution guide.

coderabbitai · 2025-07-22T09:15:04Z

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch chat/add-images-for-ui-component-docs

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.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

Visit our Status Page to check the current availability of CodeRabbit.
Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

splindsay-92 · 2025-07-22T11:46:26Z

@jamiehenson I had to make some changes to the renderer to allow for the larger UI components, hope that's okay! If there is a better way to do it, happy to make a change! :)

jamiehenson

The stuff you've added for the new "single large" layout looks good on the whole, I just have a few pointers.

examples/chat-ui-app/react/index.html

examples/chat-ui-chat-window/react/index.html

examples/chat-ui-app/react/src/App.tsx

examples/chat-ui-chat-window/react/src/App.tsx

examples/package.json

src/images/examples/chat-ui-sidebar.png

src/components/Examples/ExamplesRenderer.tsx

jamiehenson

LGTM from a FE perspective 👍 I would look into that min-height -> height change before you go tho

src/pages/docs/chat/getting-started/react-ui-components.mdx

src/pages/docs/chat/react-ui-components/components.mdx

sacOO7

LGTM ( somehow I cant preview it, but excited to see the changes )

examples/chat-ui-app/react/README.md

examples/chat-ui-chat-window/react/README.md

src/components/Examples/ExamplesRenderer.tsx

GregHolmes · 2025-08-12T11:35:12Z

src/images/examples/chat-ui-app.png

Could we get the Design team to make more tile friendly images for the 3 examples? On the examples page, these look like there's too much going on / the images are too big for the size they're being shown at.

Sure, I'll ping design, see if I can get some input here :)

… React - Update the ExamplesRenderer.tsx to allow for large-scale examples, such as the App and Chat window. - Updated the index and types files to include the examples.

…xamplesRenderer - Added multiple screenshots to documentation for better visualization of Chat UI components. - Adjusted layout logic in `ExamplesRenderer.tsx` to better handle smartphones.

…package files

…indow examples

splindsay-92 added the review-app Create a Heroku review app label Jul 22, 2025

splindsay-92 requested review from jamiehenson and GregHolmes July 22, 2025 11:45

ably-ci temporarily deployed to ably-docs-chat-add-imag-9utfdj July 22, 2025 11:45 Inactive

ably-ci temporarily deployed to ably-docs-chat-add-imag-9utfdj July 22, 2025 11:47 Inactive

splindsay-92 requested a review from AndyTWF July 22, 2025 11:48

splindsay-92 marked this pull request as ready for review July 22, 2025 11:48

jamiehenson reviewed Jul 22, 2025

View reviewed changes

splindsay-92 requested a review from jamiehenson July 23, 2025 10:12

ably-ci temporarily deployed to ably-docs-chat-add-imag-9utfdj July 23, 2025 10:13 Inactive

jamiehenson approved these changes Jul 24, 2025

View reviewed changes

AndyTWF reviewed Jul 26, 2025

View reviewed changes

src/pages/docs/chat/getting-started/react-ui-components.mdx Show resolved Hide resolved

src/pages/docs/chat/react-ui-components/components.mdx Show resolved Hide resolved

splindsay-92 force-pushed the chat/add-images-for-ui-component-docs branch 2 times, most recently from 4a6307a to 534cb23 Compare July 31, 2025 13:19

splindsay-92 requested a review from vladvelici July 31, 2025 13:19

splindsay-92 force-pushed the chat/add-images-for-ui-component-docs branch from 534cb23 to bc16fe8 Compare August 1, 2025 14:48

sacOO7 approved these changes Aug 4, 2025

View reviewed changes

splindsay-92 force-pushed the chat/add-images-for-ui-component-docs branch from bc16fe8 to 7274ce7 Compare August 8, 2025 13:02

splindsay-92 added review-app Create a Heroku review app and removed review-app Create a Heroku review app labels Aug 8, 2025

ably-ci temporarily deployed to ably-docs-chat-add-imag-advod6 August 8, 2025 15:18 Inactive

GregHolmes force-pushed the chat/add-images-for-ui-component-docs branch from 7274ce7 to 462be23 Compare August 12, 2025 10:51

GregHolmes temporarily deployed to ably-docs-chat-add-imag-advod6 August 12, 2025 10:52 Inactive

GregHolmes reviewed Aug 12, 2025

View reviewed changes

ably-ci temporarily deployed to ably-docs-chat-add-imag-advod6 August 12, 2025 12:17 Inactive

ably-ci temporarily deployed to ably-docs-chat-add-imag-advod6 August 12, 2025 12:19 Inactive

splindsay-92 requested a review from GregHolmes August 12, 2025 12:24

splindsay-92 force-pushed the chat/add-images-for-ui-component-docs branch from 137a682 to e6e0ec3 Compare August 26, 2025 11:34

splindsay-92 added 11 commits August 26, 2025 12:35

Add screenshots for React UI Components in documentation

aa6f67d

Add images for avatar and chat message

5a67121

Update stylesheet path in documentation for React UI Components

c8fc5d7

Add examples for Chat UI components: App, Chat Window, and Sidebar in…

2e24573

… React - Update the ExamplesRenderer.tsx to allow for large-scale examples, such as the App and Chat window. - Updated the index and types files to include the examples.

Add React language support to Chat UI examples and add relevant images

e6ba895

Linter fixes

58c4d2a

Refactor based on PR comments

822ad9c

Add screenshots for Chat UI examples and minor layout adjustment in E…

1bc4a60

…xamplesRenderer - Added multiple screenshots to documentation for better visualization of Chat UI components. - Adjusted layout logic in `ExamplesRenderer.tsx` to better handle smartphones.

Update Chat UI components to latest versions in ExamplesRenderer and …

0280e58

…package files

Remove feature lists from README files for Chat UI Sidebar and Chat W…

b31e29e

…indow examples

Update Chat React UI kit screenshots with new designs

f62236b

splindsay-92 force-pushed the chat/add-images-for-ui-component-docs branch from e6e0ec3 to f62236b Compare August 26, 2025 11:40

Chat/add images and examples for UI component docs #2729

Are you sure you want to change the base?

Chat/add images and examples for UI component docs #2729

Uh oh!

Conversation

splindsay-92 commented Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Uh oh!

coderabbitai bot commented Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Status, Documentation and Community

Uh oh!

splindsay-92 commented Jul 22, 2025

Uh oh!

jamiehenson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jamiehenson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

sacOO7 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

GregHolmes Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

splindsay-92 Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

splindsay-92 commented Jul 22, 2025 •

edited

Loading

coderabbitai bot commented Jul 22, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)