React
Is new design vision part implemented using new tokens?
Component checklist
Up to date
Resources
Example
import {
Avatar,
Card,
ChatBody,
ChatTextarea,
ChatBodyWrapper,
ChatFooter,
Container,
Divider,
Message,
MessageFooter,
MessageStatus,
Stack,
Typography
} from '@optimus-web/core';
const MyChatComponent = () => {
const [value, setValue] = useState('');
const [disabled, setDisabled] = useState(true);
const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
setValue(event.target.value);
setDisabled(event.target.value.length === 0);
};
<Container width="600px">
<Card>
<ChatBodyWrapper>
<ChatBody>
<Stack vertical spacing="100">
<Divider>
<Typography textStyle="bodySmallStrong" variant="secondary">
<span>29/03/2024</span>
</Typography>
</Divider>
<Message
author="user"
authorName="Ocean Breeze Hotel"
avatar={
<Avatar
src=""
title="Ocean Breeze Hotel"
size="medium"
/>
}
consecutiveMessage={true}
variant="default"
>
Good afternoon! Welcome to Ocean Breeze Hotel.
</Message>
<Message
author="user"
avatar={
<Avatar
src=""
title="Ocean Breeze Hotel"
size="medium"
/>
}
authorName="Ocean Breeze Hotel"
footer={
<MessageFooter
alignment="end"
time={<span>10:42 AM</span>}
status={<span>Sent</span>}
statusIcon={MessageStatus.Sent}
author="Ocean Breeze Hotel"
/>
}
variant="default"
>
We still have availability for those dates. Let me go ahead and book the room for you right now.
</Message>
</Stack>
</ChatBody>
</ChatBodyWrapper>
<ChatFooter>
<ChatTextarea
onChange={handleChange}
disabled={disabled}
onKeyPress={() => true}
onSubmit={() => true}
value={value}
name="textarea"
placeholder="Type your message here"
iconAccessibleText="Send"
label="Type your message here"
footerMessage="All the data is protected in this chat. It is powered by OpenAI, so inaccurate information is possible."
/>
</ChatFooter>
</Card>
</Container>
}
API
ChatBody
|
Name |
Description |
Type |
Default |
|---|---|---|---|
|
showMessagesList? |
Hides the messages from the chat |
boolean |
true |
|
children |
The chat content |
ReactNode |
- |
|
emptyMessage? |
Defines the message when the body is empty |
ReactNode |
undefined |
|
forwardedRef? |
Adds your React.Ref to the chat body |
React.Ref<HTMLDivElement> |
undefined |
ChatTextarea
|
Name |
Description |
Type |
Default |
|---|---|---|---|
|
autoCollapse? |
Collapse the text area. See |
boolean |
false |
|
disabled? |
Disables the submit button |
boolean |
false |
|
forwardedRef? |
Adds your React.Ref to the chat text area |
React.Ref<HTMLDivElement> |
undefined |
|
onChange |
Callback fired when the value changes. See |
(event: React.ChangeEvent<HTMLTextAreaElement>, value?: string) => void |
- |
|
onKeyPress |
Callback fired when any key is pressed |
() => void |
- |
|
onSubmit |
Callback fired when the send button is clicked |
() => void |
- |
|
placeholder? |
Defines the placeholder. See |
ReactNode |
undefined |
|
value |
Defines the value |
string |
- |
|
name |
Defines the name for the input |
string |
- |
|
iconAccessibleText? |
Accesible text for the send button icon |
ReactNode |
undefined |
|
label? |
Visually hidden label for the input |
ReactNode |
undefined |
|
footerMessage? |
Additional message below the textarea |
ReactNode |
undefined |
|
footerMessageVariant? |
Footer message typography variant |
TypographyVariant |
undefined |
Message
|
Name |
Description |
Type |
Default |
|---|---|---|---|
|
author? |
Defines the author for the message, needed for the chat and message layout and styles. Check story for details |
MessageAuthor (user | team | other | system)
|
undefined |
|
authorName? |
The name of the author rendered in the UI |
string |
undefined |
|
avatar? |
The avatar rendered along the author name in the message |
ReactNode |
undefined |
|
footer? |
The footer content for the message |
ReactNode |
undefined |
|
consecutiveMessage? |
Indicates whether the message is consecutive or not modifying the UI consequently |
boolean |
false |
|
variant? |
Defines the variant of the message |
default | success |
default |
MessageFooter
|
Name |
Description |
Type |
Default |
|---|---|---|---|
|
alignment |
Footer alignment |
'start' | 'end'
|
- |
|
time? |
Renders the time the message is sent |
ReactNode |
undefined |
|
status? |
Renders the status of the message |
ReactNode |
undefined |
|
statusIcon? |
Defines the status icon |
MessageStatus (failed | sending | sent) |
undefined |
|
author? |
Defines the author for the message, needed for the chat and message layout and styles. Check story for details |
MessageAuthor (user | team | other | system)
|
undefined |
|
actions? |
Renders a slot with some actions for the message |
ReactNode |
undefined |
Styled components
ChatBodyWrapper
Container used for the messages content
ChatFooter
Container used for the chat textarea