94 lines
2.1 KiB
TypeScript
94 lines
2.1 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import aiStyles from "@/styles/ai.module.css";
|
||
import styles from "./AiPromptPanel.module.css";
|
||
|
||
type Props = {
|
||
open: boolean;
|
||
title: string;
|
||
initialPrompt: string;
|
||
busy?: boolean;
|
||
error?: string;
|
||
disabled?: boolean;
|
||
onClose: () => void;
|
||
onRun: (prompt: string) => void;
|
||
};
|
||
|
||
export default function AiPromptPanel({
|
||
open,
|
||
title,
|
||
initialPrompt,
|
||
busy = false,
|
||
error = "",
|
||
disabled = false,
|
||
onClose,
|
||
onRun,
|
||
}: Props) {
|
||
const [prompt, setPrompt] = useState(initialPrompt);
|
||
|
||
useEffect(() => {
|
||
if (open) setPrompt(initialPrompt);
|
||
}, [open, initialPrompt]);
|
||
|
||
if (!open) return null;
|
||
|
||
return (
|
||
<div className={styles.panel}>
|
||
<div className={styles.head}>
|
||
<div>
|
||
<h3 className={styles.title}>{title}</h3>
|
||
<p className={styles.subtitle}>
|
||
Edit the prompt, then run AI to fill this field.
|
||
</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className={styles.closeBtn}
|
||
disabled={busy}
|
||
aria-label="Close"
|
||
onClick={onClose}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<label className={styles.field}>
|
||
<span>Prompt</span>
|
||
<textarea
|
||
rows={10}
|
||
value={prompt}
|
||
disabled={busy || disabled}
|
||
className={busy ? aiStyles.aiWorkingBorder : undefined}
|
||
onChange={(event) => setPrompt(event.target.value)}
|
||
/>
|
||
</label>
|
||
|
||
{error ? (
|
||
<p className={styles.error} role="alert">
|
||
{error}
|
||
</p>
|
||
) : null}
|
||
|
||
<div className={styles.actions}>
|
||
<button
|
||
type="button"
|
||
className={styles.secondaryBtn}
|
||
disabled={busy}
|
||
onClick={onClose}
|
||
>
|
||
Cancel
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`${styles.primaryBtn} ${aiStyles.aiTrigger}`}
|
||
disabled={busy || disabled || prompt.trim().length < 10}
|
||
onClick={() => onRun(prompt.trim())}
|
||
>
|
||
{busy ? "Generating…" : "Run AI"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|