109 lines
3.5 KiB
TypeScript
109 lines
3.5 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState } from "react";
|
||
|
|
import { useTranslations } from "next-intl";
|
||
|
|
import { Sparkles } from "lucide-react";
|
||
|
|
import { apiPostPublic, ApiClientError } from "@/lib/api/client";
|
||
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
|
||
|
|
type CoffeeAdvisorPick = {
|
||
|
|
name: string;
|
||
|
|
reason: string;
|
||
|
|
menuItemId?: string | null;
|
||
|
|
};
|
||
|
|
|
||
|
|
type CoffeeAdvisorResult = {
|
||
|
|
summary: string;
|
||
|
|
picks: CoffeeAdvisorPick[];
|
||
|
|
};
|
||
|
|
|
||
|
|
type CoffeeAdvisorPanelProps = {
|
||
|
|
cafeSlug: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function CoffeeAdvisorPanel({ cafeSlug }: CoffeeAdvisorPanelProps) {
|
||
|
|
const t = useTranslations("discoverPublic.coffeeAdvisor");
|
||
|
|
const [purpose, setPurpose] = useState("");
|
||
|
|
const [result, setResult] = useState<CoffeeAdvisorResult | null>(null);
|
||
|
|
const [error, setError] = useState<string | null>(null);
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
|
||
|
|
const submit = async () => {
|
||
|
|
const trimmed = purpose.trim();
|
||
|
|
if (trimmed.length < 3) return;
|
||
|
|
setLoading(true);
|
||
|
|
setError(null);
|
||
|
|
setResult(null);
|
||
|
|
try {
|
||
|
|
const data = await apiPostPublic<CoffeeAdvisorResult>(
|
||
|
|
"/api/public/coffee-advisor",
|
||
|
|
{ purpose: trimmed, cafeSlug }
|
||
|
|
);
|
||
|
|
setResult(data);
|
||
|
|
} catch (e) {
|
||
|
|
if (e instanceof ApiClientError && e.code === "AI_NOT_CONFIGURED") {
|
||
|
|
setError(t("notConfigured"));
|
||
|
|
} else {
|
||
|
|
setError(t("failed"));
|
||
|
|
}
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card className="rounded-xl border border-primary/20 bg-gradient-to-b from-[#E1F5EE]/40 to-card">
|
||
|
|
<CardHeader className="pb-2">
|
||
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
||
|
|
<Sparkles className="h-4 w-4 text-primary" aria-hidden />
|
||
|
|
{t("title")}
|
||
|
|
</CardTitle>
|
||
|
|
<p className="text-xs text-muted-foreground">{t("subtitle")}</p>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="space-y-3">
|
||
|
|
<div className="flex flex-col gap-2 sm:flex-row">
|
||
|
|
<Input
|
||
|
|
value={purpose}
|
||
|
|
onChange={(e) => setPurpose(e.target.value)}
|
||
|
|
placeholder={t("placeholder")}
|
||
|
|
onKeyDown={(e) => {
|
||
|
|
if (e.key === "Enter" && !loading) void submit();
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
className="shrink-0 bg-primary hover:bg-primary/90"
|
||
|
|
disabled={loading || purpose.trim().length < 3}
|
||
|
|
onClick={() => void submit()}
|
||
|
|
>
|
||
|
|
{loading ? t("loading") : t("submit")}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
{error ? (
|
||
|
|
<p className="text-sm text-destructive">{error}</p>
|
||
|
|
) : null}
|
||
|
|
{result ? (
|
||
|
|
<div className="space-y-3 rounded-lg border border-primary/15 bg-card/80 p-3">
|
||
|
|
<p className="text-sm leading-relaxed">{result.summary}</p>
|
||
|
|
{result.picks.length > 0 ? (
|
||
|
|
<ul className="space-y-2">
|
||
|
|
{result.picks.map((pick) => (
|
||
|
|
<li
|
||
|
|
key={`${pick.name}-${pick.menuItemId ?? "x"}`}
|
||
|
|
className="rounded-lg border border-border/60 bg-background px-3 py-2"
|
||
|
|
>
|
||
|
|
<p className="text-sm font-medium text-primary">{pick.name}</p>
|
||
|
|
<p className="mt-1 text-xs text-muted-foreground">{pick.reason}</p>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
) : null}
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|