85 lines
2.2 KiB
TypeScript
85 lines
2.2 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Card } from "@/components/ui/card";
|
|
|
|
interface AIToolbarProps {
|
|
isAuthenticated: boolean;
|
|
isPending: boolean;
|
|
aiPrompt: string;
|
|
setAiPrompt: (prompt: string) => void;
|
|
aiLoading: boolean;
|
|
onAiCreate: () => void;
|
|
onAiSummarize: () => void;
|
|
summary: string | null;
|
|
summaryUpdated: string | null;
|
|
}
|
|
|
|
export const AIToolbar = ({
|
|
isAuthenticated,
|
|
isPending,
|
|
aiPrompt,
|
|
setAiPrompt,
|
|
aiLoading,
|
|
onAiCreate,
|
|
onAiSummarize,
|
|
summary,
|
|
summaryUpdated,
|
|
}: AIToolbarProps) => {
|
|
return (
|
|
<>
|
|
{isPending ? (
|
|
<div className="mb-4 p-4 text-center animate-pulse bg-muted">
|
|
Loading...
|
|
</div>
|
|
) : (
|
|
<div>
|
|
{isAuthenticated ? (
|
|
<div className="flex flex-col sm:flex-row gap-4 mb-4 items-start">
|
|
<div className="w-full">
|
|
<Textarea
|
|
className="wrap-anywhere field-sizing-content resize-none w-full min-h-[2.5rem] max-h-64 overflow-y-auto sm:overflow-y-visible px-3 py-2 scroll-p-8 placeholder:italic"
|
|
style={{ clipPath: "inset(0 round 1rem)" }}
|
|
placeholder="Describe event for AI to create"
|
|
value={aiPrompt}
|
|
onChange={(e) => setAiPrompt(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-row gap-2 pt-1">
|
|
<Button onClick={onAiCreate} disabled={aiLoading}>
|
|
{aiLoading ? "Thinking..." : "AI Create"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="mb-4 p-4 border border-dashed rounded-lg text-center">
|
|
<div className="text-sm text-muted-foreground">
|
|
Sign in to unlock natural language event creation powered by AI
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Summary Panel */}
|
|
{summary && (
|
|
<Card className="p-4 mb-4">
|
|
<div className="text-sm mb-1">Summary updated {summaryUpdated}</div>
|
|
<div>{summary}</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* AI Actions Toolbar */}
|
|
<p className="text-muted-foreground text-sm pb-2 pl-1">AI actions</p>
|
|
<div className="gap-2 mb-4">
|
|
<Button
|
|
variant="secondary"
|
|
onClick={onAiSummarize}
|
|
disabled={aiLoading}
|
|
>
|
|
{aiLoading ? "Summarizing..." : "AI Summarize"}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|