arnaudne/Epicure
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: persist AI chat history, add search across it

Browse Source 
Both chat panels (per-recipe and the general cooking assistant) previously
kept messages in component state only — closing the sheet or reloading
the page lost everything. Both POST routes now persist question+answer
pairs to a new chat_messages table (recipeId null for the general
assistant), and both panels load their own history back on open.

New GET /api/v1/ai/chat-history (scoped by recipeId, or scope=general for
the homepage assistant, or neither to search across everything) backs a
new search control in both panels' header — debounced, shows matched
messages with date and (when searching across everything) which recipe
they belonged to.

Verified locally: asked a real question, closed and reopened the panel
and confirmed the conversation reloaded, then searched a keyword from
that conversation and confirmed both the question and answer surfaced
in the results dropdown.
This commit is contained in:
Arnaud
2026-07-12 22:37:39 +02:00
parent 0062220d8e
commit 96ef5b8379
8 changed files with 237 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/recipe/chat-history-search.tsx
+108
View File
@@ -0,0 +1,108 @@
"use client";
import { useEffect, useRef, useState } from "react";
import { useTranslations } from "next-intl";
import { Search, X, Bot, User } from "lucide-react";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
type SearchResult = {
id: string;
role: "user" | "assistant";
content: string;
createdAt: string;
recipeId: string | null;
recipeTitle: string | null;
};
/**
* Search across the user's own AI-chat history. With `recipeId` set, scopes
* to that recipe's conversation; omit it to search everything the user has
* ever asked (both per-recipe chats and the general cooking assistant).
*/
export function ChatHistorySearch({ recipeId }: { recipeId?: string }) {
const t = useTranslations("chatHistory");
const [open, setOpen] = useState(false);
const [query, setQuery] = useState("");
const [results, setResults] = useState<SearchResult[]>([]);
const [loading, setLoading] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
function handleClickOutside(e: MouseEvent) {
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
setOpen(false);
}
}
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
useEffect(() => {
if (!query.trim()) return;
const timeout = setTimeout(() => {
setLoading(true);
const params = new URLSearchParams({ q: query.trim() });
if (recipeId) params.set("recipeId", recipeId);
fetch(`/api/v1/ai/chat-history?${params.toString()}`)
.then((res) => (res.ok ? res.json() : null))
.then((json: { data?: SearchResult[] } | null) => setResults(json?.data ?? []))
.catch(() => setResults([]))
.finally(() => setLoading(false));
}, 300);
return () => clearTimeout(timeout);
}, [query, recipeId]);
return (
<div ref={containerRef} className="relative">
<button
type="button"
onClick={() => setOpen((v) => !v)}
className="p-1.5 rounded-md hover:bg-muted transition-colors text-muted-foreground"
aria-label={t("searchAriaLabel")}
>
<Search className="h-4 w-4" />
</button>
{open && (
<div className="absolute right-0 top-full mt-1 w-80 rounded-lg border bg-popover shadow-lg z-50 max-h-96 flex flex-col">
<div className="p-2 border-b flex items-center gap-1">
<Input
autoFocus
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder={t("searchPlaceholder")}
className="h-8 text-sm"
/>
<button
type="button"
onClick={() => setOpen(false)}
className="p-1.5 rounded-md hover:bg-muted text-muted-foreground shrink-0"
aria-label={t("close")}
>
<X className="h-3.5 w-3.5" />
</button>
</div>
<div className="overflow-y-auto flex-1 p-1">
{loading && <p className="text-xs text-muted-foreground text-center py-4">{t("searching")}</p>}
{!loading && query.trim() && results.length === 0 && (
<p className="text-xs text-muted-foreground text-center py-4">{t("noResults")}</p>
)}
{!loading && query.trim() && results.map((r) => (
<div key={r.id} className="p-2 rounded-md hover:bg-muted/50 text-sm space-y-1">
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
{r.role === "user" ? <User className="h-3 w-3" /> : <Bot className="h-3 w-3" />}
<span>{new Date(r.createdAt).toLocaleDateString()}</span>
{r.recipeTitle && !recipeId && (
<span className="truncate">· {r.recipeTitle}</span>
)}
</div>
<p className={cn("line-clamp-2", r.role === "user" && "font-medium")}>{r.content}</p>
</div>
))}
</div>
</div>
)}
</div>
);
}
apps/web/components/recipe/cooking-assistant-panel.tsx
+22 -4
View File
@@ -8,12 +8,15 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sh
import { MessageCircle, Send, Bot, User } from "lucide-react";
import ReactMarkdown from "react-markdown";
import { cn } from "@/lib/utils";
import { ChatHistorySearch } from "./chat-history-search";
type Message = {
role: "user" | "assistant";
content: string;
};
type HistoryEntry = { role: "user" | "assistant"; content: string };
export function CookingAssistantPanel() {
const t = useTranslations("cookingChat");
const [open, setOpen] = useState(false);
@@ -21,6 +24,18 @@ export function CookingAssistantPanel() {
const [input, setInput] = useState("");
const [loading, setLoading] = useState(false);
const bottomRef = useRef<HTMLDivElement>(null);
const historyLoadedRef = useRef(false);
useEffect(() => {
if (!open || historyLoadedRef.current) return;
historyLoadedRef.current = true;
fetch("/api/v1/ai/chat-history?scope=general&limit=50")
.then((res) => (res.ok ? res.json() : null))
.then((json: { data?: HistoryEntry[] } | null) => {
if (json?.data?.length) setMessages(json.data.map((m) => ({ role: m.role, content: m.content })));
})
.catch(() => {});
}, [open]);
useEffect(() => {
if (open && bottomRef.current) {
@@ -83,10 +98,13 @@ export function CookingAssistantPanel() {
<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 pr-10 border-b shrink-0">
<SheetTitle className="text-base flex items-center gap-2">
<Bot className="h-4 w-4 text-primary" />
{t("title")}
</SheetTitle>
<div className="flex items-center justify-between gap-2">
<SheetTitle className="text-base flex items-center gap-2">
<Bot className="h-4 w-4 text-primary" />
{t("title")}
</SheetTitle>
<ChatHistorySearch />
</div>
<p className="text-xs text-muted-foreground text-left">{t("subtitle")}</p>
</SheetHeader>
apps/web/components/recipe/recipe-chat-panel.tsx
+22 -4
View File
@@ -8,12 +8,15 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sh
import { MessageCircle, Send, Bot, User } from "lucide-react";
import ReactMarkdown from "react-markdown";
import { cn } from "@/lib/utils";
import { ChatHistorySearch } from "./chat-history-search";
type Message = {
role: "user" | "assistant";
content: string;
};
type HistoryEntry = { role: "user" | "assistant"; content: string };
type Props = {
recipeId: string;
recipeTitle: string;
@@ -26,6 +29,18 @@ export function RecipeChatPanel({ recipeId, recipeTitle }: Props) {
const [input, setInput] = useState("");
const [loading, setLoading] = useState(false);
const bottomRef = useRef<HTMLDivElement>(null);
const historyLoadedRef = useRef(false);
useEffect(() => {
if (!open || historyLoadedRef.current) return;
historyLoadedRef.current = true;
fetch(`/api/v1/ai/chat-history?recipeId=${recipeId}&limit=50`)
.then((res) => (res.ok ? res.json() : null))
.then((json: { data?: HistoryEntry[] } | null) => {
if (json?.data?.length) setMessages(json.data.map((m) => ({ role: m.role, content: m.content })));
})
.catch(() => {});
}, [open, recipeId]);
useEffect(() => {
if (open && bottomRef.current) {
@@ -85,10 +100,13 @@ 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 pr-10 border-b shrink-0">
<SheetTitle className="text-base flex items-center gap-2">
<Bot className="h-4 w-4 text-primary" />
{t("title")}
</SheetTitle>
<div className="flex items-center justify-between gap-2">
<SheetTitle className="text-base flex items-center gap-2">
<Bot className="h-4 w-4 text-primary" />
{t("title")}
</SheetTitle>
<ChatHistorySearch recipeId={recipeId} />
</div>
<p className="text-xs text-muted-foreground text-left">{recipeTitle}</p>
</SheetHeader>