feat(docs): udpate docs and changesets

.changeset/tough-moles-film.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/ai-chat-log": minor
+"@twilio-paste/core": minor
+---
+
+[AI Chat Log] added optional typewriter animation to AIChatMessageBody

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

@@ -10,8 +10,6 @@ export { AIChatMessageActionCard } from "./AIChatMessageActionCard";
 export type { AIChatMessageActionCardProps } from "./AIChatMessageActionCard";
 export { AIChatMessageLoading } from "./AIChatMessageLoading";
 export type { AIChatMessageLoadingProps } from "./AIChatMessageLoading";
-export { AIChatMessageBodyTypeWriter } from "./AIChatMessageBodyTypeWriter";
-export type { AIChatMessageBodyTypeWriterProps } from "./AIChatMessageBodyTypeWriter";
 
 export { AIChatLog } from "./AIChatLog";
 export type { AIChatLogProps } from "./AIChatLog";

packages/paste-core/components/ai-chat-log/type-docs.json

@@ -3186,6 +3186,13 @@
       "required": false,
       "externalProp": true
     },
+    "animated": {
+      "type": "boolean",
+      "defaultValue": false,
+      "required": false,
+      "externalProp": false,
+      "description": "Whether the text should be animated with type writer effect"
+    },
     "aria-activedescendant": {
       "type": "string",
       "defaultValue": null,

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

@@ -712,3 +712,54 @@ const SystemError = () => {
 render(
   <SystemError />
 )`.trim();
+
+export const animatedBotWithFeedback = `
+const AnimatedMessageWithFeedback = () => {
+  const [animated, setAnimated] = React.useState(true)
+
+  const restart = () => {
+    setAnimated(false)
+    setTimeout(() => {
+      setAnimated(true)
+    }, 100)
+  }
+
+  return (
+    <>
+      <Button variant="secondary" onClick={restart}>
+        <ResetIcon decorative={false} size="sizeIcon10" title="reset" />{" "}Restart
+      </Button>
+      <AIChatLog>
+        <AIChatMessage variant="bot">
+          <AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
+          <AIChatMessageBody animated={animated}>
+            I found multiple solutions for the issue with your environment variable, <InlineCode>TWILIO_AUTH_TOKEN</InlineCode>. Other helpful resources can be found at <Anchor href="#" showExternal>Twilio API Docs</Anchor>.
+          </AIChatMessageBody>
+          <AIChatMessageActionGroup>
+            <AIChatMessageActionCard aria-label="Feedback form">
+              Is this helpful?
+              <Button variant="reset" size="reset" aria-label="this is a helpful response">
+                <ThumbsUpIcon decorative={false} title="like result" />
+              </Button>
+              <Button variant="reset" size="reset">
+                <ThumbsDownIcon decorative={false} title="dislike result" aria-label="this is not a helpful response" />
+              </Button>
+            </AIChatMessageActionCard>
+            <AIChatMessageActionCard aria-label="Rewrite and copy buttons">
+              <Button variant="reset" size="reset">
+                <RefreshIcon decorative={true}/> Rewrite
+              </Button>
+              <Button variant="reset" size="reset">
+                <CopyIcon decorative={true}/> Copy
+              </Button>
+            </AIChatMessageActionCard>
+          </AIChatMessageActionGroup>
+        </AIChatMessage>
+      </AIChatLog>
+    </>
+  );
+};
+
+render(
+  <AnimatedMessageWithFeedback />
+)`.trim();

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

@@ -22,6 +22,7 @@ import { Button } from "@twilio-paste/button";
 import { ButtonGroup } from "@twilio-paste/button-group";
 import { HelpText } from "@twilio-paste/help-text";
 import { CopyIcon } from "@twilio-paste/icons/esm/CopyIcon";
+import { ResetIcon } from "@twilio-paste/icons/esm/ResetIcon";
 import { LogoTwilioIcon } from "@twilio-paste/icons/esm/LogoTwilioIcon";
 import { RefreshIcon } from "@twilio-paste/icons/esm/RefreshIcon";
 import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon";
@@ -30,6 +31,7 @@ import { Paragraph } from "@twilio-paste/paragraph";
 import { Stack } from "@twilio-paste/stack";
 import { uid } from "@twilio-paste/uid-library";
 
+
 import Logo from "../../../assets/logo.svg";
 import { SidebarCategoryRoutes } from "../../../constants";
 
@@ -58,11 +60,14 @@ import {
   messageGenerationError,
   sendingMessageError,
   systemError,
+  animatedBotWithFeedback
 } from "../../../component-examples/AIChatLogExamples";
 import ComponentPageLayout from "../../../layouts/ComponentPageLayout";
 import { getFeature, getNavigationData } from "../../../utils/api";
 import { Text } from "@twilio-paste/text";
 import { Alert } from "@twilio-paste/alert";
+import { Switch } from "@twilio-paste/switch";
+import { InlineCode } from "@twilio-paste/inline-code";
 
 export default ComponentPageLayout;
 
@@ -201,6 +206,33 @@ The `AIChatMessageBody` component has two sizes, `size="default"` and `size="ful
 </AIChatLog>`}
 </LivePreview>
 
+### Messages with animation
+The `AIChatMessageBody` component has an optional `animate` prop that can be used to apply a typewriter animation to the text. .
+
+<LivePreview
+  scope={{
+    AIChatLog,
+    AIChatMessage,
+    AIChatMessageAuthor,
+    AIChatMessageBody,
+    AIChatMessageActionCard,
+    AIChatMessageActionGroup,
+    Button,
+    ThumbsUpIcon,
+    ThumbsDownIcon,
+    CopyIcon,
+    RefreshIcon,
+    Button,
+    ResetIcon,    
+    Anchor,
+    InlineCode
+  }}
+  language="jsx"
+  noInline
+>
+  {animatedBotWithFeedback}
+</LivePreview>
+
 ### Message with Actions
 
 Message actions can be used to provide quick responses or actions to the user.