feat: chat bubble api decision #2508
Conversation
|
|
✅ PR title follows Conventional Commits specification. |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 8a36c0b:
|
tewarig
requested review from
chaitanyadeorukhkar,
kamleshchandnani,
anuraghazra,
snitin315 and
saurabhdaware
as code owners
| ``` | ||
|
|
||
| ## Open Questions | ||
|
|
There was a problem hiding this comment.
So normally we keep the questions in open questions and add conclusion and discussion points based on discussion so that we have reasoning in place if we want to find it later
| @@ -0,0 +1,85 @@ | |||
| # ChatMessage Decisions | |||
There was a problem hiding this comment.
You can get the format from other API decision
| @@ -0,0 +1,85 @@ | |||
| # ChatMessage Decisions | |||
|
|
|||
There was a problem hiding this comment.
You can add annotations image from figma cover of this component like we do in other API decisions
|
|
||
| [Figma Link](https://www.figma.com/design/jubmQL9Z8V7881ayUD95ps/Blade-DSL?node-id=100413-32686&t=n9A7LztwEkIsly3v-0) | ||
|
|
||
| ## ChatMessage Component |
There was a problem hiding this comment.
We usually keep Usage section first to give idea of the API and then add props table and then more examples of usage
|
|
||
| // Markdown | ||
| <ChatMessage markdown="# this is markdown" /> | ||
| ``` |
There was a problem hiding this comment.
We can later add pros and cons and why we went with that children API
|
|
||
| | Prop | Type | Default | Required | Description | | ||
| | ---------------------- | ------------------------------------------- | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | messageType | 'last' or 'default' | default | No | If the message is the last message in the chat and if this prop is enabled we will add decorations messageBubble | |
There was a problem hiding this comment.
The description of this prop is not clear, what does decorations messageBubble mean?
There was a problem hiding this comment.
update it to -
If messageType is lastmessage in the chat we will add different styles in chat message. currently we have different borderRadius if messageType is last or default |
| | isLoading | Boolean | false | No | If the message is loading, we will add a loading animation to the chat bubble | | ||
| | validationState | 'error' or 'none' | none | No | if validation state is error we will show error decoration and message| | ||
| | errorText | String | null | No | If the message is an error message, we will show the error message in the chat bubble | | ||
| | onClick | Function | null | No | callback to be called when ever component is clicked. | |
There was a problem hiding this comment.
Does it need to be interactive/clickable? If we render a Card inside the slot, it would support its own onClick prop.
There was a problem hiding this comment.
Yes, in case of an error, we need to support the onClick prop since children accepts JSX. It should support its own onClick, but in that case, we need to stop event bubbling.
| | validationState | 'error' or 'none' | none | No | if validation state is error we will show error decoration and message| | ||
| | errorText | String | null | No | If the message is an error message, we will show the error message in the chat bubble | | ||
| | onClick | Function | null | No | callback to be called when ever component is clicked. | | ||
| | footerActions | ReactNode | null | No | if this is passed we will render this at the end of chat bubble | |
There was a problem hiding this comment.
Can you add a sample usage for this prop as well? Usually we follow compound API for rendering footer/headers.
There was a problem hiding this comment.
added -
<ChatMessage
footerActions={
<ChipGroup>
<Chip value="value1">value1</Chip>
<Chip value="value2">value2</Chip>
</ChipGroup>
}
>
demo message
</ChatMessage>
| // with error | ||
| <ChatMessage validationState="error" errorText="Error Message">Demo Text</ChatMessage> | ||
|
|
||
| // with card | ||
| <ChatMessage><Card></Card></ChatMessage> | ||
|
|
There was a problem hiding this comment.
How about this API?
// normal string text
<ChatMessage>string message</ChatMessage>
// With a complex body like Mardown/Card
<ChatMessage>
<ChatMessageBody>
<Markdown> Demo Text </Markdown>
<Card></Card>
</ChatMessageBody>
<ChatMessageFooter>
<Button> Get STarted</Button>
</ChatMessageFooter>
</ChatMessage>There was a problem hiding this comment.
I think the Compound Component Pattern would make more sense if we had shared state between the child components.
| | onClick | Function | null | No | callback to be called when ever component is clicked. | | ||
| | footerActions | ReactNode | null | No | if this is passed we will render this at the end of chat bubble | | ||
| | children | 'ReactNode' or 'string' | null | yes | The children that will be rendered inside the chat bubble. can be react node or a string | | ||
| | leading | ReactNode | null | No | will be displayed only in case if message is other and also, will contain animation by default | |
There was a problem hiding this comment.
I think we need a separate prop for just controlling typing animation as well, because otherwise if the component re-mounts/re-renders, the text will animate once again.
Screen.Recording.2025-01-31.at.7.29.29.PM.mov
There was a problem hiding this comment.
typing animation will be controlled by user.
There was a problem hiding this comment.
We would just be adding an animation to the leading.
There was a problem hiding this comment.
updated to -
It will be displayed only if the message is 'other' and will also contain an spin animation by default.
Description
feat: chat bubble api decision #2508
Changes
Additional Information
Component Checklist