changes shopping
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
62ab5b2608
commit
f4bc93bc8a
17 files changed
+2290
-1025
No files matched your search
@@ -0,0 +1,242 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { Sparkles, Loader2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { ItemImageCapture, ProcessedImage } from "./ItemImageCapture";
|
||||
|
||||
interface ItemAiAssistantProps {
|
||||
locale: string;
|
||||
categories: string[];
|
||||
serverOptions: string[];
|
||||
onGenerated: (result: { json: unknown; prefill: ItemAiPrefill }) => void;
|
||||
}
|
||||
|
||||
export interface ItemAiPrefill {
|
||||
name?: string;
|
||||
description?: string;
|
||||
category?: string;
|
||||
rarity?: string | null;
|
||||
servers?: string[] | string;
|
||||
tags?: string[] | string;
|
||||
metadata?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export function ItemAiAssistant({
|
||||
locale,
|
||||
categories,
|
||||
serverOptions,
|
||||
onGenerated,
|
||||
}: ItemAiAssistantProps) {
|
||||
const [name, setName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [scope, setScope] = useState<"global" | "server">("global");
|
||||
const [server, setServer] = useState<string>(serverOptions[0] ?? "");
|
||||
const [images, setImages] = useState<ProcessedImage[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [rawJson, setRawJson] = useState<string | null>(null);
|
||||
|
||||
const disabled = useMemo(() => !name.trim() || !description.trim(), [name, description]);
|
||||
|
||||
const handleGenerate = useCallback(async () => {
|
||||
if (disabled || loading) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/admin/items/analyze", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
locale,
|
||||
name,
|
||||
description,
|
||||
scope,
|
||||
server: scope === "server" ? server : null,
|
||||
categories,
|
||||
servers: serverOptions,
|
||||
images: images.map((image) => image.dataUrl),
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json().catch(() => null);
|
||||
throw new Error(data?.error || "Falha na análise com IA.");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const structure = data?.structure ?? data;
|
||||
const columns = structure?.columns;
|
||||
|
||||
setRawJson(JSON.stringify(structure, null, 2));
|
||||
|
||||
const prefill: ItemAiPrefill = {
|
||||
name: typeof columns?.name === "string" ? columns.name : undefined,
|
||||
description: typeof columns?.description === "string" ? columns.description : undefined,
|
||||
metadata: typeof columns === "object" && columns !== null ? columns : undefined,
|
||||
};
|
||||
|
||||
if (columns) {
|
||||
if (typeof columns.category === "string") {
|
||||
prefill.category = columns.category;
|
||||
}
|
||||
if (Array.isArray(columns.servers)) {
|
||||
prefill.servers = columns.servers as string[];
|
||||
}
|
||||
if (typeof columns.servers === "string") {
|
||||
prefill.servers = columns.servers;
|
||||
}
|
||||
if (Array.isArray(columns.tags)) {
|
||||
prefill.tags = columns.tags as string[];
|
||||
}
|
||||
if (typeof columns.tags === "string") {
|
||||
prefill.tags = columns.tags;
|
||||
}
|
||||
if (columns.rarity && typeof columns.rarity === "string") {
|
||||
prefill.rarity = columns.rarity;
|
||||
}
|
||||
}
|
||||
|
||||
onGenerated({ json: structure, prefill });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError(err instanceof Error ? err.message : "Erro ao processar análise de IA.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [
|
||||
categories,
|
||||
description,
|
||||
disabled,
|
||||
images,
|
||||
locale,
|
||||
loading,
|
||||
name,
|
||||
onGenerated,
|
||||
scope,
|
||||
server,
|
||||
serverOptions,
|
||||
]);
|
||||
|
||||
return (
|
||||
<section className="space-y-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-2xl font-semibold flex items-center gap-2">
|
||||
<Sparkles className="h-5 w-5 text-primary" />
|
||||
Assistente IA para registro de item
|
||||
</h2>
|
||||
<p className="max-w-3xl text-sm text-muted-foreground">
|
||||
Cole prints e descreva o item. A IA vai sugerir a tabela, campos e metadados. Você pode ajustar os dados
|
||||
antes de salvar.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
Até 2 imagens · Compressão automática · Suporte a Ctrl+V
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-[1.1fr,0.9fr]">
|
||||
<div className="space-y-5">
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Nome do item</label>
|
||||
<Input
|
||||
value={name}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
placeholder="Ex.: Final Fate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Escopo</label>
|
||||
<Select value={scope} onValueChange={(value: "global" | "server") => setScope(value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="global">Global</SelectItem>
|
||||
<SelectItem value="server">Específico de servidor</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{scope === "server" && (
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Servidor alvo</label>
|
||||
<Select value={server} onValueChange={setServer}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione o servidor" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{serverOptions.map((option) => (
|
||||
<SelectItem key={option} value={option}>
|
||||
{option}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Descrição detalhada para a IA</label>
|
||||
<Textarea
|
||||
value={description}
|
||||
onChange={(event) => setDescription(event.target.value)}
|
||||
placeholder="Cole aqui todo o texto do item (atributos, requisitos, efeitos, etc.)"
|
||||
rows={6}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Prints / evidências visuais</label>
|
||||
<ItemImageCapture onImagesChange={setImages} />
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button type="button" onClick={handleGenerate} disabled={disabled || loading}>
|
||||
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
Gerar com IA
|
||||
</Button>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
A IA retornará um JSON com sugestões de campos. Eles serão aplicados automaticamente no formulário.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="min-h-full">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm">Prévia da resposta</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-xs text-muted-foreground">
|
||||
{rawJson ? (
|
||||
<pre className="max-h-[420px] overflow-auto rounded-md border bg-muted/40 p-3">
|
||||
{rawJson}
|
||||
</pre>
|
||||
) : (
|
||||
<p>
|
||||
Execute a análise para visualizar o JSON sugerido. Ele será usado para preencher automaticamente os
|
||||
campos do formulário.
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user