File size: 1,763 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 } from 'react';
import { Input } from '@librechat/client';
import { useLocalize } from '~/hooks';
import { Info } from 'lucide-react';
const MAX_LENGTH = 120;
const Description = ({
initialValue,
onValueChange,
disabled,
tabIndex,
}: {
initialValue?: string;
onValueChange?: (value: string) => void;
disabled?: boolean;
tabIndex?: number;
}) => {
const localize = useLocalize();
const [description, setDescription] = useState(initialValue || '');
const [charCount, setCharCount] = useState(initialValue?.length || 0);
useEffect(() => {
setDescription(initialValue || '');
setCharCount(initialValue?.length || 0);
}, [initialValue]);
useEffect(() => {
setCharCount(description.length);
}, [description]);
const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
if (e.target.value.length <= MAX_LENGTH) {
setDescription(e.target.value);
onValueChange?.(e.target.value);
}
};
if (disabled && !description) {
return null;
}
return (
<div className="rounded-xl border border-border-light shadow-md">
<h3 className="flex h-10 items-center gap-1 pl-4 text-sm text-text-secondary">
<Info className="icon-sm" aria-hidden="true" />
<Input
type="text"
tabIndex={tabIndex}
disabled={disabled}
placeholder={localize('com_ui_description_placeholder')}
value={description}
onChange={handleInputChange}
className="border-none"
/>
{!disabled && (
<span className="mr-4 w-10 text-xs text-text-secondary md:text-sm">{`${charCount}/${MAX_LENGTH}`}</span>
)}
</h3>
</div>
);
};
export default Description;
|