647 lines
25 KiB
TypeScript
647 lines
25 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|||
|
|
import { flushSync } from "react-dom";
|
|||
|
|
import {
|
|||
|
|
Loader2,
|
|||
|
|
ScanText,
|
|||
|
|
MessageCircle,
|
|||
|
|
Plus,
|
|||
|
|
Send,
|
|||
|
|
Sparkles,
|
|||
|
|
UserRound,
|
|||
|
|
WandSparkles,
|
|||
|
|
X,
|
|||
|
|
} from "lucide-react";
|
|||
|
|
import { Badge } from "@/components/ui/badge";
|
|||
|
|
import { Button } from "@/components/ui/button";
|
|||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|||
|
|
import { EmptyState } from "@/components/layout/empty-state";
|
|||
|
|
import { Input } from "@/components/ui/input";
|
|||
|
|
import { Label } from "@/components/ui/label";
|
|||
|
|
import { PageHeader } from "@/components/layout/page-header";
|
|||
|
|
import { useJobs } from "@/components/layout/jobs-provider";
|
|||
|
|
import { JobProgressPanel } from "@/components/job-progress-panel";
|
|||
|
|
import { InlineAlert } from "@/components/ui/inline-alert";
|
|||
|
|
import { Textarea } from "@/components/ui/textarea";
|
|||
|
|
import { useActionFeedback } from "@/lib/use-action-feedback";
|
|||
|
|
import { parseFetchJson } from "@/lib/utils";
|
|||
|
|
import {
|
|||
|
|
createEmptyStyle8DProfile,
|
|||
|
|
parseStyle8DProfile,
|
|||
|
|
STYLE_8D_KEYS,
|
|||
|
|
STYLE_8D_LABELS,
|
|||
|
|
type StoredStyle8DProfile,
|
|||
|
|
type Style8DKey,
|
|||
|
|
} from "@/lib/types/style-profile";
|
|||
|
|
|
|||
|
|
interface Account {
|
|||
|
|
id: string;
|
|||
|
|
username?: string | null;
|
|||
|
|
displayName?: string | null;
|
|||
|
|
persona?: string | null;
|
|||
|
|
styleProfile?: string | null;
|
|||
|
|
styleBenchmark?: string | null;
|
|||
|
|
brief?: string | null;
|
|||
|
|
productBrief?: string | null;
|
|||
|
|
targetAudience?: string | null;
|
|||
|
|
goals?: string | null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface AssistantMessage {
|
|||
|
|
role: "user" | "assistant";
|
|||
|
|
content: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
type Style8DResult = StoredStyle8DProfile;
|
|||
|
|
|
|||
|
|
export default function AccountsPage() {
|
|||
|
|
const [account, setAccount] = useState<Account | null>(null);
|
|||
|
|
const [draft, setDraft] = useState<Account | null>(null);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [busy, setBusy] = useState<string | null>(null);
|
|||
|
|
const [newName, setNewName] = useState("");
|
|||
|
|
const [assistantOpen, setAssistantOpen] = useState(true);
|
|||
|
|
const [assistantInput, setAssistantInput] = useState("");
|
|||
|
|
const [assistantBusy, setAssistantBusy] = useState(false);
|
|||
|
|
const [benchmarkUsername, setBenchmarkUsername] = useState("");
|
|||
|
|
const [styleResult, setStyleResult] = useState<Style8DResult | null>(null);
|
|||
|
|
const assistantInputRef = useRef<HTMLInputElement>(null);
|
|||
|
|
const { activeJobs } = useJobs();
|
|||
|
|
const { feedback, clearFeedback, showError, showSuccess } = useActionFeedback();
|
|||
|
|
const [assistantMessages, setAssistantMessages] = useState<AssistantMessage[]>([
|
|||
|
|
{
|
|||
|
|
role: "assistant",
|
|||
|
|
content: "跟我說你想經營的方向，我會把這頁策略欄位先幫你補好。",
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
const styleJob = activeJobs.find(
|
|||
|
|
(job) => job.type === "style-8d" && (!draft?.id || job.accountId === draft.id)
|
|||
|
|
);
|
|||
|
|
const visibleStyle =
|
|||
|
|
styleResult ?? createEmptyStyle8DProfile(benchmarkUsername.replace(/^@/, "").trim());
|
|||
|
|
|
|||
|
|
const load = useCallback(async () => {
|
|||
|
|
setLoading(true);
|
|||
|
|
const res = await fetch("/api/accounts");
|
|||
|
|
const data = await parseFetchJson<{ accounts?: Account[]; activeAccountId?: string }>(res);
|
|||
|
|
const rows = (data.accounts ?? []) as Account[];
|
|||
|
|
const active = rows.find((row) => row.id === data.activeAccountId) ?? rows[0] ?? null;
|
|||
|
|
setAccount(active);
|
|||
|
|
setDraft(active);
|
|||
|
|
setStyleResult(parseStyle8DProfile(active?.styleProfile));
|
|||
|
|
setBenchmarkUsername(active?.styleBenchmark ?? "");
|
|||
|
|
setLoading(false);
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
load();
|
|||
|
|
}, [load]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
function onJobCompleted(event: Event) {
|
|||
|
|
const { job } = (event as CustomEvent).detail as {
|
|||
|
|
job: { type: string; accountId?: string | null; status: string };
|
|||
|
|
};
|
|||
|
|
if (job.type === "style-8d" && job.accountId === account?.id && job.status === "completed") {
|
|||
|
|
void load();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
window.addEventListener("job-completed", onJobCompleted);
|
|||
|
|
return () => window.removeEventListener("job-completed", onJobCompleted);
|
|||
|
|
}, [account?.id, load]);
|
|||
|
|
|
|||
|
|
async function createAccount() {
|
|||
|
|
if (!newName.trim()) return;
|
|||
|
|
clearFeedback();
|
|||
|
|
setBusy("create");
|
|||
|
|
const res = await fetch("/api/accounts", {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({ displayName: newName.trim() }),
|
|||
|
|
});
|
|||
|
|
let data: { error?: string } = {};
|
|||
|
|
try {
|
|||
|
|
data = await parseFetchJson(res);
|
|||
|
|
} catch (err) {
|
|||
|
|
setBusy(null);
|
|||
|
|
showError(err instanceof Error ? err.message : "伺服器回應異常", "建立失敗");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setBusy(null);
|
|||
|
|
if (!res.ok) {
|
|||
|
|
showError(data.error ?? "無法建立帳號", "建立失敗");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setNewName("");
|
|||
|
|
showSuccess("帳號策略已建立");
|
|||
|
|
load();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function save() {
|
|||
|
|
if (!draft) return;
|
|||
|
|
clearFeedback();
|
|||
|
|
setBusy("save");
|
|||
|
|
const res = await fetch(`/api/accounts/${draft.id}`, {
|
|||
|
|
method: "PATCH",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
displayName: draft.displayName,
|
|||
|
|
username: draft.username,
|
|||
|
|
persona: draft.persona,
|
|||
|
|
styleProfile: draft.styleProfile,
|
|||
|
|
styleBenchmark: draft.styleBenchmark,
|
|||
|
|
brief: draft.brief,
|
|||
|
|
productBrief: draft.productBrief,
|
|||
|
|
targetAudience: draft.targetAudience,
|
|||
|
|
goals: draft.goals,
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
let data: { error?: string } = {};
|
|||
|
|
try {
|
|||
|
|
data = await parseFetchJson(res);
|
|||
|
|
} catch (err) {
|
|||
|
|
setBusy(null);
|
|||
|
|
showError(err instanceof Error ? err.message : "伺服器回應異常", "儲存失敗");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setBusy(null);
|
|||
|
|
if (!res.ok) {
|
|||
|
|
showError(data.error ?? "無法儲存策略", "儲存失敗");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
showSuccess("帳號策略已儲存");
|
|||
|
|
load();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateDraft(patch: Partial<Account>) {
|
|||
|
|
setDraft((prev) => (prev ? { ...prev, ...patch } : prev));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function analyzeBenchmark() {
|
|||
|
|
if (!draft || !benchmarkUsername.trim()) return;
|
|||
|
|
clearFeedback();
|
|||
|
|
setBusy("8d");
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`/api/accounts/${draft.id}/style-analysis`, {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({ benchmarkUsername }),
|
|||
|
|
});
|
|||
|
|
const data = await parseFetchJson<{ error?: string; jobId?: string; message?: string }>(res);
|
|||
|
|
if (!res.ok) {
|
|||
|
|
showError(data.error ?? "無法完成 8D 分析", "8D 分析失敗");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
showSuccess(data.message ?? "8D 分析已在背景執行，可自由切換頁面");
|
|||
|
|
window.dispatchEvent(new Event("haixun:jobs-updated"));
|
|||
|
|
} catch (error) {
|
|||
|
|
showError(error instanceof Error ? error.message : "8D 分析失敗", "8D 分析失敗");
|
|||
|
|
} finally {
|
|||
|
|
setBusy(null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateStyleDimension(key: Style8DKey, summary: string) {
|
|||
|
|
const base = styleResult ?? createEmptyStyle8DProfile(benchmarkUsername.replace(/^@/, "").trim());
|
|||
|
|
const next: Style8DResult = {
|
|||
|
|
...base,
|
|||
|
|
analysis: {
|
|||
|
|
...base.analysis,
|
|||
|
|
[key]: { ...base.analysis[key], summary },
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
setStyleResult(next);
|
|||
|
|
updateDraft({ styleProfile: JSON.stringify(next) });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const clearAssistantInput = useCallback(() => {
|
|||
|
|
setAssistantInput("");
|
|||
|
|
if (assistantInputRef.current) {
|
|||
|
|
assistantInputRef.current.value = "";
|
|||
|
|
}
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
async function askAssistant(preset?: string) {
|
|||
|
|
if (!draft) return;
|
|||
|
|
const instruction = (preset ?? assistantInput).trim();
|
|||
|
|
if (!instruction || assistantBusy) return;
|
|||
|
|
|
|||
|
|
flushSync(() => {
|
|||
|
|
if (!preset) clearAssistantInput();
|
|||
|
|
setAssistantMessages((prev) => [...prev, { role: "user", content: instruction }]);
|
|||
|
|
});
|
|||
|
|
setAssistantBusy(true);
|
|||
|
|
|
|||
|
|
const res = await fetch("/api/accounts/strategy-assistant", {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
instruction,
|
|||
|
|
current: {
|
|||
|
|
displayName: draft.displayName,
|
|||
|
|
username: draft.username,
|
|||
|
|
brief: draft.brief,
|
|||
|
|
persona: draft.persona,
|
|||
|
|
targetAudience: draft.targetAudience,
|
|||
|
|
productBrief: draft.productBrief,
|
|||
|
|
goals: draft.goals,
|
|||
|
|
style8D: Object.fromEntries(
|
|||
|
|
STYLE_8D_KEYS.map((key) => [key, visibleStyle.analysis[key]?.summary ?? null])
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
let data: {
|
|||
|
|
error?: string;
|
|||
|
|
fields?: Partial<Account> & { style8D?: Partial<Record<Style8DKey, string | null>> };
|
|||
|
|
message?: string;
|
|||
|
|
} = {};
|
|||
|
|
try {
|
|||
|
|
data = await parseFetchJson(res);
|
|||
|
|
} catch (err) {
|
|||
|
|
setAssistantBusy(false);
|
|||
|
|
const message = err instanceof Error ? err.message : "伺服器回應異常";
|
|||
|
|
setAssistantMessages((prev) => [...prev, { role: "assistant", content: message }]);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setAssistantBusy(false);
|
|||
|
|
|
|||
|
|
if (!res.ok) {
|
|||
|
|
const message = data.error ?? "小幫手暫時無法產生內容";
|
|||
|
|
setAssistantMessages((prev) => [...prev, { role: "assistant", content: message }]);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const fields = data.fields ?? {};
|
|||
|
|
const { style8D, ...accountFields } = fields;
|
|||
|
|
let nextStyleResult = styleResult;
|
|||
|
|
if (style8D && Object.values(style8D).some((value) => value?.trim())) {
|
|||
|
|
const base = styleResult ?? createEmptyStyle8DProfile(benchmarkUsername.replace(/^@/, "").trim());
|
|||
|
|
nextStyleResult = {
|
|||
|
|
...base,
|
|||
|
|
analysis: { ...base.analysis },
|
|||
|
|
};
|
|||
|
|
for (const key of STYLE_8D_KEYS) {
|
|||
|
|
const summary = style8D[key]?.trim();
|
|||
|
|
if (summary) {
|
|||
|
|
nextStyleResult.analysis[key] = { ...base.analysis[key], summary };
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
setStyleResult(nextStyleResult);
|
|||
|
|
}
|
|||
|
|
setDraft((prev) =>
|
|||
|
|
prev
|
|||
|
|
? {
|
|||
|
|
...prev,
|
|||
|
|
...Object.fromEntries(
|
|||
|
|
Object.entries(accountFields).filter(([, value]) => value !== null && value !== undefined)
|
|||
|
|
),
|
|||
|
|
...(nextStyleResult ? { styleProfile: JSON.stringify(nextStyleResult) } : {}),
|
|||
|
|
}
|
|||
|
|
: prev
|
|||
|
|
);
|
|||
|
|
setAssistantMessages((prev) => [
|
|||
|
|
...prev,
|
|||
|
|
{
|
|||
|
|
role: "assistant",
|
|||
|
|
content: data.message ?? "我已經依照你的方向補上這頁欄位，你可以再微調後儲存。",
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<PageHeader
|
|||
|
|
title="帳號策略"
|
|||
|
|
description="人設與受眾定位"
|
|||
|
|
action={
|
|||
|
|
draft && (
|
|||
|
|
<Button onClick={save} disabled={busy === "save"}>
|
|||
|
|
{busy === "save" && <Loader2 className="h-4 w-4 animate-spin" />}
|
|||
|
|
儲存策略
|
|||
|
|
</Button>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{feedback && (
|
|||
|
|
<InlineAlert
|
|||
|
|
type={feedback.type}
|
|||
|
|
title={feedback.title}
|
|||
|
|
message={feedback.message}
|
|||
|
|
onDismiss={clearFeedback}
|
|||
|
|
className="mb-4"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{loading ? (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="skeleton h-72 animate-pulse" />
|
|||
|
|
<div className="skeleton h-48 animate-pulse" />
|
|||
|
|
</div>
|
|||
|
|
) : !draft ? (
|
|||
|
|
<EmptyState
|
|||
|
|
icon={UserRound}
|
|||
|
|
title="先建立一個經營帳號"
|
|||
|
|
description="側欄新增帳號後設定策略"
|
|||
|
|
action={
|
|||
|
|
<div className="flex w-full max-w-md flex-col gap-2 sm:flex-row">
|
|||
|
|
<Input
|
|||
|
|
value={newName}
|
|||
|
|
onChange={(e) => setNewName(e.target.value)}
|
|||
|
|
placeholder="例如：個人品牌、產品號"
|
|||
|
|
/>
|
|||
|
|
<Button onClick={createAccount} disabled={busy === "create"}>
|
|||
|
|
<Plus className="h-4 w-4" />
|
|||
|
|
建立
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<div className="space-y-5">
|
|||
|
|
<Card>
|
|||
|
|
<CardHeader>
|
|||
|
|
<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
|
|||
|
|
<div>
|
|||
|
|
<CardTitle>{account?.displayName ?? account?.username ?? "未命名帳號"}</CardTitle>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<Badge variant="success">目前帳號</Badge>
|
|||
|
|
</div>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-4">
|
|||
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>品牌 / 帳號名稱</Label>
|
|||
|
|
<Input
|
|||
|
|
value={draft.displayName ?? ""}
|
|||
|
|
onChange={(e) => updateDraft({ displayName: e.target.value })}
|
|||
|
|
placeholder="給自己看的名稱"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>公開帳號名稱（選填）</Label>
|
|||
|
|
<Input
|
|||
|
|
value={draft.username ?? ""}
|
|||
|
|
onChange={(e) => updateDraft({ username: e.target.value })}
|
|||
|
|
placeholder="@username"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>一句話定位</Label>
|
|||
|
|
<Textarea
|
|||
|
|
rows={3}
|
|||
|
|
value={draft.brief ?? ""}
|
|||
|
|
onChange={(e) => updateDraft({ brief: e.target.value })}
|
|||
|
|
placeholder="這個帳號幫誰，用什麼觀點，解決什麼問題"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>人設與語氣</Label>
|
|||
|
|
<Textarea
|
|||
|
|
rows={5}
|
|||
|
|
value={draft.persona ?? ""}
|
|||
|
|
onChange={(e) => updateDraft({ persona: e.target.value })}
|
|||
|
|
placeholder="像誰、怎麼說話、常用語氣、哪些話不要說"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Card id="style-8d" className="scroll-mt-6">
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle className="flex items-center gap-2"><ScanText className="h-4 w-4 text-primary" />對標帳號 8D 分析</CardTitle>
|
|||
|
|
<CardDescription>分析後會直接存成這個帳號的風格策略；之後產貼文、優化與回覆都會自動套用。</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-4">
|
|||
|
|
<div className="flex flex-col gap-2 sm:flex-row">
|
|||
|
|
<Input value={benchmarkUsername} onChange={(event) => setBenchmarkUsername(event.target.value)} placeholder="@對標帳號" />
|
|||
|
|
<Button onClick={analyzeBenchmark} disabled={busy === "8d" || !!styleJob || !benchmarkUsername.trim()} className="sm:shrink-0">
|
|||
|
|
{busy === "8d" || styleJob ? <Loader2 className="h-4 w-4 animate-spin" /> : <ScanText className="h-4 w-4" />}
|
|||
|
|
{styleJob ? "8D 任務進行中" : busy === "8d" ? "建立任務中…" : "開始 8D 分析"}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
{styleJob && (
|
|||
|
|
<div className="rounded-xl border border-primary/20 bg-primary/[0.035] p-3">
|
|||
|
|
<p className="mb-2 text-xs font-medium">可自由切換頁面，任務不會中斷</p>
|
|||
|
|
<JobProgressPanel
|
|||
|
|
summary={styleJob.progress}
|
|||
|
|
progressDetailRaw={styleJob.progressDetail}
|
|||
|
|
jobType="style-8d"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{!styleResult && !styleJob && (
|
|||
|
|
<InlineAlert
|
|||
|
|
type="info"
|
|||
|
|
title="尚未建立 8D 風格策略"
|
|||
|
|
message="八個欄位已列在下方。你可以先手動填寫，或輸入對標帳號交給 AI 分析。"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{styleResult && (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="grid gap-3 sm:grid-cols-4">
|
|||
|
|
<div className="rounded-xl bg-muted/70 p-3"><p className="text-xs text-muted-foreground">近期樣本</p><p className="mt-1 text-lg font-semibold">{styleResult.postCount} 篇</p></div>
|
|||
|
|
<div className="rounded-xl bg-muted/70 p-3"><p className="text-xs text-muted-foreground">互動中位數</p><p className="mt-1 text-lg font-semibold">{styleResult.engagement.medianInteractions}</p></div>
|
|||
|
|
<div className="rounded-xl bg-muted/70 p-3"><p className="text-xs text-muted-foreground">平均互動</p><p className="mt-1 text-lg font-semibold">{styleResult.engagement.averageInteractions}</p></div>
|
|||
|
|
<div className="rounded-xl bg-muted/70 p-3"><p className="text-xs text-muted-foreground">達 {styleResult.engagement.threshold} 互動</p><p className="mt-1 text-lg font-semibold">{styleResult.engagement.postsAboveThreshold} 篇</p></div>
|
|||
|
|
</div>
|
|||
|
|
<InlineAlert
|
|||
|
|
type={styleResult.engagement.verdict === "strong" ? "success" : "warning"}
|
|||
|
|
title={styleResult.engagement.verdict === "strong" ? "近期互動穩定，適合當對標" : styleResult.engagement.verdict === "unknown" ? "公開互動資料不足" : "可參考風格，但互動門檻不高"}
|
|||
|
|
message="判斷採用近期貼文的讚 + 回覆×2；公開頁沒有可靠瀏覽數時不會捏造。"
|
|||
|
|
/>
|
|||
|
|
<div className="flex flex-wrap items-center gap-2">
|
|||
|
|
<Badge variant="success">已套用到帳號生成流程</Badge>
|
|||
|
|
<span className="text-xs text-muted-foreground">對標 @{styleResult.username} · 每個欄位都可再調整</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|||
|
|
{STYLE_8D_KEYS.map((key) => {
|
|||
|
|
const value = visibleStyle.analysis[key];
|
|||
|
|
return (
|
|||
|
|
<div key={key} className="rounded-xl border border-border bg-muted/40 p-4">
|
|||
|
|
<Label className="text-xs font-semibold tracking-wider text-primary">{STYLE_8D_LABELS[key]}</Label>
|
|||
|
|
<Textarea
|
|||
|
|
rows={3}
|
|||
|
|
className="mt-2 bg-card"
|
|||
|
|
value={value?.summary ?? ""}
|
|||
|
|
onChange={(event) => updateStyleDimension(key, event.target.value)}
|
|||
|
|
placeholder={`等待 AI 產生${STYLE_8D_LABELS[key]}，或先手動填寫`}
|
|||
|
|
/>
|
|||
|
|
{value?.evidence?.length ? <p className="mt-2 text-xs leading-5 text-muted-foreground">證據：{value.evidence.join("、")}</p> : null}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
{styleResult && (
|
|||
|
|
<div className="flex flex-wrap items-center gap-2">
|
|||
|
|
<Button variant="outline" onClick={() => updateDraft({ persona: styleResult.personaDraft })}>同步成上方人設文字</Button>
|
|||
|
|
<p className="text-xs text-muted-foreground">8D 已經會自動生效；這顆按鈕只在你想把摘要同步到人設文字時使用。</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Card>
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle>受眾與轉換</CardTitle>
|
|||
|
|
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-4">
|
|||
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>目標受眾</Label>
|
|||
|
|
<Textarea
|
|||
|
|
rows={5}
|
|||
|
|
value={draft.targetAudience ?? ""}
|
|||
|
|
onChange={(e) => updateDraft({ targetAudience: e.target.value })}
|
|||
|
|
placeholder="想吸引誰、他們的痛點、渴望、常用語言"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>產品 / 服務敘事</Label>
|
|||
|
|
<Textarea
|
|||
|
|
rows={5}
|
|||
|
|
value={draft.productBrief ?? ""}
|
|||
|
|
onChange={(e) => updateDraft({ productBrief: e.target.value })}
|
|||
|
|
placeholder="你提供什麼、解決什麼、自然導向哪個行動"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>近期經營目標</Label>
|
|||
|
|
<Textarea
|
|||
|
|
rows={3}
|
|||
|
|
value={draft.goals ?? ""}
|
|||
|
|
onChange={(e) => updateDraft({ goals: e.target.value })}
|
|||
|
|
placeholder="例如：提高留言、導流私訊、測試內容市場、建立專家感"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{draft && (
|
|||
|
|
<div className="mobile-floating fixed right-4 z-30 flex max-w-[calc(100vw-2rem)] flex-col items-end gap-3 lg:right-5">
|
|||
|
|
{assistantOpen && (
|
|||
|
|
<Card className="w-[360px] max-w-full border-foreground/10 shadow-2xl">
|
|||
|
|
<CardHeader className="border-b border-border pb-3">
|
|||
|
|
<div className="flex items-start justify-between gap-3">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<div className="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-foreground text-background shadow-sm">
|
|||
|
|
<Sparkles className="h-5 w-5" />
|
|||
|
|
<span className="absolute -right-0.5 -top-0.5 h-3 w-3 rounded-full border-2 border-card bg-success" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<CardTitle className="text-[15px]">策略小幫手</CardTitle>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<Button
|
|||
|
|
variant="ghost"
|
|||
|
|
size="icon"
|
|||
|
|
className="h-8 w-8"
|
|||
|
|
onClick={() => setAssistantOpen(false)}
|
|||
|
|
>
|
|||
|
|
<X className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-3 p-3">
|
|||
|
|
<div className="max-h-64 space-y-2 overflow-y-auto pr-1">
|
|||
|
|
{assistantMessages.map((message, index) => (
|
|||
|
|
<div
|
|||
|
|
key={`${message.role}-${index}`}
|
|||
|
|
className={
|
|||
|
|
message.role === "user"
|
|||
|
|
? "ml-8 rounded-lg bg-foreground px-3 py-2 text-xs leading-relaxed text-background"
|
|||
|
|
: "mr-8 rounded-lg bg-muted px-3 py-2 text-xs leading-relaxed text-foreground"
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{message.content}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
{assistantBusy && (
|
|||
|
|
<div className="mr-8 flex items-center gap-2 rounded-lg bg-muted px-3 py-2 text-xs text-muted-foreground">
|
|||
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|||
|
|
正在整理成可用策略…
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
size="sm"
|
|||
|
|
disabled={assistantBusy}
|
|||
|
|
onClick={() => askAssistant("我想經營醫療或健康相關帳號，請幫我補成合規、專業但親切的人設策略。")}
|
|||
|
|
>
|
|||
|
|
醫療健康
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
size="sm"
|
|||
|
|
disabled={assistantBusy}
|
|||
|
|
onClick={() => askAssistant("請根據目前欄位，把語氣變得更像真人、更適合 Threads。")}
|
|||
|
|
>
|
|||
|
|
變自然
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<Input
|
|||
|
|
ref={assistantInputRef}
|
|||
|
|
value={assistantInput}
|
|||
|
|
onChange={(event) => setAssistantInput(event.target.value)}
|
|||
|
|
onKeyDown={(event) => {
|
|||
|
|
if (event.nativeEvent.isComposing) return;
|
|||
|
|
if (event.key === "Enter" && !event.shiftKey) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
askAssistant();
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
placeholder="例如：我想經營醫療衛教，受眾是上班族"
|
|||
|
|
disabled={assistantBusy}
|
|||
|
|
/>
|
|||
|
|
<Button
|
|||
|
|
type="button"
|
|||
|
|
size="icon"
|
|||
|
|
onClick={() => askAssistant()}
|
|||
|
|
disabled={assistantBusy}
|
|||
|
|
>
|
|||
|
|
{assistantBusy ? (
|
|||
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|||
|
|
) : (
|
|||
|
|
<Send className="h-4 w-4" />
|
|||
|
|
)}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-[11px] leading-relaxed text-muted-foreground">
|
|||
|
|
小幫手可修改一般策略與 8D 欄位；套用後仍由你審核並按「儲存策略」。
|
|||
|
|
</p>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<Button
|
|||
|
|
className="h-12 gap-2 rounded-full px-5 shadow-xl"
|
|||
|
|
onClick={() => setAssistantOpen((open) => !open)}
|
|||
|
|
>
|
|||
|
|
{assistantOpen ? <MessageCircle className="h-4 w-4" /> : <WandSparkles className="h-4 w-4" />}
|
|||
|
|
{assistantOpen ? "收起小幫手" : "策略小幫手"}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|