"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import Link from "next/link"; import { motion } from "motion/react"; import { ArrowUp, ArrowUpRight, Bookmark, Database, LoaderCircle, RotateCcw, Search, ShieldCheck, Sparkle, Square, User, X } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Textarea } from "@/components/ui/textarea"; import { Input } from "@/components/ui/input"; import { Card } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Progress } from "@/components/ui/progress"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { ProductImage } from "@/components/dashboard/product-image"; import { useLanguage } from "@/lib/i18n/context"; import { cn } from "@/lib/utils"; import { PLANS } from "@/config/plans"; import { STAGGER_CONTAINER, STAGGER_ITEM } from "@/components/dashboard/motion-variants"; import type { PlanCode } from "@prisma/client"; import type { AssistantAnalysisMode } from "@/lib/ai/model-router"; import type { AssistantHistoryMessage, AssistantProductReference, AssistantSource, AssistantUsage } from "@/lib/ai/types"; import type { SavedProductView } from "@/lib/product-data/view-models"; const COPY = { en: { title: "AI Sales Assistant", prompt: "Ask about products, trends, categories, or scores…", ask: "Ask assistant", stop: "Stop", composerTitle: "Where would you like to start?", composerSubtitle: "Describe what you want to accomplish with your TokNext data.", disabled: "AI assistant is disabled in this environment.", disabledHint: "An administrator must enable the feature and configure the server-side OpenAI key before requests can run.", suggestionsLabel: "Try a suggested prompt", savedTitle: "Saved products", savedDescription: "Select one to generate a grounded TikTok Shop script.", savedEmpty: "Save a product to generate a script from its verified data.", generateScript: "Generate script", openSaved: "Open saved products", scriptPrompt: "Create a TikTok Shop sales script for this saved product.", analysisMode: "Analysis depth", auto: "Auto", fast: "Fast", deep: "Deep", quickAnalysis: "Quick analysis", deepAnalysis: "Deep analysis", lightFallback: "Using quick analysis", contextTitle: "Assistant guardrails", usage: "Monthly usage", plan: "Plan", creditsByPlan: "Credits by plan", yourPlan: "Your plan", perMonth: "mo", upgradeForMore: "Upgrade for more credits", noCreditsLeft: "No credits left this month. Upgrade your plan to keep generating.", searchSaved: "Search saved products", noSavedMatch: "No saved products match that search.", answerTitle: "Conversation", answerSubtitle: "Responses cite the TokNext records used to build them.", noAnswer: "No response yet. Ask a question to start.", clear: "Clear", retry: "Retry", dismiss: "Dismiss", cancelled: "Request stopped.", error: "The assistant could not complete that request.", sources: "Records used", open: "Open product", unavailable: "Unavailable", suggestions: ["Which products have the best opportunity?", "Compare my saved products", "Explain the strongest Opportunity Scores", "What categories are growing?"], greeting: "Hi! I can search TokNext data, compare products, explain Opportunity Scores, and help you choose what to investigate next.", }, es: { title: "Asistente de ventas con IA", prompt: "Pregunta sobre productos, tendencias, categorías o puntajes…", ask: "Preguntar", stop: "Detener", composerTitle: "¿Por dónde quieres empezar?", composerSubtitle: "Describe qué quieres lograr con tus datos de TokNext.", disabled: "El asistente IA está desactivado en este entorno.", disabledHint: "Un administrador debe activar la función y configurar la clave de OpenAI del servidor antes de ejecutar solicitudes.", suggestionsLabel: "Prueba una pregunta sugerida", savedTitle: "Productos guardados", savedDescription: "Selecciona uno para generar un guion de TikTok Shop con datos reales.", savedEmpty: "Guarda un producto para crear un guion con sus datos verificados.", generateScript: "Generar guion", openSaved: "Abrir productos guardados", scriptPrompt: "Crea un guion de ventas para TikTok Shop sobre este producto guardado.", analysisMode: "Profundidad del análisis", auto: "Automático", fast: "Rápido", deep: "Profundo", quickAnalysis: "Análisis rápido", deepAnalysis: "Análisis profundo", lightFallback: "Usando análisis rápido", contextTitle: "Protecciones del asistente", usage: "Uso mensual", plan: "Plan", creditsByPlan: "Créditos por plan", yourPlan: "Tu plan", perMonth: "mes", upgradeForMore: "Mejora tu plan para más créditos", noCreditsLeft: "No te quedan créditos este mes. Mejora tu plan para seguir generando.", searchSaved: "Buscar productos guardados", noSavedMatch: "Ningún producto guardado coincide con esa búsqueda.", answerTitle: "Conversación", answerSubtitle: "Las respuestas muestran los registros TokNext utilizados.", noAnswer: "Aún no hay respuesta. Haz una pregunta para empezar.", clear: "Limpiar", retry: "Reintentar", dismiss: "Cerrar", cancelled: "Solicitud detenida.", error: "El asistente no pudo completar la solicitud.", sources: "Registros utilizados", open: "Abrir producto", unavailable: "No disponible", suggestions: ["¿Qué productos tienen mejor oportunidad?", "Compara mis productos guardados", "Explica los Puntajes de oportunidad más fuertes", "¿Qué categorías están creciendo?"], greeting: "¡Hola! Puedo buscar datos de TokNext, comparar productos, explicar Puntajes de oportunidad y ayudarte a decidir qué investigar después.", }, } as const; type ChatMessage = AssistantHistoryMessage & { id: string; sources?: AssistantSource[]; depth?: "fast" | "deep"; fallback?: boolean }; function planLabel(plan: PlanCode, locale: "en" | "es") { if (locale === "es") return plan === "AGENCY" ? "Agencia" : plan === "PRO" ? "Pro" : "Gratis"; return plan === "AGENCY" ? "Agency" : plan === "PRO" ? "Pro" : "Free"; } function scoreBadgeClasses(score: number | null): string { if (score === null) return "bg-muted text-muted-foreground"; return score >= 70 ? "bg-success/10 text-success" : score >= 40 ? "bg-muted text-foreground" : "bg-warning/10 text-warning"; } function ProductSource({ product, copy }: { product: AssistantProductReference; copy: { unavailable: string } }) { return ( {product.imageUrl ? ( // eslint-disable-next-line @next/next/no-img-element ) : ( {product.title} {product.category} · {product.sourceLabel} {product.opportunityScore ?? copy.unavailable} ); } export function AssistantPageContent({ enabled, plan, usage: initialUsage, savedProducts }: { enabled: boolean; plan: PlanCode; usage: AssistantUsage; savedProducts: SavedProductView[] }) { const { locale } = useLanguage(); const copy = COPY[locale]; const [question, setQuestion] = useState(""); const [analysisMode, setAnalysisMode] = useState("auto"); const [messages, setMessages] = useState([{ id: "greeting", role: "assistant", content: copy.greeting }]); const [usage, setUsage] = useState(initialUsage); const [pending, setPending] = useState(false); const [progress, setProgress] = useState(null); const [error, setError] = useState(null); const controllerRef = useRef(null); const [lastQuestion, setLastQuestion] = useState(""); const [savedFilter, setSavedFilter] = useState(""); const threadEndRef = useRef(null); async function handleAsk(event?: React.FormEvent, retryMessage?: string, savedProductId?: string) { event?.preventDefault(); const message = (retryMessage ?? question).trim(); if (!message || pending || !enabled || usage.remaining <= 0) return; const priorMessages = messages.map(({ role, content }) => ({ role, content })); setLastQuestion(message); setQuestion(""); setError(null); const assistantId = crypto.randomUUID(); setMessages((current) => [...current, { id: crypto.randomUUID(), role: "user", content: message }, { id: assistantId, role: "assistant", content: "" }]); setPending(true); setProgress(locale === "es" ? "Entendiendo tu solicitud…" : "Understanding your request…"); const controller = new AbortController(); controllerRef.current = controller; try { const response = await fetch("/api/ai/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message, history: priorMessages.slice(-8), locale, analysisMode, ...(savedProductId ? { savedProductId } : {}) }), signal: controller.signal, }); const isStream = response.headers.get("content-type")?.includes("application/x-ndjson"); if (!response.ok || !isStream) { const payload = await response.json().catch(() => null) as { error?: { message?: string } } | null; throw new Error(payload?.error?.message || copy.error); } if (!response.body) throw new Error(copy.error); const reader = response.body.getReader(); const decoder = new TextDecoder(); let buffer = ""; type StreamEvent = { type?: string; delta?: string; message?: string; sources?: AssistantSource[]; quota?: AssistantUsage; usage?: AssistantUsage | { inputTokens: number; outputTokens: number; totalTokens: number }; routing?: { depth?: "fast" | "deep"; fallback?: boolean }; code?: string }; const applyEvent = (event: StreamEvent) => { if (event.type === "tool.started") setProgress(event.message || (locale === "es" ? "Revisando datos de TokNext…" : "Reviewing TokNext data…")); if (event.type === "routing.completed") setProgress(locale === "es" ? "Preparando la respuesta…" : "Preparing your answer…"); if (event.type === "text.delta" && event.delta) setMessages((current) => current.map((item) => item.id === assistantId ? { ...item, content: item.content + event.delta } : item)); if (event.type === "response.completed") { setMessages((current) => current.map((item) => item.id === assistantId ? { ...item, sources: event.sources ?? [], depth: event.routing?.depth, fallback: event.routing?.fallback } : item)); if (event.quota) setUsage(event.quota); } if (event.type === "response.error") throw new Error(event.message || copy.error); }; while (true) { const chunk = await reader.read(); buffer += decoder.decode(chunk.value || new Uint8Array(), { stream: !chunk.done }); const lines = buffer.split("\n"); buffer = lines.pop() || ""; for (const line of lines) { if (!line.trim()) continue; try { applyEvent(JSON.parse(line) as StreamEvent); } catch { throw new Error(copy.error); } } if (chunk.done) break; } if (buffer.trim()) applyEvent(JSON.parse(buffer) as StreamEvent); } catch (caught) { if (caught instanceof DOMException && caught.name === "AbortError") setError(copy.cancelled); else setError(caught instanceof Error ? caught.message : copy.error); } finally { setPending(false); setProgress(null); controllerRef.current = null; } } function stop() { controllerRef.current?.abort(); } function clearConversation() { if (pending) return; setMessages([{ id: "greeting", role: "assistant", content: copy.greeting }]); setError(null); } function generateScript(savedProduct: SavedProductView) { const prompt = `${copy.scriptPrompt}\n\nProducto seleccionado: ${savedProduct.product.canonicalName}.`; void handleAsk(undefined, prompt, savedProduct.product.id); } useEffect(() => { threadEndRef.current?.scrollIntoView({ behavior: "smooth", block: "end" }); }, [messages, pending]); const filteredSavedProducts = useMemo(() => { const query = savedFilter.trim().toLowerCase(); const filtered = query ? savedProducts.filter( (saved) => saved.product.canonicalName.toLowerCase().includes(query) || saved.product.category.toLowerCase().includes(query), ) : savedProducts; return [...filtered].sort((a, b) => (b.product.score?.opportunityScore ?? -1) - (a.product.score?.opportunityScore ?? -1)); }, [savedProducts, savedFilter]); const percent = usage.limit > 0 ? Math.min(100, (usage.used / usage.limit) * 100) : 100; const askDisabledReason = !enabled ? copy.disabled : usage.remaining <= 0 ? copy.noCreditsLeft : null; const planOrder: PlanCode[] = ["FREE", "PRO", "AGENCY"]; return (

{copy.title}

{/* Chat card — conversation is always visible, including the greeting, so it reads as one continuous thread */}

{copy.composerTitle}

{copy.composerSubtitle}

{messages.length > 1 && ( )}
{!enabled && (
)} {/* Chat thread — fixed height so a growing conversation scrolls in place instead of pushing the composer and the rest of the page down. */}
{messages.map((item) => { const isUser = item.role === "user"; const isStreamingPlaceholder = pending && item.id === messages.at(-1)?.id && !item.content; return (
{isUser ? (
{!isUser && item.depth && ( {item.fallback ? copy.lightFallback : item.depth === "deep" ? copy.deepAnalysis : copy.quickAnalysis} )}
{isStreamingPlaceholder ? ( ) : item.id === "greeting" ? ( copy.greeting ) : ( item.content )}
{item.sources?.length ? (
{copy.sources} {item.sources.flatMap((source) => source.products).map((product) => ( ))}
) : null}
); })}
{error && (
{error}
)} {/* Composer */}