From 828e89a85e4dccd1bdcdac8cb3d8801f838372ed Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Fri, 30 May 2025 20:02:11 +0530
Subject: [PATCH 01/11] feat(chat-composer): add ChatComposerActionRow

---
 .../src/ChatComposerActionRow.tsx             | 36 +++++++++++++++++++
 .../src/ChatComposerAttachmentGroup.tsx       |  1 +
 .../src/ChatComposerContainer.tsx             |  1 -
 .../components/chat-composer/src/index.tsx    |  2 ++
 .../stories/container.stories.tsx             | 31 ++++++++++++++++
 5 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerActionRow.tsx

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..fe0a00c0ec
--- /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<HTMLDivElement, ChatComposerActionRowProps>(
+  ({ element = "CHAT_COMPOSER_ACTION_ROW", children, ...props }, ref) => (
+    <Box
+      {...safelySpreadBoxProps(props)}
+      element={element}
+      ref={ref}
+      gridArea="2/2"
+      gridColumn="1/-1"
+      display="inline-flex"
+      alignSelf="end"
+      role="group"
+      columnGap="space30"
+      padding="space30"
+      paddingRight="space20"
+    >
+      {children}
+    </Box>
+  ),
+);
+
+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..3ed618e802 100644
--- a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx
+++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx
@@ -43,6 +43,7 @@ export const ChatComposerAttachmentGroup = React.forwardRef<HTMLDivElement, Chat
         paddingBottom="space30"
         paddingX="space10"
         rowGap="space40"
+        marginTop="space50"
       >
         {children}
       </Box>
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<HTMLDivElement, ChatCompos
           padding="space30"
           maxHeight={maxHeight}
           overflowY="auto"
-          rowGap="space50"
           width="100%"
           {...Styles[variant]}
         >
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..eac4ea6967 100644
--- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx
+++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx
@@ -4,14 +4,17 @@ import { Button } from "@twilio-paste/button";
 import { Checkbox } from "@twilio-paste/checkbox";
 import { CustomizationProvider } from "@twilio-paste/customization";
 import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon";
+import { EmojiIcon } from "@twilio-paste/icons/esm/EmojiIcon";
 import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon";
 import { SendIcon } from "@twilio-paste/icons/esm/SendIcon";
+import { MoreIcon } from "@twilio-paste/icons/esm/MoreIcon";
 import { useTheme } from "@twilio-paste/theme";
 import * as React from "react";
 
 import {
   ChatComposer,
   ChatComposerActionGroup,
+  ChatComposerActionRow,
   ChatComposerAttachmentCard,
   ChatComposerAttachmentDescription,
   ChatComposerAttachmentGroup,
@@ -68,6 +71,34 @@ export const ContainedVariant: StoryFn = () => {
 
 ContainedVariant.storyName = "Contained Variant";
 
+export const ContainedVariantActionRow: StoryFn = () => {
+  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>
+        <Button variant="secondary" size="circle_small">
+          <Box borderWidth="borderWidth10" borderColor="colorBorderWeaker" borderRadius="borderRadiusCircle">
+            <AttachIcon decorative={false} title="attach a file to your message" />
+          </Box>
+        </Button>
+        <Button variant="secondary" size="circle_small">
+          <EmojiIcon decorative={false} title="Action"/>
+        </Button>
+        <Button variant="secondary" size="circle_small">
+          <MoreIcon decorative={false} title="More actions"/>
+        </Button>
+      </ChatComposerActionRow>
+    </ChatComposerContainer>
+  );
+};
+
+ContainedVariantActionRow.storyName = "Contained Variant with Action Row";
+
 export const ContainedVariantWithAttachments: StoryFn = () => {
   return (
     <ChatComposerContainer variant="contained">

From 23af19bc892ab36d7dbd2958dd67c0dde1ad340a Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 2 Jun 2025 19:06:48 +0530
Subject: [PATCH 02/11] feat(chat-composer): update example

---
 .../stories/container.stories.tsx             | 59 ++++++++++++++++---
 1 file changed, 50 insertions(+), 9 deletions(-)

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 eac4ea6967..8f3a76a5dd 100644
--- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx
+++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx
@@ -4,13 +4,18 @@ import { Button } from "@twilio-paste/button";
 import { Checkbox } from "@twilio-paste/checkbox";
 import { CustomizationProvider } from "@twilio-paste/customization";
 import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon";
-import { EmojiIcon } from "@twilio-paste/icons/esm/EmojiIcon";
 import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon";
-import { SendIcon } from "@twilio-paste/icons/esm/SendIcon";
+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 { AgentIcon } from "@twilio-paste/icons/src/AgentIcon";
+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,
@@ -21,7 +26,8 @@ import {
   ChatComposerAttachmentLink,
   ChatComposerContainer,
 } from "../src";
-import type { ChatComposerProps } from "../src";
+
+import { DocumentationIcon } from "@twilio-paste/icons/esm/DocumentationIcon";
 
 export default {
   title: "Components/Chat Composer/Container",
@@ -72,6 +78,9 @@ export const ContainedVariant: StoryFn = () => {
 ContainedVariant.storyName = "Contained Variant";
 
 export const ContainedVariantActionRow: StoryFn = () => {
+    const tooltip = useTooltipState();
+    const menu = useMenuState();
+    
   return (
     <ChatComposerContainer variant="contained">
       <ChatComposer config={defaultConfig} ariaLabel="Basic chat composer" placeholder="Type here..." />
@@ -86,12 +95,44 @@ export const ContainedVariantActionRow: StoryFn = () => {
             <AttachIcon decorative={false} title="attach a file to your message" />
           </Box>
         </Button>
-        <Button variant="secondary" size="circle_small">
-          <EmojiIcon decorative={false} title="Action"/>
-        </Button>
-        <Button variant="secondary" size="circle_small">
-          <MoreIcon decorative={false} title="More actions"/>
-        </Button>
+         <Tooltip
+          state={tooltip}
+          text="Chat history"
+        >
+          <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>
   );

From 575ac51d5447328aa367bb3bf41a1feaf598320f Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 2 Jun 2025 19:20:53 +0530
Subject: [PATCH 03/11] feat(chat-composer): update imports

---
 packages/paste-core/components/chat-composer/package.json   | 6 ++++++
 .../components/chat-composer/stories/container.stories.tsx  | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/paste-core/components/chat-composer/package.json b/packages/paste-core/components/chat-composer/package.json
index 6b5bd1ff12..db66477127 100644
--- a/packages/paste-core/components/chat-composer/package.json
+++ b/packages/paste-core/components/chat-composer/package.json
@@ -30,13 +30,16 @@
   "peerDependencies": {
     "@twilio-paste/animation-library": "^3.0.0",
     "@twilio-paste/box": "^11.0.0",
+    "@twilio-paste/checkbox": "^14.0.2",
     "@twilio-paste/color-contrast-utils": "^5.0.0",
     "@twilio-paste/customization": "^9.0.0",
     "@twilio-paste/design-tokens": "^10.0.0",
     "@twilio-paste/lexical-library": "^5.0.0",
+    "@twilio-paste/menu": "^15.0.1",
     "@twilio-paste/style-props": "^10.0.0",
     "@twilio-paste/styling-library": "^4.0.0",
     "@twilio-paste/theme": "^12.0.0",
+    "@twilio-paste/tooltip": "^13.0.1",
     "@twilio-paste/types": "^7.0.0",
     "@types/react": "^17.0.2 || ^18.0.27 || ^19.0.0",
     "@types/react-dom": "^17.0.2 || ^18.0.10 || ^19.0.0",
@@ -48,17 +51,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/stories/container.stories.tsx b/packages/paste-core/components/chat-composer/stories/container.stories.tsx
index 8f3a76a5dd..b56ae3857a 100644
--- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx
+++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx
@@ -3,13 +3,14 @@ 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 { AgentIcon } from "@twilio-paste/icons/src/AgentIcon";
 import { Menu, MenuButton, MenuItem, MenuSeparator, useMenuState } from "@twilio-paste/menu";
 import { useTheme } from "@twilio-paste/theme";
 import { Tooltip, useTooltipState } from "@twilio-paste/tooltip";
@@ -27,7 +28,6 @@ import {
   ChatComposerContainer,
 } from "../src";
 
-import { DocumentationIcon } from "@twilio-paste/icons/esm/DocumentationIcon";
 
 export default {
   title: "Components/Chat Composer/Container",

From 1e6597776cb06779d9622e1f8ead5e3cbb9b3ff4 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 2 Jun 2025 19:45:45 +0530
Subject: [PATCH 04/11] feat(chat-composer): update example

---
 .../paste-codemods/tools/.cache/mappings.json |  1 +
 .../components/chat-composer/package.json     |  5 +-
 .../chat-composer/stories/logs.stories.tsx    | 60 +++++++++++++++++--
 .../pages/components/chat-composer/index.mdx  |  3 -
 4 files changed, 57 insertions(+), 12 deletions(-)

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 db66477127..47fbda7f31 100644
--- a/packages/paste-core/components/chat-composer/package.json
+++ b/packages/paste-core/components/chat-composer/package.json
@@ -30,16 +30,13 @@
   "peerDependencies": {
     "@twilio-paste/animation-library": "^3.0.0",
     "@twilio-paste/box": "^11.0.0",
-    "@twilio-paste/checkbox": "^14.0.2",
     "@twilio-paste/color-contrast-utils": "^5.0.0",
     "@twilio-paste/customization": "^9.0.0",
     "@twilio-paste/design-tokens": "^10.0.0",
     "@twilio-paste/lexical-library": "^5.0.0",
-    "@twilio-paste/menu": "^15.0.1",
     "@twilio-paste/style-props": "^10.0.0",
     "@twilio-paste/styling-library": "^4.0.0",
     "@twilio-paste/theme": "^12.0.0",
-    "@twilio-paste/tooltip": "^13.0.1",
     "@twilio-paste/types": "^7.0.0",
     "@types/react": "^17.0.2 || ^18.0.27 || ^19.0.0",
     "@types/react-dom": "^17.0.2 || ^18.0.10 || ^19.0.0",
@@ -47,7 +44,7 @@
     "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@twilio-paste/anchor": "^13.0.1",
+   "@twilio-paste/anchor": "^13.0.1",
     "@twilio-paste/animation-library": "^3.0.1",
     "@twilio-paste/box": "^11.0.1",
     "@twilio-paste/button": "^15.0.2",
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..a4046337a0 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,
@@ -43,10 +42,17 @@ import {
   LexicalEditor,
   useLexicalComposerContext,
 } from "@twilio-paste/lexical-library";
+import { Tooltip, useTooltipState } from "@twilio-paste/tooltip";
+import { Menu, MenuButton, MenuItem, MenuSeparator, useMenuState } from "@twilio-paste/menu";
 import * as React from "react";
 import type { JSX } from "react";
+import { EmojiIcon } from "@twilio-paste/icons/esm/EmojiIcon";
+import { MoreIcon } from "@twilio-paste/icons/esm/MoreIcon";
+import { HistoryIcon } from "@twilio-paste/icons/esm/HistoryIcon";
+import { AgentIcon } from "@twilio-paste/icons/esm/AgentIcon";
+import { DocumentationIcon } from "@twilio-paste/icons/esm/DocumentationIcon";
 
-import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "../src";
+import { ChatComposer, ChatComposerActionGroup, ChatComposerActionRow, ChatComposerContainer } from "../src";
 
 export default {
   title: "Components/Chat Composer/LogsExperience",
@@ -349,6 +355,8 @@ export const AIChatLogComposer = (): React.ReactNode => {
   };
 
   const editorInstanceRef = React.useRef<LexicalEditor>(null);
+  const tooltip = useTooltipState();
+  const menu = useMenuState();
 
   return (
     <Box>
@@ -374,9 +382,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 +393,51 @@ export const AIChatLogComposer = (): React.ReactNode => {
             <SendIcon decorative={false} title="Send" />
           </Button>
         </ChatComposerActionGroup>
+        <ChatComposerActionRow>
+          <Button variant="secondary" size="circle_small">
+            <Box borderWidth="borderWidth10" borderColor="colorBorderWeaker" borderRadius="borderRadiusCircle">
+              <AttachIcon decorative={false} title="attach a file to your message" />
+            </Box>
+          </Button>
+           <Tooltip
+            state={tooltip}
+            text="Chat history"
+          >
+            <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>
   );
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..62462b53f7 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 = () => {
           <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"

From f3491a2ec3ddeff573b8909d252e5580476a10ee Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 2 Jun 2025 19:46:36 +0530
Subject: [PATCH 05/11] feat(chat-composer): update typedocs

---
 .../paste-core/components/chat-composer/type-docs.json   | 9 +++++++++
 packages/paste-core/primitives/box/type-docs.json        | 2 +-
 .../paste-core/primitives/sibling-box/type-docs.json     | 2 +-
 3 files changed, 11 insertions(+), 2 deletions(-)

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-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json
index 1c2d677cbb..270be1becf 100644
--- a/packages/paste-core/primitives/box/type-docs.json
+++ b/packages/paste-core/primitives/box/type-docs.json
@@ -767,7 +767,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 68 more ... | { ...; }",
+      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 67 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-core/primitives/sibling-box/type-docs.json b/packages/paste-core/primitives/sibling-box/type-docs.json
index ee5fb0a6de..791c96521e 100644
--- a/packages/paste-core/primitives/sibling-box/type-docs.json
+++ b/packages/paste-core/primitives/sibling-box/type-docs.json
@@ -869,7 +869,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 68 more ... | { ...; }",
+      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 67 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

From 9a12fad857a20c973ac573f2011822c9e72a855c Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 2 Jun 2025 19:53:15 +0530
Subject: [PATCH 06/11] feat(chat-composer): add changeset

---
 .changeset/healthy-fishes-accept.md                       | 7 +++++++
 packages/paste-core/components/chat-composer/package.json | 2 +-
 yarn.lock                                                 | 3 +++
 3 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/healthy-fishes-accept.md

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-core/components/chat-composer/package.json b/packages/paste-core/components/chat-composer/package.json
index 47fbda7f31..e092b48bd6 100644
--- a/packages/paste-core/components/chat-composer/package.json
+++ b/packages/paste-core/components/chat-composer/package.json
@@ -44,7 +44,7 @@
     "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-   "@twilio-paste/anchor": "^13.0.1",
+    "@twilio-paste/anchor": "^13.0.1",
     "@twilio-paste/animation-library": "^3.0.1",
     "@twilio-paste/box": "^11.0.1",
     "@twilio-paste/button": "^15.0.2",
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

From 42d07862c5edc479cda68040b5b6fffc7de9081a Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 2 Jun 2025 20:01:21 +0530
Subject: [PATCH 07/11] feat(chat-composer): update docs

---
 .../pages/components/chat-composer/index.mdx  | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

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 62462b53f7..265bfd5dee 100644
--- a/packages/paste-website/src/pages/components/chat-composer/index.mdx
+++ b/packages/paste-website/src/pages/components/chat-composer/index.mdx
@@ -506,6 +506,51 @@ export const ChatComposerAIChatLogExample = () => {
             <SendIcon decorative={false} title="Send" />
           </Button>
         </ChatComposerActionGroup>
+        <ChatComposerActionRow>
+          <Button variant="secondary" size="circle_small">
+            <Box borderWidth="borderWidth10" borderColor="colorBorderWeaker" borderRadius="borderRadiusCircle">
+              <AttachIcon decorative={false} title="attach a file to your message" />
+            </Box>
+          </Button>
+           <Tooltip
+            state={tooltip}
+            text="Chat history"
+          >
+            <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>
   );

From c03ac07659d54975b831948dc2ecad52e74ae125 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 2 Jun 2025 22:27:05 +0530
Subject: [PATCH 08/11] feat(chat-composer): fix lint

---
 .../stories/container.stories.tsx             | 26 +++++----------
 .../chat-composer/stories/logs.stories.tsx    | 33 ++++++++-----------
 2 files changed, 22 insertions(+), 37 deletions(-)

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 b56ae3857a..3f9334def3 100644
--- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx
+++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx
@@ -28,7 +28,6 @@ import {
   ChatComposerContainer,
 } from "../src";
 
-
 export default {
   title: "Components/Chat Composer/Container",
   component: ChatComposer,
@@ -78,9 +77,9 @@ export const ContainedVariant: StoryFn = () => {
 ContainedVariant.storyName = "Contained Variant";
 
 export const ContainedVariantActionRow: StoryFn = () => {
-    const tooltip = useTooltipState();
-    const menu = useMenuState();
-    
+  const tooltip = useTooltipState();
+  const menu = useMenuState();
+
   return (
     <ChatComposerContainer variant="contained">
       <ChatComposer config={defaultConfig} ariaLabel="Basic chat composer" placeholder="Type here..." />
@@ -89,24 +88,21 @@ export const ContainedVariantActionRow: StoryFn = () => {
           <SendIcon decorative={false} title="Send" />
         </Button>
       </ChatComposerActionGroup>
-       <ChatComposerActionRow>
+      <ChatComposerActionRow>
         <Button variant="secondary" size="circle_small">
           <Box borderWidth="borderWidth10" borderColor="colorBorderWeaker" borderRadius="borderRadiusCircle">
             <AttachIcon decorative={false} title="attach a file to your message" />
           </Box>
         </Button>
-         <Tooltip
-          state={tooltip}
-          text="Chat history"
-        >
+        <Tooltip state={tooltip} text="Chat history">
           <Button variant="secondary" size="circle_small">
-            <EmojiIcon decorative={false} title="Chat history"/>
+            <EmojiIcon decorative={false} title="Chat history" />
           </Button>
         </Tooltip>
 
         <>
           <MenuButton {...menu} variant="secondary" size="circle_small">
-             <MoreIcon decorative={false} title="More actions"/> 
+            <MoreIcon decorative={false} title="More actions" />
           </MenuButton>
           <Menu {...menu} aria-label="Preferences">
             <MenuItem {...menu}>
@@ -125,12 +121,8 @@ export const ContainedVariantActionRow: StoryFn = () => {
               </Box>
             </MenuItem>
             <MenuSeparator {...menu} />
-            <MenuItem {...menu}>
-              Privacy Policy
-            </MenuItem>
-            <MenuItem {...menu}>
-              Terms of Service
-            </MenuItem>
+            <MenuItem {...menu}>Privacy Policy</MenuItem>
+            <MenuItem {...menu}>Terms of Service</MenuItem>
           </Menu>
         </>
       </ChatComposerActionRow>
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 a4046337a0..a32f82a998 100644
--- a/packages/paste-core/components/chat-composer/stories/logs.stories.tsx
+++ b/packages/paste-core/components/chat-composer/stories/logs.stories.tsx
@@ -14,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,
@@ -28,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";
@@ -42,15 +47,10 @@ import {
   LexicalEditor,
   useLexicalComposerContext,
 } from "@twilio-paste/lexical-library";
-import { Tooltip, useTooltipState } from "@twilio-paste/tooltip";
 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 { EmojiIcon } from "@twilio-paste/icons/esm/EmojiIcon";
-import { MoreIcon } from "@twilio-paste/icons/esm/MoreIcon";
-import { HistoryIcon } from "@twilio-paste/icons/esm/HistoryIcon";
-import { AgentIcon } from "@twilio-paste/icons/esm/AgentIcon";
-import { DocumentationIcon } from "@twilio-paste/icons/esm/DocumentationIcon";
 
 import { ChatComposer, ChatComposerActionGroup, ChatComposerActionRow, ChatComposerContainer } from "../src";
 
@@ -399,18 +399,15 @@ export const AIChatLogComposer = (): React.ReactNode => {
               <AttachIcon decorative={false} title="attach a file to your message" />
             </Box>
           </Button>
-           <Tooltip
-            state={tooltip}
-            text="Chat history"
-          >
+          <Tooltip state={tooltip} text="Chat history">
             <Button variant="secondary" size="circle_small">
-              <EmojiIcon decorative={false} title="Chat history"/>
+              <EmojiIcon decorative={false} title="Chat history" />
             </Button>
           </Tooltip>
-  
+
           <>
             <MenuButton {...menu} variant="secondary" size="circle_small">
-               <MoreIcon decorative={false} title="More actions"/> 
+              <MoreIcon decorative={false} title="More actions" />
             </MenuButton>
             <Menu {...menu} aria-label="Preferences">
               <MenuItem {...menu}>
@@ -429,12 +426,8 @@ export const AIChatLogComposer = (): React.ReactNode => {
                 </Box>
               </MenuItem>
               <MenuSeparator {...menu} />
-              <MenuItem {...menu}>
-                Privacy Policy
-              </MenuItem>
-              <MenuItem {...menu}>
-                Terms of Service
-              </MenuItem>
+              <MenuItem {...menu}>Privacy Policy</MenuItem>
+              <MenuItem {...menu}>Terms of Service</MenuItem>
             </Menu>
           </>
         </ChatComposerActionRow>

From 0422fd01544034acb4d5d63c1864036222dc07d2 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 2 Jun 2025 22:30:33 +0530
Subject: [PATCH 09/11] feat(chat-composer): update typedocs

---
 packages/paste-core/primitives/box/type-docs.json         | 2 +-
 packages/paste-core/primitives/sibling-box/type-docs.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json
index 270be1becf..1c2d677cbb 100644
--- a/packages/paste-core/primitives/box/type-docs.json
+++ b/packages/paste-core/primitives/box/type-docs.json
@@ -767,7 +767,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 67 more ... | { ...; }",
+      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 68 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-core/primitives/sibling-box/type-docs.json b/packages/paste-core/primitives/sibling-box/type-docs.json
index 791c96521e..ee5fb0a6de 100644
--- a/packages/paste-core/primitives/sibling-box/type-docs.json
+++ b/packages/paste-core/primitives/sibling-box/type-docs.json
@@ -869,7 +869,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 67 more ... | { ...; }",
+      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 68 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

From 6590f12dc561517f3a9967faa493c1509a90cf01 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Tue, 3 Jun 2025 21:17:37 +0530
Subject: [PATCH 10/11] feat(chat-composer): update tooltip

---
 .../chat-composer/stories/container.stories.tsx     | 13 +++++++------
 .../chat-composer/stories/logs.stories.tsx          | 13 +++++++------
 2 files changed, 14 insertions(+), 12 deletions(-)

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 3f9334def3..a48bdc007f 100644
--- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx
+++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx
@@ -77,7 +77,8 @@ export const ContainedVariant: StoryFn = () => {
 ContainedVariant.storyName = "Contained Variant";
 
 export const ContainedVariantActionRow: StoryFn = () => {
-  const tooltip = useTooltipState();
+  const tooltip1 = useTooltipState();
+  const tooltip2 = useTooltipState();
   const menu = useMenuState();
 
   return (
@@ -89,12 +90,12 @@ export const ContainedVariantActionRow: StoryFn = () => {
         </Button>
       </ChatComposerActionGroup>
       <ChatComposerActionRow>
-        <Button variant="secondary" size="circle_small">
-          <Box borderWidth="borderWidth10" borderColor="colorBorderWeaker" borderRadius="borderRadiusCircle">
+        <Tooltip state={tooltip1} text="Attach">
+          <Button variant="secondary" size="circle_small">
             <AttachIcon decorative={false} title="attach a file to your message" />
-          </Box>
-        </Button>
-        <Tooltip state={tooltip} text="Chat history">
+          </Button>
+        </Tooltip>
+        <Tooltip state={tooltip2} text="Emoji">
           <Button variant="secondary" size="circle_small">
             <EmojiIcon decorative={false} title="Chat history" />
           </Button>
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 a32f82a998..a7a5aa0033 100644
--- a/packages/paste-core/components/chat-composer/stories/logs.stories.tsx
+++ b/packages/paste-core/components/chat-composer/stories/logs.stories.tsx
@@ -355,7 +355,8 @@ export const AIChatLogComposer = (): React.ReactNode => {
   };
 
   const editorInstanceRef = React.useRef<LexicalEditor>(null);
-  const tooltip = useTooltipState();
+  const tooltip1 = useTooltipState();
+  const tooltip2 = useTooltipState();
   const menu = useMenuState();
 
   return (
@@ -394,12 +395,12 @@ export const AIChatLogComposer = (): React.ReactNode => {
           </Button>
         </ChatComposerActionGroup>
         <ChatComposerActionRow>
-          <Button variant="secondary" size="circle_small">
-            <Box borderWidth="borderWidth10" borderColor="colorBorderWeaker" borderRadius="borderRadiusCircle">
+          <Tooltip state={tooltip1} text="Attach">
+            <Button variant="secondary" size="circle_small">
               <AttachIcon decorative={false} title="attach a file to your message" />
-            </Box>
-          </Button>
-          <Tooltip state={tooltip} text="Chat history">
+            </Button>
+          </Tooltip>
+          <Tooltip state={tooltip2} text="Emoji">
             <Button variant="secondary" size="circle_small">
               <EmojiIcon decorative={false} title="Chat history" />
             </Button>

From 56671045956c965afbfb767391769424a7692084 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 4 Jun 2025 19:54:27 +0530
Subject: [PATCH 11/11] feat(chat-composer): fix layout

---
 .../src/ChatComposerActionRow.tsx             |  2 +-
 .../src/ChatComposerAttachmentGroup.tsx       |  3 +-
 .../stories/container.stories.tsx             | 81 +++++++++++++++++++
 3 files changed, 84 insertions(+), 2 deletions(-)

diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerActionRow.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerActionRow.tsx
index fe0a00c0ec..509c5a71b4 100644
--- a/packages/paste-core/components/chat-composer/src/ChatComposerActionRow.tsx
+++ b/packages/paste-core/components/chat-composer/src/ChatComposerActionRow.tsx
@@ -19,7 +19,7 @@ export const ChatComposerActionRow = React.forwardRef<HTMLDivElement, ChatCompos
       {...safelySpreadBoxProps(props)}
       element={element}
       ref={ref}
-      gridArea="2/2"
+      gridRow="2"
       gridColumn="1/-1"
       display="inline-flex"
       alignSelf="end"
diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx
index 3ed618e802..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<HTMLDivElement, Chat
         {...safelySpreadBoxProps(props)}
         element={element}
         ref={ref}
-        gridArea="2/1/3/3"
+        gridRow="3"
+        gridColumn="1/-1"
         role="group"
         display="grid"
         gridTemplateColumns={getColumnStyles()}
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 a48bdc007f..ef176dee78 100644
--- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx
+++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx
@@ -133,6 +133,87 @@ export const ContainedVariantActionRow: StoryFn = () => {
 
 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">