fix: modification progress overlay, preview blink fix (v1.5.0)

This commit is contained in:
admin
2026-03-18 20:30:31 +00:00
Unverified
parent 2ad51b6583
commit 2158d89314
4 changed files with 186 additions and 148 deletions

View File

@@ -4,7 +4,7 @@ import React, { useState, useEffect, useRef, memo } from "react";
import {
MessageSquare, Send, Code2, Palette, Search,
Trash2, Copy, Monitor, StopCircle, X, Zap, Ghost,
Wand2, LayoutPanelLeft, Play, Orbit, Plus, Key, ShieldCheck
Wand2, LayoutPanelLeft, Play, Orbit, Plus, Key, ShieldCheck, Wrench
} from "lucide-react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
@@ -517,6 +517,7 @@ export default function AIAssist() {
const [viewMode, setViewMode] = useState<"preview" | "code">("preview");
const [deviceSize, setDeviceSize] = useState<"full" | "desktop" | "tablet" | "mobile">("full");
const deviceWidths: Record<string, string> = { full: "100%", desktop: "1280px", tablet: "768px", mobile: "375px" };
const [isModifying, setIsModifying] = useState(false);
const [abortController, setAbortController] = useState<AbortController | null>(null);
// Agent suggestion state
@@ -639,6 +640,8 @@ export default function AIAssist() {
// Capture whether this is the initial plan phase (before any code generation)
const wasIdle = !isApproval && (assistStep === "idle" || assistStep === "plan");
// Detect if user is modifying existing code
if (assistStep === "preview") setIsModifying(true);
setIsProcessing(true);
if (assistStep === "idle") setAssistStep("plan");
@@ -775,6 +778,7 @@ export default function AIAssist() {
updateTabById(requestTabId, { history: [...aiAssistHistory, errorMsg] });
} finally {
setIsProcessing(false);
setIsModifying(false);
setAbortController(null);
setStatus(null);
}
@@ -1412,7 +1416,23 @@ export default function AIAssist() {
</div>
<div className="flex-1 overflow-auto relative bg-[#050505]">
{viewMode === "preview" && currentPreviewData ? (
{isModifying ? (
<div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-[#050505]/95 backdrop-blur-xl">
<div className="relative mb-6">
<div className="w-16 h-16 rounded-full border-[3px] border-blue-500/20 border-t-blue-500 animate-spin" />
<div className="absolute inset-0 flex items-center justify-center">
<Wrench className="h-6 w-6 text-blue-400 animate-pulse" />
</div>
</div>
<p className="text-sm font-black text-blue-200 uppercase tracking-[0.2em]">Modification in Progress</p>
<p className="text-[10px] text-blue-400/60 mt-2 font-semibold tracking-wider">Rewriting your artifact...</p>
<div className="flex items-center gap-1.5 mt-4">
{[0, 1, 2].map(i => (
<div key={i} className="w-1.5 h-1.5 rounded-full bg-blue-400 animate-bounce" style={{ animationDelay: `${i * 0.15}s` }} />
))}
</div>
</div>
) : viewMode === "preview" && currentPreviewData ? (
<CanvasErrorBoundary>
<div className="mx-auto transition-all duration-300 h-full"
style={deviceSize !== "full"