fix: modification progress overlay, preview blink fix (v1.5.0)
This commit is contained in:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user