Update React Editor integration and clean up template

components/ai-elements/attachments.tsx

@@ -20,10 +20,6 @@ import {
 import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
 import { createContext, useCallback, useContext, useMemo } from "react";
 
-// ============================================================================
-// Types
-// ============================================================================
-
 export type AttachmentData =
   | (FileUIPart & { id: string })
   | (SourceDocumentUIPart & { id: string });
@@ -47,10 +43,6 @@ const mediaCategoryIcons: Record<AttachmentMediaCategory, typeof ImageIcon> = {
   video: VideoIcon,
 };
 
-// ============================================================================
-// Utility Functions
-// ============================================================================
-
 export const getMediaCategory = (
   data: AttachmentData
 ): AttachmentMediaCategory => {
@@ -108,10 +100,6 @@ const renderAttachmentImage = (
     />
   );
 
-// ============================================================================
-// Contexts
-// ============================================================================
-
 interface AttachmentsContextValue {
   variant: AttachmentVariant;
 }
@@ -127,10 +115,6 @@ interface AttachmentContextValue {
 
 const AttachmentContext = createContext<AttachmentContextValue | null>(null);
 
-// ============================================================================
-// Hooks
-// ============================================================================
-
 export const useAttachmentsContext = () =>
   useContext(AttachmentsContext) ?? { variant: "grid" as const };
 
@@ -142,10 +126,6 @@ export const useAttachmentContext = () => {
   return ctx;
 };
 
-// ============================================================================
-// Attachments - Container
-// ============================================================================
-
 export type AttachmentsProps = HTMLAttributes<HTMLDivElement> & {
   variant?: AttachmentVariant;
 };
@@ -175,10 +155,6 @@ export const Attachments = ({
   );
 };
 
-// ============================================================================
-// Attachment - Item
-// ============================================================================
-
 export type AttachmentProps = HTMLAttributes<HTMLDivElement> & {
   data: AttachmentData;
   onRemove?: () => void;
@@ -225,10 +201,6 @@ export const Attachment = ({
   );
 };
 
-// ============================================================================
-// AttachmentPreview - Media preview
-// ============================================================================
-
 export type AttachmentPreviewProps = HTMLAttributes<HTMLDivElement> & {
   fallbackIcon?: ReactNode;
 };
@@ -275,10 +247,6 @@ export const AttachmentPreview = ({
   );
 };
 
-// ============================================================================
-// AttachmentInfo - Name and type display
-// ============================================================================
-
 export type AttachmentInfoProps = HTMLAttributes<HTMLDivElement> & {
   showMediaType?: boolean;
 };
@@ -307,10 +275,6 @@ export const AttachmentInfo = ({
   );
 };
 
-// ============================================================================
-// AttachmentRemove - Remove button
-// ============================================================================
-
 export type AttachmentRemoveProps = ComponentProps<typeof Button> & {
   label?: string;
 };
@@ -365,10 +329,6 @@ export const AttachmentRemove = ({
   );
 };
 
-// ============================================================================
-// AttachmentHoverCard - Hover preview
-// ============================================================================
-
 export type AttachmentHoverCardProps = ComponentProps<typeof HoverCard>;
 
 export const AttachmentHoverCard = ({
@@ -403,10 +363,6 @@ export const AttachmentHoverCardContent = ({
   />
 );
 
-// ============================================================================
-// AttachmentEmpty - Empty state
-// ============================================================================
-
 export type AttachmentEmptyProps = HTMLAttributes<HTMLDivElement>;
 
 export const AttachmentEmpty = ({