855 lines
30 KiB
TypeScript
855 lines
30 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { useEffect, useRef, useState } from "react";
|
|||
|
|
import {
|
|||
|
|
ExternalLink,
|
|||
|
|
ImageIcon,
|
|||
|
|
Loader2,
|
|||
|
|
Pencil,
|
|||
|
|
Send,
|
|||
|
|
ShieldCheck,
|
|||
|
|
Sparkles,
|
|||
|
|
Upload,
|
|||
|
|
Wand2,
|
|||
|
|
X,
|
|||
|
|
} from "lucide-react";
|
|||
|
|
import { Badge } from "@/components/ui/badge";
|
|||
|
|
import { Button } from "@/components/ui/button";
|
|||
|
|
import { ConfirmDialog } from "@/components/ui/confirm-dialog";
|
|||
|
|
import { Input } from "@/components/ui/input";
|
|||
|
|
import { Label } from "@/components/ui/label";
|
|||
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|||
|
|
import { Textarea } from "@/components/ui/textarea";
|
|||
|
|
import { notify } from "@/lib/notifications/store";
|
|||
|
|
import { useCapabilities } from "@/lib/capabilities/context";
|
|||
|
|
import { MAX_DRAFT_IMAGES } from "@/lib/drafts/constants";
|
|||
|
|
import { THREADS_MAX_CHARS, cn } from "@/lib/utils";
|
|||
|
|
|
|||
|
|
export interface DraftData {
|
|||
|
|
id: string;
|
|||
|
|
text: string;
|
|||
|
|
angle?: string | null;
|
|||
|
|
hook?: string | null;
|
|||
|
|
imageBrief?: string | null;
|
|||
|
|
imagePath?: string | null;
|
|||
|
|
imagePaths?: string | null;
|
|||
|
|
draftType?: string | null;
|
|||
|
|
rationale?: string | null;
|
|||
|
|
sources?: string | null;
|
|||
|
|
status: string;
|
|||
|
|
factCheckResult?: string | null;
|
|||
|
|
createdAt: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface DraftCardProps {
|
|||
|
|
draft: DraftData;
|
|||
|
|
onUpdate: () => void;
|
|||
|
|
index?: number;
|
|||
|
|
selectable?: boolean;
|
|||
|
|
selected?: boolean;
|
|||
|
|
onSelectedChange?: (selected: boolean) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
type OptimizeMode = "polish" | "hook" | "shorter" | "engaging" | "custom";
|
|||
|
|
|
|||
|
|
const OPTIMIZE_MODES: { value: OptimizeMode; label: string }[] = [
|
|||
|
|
{ value: "polish", label: "整體潤飾" },
|
|||
|
|
{ value: "hook", label: "強化開頭" },
|
|||
|
|
{ value: "shorter", label: "精簡篇幅" },
|
|||
|
|
{ value: "engaging", label: "提升互動" },
|
|||
|
|
{ value: "custom", label: "自訂指令" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const statusLabels: Record<string, { label: string; variant: "warning" | "secondary" | "success" }> = {
|
|||
|
|
PENDING: { label: "待審核", variant: "warning" },
|
|||
|
|
EDITED: { label: "已編輯", variant: "secondary" },
|
|||
|
|
APPROVED: { label: "已核准", variant: "success" },
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
interface FactCheckData {
|
|||
|
|
isKnowledgeContent: boolean;
|
|||
|
|
passed: boolean;
|
|||
|
|
summary: string;
|
|||
|
|
issues: string[];
|
|||
|
|
verifiedPoints: string[];
|
|||
|
|
sources: Array<{ title: string; link: string }>;
|
|||
|
|
searchProviderLabel?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function parseFactCheckResult(raw: string | null | undefined): FactCheckData | null {
|
|||
|
|
if (!raw) return null;
|
|||
|
|
try {
|
|||
|
|
const parsed = JSON.parse(raw) as unknown;
|
|||
|
|
if (parsed && typeof parsed === "object" && "isKnowledgeContent" in parsed) {
|
|||
|
|
return parsed as FactCheckData;
|
|||
|
|
}
|
|||
|
|
} catch {
|
|||
|
|
// ignore
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function parseDraftImagePaths(source: Pick<DraftData, "imagePath" | "imagePaths">): string[] {
|
|||
|
|
if (source.imagePaths) {
|
|||
|
|
try {
|
|||
|
|
const parsed = JSON.parse(source.imagePaths) as unknown;
|
|||
|
|
if (Array.isArray(parsed)) {
|
|||
|
|
return parsed.filter((item): item is string => typeof item === "string");
|
|||
|
|
}
|
|||
|
|
} catch {
|
|||
|
|
// Fall back to the legacy single-image field.
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return source.imagePath ? [source.imagePath] : [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function DraftCard({
|
|||
|
|
draft,
|
|||
|
|
onUpdate,
|
|||
|
|
index = 0,
|
|||
|
|
selectable = false,
|
|||
|
|
selected = false,
|
|||
|
|
onSelectedChange,
|
|||
|
|
}: DraftCardProps) {
|
|||
|
|
const [editing, setEditing] = useState(false);
|
|||
|
|
const [text, setText] = useState(draft.text);
|
|||
|
|
const [loading, setLoading] = useState<string | null>(null);
|
|||
|
|
const [optimizing, setOptimizing] = useState(false);
|
|||
|
|
const [showOptimize, setShowOptimize] = useState(false);
|
|||
|
|
const [optimizeMode, setOptimizeMode] = useState<OptimizeMode>("polish");
|
|||
|
|
const [customInstruction, setCustomInstruction] = useState("");
|
|||
|
|
const [optimizeSummary, setOptimizeSummary] = useState<string | null>(null);
|
|||
|
|
const [previousText, setPreviousText] = useState<string | null>(null);
|
|||
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|||
|
|
const { isReady } = useCapabilities();
|
|||
|
|
const canPublish = isReady("publish");
|
|||
|
|
|
|||
|
|
const [imagePaths, setImagePaths] = useState<string[]>(() => parseDraftImagePaths(draft));
|
|||
|
|
const [confirmDialog, setConfirmDialog] = useState<{
|
|||
|
|
title: string;
|
|||
|
|
description?: string;
|
|||
|
|
confirmText?: string;
|
|||
|
|
danger?: boolean;
|
|||
|
|
onConfirm: () => void | Promise<void>;
|
|||
|
|
} | null>(null);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
setImagePaths(
|
|||
|
|
parseDraftImagePaths({ imagePath: draft.imagePath, imagePaths: draft.imagePaths })
|
|||
|
|
);
|
|||
|
|
}, [draft.imagePath, draft.imagePaths]);
|
|||
|
|
const [factCheck, setFactCheck] = useState<FactCheckData | null>(() =>
|
|||
|
|
parseFactCheckResult(draft.factCheckResult)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
setFactCheck(parseFactCheckResult(draft.factCheckResult));
|
|||
|
|
}, [draft.factCheckResult]);
|
|||
|
|
|
|||
|
|
const sources: string[] = (() => {
|
|||
|
|
if (!draft.sources) return [];
|
|||
|
|
try {
|
|||
|
|
const parsed = JSON.parse(draft.sources);
|
|||
|
|
return Array.isArray(parsed) ? parsed.filter((s): s is string => typeof s === "string") : [];
|
|||
|
|
} catch {
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
})();
|
|||
|
|
const charCount = text.length;
|
|||
|
|
const overLimit = charCount > THREADS_MAX_CHARS;
|
|||
|
|
const statusInfo = statusLabels[draft.status] ?? { label: draft.status, variant: "secondary" as const };
|
|||
|
|
const angleInitial = (draft.angle ?? "稿").charAt(0);
|
|||
|
|
function imagePreviewUrl(imagePath: string) {
|
|||
|
|
return `/api/drafts/${draft.id}/image?p=${encodeURIComponent(imagePath)}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleUploadImages(files: File[]) {
|
|||
|
|
if (files.length === 0) return;
|
|||
|
|
if (imagePaths.length + files.length > MAX_DRAFT_IMAGES) {
|
|||
|
|
notify({
|
|||
|
|
type: "error",
|
|||
|
|
title: "超過配圖上限",
|
|||
|
|
message: `每篇草稿最多 ${MAX_DRAFT_IMAGES} 張配圖`,
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setLoading("upload-image");
|
|||
|
|
const formData = new FormData();
|
|||
|
|
for (const file of files) formData.append("file", file);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`/api/drafts/${draft.id}/image`, {
|
|||
|
|
method: "POST",
|
|||
|
|
body: formData,
|
|||
|
|
});
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) {
|
|||
|
|
notify({ type: "error", title: "上傳失敗", message: data.error });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setImagePaths(data.imagePaths ?? parseDraftImagePaths(data.draft ?? draft));
|
|||
|
|
notify({
|
|||
|
|
type: "success",
|
|||
|
|
title: "配圖已上傳",
|
|||
|
|
message: files.length > 1 ? `已新增 ${files.length} 張圖片` : undefined,
|
|||
|
|
});
|
|||
|
|
onUpdate();
|
|||
|
|
} catch {
|
|||
|
|
notify({ type: "error", title: "上傳失敗", message: "網路連線異常，請稍後再試" });
|
|||
|
|
} finally {
|
|||
|
|
setLoading(null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleGenerateImage() {
|
|||
|
|
setLoading("gen-image");
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`/api/drafts/${draft.id}/generate-image`, {
|
|||
|
|
method: "POST",
|
|||
|
|
});
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) {
|
|||
|
|
notify({ type: "error", title: "AI 生圖失敗", message: data.error });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setImagePaths(data.imagePaths ?? parseDraftImagePaths(data.draft ?? draft));
|
|||
|
|
notify({ type: "success", title: "AI 配圖已生成" });
|
|||
|
|
onUpdate();
|
|||
|
|
} catch {
|
|||
|
|
notify({ type: "error", title: "AI 生圖失敗", message: "網路連線異常，請稍後再試" });
|
|||
|
|
} finally {
|
|||
|
|
setLoading(null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleRemoveImage(imagePath: string) {
|
|||
|
|
setLoading("remove-image");
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(
|
|||
|
|
`/api/drafts/${draft.id}/image?p=${encodeURIComponent(imagePath)}`,
|
|||
|
|
{ method: "DELETE" }
|
|||
|
|
);
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) {
|
|||
|
|
notify({ type: "error", title: "移除配圖失敗", message: data.error });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setImagePaths(data.imagePaths ?? []);
|
|||
|
|
onUpdate();
|
|||
|
|
} catch {
|
|||
|
|
notify({ type: "error", title: "移除配圖失敗", message: "網路連線異常，請稍後再試" });
|
|||
|
|
} finally {
|
|||
|
|
setLoading(null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleClearImages() {
|
|||
|
|
setConfirmDialog({
|
|||
|
|
title: "移除全部配圖",
|
|||
|
|
description: "確定要移除這篇草稿的全部配圖？",
|
|||
|
|
confirmText: "移除",
|
|||
|
|
danger: true,
|
|||
|
|
onConfirm: async () => {
|
|||
|
|
setLoading("remove-image");
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`/api/drafts/${draft.id}/image`, { method: "DELETE" });
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) {
|
|||
|
|
notify({ type: "error", title: "移除配圖失敗", message: data.error });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setImagePaths([]);
|
|||
|
|
onUpdate();
|
|||
|
|
} catch {
|
|||
|
|
notify({ type: "error", title: "移除配圖失敗", message: "網路連線異常，請稍後再試" });
|
|||
|
|
} finally {
|
|||
|
|
setLoading(null);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleSave() {
|
|||
|
|
setLoading("save");
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`/api/drafts/${draft.id}`, {
|
|||
|
|
method: "PATCH",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({ text, status: "EDITED" }),
|
|||
|
|
});
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) {
|
|||
|
|
notify({ type: "error", title: "儲存失敗", message: data.error });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setEditing(false);
|
|||
|
|
setOptimizeSummary(null);
|
|||
|
|
setPreviousText(null);
|
|||
|
|
onUpdate();
|
|||
|
|
} catch {
|
|||
|
|
notify({ type: "error", title: "儲存失敗", message: "網路連線異常，請稍後再試" });
|
|||
|
|
} finally {
|
|||
|
|
setLoading(null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleOptimize(apply = false) {
|
|||
|
|
setOptimizing(true);
|
|||
|
|
setOptimizeSummary(null);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const res = await fetch("/api/optimize", {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
draftId: draft.id,
|
|||
|
|
text,
|
|||
|
|
mode: optimizeMode,
|
|||
|
|
instruction: optimizeMode === "custom" ? customInstruction : undefined,
|
|||
|
|
save: apply,
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
|
|||
|
|
if (!res.ok) {
|
|||
|
|
notify({ type: "error", title: "AI 優化失敗", message: data.error });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (apply) {
|
|||
|
|
setText(data.text);
|
|||
|
|
setEditing(false);
|
|||
|
|
setShowOptimize(false);
|
|||
|
|
setPreviousText(null);
|
|||
|
|
setOptimizeSummary(data.summary);
|
|||
|
|
onUpdate();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setPreviousText(text);
|
|||
|
|
setText(data.text);
|
|||
|
|
setEditing(true);
|
|||
|
|
setShowOptimize(false);
|
|||
|
|
setOptimizeSummary(data.summary);
|
|||
|
|
} catch {
|
|||
|
|
notify({ type: "error", title: "AI 優化失敗", message: "網路連線異常，請稍後再試" });
|
|||
|
|
} finally {
|
|||
|
|
setOptimizing(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleUndoOptimize() {
|
|||
|
|
if (previousText) {
|
|||
|
|
setText(previousText);
|
|||
|
|
setPreviousText(null);
|
|||
|
|
setOptimizeSummary(null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleFactCheck() {
|
|||
|
|
setLoading("factcheck");
|
|||
|
|
setFactCheck(null);
|
|||
|
|
try {
|
|||
|
|
const res = await fetch("/api/fact-check", {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({ draftId: draft.id, text }),
|
|||
|
|
});
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) {
|
|||
|
|
notify({ type: "error", title: "查證失敗", message: data.error });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setFactCheck(data.factCheck);
|
|||
|
|
const fc = data.factCheck;
|
|||
|
|
if (fc.isKnowledgeContent) {
|
|||
|
|
notify({
|
|||
|
|
type: fc.passed ? "success" : "warning",
|
|||
|
|
title: fc.passed ? "知識查證通過" : "知識查證未通過",
|
|||
|
|
message: fc.summary,
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
notify({ type: "info", title: "非知識型內容", message: fc.summary });
|
|||
|
|
}
|
|||
|
|
onUpdate();
|
|||
|
|
} catch {
|
|||
|
|
notify({ type: "error", title: "查證失敗", message: "網路連線異常，請稍後再試" });
|
|||
|
|
} finally {
|
|||
|
|
setLoading(null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handlePublish() {
|
|||
|
|
setConfirmDialog({
|
|||
|
|
title: "發布到 Threads",
|
|||
|
|
description: "確定要發布這篇貼文到 Threads？知識型內容會先經網路搜尋查證。",
|
|||
|
|
confirmText: "發布",
|
|||
|
|
onConfirm: async () => {
|
|||
|
|
setLoading("publish");
|
|||
|
|
try {
|
|||
|
|
const res = await fetch("/api/publish", {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({ draftId: draft.id }),
|
|||
|
|
});
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) {
|
|||
|
|
if (data.factCheck) setFactCheck(data.factCheck);
|
|||
|
|
notify({
|
|||
|
|
type: "error",
|
|||
|
|
title: res.status === 422 ? "知識型內容未通過查證" : "發布失敗",
|
|||
|
|
message: data.factCheck?.issues?.join("；") ?? data.error,
|
|||
|
|
href: data.debugRunId ? `/debug` : undefined,
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (data.factCheck) setFactCheck(data.factCheck);
|
|||
|
|
notify({
|
|||
|
|
type: "success",
|
|||
|
|
title: "已發布到你的 Threads",
|
|||
|
|
message: [
|
|||
|
|
data.method === "api" ? "已透過官方 API 發布。" : "貼文已送出。",
|
|||
|
|
data.warning,
|
|||
|
|
"草稿已移至已發布。",
|
|||
|
|
]
|
|||
|
|
.filter(Boolean)
|
|||
|
|
.join(" "),
|
|||
|
|
href: "/published",
|
|||
|
|
});
|
|||
|
|
onUpdate();
|
|||
|
|
} catch {
|
|||
|
|
notify({ type: "error", title: "發布失敗", message: "網路連線異常，請稍後再試" });
|
|||
|
|
} finally {
|
|||
|
|
setLoading(null);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleReject() {
|
|||
|
|
setConfirmDialog({
|
|||
|
|
title: "拒絕草稿",
|
|||
|
|
description: "確定要拒絕這篇草稿？此操作無法復原。",
|
|||
|
|
confirmText: "拒絕",
|
|||
|
|
danger: true,
|
|||
|
|
onConfirm: async () => {
|
|||
|
|
setLoading("reject");
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`/api/drafts/${draft.id}`, { method: "DELETE" });
|
|||
|
|
if (!res.ok) {
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
notify({ type: "error", title: "拒絕失敗", message: data.error });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
onUpdate();
|
|||
|
|
} catch {
|
|||
|
|
notify({ type: "error", title: "拒絕失敗", message: "網路連線異常，請稍後再試" });
|
|||
|
|
} finally {
|
|||
|
|
setLoading(null);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<article
|
|||
|
|
className="animate-fade-in-up py-7 first:pt-0"
|
|||
|
|
style={{ animationDelay: `${index * 40}ms` }}
|
|||
|
|
>
|
|||
|
|
<div className="flex gap-3">
|
|||
|
|
{selectable && (
|
|||
|
|
<label className="mt-2 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
className="h-4 w-4 rounded border-border accent-primary"
|
|||
|
|
checked={selected}
|
|||
|
|
onChange={(event) => onSelectedChange?.(event.target.checked)}
|
|||
|
|
aria-label={`選取 ${draft.angle ?? "草稿"}`}
|
|||
|
|
/>
|
|||
|
|
</label>
|
|||
|
|
)}
|
|||
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-secondary text-sm font-semibold text-muted-foreground">
|
|||
|
|
{angleInitial}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="min-w-0 flex-1">
|
|||
|
|
<div className="flex items-start justify-between gap-3">
|
|||
|
|
<div className="min-w-0">
|
|||
|
|
<div className="flex flex-wrap items-center gap-x-1.5 gap-y-1">
|
|||
|
|
<span className="text-[15px] font-semibold">{draft.angle ?? "草稿"}</span>
|
|||
|
|
<span className="text-muted-foreground">·</span>
|
|||
|
|
<span className="text-[13px] text-muted-foreground">
|
|||
|
|
{new Date(draft.createdAt).toLocaleDateString("zh-TW", {
|
|||
|
|
month: "short",
|
|||
|
|
day: "numeric",
|
|||
|
|
})}
|
|||
|
|
</span>
|
|||
|
|
<Badge variant={statusInfo.variant}>{statusInfo.label}</Badge>
|
|||
|
|
{draft.draftType === "viral-replica" && (
|
|||
|
|
<Badge variant="outline">爆款複製</Badge>
|
|||
|
|
)}
|
|||
|
|
{factCheck && (factCheck.passed || !factCheck.isKnowledgeContent) && (
|
|||
|
|
<span
|
|||
|
|
className="relative inline-flex items-center gap-1 rounded-md border border-success-border bg-success-bg px-2 py-0.5 text-[11px] font-medium text-success"
|
|||
|
|
title={
|
|||
|
|
factCheck.isKnowledgeContent
|
|||
|
|
? `已查證通過${factCheck.searchProviderLabel ? `（${factCheck.searchProviderLabel}）` : ""}\n${factCheck.summary}${factCheck.verifiedPoints.length > 0 ? `\n\n查證重點：\n${factCheck.verifiedPoints.map((p) => `• ${p}`).join("\n")}` : ""}`
|
|||
|
|
: "非知識型內容，無需查證"
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<ShieldCheck className="h-3 w-3" />
|
|||
|
|
已查證
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
{factCheck && factCheck.isKnowledgeContent && !factCheck.passed && (
|
|||
|
|
<span
|
|||
|
|
className="relative inline-flex items-center gap-1 rounded-md border border-warning-border bg-warning-bg px-2 py-0.5 text-[11px] font-medium text-warning"
|
|||
|
|
title={`查證未通過\n${factCheck.issues.join("；")}`}
|
|||
|
|
>
|
|||
|
|
<ShieldCheck className="h-3 w-3" />
|
|||
|
|
查證未過
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
{draft.rationale && (
|
|||
|
|
<p className="mt-0.5 text-[13px] leading-relaxed text-muted-foreground">
|
|||
|
|
{draft.rationale}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{showOptimize && (
|
|||
|
|
<div className="mt-3 space-y-3 rounded-lg border border-border bg-muted p-3.5">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<Wand2 className="h-4 w-4" />
|
|||
|
|
<p className="text-sm font-semibold">AI 優化</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>優化方向</Label>
|
|||
|
|
<Select value={optimizeMode} onValueChange={(v) => setOptimizeMode(v as OptimizeMode)}>
|
|||
|
|
<SelectTrigger>
|
|||
|
|
<SelectValue />
|
|||
|
|
</SelectTrigger>
|
|||
|
|
<SelectContent>
|
|||
|
|
{OPTIMIZE_MODES.map((m) => (
|
|||
|
|
<SelectItem key={m.value} value={m.value}>
|
|||
|
|
{m.label}
|
|||
|
|
</SelectItem>
|
|||
|
|
))}
|
|||
|
|
</SelectContent>
|
|||
|
|
</Select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{optimizeMode === "custom" && (
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>自訂指令</Label>
|
|||
|
|
<Input
|
|||
|
|
value={customInstruction}
|
|||
|
|
onChange={(e) => setCustomInstruction(e.target.value)}
|
|||
|
|
placeholder="例：語氣更口語、加入一個反問句"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
<Button size="sm" onClick={() => handleOptimize(false)} disabled={optimizing}>
|
|||
|
|
<Wand2 className="h-3.5 w-3.5" />
|
|||
|
|
{optimizing ? "優化中…" : "預覽優化"}
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="secondary"
|
|||
|
|
onClick={() => handleOptimize(true)}
|
|||
|
|
disabled={optimizing}
|
|||
|
|
>
|
|||
|
|
套用並儲存
|
|||
|
|
</Button>
|
|||
|
|
<Button size="sm" variant="ghost" onClick={() => setShowOptimize(false)}>
|
|||
|
|
取消
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{optimizeSummary && (
|
|||
|
|
<div className="mt-3 rounded-lg border border-border bg-muted px-3.5 py-2.5">
|
|||
|
|
<p className="text-[12px] font-medium text-muted-foreground">AI 調整說明</p>
|
|||
|
|
<p className="mt-1 text-[14px] leading-relaxed">{optimizeSummary}</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{factCheck && (
|
|||
|
|
<div
|
|||
|
|
className={cn(
|
|||
|
|
"mt-3 rounded-lg border px-3.5 py-2.5 text-[13px]",
|
|||
|
|
factCheck.passed || !factCheck.isKnowledgeContent
|
|||
|
|
? "border-border bg-muted"
|
|||
|
|
: "border-warning-border bg-warning-bg text-warning"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<p className="font-medium">
|
|||
|
|
{factCheck.isKnowledgeContent
|
|||
|
|
? factCheck.passed
|
|||
|
|
? "知識查證通過"
|
|||
|
|
: "知識查證未通過"
|
|||
|
|
: "非知識型，可直接發布"}
|
|||
|
|
{factCheck.searchProviderLabel && ` · ${factCheck.searchProviderLabel}`}
|
|||
|
|
</p>
|
|||
|
|
<p className="mt-1 leading-relaxed text-muted-foreground">{factCheck.summary}</p>
|
|||
|
|
{factCheck.issues.length > 0 && (
|
|||
|
|
<ul className="mt-2 list-inside list-disc text-warning">
|
|||
|
|
{factCheck.issues.map((issue) => (
|
|||
|
|
<li key={issue}>{issue}</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
)}
|
|||
|
|
{factCheck.sources.length > 0 && (
|
|||
|
|
<div className="mt-2 space-y-1">
|
|||
|
|
{factCheck.sources.map((s) => (
|
|||
|
|
<a
|
|||
|
|
key={s.link}
|
|||
|
|
href={s.link}
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="block truncate text-[12px] underline"
|
|||
|
|
>
|
|||
|
|
{s.title}
|
|||
|
|
</a>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{draft.hook && !editing && (
|
|||
|
|
<p className="mt-2 text-[14px] font-medium leading-snug">{draft.hook}</p>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="mt-2">
|
|||
|
|
{editing ? (
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Textarea value={text} onChange={(e) => setText(e.target.value)} rows={6} />
|
|||
|
|
<p
|
|||
|
|
className={cn(
|
|||
|
|
"font-mono text-xs",
|
|||
|
|
overLimit ? "text-destructive" : "text-muted-foreground"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{charCount} / {THREADS_MAX_CHARS}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<p className="font-readable whitespace-pre-wrap">{text}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="mt-3 rounded-lg border border-border bg-muted/50 p-3.5">
|
|||
|
|
<div className="mb-2.5 flex flex-wrap items-center justify-between gap-2">
|
|||
|
|
<p className="flex items-center gap-1.5 text-[13px] font-semibold">
|
|||
|
|
<ImageIcon className="h-3.5 w-3.5" />
|
|||
|
|
配圖
|
|||
|
|
</p>
|
|||
|
|
<div className="flex flex-wrap gap-1.5">
|
|||
|
|
<input
|
|||
|
|
ref={fileInputRef}
|
|||
|
|
type="file"
|
|||
|
|
accept="image/jpeg,image/png,image/webp,image/gif"
|
|||
|
|
multiple
|
|||
|
|
className="hidden"
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const files = Array.from(e.target.files ?? []);
|
|||
|
|
if (files.length > 0) void handleUploadImages(files);
|
|||
|
|
e.target.value = "";
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="outline"
|
|||
|
|
onClick={() => fileInputRef.current?.click()}
|
|||
|
|
disabled={!!loading || optimizing}
|
|||
|
|
>
|
|||
|
|
{loading === "upload-image" ? (
|
|||
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|||
|
|
) : (
|
|||
|
|
<Upload className="h-3.5 w-3.5" />
|
|||
|
|
)}
|
|||
|
|
上傳圖片
|
|||
|
|
</Button>
|
|||
|
|
{imagePaths.length > 0 && (
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="ghost"
|
|||
|
|
className="text-destructive hover:text-destructive"
|
|||
|
|
onClick={handleClearImages}
|
|||
|
|
disabled={!!loading || optimizing}
|
|||
|
|
>
|
|||
|
|
全部移除
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="outline"
|
|||
|
|
onClick={handleGenerateImage}
|
|||
|
|
disabled={!!loading || optimizing}
|
|||
|
|
>
|
|||
|
|
{loading === "gen-image" ? (
|
|||
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|||
|
|
) : (
|
|||
|
|
<Sparkles className="h-3.5 w-3.5" />
|
|||
|
|
)}
|
|||
|
|
AI 生圖
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{imagePaths.length > 0 ? (
|
|||
|
|
<div
|
|||
|
|
className={cn(
|
|||
|
|
"grid gap-2.5",
|
|||
|
|
imagePaths.length > 1 ? "sm:grid-cols-2" : "grid-cols-1"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{imagePaths.map((imagePath, index) => (
|
|||
|
|
<div
|
|||
|
|
key={imagePath}
|
|||
|
|
className="overflow-hidden rounded-lg border border-border bg-background"
|
|||
|
|
>
|
|||
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|||
|
|
<img
|
|||
|
|
src={imagePreviewUrl(imagePath)}
|
|||
|
|
alt={`草稿配圖 ${index + 1}`}
|
|||
|
|
className="max-h-80 w-full object-contain"
|
|||
|
|
/>
|
|||
|
|
<div className="flex items-center justify-between border-t border-border px-3 py-2">
|
|||
|
|
<span className="text-[12px] text-muted-foreground">圖片 {index + 1}</span>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="ghost"
|
|||
|
|
className="h-7 text-destructive hover:text-destructive"
|
|||
|
|
onClick={() => handleRemoveImage(imagePath)}
|
|||
|
|
disabled={!!loading || optimizing}
|
|||
|
|
>
|
|||
|
|
移除
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<p className="text-[13px] text-muted-foreground">
|
|||
|
|
可一次選多張圖片上傳（最多 {MAX_DRAFT_IMAGES} 張），或請 AI 生成。發布時會一併附上。
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{draft.imageBrief && (
|
|||
|
|
<div className="mt-2.5 rounded-md bg-background px-3 py-2">
|
|||
|
|
<p className="text-[11px] font-medium text-muted-foreground">配圖製作說明</p>
|
|||
|
|
<p className="mt-1 whitespace-pre-wrap text-[13px] leading-relaxed">
|
|||
|
|
{draft.imageBrief}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{sources.length > 0 && (
|
|||
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|||
|
|
{sources.map((url) => (
|
|||
|
|
<a
|
|||
|
|
key={url}
|
|||
|
|
href={url}
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="inline-flex items-center gap-1 text-[13px] text-muted-foreground transition-colors hover:text-foreground"
|
|||
|
|
>
|
|||
|
|
<ExternalLink className="h-3 w-3" />
|
|||
|
|
參考來源
|
|||
|
|
</a>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="mt-3 flex flex-wrap gap-1.5">
|
|||
|
|
{editing ? (
|
|||
|
|
<>
|
|||
|
|
<Button size="sm" onClick={handleSave} disabled={!!loading || overLimit || optimizing}>
|
|||
|
|
儲存
|
|||
|
|
</Button>
|
|||
|
|
{previousText && (
|
|||
|
|
<Button size="sm" variant="outline" onClick={handleUndoOptimize} disabled={optimizing}>
|
|||
|
|
還原優化前
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="ghost"
|
|||
|
|
onClick={() => {
|
|||
|
|
setEditing(false);
|
|||
|
|
setText(draft.text);
|
|||
|
|
setPreviousText(null);
|
|||
|
|
setOptimizeSummary(null);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
取消
|
|||
|
|
</Button>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<Button size="sm" variant="ghost" onClick={() => setEditing(true)}>
|
|||
|
|
<Pencil className="h-3.5 w-3.5" />
|
|||
|
|
編輯
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="ghost"
|
|||
|
|
onClick={() => setShowOptimize((v) => !v)}
|
|||
|
|
disabled={!!loading || optimizing}
|
|||
|
|
>
|
|||
|
|
<Wand2 className="h-3.5 w-3.5" />
|
|||
|
|
AI 優化
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="outline"
|
|||
|
|
onClick={handleFactCheck}
|
|||
|
|
disabled={!!loading || overLimit || optimizing}
|
|||
|
|
>
|
|||
|
|
<ShieldCheck className="h-3.5 w-3.5" />
|
|||
|
|
{loading === "factcheck" ? "查證中…" : "知識查證"}
|
|||
|
|
</Button>
|
|||
|
|
<Button size="sm" onClick={handlePublish} disabled={!!loading || overLimit || optimizing || !canPublish} title={!canPublish ? "需先在連線設定綁定 Threads 或同步瀏覽器 Session" : undefined}>
|
|||
|
|
<Send className="h-3.5 w-3.5" />
|
|||
|
|
{loading === "publish" ? "發布中…" : "發布"}
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="ghost"
|
|||
|
|
className="text-destructive hover:text-destructive"
|
|||
|
|
onClick={handleReject}
|
|||
|
|
disabled={!!loading || optimizing}
|
|||
|
|
>
|
|||
|
|
<X className="h-3.5 w-3.5" />
|
|||
|
|
拒絕
|
|||
|
|
</Button>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<ConfirmDialog
|
|||
|
|
open={confirmDialog !== null}
|
|||
|
|
onOpenChange={(open) => !open && setConfirmDialog(null)}
|
|||
|
|
title={confirmDialog?.title ?? ""}
|
|||
|
|
description={confirmDialog?.description}
|
|||
|
|
confirmText={confirmDialog?.confirmText}
|
|||
|
|
danger={confirmDialog?.danger}
|
|||
|
|
onConfirm={confirmDialog?.onConfirm ?? (() => {})}
|
|||
|
|
/>
|
|||
|
|
</article>
|
|||
|
|
);
|
|||
|
|
}
|