| 1 | import { useState } from "react"; |
| 2 | |
| 3 | import { MemoryReviewCard } from "@/components/thread/MemoryReviewCard"; |
| 4 | import { careerMemoryReviewPreview } from "@/lib/memory-review-preview"; |
| 5 | import type { MemoryReview } from "@/lib/types"; |
| 6 | |
| 7 | export function MemoryReviewPreviewPage() { |
| 8 | const [status, setStatus] = |
| 9 | useState<MemoryReview["status"]>("awaiting_method"); |
| 10 | const [attempt, setAttempt] = useState(1); |
| 11 | const [selectionMode, setSelectionMode] = |
| 12 | useState<MemoryReview["selection_mode"]>(null); |
| 13 | const [manualSelectedIds, setManualSelectedIds] = useState<string[]>([]); |
| 14 | const message = careerMemoryReviewPreview( |
| 15 | status, |
| 16 | attempt, |
| 17 | selectionMode, |
| 18 | manualSelectedIds, |
| 19 | ); |
| 20 | const review = message.memoryReview!; |
| 21 | |
| 22 | const reselect = () => { |
| 23 | setSelectionMode("vlm"); |
| 24 | setStatus("reselecting"); |
| 25 | window.setTimeout(() => { |
| 26 | setAttempt((value) => value + 1); |
| 27 | setStatus("awaiting_review"); |
| 28 | }, 900); |
| 29 | }; |
| 30 | |
| 31 | return ( |
| 32 | <main className="min-h-screen bg-background px-4 py-8 text-foreground sm:px-8"> |
| 33 | <div className="mx-auto w-full max-w-5xl"> |
| 34 | <header className="mb-8 space-y-2"> |
| 35 | <p className="text-xs font-medium uppercase tracking-[0.2em] text-violet-600 dark:text-violet-300"> |
| 36 | Local review preview |
| 37 | </p> |
| 38 | <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl"> |
| 39 | Memory Selection Review |
| 40 | </h1> |
| 41 | <p className="max-w-2xl text-sm leading-6 text-muted-foreground"> |
| 42 | Local review preview for the production memory workflow. |
| 43 | </p> |
| 44 | </header> |
| 45 | |
| 46 | <section className="rounded-3xl border bg-card/60 p-4 shadow-sm sm:p-6"> |
| 47 | <div className="mb-4 flex items-start gap-3"> |
| 48 | <div className="grid size-8 shrink-0 place-items-center rounded-full bg-violet-600 text-xs font-semibold text-white"> |
| 49 | AI |
| 50 | </div> |
| 51 | <div className="min-w-0 flex-1"> |
| 52 | <p className="text-sm leading-6">{message.content}</p> |
| 53 | <MemoryReviewCard |
| 54 | review={review} |
| 55 | onApprove={() => setStatus("approved")} |
| 56 | onReselect={reselect} |
| 57 | onManualSelect={async (memoryId) => { |
| 58 | setManualSelectedIds((current) => |
| 59 | current.includes(memoryId) |
| 60 | ? current |
| 61 | : [...current, memoryId], |
| 62 | ); |
| 63 | }} |
| 64 | onCreateMemoryAsset={async () => {}} |
| 65 | onSelectMode={(mode) => { |
| 66 | setSelectionMode(mode); |
| 67 | setStatus("selecting"); |
| 68 | window.setTimeout(() => setStatus("awaiting_review"), 500); |
| 69 | }} |
| 70 | /> |
| 71 | </div> |
| 72 | </div> |
| 73 | </section> |
| 74 | |
| 75 | <p className="mt-4 text-center text-xs text-muted-foreground"> |
| 76 | Decide whether to create new Memory, then add references manually or let VLM extract them. |
| 77 | </p> |
| 78 | </div> |
| 79 | </main> |
| 80 | ); |
| 81 | } |
| 82 |