File size: 2,316 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 66 67 68 69 70 | import { useState } from 'react';
import { Input } from '@librechat/client';
import { Cross1Icon } from '@radix-ui/react-icons';
import type { TPrompt } from 'librechat-data-provider';
import { useUpdatePromptLabels } from '~/data-provider';
const PromptForm = ({ selectedPrompt }: { selectedPrompt?: TPrompt }) => {
const [labelInput, setLabelInput] = useState<string>('');
const [labels, setLabels] = useState<string[]>([]);
const updatePromptLabelsMutation = useUpdatePromptLabels();
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setLabelInput(e.target.value);
};
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter' && labelInput.trim()) {
const newLabels = [...labels, labelInput.trim()];
setLabels(newLabels);
setLabelInput('');
updatePromptLabelsMutation.mutate({
id: selectedPrompt?._id || '',
payload: { labels: newLabels },
});
}
};
return (
<>
<Input
type="text"
className="mb-4"
placeholder="+ Add Labels"
// defaultValue={selectedPrompt?.labels.join(', ')}
value={labelInput}
onChange={handleInputChange}
onKeyPress={handleKeyPress}
/>
<h3 className="rounded-t-lg border border-gray-300 px-4 text-base font-semibold">Labels</h3>
<div className="mb-4 flex w-full flex-row flex-wrap rounded-b-lg border border-gray-300 p-4">
{labels.length ? (
labels.map((label, index) => (
<label
className="mb-1 mr-1 flex items-center gap-x-2 rounded-full border px-2"
key={index}
>
{label}
<Cross1Icon
onClick={() => {
const newLabels = labels.filter((l) => l !== label);
setLabels(newLabels);
updatePromptLabelsMutation.mutate({
id: selectedPrompt?._id || '',
payload: { labels: newLabels },
});
}}
className="cursor-pointer"
/>
</label>
))
) : (
<label className="rounded-full border px-2">No Labels</label>
)}
</div>
</>
);
};
export default PromptForm;
|