494 lines
16 KiB
TypeScript
494 lines
16 KiB
TypeScript
import { ArrowLeft, Send, Sparkles } from 'lucide-react';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
|
|
import {
|
|
type CreationAgentProgressCopy,
|
|
normalizeCreationAgentProgress,
|
|
resolveCreationAgentProgressHint,
|
|
resolveCreationAnchorStatusLabel,
|
|
} from '../../services/creation-agent';
|
|
|
|
export type CreationAgentAnchorView = {
|
|
key: string;
|
|
label: string;
|
|
value: string;
|
|
status: string;
|
|
};
|
|
|
|
export type CreationAgentMessageView = {
|
|
id: string;
|
|
role: string;
|
|
kind?: string;
|
|
text: string;
|
|
createdAt?: string;
|
|
};
|
|
|
|
export type CreationAgentOperationView = {
|
|
operationId?: string;
|
|
type?: string;
|
|
status: string;
|
|
phaseLabel: string;
|
|
phaseDetail?: string;
|
|
progress: number;
|
|
error?: string | null;
|
|
};
|
|
|
|
export type CreationAgentSessionView = {
|
|
sessionId: string;
|
|
title: string;
|
|
assistantSummary?: string | null;
|
|
currentTurn: number;
|
|
progressPercent: number;
|
|
anchors: CreationAgentAnchorView[];
|
|
messages: CreationAgentMessageView[];
|
|
recommendedReplies?: string[];
|
|
};
|
|
|
|
export type CreationAgentTheme = {
|
|
accentTextClass: string;
|
|
accentBgClass: string;
|
|
accentButtonClass: string;
|
|
userBubbleClass: string;
|
|
heroClass: string;
|
|
anchorGridClass?: string;
|
|
};
|
|
|
|
export type CreationAgentQuickAction = {
|
|
key: string;
|
|
label: string;
|
|
minTurn?: number;
|
|
minProgress?: number;
|
|
showWhenComplete?: boolean;
|
|
};
|
|
|
|
type CreationAgentWorkspaceProps = {
|
|
session: CreationAgentSessionView | null;
|
|
theme: CreationAgentTheme;
|
|
loadingText: string;
|
|
composerPlaceholder: string;
|
|
primaryActionLabel: string;
|
|
progressCopy?: CreationAgentProgressCopy;
|
|
activeOperation?: CreationAgentOperationView | null;
|
|
streamingReplyText?: string;
|
|
isStreamingReply?: boolean;
|
|
isBusy?: boolean;
|
|
error?: string | null;
|
|
quickActions?: CreationAgentQuickAction[];
|
|
onBack: () => void;
|
|
onSubmitText: (text: string, quickActionKey?: string) => void;
|
|
onPrimaryAction: () => void;
|
|
onQuickAction?: (action: CreationAgentQuickAction) => void;
|
|
};
|
|
|
|
function uniqueRecommendedReplies(recommendedReplies: string[] = []) {
|
|
return [...new Set(recommendedReplies.map((reply) => reply.trim()).filter(Boolean))].slice(
|
|
0,
|
|
3,
|
|
);
|
|
}
|
|
|
|
function CreationAgentOperationBanner({
|
|
operation,
|
|
}: {
|
|
operation: CreationAgentOperationView | null | undefined;
|
|
}) {
|
|
const [visibleOperation, setVisibleOperation] =
|
|
useState<CreationAgentOperationView | null>(operation ?? null);
|
|
|
|
useEffect(() => {
|
|
setVisibleOperation(operation ?? null);
|
|
|
|
if (operation?.status !== 'completed') {
|
|
return;
|
|
}
|
|
|
|
const timeoutId = window.setTimeout(() => {
|
|
setVisibleOperation((current) =>
|
|
current?.operationId === operation.operationId ? null : current,
|
|
);
|
|
}, 1200);
|
|
|
|
return () => window.clearTimeout(timeoutId);
|
|
}, [operation]);
|
|
|
|
if (!visibleOperation) {
|
|
return null;
|
|
}
|
|
|
|
const isFailed = visibleOperation.status === 'failed';
|
|
const isRunning =
|
|
visibleOperation.status === 'running' ||
|
|
visibleOperation.status === 'queued';
|
|
const bannerToneClass = isFailed
|
|
? 'platform-banner--danger'
|
|
: isRunning
|
|
? 'platform-banner--info'
|
|
: 'platform-banner--success';
|
|
const progress = normalizeCreationAgentProgress(visibleOperation.progress);
|
|
const progressFillStyle = isFailed
|
|
? { background: 'linear-gradient(90deg, #fb7185 0%, #f43f5e 100%)' }
|
|
: isRunning
|
|
? { background: 'var(--platform-button-primary-fill)' }
|
|
: { background: 'linear-gradient(90deg, #86efac 0%, #34d399 100%)' };
|
|
|
|
return (
|
|
<div
|
|
className={`platform-remap-surface platform-banner rounded-[1.4rem] px-4 py-4 ${bannerToneClass}`}
|
|
>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="text-sm font-semibold">
|
|
{visibleOperation.phaseLabel}
|
|
</div>
|
|
<div className="text-xs opacity-80">{progress}%</div>
|
|
</div>
|
|
{visibleOperation.phaseDetail ? (
|
|
<div className="mt-1 text-xs opacity-80">
|
|
{visibleOperation.phaseDetail}
|
|
</div>
|
|
) : null}
|
|
{visibleOperation.error ? (
|
|
<div className="mt-2 text-sm opacity-90">{visibleOperation.error}</div>
|
|
) : null}
|
|
<div className="platform-progress-track mt-3 h-2 overflow-hidden rounded-full">
|
|
<div
|
|
className="h-full rounded-full transition-[width] duration-300"
|
|
style={{
|
|
width: `${Math.max(8, progress)}%`,
|
|
...progressFillStyle,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CreationAgentMessageBubble({
|
|
message,
|
|
theme,
|
|
recommendedReplies,
|
|
onRecommendedReply,
|
|
}: {
|
|
message: CreationAgentMessageView;
|
|
theme: CreationAgentTheme;
|
|
recommendedReplies?: string[];
|
|
onRecommendedReply: (text: string) => void;
|
|
}) {
|
|
const isUser = message.role === 'user';
|
|
const isSystem = message.role === 'system';
|
|
const visibleRecommendedReplies = isUser
|
|
? []
|
|
: uniqueRecommendedReplies(recommendedReplies);
|
|
const bubbleToneClass = isUser
|
|
? theme.userBubbleClass
|
|
: isSystem
|
|
? 'border border-[var(--platform-warm-border)] bg-[var(--platform-warm-bg)] text-[var(--platform-warm-text)]'
|
|
: 'platform-subpanel text-[var(--platform-text-strong)]';
|
|
|
|
return (
|
|
<div className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}>
|
|
<div
|
|
className={`max-w-[90%] rounded-[1.4rem] px-4 py-3 text-sm leading-7 break-words sm:max-w-[82%] ${bubbleToneClass}`}
|
|
>
|
|
<div className="whitespace-pre-wrap">{message.text}</div>
|
|
{visibleRecommendedReplies.length > 0 ? (
|
|
<div className="mt-2.5 flex flex-col gap-1.5">
|
|
{visibleRecommendedReplies.map((reply, replyIndex) => (
|
|
<button
|
|
key={`recommended-reply-${replyIndex}-${reply}`}
|
|
type="button"
|
|
onClick={() => onRecommendedReply(reply)}
|
|
className="platform-button platform-button--ghost min-h-0 justify-start rounded-[0.95rem] px-2.5 py-1.5 text-left text-[11px] leading-4.5 whitespace-normal"
|
|
>
|
|
{reply}
|
|
</button>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CreationAgentAnchorChip({
|
|
anchor,
|
|
theme,
|
|
}: {
|
|
anchor: CreationAgentAnchorView;
|
|
theme: CreationAgentTheme;
|
|
}) {
|
|
return (
|
|
<div className="rounded-[1.25rem] border border-white/14 bg-white/8 px-3 py-3 text-left">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<span
|
|
className={`text-xs font-semibold tracking-[0.18em] ${theme.accentTextClass}`}
|
|
>
|
|
{anchor.label}
|
|
</span>
|
|
<span className="rounded-full bg-white/12 px-2 py-1 text-[0.68rem] text-white/70">
|
|
{resolveCreationAnchorStatusLabel(anchor.status)}
|
|
</span>
|
|
</div>
|
|
<div className="mt-2 line-clamp-2 text-sm leading-5 text-white/86">
|
|
{anchor.value || '等待补齐'}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function shouldShowQuickAction(
|
|
action: CreationAgentQuickAction,
|
|
session: CreationAgentSessionView,
|
|
progress: number,
|
|
) {
|
|
if (action.showWhenComplete && progress < 100) {
|
|
return false;
|
|
}
|
|
|
|
if (!action.showWhenComplete && progress >= 100 && action.minProgress !== 100) {
|
|
return false;
|
|
}
|
|
|
|
if (typeof action.minTurn === 'number' && session.currentTurn < action.minTurn) {
|
|
return false;
|
|
}
|
|
|
|
if (typeof action.minProgress === 'number' && progress < action.minProgress) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
export function CreationAgentWorkspace({
|
|
session,
|
|
theme,
|
|
loadingText,
|
|
composerPlaceholder,
|
|
primaryActionLabel,
|
|
progressCopy,
|
|
activeOperation = null,
|
|
streamingReplyText = '',
|
|
isStreamingReply = false,
|
|
isBusy = false,
|
|
error = null,
|
|
quickActions = [],
|
|
onBack,
|
|
onSubmitText,
|
|
onPrimaryAction,
|
|
onQuickAction,
|
|
}: CreationAgentWorkspaceProps) {
|
|
const [draftText, setDraftText] = useState('');
|
|
const bottomRef = useRef<HTMLDivElement | null>(null);
|
|
|
|
useEffect(() => {
|
|
bottomRef.current?.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'end',
|
|
});
|
|
}, [session?.messages, streamingReplyText, isStreamingReply]);
|
|
|
|
if (!session) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center">
|
|
<div className="platform-subpanel rounded-2xl px-5 py-4 text-sm text-[var(--platform-text-base)]">
|
|
{error || loadingText}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const progress = normalizeCreationAgentProgress(session.progressPercent);
|
|
const visibleQuickActions = quickActions.filter((action) =>
|
|
shouldShowQuickAction(action, session, progress),
|
|
);
|
|
const lastAssistantMessageIndex = session.messages.reduce(
|
|
(lastIndex, message, index) =>
|
|
message.role === 'assistant' ? index : lastIndex,
|
|
-1,
|
|
);
|
|
|
|
const submit = () => {
|
|
const text = draftText.trim();
|
|
if (!text || isBusy) {
|
|
return;
|
|
}
|
|
|
|
onSubmitText(text);
|
|
setDraftText('');
|
|
};
|
|
|
|
return (
|
|
<div className="mx-auto flex h-full min-h-0 w-full max-w-6xl flex-col gap-3 overflow-hidden px-1 sm:px-0">
|
|
<div className={`relative overflow-hidden rounded-[1.8rem] px-4 py-4 text-white shadow-[0_20px_60px_rgba(15,23,42,0.18)] sm:px-5 ${theme.heroClass}`}>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<button
|
|
type="button"
|
|
aria-label="返回"
|
|
onClick={onBack}
|
|
disabled={isBusy}
|
|
className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/16 bg-white/10 text-white/84 disabled:opacity-45"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={isBusy}
|
|
onClick={onPrimaryAction}
|
|
className={`inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-bold text-slate-950 shadow-lg disabled:cursor-not-allowed disabled:opacity-50 ${theme.accentButtonClass}`}
|
|
>
|
|
<Sparkles className="h-4 w-4" />
|
|
{primaryActionLabel}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<div className="text-2xl font-black leading-tight sm:text-3xl">
|
|
{session.title}
|
|
</div>
|
|
{session.assistantSummary ? (
|
|
<div className="mt-2 max-w-2xl text-sm leading-6 text-white/76">
|
|
{session.assistantSummary}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="mt-4">
|
|
<div className="mb-2 flex items-center justify-between gap-3">
|
|
<span className="text-xs font-semibold tracking-[0.14em] text-white/72">
|
|
创作进度
|
|
</span>
|
|
<span className="text-sm font-semibold text-white/88">
|
|
{progress}%
|
|
</span>
|
|
</div>
|
|
<div className="h-2 overflow-hidden rounded-full bg-white/12">
|
|
<div
|
|
className={`h-full rounded-full transition-all ${theme.accentBgClass}`}
|
|
style={{ width: `${Math.max(6, progress)}%` }}
|
|
/>
|
|
</div>
|
|
<div className="mt-2 text-xs leading-5 text-white/64">
|
|
{resolveCreationAgentProgressHint(progress, progressCopy)}
|
|
</div>
|
|
</div>
|
|
|
|
{visibleQuickActions.length > 0 ? (
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
{visibleQuickActions.map((action) => (
|
|
<button
|
|
key={action.key}
|
|
type="button"
|
|
disabled={isBusy}
|
|
onClick={() => onQuickAction?.(action)}
|
|
className="rounded-full border border-white/14 bg-white/10 px-3 py-1.5 text-xs font-semibold text-white/78 disabled:cursor-not-allowed disabled:opacity-45"
|
|
>
|
|
{action.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
{session.anchors.length > 0 ? (
|
|
<div className={theme.anchorGridClass || 'grid gap-2 sm:grid-cols-2 xl:grid-cols-4'}>
|
|
{session.anchors.map((anchor) => (
|
|
<CreationAgentAnchorChip
|
|
key={anchor.key}
|
|
anchor={anchor}
|
|
theme={theme}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
<CreationAgentOperationBanner operation={activeOperation} />
|
|
|
|
<div className="min-h-0 flex-1 overflow-hidden rounded-[1.6rem] border border-[var(--platform-subpanel-border)] bg-[var(--platform-subpanel-fill)]">
|
|
<div className="flex h-full min-h-0 flex-col">
|
|
<div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-4 py-4">
|
|
{session.messages.length === 0 ? (
|
|
<div className="flex h-full items-center justify-center text-sm text-[var(--platform-text-soft)]">
|
|
暂无消息
|
|
</div>
|
|
) : (
|
|
session.messages.map((message, index) => (
|
|
<CreationAgentMessageBubble
|
|
key={message.id || `message-${index}`}
|
|
message={message}
|
|
theme={theme}
|
|
recommendedReplies={
|
|
index === lastAssistantMessageIndex
|
|
? session.recommendedReplies
|
|
: []
|
|
}
|
|
onRecommendedReply={(text) => onSubmitText(text)}
|
|
/>
|
|
))
|
|
)}
|
|
|
|
{isStreamingReply ? (
|
|
<div className="flex justify-start">
|
|
<div className="platform-subpanel max-w-[90%] rounded-[1.4rem] px-4 py-3 text-sm leading-7 text-[var(--platform-text-strong)] sm:max-w-[82%]">
|
|
{streamingReplyText ? (
|
|
<div className="whitespace-pre-wrap">
|
|
{streamingReplyText}
|
|
<span
|
|
className={`ml-1 inline-block h-4 w-1 animate-pulse rounded-full align-[-2px] ${theme.accentBgClass}`}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-1.5 py-1">
|
|
<span className="h-2 w-2 animate-pulse rounded-full bg-[var(--platform-text-soft)] [animation-delay:-0.2s]" />
|
|
<span className="h-2 w-2 animate-pulse rounded-full bg-[var(--platform-text-soft)] [animation-delay:-0.1s]" />
|
|
<span className="h-2 w-2 animate-pulse rounded-full bg-[var(--platform-text-soft)]" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<div ref={bottomRef} />
|
|
</div>
|
|
|
|
{error ? (
|
|
<div className="mx-4 mb-3 rounded-[1rem] border border-red-200/70 bg-red-50 px-3 py-2 text-sm text-red-600">
|
|
{error}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="border-t border-[var(--platform-subpanel-border)] p-3">
|
|
<div className="flex items-end gap-2 rounded-[1.25rem] bg-white/80 p-2">
|
|
<textarea
|
|
value={draftText}
|
|
disabled={isBusy}
|
|
rows={2}
|
|
onChange={(event) => {
|
|
setDraftText(event.target.value);
|
|
}}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter' && !event.shiftKey) {
|
|
event.preventDefault();
|
|
submit();
|
|
}
|
|
}}
|
|
placeholder={composerPlaceholder}
|
|
className="min-h-[3rem] flex-1 resize-none bg-transparent px-2 py-2 text-sm text-[var(--platform-text-strong)] outline-none placeholder:text-[var(--platform-text-soft)]"
|
|
/>
|
|
<button
|
|
type="button"
|
|
aria-label="发送"
|
|
disabled={isBusy || !draftText.trim()}
|
|
onClick={submit}
|
|
className={`inline-flex h-11 w-11 items-center justify-center rounded-full text-white disabled:cursor-not-allowed disabled:opacity-40 ${theme.userBubbleClass}`}
|
|
>
|
|
<Send className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CreationAgentWorkspace;
|