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 <[email protected]> --------- Co-authored-by: Sarah <[email protected]>
twilio-labs · Aug 13, 2024 · 0da577f · 0da577f
1 parent fb4cbc5
commit 0da577f
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 15 deletions.
diff --git a/.changeset/beige-guests-promise.md b/.changeset/beige-guests-promise.md
@@ -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
diff --git a/.changeset/warm-suits-cough.md b/.changeset/warm-suits-cough.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/ai-chat-log": patch
+"@twilio-paste/core": patch
+---
+
+[AIChatLog] Correctly set the color of the AI icon
diff --git a/packages/paste-core/components/ai-chat-log/src/AIChatMessageAuthor.tsx b/packages/paste-core/components/ai-chat-log/src/AIChatMessageAuthor.tsx
@@ -73,6 +73,7 @@ export const AIChatMessageAuthor = React.forwardRef<HTMLDivElement, AIChatMessag
           <Avatar
             name={children}
             size="sizeIcon50"
+            color="decorative20"
             icon={ArtificialIntelligenceIcon}
             element={`${element}_BOT_AVATAR`}
           />

diff --git a/packages/paste-core/components/popover/src/types.ts b/packages/paste-core/components/popover/src/types.ts
@@ -13,7 +13,7 @@ type PopoverButtonBaseProps = {
 };
 
 export type PopoverButtonProps = PopoverButtonBaseProps &
-  Omit<ButtonProps, "as"> & {
+  ButtonProps & {
     /**
      * Overrides the default element name to apply unique styles with the Customization Provider
      *

diff --git a/packages/paste-core/components/popover/type-docs.json b/packages/paste-core/components/popover/type-docs.json
@@ -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,

diff --git a/packages/paste-website/src/component-examples/AIChatLogExamples.ts b/packages/paste-website/src/component-examples/AIChatLogExamples.ts
@@ -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>
@@ -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>
@@ -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?
@@ -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>
@@ -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"]
 ];
 
@@ -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>
   );

diff --git a/packages/paste-website/src/pages/components/ai-chat-log/api.mdx b/packages/paste-website/src/pages/components/ai-chat-log/api.mdx
@@ -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>

diff --git a/packages/paste-website/src/pages/components/ai-chat-log/index.mdx b/packages/paste-website/src/pages/components/ai-chat-log/index.mdx
@@ -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>
@@ -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>
@@ -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={{