Chat composer update

.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`

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",

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",

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<HTMLDivElement, ChatComposerActionRowProps>(
+  ({ element = "CHAT_COMPOSER_ACTION_ROW", children, ...props }, ref) => (
+    <Box
+      {...safelySpreadBoxProps(props)}
+      element={element}
+      ref={ref}
+      gridRow="2"
+      gridColumn="1/-1"
+      display="inline-flex"
+      alignSelf="end"
+      role="group"
+      columnGap="space30"
+      padding="space30"
+      paddingRight="space20"
+    >
+      {children}
+    </Box>
+  ),
+);
+
+ChatComposerActionRow.displayName = "ChatComposerActionRow";

packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx

@@ -34,7 +34,8 @@ export const ChatComposerAttachmentGroup = React.forwardRef<HTMLDivElement, Chat
         {...safelySpreadBoxProps(props)}
         element={element}
         ref={ref}
-        gridArea="2/1/3/3"
+        gridRow="3"
+        gridColumn="1/-1"
         role="group"
         display="grid"
         gridTemplateColumns={getColumnStyles()}
@@ -43,6 +44,7 @@ export const ChatComposerAttachmentGroup = React.forwardRef<HTMLDivElement, Chat
         paddingBottom="space30"
         paddingX="space10"
         rowGap="space40"
+        marginTop="space50"
       >
         {children}
       </Box>

packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx

@@ -62,7 +62,6 @@ export const ChatComposerContainer = React.forwardRef<HTMLDivElement, ChatCompos
           padding="space30"
           maxHeight={maxHeight}
           overflowY="auto"
-          rowGap="space50"
           width="100%"
           {...Styles[variant]}
         >

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";

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 (
+    <ChatComposerContainer variant="contained">
+      <ChatComposer config={defaultConfig} ariaLabel="Basic chat composer" placeholder="Type here..." />
+      <ChatComposerActionGroup>
+        <Button variant="primary_icon" size="reset">
+          <SendIcon decorative={false} title="Send" />
+        </Button>
+      </ChatComposerActionGroup>
+      <ChatComposerActionRow>
+        <Tooltip state={tooltip1} text="Attach">
+          <Button variant="secondary" size="circle_small">
+            <AttachIcon decorative={false} title="attach a file to your message" />
+          </Button>
+        </Tooltip>
+        <Tooltip state={tooltip2} text="Emoji">
+          <Button variant="secondary" size="circle_small">
+            <EmojiIcon decorative={false} title="Chat history" />
+          </Button>
+        </Tooltip>
+
+        <>
+          <MenuButton {...menu} variant="secondary" size="circle_small">
+            <MoreIcon decorative={false} title="More actions" />
+          </MenuButton>
+          <Menu {...menu} aria-label="Preferences">
+            <MenuItem {...menu}>
+              <Box display="flex" alignItems="center" columnGap="space20">
+                <HistoryIcon decorative color="colorTextIcon" /> Chat history
+              </Box>
+            </MenuItem>
+            <MenuItem {...menu}>
+              <Box display="flex" alignItems="center" columnGap="space20">
+                <AgentIcon decorative color="colorTextIcon" /> Contact an agent
+              </Box>
+            </MenuItem>
+            <MenuItem {...menu}>
+              <Box display="flex" alignItems="center" columnGap="space20">
+                <DocumentationIcon decorative color="colorTextIcon" /> Quick Start Guide
+              </Box>
+            </MenuItem>
+            <MenuSeparator {...menu} />
+            <MenuItem {...menu}>Privacy Policy</MenuItem>
+            <MenuItem {...menu}>Terms of Service</MenuItem>
+          </Menu>
+        </>
+      </ChatComposerActionRow>
+    </ChatComposerContainer>
+  );
+};
+
+ContainedVariantActionRow.storyName = "Contained Variant with Action Row";
+
+export const ContainedVariantActionRowWithAttachment: StoryFn = () => {
+  const tooltip1 = useTooltipState();
+  const tooltip2 = useTooltipState();
+  const menu = useMenuState();
+
+  return (
+    <ChatComposerContainer variant="contained">
+      <ChatComposer config={defaultConfig} ariaLabel="Basic chat composer" placeholder="Type here..." />
+      <ChatComposerActionGroup>
+        <Button variant="primary_icon" size="reset">
+          <SendIcon decorative={false} title="Send" />
+        </Button>
+      </ChatComposerActionGroup>
+      <ChatComposerActionRow>
+        <Tooltip state={tooltip1} text="Attach">
+          <Button variant="secondary" size="circle_small">
+            <AttachIcon decorative={false} title="attach a file to your message" />
+          </Button>
+        </Tooltip>
+        <Tooltip state={tooltip2} text="Emoji">
+          <Button variant="secondary" size="circle_small">
+            <EmojiIcon decorative={false} title="Chat history" />
+          </Button>
+        </Tooltip>
+
+        <>
+          <MenuButton {...menu} variant="secondary" size="circle_small">
+            <MoreIcon decorative={false} title="More actions" />
+          </MenuButton>
+          <Menu {...menu} aria-label="Preferences">
+            <MenuItem {...menu}>
+              <Box display="flex" alignItems="center" columnGap="space20">
+                <HistoryIcon decorative color="colorTextIcon" /> Chat history
+              </Box>
+            </MenuItem>
+            <MenuItem {...menu}>
+              <Box display="flex" alignItems="center" columnGap="space20">
+                <AgentIcon decorative color="colorTextIcon" /> Contact an agent
+              </Box>
+            </MenuItem>
+            <MenuItem {...menu}>
+              <Box display="flex" alignItems="center" columnGap="space20">
+                <DocumentationIcon decorative color="colorTextIcon" /> Quick Start Guide
+              </Box>
+            </MenuItem>
+            <MenuSeparator {...menu} />
+            <MenuItem {...menu}>Privacy Policy</MenuItem>
+            <MenuItem {...menu}>Terms of Service</MenuItem>
+          </Menu>
+        </>
+      </ChatComposerActionRow>
+      <ChatComposerAttachmentGroup>
+        <ChatComposerAttachmentCard onDismiss={() => {}} attachmentIcon={<DownloadIcon decorative />}>
+          <ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
+          <ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
+        </ChatComposerAttachmentCard>
+        <ChatComposerAttachmentCard onDismiss={() => {}} attachmentIcon={<DownloadIcon decorative />}>
+          <ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
+          <ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
+        </ChatComposerAttachmentCard>
+        <ChatComposerAttachmentCard onDismiss={() => {}} attachmentIcon={<DownloadIcon decorative />}>
+          <ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
+          <ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
+        </ChatComposerAttachmentCard>
+        <ChatComposerAttachmentCard onDismiss={() => {}} attachmentIcon={<DownloadIcon decorative />}>
+          <ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
+          <ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
+        </ChatComposerAttachmentCard>
+        <ChatComposerAttachmentCard onDismiss={() => {}} attachmentIcon={<DownloadIcon decorative />}>
+          <ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
+          <ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
+        </ChatComposerAttachmentCard>
+        <ChatComposerAttachmentCard onDismiss={() => {}} attachmentIcon={<DownloadIcon decorative />}>
+          <ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
+          <ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
+        </ChatComposerAttachmentCard>
+      </ChatComposerAttachmentGroup>
+    </ChatComposerContainer>
+  );
+};
+
 export const ContainedVariantWithAttachments: StoryFn = () => {
   return (
     <ChatComposerContainer variant="contained">

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<LexicalEditor>(null);
+  const tooltip1 = useTooltipState();
+  const tooltip2 = useTooltipState();
+  const menu = useMenuState();
 
   return (
     <Box>
@@ -374,9 +383,6 @@ export const AIChatLogComposer = (): React.ReactNode => {
           <EnterKeySubmitPlugin onKeyDown={submitMessage} />
         </ChatComposer>
         <ChatComposerActionGroup>
-          <Button variant="secondary_icon" size="reset">
-            <AttachIcon decorative={false} title="attach a file to your message" />
-          </Button>
           <Button
             variant="primary_icon"
             size="reset"
@@ -388,6 +394,44 @@ export const AIChatLogComposer = (): React.ReactNode => {
             <SendIcon decorative={false} title="Send" />
           </Button>
         </ChatComposerActionGroup>
+        <ChatComposerActionRow>
+          <Tooltip state={tooltip1} text="Attach">
+            <Button variant="secondary" size="circle_small">
+              <AttachIcon decorative={false} title="attach a file to your message" />
+            </Button>
+          </Tooltip>
+          <Tooltip state={tooltip2} text="Emoji">
+            <Button variant="secondary" size="circle_small">
+              <EmojiIcon decorative={false} title="Chat history" />
+            </Button>
+          </Tooltip>
+
+          <>
+            <MenuButton {...menu} variant="secondary" size="circle_small">
+              <MoreIcon decorative={false} title="More actions" />
+            </MenuButton>
+            <Menu {...menu} aria-label="Preferences">
+              <MenuItem {...menu}>
+                <Box display="flex" alignItems="center" columnGap="space20">
+                  <HistoryIcon decorative color="colorTextIcon" /> Chat history
+                </Box>
+              </MenuItem>
+              <MenuItem {...menu}>
+                <Box display="flex" alignItems="center" columnGap="space20">
+                  <AgentIcon decorative color="colorTextIcon" /> Contact an agent
+                </Box>
+              </MenuItem>
+              <MenuItem {...menu}>
+                <Box display="flex" alignItems="center" columnGap="space20">
+                  <DocumentationIcon decorative color="colorTextIcon" /> Quick Start Guide
+                </Box>
+              </MenuItem>
+              <MenuSeparator {...menu} />
+              <MenuItem {...menu}>Privacy Policy</MenuItem>
+              <MenuItem {...menu}>Terms of Service</MenuItem>
+            </Menu>
+          </>
+        </ChatComposerActionRow>
       </ChatComposerContainer>
     </Box>
   );