Anatomy
|
Item |
Name |
Description |
Component |
Optional |
|---|---|---|---|---|
|
1 |
Avatar |
The Avatar helps to differentiate the User inside of the Chat |
Yes |
|
|
2 |
Time Stamp |
|
|
|
|
3 |
Content |
Chat Message |
|
Yes |
|
4 |
Slot |
|
|
Yes |
|
5 |
Action |
Caution: Just used in the MIA Chat to give feedback on the AI generate Message |
Yes |
Specification & properties
Variants
The distinction is based on the direction of the communication flow:
- Outbound: Sent out to the other party.
- Inbound: Received from the other party.
Building blocks
The Chat includes several nested components to enhance the Chat functionality.
|
Item |
Component |
|---|---|
|
1 |
Text Area |
|
2 |
Tertiary Icon Button |
|
3 |
Avatar |
|
4 |
Ghost Icon Button |
More about those nested components, can be found on their individual pages:
States
The Chat message comes with 3 different states:
|
Item |
State |
Usage |
|---|---|---|
|
1 |
Default |
This is a message that is received by a user or system |
|
2 |
Typing |
Indicated someone is writing a message in the chat or the AI is generating a reply to your prompt |
|
3 |
Success |
Caution |
Spacing
|
Property |
Value |
Token |
|---|---|---|
|
Padding |
16px |
spacing.200 |
|
Gap |
8px |
spacing.100 |