refactor(message)!: remove legacy attachment display components and align examples/docs (#162)

* chore(examples): update `message` example

* refactor(message)!: remove legacy attachment display components

* docs: update `message`

Author: cwandev

apps/www/content/3.components/1.chatbot/message.md

@@ -437,124 +437,6 @@ const md = computed(() => (slotContent.value ?? props.content ?? '') as string)
 </template>
 ```
 
-```vue [MessageAttachments.vue]
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@repo/shadcn-vue/lib/utils'
-
-interface Props {
-  class?: HTMLAttributes['class']
-}
-
-const props = defineProps<Props>()
-</script>
-
-<template>
-  <div
-    v-if="$slots.default"
-    :class="
-      cn(
-        'ml-auto flex w-fit flex-wrap items-start gap-2',
-        props.class,
-      )
-    "
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>
-```
-
-```vue [MessageAttachment.vue]
-<script setup lang="ts">
-import type { FileUIPart } from 'ai'
-import type { HTMLAttributes } from 'vue'
-import { Button } from '@repo/shadcn-vue/components/ui/button'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@repo/shadcn-vue/components/ui/tooltip'
-import { cn } from '@repo/shadcn-vue/lib/utils'
-import { PaperclipIcon, XIcon } from 'lucide-vue-next'
-import { computed } from 'vue'
-
-interface Props {
-  data: FileUIPart
-  class?: HTMLAttributes['class']
-}
-const props = defineProps<Props>()
-
-const emits = defineEmits<{
-  (e: 'remove'): void
-}>()
-
-const filename = computed(() => props.data.filename || '')
-const mediaType = computed(() =>
-  props.data.mediaType?.startsWith('image/') && props.data.url ? 'image' : 'file',
-)
-const isImage = computed(() => mediaType.value === 'image')
-const attachmentLabel = computed(() =>
-  filename.value || (isImage.value ? 'Image' : 'Attachment'),
-)
-</script>
-
-<template>
-  <div
-    :class="
-      cn(
-        'group relative size-24 overflow-hidden rounded-lg',
-        props.class,
-      )
-    "
-    v-bind="$attrs"
-  >
-    <template v-if="isImage">
-      <img
-        :src="props.data.url"
-        :alt="filename || 'attachment'"
-        class="size-full object-cover"
-        height="100"
-        width="100"
-      >
-      <Button
-        aria-label="Remove attachment"
-        class="absolute top-2 right-2 size-6 rounded-full bg-background/80 p-0 opacity-0 backdrop-blur-sm transition-opacity hover:bg-background group-hover:opacity-100 [&>svg]:size-3"
-        type="button"
-        variant="ghost"
-        @click.stop="emits('remove')"
-      >
-        <XIcon />
-        <span class="sr-only">Remove</span>
-      </Button>
-    </template>
-
-    <template v-else>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger as-child>
-            <div
-              class="flex size-full shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground"
-            >
-              <PaperclipIcon class="size-4" />
-            </div>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>{{ attachmentLabel }}</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <Button
-        aria-label="Remove attachment"
-        class="size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100 [&>svg]:size-3"
-        type="button"
-        variant="ghost"
-        @click.stop="emits('remove')"
-      >
-        <XIcon />
-        <span class="sr-only">Remove</span>
-      </Button>
-    </template>
-  </div>
-</template>
-```
-
 ```vue [MessageToolbar.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
@@ -611,8 +493,6 @@ export function useMessageBranchContext(): MessageBranchContextType {
 export { default as Message } from './Message.vue'
 export { default as MessageAction } from './MessageAction.vue'
 export { default as MessageActions } from './MessageActions.vue'
-export { default as MessageAttachment } from './MessageAttachment.vue'
-export { default as MessageAttachments } from './MessageAttachments.vue'
 export { default as MessageAvatar } from './MessageAvatar.vue'
 export { default as MessageBranch } from './MessageBranch.vue'
 export { default as MessageBranchContent } from './MessageBranchContent.vue'
@@ -959,59 +839,17 @@ function copyToClipboard(text: string) {
   ::
 ::
 
-### `<MessageAttachments />`
-
-::field-group
-  ::field{name="class" type="string" defaultValue="''"}
-  Additional classes applied to the component.
-  ::
-::
-
-**Example:**
-
-```vue
-<MessageAttachments class="mb-2">
-  <MessageAttachment
-    v-for="attachment in files"
-    :key="attachment.url"
-    :data="attachment"
-  />
-</MessageAttachments>
-```
-
-### `<MessageAttachment />`
+### `<MessageToolbar />`
 
 ::field-group
-  ::field{name="data" type="FileUIPart" required}
-  The file data to display. Must include url and mediaType.
-  ::
-
   ::field{name="class" type="string" defaultValue="''"}
   Additional classes applied to the component.
   ::
 ::
 
-**Example:**
-
-```vue
-<MessageAttachment
-  data="{
-    type: 'file',
-    url: 'https://example.com/image.jpg',
-    mediaType: 'image/jpeg',
-    filename: 'image.jpg'
-  }"
-  @remove="() => console.log('Remove clicked')"
-/>
-```
+### Attachments
 
-### `<MessageToolbar />`
-
-::field-group
-  ::field{name="class" type="string" defaultValue="''"}
-  Additional classes applied to the component.
-  ::
-::
+Attachment components have been moved to a separate module. See the [Attachments](/components/chatbot/attachments) component documentation for details on `<Attachments />`, `<Attachment />`, `<AttachmentPreview />`, and `<AttachmentInfo />`.
 
 ## Emits
 
@@ -1022,11 +860,3 @@ function copyToClipboard(text: string) {
   Emitted when the branch changes.
   ::
 ::
-
-### `<MessageAttachment />`
-
-::field-group
-  ::field{name="remove" type="function" }
-  Emitted when the attachment is removed.
-  ::
-::

packages/elements/src/message/MessageAttachment.vue

@@ -1,8 +1,6 @@
 export { default as Message } from './Message.vue'
 export { default as MessageAction } from './MessageAction.vue'
 export { default as MessageActions } from './MessageActions.vue'
-export { default as MessageAttachment } from './MessageAttachment.vue'
-export { default as MessageAttachments } from './MessageAttachments.vue'
 export { default as MessageAvatar } from './MessageAvatar.vue'
 export { default as MessageBranch } from './MessageBranch.vue'
 export { default as MessageBranchContent } from './MessageBranchContent.vue'