# Initialize HAX in your project
hax init

# Add the file upload system
hax add composer file-upload

import { useFileUploadAction, FilePickerInput, DragAndDropZone } from "@/hax/composer/file-upload";

export function ChatWithFileUpload() {
  const [artifacts, setArtifacts] = useState([]);

  // Register file upload actions for AI agents
  useFileUploadAction({
    addOrUpdateArtifact: (type, data) => {
      setArtifacts(prev => [...prev, { type, data }]);
    }
  });

  return (
    <div className="chat-interface">
      <FilePickerInput
        onFileSelection={handleFiles}
        dragAndDropEnabled={true}
      />
      {/* Chat messages */}
    </div>
  );
}