75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { useGenerateResponse } from "@/modules/openai/hooks";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import { Brain, Sparkles } from "lucide-react";
|
|
|
|
export default function OpenAIPage() {
|
|
const { toast } = useToast();
|
|
const generateMutation = useGenerateResponse();
|
|
const [response, setResponse] = useState<any>(null);
|
|
|
|
const handleGenerate = async () => {
|
|
const samplePrompt = {
|
|
prompt: {
|
|
user_id: "USR78910",
|
|
recent_activities: [
|
|
{
|
|
type: "login",
|
|
platform: "Android",
|
|
timestamp: new Date().toISOString(),
|
|
},
|
|
],
|
|
},
|
|
};
|
|
|
|
try {
|
|
const result = await generateMutation.mutateAsync(samplePrompt);
|
|
setResponse(result);
|
|
toast({ title: "Response generated", description: "AI response generated successfully" });
|
|
} catch (error) {
|
|
toast({ title: "Generation failed", variant: "destructive" });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">OpenAI Integration</h1>
|
|
<p className="text-muted-foreground">Generate AI-powered responses</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>AI Response Generator</CardTitle>
|
|
<CardDescription>Generate intelligent responses using OpenAI</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<Button onClick={handleGenerate} disabled={generateMutation.isPending}>
|
|
<Sparkles className="mr-2 h-4 w-4" />
|
|
{generateMutation.isPending ? "Generating..." : "Generate Response"}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{response && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>AI Response</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<pre className="rounded-lg bg-muted p-4 text-sm overflow-auto">
|
|
{JSON.stringify(response, null, 2)}
|
|
</pre>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|