Skip to content

Fix/button resize plus ai bug #4026

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Aug 13, 2024
Merged

Fix/button resize plus ai bug #4026

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cb0ce29
fix(ai-chat-log): correct ai color and examples naming
krisantrobus Aug 7, 2024
a421393
fix(popover): popover reset variant types correct
krisantrobus Aug 7, 2024
5c54bca
fix(ai-chat-log): added API info for author
krisantrobus Aug 7, 2024
cea782a
chore(pr): changesets and typedocs
krisantrobus Aug 8, 2024
18447cd
chore(pr): resolve build issue
krisantrobus Aug 8, 2024
597c277
chore(pr): typedocs
krisantrobus Aug 8, 2024
2f0578b
Update packages/paste-website/src/pages/components/ai-chat-log/index.mdx
krisantrobus Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/beige-guests-promise.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@twilio-paste/popover": patch
"@twilio-paste/core": patch
---

[Popover] Fix typings that were not exposing additional props on using a reset button variant
6 changes: 6 additions & 0 deletions .changeset/warm-suits-cough.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@twilio-paste/ai-chat-log": patch
"@twilio-paste/core": patch
---

[AIChatLog] Correctly set the color of the AI icon
1 change: 1 addition & 0 deletions packages/paste-core/components/ai-chat-log/src/AIChatMessageAuthor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export const AIChatMessageAuthor = React.forwardRef<HTMLDivElement, AIChatMessag
<Avatar
name={children}
size="sizeIcon50"
color="decorative20"
icon={ArtificialIntelligenceIcon}
element={`${element}_BOT_AVATAR`}
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/popover/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ type PopoverButtonBaseProps = {
};

export type PopoverButtonProps = PopoverButtonBaseProps &
Omit<ButtonProps, "as"> & {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding the Omit is messing with the underlying types. With omit it will not show additional pseudo types for reset in an IDE. Removing it fixes this.

I manually tested setting the "as" prop to be something other than button and it had no effect as button is applied in the button component it renders.

ButtonProps & {
/**
* Overrides the default element name to apply unique styles with the Customization Provider
*
Expand Down
7 changes: 7 additions & 0 deletions packages/paste-core/components/popover/type-docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2203,6 +2203,13 @@
"externalProp": true,
"description": "Defines the human readable text alternative of aria-valuenow for a range widget."
},
"as": {
"type": "keyof IntrinsicElements",
"defaultValue": "'button'",
"required": false,
"externalProp": false,
"description": "The HTML tag to replace the default `<button>` tag."
},
"autoCapitalize": {
"type": "string",
"defaultValue": null,
Expand Down
18 changes: 9 additions & 9 deletions packages/paste-website/src/component-examples/AIChatLogExamples.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const BasicMessage = () => {
return (
<AIChatLog>
<AIChatMessage variant="user">
<AIChatMessageAuthor aria-label="You said at 2:36pm">Gibby Radki</AIChatMessageAuthor>
<AIChatMessageAuthor aria-label="You said at 2:36pm" avatarName="Gibby Radki">You</AIChatMessageAuthor>
<AIChatMessageBody>
I would like some information on twilio error codes for undelivered messages
</AIChatMessageBody>
Expand Down Expand Up @@ -139,7 +139,7 @@ const AIChatLogExample = () => {
return (
<AIChatLog>
<AIChatMessage variant="user">
<AIChatMessageAuthor aria-label="You said">Gibby Radki</AIChatMessageAuthor>
<AIChatMessageAuthor aria-label="You said" avatarName="Gibby Radki">You</AIChatMessageAuthor>
<AIChatMessageBody>
Hi, I'm getting errors codes when sending an SMS.
</AIChatMessageBody>
Expand Down Expand Up @@ -179,8 +179,8 @@ const AIChatLogExample = () => {
</AIChatMessageActionGroup>
</AIChatMessage>
<AIChatMessage variant="user">
<AIChatMessageAuthor aria-label="You said" bot>
Gibby Radki
<AIChatMessageAuthor aria-label="You said" bot avatarName="Gibby Radki">
You
</AIChatMessageAuthor>
<AIChatMessageBody>
No, how do I verify it?
Expand Down Expand Up @@ -212,7 +212,7 @@ const aiChatFactory = ([ message, variant, metaLabel, meta ]) => {
variant,
content: (
<AIChatMessage variant={variant}>
<AIChatMessageAuthor aria-label={metaLabel + time}>{meta}</AIChatMessageAuthor>
<AIChatMessageAuthor aria-label={metaLabel + time} avatarName={variant === 'bot' ? undefined : "Gibby Radki"}>{meta}</AIChatMessageAuthor>
<AIChatMessageBody>
{message}
</AIChatMessageBody>
Expand All @@ -222,9 +222,9 @@ const aiChatFactory = ([ message, variant, metaLabel, meta ]) => {
};

const chatTemplates = [
["Hello", "user", "You said at ", "Gibby Radki"],
["Hello", "user", "You said at ", "You"],
["Hi there", "bot", "AI said at ", "Good Bot"],
["Greetings", "user", "You said at ", "Gibby Radki"],
["Greetings", "user", "You said at ", "You"],
["Good to meet you", "bot", "AI said at ", "Good Bot"]
];

Expand Down Expand Up @@ -296,10 +296,10 @@ const AvatarExample = () => {
return (
<AIChatLog>
<AIChatMessage variant="user">
<AIChatMessageAuthor avatarIcon={LogoTwilioIcon} aria-label="You said">Gibby Radki</AIChatMessageAuthor>
<AIChatMessageAuthor avatarIcon={LogoTwilioIcon} aria-label="You said" avatarName="Gibby Radki">You</AIChatMessageAuthor>
</AIChatMessage>
<AIChatMessage variant="user">
<AIChatMessageAuthor avatarSrc={Logo.src} aria-label="You said">Gibby Radki</AIChatMessageAuthor>
<AIChatMessageAuthor avatarSrc={Logo.src} aria-label="You said" avatarName="Gibby Radki">You</AIChatMessageAuthor>
</AIChatMessage>
</AIChatLog>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-website/src/pages/components/ai-chat-log/api.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const Basic = () => {
return (
<AIChatLog>
<AIChatMessage variant="user">
<AIChatMessageAuthor aria-label="You said">Gibby Radki</AIChatMessageAuthor>
<AIChatMessageAuthor aria-label="You said" avatarName="Gibby Radki">You</AIChatMessageAuthor>
<AIChatMessageBody>
Hi, I'm getting errors codes when sending an SMS.
</AIChatMessageBody>
Expand Down
8 changes: 4 additions & 4 deletions packages/paste-website/src/pages/components/ai-chat-log/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export const getStaticProps = async () => {
>
{`<AIChatLog>
<AIChatMessage variant="user">
<AIChatMessageAuthor aria-label="You said at 2:36pm">Gibby Radki</AIChatMessageAuthor>
<AIChatMessageAuthor aria-label="You said at 2:36pm" avatarName="Gibby Radki">You</AIChatMessageAuthor>
<AIChatMessageBody>
What does the SMS delivery error code 30003 mean?
</AIChatMessageBody>
Expand Down Expand Up @@ -171,13 +171,13 @@ The `AIChatMessageBody` component has two sizes, `size="default"` and `size="ful
>
{`<AIChatLog>
<AIChatMessage variant="user">
<AIChatMessageAuthor aria-label="You said">Gibby Radki</AIChatMessageAuthor>
<AIChatMessageAuthor aria-label="You said" avatarName="Gibby Radki">You</AIChatMessageAuthor>
<AIChatMessageBody size="default">
I'm a message that should be displayed in compact elements
</AIChatMessageBody>
</AIChatMessage>
<AIChatMessage variant="user">
<AIChatMessageAuthor aria-label="You said">Gibby Radki</AIChatMessageAuthor>
<AIChatMessageAuthor aria-label="You said" avatarName="Gibby Radki">You</AIChatMessageAuthor>
<AIChatMessageBody size="fullScreen">
I'm a message that will be displayed in full screen width
</AIChatMessageBody>
Expand Down Expand Up @@ -275,7 +275,7 @@ The SkeletonLoader lengths vary on each render to give a more natural pending me

### Customizing Avatar

`AIChatMessageAuthor` can utilize custom icons by passing an icon to the prop `avatarIcon` or an image to the `avatarSrc` prop.
`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).

<LivePreview
scope={{
Expand Down
Loading