85 lines
3.0 KiB
Markdown
85 lines
3.0 KiB
Markdown
# Media Library Batch Select Sync Lessons
|
|
|
|
## Problem
|
|
The media library buttons in two different locations (`AIInputBar` and `EnhancedChatInput`) had inconsistent behavior:
|
|
- The media library in the AI input bar had full batch select functionality
|
|
- The media library in the chat drawer only had single select and lacked the batch select "use" button
|
|
|
|
## Root Cause
|
|
The `MediaLibraryModal` component requires both `onSelect` and `onSelectMultiple` props to enable full functionality. The `EnhancedChatInput` was only passing `onSelect` but missing `onSelectMultiple`.
|
|
|
|
## Solution
|
|
Add `handleMediaLibrarySelectMultiple` function to `EnhancedChatInput` and pass it to `MediaLibraryModal`.
|
|
|
|
## Code Changes
|
|
|
|
### File: `packages/drawnix/src/components/chat-drawer/EnhancedChatInput.tsx`
|
|
|
|
#### 1. Added `handleMediaLibrarySelectMultiple` function
|
|
```tsx
|
|
const handleMediaLibrarySelectMultiple = useCallback(
|
|
async (assets: Asset[]) => {
|
|
if (assets.length === 0) return;
|
|
|
|
try {
|
|
const newContents = assets.map((asset) => ({
|
|
type: 'image' as const,
|
|
url: asset.url,
|
|
name: asset.name || `素材-${Date.now()}`,
|
|
}));
|
|
appendUploadedContent(newContents);
|
|
setShowMediaLibrary(false);
|
|
} catch (error) {
|
|
console.error('Failed to batch select assets from library:', error);
|
|
setShowMediaLibrary(false);
|
|
}
|
|
},
|
|
[appendUploadedContent]
|
|
);
|
|
```
|
|
|
|
#### 2. Updated `MediaLibraryModal` call
|
|
```tsx
|
|
<MediaLibraryModal
|
|
isOpen={showMediaLibrary}
|
|
onClose={() => setShowMediaLibrary(false)}
|
|
mode={SelectionMode.SELECT}
|
|
filterType={AssetType.IMAGE}
|
|
onSelect={handleMediaLibrarySelect}
|
|
onSelectMultiple={handleMediaLibrarySelectMultiple} // New
|
|
batchSelectButtonText="批量插入对话框" // New
|
|
/>
|
|
```
|
|
|
|
## Architecture Notes
|
|
|
|
### Component Hierarchy
|
|
```
|
|
AssetContext (Shared state)
|
|
├── MediaLibraryModal (Reusable component)
|
|
│ ├── MediaLibraryGrid
|
|
│ └── MediaLibraryInspector
|
|
├── AIInputBar (Has full functionality)
|
|
└── EnhancedChatInput (Now also has full functionality)
|
|
```
|
|
|
|
### Key Patterns
|
|
1. **Context-based state management** - `AssetContext` provides shared media data
|
|
2. **Reusable component design** - `MediaLibraryModal` is used across different parts of the app
|
|
3. **Progressive enhancement** - Features are enabled based on passed props
|
|
4. **Consistent UX** - Both input areas now have identical media library behavior
|
|
|
|
## Lessons Learned
|
|
|
|
1. **Check for prop consistency** - When reusing components across different locations, ensure all required props are passed
|
|
2. **Maintain UX parity** - Similar features should behave the same way regardless of where they appear
|
|
3. **Design for extensibility** - Reusable components should accept optional props for different use cases
|
|
4. **Batch operations add value** - Users appreciate the ability to select and insert multiple items at once
|
|
|
|
## Verification
|
|
Both media library buttons now have:
|
|
- ✅ Batch select button available
|
|
- ✅ Batch select functionality works
|
|
- ✅ "Use" button enabled and functional
|
|
- ✅ Consistent UI behavior
|