Skip to content

Commit 0da577f

Browse files
krisantrobusserifluous
krisantrobus
and
serifluous
authored
Fix/button resize plus ai bug (#4026)
* fix(ai-chat-log): correct ai color and examples naming * fix(popover): popover reset variant types correct * fix(ai-chat-log): added API info for author * chore(pr): changesets and typedocs * chore(pr): resolve build issue * chore(pr): typedocs * Update packages/paste-website/src/pages/components/ai-chat-log/index.mdx Co-authored-by: Sarah <sali@twilio.com> --------- Co-authored-by: Sarah <sali@twilio.com>
1 parent fb4cbc5 commit 0da577f

File tree

8 files changed

+35
-15
lines changed

8 files changed

+35
-15
lines changed

‎.changeset/beige-guests-promise.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/popover": patch
3+
"@twilio-paste/core": patch
4+
---
5+
6+
[Popover] Fix typings that were not exposing additional props on using a reset button variant

‎.changeset/warm-suits-cough.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/ai-chat-log": patch
3+
"@twilio-paste/core": patch
4+
---
5+
6+
[AIChatLog] Correctly set the color of the AI icon

‎packages/paste-core/components/ai-chat-log/src/AIChatMessageAuthor.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ export const AIChatMessageAuthor = React.forwardRef<HTMLDivElement, AIChatMessag
7373
<Avatar
7474
name={children}
7575
size="sizeIcon50"
76+
color="decorative20"
7677
icon={ArtificialIntelligenceIcon}
7778
element={`${element}_BOT_AVATAR`}
7879
/>

‎packages/paste-core/components/popover/src/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ type PopoverButtonBaseProps = {
1313
};
1414

1515
export type PopoverButtonProps = PopoverButtonBaseProps &
16-
Omit<ButtonProps, "as"> & {
16+
ButtonProps & {
1717
/**
1818
* Overrides the default element name to apply unique styles with the Customization Provider
1919
*

‎packages/paste-core/components/popover/type-docs.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2203,6 +2203,13 @@
22032203
"externalProp": true,
22042204
"description": "Defines the human readable text alternative of aria-valuenow for a range widget."
22052205
},
2206+
"as": {
2207+
"type": "keyof IntrinsicElements",
2208+
"defaultValue": "'button'",
2209+
"required": false,
2210+
"externalProp": false,
2211+
"description": "The HTML tag to replace the default `<button>` tag."
2212+
},
22062213
"autoCapitalize": {
22072214
"type": "string",
22082215
"defaultValue": null,

‎packages/paste-website/src/component-examples/AIChatLogExamples.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const BasicMessage = () => {
2020
return (
2121
<AIChatLog>
2222
<AIChatMessage variant="user">
23-
<AIChatMessageAuthor aria-label="You said at 2:36pm">Gibby Radki</AIChatMessageAuthor>
23+
<AIChatMessageAuthor aria-label="You said at 2:36pm" avatarName="Gibby Radki">You</AIChatMessageAuthor>
2424
<AIChatMessageBody>
2525
I would like some information on twilio error codes for undelivered messages
2626
</AIChatMessageBody>
@@ -139,7 +139,7 @@ const AIChatLogExample = () => {
139139
return (
140140
<AIChatLog>
141141
<AIChatMessage variant="user">
142-
<AIChatMessageAuthor aria-label="You said">Gibby Radki</AIChatMessageAuthor>
142+
<AIChatMessageAuthor aria-label="You said" avatarName="Gibby Radki">You</AIChatMessageAuthor>
143143
<AIChatMessageBody>
144144
Hi, I'm getting errors codes when sending an SMS.
145145
</AIChatMessageBody>
@@ -179,8 +179,8 @@ const AIChatLogExample = () => {
179179
</AIChatMessageActionGroup>
180180
</AIChatMessage>
181181
<AIChatMessage variant="user">
182-
<AIChatMessageAuthor aria-label="You said" bot>
183-
Gibby Radki
182+
<AIChatMessageAuthor aria-label="You said" bot avatarName="Gibby Radki">
183+
You
184184
</AIChatMessageAuthor>
185185
<AIChatMessageBody>
186186
No, how do I verify it?
@@ -212,7 +212,7 @@ const aiChatFactory = ([ message, variant, metaLabel, meta ]) => {
212212
variant,
213213
content: (
214214
<AIChatMessage variant={variant}>
215-
<AIChatMessageAuthor aria-label={metaLabel + time}>{meta}</AIChatMessageAuthor>
215+
<AIChatMessageAuthor aria-label={metaLabel + time} avatarName={variant === 'bot' ? undefined : "Gibby Radki"}>{meta}</AIChatMessageAuthor>
216216
<AIChatMessageBody>
217217
{message}
218218
</AIChatMessageBody>
@@ -222,9 +222,9 @@ const aiChatFactory = ([ message, variant, metaLabel, meta ]) => {
222222
};
223223
224224
const chatTemplates = [
225-
["Hello", "user", "You said at ", "Gibby Radki"],
225+
["Hello", "user", "You said at ", "You"],
226226
["Hi there", "bot", "AI said at ", "Good Bot"],
227-
["Greetings", "user", "You said at ", "Gibby Radki"],
227+
["Greetings", "user", "You said at ", "You"],
228228
["Good to meet you", "bot", "AI said at ", "Good Bot"]
229229
];
230230
@@ -296,10 +296,10 @@ const AvatarExample = () => {
296296
return (
297297
<AIChatLog>
298298
<AIChatMessage variant="user">
299-
<AIChatMessageAuthor avatarIcon={LogoTwilioIcon} aria-label="You said">Gibby Radki</AIChatMessageAuthor>
299+
<AIChatMessageAuthor avatarIcon={LogoTwilioIcon} aria-label="You said" avatarName="Gibby Radki">You</AIChatMessageAuthor>
300300
</AIChatMessage>
301301
<AIChatMessage variant="user">
302-
<AIChatMessageAuthor avatarSrc={Logo.src} aria-label="You said">Gibby Radki</AIChatMessageAuthor>
302+
<AIChatMessageAuthor avatarSrc={Logo.src} aria-label="You said" avatarName="Gibby Radki">You</AIChatMessageAuthor>
303303
</AIChatMessage>
304304
</AIChatLog>
305305
);

‎packages/paste-website/src/pages/components/ai-chat-log/api.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export const Basic = () => {
6161
return (
6262
<AIChatLog>
6363
<AIChatMessage variant="user">
64-
<AIChatMessageAuthor aria-label="You said">Gibby Radki</AIChatMessageAuthor>
64+
<AIChatMessageAuthor aria-label="You said" avatarName="Gibby Radki">You</AIChatMessageAuthor>
6565
<AIChatMessageBody>
6666
Hi, I'm getting errors codes when sending an SMS.
6767
</AIChatMessageBody>

‎packages/paste-website/src/pages/components/ai-chat-log/index.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const getStaticProps = async () => {
8282
>
8383
{`<AIChatLog>
8484
<AIChatMessage variant="user">
85-
<AIChatMessageAuthor aria-label="You said at 2:36pm">Gibby Radki</AIChatMessageAuthor>
85+
<AIChatMessageAuthor aria-label="You said at 2:36pm" avatarName="Gibby Radki">You</AIChatMessageAuthor>
8686
<AIChatMessageBody>
8787
What does the SMS delivery error code 30003 mean?
8888
</AIChatMessageBody>
@@ -171,13 +171,13 @@ The `AIChatMessageBody` component has two sizes, `size="default"` and `size="ful
171171
>
172172
{`<AIChatLog>
173173
<AIChatMessage variant="user">
174-
<AIChatMessageAuthor aria-label="You said">Gibby Radki</AIChatMessageAuthor>
174+
<AIChatMessageAuthor aria-label="You said" avatarName="Gibby Radki">You</AIChatMessageAuthor>
175175
<AIChatMessageBody size="default">
176176
I'm a message that should be displayed in compact elements
177177
</AIChatMessageBody>
178178
</AIChatMessage>
179179
<AIChatMessage variant="user">
180-
<AIChatMessageAuthor aria-label="You said">Gibby Radki</AIChatMessageAuthor>
180+
<AIChatMessageAuthor aria-label="You said" avatarName="Gibby Radki">You</AIChatMessageAuthor>
181181
<AIChatMessageBody size="fullScreen">
182182
I'm a message that will be displayed in full screen width
183183
</AIChatMessageBody>
@@ -275,7 +275,7 @@ The SkeletonLoader lengths vary on each render to give a more natural pending me
275275

276276
### Customizing Avatar
277277

278-
`AIChatMessageAuthor` can utilize custom icons by passing an icon to the prop `avatarIcon` or an image to the `avatarSrc` prop.
278+
`AIChatMessageAuthor` can be customized by passing an icon, image, or string to the `avatarIcon`, `avatarSrc`, or `avatarName` props. [Learn more about the API](/components/ai-chat-log/api#aichatmessageauthor).
279279

280280
<LivePreview
281281
scope={{

0 commit comments

Comments
 (0)