From 0da577fc516a9b01274c77c77346a7b322004ba1 Mon Sep 17 00:00:00 2001
From: krisantrobus <55083528+krisantrobus@users.noreply.github.com>
Date: Tue, 13 Aug 2024 13:41:10 -0500
Subject: [PATCH] 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>
---
 .changeset/beige-guests-promise.md             |  6 ++++++
 .changeset/warm-suits-cough.md                 |  6 ++++++
 .../ai-chat-log/src/AIChatMessageAuthor.tsx    |  1 +
 .../paste-core/components/popover/src/types.ts |  2 +-
 .../components/popover/type-docs.json          |  7 +++++++
 .../component-examples/AIChatLogExamples.ts    | 18 +++++++++---------
 .../src/pages/components/ai-chat-log/api.mdx   |  2 +-
 .../src/pages/components/ai-chat-log/index.mdx |  8 ++++----
 8 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/beige-guests-promise.md
 create mode 100644 .changeset/warm-suits-cough.md

diff --git a/.changeset/beige-guests-promise.md b/.changeset/beige-guests-promise.md
new file mode 100644
index 0000000000..5cfe173a96
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..92bb7f9e97
--- /dev/null
+++ 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
index 6b3f229d70..b9ef3f803e 100644
--- 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
index 417b5b5ff1..d9367100d6 100644
--- 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
index 3d84791579..7d389fd96c 100644
--- 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
index fc679bd134..5c77fae426 100644
--- 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
index 7b193b8f71..5045614559 100644
--- 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
index deb44de867..49ac0088c0 100644
--- 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={{