feat: add puzzle and big fish draft generation progress

This commit is contained in:
2026-04-25 15:17:01 +08:00
parent 1b2daf4796
commit 9cb3c6a27e
10 changed files with 898 additions and 33 deletions

View File

@@ -1,4 +1,5 @@
import { AnimatePresence, motion } from 'motion/react';
import { Loader2 } from 'lucide-react';
import { AnimatePresence, motion } from 'motion/react';
import {
lazy,
Suspense,
@@ -9,6 +10,7 @@ import {
useState,
} from 'react';
import type { PublicUserSummary } from '../../../packages/shared/src/contracts/auth';
import type {
BigFishRuntimeSnapshotResponse,
BigFishSessionSnapshotResponse,
@@ -21,6 +23,7 @@ import type {
PuzzleAgentActionRequest,
PuzzleAgentOperationRecord,
} from '../../../packages/shared/src/contracts/puzzleAgentActions';
import type { PuzzleGeneratedImageCandidate } from '../../../packages/shared/src/contracts/puzzleAgentDraft';
import type {
PuzzleAgentSessionSnapshot,
SendPuzzleAgentMessageRequest,
@@ -31,7 +34,6 @@ import type {
CustomWorldGalleryCard,
CustomWorldLibraryEntry,
} from '../../../packages/shared/src/contracts/runtime';
import type { PublicUserSummary } from '../../../packages/shared/src/contracts/auth';
import { buildCustomWorldPlayableCharacters } from '../../data/characterPresets';
import {
getPublicAuthUserByCode,
@@ -43,15 +45,22 @@ import {
getBigFishCreationSession,
streamBigFishCreationMessage,
} from '../../services/big-fish-creation';
import {
deleteBigFishWork,
listBigFishWorks,
} from '../../services/big-fish-works';
import {
startBigFishRuntimeRun,
submitBigFishRuntimeInput,
} from '../../services/big-fish-runtime';
import {
deleteBigFishWork,
listBigFishWorks,
} from '../../services/big-fish-works';
import { readCustomWorldAgentUiState } from '../../services/customWorldAgentUiState';
import {
buildBigFishGenerationAnchorEntries,
buildMiniGameDraftGenerationProgress,
buildPuzzleGenerationAnchorEntries,
createMiniGameDraftGenerationState,
type MiniGameDraftGenerationState,
} from '../../services/miniGameDraftGenerationProgress';
import { getPlatformProfileDashboard } from '../../services/platform-entry';
import {
createPuzzleAgentSession,
@@ -59,18 +68,22 @@ import {
getPuzzleAgentSession,
streamPuzzleAgentMessage,
} from '../../services/puzzle-agent';
import { getPuzzleGalleryDetail } from '../../services/puzzle-gallery';
import {
getPuzzleGalleryDetail,
listPuzzleGallery,
} from '../../services/puzzle-gallery';
import {
advanceLocalPuzzleLevel,
advanceLocalPuzzleLevelWithWork,
dragLocalPuzzlePiece,
startLocalPuzzleRun,
swapLocalPuzzlePieces,
} from '../../services/puzzle-runtime/puzzleLocalRuntime';
import { deletePuzzleWork, listPuzzleWorks } from '../../services/puzzle-works';
import { deleteRpgEntryWorldProfile } from '../../services/rpg-entry';
import { getRpgEntryWorldGalleryDetailByCode } from '../../services/rpg-entry/rpgEntryLibraryClient';
import { deleteRpgCreationAgentSession } from '../../services/rpg-creation';
import { rpgCreationPreviewAdapter } from '../../services/rpg-creation/rpgCreationPreviewAdapter';
import { deleteRpgEntryWorldProfile } from '../../services/rpg-entry';
import { getRpgEntryWorldGalleryDetailByCode } from '../../services/rpg-entry/rpgEntryLibraryClient';
import type { CustomWorldProfile } from '../../types';
import { useAuthUi } from '../auth/AuthUiContext';
import { CustomWorldCreationHub } from '../custom-world-home/CustomWorldCreationHub';
@@ -83,13 +96,13 @@ import { useRpgCreationEnterWorld } from '../rpg-entry/useRpgCreationEnterWorld'
import { useRpgCreationResultAutosave } from '../rpg-entry/useRpgCreationResultAutosave';
import { useRpgCreationSessionController } from '../rpg-entry/useRpgCreationSessionController';
import { PlatformEntryCreationTypeModal } from './PlatformEntryCreationTypeModal';
import type { PlatformCreationTypeId } from './platformEntryCreationTypes';
import { PlatformEntryHomeView } from './PlatformEntryHomeView';
import {
buildCreationHubFallbackItems,
normalizeAgentBackedProfile,
resolveRpgCreationErrorMessage,
} from './platformEntryShared';
import type { PlatformCreationTypeId } from './platformEntryCreationTypes';
import type { PlatformEntryFlowShellProps } from './platformEntryTypes';
import { PlatformEntryWorldDetailView } from './PlatformEntryWorldDetailView';
import { usePlatformEntryBootstrap } from './usePlatformEntryBootstrap';
@@ -101,6 +114,53 @@ type AgentResultPublishGateView = {
publishReady: boolean;
};
function buildPuzzleCandidateWorkSummary(
candidate: PuzzleGeneratedImageCandidate,
session: PuzzleAgentSessionSnapshot,
levelIndex: number,
): PuzzleWorkSummary {
const draft = session.draft;
const nowIso = new Date().toISOString();
return {
workId: `${session.sessionId}-${candidate.candidateId}-level-${levelIndex}-runtime-work`,
profileId: `${session.sessionId}-${candidate.candidateId}-level-${levelIndex}-runtime-profile`,
ownerUserId: 'local-runtime',
sourceSessionId: session.sessionId,
authorDisplayName: '当前草稿',
levelName: draft?.levelName
? `${draft.levelName} · 候选 ${levelIndex}`
: `候选拼图 ${levelIndex}`,
summary: draft?.summary ?? candidate.prompt,
themeTags: draft?.themeTags ?? [],
coverImageSrc: candidate.imageSrc,
coverAssetId: candidate.assetId,
publicationStatus: 'published',
updatedAt: nowIso,
publishedAt: nowIso,
playCount: 0,
publishReady: true,
};
}
function pickPuzzleCandidateForLevel(
candidates: PuzzleGeneratedImageCandidate[],
playedProfileIds: string[],
) {
return candidates.find(
(candidate) =>
candidate.imageSrc &&
!playedProfileIds.some((profileId) =>
profileId.includes(candidate.candidateId),
),
);
}
function pickFreshGeneratedPuzzleCandidate(
candidates: PuzzleGeneratedImageCandidate[],
) {
return candidates.find((candidate) => candidate.imageSrc);
}
type AgentResultBlockerView = {
code?: string;
message: string;
@@ -312,6 +372,8 @@ export function PlatformEntryFlowShellImpl({
const [bigFishError, setBigFishError] = useState<string | null>(null);
const [isBigFishBusy, setIsBigFishBusy] = useState(false);
const [isBigFishLoadingLibrary, setIsBigFishLoadingLibrary] = useState(false);
const [bigFishGenerationState, setBigFishGenerationState] =
useState<MiniGameDraftGenerationState | null>(null);
const [streamingBigFishReplyText, setStreamingBigFishReplyText] =
useState('');
const [isStreamingBigFishReply, setIsStreamingBigFishReply] = useState(false);
@@ -327,6 +389,10 @@ export function PlatformEntryFlowShellImpl({
const [puzzleError, setPuzzleError] = useState<string | null>(null);
const [isPuzzleBusy, setIsPuzzleBusy] = useState(false);
const [isPuzzleLoadingLibrary, setIsPuzzleLoadingLibrary] = useState(false);
const [puzzleGenerationState, setPuzzleGenerationState] =
useState<MiniGameDraftGenerationState | null>(null);
const [isPuzzleNextLevelGenerating, setIsPuzzleNextLevelGenerating] =
useState(false);
const [isSearchingPublicCode, setIsSearchingPublicCode] = useState(false);
const [publicSearchError, setPublicSearchError] = useState<string | null>(null);
const [searchedPublicUser, setSearchedPublicUser] =
@@ -791,6 +857,7 @@ export function PlatformEntryFlowShellImpl({
const leaveBigFishFlow = useCallback(() => {
setBigFishError(null);
setBigFishRun(null);
setBigFishGenerationState(null);
setStreamingBigFishReplyText('');
setIsStreamingBigFishReply(false);
enterCreateTab();
@@ -801,6 +868,8 @@ export function PlatformEntryFlowShellImpl({
setPuzzleError(null);
setPuzzleOperation(null);
setPuzzleRun(null);
setPuzzleGenerationState(null);
setIsPuzzleNextLevelGenerating(false);
setStreamingPuzzleReplyText('');
setIsStreamingPuzzleReply(false);
enterCreateTab();
@@ -913,15 +982,45 @@ export function PlatformEntryFlowShellImpl({
setBigFishError(null);
try {
if (payload.action === 'big_fish_compile_draft') {
setSelectionStage('big-fish-generating');
setBigFishGenerationState(createMiniGameDraftGenerationState('big-fish'));
const { session } = await executeBigFishCreationAction(
bigFishSession.sessionId,
payload,
);
setBigFishSession(session);
setBigFishGenerationState((current) =>
current
? {
...current,
phase: 'ready',
completedAssetCount: session.assetSlots.filter(
(slot) => slot.status === 'ready',
).length,
totalAssetCount: session.assetSlots.length,
}
: current,
);
setSelectionStage('big-fish-result');
return;
}
const { session } = await executeBigFishCreationAction(
bigFishSession.sessionId,
payload,
);
setBigFishSession(session);
if (payload.action === 'big_fish_compile_draft') {
setSelectionStage('big-fish-result');
}
} catch (error) {
setBigFishGenerationState((current) =>
current
? {
...current,
phase: 'failed',
error: resolveBigFishErrorMessage(error, '执行大鱼吃小鱼操作失败。'),
}
: current,
);
setBigFishError(
resolveBigFishErrorMessage(error, '执行大鱼吃小鱼操作失败。'),
);
@@ -947,7 +1046,30 @@ export function PlatformEntryFlowShellImpl({
setPuzzleError(null);
try {
const { operation } = await executePuzzleAgentAction(
if (payload.action === 'compile_puzzle_draft') {
setSelectionStage('puzzle-generating');
setPuzzleGenerationState(createMiniGameDraftGenerationState('puzzle'));
const { operation, session } = await executePuzzleAgentAction(
puzzleSession.sessionId,
payload,
);
setPuzzleOperation(operation);
setPuzzleSession(session);
setPuzzleGenerationState((current) =>
current
? {
...current,
phase: 'ready',
completedAssetCount: 1,
totalAssetCount: 1,
}
: current,
);
setSelectionStage('puzzle-result');
return;
}
const { operation, session } = await executePuzzleAgentAction(
puzzleSession.sessionId,
payload,
);
@@ -957,14 +1079,8 @@ export function PlatformEntryFlowShellImpl({
await refreshPuzzleShelf();
}
const { session } = await getPuzzleAgentSession(
puzzleSession.sessionId,
);
setPuzzleSession(session);
if (payload.action === 'compile_puzzle_draft') {
setSelectionStage('puzzle-result');
}
if (
payload.action === 'publish_puzzle_work' &&
session.publishedProfileId
@@ -976,6 +1092,15 @@ export function PlatformEntryFlowShellImpl({
setSelectionStage('puzzle-gallery-detail');
}
} catch (error) {
setPuzzleGenerationState((current) =>
current
? {
...current,
phase: 'failed',
error: resolvePuzzleErrorMessage(error, '执行拼图操作失败。'),
}
: current,
);
setPuzzleError(resolvePuzzleErrorMessage(error, '执行拼图操作失败。'));
} finally {
setIsPuzzleBusy(false);
@@ -1095,9 +1220,123 @@ export function PlatformEntryFlowShellImpl({
return;
}
const currentLevel = puzzleRun.currentLevel;
if (!currentLevel || currentLevel.status !== 'cleared') {
return;
}
setIsPuzzleBusy(true);
setPuzzleError(null);
setPuzzleRun(advanceLocalPuzzleLevel(puzzleRun));
}, [isPuzzleBusy, puzzleRun]);
try {
const galleryResponse = await listPuzzleGallery();
setPuzzleWorks(galleryResponse.items);
const galleryNext = galleryResponse.items.find(
(item) =>
item.publicationStatus === 'published' &&
item.coverImageSrc &&
!puzzleRun.playedProfileIds.includes(item.profileId),
);
if (galleryNext) {
const { item } = await getPuzzleGalleryDetail(galleryNext.profileId);
setSelectedPuzzleDetail(item);
setPuzzleRun(advanceLocalPuzzleLevelWithWork(puzzleRun, item));
return;
}
const existingCandidate = pickPuzzleCandidateForLevel(
puzzleSession?.draft?.candidates ?? [],
puzzleRun.playedProfileIds,
);
if (existingCandidate && puzzleSession) {
setPuzzleRun(
advanceLocalPuzzleLevelWithWork(
puzzleRun,
buildPuzzleCandidateWorkSummary(
existingCandidate,
puzzleSession,
puzzleRun.currentLevelIndex + 1,
),
),
);
return;
}
if (!puzzleSession?.draft) {
const sourceSessionId = selectedPuzzleDetail?.sourceSessionId?.trim();
if (sourceSessionId) {
const { session } = await getPuzzleAgentSession(sourceSessionId);
setPuzzleSession(session);
if (session.draft) {
setIsPuzzleNextLevelGenerating(true);
const response = await executePuzzleAgentAction(session.sessionId, {
action: 'generate_puzzle_images',
candidateCount: 2,
});
setPuzzleOperation(response.operation);
setPuzzleSession(response.session);
const sourceSessionCandidate = pickPuzzleCandidateForLevel(
response.session.draft?.candidates ?? [],
puzzleRun.playedProfileIds,
);
if (sourceSessionCandidate) {
setPuzzleRun(
advanceLocalPuzzleLevelWithWork(
puzzleRun,
buildPuzzleCandidateWorkSummary(
sourceSessionCandidate,
response.session,
puzzleRun.currentLevelIndex + 1,
),
),
);
return;
}
}
}
throw new Error('当前拼图缺少可用于生成下一关的草稿会话。');
}
setIsPuzzleNextLevelGenerating(true);
const response = await executePuzzleAgentAction(puzzleSession.sessionId, {
action: 'generate_puzzle_images',
candidateCount: 2,
});
setPuzzleOperation(response.operation);
setPuzzleSession(response.session);
const generatedCandidate = pickPuzzleCandidateForLevel(
response.session.draft?.candidates ?? [],
puzzleRun.playedProfileIds,
);
if (generatedCandidate) {
setPuzzleRun(
advanceLocalPuzzleLevelWithWork(
puzzleRun,
buildPuzzleCandidateWorkSummary(
generatedCandidate,
response.session,
puzzleRun.currentLevelIndex + 1,
),
),
);
return;
}
setPuzzleRun(advanceLocalPuzzleLevel(puzzleRun));
} catch (error) {
setPuzzleError(resolvePuzzleErrorMessage(error, '准备下一关失败。'));
} finally {
setIsPuzzleNextLevelGenerating(false);
setIsPuzzleBusy(false);
}
}, [
isPuzzleBusy,
puzzleRun,
puzzleSession,
resolvePuzzleErrorMessage,
selectedPuzzleDetail,
]);
const leaveAgentWorkspace = useCallback(() => {
enterCreateTab();
@@ -1802,6 +2041,49 @@ export function PlatformEntryFlowShellImpl({
</motion.div>
)}
{selectionStage === 'big-fish-generating' && (
<motion.div
key="big-fish-generating"
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -12 }}
className="flex h-full min-h-0 flex-col"
>
<Suspense
fallback={<LazyPanelFallback label="正在加载大鱼吃小鱼生成面板..." />}
>
<CustomWorldGenerationView
settingText={
bigFishSession?.lastAssistantReply ?? '正在整理当前玩法草稿。'
}
anchorEntries={buildBigFishGenerationAnchorEntries(bigFishSession)}
progress={buildMiniGameDraftGenerationProgress(
bigFishGenerationState,
)}
isGenerating={isBigFishBusy}
error={bigFishError}
onBack={leaveBigFishFlow}
onEditSetting={() => {
setSelectionStage('big-fish-agent-workspace');
}}
onRetry={() => {
void executeBigFishAction({ action: 'big_fish_compile_draft' });
}}
onInterrupt={undefined}
backLabel="返回创作中心"
settingActionLabel={null}
retryLabel="重新生成草稿"
settingTitle="当前玩法信息"
settingDescription={null}
progressTitle="大鱼吃小鱼草稿生成进度"
activeBadgeLabel="草稿生成中"
pausedBadgeLabel="草稿生成已暂停"
idleBadgeLabel="等待返回工作区"
/>
</Suspense>
</motion.div>
)}
{selectionStage === 'big-fish-result' && bigFishSession?.draft && (
<motion.div
key="big-fish-result"
@@ -1884,6 +2166,49 @@ export function PlatformEntryFlowShellImpl({
</motion.div>
)}
{selectionStage === 'puzzle-generating' && (
<motion.div
key="puzzle-generating"
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -12 }}
className="flex h-full min-h-0 flex-col"
>
<Suspense
fallback={<LazyPanelFallback label="正在加载拼图生成面板..." />}
>
<CustomWorldGenerationView
settingText={
puzzleSession?.lastAssistantReply ?? '正在整理当前拼图草稿。'
}
anchorEntries={buildPuzzleGenerationAnchorEntries(puzzleSession)}
progress={buildMiniGameDraftGenerationProgress(
puzzleGenerationState,
)}
isGenerating={isPuzzleBusy}
error={puzzleError}
onBack={leavePuzzleFlow}
onEditSetting={() => {
setSelectionStage('puzzle-agent-workspace');
}}
onRetry={() => {
void executePuzzleAction({ action: 'compile_puzzle_draft' });
}}
onInterrupt={undefined}
backLabel="返回创作中心"
settingActionLabel={null}
retryLabel="重新生成草稿"
settingTitle="当前拼图信息"
settingDescription={null}
progressTitle="拼图草稿生成进度"
activeBadgeLabel="草稿生成中"
pausedBadgeLabel="草稿生成已暂停"
idleBadgeLabel="等待返回工作区"
/>
</Suspense>
</motion.div>
)}
{selectionStage === 'puzzle-result' && puzzleSession?.draft && (
<motion.div
key="puzzle-result"
@@ -1940,7 +2265,7 @@ export function PlatformEntryFlowShellImpl({
>
<PuzzleRuntimeShell
run={puzzleRun}
isBusy={isPuzzleBusy}
isBusy={isPuzzleBusy || isPuzzleNextLevelGenerating}
error={puzzleError}
onBack={() => {
setSelectionStage('puzzle-gallery-detail');
@@ -1955,6 +2280,17 @@ export function PlatformEntryFlowShellImpl({
void advancePuzzleLevel();
}}
/>
{isPuzzleNextLevelGenerating ? (
<div className="fixed inset-0 z-[120] flex items-center justify-center bg-slate-950/62 px-5 backdrop-blur-sm">
<div className="flex max-w-[18rem] flex-col items-center gap-3 rounded-[1.5rem] border border-white/12 bg-slate-950/92 px-6 py-5 text-center text-white shadow-[0_28px_80px_rgba(0,0,0,0.35)]">
<Loader2 className="h-6 w-6 animate-spin text-amber-200" />
<div className="text-sm font-bold"></div>
<div className="text-xs leading-5 text-white/68">
广
</div>
</div>
</div>
) : null}
</motion.div>
)}