feat: add image upload toggle with auto-disable after sending

Add a toggle switch to enable/disable image uploads in the playground,
with automatic disabling after message sending to prevent accidental
image inclusion in subsequent messages.

Changes:
- Add `imageEnabled` field to default configuration with false as default
- Enhance ImageUrlInput component with enable/disable toggle switch
- Update UI to show disabled state with opacity and color changes
- Modify message sending logic to only include images when enabled
- Implement auto-disable functionality after message is sent
- Update SettingsPanel to pass through new imageEnabled props
- Maintain backward compatibility with existing configurations

User Experience:
- Images are disabled by default for privacy and intentional usage
- Users must explicitly enable image uploads before adding URLs
- After sending a message with images, the feature auto-disables
- Clear visual feedback shows current enabled/disabled state
- Manual control allows users to re-enable when needed

This improves user control over multimodal conversations and prevents
unintentional image sharing in follow-up messages.
This commit is contained in:
Apple\Apple
2025-05-30 20:05:13 +08:00
parent 2abf2c464f
commit fbb189ecd7
4 changed files with 42 additions and 15 deletions

View File

@@ -568,7 +568,7 @@ const Playground = () => {
let messageContent;
const validImageUrls = inputs.imageUrls.filter(url => url.trim() !== '');
if (validImageUrls.length > 0) {
if (inputs.imageEnabled && validImageUrls.length > 0) {
messageContent = [
{
type: 'text',
@@ -643,6 +643,12 @@ const Playground = () => {
handleNonStreamRequest(payload);
}
if (inputs.imageEnabled) {
setTimeout(() => {
handleInputChange('imageEnabled', false);
}, 100);
}
newMessage.push({
role: 'assistant',
content: '',
@@ -655,7 +661,7 @@ const Playground = () => {
return newMessage;
});
},
[getSystemMessage, inputs, setMessage, parameterEnabled],
[getSystemMessage, inputs, setMessage, parameterEnabled, handleInputChange],
);
const completeMessage = useCallback((status = 'complete') => {