Example of API in React Chat UI Component

All Controls
/
Chat-ui
/
API

This sample demonstrates the properties available in the Chat UI component, showcasing how various features can be customized through the property pane. It highlights the flexibility of the component, allowing users to adjust timestamps, headers, footers, time breaks, and more.

More Details...

Design Community
October 25, 2024
10/25 07:30 AM
Hey Michale, Charlie! Seen the latest posts in the Design Community? Amazing projects!
Michale Suyama
10/25 08:00 AM
MS
Hi Alice! Yes, Dana’s new UI design is incredible.
Charlie
10/25 11:00 AM
Charlie
Hey! I loved Dana’s use of color. Frank’s typography guide was great too.
October 26, 2024
10/26 11:00 AM
Absolutely! Any new community events planned?
Michale Suyama
10/26 12:15 PM
MS
We should organize a design challenge.
Janet
10/26 12:17 PM
Janet
I am excited to see the new projects.
Charlie
10/26 12:30 PM
Charlie
Great idea! Let’s discuss it in the next meeting.
May 1, 2025
05/01 07:05 PM
Sounds good! This community is so inspiring.
Michale Suyama
05/01 07:05 PM
MS
Agreed! Excited to see everyone’s ideas.
Charlie
05/01 07:05 PM
Charlie
I am looking forward to the design challenge.
Properties
Timestamp format
Show timestamp
Show timebreak
Show header
Show footer
Typing users
Description

In this sample, the following APIs and properties are demonstrated for customization:

  • timeStampFormat: Allows users to change the timestamp format by selecting an option from the property pane.
  • showTimeStamp: components whether the timestamp is displayed in the chat, toggled via the property pane.
  • showTimeBreak: Enables or disables the display of time breaks in the chat interface.
  • showHeader: Lets users toggle the visibility of the chat header.
  • showFooter: Toggles the visibility of the chat footer.
  • typingUsers: Allows users to manage the list of users who are typing, updated through the multi-select options in the property pane.

These properties can be adjusted via the property pane for a highly flexible and customizable chat experience.