Spaces:
Running
Running
File size: 3,191 Bytes
e6ce630 |
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 |
import { useState, useEffect, useCallback } from 'react';
import { Wand2, Undo2 } from 'lucide-react';
import { Button } from '../ui/button';
interface PromptInputProps {
value: string;
onChange: (value: string) => void;
}
export default function PromptInput({ value, onChange }: PromptInputProps) {
const [isEnhancing, setIsEnhancing] = useState(false);
const [previousPrompt, setPreviousPrompt] = useState('');
const [isEnhanced, setIsEnhanced] = useState(false);
const enhancePrompt = useCallback(async () => {
if (!value.trim() || isEnhancing) return;
setIsEnhancing(true);
setPreviousPrompt(value);
try {
const response = await fetch('/api/enhance-prompt', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ prompt: value }),
});
if (!response.ok) {
throw new Error('Failed to enhance prompt');
}
const data = await response.json();
onChange(data.enhancedPrompt);
setIsEnhanced(true);
} catch (error) {
console.error('Error enhancing prompt:', error);
} finally {
setIsEnhancing(false);
}
}, [value, onChange]);
const undoEnhance = useCallback(() => {
onChange(previousPrompt);
setIsEnhanced(false);
}, [previousPrompt, onChange]);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if ((event.ctrlKey || event.metaKey) && event.key === 'i') {
event.preventDefault();
enhancePrompt();
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [enhancePrompt]);
return (
<div className="flex flex-col w-full gap-2 px-4 py-3">
<div className="flex justify-between items-center">
<label htmlFor="prompt-input" className="text-[#141414] dark:text-white text-base font-medium leading-normal">
Prompt
</label>
<div className="flex gap-2">
{isEnhanced && (
<Button
variant="ghost"
size="icon"
onClick={undoEnhance}
title="Undo enhance"
className="h-8 w-8"
>
<Undo2 className="h-4 w-4" />
</Button>
)}
<Button
variant="ghost"
size="icon"
onClick={enhancePrompt}
disabled={isEnhancing || !value.trim()}
title="Enhance prompt (Ctrl+I / Cmd+I)"
className="h-8 w-8"
>
<Wand2 className={`h-4 w-4 ${isEnhancing ? 'animate-pulse' : ''}`} />
</Button>
</div>
</div>
<textarea
id="prompt-input"
value={value}
onChange={(e) => onChange(e.target.value)}
placeholder="Type your prompt here"
className="w-full min-h-[150px] p-4 rounded-xl text-[#141414] dark:text-white focus:outline-none focus:ring-0 border-none bg-[#ededed] dark:bg-gray-900 placeholder:text-neutral-500 dark:placeholder:text-gray-400 text-base font-normal leading-normal resize-none"
/>
</div>
);
}
|