feat: add asset preferences, video research, and Remotion ad assets
- Add thumbs-down feedback modal and preference API endpoint - Add AI UGC video platforms research doc - Add ReflectAd Remotion composition with public flow assets - Add gemini-ad-designer and poster-ad-designer pipeline skills - Add research_reflect_v1.1 pipeline script Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Trey t
+108
-15
@@ -1,11 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Play, Copy, Sparkles, Send } from "lucide-react";
|
||||
import { Play, Copy, Sparkles, Send, ThumbsUp, ThumbsDown } from "lucide-react";
|
||||
import { RepurposeModal } from "./repurpose-modal";
|
||||
import { VariationModal } from "./variation-modal";
|
||||
import { ThumbsDownModal } from "./thumbs-down-modal";
|
||||
|
||||
interface Asset {
|
||||
id: string;
|
||||
@@ -27,6 +28,7 @@ interface AssetCardProps {
|
||||
selected?: boolean;
|
||||
onSelect?: (id: string) => void;
|
||||
onPushToPostiz?: (assetIds: string[]) => void;
|
||||
onRefresh?: () => void;
|
||||
}
|
||||
|
||||
export function AssetCard({
|
||||
@@ -34,11 +36,21 @@ export function AssetCard({
|
||||
selected,
|
||||
onSelect,
|
||||
onPushToPostiz,
|
||||
onRefresh,
|
||||
}: AssetCardProps) {
|
||||
const [repurposeOpen, setRepurposeOpen] = useState(false);
|
||||
const [variationOpen, setVariationOpen] = useState(false);
|
||||
const [thumbsDownOpen, setThumbsDownOpen] = useState(false);
|
||||
const [vote, setVote] = useState<"up" | "down" | null>(null);
|
||||
|
||||
const metadata = asset.metadata ? JSON.parse(asset.metadata) : {};
|
||||
let metadata: Record<string, unknown> = {};
|
||||
if (asset.metadata) {
|
||||
try {
|
||||
metadata = JSON.parse(asset.metadata);
|
||||
} catch {
|
||||
// metadata may be truncated — ignore parse errors
|
||||
}
|
||||
}
|
||||
const isImage = asset.type === "image" || asset.format === "png" || asset.format === "jpg";
|
||||
const isVideo = asset.type === "video" || asset.format === "mp4";
|
||||
const fileSrc = `/api/files/${asset.filePath}`;
|
||||
@@ -54,6 +66,34 @@ export function AssetCard({
|
||||
? "Playwright"
|
||||
: null;
|
||||
|
||||
const isVisual = isImage || isVideo;
|
||||
|
||||
useEffect(() => {
|
||||
if (!isVisual) return;
|
||||
fetch(`/api/assets/${asset.id}/preference`)
|
||||
.then((r) => r.json())
|
||||
.then((data) => setVote(data.vote ?? null))
|
||||
.catch(() => {});
|
||||
}, [asset.id, isVisual]);
|
||||
|
||||
async function handleThumbsUp() {
|
||||
const newVote = vote === "up" ? null : "up";
|
||||
setVote(newVote); // Optimistic
|
||||
try {
|
||||
const res = await fetch(`/api/assets/${asset.id}/preference`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ vote: "up" }),
|
||||
});
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setVote(data.vote);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Preference API failed:", err);
|
||||
}
|
||||
}
|
||||
|
||||
const sourceColors: Record<string, string> = {
|
||||
Gemini: "text-purple-600 border-purple-200 bg-purple-50",
|
||||
"Canvas Design": "text-amber-600 border-amber-200 bg-amber-50",
|
||||
@@ -146,7 +186,7 @@ export function AssetCard({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{metadata.caption && (
|
||||
{typeof metadata.caption === "string" && (
|
||||
<p className="text-xs text-muted-foreground line-clamp-2">
|
||||
{metadata.caption}
|
||||
</p>
|
||||
@@ -172,18 +212,61 @@ export function AssetCard({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Style Preference Buttons */}
|
||||
{isVisual && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button
|
||||
onClick={handleThumbsUp}
|
||||
className={`flex items-center gap-1 rounded-md border px-2 py-1 text-xs transition-colors ${
|
||||
vote === "up"
|
||||
? "border-green-300 bg-green-50 text-green-700"
|
||||
: "border-border text-muted-foreground hover:bg-muted/50"
|
||||
}`}
|
||||
>
|
||||
<ThumbsUp className="h-3 w-3" />
|
||||
{vote === "up" ? "Liked" : "Like"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (vote === "down") {
|
||||
// Toggle off — optimistic
|
||||
setVote(null);
|
||||
fetch(`/api/assets/${asset.id}/preference`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ vote: "down" }),
|
||||
})
|
||||
.then((r) => r.json())
|
||||
.then((data) => setVote(data.vote))
|
||||
.catch(() => {});
|
||||
} else {
|
||||
setThumbsDownOpen(true);
|
||||
}
|
||||
}}
|
||||
className={`flex items-center gap-1 rounded-md border px-2 py-1 text-xs transition-colors ${
|
||||
vote === "down"
|
||||
? "border-red-300 bg-red-50 text-red-700"
|
||||
: "border-border text-muted-foreground hover:bg-muted/50"
|
||||
}`}
|
||||
>
|
||||
<ThumbsDown className="h-3 w-3" />
|
||||
{vote === "down" ? "Disliked" : "Dislike"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
{(isImage || isVideo) && (
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{onPushToPostiz && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="flex-1 min-w-0 overflow-hidden"
|
||||
className="w-full"
|
||||
onClick={() => onPushToPostiz([asset.id])}
|
||||
>
|
||||
<Send className="h-3 w-3 shrink-0" />
|
||||
<span className="truncate">Postiz</span>
|
||||
<Send className="h-3 w-3" />
|
||||
Push to Postiz
|
||||
</Button>
|
||||
)}
|
||||
{isImage && (
|
||||
@@ -191,20 +274,20 @@ export function AssetCard({
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="flex-1 min-w-0 overflow-hidden"
|
||||
className="w-full"
|
||||
onClick={() => setRepurposeOpen(true)}
|
||||
>
|
||||
<Copy className="h-3 w-3 shrink-0" />
|
||||
<span className="truncate">Repurpose</span>
|
||||
<Copy className="h-3 w-3" />
|
||||
Repurpose
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="flex-1 min-w-0 overflow-hidden"
|
||||
className="w-full"
|
||||
onClick={() => setVariationOpen(true)}
|
||||
>
|
||||
<Sparkles className="h-3 w-3 shrink-0" />
|
||||
<span className="truncate">Variations</span>
|
||||
<Sparkles className="h-3 w-3" />
|
||||
Spawn Variations
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
@@ -216,7 +299,10 @@ export function AssetCard({
|
||||
{repurposeOpen && (
|
||||
<RepurposeModal
|
||||
assetId={asset.id}
|
||||
onClose={() => setRepurposeOpen(false)}
|
||||
onClose={() => {
|
||||
setRepurposeOpen(false);
|
||||
onRefresh?.();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{variationOpen && (
|
||||
@@ -226,6 +312,13 @@ export function AssetCard({
|
||||
onClose={() => setVariationOpen(false)}
|
||||
/>
|
||||
)}
|
||||
{thumbsDownOpen && (
|
||||
<ThumbsDownModal
|
||||
assetId={asset.id}
|
||||
onClose={() => setThumbsDownOpen(false)}
|
||||
onSubmitted={() => setVote("down")}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user