# Structure

This article will get you familiar with the internal elements structure of **RadChat**.

> caption Figure 1: RadChat's elements hierarchy

![WinForms RadChat Elements Hierarchy](https://www.telerik.com/products/winforms/documentation/assets/e9b244f2c7a63e4fcb6d66a31fc7dd53/chat-structure001.png)

> caption Figure 2: RadChat's visual structure

![WinForms RadChat Visual Structure](https://www.telerik.com/products/winforms/documentation/assets/8c25cf97908d8fe31950015c5a45a443/chat-structure002.png)

1. **RadChatElement** - the main element in **RadChat**.
2. **ChatMessagesViewElement** - the main container that hosts the messages.
3. **RadTextBoxElement** - the text box which handles user's input.
4. **ChatMessageNameElement** - represents the author's name and time of the message.
5. **ChatMessageBubbleElement** - contains the message's content.
6. **ChatMessageAvatarElement** - represents the author's avatar.
7. **TextMessageItemElement** - represents a single text message.
8. **MediaMessageItemElement** - represents a single image message.
9. **ChatTimeSeparatorItemElement** - time separator between the messages in different days.

> caption Figure 3: ChatImageCardElement's visual structure

![WinForms RadChat ChatImageCardElement's visual structure](https://www.telerik.com/products/winforms/documentation/assets/3d22d935df32ab6f3ed95300e2b29526/chat-structure003.png)

1. **ChatImageCardElement** - represents an image card.
2. **StackLayoutPanel** - the container that host all information elements.
3. **LightVisualElement** - represents a single text/image element in the card.

**ChatProductCardElement** and **ChatWeatherCardElement** have identical visual structure: one **StackLayoutPanel** that hosts several **LightVisualElement** s.

> caption Figure 4: ChatProductCardElement's visual structure

![WinForms RadChat ChatProductCardElement's Visual Structure](https://www.telerik.com/products/winforms/documentation/assets/b2d2686361b33cb1f4f5ade00e1e6872/chat-structure005.png)

> caption Figure 5: ChatWeatherCardElement's visual structure

![WinForms RadChat ChatWeatherCardElement's Visual Structure](https://www.telerik.com/products/winforms/documentation/assets/fec2fc9620e927647cd94e2af0e0bd51/chat-structure006.png)

> caption Figure 6: ChatFlightCardElement's visual structure

![WinForms RadChat ChatFlightCardElement's Visual Structure](https://www.telerik.com/products/winforms/documentation/assets/d0d709b0e12a16e381198fefde148695/chat-structure004.png)

1. **ChatFlightCardElement** - represents a flight card.
2. **FlightStackLayoutPanel** - the container that hosts the flight information elements.
3. **FlightCardAirportInfo** - represents a single flight information element.
4. **LightVisualElement** - represents a single text/image element in the card.

## See Also

* [Overview](https://www.telerik.com/products/winforms/documentation/controls/chat/overview)

* [Getting Started](https://www.telerik.com/products/winforms/documentation/controls/chat/getting-started)