fix: substitute lookup, zero-quantity display, chatbot close button + markdown
- Substitute finder never applied the user's BYOK/admin AI key (only fell back to raw process.env), so it silently failed whenever the key was stored via settings rather than a literal env var. Now resolves via getDefaultProviderWithKey like every other AI route. Popover also surfaces real error messages instead of swallowing failures. - Ingredients with quantity 0 (salt, pepper, "to taste") rendered the literal digit "0" in cooking mode, print view, public recipe page, shopping lists, and serving scaler — several sites relied on generic truthiness/filter(Boolean), which doesn't catch a stored "0" string. Added a shared hasQuantity() helper and applied it everywhere quantity is rendered, plus in the AI recipe-chat context sent to the model. - Recipe chat panel rendered a duplicate close button on top of shadcn Sheet's own built-in close X, producing a garbled overlapping glyph. Removed the duplicate. - Recipe chat assistant replies are markdown from the model but were rendered as raw text; added react-markdown so formatting actually renders. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Arnaud
@@ -29,6 +29,7 @@ function scaleQty(quantity: string | number | null | undefined, scale: number):
|
||||
if (!quantity) return undefined;
|
||||
const n = typeof quantity === "number" ? quantity : parseFloat(quantity);
|
||||
if (isNaN(n)) return String(quantity);
|
||||
if (n === 0) return undefined;
|
||||
const scaled = n * scale;
|
||||
return scaled % 1 === 0 ? String(scaled) : scaled.toFixed(2).replace(/\.?0+$/, "");
|
||||
}
|
||||
|
||||
@@ -4,7 +4,8 @@ import { useState, useRef, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
|
||||
import { MessageCircle, Send, X, Bot, User } from "lucide-react";
|
||||
import { MessageCircle, Send, Bot, User } from "lucide-react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type Message = {
|
||||
@@ -81,16 +82,11 @@ export function RecipeChatPanel({ recipeId, recipeTitle }: Props) {
|
||||
|
||||
<Sheet open={open} onOpenChange={setOpen}>
|
||||
<SheetContent side="right" className="w-full sm:w-[420px] flex flex-col p-0">
|
||||
<SheetHeader className="px-4 py-3 border-b shrink-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<SheetTitle className="text-base flex items-center gap-2">
|
||||
<Bot className="h-4 w-4 text-primary" />
|
||||
Ask about this recipe
|
||||
</SheetTitle>
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setOpen(false)}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<SheetHeader className="px-4 py-3 pr-10 border-b shrink-0">
|
||||
<SheetTitle className="text-base flex items-center gap-2">
|
||||
<Bot className="h-4 w-4 text-primary" />
|
||||
Ask about this recipe
|
||||
</SheetTitle>
|
||||
<p className="text-xs text-muted-foreground text-left">{recipeTitle}</p>
|
||||
</SheetHeader>
|
||||
|
||||
@@ -131,12 +127,16 @@ export function RecipeChatPanel({ recipeId, recipeTitle }: Props) {
|
||||
{msg.role === "user" ? <User className="h-3.5 w-3.5" /> : <Bot className="h-3.5 w-3.5" />}
|
||||
</div>
|
||||
<div className={cn(
|
||||
"rounded-xl px-3 py-2 text-sm max-w-[80%] leading-relaxed whitespace-pre-wrap",
|
||||
"rounded-xl px-3 py-2 text-sm max-w-[80%] leading-relaxed",
|
||||
msg.role === "user"
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-muted"
|
||||
? "bg-primary text-primary-foreground whitespace-pre-wrap"
|
||||
: "bg-muted space-y-2 [&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-4 [&_ol]:pl-4 [&_strong]:font-semibold [&_li]:my-0.5"
|
||||
)}>
|
||||
{msg.content}
|
||||
{msg.role === "assistant" ? (
|
||||
<ReactMarkdown>{msg.content}</ReactMarkdown>
|
||||
) : (
|
||||
msg.content
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { useState } from "react";
|
||||
import { Minus, Plus, Sparkles, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { scaleQuantity } from "@/lib/fractions";
|
||||
import { scaleQuantity, hasQuantity } from "@/lib/fractions";
|
||||
import { SubstituteIngredientPopover } from "@/components/recipe/substitute-ingredient-popover";
|
||||
|
||||
type Ingredient = {
|
||||
@@ -135,7 +135,7 @@ export function ServingScaler({
|
||||
<li key={ing.id} className="flex gap-2 text-sm group">
|
||||
<span className="font-medium tabular-nums min-w-[3rem] text-right">
|
||||
{aiIng
|
||||
? `${aiIng.quantity}${aiIng.unit ? ` ${aiIng.unit}` : ""}`
|
||||
? `${hasQuantity(aiIng.quantity) ? aiIng.quantity : ""}${aiIng.unit ? ` ${aiIng.unit}` : ""}`
|
||||
: scaled
|
||||
? `${scaled}${ing.unit ? ` ${ing.unit}` : ""}`
|
||||
: ing.unit ?? ""}
|
||||
|
||||
@@ -33,20 +33,28 @@ export function SubstituteIngredientPopover({
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [substitutions, setSubstitutions] = useState<Substitution[]>([]);
|
||||
const [fetched, setFetched] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function fetchSubstitutions() {
|
||||
if (fetched) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch("/api/v1/ai/substitute", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ ingredient, recipeTitle }),
|
||||
});
|
||||
if (!res.ok) return;
|
||||
if (!res.ok) {
|
||||
const body = await res.json().catch(() => null) as { error?: string } | null;
|
||||
setError(body?.error ?? "Couldn't fetch substitutes.");
|
||||
return;
|
||||
}
|
||||
const data = await res.json() as { substitutions: Substitution[] };
|
||||
setSubstitutions(data.substitutions);
|
||||
setFetched(true);
|
||||
} catch {
|
||||
setError("Couldn't fetch substitutes.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -91,6 +99,9 @@ export function SubstituteIngredientPopover({
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{!loading && error && (
|
||||
<p className="text-sm text-destructive py-1">{error}</p>
|
||||
)}
|
||||
{!loading && fetched && substitutions.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground py-1">No substitutions found.</p>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user