✨ 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:
@@ -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') => {
|
||||
|
||||
Reference in New Issue
Block a user