feat(ai-chat-log): add new components

.changeset/nasty-files-shave.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/codemods": patch
+"@twilio-paste/core": patch
+---
+
+[AI Chat Log] Add new stories

.changeset/stale-clocks-float.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/ai-chat-log": minor
+"@twilio-paste/core": minor
+---
+
+[AI Chat Log] add new `AIChatMessageSourceLink` component and new stories

packages/paste-codemods/tools/.cache/mappings.json

@@ -15,6 +15,8 @@
   "AIChatMessageAuthor": "@twilio-paste/core/ai-chat-log",
   "AIChatMessageBody": "@twilio-paste/core/ai-chat-log",
   "AIChatMessageLoading": "@twilio-paste/core/ai-chat-log",
+  "AIChatMessageSource": "@twilio-paste/core/ai-chat-log",
+  "AIChatMessageSourceLink": "@twilio-paste/core/ai-chat-log",
   "useAIChatLogger": "@twilio-paste/core/ai-chat-log",
   "Alert": "@twilio-paste/core/alert",
   "AlertDialog": "@twilio-paste/core/alert-dialog",

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

@@ -0,0 +1,37 @@
+import type { BoxElementProps } from "@twilio-paste/box";
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import type { HTMLPasteProps } from "@twilio-paste/types";
+import * as React from "react";
+
+export interface AIChatMessageSourceProps extends HTMLPasteProps<"div"> {
+  children?: React.ReactNode;
+  /**
+   * Overrides the default element name to apply unique styles with the Customization Provider
+   *
+   * @default "AI_CHAT_MESSAGE"
+   * @type {BoxProps["element"]}
+   * @memberof AIChatMessageSourceProps
+   */
+  element?: BoxElementProps["element"];
+}
+
+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>
+    );
+  },
+);
+
+AIChatMessageSource.displayName = "AIChatMessageSource";

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

@@ -0,0 +1,58 @@
+import { Anchor } from "@twilio-paste/anchor";
+import type { BoxElementProps } from "@twilio-paste/box";
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import type { HTMLPasteProps } from "@twilio-paste/types";
+import * as React from "react";
+
+export interface AIChatMessageSourceLinkProps extends HTMLPasteProps<"div"> {
+  children: React.ReactNode;
+  /**
+   * Overrides the default element name to apply unique styles with the Customization Provider
+   *
+   * @default "AI_CHAT_MESSAGE"
+   * @type {BoxProps["element"]}
+   * @memberof AIChatMessageSourceLinkProps
+   */
+  element?: BoxElementProps["element"];
+  /**
+   * The item number of the source link in the AI chat message.
+   *
+   * @type {string}
+   * @memberof AIChatMessageSourceLinkProps
+   * @example "1"
+   */
+  number: string;
+  /**
+   * The source link URL in the AI chat message.
+   *
+   * @type {string}
+   * @memberof AIChatMessageSourceLinkProps
+   * @example "https://example.com"
+   */
+  url: string;
+}
+
+export const AIChatMessageSourceLink = React.forwardRef<HTMLDivElement, AIChatMessageSourceLinkProps>(
+  ({ children, number, url, element = "AI_CHAT_MESSAGE_SOURCE_LINK", ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        element={element}
+        verticalAlign="inherit"
+        fontSize="inherit"
+        color="colorTextWeak"
+        {...safelySpreadBoxProps(props)}
+      >
+        [{number}]{" "}
+        <Box as="span" marginLeft="space10">
+          {children}
+        </Box>
+        <Anchor href={url} showExternal marginLeft="space20">
+          Source with url
+        </Anchor>
+      </Box>
+    );
+  },
+);
+
+AIChatMessageSourceLink.displayName = "AIChatMessageSourceLink";

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

@@ -21,3 +21,8 @@ export { AIChatLogger } from "./AIChatLogger";
 export type { AIChatLoggerProps } from "./AIChatLogger";
 
 export type { AIMessageVariants } from "./AIMessageContext";
+
+export { AIChatMessageSource } from "./AIChatMessageSource";
+export type { AIChatMessageSourceProps } from "./AIChatMessageSource";
+export { AIChatMessageSourceLink } from "./AIChatMessageSourceLink";
+export type { AIChatMessageSourceLinkProps } from "./AIChatMessageSourceLink";