File size: 1,914 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | import { useState, useEffect, useRef } from 'react';
import { SquirclePlusIcon } from '@librechat/client';
import { useLocalize } from '~/hooks';
interface MCPIconProps {
icon?: string;
onIconChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}
export default function MCPIcon({ icon, onIconChange }: MCPIconProps) {
const [previewUrl, setPreviewUrl] = useState('');
const fileInputRef = useRef<HTMLInputElement>(null);
const localize = useLocalize();
useEffect(() => {
if (icon) {
setPreviewUrl(icon);
} else {
setPreviewUrl('');
}
}, [icon]);
const handleClick = () => {
if (fileInputRef.current) {
fileInputRef.current.value = '';
fileInputRef.current.click();
}
};
return (
<div className="flex items-center gap-4">
<div
onClick={handleClick}
className="bg-token-surface-secondary dark:bg-token-surface-tertiary border-token-border-medium flex h-16 w-16 shrink-0 cursor-pointer items-center justify-center rounded-[1.5rem] border-2 border-dashed"
>
{previewUrl ? (
<img
src={previewUrl}
className="h-full w-full rounded-[1.5rem] object-cover"
alt="MCP Icon"
width="64"
height="64"
/>
) : (
<SquirclePlusIcon />
)}
</div>
<div className="flex flex-col gap-1">
<span className="token-text-secondary text-sm">
{localize('com_ui_icon')} {localize('com_ui_optional')}
</span>
<span className="token-text-tertiary text-xs">{localize('com_agents_mcp_icon_size')}</span>
</div>
<input
accept="image/png,.png,image/jpeg,.jpg,.jpeg,image/gif,.gif,image/webp,.webp"
multiple={false}
type="file"
style={{ display: 'none' }}
onChange={onIconChange}
ref={fileInputRef}
/>
</div>
);
}
|