feat(ai-chat-log): add footnote

Author: PixeledCode

packages/paste-core/components/ai-chat-log/package.json

@@ -33,7 +33,10 @@
     "@twilio-paste/color-contrast-utils": "^5.0.0",
     "@twilio-paste/customization": "^9.0.0",
     "@twilio-paste/design-tokens": "^10.3.0",
+    "@twilio-paste/footnote": "^0.0.0",
     "@twilio-paste/icons": "^13.0.0",
+    "@twilio-paste/keyboard-key": "^2.0.0",
+    "@twilio-paste/reakit-library": "^3.0.0",
     "@twilio-paste/screen-reader-only": "^14.0.0",
     "@twilio-paste/separator": "^9.0.1",
     "@twilio-paste/skeleton-loader": "^7.0.0",
@@ -43,6 +46,8 @@
     "@twilio-paste/styling-library": "^4.0.0",
     "@twilio-paste/text": "^11.0.0",
     "@twilio-paste/theme": "^12.0.0",
+    "@twilio-paste/tooltip": "^13.0.1",
+    "@twilio-paste/tooltip-primitive": "^3.0.0",
     "@twilio-paste/types": "^7.0.0",
     "@twilio-paste/uid-library": "^3.0.0",
     "@types/react": "^17.0.2 || ^18.0.27 || ^19.0.0",
@@ -59,7 +64,10 @@
     "@twilio-paste/color-contrast-utils": "^5.0.0",
     "@twilio-paste/customization": "^9.0.1",
     "@twilio-paste/design-tokens": "^10.15.0",
+    "@twilio-paste/footnote": "^1.0.0",
     "@twilio-paste/icons": "^13.0.1",
+    "@twilio-paste/keyboard-key": "^2.0.0",
+    "@twilio-paste/reakit-library": "^3.0.0",
     "@twilio-paste/screen-reader-only": "^14.0.1",
     "@twilio-paste/separator": "^9.0.1",
     "@twilio-paste/skeleton-loader": "^7.0.1",
@@ -69,6 +77,8 @@
     "@twilio-paste/styling-library": "^4.0.1",
     "@twilio-paste/text": "^11.0.1",
     "@twilio-paste/theme": "^12.0.1",
+    "@twilio-paste/tooltip": "^13.0.1",
+    "@twilio-paste/tooltip-primitive": "^3.0.0",
     "@twilio-paste/types": "^7.0.1",
     "@twilio-paste/uid-library": "^3.0.1",
     "@types/react": "^19.0.8",

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

@@ -1,14 +1,15 @@
 import type { BoxElementProps } from "@twilio-paste/box";
 import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import { Footnote } from "@twilio-paste/footnote";
 import type { HTMLPasteProps } from "@twilio-paste/types";
 import * as React from "react";
 
 export interface AIChatMessageSourceProps extends HTMLPasteProps<"div"> {
-  children?: React.ReactNode;
+  children: string;
   /**
    * Overrides the default element name to apply unique styles with the Customization Provider
    *
-   * @default "AI_CHAT_MESSAGE"
+   * @default "AI_CHAT_MESSAGE_SOURCE"
    * @type {BoxProps["element"]}
    * @memberof AIChatMessageSourceProps
    */
@@ -18,17 +19,8 @@ export interface AIChatMessageSourceProps extends HTMLPasteProps<"div"> {
 export const AIChatMessageSource = React.forwardRef<HTMLDivElement, AIChatMessageSourceProps>(
   ({ children, element = "AI_CHAT_MESSAGE_SOURCE", ...props }, ref) => {
     return (
-      <Box
-        as="sup"
-        ref={ref}
-        element={element}
-        verticalAlign="inherit"
-        fontSize="inherit"
-        paddingX="space10"
-        color="colorTextWeak"
-        {...safelySpreadBoxProps(props)}
-      >
-        [{children}]
+      <Box as="span" ref={ref} element={element} paddingX="space10" {...safelySpreadBoxProps(props)}>
+        <Footnote element={`${element}_FOOTNOTE`}>{children}</Footnote>
       </Box>
     );
   },

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

@@ -9,7 +9,7 @@ export interface AIChatMessageSourceLinkProps extends HTMLPasteProps<"div"> {
   /**
    * Overrides the default element name to apply unique styles with the Customization Provider
    *
-   * @default "AI_CHAT_MESSAGE"
+   * @default "AI_CHAT_MESSAGE_SOURCE_LINK"
    * @type {BoxProps["element"]}
    * @memberof AIChatMessageSourceLinkProps
    */

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

@@ -15858,7 +15858,7 @@
     },
     "element": {
       "type": "string",
-      "defaultValue": "AI_CHAT_MESSAGE",
+      "defaultValue": "AI_CHAT_MESSAGE_SOURCE",
       "required": false,
       "externalProp": false,
       "description": "Overrides the default element name to apply unique styles with the Customization Provider"
@@ -17573,7 +17573,7 @@
     },
     "element": {
       "type": "string",
-      "defaultValue": "AI_CHAT_MESSAGE",
+      "defaultValue": "AI_CHAT_MESSAGE_SOURCE_LINK",
       "required": false,
       "externalProp": false,
       "description": "Overrides the default element name to apply unique styles with the Customization Provider"

packages/paste-core/components/footnote/src/Footnote.tsx

@@ -39,6 +39,9 @@ const footnoteStyles: BoxStyleProps = {
   paddingX: "space30",
   borderRadius: "borderRadiusCircle",
   height: "sizeIcon40",
+  minWidth: "sizeIcon40",
+  textAlign: "center",
+  verticalAlign: "middle",
   flexShrink: 0,
   color: "colorTextWeak",
   fontSize: "fontSize20",

yarn.lock

@@ -10803,6 +10803,7 @@ __metadata:
     "@twilio-paste/color-contrast-utils": ^5.0.0
     "@twilio-paste/customization": ^9.0.1
     "@twilio-paste/design-tokens": ^10.15.0
+    "@twilio-paste/footnote": ^1.0.0
     "@twilio-paste/icons": ^13.0.1
     "@twilio-paste/screen-reader-only": ^14.0.1
     "@twilio-paste/separator": ^9.0.1
@@ -10830,6 +10831,7 @@ __metadata:
     "@twilio-paste/color-contrast-utils": ^5.0.0
     "@twilio-paste/customization": ^9.0.0
     "@twilio-paste/design-tokens": ^10.3.0
+    "@twilio-paste/footnote": ^0.0.0
     "@twilio-paste/icons": ^13.0.0
     "@twilio-paste/screen-reader-only": ^14.0.0
     "@twilio-paste/separator": ^9.0.1