478 lines
17 KiB
TypeScript
478 lines
17 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import React, { useCallback, useEffect, useMemo, useRef } from "react";
|
|||
|
|
import {
|
|||
|
|
GripVertical,
|
|||
|
|
Loader2,
|
|||
|
|
MessageSquare,
|
|||
|
|
Minus,
|
|||
|
|
Pencil,
|
|||
|
|
Plus,
|
|||
|
|
Send,
|
|||
|
|
Sparkles,
|
|||
|
|
Trash2,
|
|||
|
|
X,
|
|||
|
|
} from "lucide-react";
|
|||
|
|
import { Button } from "@/components/ui/button";
|
|||
|
|
import { Input } from "@/components/ui/input";
|
|||
|
|
import { Textarea } from "@/components/ui/textarea";
|
|||
|
|
import { notify } from "@/lib/notifications/store";
|
|||
|
|
import {
|
|||
|
|
closeRefine,
|
|||
|
|
discardDraftChanges,
|
|||
|
|
openRefine,
|
|||
|
|
saveRefineSession,
|
|||
|
|
sendRefineChat,
|
|||
|
|
sessionHasChanges,
|
|||
|
|
setChatInput,
|
|||
|
|
setDraft,
|
|||
|
|
setRefineOpen,
|
|||
|
|
setRefineTab,
|
|||
|
|
} from "@/lib/refine-session/store";
|
|||
|
|
import { useRefineSession } from "@/lib/refine-session/use-refine-session";
|
|||
|
|
import {
|
|||
|
|
SEARCH_INTENTS,
|
|||
|
|
type ResearchMap,
|
|||
|
|
type SearchIntent,
|
|||
|
|
type SuggestedTag,
|
|||
|
|
} from "@/lib/types/research";
|
|||
|
|
import { ResearchMapSection } from "@/components/research-map-section";
|
|||
|
|
import { cn } from "@/lib/utils";
|
|||
|
|
|
|||
|
|
type Tab = "edit" | "chat";
|
|||
|
|
|
|||
|
|
interface ResearchMapRefinePanelProps {
|
|||
|
|
topicId: string;
|
|||
|
|
topicLabel: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function ResearchMapRefinePanel({ topicId, topicLabel }: ResearchMapRefinePanelProps) {
|
|||
|
|
const session = useRefineSession(topicId);
|
|||
|
|
const chatEndRef = useRef<HTMLDivElement>(null);
|
|||
|
|
const chatInputRef = useRef<HTMLTextAreaElement>(null);
|
|||
|
|
|
|||
|
|
const open = session?.open ?? false;
|
|||
|
|
const tab = (session?.tab ?? "chat") as Tab;
|
|||
|
|
const draft = session?.draft ?? null;
|
|||
|
|
const chatting = session?.chatting ?? false;
|
|||
|
|
const saving = session?.saving ?? false;
|
|||
|
|
const chatInput = session?.chatInput ?? "";
|
|||
|
|
const messages = useMemo(() => session?.messages ?? [], [session?.messages]);
|
|||
|
|
const hasChanges = sessionHasChanges(topicId);
|
|||
|
|
|
|||
|
|
const clearChatInputDom = useCallback(() => {
|
|||
|
|
if (chatInputRef.current) {
|
|||
|
|
chatInputRef.current.value = "";
|
|||
|
|
}
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
|||
|
|
}, [messages, chatting]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!chatting && chatInput === "") {
|
|||
|
|
clearChatInputDom();
|
|||
|
|
}
|
|||
|
|
}, [chatting, chatInput, clearChatInputDom]);
|
|||
|
|
|
|||
|
|
function handleOpen() {
|
|||
|
|
if (!draft) {
|
|||
|
|
notify({ type: "warning", title: "請先分析主題" });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
openRefine(topicId);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleClose() {
|
|||
|
|
if (hasChanges && !confirm("有未套用的變更，確定關閉？")) return;
|
|||
|
|
closeRefine(topicId, true);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleDiscard() {
|
|||
|
|
if (!confirm("捨棄所有未套用變更？")) return;
|
|||
|
|
discardDraftChanges(topicId);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleSave() {
|
|||
|
|
if (!hasChanges) return;
|
|||
|
|
await saveRefineSession(topicId);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleChatSend() {
|
|||
|
|
const userMsg = chatInput.trim();
|
|||
|
|
if (!draft || !userMsg || chatting) return;
|
|||
|
|
clearChatInputDom();
|
|||
|
|
sendRefineChat(topicId, userMsg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateDraft(patch: Partial<ResearchMap>) {
|
|||
|
|
if (!draft) return;
|
|||
|
|
setDraft(topicId, { ...draft, ...patch });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateListItem(
|
|||
|
|
key: "questions" | "pillars" | "exclusions",
|
|||
|
|
index: number,
|
|||
|
|
value: string
|
|||
|
|
) {
|
|||
|
|
if (!draft) return;
|
|||
|
|
const list = [...draft[key]];
|
|||
|
|
list[index] = value;
|
|||
|
|
setDraft(topicId, { ...draft, [key]: list });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addListItem(key: "questions" | "pillars" | "exclusions") {
|
|||
|
|
if (!draft) return;
|
|||
|
|
setDraft(topicId, { ...draft, [key]: [...draft[key], ""] });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function removeListItem(key: "questions" | "pillars" | "exclusions", index: number) {
|
|||
|
|
if (!draft) return;
|
|||
|
|
setDraft(topicId, { ...draft, [key]: draft[key].filter((_, i) => i !== index) });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateTag(index: number, patch: Partial<SuggestedTag>) {
|
|||
|
|
if (!draft) return;
|
|||
|
|
const tags = [...draft.suggestedTags];
|
|||
|
|
tags[index] = { ...tags[index], ...patch };
|
|||
|
|
setDraft(topicId, { ...draft, suggestedTags: tags });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addTag() {
|
|||
|
|
if (!draft) return;
|
|||
|
|
setDraft(topicId, {
|
|||
|
|
...draft,
|
|||
|
|
suggestedTags: [
|
|||
|
|
...draft.suggestedTags,
|
|||
|
|
{ tag: "", reason: "", searchIntent: "知識" as SearchIntent },
|
|||
|
|
],
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function removeTag(index: number) {
|
|||
|
|
if (!draft) return;
|
|||
|
|
setDraft(topicId, {
|
|||
|
|
...draft,
|
|||
|
|
suggestedTags: draft.suggestedTags.filter((_, i) => i !== index),
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const engaged = session?.engaged ?? false;
|
|||
|
|
const showFab = !open && draft !== null && engaged;
|
|||
|
|
|
|||
|
|
if (!showFab && !open) return null;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
{showFab && (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleOpen}
|
|||
|
|
className="mobile-floating tool-btn fixed right-4 z-50 flex h-10 max-w-[calc(100vw-2rem)] items-center gap-2 rounded-lg border border-border bg-card px-3.5 text-[13px] font-medium text-foreground shadow-lg lg:right-6"
|
|||
|
|
>
|
|||
|
|
{chatting ? (
|
|||
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|||
|
|
) : (
|
|||
|
|
<Pencil className="h-4 w-4" />
|
|||
|
|
)}
|
|||
|
|
{chatting ? "微調中…" : "微調"}
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{open && draft && (
|
|||
|
|
<div className="mobile-floating tool-card fixed inset-x-4 z-50 flex max-h-[min(70dvh,520px)] w-auto flex-col overflow-hidden shadow-xl sm:inset-x-auto sm:right-6 sm:w-[min(400px,calc(100vw-2rem))]">
|
|||
|
|
<div className="flex items-center gap-2 border-b border-border bg-muted/60 px-3 py-2.5">
|
|||
|
|
<GripVertical className="h-4 w-4 text-muted-foreground" />
|
|||
|
|
<div className="min-w-0 flex-1">
|
|||
|
|
<p className="truncate text-[13px] font-semibold">微調</p>
|
|||
|
|
<p className="page-lead truncate !mt-0">{topicLabel}</p>
|
|||
|
|
</div>
|
|||
|
|
{hasChanges && (
|
|||
|
|
<span className="shrink-0 rounded-full bg-foreground px-2 py-0.5 text-[10px] text-background">
|
|||
|
|
未儲存
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
{chatting && (
|
|||
|
|
<span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground">
|
|||
|
|
背景執行
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setRefineOpen(topicId, false)}
|
|||
|
|
className="rounded-md p-1 text-muted-foreground hover:bg-background"
|
|||
|
|
title="最小化"
|
|||
|
|
>
|
|||
|
|
<Minus className="h-4 w-4" />
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleClose}
|
|||
|
|
className="rounded-md p-1 text-muted-foreground hover:bg-background"
|
|||
|
|
>
|
|||
|
|
<X className="h-4 w-4" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex border-b border-border">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setRefineTab(topicId, "chat")}
|
|||
|
|
className={cn(
|
|||
|
|
"flex flex-1 items-center justify-center gap-1.5 py-2 text-[12px] font-medium transition-colors",
|
|||
|
|
tab === "chat"
|
|||
|
|
? "border-b-2 border-foreground text-foreground"
|
|||
|
|
: "text-muted-foreground hover:text-foreground"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<MessageSquare className="h-3.5 w-3.5" />
|
|||
|
|
對話
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setRefineTab(topicId, "edit")}
|
|||
|
|
className={cn(
|
|||
|
|
"flex flex-1 items-center justify-center gap-1.5 py-2 text-[12px] font-medium transition-colors",
|
|||
|
|
tab === "edit"
|
|||
|
|
? "border-b-2 border-foreground text-foreground"
|
|||
|
|
: "text-muted-foreground hover:text-foreground"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<Pencil className="h-3.5 w-3.5" />
|
|||
|
|
編輯
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="h-[min(420px,55vh)] overflow-y-auto">
|
|||
|
|
{tab === "chat" ? (
|
|||
|
|
<div className="flex h-full flex-col">
|
|||
|
|
<div className="flex-1 space-y-3 overflow-y-auto p-3">
|
|||
|
|
{messages.length === 0 && (
|
|||
|
|
<p className="page-lead px-1 py-2">
|
|||
|
|
描述想改什麼，例如調整受眾、加標籤、刪問題
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
{messages.map((msg, i) => (
|
|||
|
|
<div
|
|||
|
|
key={i}
|
|||
|
|
className={cn(
|
|||
|
|
"max-w-[92%] rounded-lg px-3 py-2 text-[12px] leading-relaxed",
|
|||
|
|
msg.role === "user"
|
|||
|
|
? "ml-auto bg-foreground text-background"
|
|||
|
|
: "bg-muted text-foreground"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{msg.content}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
{chatting && (
|
|||
|
|
<div className="flex items-center gap-2 text-[12px] text-muted-foreground">
|
|||
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|||
|
|
調整中…
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
<div ref={chatEndRef} />
|
|||
|
|
</div>
|
|||
|
|
<div className="border-t border-border p-2.5">
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<Textarea
|
|||
|
|
ref={chatInputRef}
|
|||
|
|
value={chatInput}
|
|||
|
|
onChange={(e) => setChatInput(topicId, e.target.value)}
|
|||
|
|
rows={2}
|
|||
|
|
placeholder="描述想改什麼…"
|
|||
|
|
className="min-h-0 resize-none text-[12px]"
|
|||
|
|
disabled={chatting}
|
|||
|
|
onKeyDown={(e) => {
|
|||
|
|
if (e.nativeEvent.isComposing) return;
|
|||
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
handleChatSend();
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<Button
|
|||
|
|
type="button"
|
|||
|
|
size="sm"
|
|||
|
|
className="h-auto shrink-0 px-2.5"
|
|||
|
|
onClick={handleChatSend}
|
|||
|
|
disabled={chatting || !chatInput.trim()}
|
|||
|
|
>
|
|||
|
|
{chatting ? (
|
|||
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|||
|
|
) : (
|
|||
|
|
<Send className="h-4 w-4" />
|
|||
|
|
)}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="space-y-2 p-3">
|
|||
|
|
<ResearchMapSection title="受眾" collapsible={false}>
|
|||
|
|
<Textarea
|
|||
|
|
value={draft.audienceSummary}
|
|||
|
|
onChange={(e) => updateDraft({ audienceSummary: e.target.value })}
|
|||
|
|
rows={3}
|
|||
|
|
className="text-[12px]"
|
|||
|
|
/>
|
|||
|
|
</ResearchMapSection>
|
|||
|
|
<ResearchMapSection title="目標" collapsible={false}>
|
|||
|
|
<Textarea
|
|||
|
|
value={draft.contentGoal}
|
|||
|
|
onChange={(e) => updateDraft({ contentGoal: e.target.value })}
|
|||
|
|
rows={2}
|
|||
|
|
className="text-[12px]"
|
|||
|
|
/>
|
|||
|
|
</ResearchMapSection>
|
|||
|
|
<ResearchMapSection title="問題" collapsible={false}>
|
|||
|
|
{draft.questions.map((q, i) => (
|
|||
|
|
<div key={i} className="flex gap-1.5">
|
|||
|
|
<Input
|
|||
|
|
value={q}
|
|||
|
|
onChange={(e) => updateListItem("questions", i, e.target.value)}
|
|||
|
|
className="text-[12px]"
|
|||
|
|
/>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="ghost"
|
|||
|
|
className="shrink-0 px-2"
|
|||
|
|
onClick={() => removeListItem("questions", i)}
|
|||
|
|
>
|
|||
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
<Button size="sm" variant="outline" onClick={() => addListItem("questions")}>
|
|||
|
|
<Plus className="h-3.5 w-3.5" />
|
|||
|
|
新增
|
|||
|
|
</Button>
|
|||
|
|
</ResearchMapSection>
|
|||
|
|
<ResearchMapSection title="支柱" collapsible={false}>
|
|||
|
|
{draft.pillars.map((p, i) => (
|
|||
|
|
<div key={i} className="flex gap-1.5">
|
|||
|
|
<Input
|
|||
|
|
value={p}
|
|||
|
|
onChange={(e) => updateListItem("pillars", i, e.target.value)}
|
|||
|
|
className="text-[12px]"
|
|||
|
|
/>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="ghost"
|
|||
|
|
className="shrink-0 px-2"
|
|||
|
|
onClick={() => removeListItem("pillars", i)}
|
|||
|
|
>
|
|||
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
<Button size="sm" variant="outline" onClick={() => addListItem("pillars")}>
|
|||
|
|
<Plus className="h-3.5 w-3.5" />
|
|||
|
|
新增
|
|||
|
|
</Button>
|
|||
|
|
</ResearchMapSection>
|
|||
|
|
<ResearchMapSection title="排除" collapsible={false}>
|
|||
|
|
{draft.exclusions.map((ex, i) => (
|
|||
|
|
<div key={i} className="flex gap-1.5">
|
|||
|
|
<Input
|
|||
|
|
value={ex}
|
|||
|
|
onChange={(e) => updateListItem("exclusions", i, e.target.value)}
|
|||
|
|
className="text-[12px]"
|
|||
|
|
/>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="ghost"
|
|||
|
|
className="shrink-0 px-2"
|
|||
|
|
onClick={() => removeListItem("exclusions", i)}
|
|||
|
|
>
|
|||
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
<Button size="sm" variant="outline" onClick={() => addListItem("exclusions")}>
|
|||
|
|
<Plus className="h-3.5 w-3.5" />
|
|||
|
|
新增
|
|||
|
|
</Button>
|
|||
|
|
</ResearchMapSection>
|
|||
|
|
<ResearchMapSection title="標籤" collapsible={false}>
|
|||
|
|
{draft.suggestedTags.map((item, i) => (
|
|||
|
|
<div key={i} className="space-y-1.5 rounded-md border border-border p-2">
|
|||
|
|
<div className="flex gap-1.5">
|
|||
|
|
<Input
|
|||
|
|
value={item.tag}
|
|||
|
|
onChange={(e) => updateTag(i, { tag: e.target.value })}
|
|||
|
|
placeholder="標籤"
|
|||
|
|
className="text-[12px]"
|
|||
|
|
/>
|
|||
|
|
<select
|
|||
|
|
value={item.searchIntent ?? "知識"}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
updateTag(i, { searchIntent: e.target.value as SearchIntent })
|
|||
|
|
}
|
|||
|
|
className="h-9 shrink-0 rounded-lg border border-border bg-background px-2 text-[11px]"
|
|||
|
|
>
|
|||
|
|
{SEARCH_INTENTS.map((intent) => (
|
|||
|
|
<option key={intent} value={intent}>
|
|||
|
|
{intent}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="ghost"
|
|||
|
|
className="shrink-0 px-2"
|
|||
|
|
onClick={() => removeTag(i)}
|
|||
|
|
>
|
|||
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
<Input
|
|||
|
|
value={item.reason}
|
|||
|
|
onChange={(e) => updateTag(i, { reason: e.target.value })}
|
|||
|
|
placeholder="理由"
|
|||
|
|
className="text-[12px]"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
<Button size="sm" variant="outline" onClick={addTag}>
|
|||
|
|
<Plus className="h-3.5 w-3.5" />
|
|||
|
|
新增
|
|||
|
|
</Button>
|
|||
|
|
</ResearchMapSection>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center gap-2 border-t border-border bg-muted/40 px-3 py-2.5">
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="ghost"
|
|||
|
|
onClick={handleDiscard}
|
|||
|
|
disabled={!hasChanges || saving}
|
|||
|
|
className="text-[12px]"
|
|||
|
|
>
|
|||
|
|
捨棄
|
|||
|
|
</Button>
|
|||
|
|
<div className="flex-1" />
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
onClick={handleSave}
|
|||
|
|
disabled={!hasChanges || saving}
|
|||
|
|
className="text-[12px]"
|
|||
|
|
>
|
|||
|
|
{saving ? (
|
|||
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|||
|
|
) : (
|
|||
|
|
<Sparkles className="h-3.5 w-3.5" />
|
|||
|
|
)}
|
|||
|
|
{saving ? "儲存中…" : "套用"}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|