docs: ComposerAttachment -> AttachmentUI (#1159)

assistant-ui · Nov 12, 2024 · fc42d01 · fc42d01
1 parent 8dc104a
commit fc42d01
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 14 deletions.
diff --git a/apps/docs/content/docs/ui/styled/Decomposition.mdx b/apps/docs/content/docs/ui/styled/Decomposition.mdx
@@ -206,28 +206,32 @@ Renders attachments.
 
 Renders an add attachment button.
 
-## ComposerAttachment
+## AttachmentUI
+
+<Callout type="info" emoji="💡">
+  `AttachmentUI` is still experimental.
+</Callout>
 
 Renders an attachment.
 
 ```tsx
-import { ComposerAttachment } from "@assistant-ui/react";
+import { AttachmentUI } from "@assistant-ui/react";
 
-const MyComposerAttachment: FC = () => {
+const MyAttachmentUI: FC = () => {
   return (
-    <ComposerAttachment.Root>
+    <AttachmentUI.Root>
       attachment
-      <ComposerAttachment.Remove />
-    </ComposerAttachment.Root>
+      <AttachmentUI.Remove />
+    </AttachmentUI.Root>
   );
 };
 ```
 
-### ComposerAttachment.Root
+### AttachmentUI.Root
 
 Contains all parts of the composer attachment.
 
-### ComposerAttachment.Remvoe
+### AttachmentUI.Remove
 
 Renders a remove attachment button.
 

diff --git a/packages/react/src/ui/attachment.tsx → packages/react/src/ui/attachment-ui.tsx b/packages/react/src/ui/attachment.tsx → packages/react/src/ui/attachment-ui.tsx
@@ -126,7 +126,7 @@ const AttachmentThumb: FC = () => {
   );
 };
 
-const Attachment: FC = () => {
+const AttachmentUI: FC = () => {
   const canRemove = useAttachment((a) => a.source !== "message");
   const typeLabel = useAttachment((a) => {
     const type = a.type;
@@ -165,7 +165,7 @@ const Attachment: FC = () => {
   );
 };
 
-Attachment.displayName = "Attachment";
+AttachmentUI.displayName = "Attachment";
 
 namespace AttachmentRemove {
   export type Element = HTMLButtonElement;
@@ -204,5 +204,5 @@ const exports = {
   Remove: AttachmentRemove,
 };
 
-export default Object.assign(Attachment, exports) as typeof Attachment &
+export default Object.assign(AttachmentUI, exports) as typeof AttachmentUI &
   typeof exports;
diff --git a/packages/react/src/ui/composer.tsx b/packages/react/src/ui/composer.tsx
@@ -12,7 +12,7 @@ import {
 import { CircleStopIcon } from "./base/CircleStopIcon";
 import { ComposerPrimitive, ThreadPrimitive } from "../primitives";
 import { useThread } from "../context/react/ThreadContext";
-import Attachment from "./attachment";
+import Attachment from "./attachment-ui";
 
 const useAllowAttachments = (ensureCapability = false) => {
   const { composer: { allowAttachments = true } = {} } = useThreadConfig();

diff --git a/packages/react/src/ui/index.ts b/packages/react/src/ui/index.ts
@@ -22,7 +22,7 @@ export { default as Composer } from "./composer";
 
 export {
   default as AttachmentUI, // TODO name collision with Attachment
-} from "./attachment";
+} from "./attachment-ui";
 
 export { default as EditComposer } from "./edit-composer";
 

diff --git a/packages/react/src/ui/user-message.tsx b/packages/react/src/ui/user-message.tsx
@@ -7,7 +7,7 @@ import { withDefaults } from "./utils/withDefaults";
 import UserActionBar from "./user-action-bar";
 import ContentPart from "./content-part";
 import { MessagePrimitive } from "../primitives";
-import Attachment from "./attachment";
+import Attachment from "./attachment-ui";
 
 const UserMessage: FC = () => {
   return (