Skip to content

Commit

Permalink
chore: checkpoint
Browse files Browse the repository at this point in the history
  • Loading branch information
TheSisb committed May 9, 2024
1 parent b22cdd1 commit 5c21b5b
Show file tree
Hide file tree
Showing 27 changed files with 424 additions and 154 deletions.
1 change: 1 addition & 0 deletions .codesandbox/ci.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"/packages/paste-icons",
"/packages/paste-core/core-bundle",
"/packages/paste-core/components/account-switcher",
"/packages/paste-core/components/ai-chat-log",
"/packages/paste-core/components/alert",
"/packages/paste-core/components/alert-dialog",
"/packages/paste-core/components/anchor",
Expand Down
7 changes: 7 additions & 0 deletions packages/paste-codemods/tools/.cache/mappings.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@
"AccountSwitcherItemRadio": "@twilio-paste/core/account-switcher",
"AccountSwitcherSeparator": "@twilio-paste/core/account-switcher",
"useAccountSwitcherState": "@twilio-paste/core/account-switcher",
"AIChatLog": "@twilio-paste/core/ai-chat-log",
"AIChatLogger": "@twilio-paste/core/ai-chat-log",
"AIChatMessage": "@twilio-paste/core/ai-chat-log",
"AIChatMessageContent": "@twilio-paste/core/ai-chat-log",
"AIChatMessageMeta": "@twilio-paste/core/ai-chat-log",
"AIChatMessageMetaItem": "@twilio-paste/core/ai-chat-log",
"useAIChatLogger": "@twilio-paste/core/ai-chat-log",
"Alert": "@twilio-paste/core/alert",
"AlertDialog": "@twilio-paste/core/alert-dialog",
"Anchor": "@twilio-paste/core/anchor",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "@twilio-paste/ai-log",
"name": "@twilio-paste/ai-chat-log",
"version": "0.0.0",
"category": "data display",
"status": "production",
Expand Down Expand Up @@ -53,7 +53,7 @@
"@types/react-dom": "^18.0.10",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"tsx": "^3.12.10",
"tsx": "^4.0.0",
"typescript": "^4.9.4"
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export interface AIChatLogProps extends HTMLPasteProps<"div"> {
}

export const AIChatLog = React.forwardRef<HTMLDivElement, AIChatLogProps>(
({ element = "AI_LOG", children, ...props }, ref) => {
({ element = "AI_CHAT_LOG", children, ...props }, ref) => {
return (
<Box role="log" padding="space70" element={element} ref={ref} {...safelySpreadBoxProps(props)}>
<Box
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export interface AIChatMessageProps extends HTMLPasteProps<"div"> {
}

export const AIChatMessage = React.forwardRef<HTMLDivElement, AIChatMessageProps>(
({ children, element = "CHAT_MESSAGE", ...props }, ref) => {
({ children, element = "AI_CHAT_MESSAGE", ...props }, ref) => {
return (
<Box
role="listitem"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@ import type { BoxElementProps } from "@twilio-paste/box";
import type { HTMLPasteProps } from "@twilio-paste/types";
import * as React from "react";

export interface AIChatMessageMetaItemProps extends HTMLPasteProps<"div"> {
export interface AIChatMessageActionsProps extends HTMLPasteProps<"div"> {
children: NonNullable<React.ReactNode>;
variant: "author" | "timestamp";
/**
* Overrides the default element name to apply unique styles with the Customization Provider
*
Expand All @@ -16,18 +15,10 @@ export interface AIChatMessageMetaItemProps extends HTMLPasteProps<"div"> {
element?: BoxElementProps["element"];
}

const variantStyles = {
author: {
color: "colorText",
lineHeight: "lineHeight50",
fontSize: "fontSize40",
},
timestamp: {},
};

export const AIChatMessageMetaItem = React.forwardRef<HTMLDivElement, AIChatMessageMetaItemProps>(
({ children, element = "CHAT_MESSAGE_META_ITEM", ...props }, ref) => (
export const AIChatMessageActions = React.forwardRef<HTMLDivElement, AIChatMessageActionsProps>(
({ children, element = "AI_CHAT_MESSAGE_ACTIONS", ...props }, ref) => (
<Box
{...safelySpreadBoxProps(props)}
ref={ref}
element={element}
display="flex"
Expand All @@ -36,12 +27,10 @@ export const AIChatMessageMetaItem = React.forwardRef<HTMLDivElement, AIChatMess
color="colorText"
lineHeight="lineHeight50"
fontSize="fontSize40"
{...variantStyles[props.variant]}
{...safelySpreadBoxProps(props)}
>
{children}
</Box>
),
);

AIChatMessageMetaItem.displayName = "AIChatMessageMetaItem";
AIChatMessageActions.displayName = "AIChatMessageActions";
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
import type { BoxElementProps } from "@twilio-paste/box";
import type { ThemeShape } from "@twilio-paste/theme";
import type { HTMLPasteProps } from "@twilio-paste/types";
import * as React from "react";

const Variants = {
default: {
fontSize: "fontSize30" as ThemeShape["fontSizes"],
lineHeight: "lineHeight30" as ThemeShape["lineHeights"],
},
fullScreen: {
fontSize: "fontSize40" as ThemeShape["fontSizes"],
lineHeight: "lineHeight40" as ThemeShape["lineHeights"],
},
};

export interface AIChatMessageBodyProps extends HTMLPasteProps<"div"> {
children?: React.ReactNode;
/**
* Overrides the default element name to apply unique styles with the Customization Provider
*
* @default "CHAT_BUBBLE"
* @type {BoxProps["element"]}
* @memberof AIChatBubbleProps
*/
element?: BoxElementProps["element"];
/**
* Override the font size for full screen experiences.
*
* @default "CHAT_BUBBLE"
* @type {"default" | "fullScreen"}
* @memberof AIChatBubbleProps
*/
variant?: "default" | "fullScreen";
}

export const AIChatMessageBody = React.forwardRef<HTMLDivElement, AIChatMessageBodyProps>(
({ children, variant = "default", element = "AI_CHAT_MESSAGE_BODY", ...props }, ref) => {
return (
<Box
{...safelySpreadBoxProps(props)}
{...Variants[variant]}
display="inline-block"
color="colorText"
wordWrap="break-word"
maxWidth="100%"
minWidth={0}
element={element}
ref={ref}
whiteSpace="pre-wrap"
>
{children}
</Box>
);
},
);

AIChatMessageBody.displayName = "AIChatMessageBody";
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
import type { BoxElementProps } from "@twilio-paste/box";
import { Button } from "@twilio-paste/button";
import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon";
import { ThumbsUpIcon } from "@twilio-paste/icons/esm/ThumbsUpIcon";
import type { HTMLPasteProps } from "@twilio-paste/types";
import * as React from "react";

export interface AIChatMessageFeedbackProps extends HTMLPasteProps<"div"> {
children?: never;
/**
* Overrides the default element name to apply unique styles with the Customization Provider
*
* @default "CHAT_MESSAGE_META_ITEM"
* @type {BoxProps["element"]}
* @memberof AIChatMessageMetaItemProps
*/
element?: BoxElementProps["element"];
label?: string;
i18nLikeLabel?: string;
i18nDislikeLabel?: string;
onLike: () => void;
onDislike: () => void;
}

export const AIChatMessageFeedback = React.forwardRef<HTMLDivElement, AIChatMessageFeedbackProps>(
(
{
label = "Is this helpful?",
i18nLikeLabel = "Like result",
i18nDislikeLabel = "Dislike result",
onLike,
onDislike,
element = "AI_CHAT_MESSAGE_FEEDBACK",
...props
},
ref,
) => (
<Box
{...safelySpreadBoxProps(props)}
ref={ref}
element={element}
display="inline-flex"
alignItems="flex-start"
columnGap="space30"
marginTop="space40"
color="colorTextIcon"
lineHeight="lineHeight20"
fontSize="fontSize20"
backgroundColor="colorBackgroundBody"
boxShadow="shadowBorderWeaker"
borderRadius="borderRadius30"
paddingX="space30"
paddingY="space20"
>
<span>{label}</span>
<Button variant="reset" size="reset" onClick={onLike}>
<ThumbsUpIcon decorative={false} title={i18nLikeLabel} />
</Button>
<Button variant="reset" size="reset" onClick={onDislike}>
<ThumbsDownIcon decorative={false} title={i18nDislikeLabel} />
</Button>
</Box>
),
);

AIChatMessageFeedback.displayName = "AIChatMessageFeedback";
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
import type { BoxElementProps } from "@twilio-paste/box";
import { Button } from "@twilio-paste/button";
import { StopIcon } from "@twilio-paste/icons/esm/StopIcon";
import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only";
import { SkeletonLoader } from "@twilio-paste/skeleton-loader";
import type { HTMLPasteProps } from "@twilio-paste/types";
import * as React from "react";

const clampedRandom = (min: number, max: number): number => {
return Math.min(Math.max(min, Math.random() * max), max);
};
export interface AIChatMessageLoadingProps extends HTMLPasteProps<"div"> {
children?: never;
/**
* Overrides the default element name to apply unique styles with the Customization Provider
*
* @default "CHAT_MESSAGE"
* @type {BoxProps["element"]}
* @memberof ChatMessageProps
*/
element?: BoxElementProps["element"];
onStopLoading?: () => void;
}

export const AIChatMessageLoading = React.forwardRef<HTMLDivElement, AIChatMessageLoadingProps>(
({ onStopLoading, element = "AI_CHAT_MESSAGE_LOADING", ...props }, ref) => {
const widths = React.useRef([clampedRandom(40, 75), clampedRandom(65, 100), clampedRandom(55, 80)]).current;

return (
<Box
{...safelySpreadBoxProps(props)}
ref={ref}
element={element}
role="listitem"
display="flex"
flexDirection="column"
rowGap="space40"
>
<SkeletonLoader width={`${widths[0]}%`} height="20px" />
<SkeletonLoader width={`${widths[1]}%`} height="20px" />
<SkeletonLoader width={`${widths[2]}%`} height="20px" />
{onStopLoading ? (
<Box display="flex" justifyContent="center">
<Button variant="secondary" size="rounded_small" onClick={onStopLoading}>
<StopIcon decorative={true} />
Stop generating <ScreenReaderOnly>AI response</ScreenReaderOnly>
</Button>
</Box>
) : null}
</Box>
);
},
);

AIChatMessageLoading.displayName = "AIChatMessageLoading";
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export interface AIChatMessageMetaProps extends HTMLPasteProps<"div"> {
}

export const AIChatMessageMeta = React.forwardRef<HTMLDivElement, AIChatMessageMetaProps>(
({ children, element = "CHAT_MESSAGE_META", ...props }, ref) => {
({ children, element = "AI_CHAT_MESSAGE_META", ...props }, ref) => {
return (
<Box
{...safelySpreadBoxProps(props)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,14 @@ export { AIChatMessage } from "./AIChatMessage";
export type { AIChatMessageProps } from "./AIChatMessage";
export { AIChatMessageMeta } from "./AIChatMessageMeta";
export type { AIChatMessageMetaProps } from "./AIChatMessageMeta";
export { AIChatMessageMetaItem } from "./AIChatMessageMetaItem";
export type { AIChatMessageMetaItemProps } from "./AIChatMessageMetaItem";
export { AIChatMessageContent } from "./AIChatMessageContent";
export type { AIChatMessageContentProps } from "./AIChatMessageContent";
export { AIChatMessageBody } from "./AIChatMessageBody";
export type { AIChatMessageBodyProps } from "./AIChatMessageBody";
export { AIChatMessageActions } from "./AIChatMessageActions";
export type { AIChatMessageActionsProps } from "./AIChatMessageActions";
export { AIChatMessageFeedback } from "./AIChatMessageFeedback";
export type { AIChatMessageFeedbackProps } from "./AIChatMessageFeedback";
export { AIChatMessageLoading } from "./AIChatMessageLoading";
export type { AIChatMessageLoadingProps } from "./AIChatMessageLoading";

export { AIChatLog } from "./AIChatLog";
export type { AIChatLogProps } from "./AIChatLog";
Expand Down
Loading

0 comments on commit 5c21b5b

Please sign in to comment.