diff --git a/.changeset/healthy-fishes-accept.md b/.changeset/healthy-fishes-accept.md new file mode 100644 index 0000000000..19bae5bd03 --- /dev/null +++ b/.changeset/healthy-fishes-accept.md @@ -0,0 +1,7 @@ +--- +"@twilio-paste/codemods": minor +"@twilio-paste/chat-composer": minor +"@twilio-paste/core": minor +--- + +[Chat Composer] add `ChatComposerActionRow` to render below `ChatComposer` diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json index efdd3af702..a9d3ad52ff 100644 --- a/packages/paste-codemods/tools/.cache/mappings.json +++ b/packages/paste-codemods/tools/.cache/mappings.json @@ -53,6 +53,7 @@ "ChartProvider": "@twilio-paste/core/chart-provider", "ChatComposer": "@twilio-paste/core/chat-composer", "ChatComposerActionGroup": "@twilio-paste/core/chat-composer", + "ChatComposerActionRow": "@twilio-paste/core/chat-composer", "ChatComposerAttachmentCard": "@twilio-paste/core/chat-composer", "ChatComposerAttachmentDescription": "@twilio-paste/core/chat-composer", "ChatComposerAttachmentGroup": "@twilio-paste/core/chat-composer", diff --git a/packages/paste-core/components/chat-composer/package.json b/packages/paste-core/components/chat-composer/package.json index 6b5bd1ff12..e092b48bd6 100644 --- a/packages/paste-core/components/chat-composer/package.json +++ b/packages/paste-core/components/chat-composer/package.json @@ -48,17 +48,20 @@ "@twilio-paste/animation-library": "^3.0.1", "@twilio-paste/box": "^11.0.1", "@twilio-paste/button": "^15.0.2", + "@twilio-paste/checkbox": "^14.0.2", "@twilio-paste/color-contrast-utils": "^5.0.0", "@twilio-paste/customization": "^9.0.1", "@twilio-paste/design-tokens": "^10.14.1", "@twilio-paste/icons": "^13.1.0", "@twilio-paste/lexical-library": "^5.1.0", + "@twilio-paste/menu": "^15.0.1", "@twilio-paste/screen-reader-only": "^14.0.1", "@twilio-paste/stack": "^9.0.1", "@twilio-paste/style-props": "^10.0.1", "@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/truncate": "^15.0.1", "@twilio-paste/types": "^7.0.1", "@types/react": "^19.0.8", diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerActionRow.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerActionRow.tsx new file mode 100644 index 0000000000..509c5a71b4 --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerActionRow.tsx @@ -0,0 +1,36 @@ +import type { BoxProps } from "@twilio-paste/box"; +import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; +import * as React from "react"; + +export interface ChatComposerActionRowProps { + children?: React.ReactNode; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * @default 'CHAT_COMPOSER_ACTION_GROUP' + * @type {BoxProps['element']} + * @memberof ChatComposerActionRowProps + */ + element?: BoxProps["element"]; +} + +export const ChatComposerActionRow = React.forwardRef( + ({ element = "CHAT_COMPOSER_ACTION_ROW", children, ...props }, ref) => ( + + {children} + + ), +); + +ChatComposerActionRow.displayName = "ChatComposerActionRow"; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx index a9e3e7c7b7..48fc4256b1 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx @@ -34,7 +34,8 @@ export const ChatComposerAttachmentGroup = React.forwardRef {children} diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx index 0e6b1b5da9..74614cd3ee 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx @@ -62,7 +62,6 @@ export const ChatComposerContainer = React.forwardRef diff --git a/packages/paste-core/components/chat-composer/src/index.tsx b/packages/paste-core/components/chat-composer/src/index.tsx index 35c7a01113..0d9a4cfc21 100644 --- a/packages/paste-core/components/chat-composer/src/index.tsx +++ b/packages/paste-core/components/chat-composer/src/index.tsx @@ -12,3 +12,5 @@ export { ChatComposerAttachmentDescription } from "./ChatComposerAttachmentDescr export type { ChatComposerAttachmentDescriptionProps } from "./ChatComposerAttachmentDescription"; export { ChatComposerAttachmentLink } from "./ChatComposerAttachmentLink"; export type { ChatComposerAttachmentLinkProps } from "./ChatComposerAttachmentLink"; +export { ChatComposerActionRow } from "./ChatComposerActionRow"; +export type { ChatComposerActionRowProps } from "./ChatComposerActionRow"; diff --git a/packages/paste-core/components/chat-composer/stories/container.stories.tsx b/packages/paste-core/components/chat-composer/stories/container.stories.tsx index 20941bbc73..ef176dee78 100644 --- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx @@ -3,22 +3,30 @@ import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; import { Checkbox } from "@twilio-paste/checkbox"; import { CustomizationProvider } from "@twilio-paste/customization"; +import { AgentIcon } from "@twilio-paste/icons/esm/AgentIcon"; import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; +import { DocumentationIcon } from "@twilio-paste/icons/esm/DocumentationIcon"; import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon"; +import { EmojiIcon } from "@twilio-paste/icons/esm/EmojiIcon"; +import { HistoryIcon } from "@twilio-paste/icons/esm/HistoryIcon"; +import { MoreIcon } from "@twilio-paste/icons/esm/MoreIcon"; import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; +import { Menu, MenuButton, MenuItem, MenuSeparator, useMenuState } from "@twilio-paste/menu"; import { useTheme } from "@twilio-paste/theme"; +import { Tooltip, useTooltipState } from "@twilio-paste/tooltip"; import * as React from "react"; +import type { ChatComposerProps } from "../src"; import { ChatComposer, ChatComposerActionGroup, + ChatComposerActionRow, ChatComposerAttachmentCard, ChatComposerAttachmentDescription, ChatComposerAttachmentGroup, ChatComposerAttachmentLink, ChatComposerContainer, } from "../src"; -import type { ChatComposerProps } from "../src"; export default { title: "Components/Chat Composer/Container", @@ -68,6 +76,144 @@ export const ContainedVariant: StoryFn = () => { ContainedVariant.storyName = "Contained Variant"; +export const ContainedVariantActionRow: StoryFn = () => { + const tooltip1 = useTooltipState(); + const tooltip2 = useTooltipState(); + const menu = useMenuState(); + + return ( + + + + + + + + + + + + + + <> + + + + + + + Chat history + + + + + Contact an agent + + + + + Quick Start Guide + + + + Privacy Policy + Terms of Service + + + + + ); +}; + +ContainedVariantActionRow.storyName = "Contained Variant with Action Row"; + +export const ContainedVariantActionRowWithAttachment: StoryFn = () => { + const tooltip1 = useTooltipState(); + const tooltip2 = useTooltipState(); + const menu = useMenuState(); + + return ( + + + + + + + + + + + + + + <> + + + + + + + Chat history + + + + + Contact an agent + + + + + Quick Start Guide + + + + Privacy Policy + Terms of Service + + + + + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB + + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB + + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB + + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB + + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB + + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB + + + + ); +}; + export const ContainedVariantWithAttachments: StoryFn = () => { return ( diff --git a/packages/paste-core/components/chat-composer/stories/logs.stories.tsx b/packages/paste-core/components/chat-composer/stories/logs.stories.tsx index db9cbafdd2..a7a5aa0033 100644 --- a/packages/paste-core/components/chat-composer/stories/logs.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/logs.stories.tsx @@ -1,6 +1,5 @@ import type { StoryFn } from "@storybook/react"; import { - AIChat, AIChatLogger, AIChatMessage, AIChatMessageActionCard, @@ -15,7 +14,7 @@ import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; import { ButtonGroup } from "@twilio-paste/button-group"; import { - Chat, + type Chat, ChatAttachment, ChatAttachmentDescription, ChatAttachmentLink, @@ -29,8 +28,13 @@ import { ChatMessageMetaItem, useChatLogger, } from "@twilio-paste/chat-log"; +import { AgentIcon } from "@twilio-paste/icons/esm/AgentIcon"; import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; +import { DocumentationIcon } from "@twilio-paste/icons/esm/DocumentationIcon"; import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon"; +import { EmojiIcon } from "@twilio-paste/icons/esm/EmojiIcon"; +import { HistoryIcon } from "@twilio-paste/icons/esm/HistoryIcon"; +import { MoreIcon } from "@twilio-paste/icons/esm/MoreIcon"; import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon"; import { ThumbsUpIcon } from "@twilio-paste/icons/esm/ThumbsUpIcon"; @@ -43,10 +47,12 @@ import { LexicalEditor, useLexicalComposerContext, } from "@twilio-paste/lexical-library"; +import { Menu, MenuButton, MenuItem, MenuSeparator, useMenuState } from "@twilio-paste/menu"; +import { Tooltip, useTooltipState } from "@twilio-paste/tooltip"; import * as React from "react"; import type { JSX } from "react"; -import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "../src"; +import { ChatComposer, ChatComposerActionGroup, ChatComposerActionRow, ChatComposerContainer } from "../src"; export default { title: "Components/Chat Composer/LogsExperience", @@ -349,6 +355,9 @@ export const AIChatLogComposer = (): React.ReactNode => { }; const editorInstanceRef = React.useRef(null); + const tooltip1 = useTooltipState(); + const tooltip2 = useTooltipState(); + const menu = useMenuState(); return ( @@ -374,9 +383,6 @@ export const AIChatLogComposer = (): React.ReactNode => { - + + + + + + + + + <> + + + + + + + Chat history + + + + + Contact an agent + + + + + Quick Start Guide + + + + Privacy Policy + Terms of Service + + + ); diff --git a/packages/paste-core/components/chat-composer/type-docs.json b/packages/paste-core/components/chat-composer/type-docs.json index 605ddfee6e..3c77e43e58 100644 --- a/packages/paste-core/components/chat-composer/type-docs.json +++ b/packages/paste-core/components/chat-composer/type-docs.json @@ -7857,5 +7857,14 @@ "externalProp": false, "description": "Responsive style prop of Size Tokens for the CSS `width` property" } + }, + "ChatComposerActionRow": { + "element": { + "type": "string", + "defaultValue": "'CHAT_COMPOSER_ACTION_GROUP'", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider" + } } } diff --git a/packages/paste-website/src/pages/components/chat-composer/index.mdx b/packages/paste-website/src/pages/components/chat-composer/index.mdx index 345de20dc4..265bfd5dee 100644 --- a/packages/paste-website/src/pages/components/chat-composer/index.mdx +++ b/packages/paste-website/src/pages/components/chat-composer/index.mdx @@ -495,9 +495,6 @@ export const ChatComposerAIChatLogExample = () => { - + + + + + + + <> + + + + + + + Chat history + + + + + Contact an agent + + + + + Quick Start Guide + + + + + Privacy Policy + + + Terms of Service + + + + ); diff --git a/yarn.lock b/yarn.lock index 72a754a179..54323c19c6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11553,17 +11553,20 @@ __metadata: "@twilio-paste/animation-library": ^3.0.1 "@twilio-paste/box": ^11.0.1 "@twilio-paste/button": ^15.0.2 + "@twilio-paste/checkbox": ^14.0.2 "@twilio-paste/color-contrast-utils": ^5.0.0 "@twilio-paste/customization": ^9.0.1 "@twilio-paste/design-tokens": ^10.14.1 "@twilio-paste/icons": ^13.1.0 "@twilio-paste/lexical-library": ^5.1.0 + "@twilio-paste/menu": ^15.0.1 "@twilio-paste/screen-reader-only": ^14.0.1 "@twilio-paste/stack": ^9.0.1 "@twilio-paste/style-props": ^10.0.1 "@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/truncate": ^15.0.1 "@twilio-paste/types": ^7.0.1 "@types/react": ^19.0.8