b5cc31772c
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.
110 lines
3.4 KiB
JavaScript
110 lines
3.4 KiB
JavaScript
import React from 'react';
|
||
import {
|
||
Input,
|
||
Typography,
|
||
Button,
|
||
Switch,
|
||
} from '@douyinfe/semi-ui';
|
||
import { IconFile } from '@douyinfe/semi-icons';
|
||
import {
|
||
FileText,
|
||
Plus,
|
||
X,
|
||
Image,
|
||
} from 'lucide-react';
|
||
|
||
const ImageUrlInput = ({ imageUrls, imageEnabled, onImageUrlsChange, onImageEnabledChange }) => {
|
||
const handleAddImageUrl = () => {
|
||
const newUrls = [...imageUrls, ''];
|
||
onImageUrlsChange(newUrls);
|
||
};
|
||
|
||
const handleUpdateImageUrl = (index, value) => {
|
||
const newUrls = [...imageUrls];
|
||
newUrls[index] = value;
|
||
onImageUrlsChange(newUrls);
|
||
};
|
||
|
||
const handleRemoveImageUrl = (index) => {
|
||
const newUrls = imageUrls.filter((_, i) => i !== index);
|
||
onImageUrlsChange(newUrls);
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="flex items-center gap-2">
|
||
<Image size={16} className={imageEnabled ? "text-blue-500" : "text-gray-400"} />
|
||
<Typography.Text strong className="text-sm">
|
||
图片地址
|
||
</Typography.Text>
|
||
<Typography.Text className="text-xs text-gray-400">
|
||
(多模态对话)
|
||
</Typography.Text>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Switch
|
||
checked={imageEnabled}
|
||
onChange={onImageEnabledChange}
|
||
checkedText="启用"
|
||
uncheckedText="停用"
|
||
size="small"
|
||
className="flex-shrink-0"
|
||
/>
|
||
<Button
|
||
icon={<Plus size={14} />}
|
||
size="small"
|
||
theme="solid"
|
||
type="primary"
|
||
onClick={handleAddImageUrl}
|
||
className="!rounded-full !w-4 !h-4 !p-0 !min-w-0"
|
||
disabled={!imageEnabled || imageUrls.length >= 5}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{!imageEnabled ? (
|
||
<Typography.Text className="text-xs text-gray-500 mb-2 block">
|
||
图片发送已停用，启用后可添加图片URL进行多模态对话
|
||
</Typography.Text>
|
||
) : imageUrls.length === 0 ? (
|
||
<Typography.Text className="text-xs text-gray-500 mb-2 block">
|
||
点击 + 按钮添加图片URL，支持最多5张图片
|
||
</Typography.Text>
|
||
) : (
|
||
<Typography.Text className="text-xs text-gray-500 mb-2 block">
|
||
已添加 {imageUrls.length}/5 张图片
|
||
</Typography.Text>
|
||
)}
|
||
|
||
<div className={`space-y-2 max-h-32 overflow-y-auto ${!imageEnabled ? 'opacity-50' : ''}`}>
|
||
{imageUrls.map((url, index) => (
|
||
<div key={index} className="flex items-center gap-2">
|
||
<div className="flex-1">
|
||
<Input
|
||
placeholder={`https://example.com/image${index + 1}.jpg`}
|
||
value={url}
|
||
onChange={(value) => handleUpdateImageUrl(index, value)}
|
||
className="!rounded-lg"
|
||
size="small"
|
||
prefix={<IconFile size='small' />}
|
||
disabled={!imageEnabled}
|
||
/>
|
||
</div>
|
||
<Button
|
||
icon={<X size={12} />}
|
||
size="small"
|
||
theme="borderless"
|
||
type="danger"
|
||
onClick={() => handleRemoveImageUrl(index)}
|
||
className="!rounded-full !w-6 !h-6 !p-0 !min-w-0 !text-red-500 hover:!bg-red-50 flex-shrink-0"
|
||
disabled={!imageEnabled}
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ImageUrlInput;
|