Spaces:
Runtime error
Runtime error
File size: 3,809 Bytes
13095e0 |
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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
import { Prompt } from '@/types/prompt';
interface Props {
prompt: Prompt;
variables: string[];
onSubmit: (updatedVariables: string[]) => void;
onClose: () => void;
}
export const VariableModal: FC<Props> = ({
prompt,
variables,
onSubmit,
onClose,
}) => {
const [updatedVariables, setUpdatedVariables] = useState<
{ key: string; value: string }[]
>(
variables
.map((variable) => ({ key: variable, value: '' }))
.filter(
(item, index, array) =>
array.findIndex((t) => t.key === item.key) === index,
),
);
const modalRef = useRef<HTMLDivElement>(null);
const nameInputRef = useRef<HTMLTextAreaElement>(null);
const handleChange = (index: number, value: string) => {
setUpdatedVariables((prev) => {
const updated = [...prev];
updated[index].value = value;
return updated;
});
};
const handleSubmit = () => {
if (updatedVariables.some((variable) => variable.value === '')) {
alert('Please fill out all variables');
return;
}
onSubmit(updatedVariables.map((variable) => variable.value));
onClose();
};
const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSubmit();
} else if (e.key === 'Escape') {
onClose();
}
};
useEffect(() => {
const handleOutsideClick = (e: MouseEvent) => {
if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
onClose();
}
};
window.addEventListener('click', handleOutsideClick);
return () => {
window.removeEventListener('click', handleOutsideClick);
};
}, [onClose]);
useEffect(() => {
if (nameInputRef.current) {
nameInputRef.current.focus();
}
}, []);
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
onKeyDown={handleKeyDown}
>
<div
ref={modalRef}
className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
role="dialog"
>
<div className="mb-4 text-xl font-bold text-black dark:text-neutral-200">
{prompt.name}
</div>
<div className="mb-4 text-sm italic text-black dark:text-neutral-200">
{prompt.description}
</div>
{updatedVariables.map((variable, index) => (
<div className="mb-4" key={index}>
<div className="mb-2 text-sm font-bold text-neutral-200">
{variable.key}
</div>
<textarea
ref={index === 0 ? nameInputRef : undefined}
className="mt-1 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
style={{ resize: 'none' }}
placeholder={`Enter a value for ${variable.key}...`}
value={variable.value}
onChange={(e) => handleChange(index, e.target.value)}
rows={3}
/>
</div>
))}
<button
className="mt-6 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
onClick={handleSubmit}
>
Submit
</button>
</div>
</div>
);
};
|