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>
|
||
);
|
||
}
|