From 3d570989dff9fbb5cf16405759d61d420718308d Mon Sep 17 00:00:00 2001
From: Simon Farshid <simon.farshid@outlook.com>
Date: Sun, 8 Sep 2024 19:49:37 -0700
Subject: [PATCH] feat: add decomposition guide for attachments (#791)

---
 .../content/docs/ui/styled/Decomposition.mdx  | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/apps/docs/content/docs/ui/styled/Decomposition.mdx b/apps/docs/content/docs/ui/styled/Decomposition.mdx
index cb6121fce..9ddfe4d32 100644
--- a/apps/docs/content/docs/ui/styled/Decomposition.mdx
+++ b/apps/docs/content/docs/ui/styled/Decomposition.mdx
@@ -197,6 +197,39 @@ The button to send the message.
 
 Sends a cancel action.
 
+### Composer.Attachments
+
+Renders attachments.
+
+### Composer.AddAttachment
+
+Renders an add attachment button.
+
+## ComposerAttachment
+
+Renders an attachment.
+
+```tsx
+import { ComposerAttachment } from "@assistant-ui/react";
+
+const MyComposerAttachment: FC = () => {
+  return (
+    <ComposerAttachment.Root>
+      attachment
+      <ComposerAttachment.Remove />
+    </ComposerAttachment.Root>
+  );
+};
+```
+
+### ComposerAttachment.Root
+
+Contains all parts of the composer attachment.
+
+### ComposerAttachment.Remvoe
+
+Renders a remove attachment button.
+
 ## AssistantMessage
 
 Renders an assistant message.
@@ -382,6 +415,7 @@ import { UserMessage } from "@assistant-ui/react";
 const MyUserMessage: FC = () => {
   return (
     <UserMessage.Root>
+      <UserMessage.Attachments />
       <UserMessage.Content />
       <UserActionBar />
       <BranchPicker />
@@ -410,6 +444,10 @@ Contains all parts of the user message.
 
 The content of the user message.
 
+### UserMessage.Attachments
+
+Renders attachments.
+
 ## UserActionBar
 
 Renders the action bar for the user message.
@@ -446,6 +484,22 @@ Contains all parts of the user action bar.
 
 Shows an edit button.
 
+## UserAttachment
+
+Renders an attachment.
+
+```tsx
+import { UserAttachment } from "@assistant-ui/react";
+
+const MyUserAttachment: FC = () => {
+  return <UserAttachment.Root>attachment</UserAttachment.Root>;
+};
+```
+
+### UserAttachment.Root
+
+Contains all parts of the user attachment.
+
 ## EditComposer
 
 Renders a user message being edited.